Was sind Elementor Widgets?
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 in der Regel kostenlos im Elementor Abonnement dabei.
Per Drag & Drop kannst du dann dein gewähltes Elementor Widget in die festgelegte Strukturform ziehen und alle weiteren Einstellungen vornehmen.
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.
Layout Einstellungen
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.
Stil Einstellungen
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.
Erweiterte Einstellungen
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
Beim Einstellen von Überschriften und Texten ist wichtig zu beachten, dass du deine Schriftarten möglichst immer erst global einstellst. Der Grund ist, dass damit alle Schriftarten automatisch gleich sind und wenn man dann global etwas ändern sollte, sich automatisch alles auf den Unterseiten auch ändert. Sonst müsstest du manuell alle Seiten durchgehen, was bei kleinen Seiten mit wenig Unterseiten noch machbar wäre, aber dennoch einen unnötigen Arbeitsaufwand darstellt.
Schriftarten Global einstellen
Hier gehst du erst einmal ähnlich wie beim Logo vor:
Gehe auf Allgemeine Einstellungen (das sind die drei Striche oben links in der Elementor-Menüanzeige) und dann auf Website-Einstellungen. Ab hier ändert sich die Vorgehensweise, denn anders als beim Logo nutzen wir nun die obersten 3 Einstellungen, Globale Farben, Globale Schriftarten und Typografie.
Globale Farben
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.
Globale Schriftart
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.
Elementor Widget Überschrift bearbeiten
Wenn du die Schriftarten schon global eingestellt hast, dann kannst du direkt mit der Bearbeitung der Überschrift fortsetzen. Nachdem du dein Überschrifts-Widget an die gewünschte Stelle gezogen hast, öffnet sich, wie immer, links die Einstellungen dieses Widgets.
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.
Im Stilbereich der Widget-Einstellungen nimmst du dir nun die Farben, die Typografie und mögliche weitere Stilistische Einstellungen, wie eine Textumrandung oder Textschatten, vor. Achte hier darauf, dass du immer das Globussymbol wählst, wenn du Einstellungen vornimmst. Der Globus steht hier für die globalen Einstellungen. Wenn du einzelne Sachen einstellen möchtest, die du noch nicht global festgelegt hast, dann binde diese entweder zuerst ein oder wähle das Symbol rechts neben dem Globus und setze die Farben und Schriften lokal für dieses eine Widget fest. Denk aber daran, dass du diese Sachen dann auch wieder einzeln aktualisieren musst.
Zuletzt kannst du bei Erweitert mögliche weitere Einstellungen festlegen, zum Beispiel Bewegungseffekte, individuelle Hintergründe oder Rahmen für das Widget.
Und auch hier wieder: Speicher nicht vergessen!
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.
Erweitert: Hier kannst du wieder weitere, detailliertere Einstellungen, z.B. Bewegungseffekte, den Hintergrund des Widgets, weitere Attribute festlegen etc., vornehmen.
Ganz wichtig wenn du Änderungen an deiner Website vornimmst, immer speichern!
Texteditor
Der Texteditor wird für jegliche Art von Texten, mit Ausnahme von Überschriften, auf der Website benutzt. Das Widget selbst wird nur von der gewählten Struktur begrenzt. Somit kannst du bei der Nutzung dieses Elementor Widgets deiner Kreativität freien Lauf lassen.
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
Um den Besuchern deiner Website Erklärungen, Vorstellungen und allgemeine Inhalte nicht nur schriftlich, sondern auch visuell zur Verfügung zu stellen, kannst du nicht nur auf Bilder, sondern auch auf Videos zurückgreifen. Auch hier gibt es ein Elementor Widget, was dir die Anzeige und Generation von Videos auf deiner Website erleichtert.
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.
Auch in diesem Elementor Widget decken sich die erweiterten Einstellungen mit denen anderer Widgets. Ganz standardgemäß kannst du Abstände zum Strukturfeld, Rahmen, Hintergründe, Bewegungseffekte und Co. generieren, oder es erst einmal auf den Voreinstellungen belassen.
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
Das Elementor Widget „Trenner“ ist eine Linie, die deine Seite visuell teilt. Auch hier kannst du designtechnisch alles in den Widget-Einstellungen verändern und individualisieren.
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
In folgender Abbildung siehst du unter dem Spruch einen blau eingerahmten Kasten. Dies ist ein so genannter Abstand und ein sehr wichtiges Elementor Widget. Diesen Abstand kannst du mithilfe der Widget-Einstellungen so klein und groß ziehen, wie du magst.
Auch hier wählst du zuallererst die Struktur aus, in die du das Elementor Widget im Anschluss per Drag & Drop hineinziehst. Ich habe hier eine volle Breite gewählt, es steht dir aber frei das Strukturfeld so klein wie möglich zu halten.
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.
In den erweiterten Einstellungen des Elementor Widgets lassen sich die üblichen Einstellungen vornehmen. Hier werden zum Beispiel wieder die Abstände zum Strukturfeld, Bewegungseffekte, mögliche Hintergründe, Rahmen und sonstiges generiert.
Google Maps
Mit dem Elementor Widget Google Maps kannst du eine Karte erstellen, auf der die gewünschte Location ganz einfach auf deiner Website angezeigt wird.
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.
Erweiterte Einstellungen des Elementor Widgets sind auch im Fall des Icons wieder Dinge wie Rahmen, Hintergrund, Bewegungseffekte und Abstände zum Strukturfeld.
Fazit
Elementor gibt dir die Möglichkeit beim Bau deiner Website deiner Kreativität freien Lauf zu lassen. Mithilfe der vielen verschiedenen Elementor Widgets ist das Erstellen einer Webseite inzwischen kinderleicht.
In diesem Beitrag bin ich auf die 10 grundlegenden Elementor Widgets eingegangen, die quasi kostenlos in deinem Elementor Abonnement dabei sind. Beim Upgrade zu Elementor Pro kannst du noch auf viele weitere Widgets und Programmzusätze zugreifen.
