Elementor PageBuilder Grundlagen: Aufbau und Funktionen des Editors

elementor-editor-grundlagen

Teile diesen Beitrag

Hey du! Schön, dass du hier bist und Interesse daran hast, deine Website mit dem Elementor PageBuilder zu optimieren. Keine Sorge, ich werde dir Schritt für Schritt erklären, wie du den Editor nutzt, selbst wenn du absolut keine Ahnung von Webdesign hast. Also, schnall dich an, wir starten durch!

 

Wie installierst du den Elementor Page Builder?

Bevor wir loslegen, musst du sicherstellen, dass du Elementor auf deiner WordPress-Website installiert hast. Falls nicht, keine Panik! Ich zeige dir, wie das geht:

  1. Öffne dein WordPress-Backend.
  2. Gehe zum Menü „Plugins“ und wähle „Neu hinzufügen“.
  3. Suche nach „Elementor“ und klicke auf „Installieren“.
  4. Sobald die Installation abgeschlossen ist, klicke auf „Aktivieren“.
  5. Glückwunsch, Elementor ist jetzt auf deiner Website einsatzbereit!

 

wordpress-plugins-elementor

 

Wo in WordPress findest du den Elementor Editor?

Der Elementor Editor ist dein Werkzeug, um deine Website zu gestalten. Hier erfährst du, wie du dorthin gelangst:

  1. Melde dich in deinem WordPress-Backend an
  2. Wähle im linken Menü „Beiträge“ oder „Seiten“ aus, je nachdem, wo du deine Website bearbeiten möchtest
  3. Klicke auf den Titel des Beitrags oder der Seite, die du bearbeiten möchtest, um den Editor zu öffnen
  4. wähle „Mit Elementor bearbeiten“. Dann öffnet sich der Elementor Editor

 

 

wordpress-seite-mit-elementor-bearbeiten

 

Die Struktur des Elementor Editors

Willkommen im Elementor Editor! Bevor wir mit den einzelnen Funktionen loslegen, lass uns einen Überblick über die Struktur des Editors verschaffen. Der Editor ist in zwei Hauptbereiche aufgeteilt:

  1. Das Kontrollzentrum auf der linken Seite: Hier findest du wichtige Optionen zum Bearbeiten deiner Seite.
  2. Der Content-Bereich/Canvas auf der rechten Seite: Hier gestaltest du deinen Inhalt.

 

Das Kontrollzentrum auf der linken Seite

Das Kontrollzentrum auf der linken Seite des Elementor Editors ist dein Dreh- und Angelpunkt für die Gestaltung deiner Website. Hier sind die wichtigsten Funktionen, die du kennen solltest:

  1. Das Hamburger Icon: Klicke darauf, um das Hauptmenü zu öffnen, in dem du auf alle Editorfunktionen zugreifen kannst.
  2. Widgets: Widgets sind vorgefertigte Bausteine, die du einfach in deinen Content einfügen kannst, um Elemente wie Texte, Bilder, Buttons und mehr hinzuzufügen.
  3. Seiten Einstellungen: Hier kannst du globale Einstellungen für deine Seite vornehmen, wie z.B. das Hintergrundbild, die Schriftarten und Farben.

 

Der Navigator

Der Navigator ist dein bester Freund, wenn es darum geht, die Struktur deiner Seite zu überblicken und zwischen den verschiedenen Elementen zu navigieren. Hier ist, wie du ihn findest und nutzt:

  1. Klicke auf das Navigator-Symbol im Kontrollzentrum, um das Navigatorfenster zu öffnen.
  2. Hier siehst du eine Übersicht über alle Abschnitte, Spalten und Widgets auf deiner Seite.
  3. Du kannst Elemente auswählen, umbenennen, verschieben oder löschen, indem du mit der Maus darauf klickst.

 

Die Historie

