Elementor Website Schritt für Schritt

Schritt für Schritt – mit Elementor eine Website bauen

tl;dr: Wie geht man vor, wenn man eine moderne responsive Webseite rasch erstellen will, eine zuverlässige Lösung sucht und dabei die volle Kontrolle behält? In dieser Schritt für Schritt Anleitung erfährst du, wie du das mit WordPress und Elementor Pro umsetzen kannst.

Schritt 1: Domain, Hosting, WordPress und Elementor

Du benötigst einen geeigneten Webhost und (mindestens) eine Domain. Das Angebot ist riesig, ich empfehle eine Blick auf die Details zu werfen. Am wichtigsten sind Geschwindigkeit und Zuverlässigkeit. Dazu kommen der Support und der Serverstandort. Meine Empfehlung: Domaintechnik.at. Die Preise passen, die Angebotspalette wird das richtige Paket bereit halten.

Je nach gewählten Hostingpaket steht ein einfaches WordPress-Installationsskript bereit oder WordPress ist bereits installiert. Für den nächsten Schritt benötigen wir ein funktionierendes WordPress und einen mit Adminrechten eingeloggten Benutzer. Wer Hilfe bei der Installation benötigt bemüht seinen Provider oder eine Suchmaschine.

Als nächstes benötigen wir das passende Theme. Das steht unter dem Namen Hello Elementor bereit.

Nach erfolgreicher Installation

Dashboard > Design > Themes > Theme hinzufügen > Suche nach: Hello Elementor

wird das Theme aktiviert. Nun folgt die Aufforderung die Erweiterung Elementor zu installieren. Das kann über den angezeigten Link oder über

Dashboard > Plugins > Plugins hinzufügen > Suche nach: Elementor

erfolgen. Als nächstens besorgen wir uns eine Elementor Pro Lizenz

Hello Elementor
Hello Elementor ist das beste Theme für eine Elementor Website.
Elementor Hellp
Nach der Installation vom Hello Theme wird man aufgefordert, auch das Elementor Plugin zu installieren.

Ohne Theme Builder ist Elementor nur ein Layout-Werkzeug. Wirklich frei arbeiten kann man nur mit der Pro-Version.

ElementorFreePro
Preis€ 0,-ab $ 49,- p.a.
Page Builderjaja
30 Basis Widgetsjaja
> 50 Advanced Widgetsja
Theme Builderja
Popup Bilderja
Formulareja
WooComerce Builderja
Dynamische Inhalte und Custom Fieldsja

Das Pro-Plugin wird über

Dashboard > Plugins > Hinzufügen > Plugin hochladen 

installiert, danach aktiviert und die Lizenz bestätigt. Damit sind alle Voraussetzungen für die Webseite erfüllt.

werkform hilft
werkform hilft bei der Arbeit mit Elementor - auch bei schwierigeren Aufgaben. Kontaktiere mich wenn du professionelle Hilfe brauchst.
In eigener Sache

Schritt 2: Einstellung in WordPress und Elementor

WordPress

Als nächstes löscht man nicht benötigte Themes 

Dashboard > Design > Themes > Auf den Screenshot des zu löschenden Themes klicken (Theme Details) > rechts unten auf löschen

Neben Hello wird nur das Standard Theme Twenty Twenty wird aufgehoben, falls man es zum Testen benötigt. 

Die wichtigsten Anpassungen sind hier vorzunehmen:

Dashboard > Einstellungen > Lesen

Hier kann man die Suchmaschinen ausschliessen/zulassen. 

Dashboard > Einstellungen > Diskussion

Wenn man Kommentar generell ausschliessen will dann gleich am Beginn der Arbeit hier.

Dashboard > Einstellungen > Permalinks

Empfehlung: auf Beitragsname ändern. Nur bei Blogs kann das Datum im Link Sinn ergeben.

Elementor

Dashboard > Elementor > Einstellungen 

ist der Ort für die Grundeinstellungen. 

Dashboard > Elementor > Benutzerdefinierte Schriftarten 

