6 Schritte zur Elementor Website

6 Schritte zur Website mit Elementor Pro

Zielgruppe:

Dieser Artikel richtet sich an alle die eine Anleitung für eine schnelle Umsetzung einer Webseite (oder eines Blogs) mit Elementor Pro suchen. Ein QuickStartGuide. Einen ausführlichen Workshop wie man eine Webseite mit WordPress und Elementor Pro aufbaut gibt es hier.

Voraussetzungen:

Eine WordPress-Installation (nach Möglichkeit eine Neuinstallation, Empfehlung: nur das  Standard-Theme installieren), das Plugin Elementor (installiert und aktiviert) sowie das Plugin Elementor Pro (lizensiert, installiert und aktiviert).

Die Arbeit mit Elementor Pro macht die Theme-Auswahl einfach. Genau genommen spielt das Theme nur mehr eine sehr untergeordnete Rolle, da die Bestandteile der Webseite in den Templates des Elementor Pro Plugins definiert und verwaltet werden. Daher empfehle ich das Theme Hello Elementor das genau dazu da ist, Elementor zu unterstützen. Wer ein Child-Theme verwenden will findet eines auf Github hier.

Nach einer WP-Installation konfiguriere ich die Einstellungen > Permalinks nach Wunsch. 

Unter Einstellungen -> Lesen die Option zum Abhalten der Suchmaschinen aktivieren. Wir wollen zwar gefunden werden, aber vermutlich erst später. Die Startseiteneinstellungen auf “statische Seite” und  “Beispielseite” setzen, die ja bei der Installation automatisch angelegt wird. (kann auch im Customizer erledigt werden).

Dashboard > Design > Customizer

Danach den Customizer aufrufen. Hier gibt es 2 Punkte die wie folgt zu erledigen sind:

  1. Website Informationen eingeben (Titel, Untertitel eingeben, Logo und Website Icon hochladen und einbinden)
  2. Menüs: neues Menü (Hauptmenü) erstellen und vorerst mindestens einen Menüeintrag machen.
Im nächsten Schritt sind die Einstellungen im Elementor vorzunehmen, die ich für meine Site benötige.  Dazu im Dashboard unter Elementor > Einstellungen aufrufen.
Wichtig: Seit Februar 2020 (mit der Version 2.9) gibt es endlich Theme Stil. Diese Optionen ersetzen tw. den bisherigen Weg der Einstellungen, einen eigenen Beitrag zum Theme Stil gibt es hier

Elementor -> Einstellungen

  1. Unter “Generell” werden die Optionen Standardfarben deaktivieren und Standardschriftarten deaktivieren ausgewählt.
  2. Im Reiter “Stil” sind die Voreinstellungen sehr gut, hier kann man die Inhaltsbreite bzw. die Breakpoints zwischen Screen/Tablet/Mobile einstellen und auch die generelle Option “Lightbox an/aus” ist hier zu finden.
  3. Unter Integration sind die diversen API-Schlüssel zu platzieren. Seit Version 2.6. ist nun Recaptcha V3 integriert. Dies bedeutet, dass Elementor Formulare für den User unsichtbar über das Google Service gegen Spam abgesichert werden.
  4. Inhalte unter dem Reiter “Erweitert” können unverändert belassen werden.
 

Elementor -> Benutzerdefinierte Schriftarten

Die DSGVO-Konforme Einbindung von Schriftwaren ist über Google-Fonts leider nicht ganz unkritisch. Deshalb empfehle ich (natürlich nur legal erworbene oder frei erhältliche) Webfonts selber am Server zu Speichern. Elementor unterstützt das gut, nur Variable Fonts fehlen noch. 

Schriftwarten
Elementor unterstützt 5 Varianten zur Schrifteinbindung, die möglichst für jeden Schriftschnitt (hier "Variante") angeboten werden sollten.

Als nächstes wechseln wir in den Elementor selber. Dazu am einfachsten unter

Seiten -> Beispiel-Seite > Bearbeiten > Mit Elementor bearbeiten

aufrufen. Dann links oben das Hamburgermenü anklicken. 

Elementor Customizer shot
Einstellungen im Customizer
Elementor Einstellungen
Über Theme Stil lassen sich alle Einstellungen erledigen, die für die ganze Site gelten sollen.

Standardfarben & Standardschriftarten vs. Theme Style