Stell dir vor, du hast Änderungen vorgenommen, aber möchtest doch wieder zum vorherigen Stand zurückkehren. Keine Sorge, die Historie-Funktion im Elementor Editor macht das möglich:

  1. Klicke auf das Uhr-Symbol im Kontrollzentrum, um die Historie zu öffnen.
  2. Hier siehst du eine Liste der kürzlich vorgenommenen Änderungen.
  3. Wähle einen früheren Schritt aus und klicke auf „Wiederherstellen“, um zu diesem Stand zurückzukehren.

 

Responsive Modus

In der heutigen mobilen Welt ist es wichtig, dass deine Website auf verschiedenen Geräten gut aussieht. Elementor bietet einen integrierten Responsive Modus, mit dem du deine Seite für verschiedene Bildschirmgrößen optimieren kannst:

  1. Klicke auf das Tablett- und Smartphone-Symbol im Kontrollzentrum, um den Responsive Modus zu öffnen.
  2. Hier kannst du zwischen verschiedenen Geräten wechseln und die Anzeige anpassen.
  3. Passe die Größe, Position und Sichtbarkeit der Elemente für jedes Gerät an.

 

Vorschau deiner Änderungen

Bevor du deine Änderungen veröffentlichst, möchtest du sicherstellen, dass alles so aussieht, wie du es möchtest. Elementor ermöglicht dir eine Vorschau deiner Änderungen, ohne dass sie sofort live geschaltet werden:

  1. Klicke auf das Auge-Symbol im Kontrollzentrum, um eine Vorschau deiner Seite zu öffnen.
  2. Hier kannst du sehen, wie deine Seite aussehen wird, sobald du die Änderungen veröffentlichst.
  3. Navigiere durch verschiedene Seiten und Geräte, um sicherzustellen, dass alles perfekt ist.

 

Veröffentlichen und Update

Du bist zufrieden mit deinen Änderungen und möchtest sie der Welt präsentieren? Super! Hier ist, wie du deine bearbeitete Seite veröffentlichst oder aktualisierst:

  1. Klicke auf den grünen „Veröffentlichen“- oder „Update“-Button oben rechts im Elementor Editor.
  2. Deine Änderungen werden jetzt auf deiner Website sichtbar sein.

Denk daran, deine Arbeit regelmäßig zu speichern, um unerwünschten Datenverlust zu vermeiden!

 

 

Content-Bereich auf der rechten Seite

Der Content-Bereich/Canvas auf der rechten Seite des Elementor Editors ist der Ort, an dem du deine Seite gestaltest. Hier fügst du Abschnitte, Spalten und Widgets hinzu. Schauen wir uns genauer an, wie das funktioniert:

 

Der Aufbau deiner Seite: Abschnitte und Spalten

Ein Abschnitt ist ein großer Block auf deiner Seite, der verschiedene Spalten enthält. Jede Spalte kann wiederum Widgets enthalten. So gehst du vor, um Abschnitte und Spalten anzulegen:

  1. Klicke auf das Plus-Symbol in der Mitte des Content-Bereichs, um ein neues Element hinzuzufügen.
  2. Wähle „Abschnitt“ oder „Spalte“ aus dem Dropdown-Menü.
  3. Passe die Anzahl der Spalten an und füge den Abschnitt hinzu.

Hier ist ein Screenshot, um die Erstellung von Abschnitten und Spalten zu veranschaulichen:

 

Widgets

Widgets sind die Bausteine, aus denen du deine Seite aufbaust. Hier findest du eine Liste an häufig verwendeten Widgets:

  • Überschrift: Füge eine bzw. mehrere Überschriften zu deiner Seite hinzu
  • Texteditor: Füge Texte und Überschriften hinzu
  • Bild: Füge Bilder oder Grafiken ein
  • Button: Erstelle auffällige Call-to-Action-Buttons
  • Formular: Sammle Daten von Besuchern
  • Social Media Icons: Verlinke deine sozialen Netzwerkprofile
  • es gibt noch viele mehr!

 

Wie fügst du Widgets in deinen Content ein?

