Webseite selber erstellen
WorkShop Teil 1: Die Grundlagen

Webseite Erstellen mit WordPress und Elementor Pro

Teil 1: die Grundlagen

Einführung

Wenn du wissen willst, wie du eine Webseite erstellst und dabei die volle Kontrolle über die Form und den Inhalt behältst bist du hier richtig. Du lernst hier Schritt für Schritt wie du deine eigene Webpräsenz erstellst. Der WorkShop beginnt mit ein paar Überlegungen vor dem ersten Handgriff und endet mit einigen Hinweisen, wie es nach der Erstellung weiter gehen kann.

Voraussetzungen für diesen WorkShop:
  1. WordPress tauglicher Webhost 
  2. WordPress (kostenlos)
  3. Elementor Pro (kostenpflichtig)
  4. Zeit und Aufmerksamkeit (unbezahlbar)

Hosting - Wohin mit meiner Homepage?

Egal ob es ein Blog, einer Vereinsseite oder eine Webseite für dein EPU ist: wichtig ist, dass du weißt was mit deinen Daten und den Daten deiner Webbesucher geschieht. Das beginnt bei der Datensicherheit (Stichworte Backup, Serversicherheit) und endet bei den Userdaten, die anfallen wenn (hoffentlich viele) Besucher die fertige Webseite besuchen.

Daher empfehle ich einen eigenen Webspace zu mieten und keine FertigHomepageLösung out-of-the-box zu verwenden. Es mag verführerisch klingen eine Webseite mit 3 Klicks zu erstellen – das wird aber den Ansprüchen nicht gerecht, die wir hier erfüllen wollen.

Es gibt eine Menge Dienstleister die sehr gute Services anbieten. In der Regel gilt, dass billigere Angebote auch weniger Leistungsstark sind. Wenn sich hunderte oder tausende Benutzer einen Webserver teilen wird weniger Leistung für jeden Einzelnen über bleiben. Wenn ich einen dedizierten Server miete und dann einmal pro Stunde ein Benutzer vorbei kommt wird es – was den Wartungsaufwand und die Stromrechnung betrifft – den Aufwand nicht Wert sein.

Also am besten ein Angebot suchen, welches den Umstieg zwischen verschiedenen Leistungsklassen ohne Umständen ermöglicht. Wo man also ggf. Webspace, Speicherlimit, Traffic und auch die Skriptlaufzeit mit einem Up- oder Downgrade auf ein anderes Paket an den eigenen Bedarf anpassen kann.

Domain

Obwohl die Bedeutung der Domainnamen durch die allumfassenden Suchmaschinen deutlich abgenommen hat ist es immer noch gut und richtig, eine eigene Domain zu besitzen. Wir wollen selber vollständig bestimmen wie wir heißen und auch keine Werbung für Dienstleiter machen.

Beispiel: für diesen Workshop verwende ich für die Beispiele die Domain cyberform.net.  Wenn ich jetzt mit dem Hosting nicht mehr zufrieden bin kann ich meine Webseite nehmen und zu einem anderen Dienstleister übersiedeln. Betreibe ich die Webseite jedoch statt mit einer eigenen Domain als 3rd-Level Domain meines Hosters, also zB. unter cyberform.hoster.tld kann ich zwar alle Daten übersiedeln, muss aber der Seite einen neuen Namen geben: hoster.tld gehört mir ja nicht. 

Wenn ich also keine eigene Domain benutze spare ich mir zwar wenige Euro pro Jahr, mache mich aber abhängig von meinem Dienstleister und noch zusätzlich Werbung für ihn (statt für mich). Dazu kommt, dass ich nur unter einem eigenen Domainnamen auch meine E-Mails vollständig kontrollieren kann.  

Wer eine Homepage als EPU betreibt sollte auch immer seine Domain für die E-Mail-Adresse nutzen. Das ist technisch sauber und hat zusätzlich einen kleinen Marketing-Effekt.

In eigener Sache:
werkform bietet dir ein passendes Hosting inkl. Domain und E-Mailadresse an. Folge dem Link um mehr zu erfahren.
Werbung

WordPress

Wir verwenden WordPress als Basis für unserer Webseite. In den letzten Jahren hat sich WordPress zu dem mit Abstand am häufigsten eingesetzten CMS entwickelt. Wir verwenden es aber nicht, weil es die größte Verbreitung hat sondern umgekehrt: weil wir es verwenden hat es die große Verbreitung erreicht. 

Die Gründe sind einfach: kostenlos, OpenSource, ein riesiges Biotop an Entwicklern, Erweiterungen und Möglichkeiten. Und am wichtigsten: die beste Community der Welt – auf der ganzen Welt. Vermutlich wird es auch in deiner Umgebung Aktivitäten der WordPress-Gemeinschaft geben. Der Autor dieser Zeilen fühlt sich bei Wiener Community sehr gut aufgehoben. Hier werden regelmäßig Meetups veranstaltet, ausserdem gibt es jährlich ein großes WordCamp.

 