ist zu benutzen, wenn ich die Schriften lokal einbinden will. 

Seit Version 3.0 ist Elementor erwachsen und bietet gute Einstellungsmöglichkeiten

Video abspielen

Um zu den Elementor-Einstellungen zu gelangen muss man den Elementor starten, das gelingt zB. über 

Dashboard > Seiten > Beispiel-Seite > Mit Elementor Bearbeiten

Das kleine Video oben zeigt den Weg für den zu den Elementor Einstellungen. Der Erste Schritte sind die Einstellungen im Design System vorzunehmen. Eingestellt werden die Farben und die Schriften, die damit an einer zentralen Stelle definiert werden und hier auch nachträglich verändert werden können. Man kann beliebig viele Farben definieren. Wer Hilfe bei der Definition einer Farbpalette hat sollte sich Paletton anschauen. 

Im Bereich Theme Stil können Grundeinstellungen für Typographie, Buttons, Bilder und Formularfelder vorgenommen werden.

Der Bereich Einstellungen bringt die Möglichkeiten Site Identity (Logo, FavIcon),  Hintergrund, Layout, Lightbox und Eigenes CSS. Die beiden folgenden Beiträge gehen hier in die Tiefe:

Schritt 3: Der Theme Builder

Der wesentlichste Grund für die Pro-Version des Elementor ist der Theme Builder. Doch was genau ist das und was macht man damit? Gestartet wird der Theme Builder mit dem gleichlautenden Button (innerhalb der Elementor-Umgebung unter dem Button Elementor Einstellungen). Wie der Name schon vermuten läßt dient der Theme Builder dazu, jene Templates mit besonderen Aufgaben zu organisieren die andere WordPress-Lösungen über Theme-Optionen lösen. Davon gibt es 7 + 2:

  1. Kopfzeile (Header)
  2. Fußzeile (Footer) [Bessere Footer mit Elementor ]
  3. Single Post
  4. Single Page
  5. Archiv [Archive mit Elementor]
  6. Suchergebnisse [Suchen und Finden mit Elementor]
  7. Error 404 [Nicht gefunden die 404-Seite]

Und (nur bei aktiviertem WooCommerce sichtbar):

  1. Einzelprodukt
  2. Product Archive
Elementor Theme Builder

Für alle Templates aus dem Theme Builder gilt, daß bei ihnen die Bedingung(en) zu denen sie angezeigt werden, definiert werden müssen.

Ein Beispiel:  Durch Klick auf das + bei Kopfzeile wird ein neues Header-Template angelegt, wir werden über ein Auswahlfenster geleitet in dem wir ein Design aus der Bibliothek wählen können. Dieses kann dann angepasst werden, alternativ dazu kann man auch mit einem leeren Template beginnen. 

Wenn man nun seine Kopfzeile gestaltet hat und diese speichert wird man aufgefordert, eine Bedingung hinzuzufügen. Diese kann zB „gesamte Seite” lauten. Dadurch wird die Kopfzeile immer angezeigt (wenn keine andere Bedingung höher eingestuft wird).  Wenn man also eine Spezielle Kopfzeile für zB. einen Blogbeitrag will kann man es so einstellen, dass immer die Kopfzeile 1 gezeigt wird und nur, falls es ein Blogpost ist, der Kopfzeile 2.

Die Arbeit mit der Fußzeile ist ganz analog zu der mit dem Header. Bei den beiden Typen Single Post und Single Page (also die Strukturen für Seiten und Beiträge) handelt es sich um die Bereiche die zwischen Kopf- und Fußzeile ausgegeben werden. Das sind also die Templates, die zB. für einen TOC (Table of Content) verwendet werden können oder wo eine anderer Sidebar-Inhalt neben dem eigentlichen Inhalt angezeigt werden soll. Bei solchen Einzelseiten können dynamische Inhalte sinnvoll angewendet werden, auch für eigene Felder und Post-Typen eignen sich diese Templates oft.

