Möchten Sie Tipps erfahren, die Ihnen helfen können, ein besserer Elementor-Webdesigner zu werden? Elementor, einer der beliebtesten Website-Seitenersteller für WordPress, Elementor-Tipps, die Sie wissen sollten: Elementor bietet zahlreiche Funktionen, die die Umsetzung moderner Webdesigns vereinfachen.

Selbst wenn Sie mit seiner Beliebtheit vertraut sind, sind Ihnen möglicherweise die zeitsparenden Tipps nicht bewusst, die Ihrer Website-Entwicklung von großem Nutzen sein können.

In diesem Tutorial stellen wir Ihnen wertvolle Elementor-Tipps und -Tricks zur Verfügung, die Sie in die Lage versetzen, ein kompetenter Benutzer dieses unglaublichen Drag-and-Drop-Builder-Plugins zu werden. Bitte beachten Sie, dass für einige der Tipps, die wir weitergeben, die Premium-Version von Elementor erforderlich ist.

Ist Elementor gut für Anfänger?

Wie bereits erwähnt, hat Elementor aufgrund seiner intuitiven Benutzeroberfläche und benutzerfreundlichen Tools als einer der am häufigsten verwendeten Website-Seitenersteller an Popularität gewonnen.

Mit Elementor können Sie mithilfe seines Drag-and-Drop-Builders eine funktionale Website erstellen. Darüber hinaus finden es Anfänger ideal, da sie keine Programmierkenntnisse benötigen, um das Elementor-Plugin zu nutzen.

Entdecken Sie 14 wichtige Elementor-Tipps und Tricks, die Sie kennen sollten

Dieser Abschnitt bietet Webdesignern nützliche Tipps, um bei der Verwendung des Elementor-Seitenersteller-Plugins Zeit zu sparen.

Stellen Sie zunächst sicher, dass Sie das Elementor-Plugin auf Ihrer WordPress-Site installiert und aktiviert haben. Vorausgesetzt, Sie haben diesen Schritt abgeschlossen, finden Sie hier 14 wertvolle Elementor-Tipps für WordPress-Websites.

Verwenden Sie eine Starter-Vorlage

Elementor bietet eine Bibliothek vorgefertigter Vorlagen und Blöcke, die Sie als Ausgangspunkt für Ihre Designs verwenden können. Sie können diese Vorlagen und Blöcke vollständig anpassen, sodass Sie die Farben, Schriftarten und andere Designelemente ganz einfach ändern können, um sie an Ihr Branding anzupassen.

In diesem Tutorial finden Sie Elementor-Tipps, die Sie kennen sollten: Entdecken Sie wertvolle Elementor-Tipps und -Tricks, die Ihnen helfen, ein erfahrener Benutzer dieses unglaublichen Drag-and-Drop-Builder-Plugins zu werden. Klicken Sie auf eine der Vorlagen auf der Registerkarte „Seiten“, um sie auf Ihre Seite zu importieren. Es stehen sowohl kostenlose als auch Premium-Optionen zur Verfügung.

Für den Zugriff auf Elementor-Vorlagen mit dem Premium-Tag ist die Pro-Version des Elementor-Plugins erforderlich.

Um nur einen Abschnitt zu importieren, klicken Sie auf die Registerkarte „Blöcke“, um auf eine Liste der Seitenabschnitte zuzugreifen, die Sie in den Elementor-Builder importieren können.

Navigieren Sie mithilfe der Navigatorfunktion schnell zu einem Abschnitt

Wenn die Seite, die Sie erstellen, größer wird, kann das Auffinden von Abschnitten im Elementor-Builder schwierig werden. Die Navigator-Funktion zeigt jedoch eine hierarchische Liste aller von Ihnen hinzugefügten Abschnitte an. Sie können auf einen bestimmten Abschnitt klicken, um direkt dorthin zu navigieren.

Wechseln Sie zwischen Seiten mit dem Elementor Finder

