Wie Du in Elementor Vorlagen einsetzt

Wie Du in Elementor Vorlagen einsetzt

Wie Vorlagen von Elementor Dir helfen

neue Suche in Bibliothek
© Elementor.com

Um Dir bei der Gestaltung Deiner Webseite zu helfen, ist des kostenlose WordPress-Plugin Elementor Pagebuilder eine große Hilfe. Es ermöglicht Dir dank fast 100 gratis Vorlagen, einfach und schnell eine für Dich passende Webseite zu gestalten. Und das sind die 7 wichtigsten Punkte die Du beachten musst:

Darum lautet meine klare Empfehlung für Dich. Nutze die Vorlagen von Elementor und zwar je nach Möglichkeit. Und ja die ElementorPRO-Vorlagen bieten Dir noch mehr Möglichkeiten. Genauer gesagt 21 zusätzliche Widgets-Elemente. Wie beispielsweise Formulare und Slider, Beiträge einfügen, Preislisten, Preistabellen etc. 

Eine weitere wichtige Tatsache ist, dass Du die vorhandenen Bilder entweder durch eigene Bilder ersetzen solltest oder zumindest die vorhandenen Bilder auf die Nutzung hin überprüfen solltest. Ob Du die Berechtigung zur Nutzung hast und welche Angaben Du diesbezüglich machen musst. Dazu gibt es zum Beispiel die Webseite: https://www.tineye.com/ , damit kannst Du die Herkunft von Bildern überprüfen. Besonders praktisch ist, dass Du das über den Browser machen kannst. Denn es gibt für Chrome, FireFox, Opera und deren Ableger eine solche Erweiterung und dann kannst Du das Bild per rechtem Mausklick in Augenschein nehmen.

Dieser wohl gemeinte Rat ist für Deutschland wichtig und stellt keine Rechtsberatung dar, da ich kein Anwalt bin und dementsprechend keine verbindliche Rechtsauskunft geben darf!

Ich hoffe, Du hast jetzt , dank des kleinen Tipps, wieder einen kleinen Schritt zur Entwicklung Deiner eignen Webseite gemacht. Falls Du weitere Fragen hast schreib unten in den Kommentar und ich werde versuchen Dir zu antworten.

Beste Grüße aus Calau

Jörg Rothhardt

Weitere Infos zu Elementor gibt es auf diesem Beitrag.

Elementor Hack 1

WordPress, Wordpress-Design

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