Elementor Widgets – 10 grundlegende Widgets exklusiv auf einen Blick

Elementor ist einer der beliebtesten Page Builder für das CMS WordPress. Mit Elementor* kannst du deine Website ganz einfach individuell gestalten. Durch die einfache Drag & Drop Methode der sogenannten Elementor Widgets können auch Nutzer ohne Programmierkenntnisse ihre Website personalisieren.

In diesem Beitrag gebe ich dir daher eine kurze Anleitung zu den verschiedenen grundlegenden Elementor Widgets. Grundlegende Elementor Widgets sind kostenlos im Elementor Abonnement dabei.

Das Pro Abonnement bietet dir viele weitere coole Widgets, mit denen du deine Website noch individueller gestalten kannst. Die Preise von Elementor Pro findest du auf der Elementor Website.

Wenn du Elementor als Pagebuilder noch nicht kennst, kannst du dir auch unseren ultimativen Elementor Guide durchlesen – hier erfährst du alles relevante zu Elementor!

Innerer Abschnitt

Das Elementor Widget „Innerer Abschnitt“ ermöglicht dir in der gewählten Struktur nachträglich eine weitere Aufteilung einer der Strukturfelder. Es teilt also das gewählte Strukturfeld noch einmal und halbiert es vorerst. Die inneren Abstände können aber später in den Widget-Einstellungen noch personalisiert und individualisiert werden. Das bedeutet, dass die anderen Felder abstands- und größentechnisch gleich bleibe, das bearbeitete Feld jedoch noch einmal geteilt und dadurch neu eingestellt werden kann. Bedenke aber, um die Pagespeed deiner Seite nicht unnötig zu verlangsamen, arbeite immer mit so wenig ineinander gesetzten Strukturen. Zusätzlich kannst du einen Innerer Abstand Widget nicht in ein vorhandenes Innerer Abstand Widget gesetzt werden.

Anders als bei allen weiteren Widgets, wird das Innerer Abschnitt Widget genauso bearbeitet, wie die Strukturabschnitte. Es gibt also keine inhaltliche Einstellungen vorzunehmen, sondern Layout-, Stil-, und Erweiterte-Einstellungen.

In den Layout-Einstellungen arbeitest du an der Spaltenbreite und stellst die Ausrichtungen, also vertikal und horizontal, ein. Zu Beginn sind diese immer als „Vorgabe“ gespeichert. Zum Ändern nutzt du einfach das Drop Down Menü. Der Widget Abstand und die HTML-Tags sind auch variabel einzustellen.

Im den Einstellungen den Stil des Widgets betreffend, stellst du allgemein den Hintergrund, mögliche Rahmen und die Typografie von möglichen Textabsätzen ein.

Was den Hintergrund betrifft, so kannst du verschieden detaillierte Angaben und Einstellungen vornehmen. In den drei folgenden Abbildungen siehst du die verschiedenen Einstellungsmöglichkeiten.

Das erste Bild zeigt die reine Einstellung einer Farbe oder, wenn gewünscht, eines Bildes. Im zweiten Bild siehst du die Einstellungen einen möglichen Farbverlauf entsprechend und die dritte Abbildung zeigt noch spezifischere Einstellungen auf, die bei der Wahl eines Bildes getroffen werden können.

Im den Einstellungen den Stil des Widgets betreffend, stellst du allgemein den Hintergrund, mögliche Rahmen und die Typografie von möglichen Textabsätzen ein.

Die Rahmen und Typografie kannst du auch hier noch genauer generieren und Änderungen zu den Voreinstellungen vornehmen.

Beachte aber, dass du Einstellungen wie Farben und Typografie am Besten global vornimmst. Wie du das machst erfährst du weiter unten im Beitrag unter dem Punkt „Überschrift“.

Globale Einstellungen sind Einstellungen, die für deine gesamte Website gelten und die du dementsprechend nicht immer manuell vornehmen und aktualisieren musst, sondern in den globalen Einstellungen einmal speicherst und die im Folgenden von Elementor immer wieder aufgegriffen werden können.

Die erweiterten Einstellungen sind noch detailliertere Vorkehrungen, die du zur Anzeige des Elementor Wigets treffen kannst. Diese Einstellungen decken sich oftmals mit den erweiterten Einstellungen anderer Widgets und sind somit im Folgenden Beitrag nicht immer ausgiebig erklärt.

