Teil 2: Das Theme Divi: Divi lernen

Das Divi Theme ist eines der beliebtesten WordPress Themes. Und das nicht ohne Grund. In diesem Abschnitt lernst Du die Funktionsweise von Divi und den genialen Divi Builder kennen.

1. Die Grundlagen des Divi Themes

Hier erfährst Du, was der Divi-Builder ist und wie er aufgebaut ist. Ebenfalls zeigen wir, welche Bearbeitungsmodi zur Verfügung stehen.

1.1.Zwischen Ansichten wechseln im Backend

Dir stehen verschieden Ansichten zur Verfügung um Deine Website zu bearbeiten. Der Wechsel zwischen den Ansicht ist einfach. Jede Ansicht hat Ihre Vorteile.

Hinweis: Wir werden im Folgenden immer wieder von Backend und Frontend sprechen. Wenn Du eine Seite öffnest, tut dies Divi stets in der Backend-Ansicht. Du befindest Dich im Backend, wenn Du auf der linken Seite die schwarze Navigationsleiste siehst.

WICHTIG: Der Button “Zurück zum Standard-Editor” sollte NIE angeklickt werden, denn er löscht alle Inhalte.

Wechsel zwischen den verschiedenen Ansichten kannst Du vornehmen, indem Du das entsprechende Icon anwählst:
1. Wireframe Ansicht = Böxli (rechts abgebildet)
2. Desktop Ansicht
3. Tablet Ansicht
4. Mobile Ansicht
5. Frontend

Wireframe Ansicht: In dieser Ansicht wird das sogenannte Bausteinsystem deutlich erkennbar. Du kannst Bausteine bearbeiten, indem Du auf das Zahnrad klickst. Neue Bausteine können mittels Klick auf das entsprechende Plus-Symbol hinzugefügt werden.

Desktop Ansicht: In dieser Ansicht wird eine Vorschau der Website angezeigt und du kannst die Bausteine hier anpassen. Dies sieht zwar optisch schöner aus, jedoch ist weniger übersichtlich und es passieren eher Fehler, da oftmals zur Kontrolle die Vorschaufunktion nicht genutzt wird.

Die Tablet Ansicht sowie die Mobile Ansicht sehen ähnlich aus wie die Desktop Ansicht. Der einzige Unterschied liegt in der Darstellungsgrösse: Während bei der Desktop Ansicht die Website am breitesten dargestellt wird, ist sie bei der Tablet Ansicht kleiner und bei der Mobile Ansicht nochmals kleiner.

Frontend-Ansicht: In der Frontend-Ansicht arbeitet man weiterhin mit dem Baustein-System, jedoch man verändert die Inhalte direkt auf der Website. Das heisst, man hat ähnlich wie in der Desktop Ansicht von Anfang an die Website-Ansicht zur Verfügung. In der Frontend-Ansicht kann man zusätzlich auf andere Seiten navigieren, Du arbeitest hier also auf einer Art live Ansicht der Website.

Du gelangst in die Frontend-Ansicht, indem Du den Button „Bauen Sie auf dem Frontend auf“ anwählst.

Der Divi Builder und seine hierarchische Struktur

Bei Divi besteht Ihre Website aus mehreren Bausteine. Diese werden aneinander gereiht und es gibt drei Hierarchiestufen. Damit ein Inhalt erstellen werden kann, braucht es immer mindestens ein Element jeder Hierarchiestufe.

Die Sektion = blaue Box: Dies ist die höchste Gliederungsebene. Für jeden Abschnitt Ihrer Website gibt es eine Sektion. Dass heisst, eine Seite setzt sich aus mehreren Sektionen zusammen. Die Einstellungen die hier vorgenommen werden, gelten für den gesamten Abschnitt. Hier können Hintergrundbilder eingebunden sein.

Die Zeile = grüne Box: Jede Sektion beinhaltet mindestens eine Zeile. Auf dieser Hierarchiestufe kann die Anordnung des Inhaltes festgelegt werden: Die gewünschte Spaltenanzahl kann eingestellt werden und man kann auswählen, ob man gleichgrosse oder unterschiedlich breite Spalten haben möchte. Du kannst auch mehrere Zeilen, mit unterschiedlichem Design innerhalb einer Sektion einfügen. Anschliessend kannst Du die Inhaltsmodule auf die Spalten der Zeilen verteilen.

