Tel.: +49 (0) 231 97 390 682         Mail: info[at]seohit.de         Skype: SEOHIT_Do

Elementor Pro - Widgets in der Live Anwendung

Mit dem Pagebuilder Elementor könnt ihr supercoole WordPress Seiten bauen – und das ganz einfach via Drag & Drop und ohne Programmierkenntnisse.
In diesem Blogartikel habe ich die meisten der Elemente / Widget des WordPress Pagebuilders Elementor Pro in die Seite eingebaut, damit Ihr Euch live anschauen könnt, wie die Elemente auf einer Website aussehen. Dabei sind u.a. die Widgets Animierte Überschriften, Medien Karussel und Flip Box.

Viel Spaß beim Durchschauen! Falls Ihr übrigens Fragen habt, Fehler entdeckt oder Anmerkungen habt, dann schreibt mir gerne eine Mail an info@seohit.de 

(Klickt auf die jeweilige Überschrift für mehr Infos)

(*Alle Links zur Elementor Website in diesem Blogartikel sind Werbelinks. Solltet Ihr das Plugin nach einem Klick über einen der Links kaufen, wird das für Euch nicht teurer, aber ich bekomme eine Provision.)

Beispiel | Vorschau der Beiträge in jede Seite einbinden

Mit diesem Feature könnt Ihr sehr unkompliziert und übersichtlich Beiträge in jede (!) einzelne Seite und jeden (!) Blogbeitrag einbinden. Ihr seid also nicht mehr nur auf die Blogseite Eures Themes angewiesen, um Beiträge aufzulisten.

Ihr könnt hier auswählen wie viele Spalten angezeigt werden sollen und wie viele Beiträge insgesamt (bei mir jeweils 3). Zudem ist es auch möglich, nur Beiträge von bestimmten Kategorien, Autoren etc. anzuzeigen.
Zudem gibt es auch noch einige Anpassungsmöglichkeiten bzgl. der grafischen Gestaltung.

So sieht´s Live aus:

(Beispielposts ohne Inhalte)

Beispiel | Header und Footer individuell erstellen (Themebuilder)