Elementor-Tipps, die Sie kennen sollten: Wenn Sie an mehreren Seiten arbeiten, müssen Sie möglicherweise schnell aus dem Elementor-Builder heraus zu einer anderen Seite wechseln.

Anstatt die aktuelle Seite zu verlassen und die neue Seite über Ihr WordPress-Dashboard zu öffnen, können Sie die Finder-Option verwenden, um die Seite zu finden, die Sie bearbeiten möchten.

Um auf das Finder-Tool zuzugreifen, navigieren Sie zum Seitenleistenmenü des Elementor-Builders und klicken Sie auf das Symbol mit den drei horizontalen Linien.

Im Vorschaubereich wird ein neues Suchfeld angezeigt. Sie können den Namen der Seite eingeben, die Sie suchen möchten, und darauf klicken, um im Seitenersteller zu dieser Seite zu wechseln.

Nutzen Sie die Leistungsfähigkeit von Tastaturkürzeln

Elementor bietet mehrere Tastaturkürzel, die Ihnen dabei helfen, die Effizienz und Geschwindigkeit Ihres Arbeitsablaufs zu verbessern. Sie können beispielsweise die Tastenkombination Strg+S verwenden, um Ihre Änderungen sofort zu speichern, oder die Tastenkombination Strg+Z, um eine Aktion schnell rückgängig zu machen.

Das Bild unten zeigt eine Liste der verfügbaren Tastaturkürzel von Elementor.

Abschnitt als Vorlage speichern – Nützlicher Elementor-Tipp

Nehmen wir an, Sie möchten einen gesamten Abschnitt Ihrer Website auf mehreren Seiten wiederverwenden. Wenn Sie auf den Abschnitt als Vorlage zugreifen, sparen Sie viel Zeit.

Um einen Abschnitt als Vorlage zu speichern, klicken Sie mit der rechten Maustaste auf den Abschnitt, den Sie speichern möchten, und wählen Sie die Option „Als Vorlage speichern“.

Nach dem Speichern können Sie im Elementor-Builder im Abschnitt „Meine Vorlagen“ auf die Vorlage zugreifen und Ihre Abschnittsvorlagen von dort aus wiederverwenden.

Um die gespeicherte Vorlage zu Ihren Beiträgen oder Seiten in WordPress hinzuzufügen, können Sie auch den von Elementor generierten Shortcode verwenden.

Um den Shortcode zu erhalten, navigieren Sie in Ihrem WordPress-Dashboard zu Vorlagen >> Gespeicherte Vorlagen. Auf der Registerkarte „Gespeicherte Vorlagen“ wird eine Liste aller Vorlagen angezeigt, die Sie zuvor gespeichert haben.

Den Shortcode für jede Vorlage finden Sie in der Spalte „Shortcode“. Kopieren Sie den Shortcode, den Sie verwenden möchten, und fügen Sie ihn dem Beitrag hinzu, in dem Sie die Vorlage anzeigen möchten.

Das Speichern von Abschnitten als Vorlagen erleichtert die Wiederverwendung gemeinsamer Abschnitte auf verschiedenen von Elementor gestalteten Seiten. Die Verwendung dieser Funktion ist auch eine gute Möglichkeit, Doppelarbeit zu vermeiden.

Verwenden Sie das globale Widget – Elementor-Tipp

Mit dem globalen Widget können Sie ein Widget einmal erstellen und es auf mehreren Seiten oder Beiträgen wiederverwenden. Dadurch sparen Sie Zeit und können die Konsistenz auf Ihrer gesamten Website ganz einfach aufrechterhalten.

Um ein globales Widget zu erstellen, klicken Sie mit der rechten Maustaste auf das Widget-Symbol und wählen Sie aus den verfügbaren Optionen die Option „Als global speichern“ aus.

Sobald Sie das Widget zum Vorschaubereich hinzugefügt haben, können Sie es überall dort global bearbeiten und aktualisieren, wo das Widget verwendet wurde.