Inhaltsmodule = graue Box: In den grauen Boxen wird der Inhalt, der auf der Website angezeigt werden soll, bearbeitet. Diese Module sind Bestandteile einer Sektion und einer Zeile. Es gibt verschiedene Inhaltsmodule. Diese werden im Folgenden dargestellt.

Divi Builder – Funktionen

2. Divi Content Module

In diesem Kapitel wirst Du vier häufig verwendete Module kennenlernen: Das Text Modul, das Bild Modul, das Blurb Modul und das Button Modul.

2.1 Das Text Modul

Im Text Modul werden die Texte abgefüllt. Egal ob längere Produktbeschreibungen oder kurze Überschriften, beides kann mit dem Textmodul gestaltet werden.

Der Textmodus

Text Abschnitt: Hier befindet sich der “Body”. Dort kannst Du Deine Texte bearbeiten. Dieser enthält zwei Modi, den Text und den visuellen Modus.

Text Modus: Grundsätzlich sollte in diesem gearbeitet werden. Denn hiermit geschehen weniger Fehler.

Fliesstext: Hier kannst Du Deinen Text bearbeiten. Manchmal ist er von <p> </p> umgeben, dies kennzeichnet einen Absatz im Fliesstext. Zudem werden alle Formen von Formatierungen, wie zum Beispiel Fettschrift, in solchen Kleiner-als/Grösser-als Zeichen gesetzt. Dabei unterscheidet sich jeweils der Befehl in den Klammern. Für Fettschrift lautet dieser beispielsweise: <strong> Wort </strong>.

Soft Hyphen: Hier wird das Wort umgebrochen, wenn nicht ausreichend Platz zur Verfügung steht. Dies geschieht oft auf der Mobile Ansicht. Die Trennung erfolgt mit einem Trennstrich.
Code: &shy;­

Non Breaking Space: Hier wird der Umbruch zwischen zwei Wörtern verhindert. Dafür muss ein geschütztes Leerzeichen eingefügt werden.
Code: &nbsp;

Der visuelle Modus

Hier können Formatierung, wie ein Wort in fett darstellen oder eine Nummerierungsliste, vorgenommen werden. Es bietet ähnliche Funktionen wie die gängigen Textverarbeitungsprogramme. Im visuellen Modus erhält man eine Vorschauansicht mit den gewählten Formatierungen. Jedoch geschehen hier oftmals Fehler beim Hineinkopieren von Texten, da die bestehenden Formatierungen übernommen werden und dann nicht mehr der standardmässigen Schriftart der Website entsprechen. Deshalb empfehle Ich dir, grundsätzlich im Text Modus zu arbeiten und nur für bestimmte Formatierungen in den visuellen Modus zu wechseln. Du kannst stets mit einem Klick zwischen beiden Modi hin und her wechseln. Kontrolliere zudem immer in der Websitenvorschau, ob der Text so aussieht, wie Du es Dir vorgestellt hast.

Text verlinken: Wenn Du dich in einem Textfeld befindest, wechselst Du in den visuellen Modus, um eine Verlinkung auf eine andere Seite einzufügen. Dann erscheint folgende Ansicht:

Makieren: Wähle das zu verlinkende Wort, den Textabschnitt oder eine URL aus.

Verlinken: Klicke auf den Ketten-Symbol. Daraufhin öffnet sich ein kleines Fenster.

Zahnrad-Icon: In diesem kleinen Fenster klickst Du auf das Zahnrad-Icon. Ein grösseres Fenster öffnet sich.

URL-Feld: WordPress fügt automatisch die markiert URL im oberen Feld WordPress fügt automatisch die markiert URL im oberen Feld ein. In jedem Fall sollte hier die URL der Website stehen, auf die verwiesen werden möchten.

