Website-Aufbau
Hier findest du FAQs und kleine Videos, die dir zeigen, wie du deine Website umgestalten kannst.
Wenn dir noch etwas fehlt, schick mir einfach eine Nachricht, dann ergänze ich den Punkt 🙂
1. Grundlagen
Das Hosting deiner Website befindet sich (sehr wahrscheinlich) bei Ionos. Das heißt, sowohl die Domain als auch der Speicherort deiner Daten ist bei Ionos – genauso wie der Hosting-Vertrag. Solltest du einmal eine Mail bekommen mit z.B. PHP-Updates etc. melde dich gerne zeitnah bei mir, das Update lässt sich ganz leicht machen. Sonst könnten Zusatzkosten auf dich zukommen.
Auf diesem Hosting-Platz habe ich bei dir WordPress eingerichtet. WordPress ist ein kostenloses CMS-System (Content Management System), das auch regelmäßig Updates macht. Wie du die selbst machen kannst, zeige ich dir später. Zusätzlich nutzen wir „Elegant Themes“ als Theme, damit die Seite richtig schön aussieht. Dieses Theme hast du bei mir gekauft und kannst es für immer benutzen. Bei dem Elegant Theme arbeiten wir mit dem „Divi Builder“.
So, das erstmal zu der Technik, die dahinter steht, jetzt zur praktischen Ebene.
2. Einloggen und starten
Die Seite, über die du dich einloggen kannst, ist deine Domain und dann /wp-admin/, also als Beispiel
Da gibst du dann deinen Benutzernamen und dein Passwort ein und gelangst zu deinem Dashboard. Das ist die Übersichtsseite für das Backend – also alles, was im Hintergrund der Website eingestellt werden kann.
Um deine Seiten zu bearbeiten gehst du:
1. Entweder auf den Reiter links „Seiten“ > wählst die gewünscht Seite aus > gehst auf „Mit Divi bearbeiten“ oder klickst die Seite an und drückst dann auf „Mit Divi bearbeiten“
2. Oben links ist ein Haus-Icon zu sehen > drauf klicken > auf die gewünschte Seite gehen > oben „Aktivieren Sie Visual Builder“
Und schon geht die wilde Fahrt los 🙂
3. Neue Seite anlegen
Du möchtest eine weitere Seite anlegen und weißt nicht genau, wie du das machst? Im Video zeige ich es dir.
Hier auch nochmal die Steps:
– Im Dashboard links im Menü „Seiten“ anklicken
– Dann entweder auch links im Menü oder in der Mitte der Seite „Neue Seite erstellen“ klicken
– Der Seite oben einen Namen geben, z.B. „Portfolio“ und auf „Mit Visual Builder bearbeiten“ klicken
– Es kommt eine Auswahl aus drei Optionen
1. Von Beginn an…. – Da baust du eine komplett neue Seite ohne Vorlagen (nicht zu empfehlen)
2. Pre-made Layout – das sind die fertigen Vorlagen, vor allem zu empfehlen, wenn du eine komplett neue Seite bauen willst oder Elemente für deine bestehende Seite abspeichern willst [siehe Kapitel Bibliothek]
3. Bestehende Seite klonen – du suchst dir eine fertige Seite aus, klonst sie und hast dann Header und Kontaktformular etc. schon fertig (am einfachsten)
4. Sektionen und Aufteilung
Bei der Bearbeitung mit dem Divi Builder gibt es drei Hauptsektionen, mit denen wir arbeiten.
Also grundsätzlich wieder einloggen > Mit Visual Builder bearbeiten
Die Hierarchie ist folgendermaßen:
Dunkelblau > Türkis > Grau
Dunkelblau ist die hinterste Ebene insbesondere für Hintergünde usw.
Türkis ist die Zwischenebene, bei der man vor allem Spalten und Hintergründe auswählen kann
Grau ist die kleinste Element-Ebene, dort bearbeiten wir Texte, Buttons, Videos, Audios etc.
5. Inhalte bearbeiten
An den Abschnitten/Zeilen/Elementen wird die Bearbeitungsleiste von Divi angezeigt. Diese ist immer gleich aufgebaut. Wenn man mit der Maus über ein Abschnitt/Zeile/Element fährt bekommt man diese Leiste angezeigt.
- Das erste Werkzeug verschiebt ein Element,
- beim Zahnrad kommt man in die Einstellungen (und das Design),
- das dritte Werkzeug ist zum Duplizieren eines Abschnitts
- das vierte (Tabelle) Werzeug ist für das Einstellen der Anzahl der Spalten
- der Pfeil nach unten ist zum Speichern des Elements in der Bibliothek
- und der Papaierkorb ist zum Löschen des Elements
Die Bearbeitung des Textes und der Bilder schaust du dir besser i Video an 🙂
6. Bilder und Größe
Die Ladezeit auf eurer Website ist ein ganz wichtiges Kriterium, wenn potentielle Kunden und Besucher euch erreichen. Viele springen direkt ab, wenn die Seite sich nicht schnell genug laden lässt. Daher ist das Format und die Datei-Größe richtig wichtig.
Wenn ihr Bilder aus Vorlagen tauschen wollt, dann achtet auf das Format. Andere Formate können auch sehr gut aussehen, aber gerade, wenn Bilder nebeneinander zu sehen sind, dann macht die exakte Größe Sinn.
Geht in die Mediathek, sucht das Bild, das ihr ersetzen wollt, merkt euch die Abmaße und schneidet euer Bild auf diese Größe zu.
Für das Datenformat jpg verkleinern, hier ein Beispiel Link (jpg komprimieren): https://www.adobe.com/de/express/feature/image/resize/jpg
Für das Format jpg zu webp auch ein Link:
https://convertio.co/de/jpg-webp/
7. Kontaktformular
Hier geht es darum, das Kontaktformular optisch anzupassen. Einzelne Punkte hinzuzufügen und es farblich etc. anzupassen.
Es gibt folgende Optionen für neue Felder im Formular:
- Eingabe-Felder: für kurzen Text wie den Namen oder Tel.
- E-Mail-Feld: Mail-Adresse
- Textarea: Für längere Texte wie Nachrichten
- Kontrollkästchen: z.B. Datenschutz, die angekreuz werden müssen
- Radio-Buttons: z.B. für Kursauswahl – verschiedene Punkte, von denen welche angekreuzt werden können
8. Buttons
Optisch könnt ihr den Button in den Einstellungen unter „Design“ einfach anpassen. Dafür den Bereich „Button“ bei Design suchen und „benutzerdefiniert“ aktivieren. Dann könnt ihr alles anpassen.
Für die Verlinkung zwischen Sektionen:
1. Die Zielsektion – Einstellung öffnen – Erweitert – „CSS & ID-Klassen“ und dann da die Sektion benennen, z.B. „Kontakt“
2. Button – Einstellung öffnen – unten direkt auf „Link“ gehen und dann Raute/Hashtag eingeben und den Namen des Ziels, also z.B. #Kontakt
Wenn ihr das gemacht habt, dann führt ein Klick auf den Button dazu, dass die Seite auf die Zielsektion scrollt 🙂
9. Benutzer verwalten
Solltet ihr beispielsweise jemanden einladen wollen, der mit an eurer Website arbeitet oder sich darum kümmert, dann schaut einfach kurz in das Video – da erkläre ich es kurz und knackig.
10. Updates durchführen
Updates sind immer wichtig, um die Sicherheit eurer Website zu gewährleisten. Ca. alle zwei Monate könnt ihr nachschauen, ob es Updates gibt – ich kann natürlich nicht garantieren, dass es doch mal Fehler oder Hacks auf der Website gibt, aber diese Garantie kann euch leider niemand geben. Bisher ist mir bei allen Webseiten allerdings noch nichts passiert.
Updates – Geht aufs Dashboard und oben links in der obersten Leiste erscheint ein Button mit so zwei ineinanderlaufenden Pfeilen. Draufklicken und dann in die Update-Liste schauen.
Es gibt drei Arten von Updates: WordPress-Updates, Plugins und Themes. Einfach alle aktualisieren und ihr seid erstmal wieder safe 🙂
11. Handy Ansicht
Am Endes des Baus eurer Website macht es Sinn, sich die Handy-Ansicht vorzunehmen. Denn es sollen ja auch alle, die mit dem Smartphone eure Website besuchen, Spaß haben. Das nennt sich dann auch „Responsive Design“.
Ihr geht in die Bearbeitung eurer Website und klickt ganz unten in der Mitte auf den lila Kreis mit den drei Punkten. Auf der linken Seite erscheinen dann die verschiedenen Ansichten – Desktop, Tablet und Smartphone. Wählt Smartphone aus. Scrollt mal durch die Seite und schaut, wie es aussieht.
Für die Erklärung mit der „Sichtbarkeit“ schaut gerne das Video – ist leichter nachzuvollziehen 🙂
12. Umschalter
Der Umschalter ist ein ganz tolles Element, das ihr einbauen könnt auf eurer Website, wenn nicht genug Platz für allen Text ist.
Ihr habt damit ein ausfahrbares Element, das jeder öffnen kann, wenn er oder sie noch mehr von euch lesen kann 🙂