Alternativ können Sie auf die Schaltfläche „Verknüpfung aufheben“ klicken, um das importierte Widget vom globalen Widget zu trennen. Auf diese Weise können Sie das Widget nur auf dieser Seite bearbeiten und aktualisieren, während das globale Widget unberührt bleibt.

Aktualisieren Sie auf die Premium-Version von Elementor, bevor Sie diese Funktion nutzen, da sie ausschließlich mit Elementor Pro verfügbar ist.

Globale Einstellungen hinzufügen

Sie können die Funktion „Globale Einstellungen“ in WordPress verwenden, um ein Standardlayout für Ihre Seiten zu erstellen, wenn Sie mehrere Seiten auf Ihrer Website haben, die dasselbe Layout und dieselben Elemente verwenden.

Mit den globalen Einstellungen können Sie Schriftarten und Farben, Themenstile und Layouts anpassen sowie Änderungen an Ihrer Website-Identität und Lightbox vornehmen und so die Kontrolle über die globalen Elemente Ihrer Website an einem Ort konsolidieren.

Verwenden Sie Revisionen, um Änderungen rückgängig zu machen

Elementor verfolgt Ihre Designänderungen, sodass Sie bei Bedarf mühelos zu einer früheren Version zurückkehren können. Dies ist nützlich, um alle Änderungen rückgängig zu machen, die Ihnen nicht gefallen oder die zu Problemen mit Ihrem Design führen.

Es öffnet sich ein Abschnitt, der alle Aktionen enthält, die Sie zuletzt seit dem Öffnen des Editors ausgeführt haben. Sie können auf eine davon klicken, um die vorgenommenen Änderungen rückgängig zu machen.

Auf der Registerkarte „Revisionen“ finden Sie die Versionen an jedem Punkt, an dem Sie Ihre Elementor-Änderungen gespeichert haben. Oben wird die aktuelle Version angezeigt, während beim Scrollen nach unten ältere Versionen der Änderungen angezeigt werden.

Der Autor kann auch die Revisionen sehen, die die Person anzeigen, die die Änderung auf der Elementor-Seite vorgenommen hat. Wenn Sie Ihre Änderungen rückgängig machen möchten, wählen Sie einfach eine frühere Version aus dem Menü „Revisionen“ aus.

Sie können auf diese Funktion sowohl in der kostenlosen als auch in der Premium-Version von Elementor zugreifen.

Abschnitte und Stile kopieren und einfügen

Um einen Abschnitt auf Ihrer Elementor-Seite wiederzuverwenden, können Sie den Abschnitt von einer Seite im Elementor-Builder kopieren und auf einer anderen Seite einfügen.

Wenn Sie möchten, können Sie den aus einem anderen Abschnitt kopierten Stil auch in einen neuen einfügen. Dadurch wird verhindert, dass die Anpassung aller Ihrer Elementor-Abschnitte wiederholt werden muss.

Benutzerdefiniertes CSS – Profi-Elementor-Tipp

Mit der Option „Benutzerdefinierte CSS-Klasse“ können Sie CSS-Stile in jedes Element Ihrer Seite integrieren. Diese Option erweist sich als nützlich, um Ihr Design zu verfeinern und benutzerdefinierte Effekte zu integrieren. Sie werden diese Option wertvoll finden, wenn Sie über technisches Fachwissen verfügen.

Um benutzerdefiniertes CSS in Elementor hinzufügen, klicken Sie auf den Abschnitt, in dem Sie das benutzerdefinierte CSS anwenden möchten.

Bitte beachten Sie, dass diese Funktion am besten für Benutzer mit grundlegenden CSS-Kenntnissen geeignet ist. Wenn Sie mit technischen Aspekten nicht vertraut sind, können Sie dennoch den Drag-and-Drop-Builder verwenden, um Ihre Elementor-Website zu erstellen.

Hintergrundkarussell (Bild-Diashow)