Link-Text-Feld: Hier kann der Text angepasst werden, der angezeigt werden soll, sofern dies nicht die verlinkte URL sein soll. Beispielsweise könnte nur “hier” stehen. Dann wäre lediglich das Wort “hier” verlinkt. Im Beispiel wurde ein kurzer Textabschnitt verlinkt.

„Link in einem neuen Tab öffnen“ Checkbox: Wenn dies angewählt ist, öffnet sich bei User, die auf den Link klicken, die Website in einem neuen Tab. Ist die Checkbox hingegen nicht angewählt, lädt die Website im aktuell Tab und der User verlässt somit die aktuelle Seite.

WebSENNsation handhabt es so, dass interne Links im aktuellen Fenster geöffnet werden und externe, also Nicht-WebSENNsation-Websiten, werden in einem neuen Tab geöffnet. Schliesslich will man die Besucher nicht von der eignen Website vertreiben.

Suchfeld und -anzeige: WordPress bietet eine praktische Suchfunktion für interne Links an. Wenn man nicht sicher ist, wie die URL einer eigenen Seite lautet, kann hier diese hier gesucht werden und passende Seiten werden unten angezeigt.

Aktualisieren: Speichere abschliessend die Verlinkung indem Du auf den Aktualisieren-Button klickst.

Das Design

2.2 Das Bild / Image Modul

Bilder werden im Divi via Bild-Modulen verwaltet. Dieses sieht folgendermassen aus:

Bild in der Mediathek hochladen und einfügen

1. Medien: Öffne den Navigationspunkt Medien.

2. Datei hinzufügen: Anklicken. Es erscheint eine zusätzliche Box.

3. Dateien auswählen: Anklicken. Es öffnet sich der Explorer. Jetzt die gewünschten Bilder hochladen.

Bild-Abschnitt: Hier kannst Du das Bild auswählen. Zuvor musst Du das Bild allerdings in die Mediathek geladen haben. Achte zudem auf die Auflösung, mit der Du das Bild hochlädst: Wähle stets bei Grösse “Vollständige Grösse” aus.

Bild ersetzen: Wenn Du ein Bild ersetzen möchten, kannst Du mit einem Klick auf das Bild die Mediathek öffnen und dort ein anderes auswählen

Bild einfügen: Sofern aktuell kein Bild im Modul enthalten ist, kannst Du auf das Plus-Symbol in der Mitte klicken und eines aus Deiner Mediathek auswählen. Klicke es dazu an und bestätige die Auswahl unten rechts mit ”Ein Bild hochladen”.

Ausserdem hast Du die Möglichkeit, ein Bild von einer anderen Website einzufügen. Dazu wählst Du “von URL einfügen” (1.) und gebe die Bildadresse ein (2.).

Bild Design

Bildnamen & -grössen

Bevor Sie ein Bild in die Mediathek geladen wird, sollten ein paar Dinge beachtet werden. Bezüglich dem Bildnamen ist es folgendes:

• keine Leerschläge: Worttrennung mit Bindestrich
• keine Umlaute
• Keywords verwenden: Denn diese Unterstützen SEO.

Noch wichtiger als der Bildname ist die Bildgrösse und -auflösung:

• Für den Desktop-Header:
  Auflösung 72 dpi und eine Bildgrösse von 1920 x 700 px
• Für den Mobile-Header sowie andere Bilder:
  Auflösung 72 dpi und eine Bildgrösse von 900 x 782 px

Tools zum Zuschneiden von Bildern:
Photoshop / Photoshop Elements ODER Canva (Online Tool)
https://www.websennsation.ch/blog/canva-bilder-zuschneiden-leicht-gemacht/

Wichtig ist ebenfalls das Dateiformat und die Benennung der Datei
Hier zum Beitrag der Bilder SEO

2.3 Das Blurb / Informationstext Modul

Dies ist eine Kombination zwischen einem Text und einem dazugehörigen Bild oder Icon.

1. Text-Abschnitt: Zuoberst kannst Du einen Titel sowie einen Text im “Body” eingeben. Wie Du im Beispiel siehst, muss nicht zwingend beides ausgefüllt werden, Du kannst dich für eines entscheiden.

