Gastbeitrag

Elementor Pro - Ein Überblick über Funktionien, Widgets & Co.

blank

Die kostenlose Version des Pagebuilders Elementor ist mit über 5 Millionen eines der beliebtesten WordPress Plugins. Und das absolut zu Recht: Die einfache Bedienbarkeit und die zahlreichen nützlichen Funktionen der Free Version ermöglichen die Erstellung toller WordPress-Seiten auch für Nicht-Programmierer. Noch mehr spannende Funktionen und Features bietet Dir Elementor mit seiner Pro Version. Falls Du aktuell mit dem Gedanken spielst, Dir Elementor Pro zu zulegen, findest Du in diesem Artikel einen Überblick zu den neuen Funktionen und Widgets wie Themebuilder, Popuo-Builder, Formular-Widget & Co. der kostenpflichtigen Variante.

Eine schöne Sache schon mal vorweg: So gut wie alle zusätzlichen Funktionen bauen auf der kostenlosen Elementor Version auf, das heißt: Header, Pop-Ups & Co. kannst Du genauso einfach und mit dem gleichen Grundsystem erstellen, das du von der kostenlosen Elementor Version gewohnt bist.

1. Themebuilder – Header, Footer & Co. selber gestalten

Ein Riesenvorteil von Elementor Pro ist, dass Du nicht mehr auf Themes und deren jeweiligen Funktionen angewiesen bist, sondern Header, Footer, 404 Fehlerseiten etc. jetzt selber ganz einfach via Elementor individuell gestalten kannst. Passend dazu hat Elementor mit „Hello Elementor“ übrigens auch ein eigenes Theme entwickelt, das dir kostenlos bei WordPress zur Verfügung steht. Denn irgendein Theme musst Du ja benutzen. Dieses hauseigene Theme beschränkt sich dabei auf die notwendigsten Funktionen, weil Du ja grundsätzlich so gut wie alles über Elementor individuell gestalten kannst. Ich nutze das Theme „Hello Elementor“ meistens nur noch, um im „Customizer“ das Favicon für die jeweilige Website einzufügen. Den Rest erledige ich mit Elementor Pro.

1.1 Header und Footer

Besonders die individuelle Anpassung von Header und Footer gestaltet sich bei vielen WordPress Themes schwierig. Dieses Problem ist mit Elementor Pro Geschichte. Im WordPress Hauptmenu kannst Du unter „Templates“ den Reiter „Themebuilder“ auswählen und anschließend „Neu hinzufügen“ anklicken.

Dann wählst Du Kopfzeile aus und kannst mit der Gestaltung Deines Headers beginnen.

Vor Beginn der Header-Gestaltung hast Du zunächst die Auswahl einen Block bzw. eine Vorlage für den Header zu wählen, ein eigenes Template einzufügen oder den Header komplett neu zu gestalten. Die Vorlagen-Blöcke sind übrigens auch ein exklusiver Teil der Pro Version.

 

Wenn Du das erste Mal einen Header komplett neu erstellst, funktioniert das im Prinzip genauso als würdest Du einen Abschnitt für den Body erstellen. Hier kannst Du zunächst beispielsweise einen Abschnitt mit zwei Spalten auswählen und alle Grundeinstellungen für den Abschnitt treffen. Anschließend kannst Du z.B. in der linken Spalte (auf der Desktop-Version) das Bild-Widget oder Site-Logo-Widget für Dein Logo einfügen und auf deine Startseite verlinken.

Zum Einfügen des Menus auf der rechten Seite des Beispielheaders benötigst Du mit dem Navigationsmenu Widget eines der neuen Widgets der Pro Version. Hier kannst Du dich zunächst für ein Menu entscheiden , das in der Navigation erscheinen soll und das Du vorher standardmäßig via „WordPress → Design → Menu“ erstellt hast.

 

Anschließend kannst Du dann zahlreiche weitere Einstellungen zum Design treffen, die Du auch von anderen Elementor Widgets kennst. Im folgenden Beispiel habe ich eine Header Vorlage aus der Elementor Pro Libary gewählt.