Nun, da du weißt, welche Widgets verfügbar sind, zeige ich dir, wie du sie in deinen Content einfügst:

  1. Öffne das Kontrollzentrum auf der linken Seite
  2. Klicke auf das Widget, das du hinzufügen möchtest, und halte die Maustaste gedrückt
  3. Ziehe das Widget per Drag-and-Drop in die gewünschte Spalte im Content-Bereich

 

Wie kannst du Abschnitte, Spalten und Widgets bearbeiten?

Jetzt kommen wir zum Spaßteil: das Bearbeiten von Abschnitten, Spalten und Widgets! Du kannst verschiedene Aspekte wie Layout, Style und Erweiterte Einstellungen anpassen. Lass uns einen genaueren Blick darauf werfen:

  1. Klicke auf das Widget oder den Abschnitt, den du bearbeiten möchtest
  2. Im Kontrollzentrum siehst du drei Tabs: Layout, Style und Erweitert
  3. Im Layout-Tab kannst du die Anordnung, Größe und Position der Elemente anpassen
  4. Im Style-Tab kannst du Farben, Schriftarten und Hintergrundbilder ändern
  5. Im Erweitert-Tab findest du weitere Optionen zur Steuerung von Abständen, Animationen, Z-Index und benutzerdefinierten CSS-Code

 

FAQ (Häufig gestellte Fragen)

#1 Kann ich Elementor mit jedem WordPress-Theme verwenden?

Ja, Elementor funktioniert mit den meisten WordPress-Themes. Es ist jedoch möglich, dass einige Themes nicht vollständig kompatibel sind oder Konflikte verursachen können. Überprüfe die Kompatibilität mit deinem Theme, bevor du Elementor nutzt.

 

#2 Kann ich Elementor auch für vorhandene Seiten verwenden?

Ja, du kannst Elementor auch für bereits erstellte Seiten nutzen. Öffne einfach den Editor für die gewünschte Seite und beginne mit der Bearbeitung.

 

#3 Wie kann ich meine Änderungen rückgängig machen?

Keine Sorge! Elementor speichert automatisch deine Änderungen in der Historie. Klicke auf das Uhr-Symbol im Kontrollzentrum und wähle einen früheren Schritt aus, um zu diesem Stand zurückzukehren.

 

#4 Kann ich Elementor auch für mehrsprachige Websites nutzen?

Ja, Elementor ist mit vielen Mehrsprachigkeits-Plugins wie WPML und Polylang kompatibel. Du kannst deine Seite einfach in verschiedenen Sprachen gestalten.

 

#5 Was passiert, wenn ich Elementor deaktiviere?

Wenn du Elementor deaktivierst, bleiben deine Inhalte weiterhin auf deiner Website sichtbar. Allerdings sind die Elementor-spezifischen Bearbeitungsmöglichkeiten nicht mehr verfügbar, bis du Elementor erneut aktivierst.

 

Fazit

Herzlichen Glückwunsch, du hast nun einen Einblick in die Grundlagen des Elementor PageBuilders erhalten! Du hast gelernt, wie du Elementor installierst, zum Editor navigierst, den Editor aufbaust und bearbeitest. Mit Elementor kannst du deiner Kreativität freien Lauf lassen und deine Website individuell gestalten.

Falls du weitere Fragen hast oder Unterstützung benötigst, stehe ich gerne zur Verfügung. Als erfahrene Webdesignerin bin ich hier, um dir zu helfen und dein Website-Projekt zum Erfolg zu führen. Zögere nicht, mich zu kontaktieren!

Also, schnapp dir Elementor und leg los! Viel Spaß beim Gestalten deiner Website!

Brauchst du Hilfe oder hast du Fragen zur Nutzung von Elementor? Kontaktiere mich jetzt und ich stehe dir gerne zur Seite!

Subscribe To Our Newsletter

Get updates and learn from the best

Möchtest du dein Business
jetzt vorwärts bringen?

Schreib mir eine kurze Nachricht und wir fangen gleich an!