In den erweiterten Einstellungen kannst du nun vor allem zusätzliche Abstände generieren. Diese beziehen sich nun nicht mehr nur auf das Widget, sondern auf das Widget im Bezug auf das Strukturfeld indem sich das Elementor Widget befindet.

Auch kannst du hier Bewegungseffekte, Responsive, Attribute und erweiterte individuelle CSS Einstellungen vornehmen. Da dies teilweise schon sehr ins Detail geht und in der Regel auch nicht nötig zu ändern sind, werde ich diese in dieser Anleitung der grundlegenden Elementor Widgets nicht weiter ausführen.

Überschrift

Zuerst klickst du auf „Globale Farben“. Hier wählst du alle Farben, die du für deine Website brauchst. Hintergründe, Schriftarten, Balken, Design-Einstellungen von Widgets, sie alle greifen später auf genau diese Farben zurück. Füge also ruhig weitere Farben hinzu, um diese in Zukunft global auswählen und nutzen zu können. Wenn du damit fertig bist, dann speichere deine Änderung einmal kurz ab und gehe dann eine Seite zurück, wieder auf die Website-Einstellungen.

Als nächstes werden die verschiedenen Schriftarten, die du nutzen möchtest, über Globale Schriftarten definiert. Auch hier sind die oberen vier Schriftarten meist bereits vorgegeben, du kannst sie also einfach ändern. Wenn du mehr Schriftarten als diese vier brauchst, dann füge gerne weitere hinzu und benenne sie nach deinen Wünschen. Wichtig auch hier, wenn du fertig bist, speichere deinen Fortschritt.

Beim Inhalt trägst du zuallererst den Titel des Widgets ein. Er ist auch das, was du auf deiner Seite als Überschrift siehst. Der Titel ist also der dargestellte Text. Achte am Besten darauf, dass du immer in dem vorgegebenen Textfeld im Elementor Menü arbeitest und Texte verfasst, da das Programm oftmals fehlerhaft arbeitet, wenn du im Feld auf der Seite arbeitest. Hier kannst du nun auch mögliche Links oder Einstellungen zu Größe, HTML-Tag und Ausrichtung innerhalb der Struktur vornehmen.

Bild

Nach dem Einfügen des Bildes hast du folgenden Möglichkeiten das Widget detailliert und deinen Wünschen entsprechend zu bearbeiten und auch im Laufe der Zeit immer wieder zu aktualisieren.

Inhalt: Bild auswählen und Alternativtext passend benennen. Dann Bildgröße einstellen, die Ausrichtung des Bildes innerhalb der gewählten Struktur wählen und Einstellungen wie „Bildunterschrift“ und „Link“ beliebig vornehmen.

Stil: Hier werden Einstellungen wie Breite, Höchstbreite und Höhe vorgenommen, sowie die Anzeigeart des Bildes. Soll es ausge-bleicht aussehen, oder einen Filter oder sogar Rahmen haben und soll sich etwas ändern, wenn der Nutzer mit der Maus über das Bild hovert etc. Diese Überlegungen sind besonders dann wichtig, wenn man dem Bild z.B. einen Link zuordnet, damit der Nutzer relativ schnell und leicht erkennt, ob das Bild einfach nur eine Grafik ist oder ihn über den Link auf eine weitere Seite führt.

Texteditor