Sobald Du deinen Header erstellt hast, kannst Du ihn wie gewohnt abspeichern. Hier hast Du  die zusätzliche Möglichkeit, den Header nur auf bestimmten Seiten oder Beiträgen anzeigen zu lassen bzw. mehrere Header für Deine Website erstellen. 

Eine Anmerkung noch dazu: Natürlich kann man auch verschiedene Header für die Mobile-Version oder Desktop-Version einer Website erstellen. Hierzu verwendet man einfach die Standard-Responsive-Einstellungen, die Elementor anbietet. Konkret vergebere ich dann einzelne Abschnitte für die Desktop-Version, wenn ich diese nur auf Smartphones anzeigen lassen möchte.

1.2. Posts, Archives & Co.

Außer Header & Foter kannst Du auch für viele andere Bereiche den Elementor Therme Builder verwenden und passende Templates zu erstellen. U.a. kannst Du für Posts und Pages Grundlayouts erstellen, die Du dann nur noch bei neuen Einträgen inhaltlich anpassen musst.
Für die Layouterstellung von Archiven eignet sich der Theme Builder ebenfalls. Hier stehen dir auch noch Extra Widgets wie z.B. „Archive Title“ oder „Beiträge archivieren“ zur Verfügung, die dann die Texte und Inhalte automatisch für die entsprechende Kategorie anpassen.
Auch die 404-Fehlerseite und Suchergebnisse kannst Du mithilfe des Themebuilders designen, um das Nutzererlebnis für Deine Webseitenbesucher zu verbessern.

2. Popup Builder

Den Popup Builder von Elementor kannst Du für Deine Marketingmaßnahmen einsetzen. Die zahlreichen Einstellungen ermöglichen Dir zudem, deine Webseitenbesucher nicht zu sehr damit zu nerven, sondern die Popups wirklich gezielt einzusetzen. Die Erstellung erfolgt im Prinzip ähnlich wie beim Themebuilder. Zunächst erstellst Du ein Popup unter „WP Dashboard -> Templates -> Popups“ und anschließend kannst Du eine Vorlage auswählen oder das Popup komplett selbst designen.
blank

2.1 Einstellungen & Gestaltung des Popups

Beim Elementor Popup sind zunächst die Vielzahl an Basis Einstellungen interessant die Dir über das Zahnrad Symbol im Elementor Panel zur Verfügung stehen. Hier kannst Du die Breite des Popups bestimmen, die Eingangs- und Ausgangsanimation aussuchen, den Close Button ein- oder ausblenden und vieles mehr.
Beim Design stehen Dir wieder alle Elementor Widgets der kostenlosen und Pro Version zur Verfügung, so dass Du das Popup komplett nach Deinen Vorstellungen designen kannst.

2.2 Conditions

Wenn Du das Popup speicherst, kannst Du zunächst unter „Conditions“ wieder wählen, ob das Popup auf jeder Seite deiner Website oder nur auf speziellen Seiten angezeigt werden soll. Ich blende beispielsweise Popups manchmal nur auf den Blogartikeln meiner Webseite ein.

2.3 Triggers

Mindestens genauso interessant sind die Einstellungsmöglichkeiten unter „Triggers“. Hier wählst Du aus, wann das Popup während des Seitenbesuchs eingeblendet wird. Folgende Auswahlmöglichkeiten stehen Dir zur Verfügung:

 

– OnPage Load 
– OnScroll
– OnScroll to Element
– OnClick
– After Inactivity
– OnPage Exit Intent

2.4 Advanced Rules

Die Adcanced Rules bieten dir noch weitere Möglichkeiten, die Einblendung des Popups zu steuern. Beispielsweise kannst Du die maximale Anzahl von Einblendungen hier definieren, um dem Webseitenbesucher nicht zu sehr auf den Keks zu gehen.
Zu den Einstellungsmöglichkeiten bei den Advanced Rules gehören u.a.:

– Show after X Page Views
– Show after X Sessions
– Show up to X times
– When arriving from specific URL
– Show when arriving from (z.B. Suchmaschinen)
– Hide for logged in users
– Show on devices
– Show on browsers

3. Widgets