Wer die neuen Theme Stil Einstellungen benutzt (was ich empfehle!) benötigt die beiden Einstellungen für Standardfarben und Standardschriftarten nicht mehr. 

Theme Style Elementor
Das Theme Style Menu ist nun blau.

Es gibt es 6 Bereiche in dieser Einstellungsebene:

  1. Hintergrund
  2. Typographie
  3. Buttons
  4. Formularfelder
  5. Bilder
  6. Eigenes CSS
Mehr Informationen dazu gibt es im Artikel Elementor Einstellungen mit Theme Styles

 

Farbwähler

Ende 2019 hat Elementor den Farbwähler durch ein neues Tool (New Color Picker) ersetzt, das einfacher zu bedienen sein soll. Damit kann man seine benötigten Farben immer dort verwalten, wo die Option zum Farbwählen auftaucht. Man kann unlimitiert Farbcodes speichern, die Farben umsortieren und nicht benötigte Farben aus der Palette löschen.

Elementor Color Picker
Drag & Drop aus dem Farbfeld oder Copy&Paste des Farbwertes auf das + erzeugen ein neues Farbfeld
Delete Color
Entfernen eines Farbfeldes durch Drag and Drop auf das Trashfeld.
Color Picker 3
Umsortieren mittels Drag & Drop

Innerhalb der Elementor-Welt sind die unterschiedlichen Seitenbestandteile als Templates organisiert. Je nachdem wo diese zum Einsatz kommen handelt es sich dann um einen Header, einen Footer, ein PopUp etc. Wenn man also über den Dashboard-Menü-Punkt Theme Builder einsteigt und einen Header anlegt funktioniert das genauso wie bei einem Seitenabschnitt oder einen Beitrag. 

Dashboard > Templates > Theme Builder

Und genau da liegt die Stärke von Elementor – eine Arbeitsweise für alle möglichen Anwendungszwecke. Man muss nur verstehen, wo welcher Seitenbestandteil hin soll, woraus dieser dann besteht ist dann eine andere Geschichte.

Der Weg lautet also: Elementor > Templates > Theme Builder > Kopfzeile. Dort wählt man aus der Bibliothek ein geeignetes aus und passt dieses seinen Wünschen an.

Elementor Header neu
Der Theme Builder ist der Weg zu den Grundelementen der Site.
Neue Kopfzeile
Über den Theme Builder den Header anlegen

Beim Header [=Kopfzeile] kommen es oft vor, dass man mit transparentem Hintergrund arbeiten will (zB. wenn man Hintergundbilder einsetzt) oder dass ich einen Teil oder den ganzen Header “sticky” schalte, also dass er beim Scrollen am oberen Fensterrand stehen bleibt und der Inhalt darunter scrollt. Alle diese Dinge werden wie gewohnt über die Elementor-Funktionen festgelegt.

Beim Speichern sind die Publishing Settings festzulegen: hier wird festgelegt, wann (also auf welcher Seite oder bei welchem Post) dieser Header angezeigt werden soll. In unser Fall: gesamte Webseite.

Damit wird unser Header überall angezeigt. Sehr gut. 

Besonders für die Anwendung im Header und Footer einer Seite sind die Widgets die unter dem Begriff Webseite zusammengefasst sind gedacht: Site-Logo, Seitentitel [=Name der Seite] und Seiten Titel [=Name der Website], Navigationsmenü, Suchformular, und Sitemap.

header original
Die Kopfzeile wie sie aus der Bibliothek ausgewählt worden ist.
Header nach den Anpassungen bei den Social Media Links, ausserdem wurde ein Suchfeld hinzugefügt.
Beim Speichern legen wir fest, wann die Kopfzeile angezeigt werden soll.

Wenig überraschend funktioniert das Anlegen des Fußbereiches analog zu jenem zuvor im Header. Oft kommen im Footer auch komplexere Widgets zum Einsatz wie Newsletter-Anmeldungen, Call2Actions, Social Media Linkbars etc.

Gerade hier machen sich dann die Optionen zu den Bedingungen hilfreich bemerkbar. So kann ich zB. einen Footer immer zeigen – ausser bei Blogposts, auf denen ich dann einen anderen Footer verwenden kann (der dann vielleicht eine Kategorieübersicht anzeigt, die ich sonst nicht benötigen würde). Zugreifen kann man übrigens auf diese Optionen gleich neben dem “Speichern”-Knopf unten in der Elementor-Fußleiste, dort wo man wahlweise auch “Als Template speichern” wählen kann. 