Bei der inhaltlichen Bearbeitung des Texteditor Widgets stellst du nicht nur den Text selbst ein (arbeite hier möglichst auf der „Visuell“ Ebene, sondern fügst bei Bedarf auch Bilder oder andere Dateien hinzu. Auch kannst du festlegen, ob du Initiale anzeigen möchtest und die Spalten oder den Spaltenabstand ändern möchtest.

In den Stil-Einstellungen des Elementor Widgets, stellst du die Ausrichtung des Textes innerhalb der vorgegebenen Struktur ein, sowie Textfarbe, Typografie und Textschatten.

Video

Wenn du das Video Widget in das gewünschte Strukturfeld eingesetzt hast, öffnen sich links auf deinem Bildschirm die Widget-Einstellungen dieses Elementor Widgets.

Hier kannst du nun für den Inhalt des Elementor Widgets Einstellungen, wie zum Beispiel die Quelle des Videos, den dazugehörigen Link und Start- und Endzeit festlegen.

Zusätzlich kannst du verschiedene Video-Optionen festlegen. Auf der linken Seite siehst du die Voreinstellungen des Widgets, die du beliebig ändern kannst.

Stiltechnisch kannst du bei dem Video Widget lediglich die Anzeige, also die Seitenverhältnisse ändern, oder zusätzliche CSS-Filter einfügen.

Button

Button, wie links zu sehen, werden in der Regel als Call-to-Action genutzt, um die Besucher der Website aufzufordern auf sie zu klicken. Der Text in dem Button ist dabei individuell generierbar, sollte aber deutlich aufzeigen, was von den Besuchern erwartet wird.

Was die Widget-Einstellungen angeht, starten wir auch hier wieder mit dem Inhalt des Elementor Widgets.

Hier werden Werte, wie der Typ des Button Widgets, der Text auf dem Button und der weiterleitende Link festgelegt.

Auch kannst du die Größe, Ausrichtung und mögliche Icons für den Button generieren.

Im Stilbereich fährst du dann allgemein fort, wie du es von anderen Elementor Widgets bereits kennst:

Die Typografie und jegliche benutzte und noch zu benutzende Farben sollten generell immer global generiert werden und dann in den jeweiligen Widget-Einstellungen nur noch aufgegriffen werden.

Hier kannst du auch wieder unterschiedliche Einstellungen vornehmen, wie zum Beispiel das Hovern über dem Button aufgegriffen und angezeigt werden soll.

Zusätzlich kannst du Rahmentypen, Schatten und Innenabstände manuell generieren.

Alle weiteren Einstellungen nimmst du schließlich über die erweiterten Einstellungen des Elementor Widgets, den Einstellungen des Strukturfeldes oder global vor.

Trenner

Inhaltlich kannst du Dinge wie den Stil er Linie, z.B. durchgezogen, gepunktet, Pfeile etc., die Breite der Linie, die Ausrichtung und ein mögliches Icon bearbeiten.

Im Stilbereich änderst du, wie bei den anderen Elementor Widgets das Design. Im Fall des Trenners sind das Dinge wie Farbe, Breite und Lücke.

Abstand

Da der Absatz selbst lediglich einen Zwischenraum hinzufügt, der dem Nutzer möglichst nicht auffallen soll, bietet die Widget-Einstellung auch keine Stil-Einstellungen an. Im Inhalt wird der Abstand festgelegt. Auch hier steht es dir wieder frei zu wählen, ob du diesen in PX, VH oder EM generieren möchtest, ich empfehle aber auch hier wieder die PX, also Pixel.

Google Maps

Inhalt: Bei dem Punkt Ort kannst du entweder die Location selbst suchen, so wie rechts „WPspace“ oder eine Adresse eingeben. Der Vorteil wenn du den Namen der Location eingibst ist, dass diese Angabe auch gleichzeitig den Titel darstellt, der auf der Karte angezeigt wird (siehe oben). Darunter kannst du die Anzeige der Karte einstellen. Du kannst die Regler bei Zoom und Höhe beliebig verschieben und die Anzeige der Karte individuell anpassen.

Auf Stil stellst du die Farben der Karte ein. Du kannst also zum Beispiel einstellen, dass die Karte leicht ausgebleicht angezeigt wird. Auch kannst du eine Unterscheidung einstellen, die Auftritt, wenn die Kunden mit der Maus über der Karte hovern.

Icon

Links siehst du drei verschiedene Möglichkeiten Icons im Elementor Widget anzuzeigen.

Inhaltlich legst du hier zuallererst das gewünschte Icon fest. Hierfür kannst du einfach auf den grau karierten Bereich klicken und dir aus der Elementor Icon Bibliothek eines aussuchen, oder ein eigenes hochladen.

Auch kannst du hier die Ausrichtung des Elementor Widgets einstellen und einen Link für das Icon generieren. In diesem Fall würde das Icon auch als Call-to-Action fungieren.

Um eine andere visuelle Anzeige des Icons herzustellen, wie in den Beispielen oben zu sehen, wählst du in dem Drop Down Menü einfach eine aus.

Stiltechnisch stellst du beim Icon lediglich Farbe und Größe dar. Hier kannst du auch wieder zwischen unterschiedlichen Anzeigen beim Hovern auswählen. Auch hier möchte ich noch einmal erwähnen, dass du die Farben am Besten vorher global generierst, damit das Farbsprektrum auf deiner Website einheitlich bleibt und du nicht bei Änderungen alle Farben manuell ändern musst.