Neben dem Theme- und dem PopUp Builder hält Elementor Pro über 20 allgemeine zusätzliche Widgets bereit, die für die Erstellung von modernen WordPress Seiten sehr hilfreich sind. Zudem kommen noch zahlreiche Spezial-Widgets wie beispielsweise Woo-Commerce Widgets oder Widgets für die Website wie z.B. Website Logo oder Seitentitel. Im Folgenden zeige ich Dir die Widgets, die auf meinen Websites besonders häufig zum Einsatz kommen.

3.1 Beiträge Widget

Mein absoluter Favorit bei den Elementor Pro Widgets ist das Posts Widget. Damit kannst Du Vorschaukacheln Deiner WordPress Beiträge in jede beliebige Seite (oder auch in jeden beliebigen Beitrag) individuell einbinden. Dabei stehen Dir zahlreiche Sortier- und Stylefunktionen zur Verfügung. Wenn Du wissen möchtest, wie so eine Beitrasvorschau live aussieht, kannst Du Dir das Posts Widget im Einsatz auf meinem eigenen Blog anschauen.

Zunächst stehen dir beim Layout verschiedene Oberflächendesigns zur Auswahl und anschließend kannst Du dann bestimmen, wie viele Spalten zu sehen sind, wie viele Vorschauen von Beiträgen insgesamt angezeigt werden sollen, du kannst die Bildproportionen bestimmen oder festlegen, ob es einen Textauszug gibt u.v.m.

Inhalte einzlener Vorschaukacheln ändern

Konkret werden viele Dinge für die jeweilige Vorschaukachel aus den Standard-WordPress-Einstellungen des jeweiligen Beitrags übernommen. Beispielsweise wird das Beitragsbild oder der Beitragstitel für die Vorschau der Beiträge verwendet und der Textauszug kann auch direkt bei der Standardbearbeitung eines WordPress-Beitrags verfasst werden. Du klickst also einfach auf „Beitrag bearbeiten“ im WordPress Dashboard und kannst dann die Einstellungen für jeden Beitrag vornehmen bzw. ändern.

Beim Posts-Wiidget kannst Du anschließend unter „Abfrage“ bestimmen, welche Beiträge überhaupt angezeigt werden sollen. Bei „Include by“ kannst Du hier zunächst zwischen „Author“ und „Term“ wählen. Du hast also die Möglichkeit nur Beiträge von bestimmten Verfassern oder aus bestimmten Kategorien anzeigen zu lassen.

Unter dem Reiter „Ausschliessen“ (Exclude by) hast Du zudem die Möglichkeit. bestimmte Beiträge auszuschließen. Beispielsweise ist die Funktion „Exclude by“ → Aktueller Beitrag sehr praktisch, wenn Du das Posts Widget auf einem Blogbeitrag verwendest. So kannst Du verhindern, dass der aktuelle Blogbeitrag selbst angezeigt wird, wenn Du z.B. „Weitere Blogbeiträge“ auflisten möchtest.

Zudem hast Du noch die Möglichkeit nur Posts aus einem bestimmten Zeitraum anzuzeigen und Einstellungen zur Sortierung und Paginierung vorzunehmen. Unter Style hast Du dann wieder die bekannten Elementor-Style Möglichkeiten und kannst im Prinzip jeden Teil deiner Beitragsvorschau nach belieben designen und gestalten.

3.2 Formular-Widget

Mit dem Formular-Widget spart man sich in der Regel ein Formular-Plugin wie Contact Form 7, Caldera Forms & Co. Grundsätzlich stehen Dir hier verschiedene Feldtypen wie Text, E-Mail, Telefon, Message, Akkzeptanz, HTML u.v.m. zur Verfügung. Zur Spamvermeidung kannst du eine Honeypot oder Recaptcha Funktion einbinden. Du kannst auch die Spaltenbreite der einzelnen Formularfelder variieren, was allein schon dabei hilft, dem Formular einen guten Look zu geben.

Besonders einfach ist es auch, ein Multistep Formular, beispielsweise für Bewerbungen, zu erstellen. Dazu wählst Du einfach bei Typ „Step“ aus und schon werden alle Felder unterhalb von „Step“ erst im zweiten Schritt des Formulars angezeigt.