WordPress Installation

In vielen Fällen erfolgt die Installation von WordPress bereits mit der Bestellung eines Hostingpaketes oder aber über ein Kundenportal. Natürlich kann man WordPress aber auch “von Hand” installieren. Solltest du es also selber machen wollen, prüfe zuerst, ob du die Voraussetzungen für eine WordPress-Umgebung erfüllen kannst (Webspace, Datenbank, PHP-Version). Details dazu findest du auf der Downloadseite

Folgende Schritte sind notwendig, um WordPress zu installieren:

  1. Download von WordPress, Archiv entpacken
  2. erstelle eine Datenbank
  3. die Datei wp-config-sample.php in wp-config.php umbenennen
  4. Die Datenbankdaten in Datei wp-config.php eintragen.
  5. alle Dateien auf den Webserver laden (ggf. eine vorhandene index.html-Datei löschen damit auch die index.php von WordPress aufgerufen wird.)
  6. die Webseite aufrufen und das Installationsskript starten.
  7. Das wars, du kannst dich einloggen
Webseite mit WordPress erstellen
Vor dem Upload: unter den lokalen Dateien (links) ist grün unterlegt wp-config-sample.php. Am Webserver liegen einige Dateien von Haus aus, darunter auch die index.html die in diesem Beispiel gelöscht werden muß.
In die Datei wp-config.php werden der Datenbankname, der Benutzername und das Passwort dafür eingetragen (grün). Darunter (orange) ist dann ein Wert einzutragen, wenn die Datenbank nicht am selben Server wie die Webseite läuft sondern auf einem anderen Gerät.
Webseite erstellen WP Installation
Nach erfolgreichem Upload erscheint beim Aufruf der Webseite dieseMaske. Wenn nicht wird ein erklärter Fehler angezeigt.

Folgende Daten sind einzugeben, um die Installation abzuschließen:

  1. Der Titel der Webseite
  2. Ein Benutzername
  3. ein starkes Passwort 
  4. eine gültige E-Mail-Adresse
  5. Die Option zum Ausschluss der Suchmaschinen (beim Basteln sinnvoll)

 

Danach kannst du dich weiter zum Anmeldefenster klicken, wo du dann Benutzernamen und Passwort eingibst.
Sollte das nicht so einfach geklappt haben gibt hier eine ausführliche Anleitung (in englisch). Das Web ist voll von Hilfe zu dem Thema. Es gilt wie immer: je präziser die Frage, desto besser die Antwort!

Webseite erstellen
Beim ersten Einloggen nach erfolgreicher Installation schaut das Dashboard etwa so aus.

Elementor

Elementor ist eine Software, die als PageBuilder Plugin begonnen hat und die sich in der Zwischenzeit zu einem umfassenden Ökosystem zur Seitenerstellung weiter entwickelt hat. 

Wozu brauche ich überhaupt einen PageBuilder?

Die kurze Antwort: WordPress kann das einfach nicht. Man kann wunderbar Bloggen, also Beiträge schreiben. Daher kommt das System. Wenn ich Seiten erstelle, die ja technisch nichts sehr viel anderes als Beiträge sind, benötige ich normalerweise mehr Gestaltungsmöglichkeiten. WordPress hat diese Aufgaben an die Idee der Themes ausgelagert. Einfach gesprochen sorgt WordPress für den Unterbau (also Fahrwerk und Motor) und das Theme darüber für die Ausstattung und das Design. 

Alle Themedesigner müssen mehr oder weniger die selben Aufgabenstellungen meistern, daher wurden Frameworks und Pagebuilder entwickelt als Basis für die Designer, die dann damit Ihre Seitenbestandteile gestalten. Die Entwicklung geht immer weiter, Elementor war (und ist in der freien Version) ein Tool, das man innerhalb verschiedener Themes zum Gestalten verwenden kann. Wenn man jetzt die Aufgaben von den Themes zum PageBuilder verlagert kommt man dort hin wo ElementorPro gerade ist: ein komplettes System an Techniken und Templates, welches ein Theme obsolet macht. 

Diese Entwicklung betrifft übrigens WordPress auch: mit Einführung von Gutenberg hat auch das “Webbetriebssystem” selber einen Weg beschritten, der sehr wohl zum Aussterben des “Themes” führen kann. Elementor hat diese Entwicklung als Geschäftsmodell erkannt und  bietet heute schon Dinge, die WordPress vermutlich erst in 2-3 Jahren erreichen wird. Dafür bezahlen wir, deswegen benötigen wir auch die Pro-Version. 

Das Theme: Hello Elementor

Wir haben zu diesem Zeitpunkt eine Standardinstallation von WordPress, je nach Vorliebe in deutsch oder einer anderen Sprache. Installiert wurden auch einige sehr rudimentäre Themes: TewntyTwenty, Twenty Nineteen und Twenty Seventen. Da WordPress um zu funktionieren ein eigenes Theme braucht installieren wird nun ein weiteres: das Theme Hello Elementor:

Dashboard > Design > Themes > auf Hinzufügen klicken

Dort klicken wir auf Theme installieren und suchen dann nach Hello Elementor. Nach der Installation aktivieren wir das Theme und bekommen auch gleich den Hinweis, dass das Theme ohne Elementor nicht sinnvoll eingesetzt werden kann. Wir folgen dem Hinweis und installieren das Plugin Elementor

 

Hello Elementor installieren
Wir suchen das Theme Hello Elementor und installieren es. Danach auf >> Aktivieren << klicken .
Nach dem erfolgreichen Installieren des Themes fordert es uns auf auch das Plugin Elementor zu installieren. Das machen wir.
Plugin Elementor installiert
Nach erfolgreicher Aktivierung des Plugins zeigt Elementor einen Startschirm mit einem Video. Wenn du keine Erfahrung mit Elementor bisher gemacht hast schau es dir an, 2,5 Minuten sinnvoll investiert um die Grundzüge des Systems kennen zu lernen.

Themes werden immer wieder (und das ist auch gut so) upgedatet. Wer jetzt Änderungen auf Theme-Ebene benötigt hat gut daran getan, diese Änderungen nicht im eigentlichen Theme sondern in einem sog. Child-Theme durchzuführen. Man kann sich ein Child-Theme wie eine transparente Folie vorstellen die über dem eigentlichen Theme liegt: Dinge, alle Dinge scheinen durch, ausser sie werden durch das Child-Theme überlagert. Ausserdem kann ich zusätzliche Angaben machen, die im originalen Theme nicht vorhanden waren. 

Sehr häufig sind Angaben zu den CSS, beispielsweise ist im Theme eine bestimme Link-Farbe vorgegeben. Wenn ich nun im Child-Theme-File diese Angabe auf meine Wunschfarbe ändere gilt das global für meine ganze Website. Die zweite große Anwendung sind Funktionen, die ich auf Theme-Ebene hinzufügen kann. Der dritte Grund für ein Child-Theme liegt im Marketing: Ich kann es so nennen, wie ich will. Also zum Beispiel auch nach dem Namen des Kunden oder des Projektes. Kommt gut rüber, wenn der Kunde sich einloggt und sieht, daß das sein Projekt ist. 

Wer also ein Child Theme für Hello-Elementor installieren will findet eines hier auf Github

 

Die Pro-Version

Elementor ist ein PageBuilder, ElementorPro ist ein SiteBuilder. Soll heißen: Mit der Pro-Version stehen uns deutlich mehr Optionen zur Verfügung, und zwar nicht nur zur Gestaltung, sondern auch auf der Organisationsebene. Den genauen Unterschied und die Preise findest du hier.

Viele Dinge der Pro-Version sind nice-to-have, wirklich essentiell ist aber der Theme-Builder, der uns als Template-System die Basis für ein rationelles und konsistentes Arbeiten bietet. Der Form-Builder kann beim Formularwesen ausreichend sein, die große Anzahl an Templates wiederum sind meiner nach kein Kaufgrund. Die Pro-Widgets sind gut gemacht, hier gäbe es aber durchaus Dritthersteller die ähnliches zum gleichen Preis bieten. Wer dann mit Dynamischen Inhalten und eigenen Feldtypen arbeiten will kommt um die Pro-Version ohnehin nicht herum. 

Wer eine Lizenz erworben hat findet dann unter my.elementor.com den Link zum Download. Das Plugin wird dann installiert über

Dashboard > Plugins > installieren > Plugin hochladen

und danach aktiviert. Beide Elementor-Plugins sind zum Betrieb notwendig, die Updatefrequenz ist sehr hoch, mit jeder größeren Version wird deutlich an Funktionalität nachgelegt. 

Elementor Pro installieren
Über > Plugin > Installieren und den Button "Plugin hochladen" können wir die zip-Datei, die wir auf my.elementor.com bekommen haben uploaden.
Elementor Pro aktivieren
Nach erfolgreicher Aktivierung des Pro Plugins klicken wir auf "Connect & Activate" um auch immer am Laufenden zu bleiben.
Activate Elementor
Einloggen, Aktivieren. Danach werden wir zum Dashboard zurück geschickt.
In eigener Sache:
werkform bietet dir ein passendes Hosting inkl. Domain und E-Mailadresse an. Zusätzlich kann werkform dir auch bei der Installation der Komponenten und der notwendigen Lizensierung von Elementor Pro helfen.
Werbung

Nun sind die Grundlagen gelegt. Im 2. Teil dieses Workshops geht es um die Einstellungen die zu treffen sind, Schriften die wir verwenden wollen und ein klein wenig auch um die rechtlichen Dinge, die wir beim Betrieb einer Homepage beachten sollten.

Share on facebook
Facebook
Share on twitter
Twitter
Share on whatsapp
WhatsApp
Share on linkedin
LinkedIn
Share on email
E-Mail