Damit Informationen und Texte auf einer Website nicht zu gedrängt wirken eigenen sich Teiler als Designelemente. Einerseits um Bereiche abzugrenzen und andererseits um den getrennten Bereichen „Abstand“ zu verschaffen. So wirkt die Seite leichter und weniger gedrängt. Im Divi Builder gibt es dafür das Teiler Modul. Versieht man einen Teiler mit einem zentriertem Bild, einem Icon oder einer Überschrift, ist die Wirkung einerseits gefälliger und andererseits gibt dies dem Leser eine bessere Orientierung in Bezug auf den folgenden Inhalt.

Leider gibt es hierfür keine direkte Einstellungen im Teiler Modul, aber mit Hilfe von ein wenig Handarbeit und CSS, sind solche Hingucker schnell erstellt. Auch wenn wir dafür zusätzliche Modul verwenden müssen.

Edit: Offenbar hat eines der letzten Themeupdates dafür gesorgt, dass der bisher verwendete CSS-Code nicht mehr funktioniert. Wir werden uns baldmöglichst des Problems annehmen.

Die Basis: ein sichtbarer Teiler

Als erstes benötigen wir stets einen sichtbaren Teiler (ggf. vorher noch ein Child Theme anlegen, falls noch nicht geschehen). Dazu erstellst Du im Divi Builder ein Teiler Modul und setzt folgende Einstellungen:

1. Im Bereich ‚Inhalt‘ wird die ‚Sichtbarkeit‘ auf ‚Unterteiler anzeigen gesetzt.
2. Im Bereich ‚Design‘ wird die Farbe des Teilers ausgewählt. Meist ist ein Grauton oder die generelle Schriftfarbe auf der Seite eine gute Wahl, damit der Teiler nicht zu sehr hervorsticht (außer dies ist gerade gewünscht).
3. Als Position der Teilerlinie wird ‚Oben‘ ausgewählt und anschließend die Trennliniendicke. Für feine Trennlinien ist die Einstellung 1 eine gute Wahl. Falls die Linie stärker dargestellt werden soll, musst du mit größeren Werten experimentieren.

Anschließend sollte der Teiler ungefähr so aussehen:

Teiler mit zentriertem Icon

Um ein Icon mittig in einem Teiler zu platzieren, benötigst Du ein Informationstext Modul (Blurp Modul), das oberhalb des Teiler Moduls platziert wird. Folgende Einstellungen sind wichtig:

1. Unter ‚Inhalt‘ die Option ‚Icon benutzen‘ aktiviert. Dann wählst du das gewünschte Icon aus. Dazu wählst du die ‚Icon-Farbe‘ und aktivierst die Option ‚Kreis-Icon‚.
2. Als ‚Kreisfarbe‘ sollte in der Regel ‚#FFFFFF‚ (weiß) passen oder die jeweilige Hintergrundfarbe deiner Website.
3. Dazu aktivierst du die Option ‚Kreisrand anzeigen‘ und als ‚Farbe des Kreisrands‘ wieder ‚#FFFFFF‚ (weiß) oder die jeweilige Hintergrundfarbe deiner Website.
4. Unter ‚Bild-/Icon-Platzierung‘ wählst du ‚Oben‘
5. Im Register ‚Fortgeschritten‘ setzt du im Feld ‚Hauptelement‘ folgenden CSS-Code ein und setzt die ‚Bild-/Icon-Animation‘ auf ‚Keine Animation‘.

position: relative;
top: 75px;
z-index: 2;

Damit das Icon möglichst mittig über der Teilerlinie geschoben wird, musst du ggf. ein wenig im CSS-Code mit dem Wert hinter top experimentieren.

So sieht dann das Ergebnis beispielsweise aus:

Teiler mit zentriertem Text

Um einen Text oder eine Überschrift mittig in einem Teiler zu platzieren, benötigst Du ein Text Modul, das oberhalb des Teiler Moduls platziert wird. Folgende Einstellungen sind wichtig:

1. Du gibst unter ‚Inhalt‘ den gewünschten Text ein, formatierst diesen beispielsweise als Überschrift und passt das Schriftformat nach deinen Wünschen weiter an. Beispielsweise kannst du die Schriftgröße, -farbe, -art anpassen. Wichtig: einige dieser Einstellungen findest du in den Einstellungen unter ‚Entwurf‘ getrennt nach Fließtext und Überschriftstext.
2. Im Register ‚Fortgeschritten‘ setzt du im Feld ‚Hauptelement‘ folgenden CSS-Code ein.

position: relative;
top: 40px; /* Schiebt den Text über die Trennlinie */
background: #FFFFFF; /* Überdeckt die Trennlinie mit der Farbe Weiß */
width: 165px; /* sorgt dafür, dass der Hintergrund etwas weiter als der Text ist */
z-index: 2; /* Lagert den Text über die Trennlinie */

Bei dieser Variante sind auch zusätzliche Einstellungen im zugehörigen Teiler Modul nötig. Hier wird im Reiter ‚Fortgeschritten‘ unten genannter CSS-Code in das Feld ‚Hauptelement‘ eingetragen:

display: block !important;
width: 80%;
margin: 0 auto; /* centers the divider */z-index: 2;

Damit das Icon möglichst mittig über der Teilerlinie geschoben wird, musst du ggf. ein wenig im CSS-Code des Text Modules mit dem Wert hinter top experimentieren. Falls die Hintergrundfarbe deiner Seite nicht Weiß ist, musst du den Wert hinter background anpassen. Und wenn der Text breiter oder schmaler ist, experimentierst du am besten ein wenig mit dem Wert hinter width.

Die Breite des Teilers wird über den Wert hinter width im CSS-Code für den Teiler gesteuert. In diesem Beispiel habe ich einen etwas kürzere Teilerlinie gewählt. Dieser Wert lässt sich auch bei den anderen Beispielen als CSS-Code verwenden.

So sieht dann das Ergebnis beispielsweise aus:

Teiler mit zentriertem Bild

Um ein Bild mittig in einem Teiler zu platzieren, benötigst Du ein Bild Modul (Image Modul), das oberhalb des Teiler Moduls platziert wird. Folgende Einstellungen sind wichtig:

1. In den Einstellung laden wir zunächst das gewünschte Bild hoch. Dabei sollte darauf geachtet werden, dass das Bild eine eher kleines Format (um 50-200 Pixel) hat, damit es zum Zentrieren im Teiler geeignet ist.
2. Als weitere Einstellungen wird unter ‚Inhalt‘ die Option ‚Raum unter Bild entfernen‘ aktiviert. Und als Bildausrichtung ‚zentriert‘ ausgewählt.
3. Unter ‚Fortgeschritten‘ setzten wir im Feld ‚Hauptelement‘ den unten gezeigten CSS-Code ein und wählen die Option ‚Keine Animation‘ für dieses Bild aus.

position: relative;
top: 40px; /* Schiebt das Bild über die Trennlinie */
z-index: 2; /* Positioniert das Bild oberhalb der Trennlinienanzeige*/

Damit das Bild möglichst mittig über der Teilerlinie geschoben wird, musst du ggf. ein wenig im CSS-Code mit dem Wert hinter top experimentieren.

So sieht dann das Ergebnis beispielsweise aus:

Wir wünschen Dir viel Spaß mit diesen Teilerlinien.

PS: Die Idee für diese Lösungen haben wir auf der Website Divilicious.com gefunden