Aktionen nach dem Versenden
Diese lohnt es sich definitiv bei der Erstellung eines Formulars genauer anzuschauen. Das Formular-Widget beinhaltet hier zahlreiche praktische Aktionen, die für dein Business hilfreich sein können. Beispielsweise kannst Du den Nutzer auf eine eigene „Formular erfolgreich versendet“-Seite weiterleiten oder Du kannst eine direkte Antwortmail an den Nutzer senden. Diese Funktion verwende ich bei einem Kunden, um den Nutzern in der seperaten Antwortmail die Kontodaten zur Kursbuchung mitzuteilen. Außerdem kannst Du das Formular auch mit Mailchimp verknüpfen, Popups nach dem Versenden einbinden u.v.m. Das Elementor Form Widget ist also eine wirkliche Alternative zu bekannten WordPress-Premium-Plugins im Formularbereich. Ein Styletipp: Wenn Du das Formular in einen inneren Abschnitt als einziges Element einbindest, kannst Du sogar eine Slideshow über den inneren Abschnitt im Hintergrund des Formulars einbinden.

Besonders einfach ist es auch, ein Multistep Formular, beispielsweise für Bewerbungen, zu erstellen. Dazu wählst Du einfach bei Typ „Step“ aus und schon werden alle Felder unterhalb von „Step“ erst im zweiten Schritt des Formulars angezeigt.

3.3 Weitere Interessante Widgets

3.3.1 Vorlage-Widget

Das Vorlage-Widget ist super praktisch, wenn Du beispielsweise auf mehreren Unterseiten die gleichen Abschnitte verwendest. Du kannst zunächst unter „Wordpress → Templates“ ein individuelles Template bzw. einen Abschnitt erstellen und dann auf den entsprechenden Seiten über das Template Widget einfügen. Der große Vorteil dabei: Wenn Du beim zentral gespeicherten Template etwas änderst, werden diese Änderungen automatisch auf allen Seiten übernommen, bei denen Du das Vorlage-Template Widget verwendest.

3.3.2 Animated Headlines
Mit diesem Widget werden Überschriften animiert. Grundsätzlich kann man hier zwischen den Stilen „Highlighted“ und „Rotating“ auswählen. Bei „Highlighted“ wird die Überschrift beispielsweise unterstrichen oder farblich eingekreist. Bei „Rotating“ kann man einzelne Wörter rotieren lassen, also beispielsweise das letzte Wort einer Überschriften wie folgt variieren und rotieren lassen: Unser Service ist individuell – professionell – günstig.

3.3.3 Flip Box Widget

Ein nettes Widget um für den Nutzer den Webseitenbesuch etwas spannender zu machen ist das Flip Box Widget. Hier wird zuerst die Vorderseite (in Form einer Karte) angezeigt und sobald der Nutzer mit der Maus über die Vorderseite fährt, wird auf den Inhalt der Rückseite „geflippt“ – beispielsweise in Form einer Drehung.

3.3.4 Karussel Widgets

Mit Elementor Pro erhältst Du zum einen ein Medienkarussel, mit dem Du u.a. Videos sehr einfach in die Website einbinden kannst und zum anderen auch ein Empfehlungs-Karussel. Dieses nutze ich auf meiner Seite, um den Nutzern Kundenmeinungen bzw. Referenzen von mir zu präsentieren und so den Trust meiner Leistungen entsprechend zu erhöhen.

3.3.5 Preis Widgets

Mit „Price Table“ und „Price List“ stehen dir zwei Widgets zur Verfügung, um deine Preise ansprechend auszuzeichnen. Die Preistabelle eignet sich dabei besonders gut, um 2-3 verschiedene Angebote mit den jeweiligen Leistungen im Vergleich nebeneinander darzustellen. Die Preisliste ist besonders praktisch, um Speisekarten in deine Webseite zu integrieren statt eine besonders auf Smartphones schlecht lesbare PDF-Datei hochzuladen.

3.3.6 Neue Widgets: Table of Content & Hotspsots