Einen ausführlicheren Artikel zum Thema Footer im Elementor anlegen gibt es hier.

Elementor Footer
Bei diesem Footer aus der Bibliothek wurden eine Spalte gelöscht, die Farben angepasst und das Logo bearbeitet.
Elementor Footer Bedingungen
Der Footer soll überall gezeigt werden, ausser auf einzelnen Beitragsseiten.
In eigener Sache:
werkform hilft bei der grafischen Konzeption und der Gestaltung von Websites und Templates! Kontaktiere mich um ein Angebot zu bekommen.
Werbung

Wir haben im ersten Schritt die Beispielseite als statische Startseite für dieses Projekt ausgewählt. Wenn wir uns jetzt die Webseite anschauen werden wir feststellen, dass Header und Footer bei der Beispielseite aufgetaucht sind. Allerdings steht hier auch noch der Seitentitel ein wenig unmotiviert herum. Grund hierfür ist, daß das Seitenlayout [=Elementor Beschriftung] oder auch Template [=Seiten Attribute unter WordPress] noch auf Vorgabe bzw. Standard-Layout eingestellt ist. 

Um das zu beheben muss man im Elementor links unten auf die “Seiten-Einstellungen” klicken und dann wie folgt einstellen:

  1. den Titel von Beispielseite auf Projekt Startseite ändern.
  2. Bei Seitenlayout auf “Elementor Volle Breite” wechseln
  3. Bei Bedarf ein Beitragsbild hinzufügen
 

Ab hier sind nun der Gestaltung kaum Grenzen gesetzt. Durch das Arbeiten mit der Vorlagenbibliothek haben wir eine ausgezeichnete Grundlage für alle möglichen und viele unmöglichen Gestaltungsideen. Wie immer gilt der Grundsatz “weniger ist mehr”.

Egal welche Widgets und Abschnitte man einbaut: Die unmittelbare Möglichkeit, über die Fußzeile die Responsive-Ansichten gleich beim Bauen der Seite zu berücksichtigen hilft viel Zeit zu sparen. Die enthaltenen Widgets sollten für 95% aller Anwendungen ausreichen. Es gibt aber auch ein großes Biotop an Erweiterungen von Drittherstellern, welche die Funktionalität von Elementor erkannt haben und entsprechende Plugins auf den Markt gebracht haben. 

Eine besonders hilfreiche Möglichkeit besteht darin aus dem Editor heraus einen Bereich als Template zu speichern und dieses dann als Seitenelement auch auf anderen Seiten einzusetzen. 
Auch sehr praktisch ist die Möglichkeit Widgets als “Global” zu speichern. Somit kann man zB. einen Adressblock anlegen der an mehreren Stellen in der Site zum Einsatz kommt. Ändert man dann den Inhalt des Blocks wird automatisch der Inhalt aller seiner Anwendungen geändert. Leider funktioniert das zur Zeit nur recht eingeschränkt bei einfachen Widgets wie Textblöcken. Größere Elemente wie Abschnitte kann man zwar als Templates speichern, jedoch erhalte ich dadurch nur eine statische Vorlage und keine dynamische Möglichkeit, die Inhalte dynamisch zu ändern.

Beispielseite ohne Template
Unsere Beispielseite hat Kopf und Fuss, nur die Mitte stimmt noch nicht.
Seite Elementor Volle Breite
links unten die Seiteneinstellungen aufrufen, dann auf "Elementor Volle Breite" wechseln.
Elementor Seite bearbeitet
Den Gestaltungsmöglichkeiten sind kaum Grenzen gesetzt.

Das Arbeiten mit Blogposts [=Beiträge] ist dem Arbeiten mit Seiten sehr ähnlich. Systembedingt kommen noch die Kommentarfunktion dazu bzw. die Navigation zum nächsten bzw. vorigen Artikel. Ausserdem kann über und mit den Kategorien der Beiträge gearbeitet werden.

In unserem Beispiel sollen die Blogposts inhaltliche und SEO-technische Unterstützung bieten um die auf den Seiten dargestellten Leistungen durch Anwendungsbeispiele zu unterstützen. Posts bieten sich an über Soziale Medien geteilt zu werden, ausserdem sind sie durch ein Datum definiert und der Autor kann auch als Person in Erscheinung treten. Die Frage ob man Inhalte über Seiten oder Posts organisiert ist keine technische sondern eine strategische. Oft kommen zusätzliche Post-Typen wie zB Portfolios zum Einsatz. 

