Elementor Hack 1

Was ist jetzt eigentlich ein Hack

Ein Hack ist laut. Wikipedia ein technischer Kniff. Hier zitier ich Wikipedia:

Hack, ein technischer Kniff, vornehmlich aus dem Bereich der Informations- und Kommunikationstechnik, insbesondere das Ergebnis der Aktion eines Hackers; Computerslang; siehe auch Lifehack.

Ich stelle also an dieser Stelle, immer mal wider kleine Kniffe vor, damit Ihr mit Elementor, dem genialen LIVE PageBuilder, besser und besser zurecht kommt.

Elementor.com Page-Builder

Um was geht es jetzt im ersten Elementor Hack

Normalerweise ist das Überschriften-Widget von Elementor so eingestellt, dass jeder Einsteiger glaubt, hier kann ich nur eine Überschrift eingeben. Und diese formatieren, zuerst einmal in den sogenannten Überschrift-Auszeichnungsgößen H1 bis H6.

Diese Größen werden normalerweise, vom jeweiligen Theme vorgegeben und haben eine bestimmte Größe. Nur ganz grob angerissen, um euch nicht allzu sehr zu verwirren. 

In dem Theme dieser Seite sind die Überschriften z.B. wie folgt formatiert:

Hier seht ihr die Auflistung

  • Überschrift (H1) = 40 px
  • Überschrift (H2) = 30 px
  • Überschrift (H3) = 20 px
  • Überschrift (H4) = 15 px
  • Überschrift (H5) = 12 px
  • Überschrift (H6) = 10 px

Schön zu sehen ist auch, dass rechts die Größen H4 – H6 gleich dargestellt werden da sie im Theme nicht vorformartiert wurden.

Hier seht ihr die tatsächliche Größe im Beitrag:

  • Überschrift (H1)

  • Überschrift (H2)

  • Überschrift (H3)

  • Überschrift (H4)

  • Überschrift (H5)
  • Überschrift (H6)
Überschiften-Formate im Theme Customizer

Weiter Schritt für Schritt zum Elementor Hack

Wie jetzt unten im Bild zu sehen ist, zeige ich euch die normalen Einstellungen des Überschriften-Widgets.

Im ersten Teil, mit dem Stift versehen kommt das Eingabefeld bzw. der Inhalt (siehe Bild links)

In der Mitte, befinden sich die Style-Einstellungen, also die Stile (Ausrichtung, Textfarbe, Typografie) – Wenn man die Typografie mit dem Schiebeschalter auf Ein stellt öffnen sich weitere Einstellungen, wie Größe der Schrift, Schriftfamilie, Schriftschnitt, Umwandlung, Stil, Linien-Höhe, Buchstabenabstand. * siehe nächstes Kapitel.

Und rechts im Punkt Erweitert, finden sich diese Einstellungen – Element-Stil (Margin, Padding) Z.-Index, Eingangsanimation, Hintergrund, Rahmen, Responsive, eigene CSS

Das alles werde ich in einem weiteren Artikel einmal vorstellen. 

Weiter im Text

Hier jetzt zu den versprochenen Erklärungen des Punktes Style:

  1. Textfarbe –  Hier kann ich Farben auswählen
  2. Größe der Schrift – Hier kann ich die Größe der Schrift auswählen. zum einen per Schieberegler und zum anderen per Eingabe der Größe in px direkt.
  3. Schriftfamilie – Auswahl mit Listenauswahl oder per Eingabe
  4. Schriftschnitt – bedeutet die Stärke der Schrift (der Buchstaben) von kräftig bis fein – wird aber nicht von allen Schriften unterstützt!
  5. Umwandlung – hier kann ich den text Umwandels z.B. in Grossschreibung. Kleinschreibung, Kapitälchen (jeder erste Buchstabe im Wort wird groß geschrieben)
  6. Stil – Kursiv (italien) etc.
  7. Line-Hight – bestimmt die Höhe der Linie
  8. Buchstabenabstand (Abstand der Buchstaben von einander)
  9. Textschatten

Jetzt aber kommt der Überschriften Effekt (Elementor Hack)

Denn eines kann ich mit dem Überschriften Widget nicht so einfach erreichen. Eine solche Überschrift!

Elementor-Hack Überschrift 2 farbig

Aber so geht der Überschriften Effekt (Elementor Hack)

Das erste was ihr tun müßt, ist, aus dem Dashoard von WordPress in eurem Browser, ein neues Tab mit einem neu erstellten Beitrag zu öffnen.

Folgende Schritte:

  1. Zu Dashboard gehen
  2. Links im Menü auf Beitrag und
  3. Dann Erstellen wählen
  4. Und mit der rechten Maustaste Link in neuem Tap öffnen wählen.
  5. Im Editor-Fenster gebt ihr jetzt den Text der Überschrift ein (Achtung bitt darauf achten, dass Visuell ausgewählt ist
  6. Jetzt könnt ihr die Einstellungen im Text vornehmen wie Farbe, Fett, unterstrichen etc.
  7. Um das Ergebnis dann in das Überschrift-Widget einzutragen, wechselt ihr zu
  8. Text im Editor-Fenster. Markiert den Text mit der Maus und kopiert das ganze in das Inhalts-Fenster des Überschriften-Widgets
  9. Jetzt alles überprüfen und wenn OK speichern.

Die einzelnen Schritte als Bildfolge

Bild-Beitrags-Editor Visuell - Ansicht

Beitrags-Editor-Visuell

Bild - Beitrags-Editor zu Text umstellen

Beitrags-Editor-Text 1

Bild Beitrags-Editor - Text zu kopieren auswählen

Beitrags-Editor-Text zum kopieren

Text aus Beitrags-Editor hier einfügen

Überschrift bearbeiten-Text hier einfügen

Ergebnis

Elementor-Hack Überschrift 2 farbig

3 Gedanken zu “Elementor Hack 1

Schreibe einen Kommentar

Diese Website speichert einige Informationen über die Besucher. Diese Daten werden verwendet, um eine persönlichere Erfahrung zu ermöglichen und um Ihren Aufenthaltsort auf unserer Website in Übereinstimmung mit der Europäischen Allgemeinen Datenschutzverordnung zu verfolgen. Wenn Sie sich dazu entschließen, das Tracking zu deaktivieren, wird in Ihrem Browser ein Cookie eingerichtet, das diese Auswahl ein Jahr lang speichert.. OK, Nein
638