6 Schritte zur Website mit Elementor Pro

6 Schritte zur Elementor Website

Zielgruppe:

Dieser Artikel richtet sich an alle die eine Anleitung für zuverlässige und schnelle Umsetzung einer Webseite (oder eines Blogs) mit Elementor Pro suchen.

Voraussetzungen:

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

Step 0

Theme und Settings

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 doch ein wenig mehr Einstellungsmöglichkeiten sucht wird bei dem Theme Page Builder Framework fündig. (Beide sind kostenlos). Ich verwende hier das Hello Elementor  Theme in der gerade aktuellen Version 2.1.x. 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. Danach den Customizer aufrufen. Hier gibt es nur 3 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.
  1. Unter “Generell” muss nichts geändert werden.
  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. Aufpassen beim reCaptcha API von Google, das ist hier in Version 2 integriert. Ab 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.
Als nächstes wechseln wir in den Elementor selber. Dazu am einfachsten unter Seiten -> Beispiel-Seite > Berabeiten > Mit Elementor bearbeiten aufrufen. Dann links oben das Hamburgermenü anklicken. Der erste Abschnitt Stil lässt uns die grundlegenden Einstellungen für Farben und Schriften vornehmen
Elementor Customizer shot
Einstellungen im Customizer

Standardfarben

Zuerst stellen wir die Grundfarben ein. Diese werden dann verwendet wenn in der Folge “Vorgabe” ausgewählt wird. Wir können 4 Farben angeben für Primär, Sekundär, Text und Accent.

Elementor Standardfarben
Einstellung für die Standardfarben

Standardschriftarten

Immer dann, wenn typografische Eingaben gemacht werden können gibt es die Option Vorgabe (die auch voreingestellt ist). Jene Schriftarten die ich jetzt einstelle, werden dann als diese Vorgabe verwendet. Das entspricht also in etwas dem, was bei Verwendung von anderen Themes in deren Theme-Settings als Font-Einstellungen vorzunehmen sind. Ich nehme hier die für 4 Anwendungen die Einstellung der Schriftart vor: Primäre Überschrift (H1) Sekundäre Überschrift (H2), den Haupttext und den Accent Text.

Farbwähler

In diesem Menüpunkt kann man jene Farben voreinstellen, die dann überall im Elementor auftauchen wenn Farben auszuwählen sind. Ich stelle hier immer die Grundfarben der Webseite, Schwarz, Weiss und Grautöne ein die ich erfahrungsgemäß dann irgendwo benötige.

Elementor Standardschriften
Elementor Standardschriften

Header

Step 0

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. 

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
Über den Theme Builder den Header anlegen
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.
Step 0

Footer

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.

Elementor Footer
Bei diesem Footer ais 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.
Step 0

(Landing)Page

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 was man an Widgets und Abschnitten 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.
Step 0

Blogpost

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.

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

Kontakt

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 unterstützt im Augenblick (Juni 2019) Google Recaptcha 3 nicht, dass den Missbrauch bzw. das Spamming über Kontaktformulare gut bekämpft. Die Version 2 (mit der bekannten “ich bin kein Roboter”-Checkbox) wird unterstützt.
Elementor unterstütz ab Version 2.6 nun auch Recaptcha V3. Ein Formular ohne Spamschutz bleibt normalerweise nur kurz unentdeckt
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. In Summe werden es dann also wieder 6 oder mehr Plugins, manchmal gelingt es mit weniger auszukommen.

Eine schnellere und günstiger Art zu so sauberen Ergebnissen zu kommen ist mir schon lange nicht mehr unter gekommen. Natürlich ist der Sourcecode nicht schön im Sinne eines Programmiers – aber dafür bekomme ich jede Menge Komfort. 

Veröffentlich am: 8. Juni 2019
Letztes Update: 26. 7. 2019

Share on facebook
Facebook
Share on twitter
Twitter
Share on whatsapp
WhatsApp
Share on linkedin
LinkedIn
Share on email
Email

Noch kein Kommentar, Füge deine Stimme unten hinzu!


Kommentar hinzufügen

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.