ANLEITUNGEN DIVI
Kapitel 1:
Das Grundprinzip in DIVI
Arbeitsplatz 1:
Mit dem Visual Builder arbeiten:
Arbeitsplatz 2:
Mit dem Grid-Raster arbeiten
Arbeitsplatz 3:
Der Theme Builder
Kapitel 2:
Vorbereitende Arbeiten
Globale Einrichtungen:
Bevor du mit dem Aufbau beginnst
So kommst du an den Customizer:
Kapitel 3
Was du wissen musst, bevor du baust
Fehler passiert – was tun? - Undo und Versionsverlauf
Mobile Geräte schon beim Aufbau mitdenken
Mobile First oder Desktop First - was gilt hier?
Mobile First im Denken - Desktop First im Bauen.
Bilder optimieren vor dem Upload
Wo und wie du Bilder optimierst
Elemente in der Divi-Bibliothek speichern
Modul in der Bibliothek speichern
Element aus Bibliothek einfügen
Seitenvorlage übernehmen (Möglichkeit 1)
Neue Seite anlegen, mit Masterseite:
Seitenvorlagen übernehmen, Möglichkeit 2
Eine neue Seite zum Menü hinzufügen
Innen- und Außenabstand anpassen
Modul in eine andere Zeile verschieben
Die Seiten für mobile Geräte anpassen
Einstellungen pro Gerät vornehmen
Kurz-Checkliste Mobiloptimierung
Header und Footer gestalten
Wichtiges Feature: der Divi Theme Builder
Kapitel 5:
Für Fortgeschrittene
Konkrete Layouts definieren
Sektion mit fester Höhe und Hintergrundbild
Spalten mit Hintergrundfarbe Bilder links,
Text als Kasten
Texteinstellungen im Text-Modul anpassen
Erklärung zu Margin und Padding (Außenabstand und Innenabstand)
Listen optimieren (Schriftgröße, Abstände) + eigene Listenpunkte
Teil 1 – Ohne CSS (nur Divi-Einstellungen)
Bilder links, Text rechts – Größe, Anzahl, Abstände
Bild links, Text rechts – im Wechsel anordnen
Zwei „Textkarten“:
Gleiche Höhen trotz ungleicher Textlängen
Kontaktformular mit dem Divi-Modul erstellen
Divi ist ein sogenanntes Page-Builder-Theme für WordPress, entwickelt von der Firma Elegant Themes. Es ersetzt den normalen WordPress-Editor durch einen visuellen „Baukasten“, in dem du Seiten direkt am Bildschirm gestalten kannst – ohne Programmierkenntnisse.
Divi ist weltweit eines der meistgenutzten WordPress-Themes mit Builder und eignet sich besonders für Selbständige, kleine Unternehmen und alle, die ihre Website selbst pflegen möchten.
Bevor du mit Divi arbeitest, stelle sicher, dass folgendes bereits eingerichtet ist:
Wichtiger Hinweis, bevor du loslegst:
Bevor du deine Seiten anlegst, müssen erst globale Einstellungen vorgenommen werden. Wie das funktioniert erkläre ich weiter unten im Thema
Bevor du anfängst zu bauen, lohnt es sich, kurz innezuhalten. Divi ist kein einzelnes Werkzeug – es hat drei verschiedene Bereiche, in denen du arbeitest. Jeder hat seinen eigenen Zweck, seine eigene Stärke.
Du musst nicht sofort alle drei beherrschen. Aber wenn du weißt, dass es sie gibt und wofür sie da sind, wirst du dich von Anfang an besser orientieren – und später keine bösen Überraschungen erleben, wenn plötzlich jemand fragt: „Wo stelle ich eigentlich den Footer ein?"
Die drei Bereiche sind:
du gestaltest direkt auf der Seite, siehst sofort das Ergebnis. Dein Hauptwerkzeug für den Seiteninhalt.
du arbeitest strukturell im Backend. Schneller, stabiler, ideal zum Verschieben von Elementen.
du gestaltest alles, was auf jeder Seite gleich aussehen soll: Footer, Header, Blogvorlagen.
Alle drei nutzen dieselbe Logik: Sektionen, Zeilen, Module. Was du in einem lernst, hilft dir in allen anderen.
Falls sich die Werkzeugleiste nicht gleich zeigt beim Drüberfahren mit dem Curser nicht reicht, einfach einmal klicken. Diese Ansicht reagiert sehr sensibel.
Wenn du weiß, welches Element du bearbeiten möchtest, kannst du direkt die Balken anklicken. Auch so öffnen sich die Editorfenster der jeweiligen Elemente (Sektionen, Zeilen oder Module).
Wenn du lieber visuell arbeites:
Die Gridansicht läd schneller und du kannst dort Module, Zeilen und Sektionen einfacher verschieben. Im Divi Builder (also in der Frontentansicht), funktioniert das Verschieben der Element nur schlecht und hier können schnell Fehler passieren.
Ein weiterer Vorteil der Gridansicht: Sie läd nicht nur schneller, du kannst hier auch direkt die Voransicht einschalten (sie befindet sich hier oberhalb der Vorschau, was manchmal sinnvoller ist), siehe Bild. Oben links findest du die 3 Screenansichten: Desktop, Tablet, Smartphone. Je nachdem, welchen du anklickst, verändert sich die Breite der Vorschau. In vielen Fällen ist diese Arbeitsweise effektiver.
Gib deinen Elementen eine aussagekräftige Bezeichnung. Du kannst alle Balken umbenennen. Entweder im aktivierten Visual Builder > im Editorfenster des jeweiligen Moduls, Zeile oder Sektion > dort unter „Inhalt“ weiter unten > Admin Label.
Oder direkt im Gridraster:
Einfach die Begriffe Sektion, Zeile oder Text direkt überschreiben (du kannst tatsächlich einfach mit dem Mousecurser rauf).
In der Gridansicht siehst du nur den Body-Teil der Seite. Globalen Header und globalen Footer wird dort nicht gezeigt.
Visual Builder und Gridansicht kennst du jetzt. Beide sind dafur da, den Inhalt einzelner Seiten zu gestalten.
Aber was ist mit Bereichen, die auf jeder Seite nicht nur gleich aussehen sollen, sondern die auf jeder Seite erscheinen sollen? Zum Beispiel die Navigation oben oder der Footer unten mit dem Impressum?
💡 Stell dir deine Website wie ein Buch vor. Visual Builder und Gridansicht sind dafur da, die einzelnen Seiten zu schreiben. Der Theme Builder gestaltet den Einband, den Kopf und den Fuss jeder Seite, also alles, was sich wiederholt.
Du brauchst den Theme Builder immer dann, wenn etwas auf jeder Seite automatisch erscheinen soll, ohne dass du es einzeln einbauen musst. Die wichtigsten Einsatzgebiete:
⚠️ Das Impressum und die Datenschutzerklärung müssen auf jeder Seite erreichbar sein, ein sinnvoller Platz dafür ist der Footer. Bau den Footer deshalb früh auf, bevor du deine Seite veröffentlichst.
Der Footer erscheint ab sofort automatisch auf jeder Seite deiner Website.
💡 Du musst den Theme Builder jetzt noch nicht vollstandig einrichten. Merk dir aber: Sobald deine erste Seite fertig ist und du sie veroffentlichen mochtest, ist der Footer mit Impressum und Datenschutzerklarung Pflicht.
Sobald du die globalen Elemente festgelegt hast, erscheinen sie in einem kräftigen Gelbgrün. Die Farbe Gelbgrün ist der Hinweis darauf, dass dieses Element global ist, also auf allen Seiten identisch aussieht und identische Verhaltensweisen hat. Auch auf den Seiten, wenn du im Visual Builder arbeitest, haben die globalen Elemente einen gelbgrünen Rahmen.
Wenn du in der Gridansicht arbeitest, werden Header und Footer NICHT angezeigt.
Jede Seite in Divi besteht aus genau drei Elementen – nicht mehr, nicht weniger. Egal wie komplex eine Seite aussieht: Wenn du sie dir genau anschaust, findest du immer dieselbe Struktur darunter. Das Prinzip ist immer dasselbe: erst die Sektion, dann die Zeile, dann das Modul. Diese Reihenfolge kannst du nicht umkehren – und das ist gut so. Sie gibt dir Struktur und verhindert, dass eine Seite zum Flickenteppich wird.
Diese drei Bausteine sind:
Die Sektion bildet also den äußeren Bereich eines Inhaltsabschnitts.
Die Zeile bestimmt das Spaltenlayout innerhalb dieser Sektion.
Das Modul enthält den eigentlichen Inhalt, das können sein:
Text, Bild, Button, Kontaktformular (gibt es als ganzes Modul), Akkordeon, Linie oder andere Elemente.
Nachdem die Sektion erstellt wurde, fordert Divi automatisch dazu auf, eine Zeile auszuwählen.
Wähle ein Spaltenlayout aus. Typische Layouts sind eine Spalte für einfachen Text, zwei Spalten für Bild und Text nebeneinander oder drei Spalten für mehrere Inhalte nebeneinander.
Ein neuer Inhaltsbereich ist angelegt.
Ein häufiger Fehler von Anfängern: Sie gestalten jedes Modul einzeln und wählen dabei Farben und Schriften immer wieder neu. Das führt schnell zu einem uneinheitlichen Erscheinungsbild.
Divi bietet dafür 2 zentrale Stellen: die Theme-Anpassungen (Customizer) und die Theme-Optionen
So gehst du vor:
Sobald du das getan hast, stehen dir diese Farben in jedem Modul und jeder Einstellung sofort zur Auswahl – du musst nie wieder einen Hex-Code abtippen.
Nimm nicht mehr als 3 Farben (neben schwarz und weiß). Sinnvoll: Eine Hauptfarbe und 2 oder höchstens 3 Nebenfarben (die sich ergänzen sollten, nicht konkurrieren). Für Links und Buttons nutze eine Komplementärefarbe zur Hauptfarbe.
Die meisten Layouteinstellungen werden im Customizer vorgenommen.
Hier stellst du vor allem folgende Elemente ein:
Für die Einstellung der Navigation im Header (also ganz oben) gibt es 2 Möglichkeiten: Wie 1) eben erwähnt im Customizer und 2) in Divis „Theme Builder“.
Der Theme Builder ist sinnvoller dann, wenn du differenzierte Layout-Einstellungen für dein Menü wünscht. Hier im Theme Builder kannst du viel individueller einstellen als im Customizer. Wie das geht, erkläre ich weiter unten.
💡 Tipp: Wähle maximal 2 Schriftarten - eine für Überschriften, eine für den Text. Mehr wirkt unruhig
Wenn du diese Einstellung gemacht hast, sehen deine Button auf jeder Seite identisch aus.
Es kann sein, dass ein Button doch mal eine andere Farbe braucht, z.B. wenn er zu hell ist und dann auf einer Seite auf einem helleren Untergrund stehen soll als bei anderen Seiten. Macht nichts, du kannst jeden Button innerhalb des Moduls separat einstellen (Layout ändern).
Globale Einstellungen vor der eigentlichen Arbeit
Bevor du auch nur einen winzigen Teil gebaut hast an deiner Seite, ist dieser Punkt der wichtigste: das Speichern.
Hier unterscheiden sich Visual Builder und Gridansicht.
In der Gridansicht ist das Speichern einfach: Du hast immer oben rechts den grünen Speichern-Button. Klicke ihn nach jeder größeren Änderung.
Da du hier komplett im Frontend arbeitest, ist das Speichern etwas versteckter:
💡 Wichtig: Divi speichert nicht automatisch. Wenn du die Seite schließt oder der Browser abstürzt, ohne gespeichert zu haben, sind alle Änderungen verloren.
Divi und WordPress bieten zwei Sicherheitsnetze, wenn du einen Fehler gemacht hast:
Solange du dich im Visual Builder befindest, kannst du mit Strg+Z (Windows) bzw. Cmd+Z (Mac) den letzten Schritt rückgängig machen. Das funktioniert für mehrere Schritte hintereinander - genau wie in einem Textprogramm.
WordPress speichert automatisch Versionen deiner Seite. So kommst du zu einer früheren Version zurück:
💡 Tipp: Vor größeren Umbauten einfach einmal manuell speichern - damit hast du immer einen sauberen Ausgangspunkt zum Zurückkehren.
Unten im Bild siehst du einen meiner Revisionsverläufe einer Seite. Dies ist nur ein kleiner Ausschnitt, die Liste der Revisionen ist sogar noch länger. Du siehst, dass die Revisionen sogar bis vor 3 Wochen zurückreichen. Wenn du daran nichts änderst, können die Revisionen sogar bis zu mehreren Monaten reichen.
Achtung, jetzt kommt’s: Eine lange Speicherung der Revisionen belegt viel Platz in deiner Datenbank. Das heißt, dass die Ladezeit der Website damit verlangsamt wird.
Tipp: Installiere dir ein Plugin zum Bereinigen der Datenbank.
In Divi kannst du für jedes Element eigene Werte pro Gerät einstellen.
In der professionellen Webentwicklung gilt seit Jahren der Grundsatz: Mobile First. Das bedeutet: Man denkt und gestaltet zuerst für das Smartphone – und erweitert das Design dann für größere Bildschirme.
Mobile First erzwingt Klarheit: Was auf einem kleinen Bildschirm funktioniert, funktioniert fast immer auch auf dem Desktop. Umgekehrt gilt das leider nicht.
In Divi arbeiten wir aber trotzdem technisch mit dem Desktop als Ausgangspunkt - und das hat einen konkreten Grund:
💡 Divi ist als Tool Desktop-First aufgebaut. Die Einstellungen, die du am Desktop vornimmst, gelten automatisch als Ausgangswert für Tablet und Smartphone. Divi arbeitet von oben nach unten.
Wenn du dagegen anfängst, Werte direkt am Handy einzutragen, arbeitest du gegen die Vererbungslogik des Tools - und das führt bei Anfängern schnell zu Verwirrung und unerwarteten Ergebnissen.
Das heißt in der Praxis: Du baust technisch auf dem Desktop. Aber du fragst dich dabei die ganze Zeit - funktioniert das auch auf dem Handy? Ist der Text zu klein? Sind die Abstände zu groß? Gibt es zu viele Spalten nebeneinander? Du denkst mobil, auch wenn du gerade den Desktop-Bildschirm vor dir siehst.
Am Ende jedes Abschnitts oder jeder Seite wechselst du dann in die Handy-Ansicht und passt gezielt an, was nötig ist. Divi übernimmt deine Desktop-Werte als Standard.
Ziel ist es, Text auf der Seite anzuzeigen.
Der Text erscheint in der gewählten Spalte der Seite.
Einer der häufigsten Fehler beim Websitebauen: Bilder werden direkt von der Kamera oder aus WhatsApp hochgeladen - ohne Vorbereitung. Das verlangsamt die Website erheblich und schadet der Suchmaschinenoptimierung.
WordPress bietet eine einfache Bildbearbeitung direkt in der Mediathek:
💡 Empfehlung: Installiere das kostenlose Plugin Smush oder ShortPixel - diese Plugins komprimieren alle neu hochgeladenen Bilder automatisch im Hintergrund.
Das Bild erscheint in der gewählten Spalte der Seite.
Divi ermöglicht es, Sektionen, Zeilen und Module in der Divi-Bibliothek zu speichern.
Das funktioniert mit jedem Modul. Das spart Arbeit und Zeit, weil Elemente nicht jedes Mal neu erstellt werden müssen. Gleichzeitig sorgt es dafür, dass sich wiederkehrende Elemente auf der Website optisch gleichen und die Seite ein konsistentes Erscheinungsbild behält.
Ein Modul so zu speichern, dass es später auf anderen Seiten wiederverwendet werden kann.
Das Modul befindet sich jetzt in der Divi-Bibliothek und kann jederzeit wieder eingefügt werden.
Die Sektion oder Zeile befindet sich jetzt in der Divi-Bibliothek.
Hinweis: Die 3 Punkte für das Kontextfenster findest du auch oben rechts im geöffneten Editorfenster.
Ein gespeichertes Element erneut verwenden.
Das gespeicherte Element erscheint auf der Seite.
So legst du eine neue Seite in WordPress an:
Tipp: Mach deine 1. Seite komplett fertig, mit allen dir wichtigen Einstellung und vor allem: den Mobileinstellungen. So kannst du die fertige Seite übernehmen (klonen) und hast später weniger Arbeit, wenn du differenzierte Feineinstellungen machst, wie z.B. die mobile Optimierung.
Wie du Seiten duplizierst, indem du bestehende Seiten klonst, habe ich oben gezeigt. Es gibt noch eine weitere Möglichkeit, die sehr effektiv ist. Dazu legst du zunächst eine „Masterseite“ an. Diese Masterseite übernimmst du dann für jede weitere Seite.
Nun gehst du vor wie in Möglichkeit 1:
Neue Seiten erscheinen nicht automatisch in der Navigation. So fügst du sie zum Menü hinzu:
💡 Tipp: Wenn du eine Seite als Untermenüpunkt anlegen möchtest, ziehe sie im Menü-Editor etwas nach rechts unter den übergeordneten Punkt.
Text verändern, Abstände anpassen und Links einfügen.
Der Text auf der Seite ist aktualisiert.
Abstände sorgen dafür, dass Text Luft zum Rand oder zu anderen Elementen hat.
Der Innenabstand bestimmt den Abstand zwischen Text und Modulrand. Der Außenabstand bestimmt den Abstand zu anderen Elementen. Gib die gewünschten Werte ein und speichere das Modul.
Der Abstand des Textes auf der Seite wurde angepasst.
Text mit einer anderen Seite oder Website zu verlinken.
Öffne das Textmodul.
Markiere den gewünschten Text im Editor.
Klicke auf das Link-Symbol (Kette)
Gib die gewünschte URL ein.
Bestätige die Eingabe und speichere das Modul.
Der markierte Text funktioniert jetzt als Link.
Ein Modul schnell zu duplizieren.
Das Modul erscheint ein weiteres Mal auf der Seite.
Dasselbe kannst du mit jedem anderen Modul machen, mit Zeilen und mit Sektionen
Fahre mit der Maus über das Modul.
Greife das Verschieben-Symbol.
Ziehe das Modul in die gewünschte Zeile oder Spalte und lasse es dort los.
Das Modul befindet sich jetzt an der neuen Position.
Diese Vorgehensweise funktioniert leider nicht optimal und schnell kann mal etwas schief gehen.
Das kopierte Modul befindet sich jetzt an der Stelle, in der du es haben wolltest.
Dasselbe funktionert mit jedem anderen Modul, mit Sektionen und mit Zeilen
In jedem Modul, jeder Zeile und jeder Sektion kannst du Werte gerätespezifisch einstellen:
Eine einzelne Seite einer Website besteht aus 3 Teilen:
Der Body enthält deinen eigentlichen Inhalt.
Mit dem normalen Divi Builder gestaltest du den Inhalt einzelner Seiten, dem Body. Aber wie sehen Navigation (Header) und Fußzeile (Footer) aus? Wie erstellst du diese beiden Elemente?
Oben habe ich erklärt, wie du die Header-Navigation mit dem Customizer einstellst. Dagegen ist nichts zu sagen. Doch: Wenn du dein Menü individueller gestalten möchtest, ist der Theme Builder deine Wahl.
Er ermöglicht es, Header und Footer genauso visuell zu gestalten wie jede andere Seite - mit Sektionen, Zeilen und Modulen.
Der Ablauf ist derselbe wie beim Header:
💡 Tipp: Im Theme Builder kannst du auch für verschiedene Seiten verschiedene Header oder Footer festlegen - z. B. einen anderen Header auf der Startseite als auf Unterseiten. Das ist eine fortgeschrittene Funktion, die du erst angehen musst, wenn du mit den Grundlagen vertraut bist.
Eine eigene Vorlage für alle Blogbeiträge erstellen, so dass jeder neue Beitrag automatisch denselben Aufbau und Look bekommt.
Wenn du in WordPress einen neuen Blogbeitrag schreibst, erscheint er normalerweise in einem nüchternen Standard-Layout: schwarzer Text auf weissem Hintergrund, keine besondere Gestaltung. Du hast kaum Kontrolle über Farben, Schriftgrösse oder Abstände.
Mit einer Theme-Builder-Vorlage sagst du Divi: So soll jeder meiner Blogbeiträge aussehen. Schriftart, Schriftgrösse, Abstände, ob das Titelbild gross oben erscheint oder nicht, wie Überschriften aussehen, ob Kommentare angezeigt werden - all das legst du einmal fest. Und dann wird automatisch jeder Beitrag, den du je schreibst, in genau diesem Layout gezeigt.
⚠️ Ohne eine eigene Vorlage sehen Blogbeitrage aus wie eine einfache Word-Seite. Das wirkt unprofessionell und passt selten zum restlichen Design der Website.
Damit du nicht den Überblick verlierst, hier kurz die Schritte, die vor dir liegen:
Eine neue, leere Vorlagen-Kachel erscheint neben der Standard-Website-Vorlage.
Jetzt musst du Divi sagen, fur welche Inhalte diese Vorlage verwendet werden soll. Das geschieht über die Vorlageneinstellungen.
Du hast hier viele Moglichkeiten:
Alle Beitrage: Die Vorlage gilt fur jeden Blogbeitrag auf der Website. Das ist die einfachste und haufigste Wahl.
Spezifische Beitrage: Die Vorlage gilt nur fur bestimmte, einzeln ausgewahlte Beitrage. Sinnvoll, wenn du z. B. fur einen einzelnen Beitrag ein besonderes Layout mochtest.
Beitrage in bestimmter Kategorie: Praktisch, wenn du verschiedene Blog-Kategorien unterschiedlich gestalten mochtest.
Die Vorlage erscheint jetzt im Theme Builder als eigene Kachel mit dem Titel Alle Beitrage.
Jetzt kommt der wichtigste Schritt: Du offnest das Body-Layout der Vorlage und fügst das Modul ein, das den eigentlichen Inhalt deiner Blogbeitrage anzeigt.
Dieses Modul heisst in Divi: Inhalt posten. Es ist ein besonderes Modul, das den Text, die Bilder, die Überschriften und alle anderen Inhalte automatisch aus dem jeweiligen Blogbeitrag zieht. Du musst den Inhalt also nicht manuell eintippen, Divi holt ihn sich selbst.
Das Modul wird eingefügt. In der Vorschau siehst du jetzt Platzhaltertext mit Überschriften, Absatzen und einem Blockquote. Das ist kein echter Inhalt, sondern eine Vorschau, wie deine Beitrage spater aussehen werden.
Das Inhalt-posten-Modul ist eingefügt. Divi weiss jetzt, wo der Beitragsinhalt erscheinen soll.
Jetzt gestaltest du, wie der Text in deinen Blogbeitragen aussehen soll. Das Inhalt-posten-Modul bietet dafur sehr viele Einstellungen, du brauchst aber nur die wichtigsten.
Anders als die Seiten werden die Beiträge einfach in den klassischen Editor geschrieben (oder kopiert, je nachdem, wo du geschrieben hast). Würdest du den normalen Visual Builder nutzen (wie die Seiten), dann würden sie nicht im Layout angezeigt. Plus: Du hättest mehr Arbeit.
Beispiel:
Eine Sektion mit Hintergrundbild, die auf jedem Gerät schön aussieht und Überschrift, Text und Button enthält – links oder mittig ausgerichtet.
In der Spalte folgende Module hinzufügen:
Alle drei Module je nach Wunsch: links ausgerichtet (Standard-Einstellung) oder mittig.
„vh“ bedeutet „Viewport Height“ – also ein Anteil der sichtbaren Bildschirmhöhe.
70 vh heißt: Die Sektion ist 70 % so hoch wie der Bildschirm.
So bleibt die Wirkung großflächig, ohne dass Inhalte abgeschnitten werden.
Unten findest du einen Hinweis, warum in diesem Fall vh sinnvoller ist als px.
Das legt eine leichte Tönung über das Bild, damit Text und Button klarer wirken. Du kannst auch ein Overlay in der Zeile anlegen. Dann erhält nur der Teil mit dem Text einen Hintergrund und ist besser lesbar. Das kommt auf den Text und das Bild im Hintergrund an.
Wenn der Button auf dem Foto zu „flach“ wirkt: Schatten aktivieren (Design → Box Shadow)
Die Abstands- und Größenangaben sind lediglich Beispiele. Das stellst du so ein, wie es dir gefällt und wie sie in dein Layout passen.. Achte dabei auf möglichst viel Weißraum. Und natürlich auf die Anpassungen im Mobilbereich.
Unten im Divi-Builder auf die Gerätesymbole klicken:
Optional:
Verlauf über Bild für bessere Lesbarkeit
Vorschau auf allen Geräten geprüft
Warum vh und nicht px?
vh heißt: Ein Teil der Bildschirmhöhe.
Wenn du also 70 vh einstellst, ist die Sektion ungefähr 70 % so hoch wie der sichtbare Bildschirm.
Das ist praktisch, weil der Bereich dann auf großen und kleinen Geräten automatisch gut aussieht.
px (Pixel) bedeutet: eine feste Höhe.
Wenn du z. B. 500 px einstellst, bleibt die Sektion immer gleich hoch – egal ob auf einem großen Monitor oder einem Tablet. Bei Mindest-Höhe ist das zwar relativ, aber die Mindest-Höhe bezieht sich auf den Inhalt der Sektion. Sie sorgt dafür, dass die Höhe, selbst wenn nur wenig Text in der Sektion ist, diese mindestens 500 PIxel hoch ist. Die 500 Pixel können auf kleinen Monitoren gut aussehen, auf großen wirken sie zu schmal.
Deshalb ist gerade bei der Hero-Sektion, die ganz oben steht, der vh-Wert sinnvoller.
Eine feste Höhe ist sinnvoll, wenn das Bild wichtiger ist als der Text. Also wenn du z.B. ein atmosphärisches Schmuckbild als Hintergrundbild einbaust. Wenn du einen kurzen Satz oder ein Zitat groß inszenierst, kann eine feste Höhe den Fokus betonen.
→ Hier kannst du z. B. mit 40 – 60 vh arbeiten, damit der Bereich großzügig wirkt, aber nicht überdimensioniert.
Wenn Inhalt wichtiger ist als Optik – keine Höhe festlegen.
Wenn Optik wichtiger ist als Text – Höhe gezielt einsetzen.
Eine Zeile mit zwei Spalten:
Links Bilder, rechts Text.
Der obere Textbereich (z. B. „Das erwartet dich“) bekommt eine eigene Hintergrundfarbe, darunter folgt Text auf weißem Grund.
1. Zeile mit zwei Spalten anlegen
Der Browser liest Inhalte von oben nach unten. Das, was auf dem Desktop rechts angeordnet werden soll, liest der Browser eigentlich unten. Heißt: Links ist oben, rechts ist unten.
Öffne wieder die Zeilen-Einstellungen → Design → Abstand (Spacing).
Unten im Divi-Builder die Geräte-Symbole anklicken:
💻 Desktop – 📱 Tablet – 📞 Phone
→ Prüfen, ob die Abstände und Rundungen auf allen Geräten gut aussehen.
Falls der Text am Handy zu eng wirkt, unter Spacing einfach mehr Innenabstand geben.
Innenabstand richtig setzen (bei den Texten, nicht der Spalte)
In diesem Beispiel haben wir den Innenabstand in den Texten gesetzt. Theoretisch können wir diesen Abstand auch in der Spalte setzen, das wäre einfacher, weil wir dann nicht für _beide_ Texte den Innenabstand einstellen müssten. Das aber ist in diesem Beispiel nicht sinnvoll, weil dann nämlich auch der graue Kasten der Überschrift mit einrücken würde.
Tipp: Einfach mal ausprobieren, dann siehst du den Unterschied: Setze testweise die Innenabstände bei der rechten Spalte, dann siehst du, dass das unglücklich aussieht.
A) Oberes Textmodul (Überschrift mit grauem Hintergrund)
(Optional) Außenabstand unten (Margin): 20–25 px, damit Luft zum Fließtext ist.
Ausrichtung: links (Standard).
Ausrichtung: links.
Keine Innenabstände (Padding) in der rechten Spalte setzen, sonst rückt auch die Hintergrundfarbe der Überschrift mit ein.
Texte ansprechend gestalten – also:
Hintergrundfarbe, Schriftgröße, Schriftfarbe, Zeilenabstand, Abstände und Breite (z. B. bei langen Textblöcken).
Wenn du möchtest, dass ein Textblock auf farbigem Grund steht:
💡 Hinweis: Hintergrundfarbe nur bei kurzen Textblöcken oder Zitaten – bei langen Texten wirkt’s schnell zu massiv.
Tipp: In Divi kannst du Überschriften direkt im Textmodul per Dropdown auswählen (oben in der Editor-Leiste).
Design → Textfarbe: hell oder dunkel wählen.
Im Web brauchst du den Hexadezimalcode. Hast du bestimmt von gehört. Der Code hat immer das # vorweg. Der Code besteht aus einer Kombination aus insgesamt _6_ Zahlen und Buchstaben. Wichtig: Wenn der Code aus _6_ gleichen Zeichen besteht (6 Zahlen oder 6 Buchstaben), dann kann der Code gekürzt werden. Also statt #222222 einfach #222.
Innenabstand (Padding): fügt Platz innerhalb des Moduls hinzu (z. B. bei Hintergrundfarbe).
💡 Innenabstand, wenn du einen farbigen Hintergrund nutzt.
Außenabstand, wenn du Raum zwischen Textblöcken schaffen willst.
Listen einfach im Editor mit dem Listen-Symbol erstellen.
Du findest weiter unten einen separaten Block über Listengestaltung. Mit „Bordmitteln“ auf Divi und mit CSS. Eine Kurzerklärung, wie du CSS anwendest, findest du dort auch :-)
Im Text-Modul ein Zitat mit <blockquote> markieren
(oder im visuellen Editor einfach das Zitat-Symbol anklicken).
Unter Design → Zitattext kannst du:
Farbe, Größe und Schriftart separat einstellen.
Optional: unter Design → Rahmen links eine Linie oder Abrundung geben.
Wenn der Text auf großen Bildschirmen zu breit wirkt:
So bleibt die Leselänge angenehm – besonders wichtig für längere Fließtexte.
💡 Warum „em“ statt „px“?
1. Was „px“ bedeutet
px = Pixel
Das ist ein fester Wert.
Wenn du 20 px schreibst, bleibt es auf allen Geräten 20 Pixel hoch – egal ob auf einem riesigen Monitor oder einem kleinen Handybildschirm.
👉 Vorteil: immer exakt gleich groß
👉 Nachteil: nicht flexibel, Schrift oder Abstand passt sich nicht an, wenn jemand die Schriftgröße im Browser vergrößert (z. B. aus Barrierefreiheitsgründen).
em = relative Einheit
Sie bezieht sich auf die Schriftgröße des Elements, in dem sie steht. Wenn also der Text größer wird, wird auch der Zeilenabstand größer.
👉 Vorteil: reagiert automatisch auf Änderungen der Schriftgröße.
Das heißt:
Wenn Divi am Handy kleinere Schrift zeigt, bleibt der Zeilenabstand trotzdem in gutem Verhältnis.
Wenn jemand im Browser zoomt, dehnt sich der Text inklusive Abstand gleichmäßig mit.
Einheit | Schriftgröße | Zeilenhöhe | Ergebnis |
px | 18 px Schrift + 30 px Zeilenhöhe | feste 30 px, egal wo | |
em | 18 px Schrift + 1.6 em Zeilenhöhe | = 28.8 px (passt sich an) |
Wenn du die Schrift später auf 20 px vergrößerst:
px = starr, präzise, aber unflexibel
em = flexibel, reagiert auf Textgröße
Darum ist „em“ besser für Zeilenhöhe, Abstände und responsive Designs – vor allem in Divi, wo Schriftgrößen ja oft pro Gerät unterschiedlich eingestellt werden.
💡 Padding vs. Margin
Wenn du in Divi arbeitest, siehst du ständig diese beiden Begriffe:
Padding und Margin.
Beide erzeugen Abstand – aber nicht an derselben Stelle.
✏️ Padding = Innenabstand
Am Beispiel von einem Absatz (Text). Dasselbe gilt auch für Bilder:
Padding ist der Platz auf dem Blatt, zwischen dem Text und dem Rand des Blattes.
Der Text rückt also nach innen, damit er nicht direkt am Rand klebt.
Du nutzt Padding, wenn dein Modul z. B. eine Hintergrundfarbe hat.
→ Ohne Padding klebt der Text an der Kante.
oben/unten: 20–40 px
links/rechts: 30–50 px
Padding ist der weiße Rand auf dem Blatt Papier.
Margin ist der Platz außerhalb des Blattes – also zwischen zwei Blättern auf deiner Schreibtischunterlage.
Wenn du mehrere Seiten nebeneinander oder untereinander liegen hast, sorgt Margin dafür,
dass sie sich nicht überlappen oder berühren.
Du nutzt Margin, wenn Module oder Zeilen zu dicht beieinander stehen.
Margin ist der Abstand zwischen den Blättern auf dem Tisch.
Viele erhöhen wahllos beide Werte, um „irgendwie Luft“ zu schaffen. Das führt schnell zu ungleichmäßigen Abständen.
Erst prüfen, wo du den Abstand wirklich brauchst:
Situation | Was du nutzt | Warum |
Text klebt am Rand der Farbfläche | Padding | Platz auf dem Blatt |
Zwei Textmodule kleben zusammen | Margin | Platz zwischen Blättern |
Farbe oder Rahmen soll „atmen“ | Padding | Abstand zum Text im Modul |
Bereich soll weiter weg von anderem Bereich | Margin | Abstand außen herum |
Padding = Innenabstand auf dem „Blatt“
Margin = Außenabstand zwischen „Blättern“
Nicht beide gleichzeitig zu hoch setzen
Auf Handy: Werte kleiner einstellen
Immer Geräte-Vorschau prüfen (Desktop / Tablet / Phone)
Beispiel:
Im Text-Modul den Text markieren → Listen-Symbol klicken (Aufzählung oder nummeriert).
Design → Text
Textgröße (Desktop/Tablet/Phone getrennt):
– Fließtext in Listen: 18–20 px (Desktop), 16 px (Phone)
Zeilenhöhe: 1.8–2.0 em
→ sorgt für angenehmen Listenabstand (mehr Luft zwischen den Punkten).
Design → Abstand (Spacing) des Text-Moduls:
Innenabstand links (Padding-Left): 0–10 px (je nach Geschmack).
→ Wenn die Bullets „kleben“ oder zu weit innen stehen, hier feinjustieren.
Außenabstand (Margin) oben/unten am Modul: 16–32 px, damit vor/nach der Liste Luft ist.
Design → Textfarbe passend zum Hintergrund wählen.
Wenn die Liste auf farbigem Hintergrund steht:
– dem Text-Modul unter Inhalt → Hintergrund eine Farbe geben
– und unter Design → Spacing Padding (z. B. 20/30 px) setzen, damit nichts am Rand klebt.
Oberes Text-Modul (Überschrift) → Margin unten: 12–20 px
Listen-Modul → Margin oben: 12–20 px
→ so entsteht eine klare optische Gruppe.
Wenn das Icon am Handy zu groß/klein wirkt:
– im Text-Modul die Textgröße für Phone kleiner/größer stellen;
das Icon skaliert automatisch mit (weil font-size: 1em).
Durch die Klasse .schoene-liste wird nur diese Liste verändert.
Andere Listen (zB. dein Inhaltsverzeichnis-Plugin) bleiben unberührt.
Empfohlene Startwerte (ohne CSS):
Textgröße Liste: 18 px D / 16 px P
Zeilenhöhe: 1.9 em
Text-Modul Padding L/R (falls farbiger Block): 30–40 px
Abstand zwischen Punkten (ohne CSS): über Zeilenhöhe lösen
Mit CSS (.schoene-liste):
padding-left pro li: 1.8em
margin-bottom pro li: 0.5em
Icon-Farbe: currentColor (übernimmt Textfarbe – sauber fürs Design)
Bilder passen sich der Spaltenbreite an.
Solange du im Bild-Modul → Design → Größe nichts änderst (Standard: Breite 100%, Max-Breite 100%), skaliert Divi die Bilder automatisch größer/kleiner, wenn du später das Spalten-Layout änderst (z. B. 1/2–1/2 → 1/3–2/3).
Auf Handy werden die Spalten untereinander angezeigt (erst linke, dann rechte Spalte – sofern du nichts am Reihenfolge-Setting änderst).
Hinweis: Gutter Width in der Zeile steuert horizontalen Spaltenabstand, nicht den Abstand zwischen Modulen. Vertikale Abstände immer im Bild-Modul regeln.
Willst du links 3 Bilder, nimm am besten 3 Querformate mit ähnlicher Höhe.
Willst du Hochformate zeigen, bleib bei 2 Stück.
Saubere Optik: gleiche Breiten & ruhige Höhen
Nutze Bilder mit ähnlicher Seitenratio (z. B. alle 3:2 oder alle 4:3).
– vorher grob auf gleiche Breite zuschneiden (z. B. 1600 px),
– die Höhen ähnlich halten.
In WordPress kannst du unter Mediathek → Bild bearbeiten einfache Zuschnitte machen.
Feiner: rechte Spalte → Design → Abstand → Innenabstand links z. B. 30–40 px,
wenn dir der Abstand zwischen Bild- und Textspalte zu gering ist.
Achte darauf, dass dadurch deine graue Überschrift-Box nicht ungewollt mit einrückt – bei dir regelst du den Innenabstand ja im Text-Modul, nicht in der Spalte.
Feste Pixel-Breiten/Höhen im Bild-Modul vergeben → Bilder werden nicht mehr flexibel.
➜ Lass Breite und Max-Breite bei 100%, keine feste Höhe vergeben.
Abstände in der Spalte statt im Modul gesetzt → alles rückt ein (inkl. grauer Überschrift-Box).
➜ Vertikale Abstände pro Bild-Modul (Margin unten).
Zu viele sehr hohe Bilder → linke Spalte erschlägt die rechte.
➜ Anzahl reduzieren oder Bilder vorab kürzer zuschneiden.
1. Warum das aktuelle Layout problematisch ist
In der Desktop-Ansicht wirkt es schön ausgewogen:
links drei Bilder untereinander, rechts ein längerer Textblock.
Aber:
Auf dem Smartphone werden die Spalten untereinander gezeigt!
Das heißt: erst alle drei Bilder, dann der komplette Text.
→ Das ergibt einen langen Scrollblock, der optisch auseinanderfällt.
→ Leser:innen verlieren leicht den Bezug: „Welcher Text gehört zu welchem Bild?“
Eine Spalte mit mehreren Bildern funktioniert am Handy selten gut.
Statt 1 Zeile mit 2 Spalten mit mehreren Bilder links, Text rechts
→ nimm mehrere Zeilen, jede mit 1 Bild + 1 Textbereich.
Zeile | Linke Spalte | Rechte Spalte |
Zeile 1 | Bild 1 | kurzer Text (2–4 Sätze oder Liste) |
Zeile 2 | Bild 2 | kurzer Text |
Zeile 3 | Bild 3 | kurzer Text |
Auf Desktop bleibt’s harmonisch nebeneinander.
Auf Smartphone erscheinen abwechselnd Bild + Text, was viel natürlicher wirkt.
Du kannst für jede Zeile die Höhe, Abstände und Struktur individuell steuern.
Wenn du möchtest, kannst du bei jeder zweiten Zeile das Bild rechts, den Text links anordnen → bringt optische Abwechslung.
Layout | Vorteil | Nachteil | Empfehlung |
1 Zeile mit 3 Bildern (1 Spalte) | wirkt kompakt auf Desktop | auf Handy zu lang, Text weit unten | nur für Tests oder Deko |
3 Zeilen mit je 1 Bild + Text | klar, lesefreundlich, mobil perfekt | mehr Aufwand beim Einrichten | für reale Inhalte empfohlen |
Ein Bild, ein Text – pro Zeile ein Gedankenblock.
So bleibt’s auf allen Geräten lesbar und logisch verbunden.
Abwechslungsreiches Layout:
erste Zeile Bild links + Text rechts,
zweite Zeile Text links + Bild rechts usw.
So entsteht auf Desktop mehr Dynamik – und auf Handy bleibt die Reihenfolge trotzdem verständlich.
Konzept: Überlege, wie groß die Bilder sein sollen und wie das Layout aussehen soll. Wenn die Bilder auf dem Desktop mittig in einer Reihe verlaufen sollen (wie auf dem Bild oben), dann musst du für die Spalten ein 1/2 – 1/2 Format wählen. Also zwei gleich breite Spalten.
In dem Fall musst du folgendes beachten:
Bei der Zeile die Spaltenabstände (das Gatter) auf 1 setzen.
Damit dann der Text nicht am Bild klebt, musst du dem Text ein Innenabstand geben – für den rechten Text einen Abstand links und für den linken Text einen Abstand rechts.
💡 Tipp: Wenn du nur die Reihenfolge ändern willst, ohne Inhalte neu zu setzen,
musst du nicht neu bauen – einfach Spalten tauschen.
Wenn du mehrere solcher Paare planst (Bild/Text im Wechsel):
Erstelle eine fertige Zeile mit Bild links, Text rechts.
So sparst du viel Zeit – alle Abstände und Schriftgrößen bleiben automatisch gleich.
Divi zeigt standardmäßig auf dem Handy immer erst die linke Spalte, dann die rechte.
Wenn du also auf dem Desktop folgende Ansicht hast::
Zeile 1 = Bild links → erscheint auf Handy erst Bild, dann Text
Zeile 2 = Bild rechts → erscheint auf Handy erst Text, dann Bild
Zeile 3 = Bild links → erscheint auf dem Handy erst Bild, dann Text
Und so sieht die Reihenfolge auf dem Handy dann aus:
→ Bild
→ Text
→ Text
→ Bild
→ Bild
→ Text
Das ist völlig okay – es ergibt einen natürlichen Wechsel beim Scrollen.
Eine Zeile fertig gestalten – dann duplizieren, tauschen, ersetzen.
Spart Zeit und hält Design, Abstände und Stil konsistent.
Zwei Spalten, die nebeneinander wie Karten aussehen.
Jede Spalte enthält:
Neues Text-Modul direkt unter der Überschrift einfügen.
Im Textfeld Absätze oder Listen einbauen (z. B. Behandlungen, Empfehlung, Kosten). Hier kannst du natürlich auch eine Unterüberschrift einsetzen, im Editor unter > Inhalt, dort das Auswahlmenü bei „Absatz“ klicken und z.B. H3 auswählen, Entertaste für die Überschriftzeile nicht vergessen).
Damit beide Spalten gleich hoch werden – auch wenn Textlängen leicht unterschiedlich sind:
Wenn du später mehr Themen brauchst (z. B. 4 Angebote nebeneinander):
Gleiche Höhe für Spalten, wenn’s wie zwei Karten nebeneinander aussehen soll.
Bei „Bild neben Text“ ist das nicht nötig – bei „Text neben Text“ fast immer. Hinweis: Wenn das Bild genauso hoch sein soll wie der Text (auf kleineren Displays), musst du CSS-Regeln erstellen und der Zeile eine Klasse vergeben.
Beispiel:
Ein einfaches Kontaktformular mit Name, E-Mail, Nachricht – das sauber gestaltet ist, Mails korrekt versendet und auch auf dem Handy gut aussieht.
Ganz wichtig, damit die Nachrichten auch ankommen:
Unter Design kannst du alles visuell einstellen:
So wirkt das Formular kompakt und luftig.
Vor dem Livegang unbedingt prüfen:
Ein gutes Formular ist kurz, klar und getestet.
Lieber 3 Felder, die ausgefüllt werden – als 8, die niemand nutzt.
Dieses Kapitel ist für alle, die über die Standard-Einstellungen von Divi hinausgehen möchten. Du brauchst CSS nicht, um eine gute Website zu bauen. Aber wenn du bestimmte Dinge gestalten möchtest, die Divi allein nicht kann – zum Beispiel eigene Listenpunkte oder feine Abstimmungen im Layout – dann ist CSS dein nächster Schritt.
Was ist CSS? CSS ist die Gestaltungssprache des Webs. HTML legt fest, was auf einer Seite steht. CSS legt fest, wie es aussieht – Farbe, Schrift, Abstände, Form. Ohne CSS würde jede Website aussehen wie ein unformatiertes Textdokument.
Wann brauchst du es in Divi wirklich? In den meisten Fällen gar nicht – Divi deckt das Wichtigste über seine Einstellungen ab. CSS wird sinnvoll, wenn du zum Beispiel eigene Listenpunkte (Icons statt Standard-Bullets) gestalten möchtest, wenn du ein Element auf allen Seiten gleichzeitig verändern willst ohne jedes Modul einzeln anzufassen, oder wenn du sehr feine typografische Anpassungen brauchst, die Divi nicht anbietet.
Wie wendest du CSS in Divi an? Es gibt zwei Wege. Erstens über Divi → Theme-Optionen → Custom CSS: Hier trägst du CSS ein, das für die gesamte Website gilt. Zweitens direkt im Modul unter „Erweitert → CSS-ID & Klassen": Hier gibst du einem einzelnen Element einen Klassennamen, den du dann im Custom CSS ansteuerst.
Was heißt CSS? CSS steht für Cascading Style Sheets. Kaskadierend“ bedeutet, dass Stilregeln wie ein Wasserfall von oben nach unten verarbeitet werden, wobei spezifischere Regeln allgemeinere überschreiben (Priorisierung)
1. CSS ist eine Art Schminktisch für deine Website
Auf Websites gibt es zwei Ebenen:
Das HTML ist der Körper der Website – hier steht was gezeigt wird (z. B. Überschrift, Text, Bild, Liste).
Das CSS ist das Make-up oder Styling – hier steht, wie es aussieht (z. B. Farbe, Schrift, Abstände).
In HTML steht: „Hier ist eine Liste.“
In CSS steht: „Mach bitte vor jeder Listenzeile einen Stern und lass zwischen den Zeilen ein bisschen Luft.“
Hintergrund ist, dass ein Browser die Inhalte von Webseiten nach bestimmten Regeln und Anweisungen zeigt. Sind keine Anweisungen gemacht worden (Größe, Farbe, Abstand usw.), dann stellt der Browser alles pur und unformatiert dar, was natürlich langweilig aussieht. Damit alles schick aussieht, gibt es CSS.
CSS funktioniert immer nach dem gleichen Prinzip – wie ein kleiner Satz mit zwei Teilen:
WER soll sich ändern? { WAS soll sich ändern? }
Das ist der Name oder die Adresse des Elements, das du verändern willst.
Im Beispiel:
.schoene-liste
Das bedeutet:
„Alles, was in Divi die Klasse schoene-liste trägt, wird so gestaltet.“
So wie du in Word einer Überschrift eine Formatvorlage gibst („Überschrift 1“), gibst du deiner Website einem Element eine Klassenbezeichnung. Der Punkt ist das Erkennungszeichen dafür. Mit dem Punkt weiß der Browser: Alles, was den Punkt und die Beschreibung dahinter hat, wird entsprechend formatiert.
Der Name der Klasse ist egal, den darfst du frei wählen. Bedingung: Er muss den websicheren Regeln folgen. Also: ohne Leerzeichen, ohne Umlaute, ohne Sonderzeichen.
Zwischen den geschweiften Klammern { } stehen die Regeln, also das Styling.
.schoene-liste {
list-style: none;
padding-left: 1.8em;
margin-bottom: 0.5em;
}
Das liest sich wie:
Jede Regel (wie „list-style: none“) wird von der nächsten Regel durch Semikolon getrennt. Das ist zwingend notwendig, sonst wird die Anweisung nicht ausgeführt.
In Divi kann man einem Modul sagen:
„Du gehörst jetzt zur Gruppe -schoene-liste-.“
Erweitert → CSS-ID & Klassen → CSS-Klasse: schöne-liste
Damit weiß Divi: „Aha, dieser Text gehört zur Regel, die oben im Code steht.“
Alles, was diese Klasse hat, bekommt dann automatisch das Styling aus dem CSS.
Übrigens:
Diese Klassen-Spezifizierung kannst du für jedes Modul anwenden. Also nicht nur „Text“, sondern auch „Informationstext“, „Testimonial“, „Person“ etc. Auch für das Bild-Modul kannst du wiederkehrende Regeln anwenden.
Mit CSS kannst du einmal sagen, wie etwas aussehen soll, und alle Elemente mit diesem Namen übernehmen es.
Beispiel:
Wenn du 5 Listen auf der Website hast und allen die Klasse schoene-liste gibst, ändert eine kleine Anpassung im CSS alle 5 Listen gleichzeitig. Andere Listen, die du mit der Klasse nicht auszeichnest, werden normal, also ungestylt, dargestellt. Das ist wichtig, weil die Menüs auch aus Listen bestehen. Und weil zu viele gestylte Listen schnell übertrieben wirken.
Und: Das spart unglaublich viel Klickarbeit.
CSS-Begriff | Bedeutung in Alltagssprache |
{ } | „Hier kommen die Anweisungen rein.“ |
color: | Farbe des Textes |
background: | Hintergrundfarbe |
padding: | Innenabstand (Platz im Element) |
margin: | Außenabstand (Platz außerhalb) |
font-size: | Schriftgröße |
line-height: | Zeilenabstand (Zeilenhöhe) |
border-radius: | abgerundete Ecken |
list-style: | Art der Aufzählung (Punkte, Zahlen usw.) |
Das ist nur ein winziger Ausschnitt, es gibt Hunderte CSS-Regeln.
Jeder Begriff erhält hinter dem Doppelpunkt den Wert. Damit der Browser weiß, was er (als Beispiel), mit der Schrift oder dem Bild machen soll.
Werte sind dann also (als Beispiele): Pixelwert, ein Hex-Code, none (womit die vorherige Einstellung überschrieben wird) und viele andere Werte.
Eigene Icons statt der Standard-Bullets – nur in dieser einen Liste, ohne andere Listen (Inhaltsverzeichnis, Menü, Footer etc.) zu verändern.
A) Einmalige Vorbereitung (CSS einfügen)
Divi → Theme-Optionen → Custom CSS (oder ins Child-Theme style.css)
Kompletten Code dort einfügen:
/* Schöne Liste – nur für Listen mit Klasse .schoene-liste */ .schoene-liste { list-style: none; /* native Bullets aus */ margin: 0; padding: 0; /* Grundreset */ } .schoene-liste li { position: relative; padding-left: 1.8em; /* Platz für das Icon links */ margin-bottom: 0.5em; /* Abstand zwischen Punkten */ line-height: 1.8; /* extra Leseluft (ergänzt Divi-Einstellung) */ } .schoene-liste li::before { content: "\e033"; /* ETmodules Stern (Beispiel) */ font-family: 'ETmodules'; position: absolute; left: 0; top: 0.15em; /* vertikal minimal justieren */ font-size: 1em; /* Icon-Größe = Textgröße */ color: currentColor; /* Icon übernimmt Textfarbe */ /* Optional: eigene Farbe, z. B. Mustard: color: #d6a300 */ } |
CSS ist der Pinsel in deiner Hand.
HTML legt das Motiv an – die Konturen und Flächen.
Aber erst mit CSS wählst du, ob du mit feinen Strichen arbeitest oder kräftigen Akzenten.
Es ist das Werkzeug, mit dem du deiner Website Stimmung gibst.
Und jetzt geht’s los: ;-)
ETmodules ist Divis eigenes Icon-Font; \e033 ist ein Stern. Du kannst jedes andere ET-Icon nehmen (Chevrons, Häkchen etc.).
Was ist ein Icon-Font? Fonts müsse nicht nur aus Zahlen, Buchstaben und Sonderzeichen bestehen, sie können auch aus Grafiken bestehen. Diese Grafiken erhalten ein Unicode-Zeichen (jedes Zeichen in einem Font hat diesen Unicode). Unter findest du weitere Codes für Icons. Der Vorteil gegenüber Pixelbildern: Du kannst Icons beliebig skalieren, ohne dass sie ein Qualitätsverlust haben. Bilder (img etc.) würden schnell pixelig werden. Und Icons verbrauchen wenig Ressourcen.
Im CSS-Code findest du Kommentare. Die beginnen mit /* und enden mit */ (jeweils Asterix (*) + Slash (/). Alles, was innerhalb dieser beiden Zeichen-Kombinationen steht, ist ein Kommentar und wird vom Browser ignoriert, also nicht als Anweisung mitgelesen. Tipp: Kommentiere alles genau aus, damit du immer weißt, warum du den Code eingesetzt hast. Erleichtert ungemein – da sprech ich aus Erfahrung ;-)
