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.
Die einfachste, schnellste und auch recht kostengünstige Lösung um zu einer fertigen Elementor-Umgebung zu gelangen ist das neue Elementor Website Paket. Wer das bestellt erhält eine fertige Hosting-Umgebung mit bereits installiertem WordPress, Elementor Pro mit Hello Elementor Theme. Dazu gibt es Premium Support und natürlich die Möglichkeit, auch eine eigene Domain (zusätzlich zur persönlichen *.elementor.cloud) zu verwenden. Kostet $ 99,- pro Jahr komplett.
Technisch handelt es sich um Webspace in der Google Cloud mit Cloudflare CDN, SSL-Zertifikat, 20 GB Webspace, automatischer und manueller Backupmöglichkeit. (Limitiert auf 25.000 Besucher IP’s pro Monat).
Wenn du eine Domain mit E-Mail-Funktionen zu deinem Cloud-Account benötigst schau dir die E-Mail-Server bei Domaintechnik.at an, da wird vermutlich die passende Lösung dabei sein, die du dort zu einer Domain dazu bestellen kannst.
Mit dieser Lösung kannst du die Schritt 1 dieser Anleitung überspringen und hier weiter lesen.
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.
Ohne Theme Builder ist Elementor nur ein Layout-Werkzeug für statische Seiten. Die volle Funktionalität mit dem Theme-Builder (in Kombination mit dem Theme Hello elementor) bekommst du mit der Pro-Version.
| Elementor | Free | Pro |
|---|---|---|
| Preis | € 0,- | ab $ 59,- p.a. |
| Page Builder | ja | ja |
| 30 Basis Widgets | ja | ja |
| > 50 Advanced Widgets | – | ja |
| Theme Builder | – | ja |
| Popup Bilder | – | ja |
| Formulare | – | ja |
| WooComerce Builder | – | ja |
| Dynamische Inhalte und Custom Fields | – | ja |
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.
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.
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.
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:
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:
Und (nur bei aktiviertem WooCommerce sichtbar):
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.
Nun kann man beginnen die eigentlichen Inhalte der Webseite einzupflegen.
Einen allgemein gültigen 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
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.
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.
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.
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.
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.
8 Antworten
Hallo, ich möchte einen Handtaschen Shop eröffnen und suche nach einem fertig oder vorgefertigte Design.Es werden auf Envato alles andere ausser z.B. Restaurant,Hotel etc. Design Templates zum Kauf angeboten. Ich bedaure,aber was kann ich tun, wenn ich so ein Template für meinen geplanten Handtaschen Shop mit WP, woocomm. Elementor, u. wahrscheinlich hello theme nicht finde? Ich weiß da leider nicht weiter. Und weiß auch nicht, inwieweit sich ein viell. nicht ganz von der Ansicht passendes Template verändern ließe. Und weiß nicht ob sich so etwas im Hello theme befindet. Viele Grüße Mia
Wenn du eine vorgefertigte Lösung suchst kannst du entweder in der Elementor Bibliothek ein SiteKit finden (und das mit dem Theme Hello Elementor verwenden) oder du suchst ein Theme das mit Elementor und WooCommerce arbeitet. Vermutlich ist Astra eine Option für dich. Versuche schon vorab genau heraus zu finden, ob das Theme das kann was du willst. https://wpastra.com/features/ Listet die Features auf, alles zum Thema WooCommerce ist dann in der Pro-Version zu finden.
ich bin total neu bei elementor, ich habe das Hello Theme installiert und eine tolles Envato free Theme genutzt, Seite ist fertig. Wenn ich die Seite online stellen will, muss ich diese ja benennen, allerdings zeigt mir WordPress nur das Hello Theme an und nicht die page, die mit Elementor erstellt wurde. Was muss ich tun, damit die Elementor page auch wirklich online geht? Ich finde Elementor grandios.
Hallo, du hast da ein paar Dinge durcheinander: du benötigst Hello Elementor nicht wenn du ein anderes Theme verwendest. Wie du eine Webseite online stellst hat nichts mit Elementor zu tun. Das hängt davon ab wo und wie du diese erstellt hast, wo sie gehostet wird (werden soll) und unter welcher Domain sie erreichbar sein soll. All das sind Voraussetzungen, die geklärt werden müssen.
Hallo,
vielen Dank für diese strukturierte Darstellung. Eine Frage ist für mich noch offen geblieben. Den Unterschied zwischen Elementor Canvas und Volle Breite ist mir im Prinzip klar, jedoch kann ich nicht einschätzen, welche Variante besser ist. Ich habe mit Elementor Pro ein eigenes Header Template erstellt, was zur Anwendung kommen soll.
Viele Grüße
Claudia
Wenn du willst, dass der Theme Builder (Header, Footer, …) eingebunden werden nimmst du „Elementor volle Breite“, wenn du wirklich eine leere Leinwand bearbeiten willst eben Canvas.
Vielen Dank für die tolle Seite. Ich habe Hello Elementor angelegt.
Die Kommentarfunkton ist jedoch jetzt nicht mehr vorhanden. In den Einstellungen und in den Beiträgen ist sie jedoch aktiviert.
Wenn ich das Widget Kommentare in das SinglePost-Template ziehe, steht da die Meldung:
Kommentare sind geschlossen. Aktiviere Kommentare aus de Diskussionsfled auf dem WordPress Post-Bearbeitungsbildschirm oder aus den WordPress-Diskussionseinstellungen.
Dort sind die Kommentare jedoch aktiviert. Auch ein Ausschalten und Wieder Einschalten funktioniert nicht.
Wenn ich ein anderes WordPress-Theme aktiviere, dann wird das Kommentarfeld allerdings angezeigt.
Es muss also irgendwo bei den Einstellungen von Hello Elementor liegen.
Viele Grüße
Johannes
Hallo Johannes,
Die Idee von Hello Elementor ist es, so wenig wie möglich (eigentlich gar nichts) zum Einstellen zu bieten. Die Kommentarfunktion wird nicht über das Theme, sondern über das Elementor-Widget ”Beitrag Kommentare“ gelöst. Dieses ist unter den ”Single”-Widgets zu finden.
Mit diesem Widget werden die Kommentare dann angezeigt oder auch – bei ausgeschalteren Kommentarfunktion – ein entsprechender Hinweis eingeblendet.