Um eine Webseite zu erstellen bedarf es keiner Programmierkenntnisse. Dank einiger Pagebuilder wie Wix, WordPress oder Shopify ist die Grundlage einer Webseite schnell geschaffen.
Ich habe alle drei Pagebuilder getestet und bin bei WordPress hängen geblieben. Die Gründe dafür sind die größere Flexibilität in jeglicher Hinsicht. Da es hier aber um keinen tiefsinnigen Vergleich der drei Builder geht, werde ich das nicht im Detail vertiefen. Für den reinen E-Commerce Bereich kann man mit Shopify aber auch nichts verkehrt machen.
Große Flexibilität bietet auch mehr Platz für Fehler und gerade für Anfänger gilt es doch einiges zu beachten um in WordPress erfolgreich durchzustarten. In diesem Tutorial nutze ich nur Sachen die komplett gratis sind. Viele Effekte lassen sich mit ein bisschen Javascript und CSS selber hinzufügen und sind komplett unabhängig vom genutzten Theme.
Neben der Standardinstallation von Elementor und das hinzufügen von Effekten möchte ich auch auf das Thema SEO eingehen. Die beste Webseite bringt nämlich nichts, wenn keiner sie finden kann.
Ich habe schon einige WordPress Seiten erstellt und es stört mich jedes mal, dass bestimmte Widgets bei denen man denkt, dass das Standard sein sollte, dann doch nur in irgendwelchen Pay Plugins versteckt sind. Vor allem das eingeschränkte stylen stößt mir dabei sauer auf und ich möchte euch zeigen, wie man mit wenig Aufwand und komplett gratis, seinen Style anpassen kann ohne die WordPress Installation mit noch mehr Müll zu vergrößern.
Elementor Installation
Für die Installation wird natürlich ein Server benötigt worauf das ganze läuft. Eine Offline Installation ist auch möglich, wird in diesem Blog aber nicht behandelt. Ich bin beim Webhoster netcup und habe hier die Möglichkeit, WordPress direkt zu installieren und zu verwalten.
Nach der Installation von WordPress und der Anmeldung im Dashboard werden alle nicht benötigten Plugins unter Plugins Installierte Plugins entfernt.
Bei mir sind zwei Plugins vorinstalliert. Über die Mehrfachaktionen können wir die Plugins einfach Löschen und übernehmen.
Generell empfiehlt es sich alle nicht benötigten Plugins bei Fertigstellung der Webseite zu entfernen damit kein unnötiger Code ausgeführt wird und die Dateien vergrößert.
Neben dem Elementor Plugin installieren wir auch direkt Plugins zur Optimierung der Performance und für den SEO Bereich. Ich finde es angenehmer, wenn man direkt beim Anlegen von Elementen diese Einstellungen vornehmen kann und nicht erst am Ende wo es aufgrund der Menge eventuell unübersichtlich werden kann.
Für die Aktivierung von Rank Math wird ein Konto benötigt. Mit dem Konto kann man später auch weitere Webseiten hinzufügen. Im Gegensatz zum Yoast Plugin hat man hier einfach mehr Möglichkeiten den SEO Part zu Verwalten und anzupassen.
Erste Seite anlegen
Bevor wir die erste Seite anlegen, brauchen wir noch ein Theme welches wir als Vorlage für unsere Seite nutzen. Standardmäßig ist das Theme Twenty Twenty installiert und aktiviert. Über Design – Themes ist oben der Button Theme hinzufügen.
In der Suche geben wir OceanWP ein und installieren / aktivieren das Theme als neue Vorlage für unsere Seite. Unter dem Punkt – Alle Seiten – sind bereits Seiten angelegt. Die Seiten werden in den Papierkorb verschoben und gelöscht. Nachdem nun alles bereinigt ist, können wir die erste Seite erstellen. Wichtig dabei ist, dass in den Dokumenteinstellungen unter Seiten-Attribute das Template auf Elementor gestellt wird.
In diesem Beispiel auf – Elementor Volle Breite – .
Unter dem Permalink sieht man die URL der Webseite. Den Permalink stellen wir in den Einstellungen – Permalinks ein.
Standardmäßig steht dieser auf Einfach. SEO bedingt sollten wir hier den Beitragsnamen als Permalink auswählen und die Änderung speichern. Wenn wir uns jetzt den Permalink der Seite ansehen, sollte nicht mehr die Page ID zu sehen sein sondern der Name der Seite.
Neben der Seite -Home- legen wir noch eine weitere Seite -Blog- mit den selben Einstellungen an.
Weitere Einstellungen
Weitere Globale Anpassungen nehmen wir direkt am Design unter Customizer vor. Je nach genutztem Theme unterscheiden sich an dieser Stelle die Einstellungsmöglichkeiten. Die Möglichkeit, eigenes CSS anzugeben ist generell nicht verkehrt wenn man weitere Funktionen und Styles hinzufügen möchte ohne direkt bezahlte Plugins dafür herzunehmen.
- Website-Informationen – Titel der Seite und den Untertitel vergeben
- Menüs / Alle Positionen anzeigen – Allgemein und Footer auf Main
- Startseiten-Einstellungen – Home als statische Seite und Blog als Beitragsseite
- Allgemeine Optionen / Seitentitel – Stil Verbergen
- Top Bar – Deaktivieren
- Kopfbereich / Allgemein – Stil auf Transparent und Hintergrundfarbe vergeben. Transparenz der Hintergrundfarbe nicht vergessen. Rahmen und Volle Breite deaktivieren.
- Kopfbereich / Menü – Farben auswählen
Unter den Website-Informationen geben wir den Titel der Seite und den Untertitel ein und in den Startseiten-Einstellungen hinterlegen wir die statischen Seiten Home als Startseite und unsere Blog Seite als Beitragsseite. Auch deaktivieren wir in den Einstellungen die Top Bar. Die Änderungen werden gespeichert und es geht zurück ins Dashboard.
Weiter geht es dann mit dem Bearbeiten der Home Seite über den Elementor Page Builder.