Mit Elementor hat man seite Mai 2018 die Möglichkeit, den Header und Footer Bereich eines Themes individuell zur erstelle – geal welches Theme ihr benutzt. Dadurch hat sich Elementor genaugenommen vom Pagebuilder zum Themebuilder weiterentwickelt. So könnt Ihr via Drag & Drop Eure individuellen Header- und Footerbereiche erstellen. 
Auch bei diesem Blogbeitrag habe ich Header und Footer mit Elementor erstellt. Auch eine einfache Sticky-Header Funktion ist möglich, wie ihr beim Runterscrollen auf PC und Tablet seht (für Mobile ist die Funktion deaktiviert.
Zudem kann man mit Elementor Pro Menus überalle auf der Seite einbinden.

So sieht´s Live aus:

(An dieser Stelle binde ich nur mehrere Menus hier in der Seite ein – für die Ansicht von Header und Footer mit Elementor Pro könnt ihr einfach ganz nach oben oder ganz nach unten scrollen)

Beispiel | Call To Action Boxen

Bei Call to Action Boxenhabt ihr zwei Möglichkeiten, um Bilder, Text und Call to Action Buttons zu verknüpfen. Durch Zoom Effekte werden diese Boxen zu einem weiteren interaktiven Element für Eure Websitenbesucher.

So sieht´s Live aus:

(Die Boxen bzw. die Buttons sind hier nur Beispiele und nicht anklickbar.)

Netz News (Beispiel)

Tägliche News aus dem World Wide Web.
Jetzt testen

Netz News (Beispiel)

Tägliche News aus dem World Wide Web.
Jetzt Testen

Beispiel | Slider

Hier stellt Euch Elementor einen schöne Basis-Slider-Funktion zur Verfügung.  Vom Funktionsumfang kann man ihn zwar nicht mit Plugins wie Revolution Slider vergleichen, aber für viele Projekte ist sicherlich auch dieser Slider vollkommen ausreichend.

So sieht´s Live aus:

Elementor Pro stellt Euch einen
einfachen Slider mit Basis-Effekten
zur Verfügung.
Mehr Infos Slider Widget

Beispiel | Medien Karussel

Mit dem Medien Karussel könnt ihr Bilder oder Videos über den Screen laufen lassen und diese durch Mausklick abspielen lassen bzw. vergrößern oder verlinken.

So sieht´s Live aus:

(Beim Anklicken eines Feldes kann auch ein Youtube Video erscheinen. Wegen der DSGVO zeige ich das hier aber nicht live.)

Beispiel | Empfehlungs-Karussel

Empfehlungen sind mit das Beste, um eigene Leistungen zu bewerben und Vertrauen beim Internetnutzer zu erzeugen. Deshalb kann ich jedem nur empfehlen, auf jeden Fall das Empfehlungs-Karussel Widget von Elementor Pro zu benutzen.

So sieht´s Live aus:

Beispiel | Flip Box

Eines meiner absoluten Lieblingselemente sind die Flip Boxen. Diese kommen Beispielsweise auf meiner Unterseite Referenzen zum Einsatz. Sobald der Internetnutzer mit der Maus über die Box fährt, dreht sich die Flip Box und die Rückseite wird angezeigt. In dem Live-Beispiel hier habe ich aus einer meiner Referenzen eine kleine Werbung gemacht. Das blaue Feld auf dem Hintergrundbild war übrigens nicht so einfach einzufügen, dafür braucht man schon etwas CSS Kenntnisse. Aber eine Überschrift auf das Hintergrundbild zu legen, ist mit dem Widget absolut kein Problem.

So sieht´s Live aus:

(Flip Boxen mit zwei verschiedenen Mouseover Effekten)

Beispiel |

Eines weiteres meiner absoluten Lieblingselemente von Elementor Pro sind die animierten Überschriften. Gezielt und in der richtigen Dosis eingesetzt, sind diese eine echter Eyecatcher. Grundsätzlich unterscheidet man zwischen “Highlited” und “Rotated” und hat dann jeweils einige Effekte zur Auswahl. Welche das genau sind, zeige ich Euch im Folgenden:

So sieht´s Live aus:

Highlighted:

Effekt "Circle": This widget is

Effekt "Curly: This element is

Effekt "Underline: This widget is

Effekt "Double: This element is

Effekt "Double Underline": This widget is

Effekt "Underline Zig Zag": This element is

Effekt "Diagonal": This element is Amazing

Effekt "Strikethrough": This page is pretty cool

Effekt "X": Just 299,00€

Rotating:

Effekt "Typing": Elementor is a

Effekt "Clip": Elementor is a

Effekt "Flip": Elementor is a

Effekt "Swirl": Elementor is a

Effekt "Blinds": Elementor is a

Effekt "Drop In": Elementor is a

Effekt "Wave": Elementor is a

Effekt "Slide": Elementor is a

Effekt "Slide Down": Elementor is a

Beispiel | Blockzitat

Mit einem Blockzitat kann man sehr gut die Bedeutung wichtiger Punkte hervorheben und die Aufmerksamkeit der Leserinnen und Leser gewinnen. Auch hier bietet Elementor ein praktisches Widget, damit Ihr Blockzitate problemlos in Eure Website integrieren kann.

So sieht´s Live aus:

Mit einem Blockzitat kann man sehr gut die Bedeutung wichtiger Punkte hervorheben und die Aufmerksamkeit der Leserinnen und Leser gewinnen.

Max Mustermann

Beispiel | Anmelden - WordPress-Login

Für Euren individuellen  WP-Account auf jeder x-beliebigen Seite bietet Elementor Pro ein Login Widget. Dieses könnt Ihr bzgl. des Designs sehr individuell gestalten.
An dem Formular hier im Beispiel habe ich nichts verändert und ich kann mich ab jetzt auf dieser Seite mit meinem WordPress Account einloggen.

So sieht´s Live aus:

Beispiel | Countdown

Ihr habt ein Projekt oder ein Produkt, dass in Kürze online geht? Dann ist das Countdown-Widget von Elementor Pro vielleicht hilfreich. Auch hier gibt es wieder eine Menge Einstellungsmöglichkeiten bzgl. des Design. Ich habe hier nur die jeweiligen Ecken der Rahmen etwas abgerundet.

So sieht´s Live aus:

Tage
Stunden
Minuten
Sekunden

Beispiel | Preistabelle

Um die Preise Eurer Produkte übersichtlich und ansehnlich darzustellen, hält Elementor Pro zwei Widgets bereit. Das erste ist die Preistabelle. Ich habe an dem Basiswidget nur das Euro Zeichen statt des Dollarzeichens neben der  39.99 eingefügt.

So sieht´s Live aus:

Ich bin ein Titel

Ich bin eine Sub-Titel
39
99
Monatlich
  • Liste Artikel #1
  • Liste Artikel #2
  • Liste Artikel #3
Populär

Beispiel | Kontaktformular

Jeder, der schon mal versucht hat, ein Kontaktformular mit einem WordPress Plugin zu erstellen, weiß, dass das ein mitunter schwieriges Unterfangen sein kann – besonders was das Design betrifft. Auch hier bietet Elementor Pro mit dem entsprechenden Kontaktormular eine gute Alternative, die in kürzester Zeit top gestylt ist. Zudem bietet das Formular auch eine Honeypot-Funktion und eine ReCaptcha-Funktion gegen Spam an. Der einzige Wehrmutstropfen ist, dass man keine Dateien mimt dem Formular hochladen kann. Wenn man diese Funktion benötigt, muss man wieder auf Contact Form 7 und Co. zurückgreifen. Zur Gestaltung dieses Formulars (und das geht ja noch besser) habe ich ca. 5 Min. gebraucht.

So sieht´s Live aus:

(Und das Formular funktioniert natürlich auch)

Beispiel | Portfolio

Das Portfolio Widget funktioniert ähnlich wie das Beiträge Widget. Ihr könnt hier zunächst Portfolio Seiten anlegen und diese dann hier übersichtlich darstellen und verlinken. Auch hier gibt es wieder einige Einstellungsmöglichkeiten bzgl. der Auswahl und der Grafik.

So sieht´s Live aus:

(Das hier ist nur ein Beispiel ohne tatsächliche Portfolio Verlinkungen.)

Weitere Widgets / Elemente

Ich habe in diesemn Blogartikel nicht alle Elemente als Live-Vorschau integriert. Teilweise wegen der DSGVO und teilweise weil ich sie noch nicht so genau getestet habe. Im Folgenden findet Ihr eine Liste mit den noch nicht beschriebenen Widgets.

(Klick auf die jeweilige Überschrift um mehr Infos zu dem Widget auf elementor.com zu erhalten.)

Elementor Pro

Meine Bewertung:

Für mich hat sich der Kauf definitiv gelohnt. Elementor Pro bietet fast alle Features, um tolle Webseiten zu kreieren.
Zwar kann man auch immer noch mehr wollen bzw. man wünscht sich immer mal wieder die ein oder andere Extra Funktion, aber ein weiterer Vorteil ist, dass Elementor relativ neu auf dem Markt ist. Das Team entwickelt das Plugin stetig weiter und zum Teil werden auch Wünsche aus der Community direkt inss Plugin integriert.

(*Alle Links zur Elementor Website in diesem Blogartikel sind Werbelinks. Solltet Ihr das Plugin nach einem Klick über einen der Links kaufen, wird das für Euch nicht teurer, aber ich bekomme eine Provision.)

© Copywright SEOHIT 2018 | Alle Rechte vorbehalten
SEOHIT
Elementor Pro
51star1star1star1star1star