Das schöne bei Elementor Pro ist auch, dass ab und zu auch noch neue Widgets hinzukommen. In letzter Zeit war beispielsweise das Inhaltsverzeichnnis-Widget dabei mit dem man Nutzern die Navigation besonders von Blogbeiträgen extrem erleichtern kann. Ich glaube hier weiß jeder, der ab und zu Blogartikel liest, sofort, was ich meine. Auch das Hotspot Widget ist sehr nett, besonders um User auf Karten und Infografiken mit zusätzlichen Informationen zu versorgen. Wie man es bei Elementor gewohnt ist, sind die beiden Widgets auch extrem einfach zu bedienen und beinhalten eine Vielzahl von Content- und Style-Möglichkeiten.

3.3.7 Noch mehr Widgets

Alle Widgets kann ich an dieser Stelle natürlich nicht näher beschreiben und viele sind auch selbsterklärend. Zu den restlichen Pro-Widgets gehören u.a.


– Slider Widget
– Call to Action Box
– Gallery
– Lottie Animation
– Facebook Embed
– Share Buttons
– Blockquote
– Countdown
– Login
– und vieles mehr

4. Weitere Funktionen von Elementor Pro

Zusätzlich zu den bisher aufgelisteten Funktionen von Elementor Pro gibt es noch ein paar Dinge, die dir beim Erstellen von individuellen WordPress Websites behilflich sind.

4.1 Zusätzliche Bewegungseffekte

Bei Elementor Free stehen für jedes Widget, jede Spalte und jeden Abschnitt schon verschiedene Eingangsanimationen zur Auswahl. Mit Elementor Pro kommen noch standardmäßog „Sticky Effekt“ und „Scrolling Effects“ dazu. Der Sticky Effect dürfte den meisten bekannt sein. Hier kannst Du einen Abschnitt oder ein Widget beispielsweise am oberen Rand der Website fixieren, so dass das entsprechende Elemente auch beim Runterscrollen weiterhin zu sehen ist. Mit den Scrolling Effects bringst Du noch mehr Action in Deine Seite. So kannst Du u.a. den Hintergrund eines Abschnitts automatisch etwas nach links verschieben lassen, wenn der Nutzer zu der entsprechenden Stelle scrollt.

4.2 Zusätzliche Templates für Seiten,Blöcke & Popups

Mit der kostenpflichtigen Version bekommst Du noch ein paar mehr vorgefertigte Templates für Seiten und Blöcke.

Bei den Seiten sind in der Pro Version u.a. folgende vorgefertigte Designs enthalten:

 

– Beauty Salon
– Travel Blog
– Japanese Restaurant
– Online Course
– Barber Shop
– Luxury Real Estate

 

 

Bei den Blöcken gibt es beispielsweise Vorlagen für:

 

– Kontakt
– Newsletter
– Header
– Footer
– Archive

Auch zusätzliche Popup Templates sind wie schon gezeigt bei Elementor Pro vorhanden bzw. können direkt beim Erstellen eines Popups ausgewählt werden.

4.3 Dynamische Attribute

Dynamische Attribute kannst Du u.a. bei Call-To-Actions Button einbinden. Mit einem Klick auf den Button gelangt der User dann nicht auf eine andere Seite, sondern Du kannst z.B. ein Popup oder eine Lightbox mit Bild oder Video einblenden.

4.4 Woo Commerce Funktionen

Falls Du überlegst einen Onlineshop zu erstellen oder einen Relaunch Deines jetzigen Shops durchzuführen, ist dies mit der Kombinationen aus WooCommerce und Elementor Pro definitiv möglich. Wie schon kurz beschrieben, gibt es bei Elementor Pro spezielle Woo Commerce Widgets & Features. Hier zu gehören beispielsweise: – Add to Cart Button – Product Price – Product Image – Product Rating – WooCommerce Breadcrumbs – WooCommerce Pages

Formular Beispiel

Beiträge Widget Beispiel

Diese Seite ist Wundervoll

Diese Seite ist Wundervoll

blank

Der Eiffelturm ist das Wahrzeichen von Paris.

Add Your Tooltip Text Here
Add Your Tooltip Text Here
Add Your Tooltip Text Here
Add Your Tooltip Text Here

Gib hier deine Überschrift ein