Elementor bietet folgende Widgets für Posts an: Beitrag-Titel, Post-Ausschnitt, Beitrag Inhalt, Beitragsbild, Autor-Box, Beitragskommentare, Beitrag Navigation und Beitrag Information.

Mehr Details wie man mit Archivseiten und Blogposts umgeht gibt es hier, unter Archive und Beiträge.

Elementor Hallo Welt
Der erste Beitrag noch unbearbeitet.
Elementor Blogpost
Bei Elementor Template die Widgets angewandt.
Elementor Single Elements
Die Widgets für Blogposts im Elementor Board.

Die Feedbackmöglichkeit ist wohl der strategisch wesentlichste Punkt um zu einer Convertion zu gelangen, also jemanden von einem Besucher zu einem aktiven Interessenten zu machen. Neben den klassischen Kanälen wie Adresse und Telefonnummern zählen hier Karteneinbindung, Feedbackformular und Links zu den diversen Sozialen Medien zum Handwerkszeug.

Wir legen hierzu neue Seite “Kontakt” an:

  1. Dashboard -> Neue Seite
  2. Seitennamen eingeben
  3. Template “Elementor volle Breite” wählen
  4. Mit Elementor bearbeiten

Man kann zwischen einer großen Auswahl an Blöcken oder auch an ganzen Seiten wählen, die das Thema sehr gut abarbeiten. Wenn man eine Vorlage mit Kontaktform und Karte wählt ist es sehr einfach möglich, sich mit den Optionen zum Formularversand bzw. der Google-Maps-Integration vertraut zu machen.

Elementor hat ein eigenes Formularsytem entwickelt das schon recht zuverlässig funktionert, seit Juni 2020 kann es sogar Multistep-Forms umsetzen.

KontaktSeite neu
Eine neue Seite anlegen mit dem Template Elementor Volle Breite.
Kontakt Elementor Bibliothek
Aus der Bibliothek eine geeignete Seite auswählen.
Kontakt Elemente
Die Inhalte und Abschnitte der Kontaktseite nach Wunsch anpassen.

Fazit

Damit haben wir nicht nur eine Website erstellt sondern auch die wesentlichen Grundlagen beim Arbeiten mit Elementor Pro angewendet. 

Mit Elementor Pro kann es sehr rasch gehen eine ordentliche responsive Website aufzubauen. Es geht schneller als mit komplexen Multi-Purpose-Themes, wo man sich durch vielstufige Untermenüs in die Settings wühlen muss. Wichtig ist es bei all der Geschwindigkeit nicht zu vergessen, die wesentlichen rechtlichen Grundlagen (Impressum, DSGVO-Hinweise) einzuhalten. SEO ist immer ein Thema, hierbei appelliere ich an den obersten Grundsatz zum Thema: optimiere für den Besucher und nicht für die Suchmaschine! (Nicht vergessen: die unter Pt 1. ausgeschlossenen Suchmaschinen wieder zulassen!)

Persönlich arbeite ich gerne mit Yoast SEO als Erweiterung, oft kommt noch ein Redirection-Plugin zum Einsatz. Für die Sicherheit verwende ich gerne iTheme Security und für die Performance-Optimierung dann WP Super Cache oder Autoptimize. Für den Einbau einer DSGVO-Konformen Textsammlung dann WP DSGVO Tools.
In Summe werden es dann also wieder mind. 6 oder mehr Plugins, manchmal gelingt es mit weniger auszukommen.

Veröffentlich am: 8. Juni 2019
Letztes Update: 22.Juni 2020

Eine Antwort

  1. Hallo Herr Ing. Harald Martin!
    Super Einführung in WP mit Elementor, ich bedanke mich für die Umfangreichen Erklärungen.
    Zum Lachen haben sie mich auch noch gebracht, nach dem ich, in ihr Impressum geschaut habe,
    “Sollten Sie einen Rechtschreibfehler finden dürfen Sie ihn behalten.”
    Ich wünsche Ihnen ein frohes Fest und einen guten Rutsch ins neue Jahr.
    Mit besten Grüßen
    Heinz Meister

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.