Mit Elementor können Sie Bilder auswählen, die im Hintergrund eines Abschnitts angezeigt werden sollen. Diese Funktion erweist sich als hilfreich, wenn Sie eine Diashow im Hintergrund hinzufügen und gleichzeitig den Inhalt dieses Abschnitts beibehalten möchten.

Die Hintergrundbild-Diashow funktioniert ähnlich wie ein in eine Seite integriertes Bilderkarussell.

Um eine Diashow als Hintergrund in Elementor einbinden, klicken Sie auf das Symbol „Abschnitt bearbeiten“, woraufhin in der linken Seitenleiste Optionen für diesen Abschnitt angezeigt werden.

Sie können Bilder aus Ihrer Medienbibliothek auswählen. Klicken Sie auf das Plus-Symbol, um Bilder hinzuzufügen. Über das Plus-Symbol gelangen Sie zu Ihrer Medienbibliothek, wo Sie entweder ein neues Bild hochladen oder ein vorhandenes Bild auswählen können.

Sie können die Funktionsweise der Diashow weiter anpassen, indem Sie die Dauer, Animation, Hintergrundgröße und Position der Bilder ändern.

Fügen Sie Bildern einen Parallaxeneffekt hinzu

Parallaxen-Scrollen ist eine Technik, die 3D-Effekte auf Ihrer Seite erzeugt, indem sie den Eindruck erweckt, dass sich einige Elemente schneller bewegen als andere. Diese Technik bietet Benutzern ein atemberaubendes Surferlebnis.

Um Parallax-Scrolling-Effekte in Elementor zu aktivieren, öffnen Sie die verfügbaren Optionen, indem Sie auf den Abschnitt klicken, in dem Sie ihn aktivieren möchten.

Während Sie Ihre Seite bearbeiten, können Sie im Vorschaubereich eine Vorschau der Funktionsweise anzeigen. Denken Sie daran, Ihre Änderungen zu aktualisieren, nachdem Sie den Scrolleffekt hinzugefügt haben.

URL ersetzen – Elementor-Tipps

Elementor verfügt über eine Suchen-und-Ersetzen-Funktion, mit der Sie Links auf Ihrer Website aktualisieren können. Diese Funktion erweist sich bei der Migration von einer unsicheren HTTP-Verbindung zu einer sicheren SSL-Verbindung (HTTPS) als nützlich, da Sie damit die Links mühelos ersetzen können.

Erweitern Sie Elementor mit Add-ons von Drittanbietern

Elementor, ein robustes Plugin, enthält alle Funktionen, die Sie benötigen, um Ihre Website zum Laufen zu bringen. Sie können die Funktionen des Plugins jedoch erweitern, indem Sie verschiedene für Elementor verfügbare Add-ons verwenden.

Elementor-Tipps, die Sie kennen sollten: Wenn Sie Navigationsmenüs in Elementor entwerfen möchten, können Sie das Add-on „Sticky Headers and Menus“ verwenden, um das Benutzererlebnis zu verbessern. Mit diesem Add-on kann das Elementor-Plugin die Navigation Ihrer Website direkt über den Drag-and-Drop-Builder verwalten.

Sie können kostenlose und Premium-Add-ons für Elementor vom Elementor-Marktplatz herunterladen.

Über diesen Link können Sie auf Elementor-Addons zugreifen und diese herunterladen.

Abschluss

Elementor-Tipps, die Sie kennen sollten: Hier sind 14 nützliche Elementor-Tipps, die Ihren Elementor-Workflow optimieren können. Diese Tipps eignen sich sowohl für Anfänger als auch für erfahrene Webentwickler und ermöglichen es Ihnen, Ihre Effizienz und Produktivität mit Elementor zu steigern.

Elementor, ein funktionsreiches Plugin, kann Ihre Website potenziell verlangsamen. Um Ihre Elementor-Website zu beschleunigen, empfehlen wir Ihnen, in unserem Leitfaden zur Geschwindigkeitsoptimierung ein vollständiges Tutorial zu lesen.