Kommen Sie in den Bearbeitungsmodus
Möglichkeit Nummer 1
Navigieren Sie zur gewünschten Seite und klicken Sie im oberen Menü auf Mit Elementor bearbeiten.
Möglichkeit Nummer 2
Klicken Sie ganz oben links auf das WordPress-Symbol. Auf der linken Seite klappt sich das WordPress-Navigationsmenü auf. Gehen Sie auf Seiten. Suchen Sie die entsprechende Seite und klicken Sie dann auf Mit Elementor bearbeiten.
Überblick über den Funktionsumfang des Text-Editors
Die Text-Editor-Registerkarten
- Inhalt
- Stil
- Erweitert
Die Registerkarte „Inhalt“
Bei der Registerkarte Inhalt können Sie Texte, Bilder und Links einfügen, ändern und löschen. Die Registerkarte Inhalt ist die am einfachsten zu bedienende und gewöhnlich die wichtigste. Sie ähnelt im Verhalten einem typischen WordPress-Text-Editor.
Die Registerkarte Inhalt hat mehrere Tabs:
- Dateien hinzufügen
- Visuell
- Text
- Dynamische Attribute (Symbol)
Die Tabs „Visuell“ / „Text“ / „Dynamische Attribute“
- Der Tab Visuell zeigt Formatierungen so an, wie sie auf der Website angezeigt werden, z.B. fetter Text.
- Der Tab Text zeigt auch HTML-Code an. Bei fettem Text steht dann z.B. Textbeispiel. Sofern Sie in HTML etwas geübt sind, werden Sie sich rasch damit zurechtfinden. Der Artikel „HTML-Grundlagen“ von Mozilla Developer vermittelt die wichtigsten Grundlagen.
- Der Tab Dynamische Attribute mit dem kleinen gestapelten zylindrischen Symbol ist nützlich, wenn Sie dynamische Inhalte auf Blogposts oder Seiten einfügen möchten. Eine nähere Beschreibung, was hinter dynamischen Inhalten steckt, finden Sie in dem Artikel „Dynamische Inhalte mit Elementor (CPT & ACF)“ von Danijel Rose.
Sonstige Einstellungsmöglichkeiten
Initiale – Dadurch wird der erste Buchstabe im Absatz größer angezeigt, wie Sie dies mitunter von Zeitungen oder Magazinen kennen. Die Initiale bei dem Text-Widget hat standardmäßig die zweifache Größe des normalen Textes. Nähere Einstellungen können Sie in dem Register Stil vornehmen.
Spalten – Sie können die Anzahl der Spalten festlegen, in denen der Text angezeigt werden soll. Es sind bis zu 10 Spalten möglich. Es gibt auch die Möglichkeit, in den Responsive Mode zu gehen und unterschiedliche Einstellungen bei den Spalten vorzunehmen. D.h. Sie können unterschiedliche Anzahlen von Spalten angeben, abhängig davon, ob es sich um die Desktop-Ansicht, Tablet- oder Smartphone-Ansicht dreht. Klicken Sie dazu auf das kleine Icon direkt hinter Spalten.
Spaltenabstand – Mit Spaltenabstand kann der Abstand zwischen den Spalten bei Bedarf vergrößert und verringert werden. Es gibt auch die Möglichkeit, in den Responsive Mode zu gehen und unterschiedliche Einstellungen bei den Spalten vorzunehmen. D.h. Sie können unterschiedliche Spaltenabstände angeben, abhängig davon, ob es sich um die Desktop-Ansicht, Tablet- oder Smartphone-Ansicht dreht. Klicken Sie dazu auf das kleine Icon direkt hinter Spaltenabstand.
Die Registerkarte „Stil“
Ausrichtung – Sie können festlegen, wie Ihr Text positioniert werden soll: links, zentriert, rechts oder als Blogsatz.Textfarbe – Hier können Sie die Farbe des Textes ändern. Sie können unter den Theme- oder globalen Farben wählen oder auch eine neue Farbe definieren. Wird nichts ausgewählt ist, wird die Farbe automatisch aus den vordefinierten Farben verwendet. Legen Sie hier eine andere Farbe fest, wird die vordefinierte Farbe überschrieben.
Typografie – Hier können Sie u.a die Schriftfamilie, Größe, Schriftschnitt, Zeilenhöhe und den Zeichenabstand (Laufweite) festlegen.
Textschatten – Hier können Sie Details zum Textschatten, wie die Farbe, die Unschärfe und den Schattenwurf horizontal und vertikal festlegen.
Initiale – Hier können Sie Einstellungen zur gewünschten Anzeige (Vorgabe, gestapelt, gerahmt), der Farbe, dem Textschatten, dem Abstand, dem Eckenradius als auch zur Typografie (Schriftfamilie, Größe, Zeilenhöhe etc.) machen.
ACHTUNG: Legen Sie Ihre Standard-Farben und Schriftarten über das Theme oder Elementor (letzteres ist die zweitbeste Wahl) fest. Überschreiben Sie in dem Text-Editor die Standard-Schriften und Farben nur in Ausnahmefällen, um die CSS schlank zu halten. Dadurch reduzieren Sie die Ladezeiten. Gleichzeitig können Sie gewünschte Änderungen an Farben und Schriften zentral („global“) steuern und müssen nicht mühselig von Stelle zu Stelle auf Ihrer Website Anpassungen vornehmen.
Wenn Sie einen Text im Text-Editor in eine Überschrift (H1, H2, H3 usw.) geändert haben, wirken sich die Optionen unter Stil nicht auf diesen Text aus. Das Typografie-Styling richtet sich dann entweder nach den Vorgaben des Themes oder den globalen Designeinstellungen von Elementor. Mit anderen Worten: Anpassungen unter dem Register Stil wirken sich nur dann aus, wenn es sich um einen gewöhnlichen Absatztext handelt, nicht aber eine Überschrift.
Die Registerkarte „Erweitert“
Die Registerkarte Erweitert bietet viele Optionen auf mehr fortgeschrittenem Niveau . In Englisch heißt die Registerkarte deshalb auch Advanced. Bei bestimmten Einstellungen, wie z.B. Margin und Padding oder auch CSS ID oder CSS-Klassen sind ein paar grundlegende Kenntnisse zu HTML und CSS förderlich. Vieles erschließt sich aber auch einfach durch Ausprobieren.
Nachfolgend gebe ich Ihnen einen Überblick zu den am häufigsten genutzten Funktionen:
Erweitert – Zu den Optionen gehören: Margin, Padding, z-index, CSS ID und CSS Class. Ein paar wesentliche Grundlagen zu Margin, Padding und dem Box-Modell vermittelt der Artikel: „Spickzettel: CSS Padding & Margin im Überblick“ von Hubspot.
Bewegungseffekte – Hier können Sie Scrolling- und Mauseffekte sowie Sticky-Verhalten festlegen.
Hintergrund – Sie können den Hintergrund für Normal – das ist der gewöhnliche Modus – als auch für einen Mouse-over-Effekt („Hover“) definieren. Sie haben die Wahl zwischen einem einfarbigen Hintergrund (klassisch), einem Farbverlauf oder auch einem Bild.
Rahmen – Sie können dem Textabschnitt einen Rahmen in unterschiedlicher Formatierung hinzufügen: Durchgezogen, doppelt, gestrichelt, gepunktet oder auch Groove. Bei dem Rahmen können Sie die Breite, Farbe und den Eckenradius festlegen und einen Schatten definieren.
Responsive –Mit den responsiven Optionen können Sie Abschnitte (oder Elemente) bei bestimmten Bildschirmgrößen, z.B. bei Tablets oder Smartphones ausblenden. Dies kann nützlich sein, wenn Sie eine Seite für Mobilgeräte oder auch Tablets stärker optimieren wollen. Es ist auch möglich, bei bestimmten Abschnitten Spalten umzukehren.
Eigenes CSS (Pro-Funktion) – Sie können hier individuelles Inline-CSS hinzufügen. Besser ist es jedoch, CSS bei der globalen Einstellungswebsite hinzuzufügen. Dadurch beinträchtigen Sie weniger die Ladezeiten. Die Website wird durch zentral gepflegtes CSS auch viel besser pflegbar, weil Sie dann keine Änderungen in den jeweiligen Einzelseiten machen müssen.
Die wichtigsten Bearbeitungsfunktionen
Hinzufügen, Ändern und Löschen von Texten
Sie können Texte sowohl in den zuvor angelegten Textabschnitt direkt bearbeiten oder aber unter dem Register Inhalt eingeben.
Unter dem Register Inhalt stehen Ihnen zwei Unterregister zur Verfügung:
- Visuell
- Text
Für beide Unterregister steht Ihnen ein Textfeld zur Verfügung, mit dem Sie Ihren Text bearbeiten, formatieren oder auch löschen können. Dieses Textfeld verändert sich, je nachdem, welches Unterregister Sie angewählt haben.
Die Bearbeitung in dem Feld Visuell ist für Beginner einfacher. Das Feld Text eignet sich insbesondere dann, wenn Sie zumindest ein paar grundlegende Kenntnisse in HTML haben.
Hinzufügen von Links
Hinzufügen von LinksLinks können Sie am einfachsten erstellen, wenn Sie das Unterregister Visuell im Text-Editor ausgewählt haben. Erstellen Sie Links, indem Sie zuerst den entsprechenden Text markieren, im Bearbeitungsmenü auf das Hyperlink-Symbol klicken und dann das Zahnradsymbol auswählen. Geben Sie im dann im erscheinenden Popup-Fenster den entsprechenden Link ein oder wählen Sie die gewünschte Seite oder den Blogbeitrag aus. Klicken Sie dann auf Link hinzufügen.
Alternativ haben Sie die Möglichkeit, Links auch im Unterregister Text einzugeben. Nähere Informationen, wie Sie Links in HTML erstellen, finden Sie in dem Artikel: „Erstellen von Hyperlinks“ von DeveloperMozilla.
Unterteilen von Text in Spalten
Mit dem Text-Widget Elementor Pro können Sie Ihren Text in zwei Spalten oder mehr Spalten umwandeln. Bis zu 10 Spalten sind möglich. Sie können auch die Spaltenbreite festlegen. Hier ist Text in zwei Spalten unterteilt. Tragen Sie einfach die gewünschte Spaltenzahl unter Spalten ein.
Einfügen von Bildern
Sie haben die Möglichkeit, die Ausrichtung Bildes innerhalb des Textes zu bestimmen. Klicken Sie dazu auf das Bild und passen Sie die Ausrichtungseinstellungen an. Dazu stehen Ihnen die nachfolgenden Optionen zur Verfügung:
linksbündig
zentrieren
rechtsbündig
keine Ausrichtung
Arbeit Speichern und Beenden
Arbeit Speichern und BeendenWenn Sie mit der Bearbeitung fertig sind, speichern Sie Ihre Arbeit wie gewohnt ab. Falls Sie die Seite ungespeichert verlassen sollten, erinnert Sie Elementor mit einem Pop Up-Fenster: „Website verlassen? Ihre Änderungen werden eventuell nicht gespeichert – Verlassen/Abrechen).
Was tun, wenn die Unterregister „Visuell“ und „Text“ fehlen?
Gewöhnlich sehen Sie im Text-Editor Inhalt die Unterregister Visuell und Text. Wenn die Unterregister Visuell und Text fehlen sollten, gehen Sie zum WordPress-Dashboard –> Benutzer –> Profil und deaktivieren Sie die Option Beim Schreiben den visuellen Editor nicht benutzen.
Zusammenfassung
Der Text-Editor von Elementor ist von den Funktionalitäten umfangreich, lässt sich aber dennoch in den Grundfunktionalitäten sehr einfach bedienen. Tasten Sie sich schrittweise heran. Am Anfang werden Sie vermutlich sich am meisten mit dem Register Inhalt und ggf. Stil beschäftigen. Unter dem Register Erweitert befinden sich mehr Fortgeschrittene-Optionen, die Ihnen jedoch leicht fallen dürften, wenn Sie über ein paar Grundkenntnisse in HTML verfügen. Ein Hinweis noch – es handelt sich bei diesem Artikel nicht um irgendeine Form von Affilate-Marketing – d.h. ich bekomme hierfür keine Provisionen, Vergütungen oder sonstige Vergünstigungen.
Auch spannend?