2. Bild & Icon-Abschnitt: In diesem Abschnitt kann das Icon respektiv das Bild ausgewählt werden. Dieser ist im nachfolgenden Bild dargestellt.

3. Icon generieren: Wenn Du den Schalter betätigst und “Icon verwenden” auf “Ja” umstellst, öffnet sich ein Abschnitt mit einer grossen Auswahl an Icons. Die Farbe kannst Du im Tab Design anpassen. Wenn Du eines ausgewählt hast, bestätige mit dem grünen Häckchen unten rechts.

4. Bild verwenden: Anstatt eines Icons, kannst Du ein Bild auswählen. Dazu wie gewohnt eines aus der Mediathek auswählen oder ein Bild von einer URL beziehen.

2.4 Das Button Modul

Ein häufig verwendetes Element im Divi ist das Button-Modul. Es ermöglicht, einen auffälliges Feld für einen Link zu erstellen.

1. Text Button: Hier kann der Text, der im Button angezeigt werden soll, definiert werden.

2. Link-URL des Buttons: Hier wird die zu verlinkende URL eingetragen. Es gibt leider keine Suchfunktion mehr.

3. Link-Ziel Button-URL: Erneut kann ausgewählt werden, ob die URL in einem neuen Tab oder im aktuellen geöffnet werden soll.

3. Neue Seite erstellen / Seite kopieren

4. Inhalte richtig speichern: Speichern, aktualisieren und veröffentlichen

Wenn Inhalte auf einer Website überarbeitet werden, geht häufig die Aktualisierung vergessen. Dieser simple Schritt wird in dieser Lektion gezeigt. Zudem erfährst Du, wie Du die Vorschau-Funkion nutzen kannst.

1. Vorschau-Funktion: Nutze diese praktische Funktion von DIVI unbedingt, bevor Du Änderungen an Deiner Website vornimmst. Durch das Klicken auf den Vorschau-Button öffnet sich ein neues Tab. Dies zeigt die Website, wie diese mit den vorgenommen Anpassungen aussehen würde. Es sollte sorgfältig geprüft werden, ob die gesamte Seite so dargestellt wird, wie gewünscht.

2. Aktualisieren: Verwende diesen Button, wenn Du mit der Vorschau Ansicht zufrieden bist und Ihre Änderungen auf Ihrer Website so sichtbar machen möchten. Damit sind die Änderungen gespeichert.

Speichern-Button: Sofern eine Seite noch nicht veröffentlicht wurde, ist links des Vorschau-Buttons der Speichern-Button zu sehen. Dies ist im Bild weiter unten ersichtlich. Wenn Du diesen verwendest, werden die Änderungen gespeichert, aber die Seite bleibt weiterhin unveröffentlicht, ist also noch nicht für die Websitebesucher sichtbar.

5. Footer anpassen

1. Version

Diese Version des Footers bietet die Möglichkeit einen komplexen Footer zu erstellen.

1. Divi > Theme Builder > Global Footer
2. Auf Bleistift klicken.

Es öffnet sich der Divi Builder. Hier die gewünschten Inhalte anpassen.

Danach auf den violetten Kreis mit den drei weissen Punkten klicken. Danach wird rechts unten ein grüner Button angezeigt auf dem Save steht.

Diesen Button anklicken.

2. Version

In dieser Version des Footers kann man die Footer-Credits ändern.
Unter Theme Customizer auf Footer gehen und von dort zu Untere Footerleiste navigieren.

Hier kann man jedes Jahr die Jahreszahl anpassen.

Unter Design bei den Widgets kann man den Footer bearbeiten. Die Bearbeitung wird in diesem Beitrag genauer erläutert.

Glückwunsch, jetzt kennst du dich mit Divi aus

Mit diesem Wissen kannst Du die Inhalte Deiner Website selbstständig verwalten.

Im nächsten Kapitel lernst Du die Grundlagen zu SEO (Suchmaschinenoptimierung) und Bloggen – damit kannst Du Deiner Website Sichtbarkeit verschaffen.

Franziska