Die Arbeit mit Archiven und Suchergebnisseiten werden in eigenen Beiträgen erklärt und sind dort nachzulesen. 

Schritt 4: die Inhalte

Nun kann man beginnen die eigentlichen Inhalte der Webseite einzupflegen. 

Menüs

Einen allgemein gülten Ansatz für Menus gibt es nicht (mehr). Das Benutzerverhalten hat sich in den letzten Jahren weg von der Menüführung hin zu kontextuellen Verlinkungen verlagert – User suchen nicht, sie finden! Erstellt werden Menüs über 

Dashboard > Design > Menüs

werden Menüs erstellt und bearbeitet. Wichtig ist immer ein eindeutiger Menünamen, besonders wenn es mehr als ein Menü auf der Webseite gibt. Im Elementor gibt es das Widget Navigationsmenü, mit dem das Menü zB. im Template der Kopfzeile eingebunden werden kann. 

Seiten

Entweder über  den Theme-Builder und das dort angelegte Template für Single Page oder aber auch einfach nur frei vom leeren Blatt weg – beim Erstellen von Seiten stehen dann jede Menge Widgets von Haus aus bereit um einerseits volle Kontrolle bei der Gestaltung zu behalten und andereseits auch oft pixelgenau arbeiten zu können. Eine Liste aller Widgets gibt es hier.

Wichtig beim Arbeiten: Das Seitenlayout – also das aus der WordPress-Umgebung stammende Template – muss entweder auf Elementor Volle Breite oder auf Elementor Canvas eingestellt sein. Die Einstellungen zu den einzelnen Seiten und Beiträgen sind immer links unten zu erreichen, während allgemeine Einstellungen link oben zu finden sind.

Elementor Seiten Einstellungen
In den Seiten Einstellungen sollte das Seitenlayout Elementor Volle Breite fast immer das Richtige sein.

Beiträge

Beiträge können ganz ähnlich wie Seiten gehandhabt werden. Für Übersichtsseiten gibt es das Widget Beiträge, um zB die neuesten Beiträge auf der Startseite einzublenden. Das Template Single Post im Theme Builder  ist genau für die Gestaltung der Beiträge gedacht.

Wichtig: Oft benötigt man für die einzelnen Beiträge gar nicht die volle Elementor-Funktionalität. Es ist gut möglich, die einzelnen Beiträge einfach mit dem Gutenberg-Editor (oder wer will auch mit dem Classic-Editor) zu erstellen. Auch für Autoren oder Redakteure kann es eine gute Lösung sein, diese gar nicht zum Elementor zuzulassen. Das Widget Beitrag Inhalt (Post Content) stellt den Inhalt zB über das Single Post-Template dar. Mehr darüber auch im Beitrag über Archive.

Formulare

Um Formulare – als wichtigstes Feedback-Element überhaupt – einsetzen zu können benötigt man im Elementor kein zusätzliches Plugin. Das Formularsystem ist gut entwickelt und bietet auch viele Schnittestellen in Marketingsysteme. Auch die Einbindung von Google reCaptcha ist gut. mehrstufige Formulare sind möglich und es gibt sogar eine Honeypot-Funktion.

ELEMENTOR Formulare
Das Formularsystem im Elementor ist weit entwickelt

Fazit

Mit Elementor wird die Arbeit an Homepages fast so einfach wie mit Homepagebaukästen, die Designmöglichkeiten, Flexibilität und Kontrolle bleiben aber über alle Bereiche der Seite erhalten. Wer kein eigenes Design entwerfen will wird viele Vorlagen in der Bibliothek des Elementor finden, wer seine eigenen Vorstellungen umsetzen will wird sehr, sehr weit kommen bis er an die Grenzen vom Duo WordPress/Elementor stösst. Mit einer guten Planung lässt sich der Aufwand bei der Erstellung massiv einschränken, besonders im Vergleich zur Gestaltung mit Premium-Themes. Es bleibt dann genug über für das Wichtigste: die Inhalte in Wort und Bild.

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.