Titeldarstellungen im Divi-Theme lassen sich hübsch gestalten. Heute zeigen wir Ihnen zwei Beispiele, wie Sie die Titelzeile mit einem Rahmen «auffüllen» können. Das ist ein echter Eyecatcher. Und ganz einfach zu machen.
Gleich zwei einfache Beispiele mit augenfälligem Effekt möchten wir Ihnen präsentieren:
1. Titel zentrieren und links und rechts mit einem Balken versehen
Folgende Darstellung wollen wir erreichen:
Hier ein Beispiel
Dafür vergeben Sie einem Textmodul die CSS-Klasse «heading-line-both». Die Klasse fügen Sie im Tab «Erweitert» des Textmoduls ein – unter «CSS-ID & Klassen» und dort ins Textfeld «CSS-Klassen».
Weiter kopieren Sie den folgenden Code in das CSS-Stylesheet Ihrer Website – im Backend unter Design/Customizer/Zusätzliches CSS:
/* Titel und Deko-Linie zentrieren */
.heading-line-both h5 {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
text-align: center;
}
/* Deko-Linie hinzufügen und definieren */
.heading-line-both h5:before,
.heading-line-both h5:after {
content: '';
border-top: 5px solid;
margin: 0 20px 0 0;
flex: 1 0 20px;
color: #59B14B;
}
/* Abstand zwischen Titel und Deko-Linie festlegen */
.heading-line-both h5:after {
margin: 0 0 0 20px;
}Ein paar Hinweise:
- Der CSS-Code in unserem Beispiel spricht nur Titel in der Grösse <h5> an. Wenn Sie andere Titel definieren wollen, müssen Sie den Code auf den Zeilen 2, 10, 11 und 19 anpassen.
- Auf Zeile 13 wird festgelegt, wie breit der Balken ausfällt – in unserem Beispiel 5 Pixel.
- Auf Zeile 16 können Sie die Farbe des Balkens definieren – wir verwenden hier grün.
- Die Darstellung funktioniert am besten mit kurzen Titeln; bei mehrzeiligen Überschriften kann der Effekt unschön ausfallen.
- Beachten Sie auch, ob die Darstellung auch auf Mobilgeräten so aussieht, wie Sie es sich vorstellen.
Sie haben aber auch die Möglichkeit, den Titel normal links stehen zu lassen und die Zeile mit einem Balken «aufzufüllen»:
2. Titel mit einem zeilefüllenden Balken dekorieren
Folgende Darstellung möchten wir in diesem zweiten Beispiel erreichen:
Hier ein Beispiel
Für diese Art der Darstellung vergeben Sie einem Text-Modul des Divi-Themes die CSS-Klasse «heading-line-right» – im Tab «Erweitert», unter «CSS-ID und Klassen» und im Textfeld «CSS-Klasse».
Ferner benötigen Sie die folgenden paar Zeilen CSS, welche Sie in das CSS-Stylesheet Ihrer Website kopieren: unter Design/Customizer/Zusätzliches CSS:
/* Titel und Deko-Linie ausrichten */
.heading-line-right h5 {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
text-align: center;
}
/* Deko-Linie hinzufügen und definieren */
.heading-line-right h5:after {
content: '';
border-top: 5px solid;
margin: 0 20px 0 0;
flex: 1 0 20px;
color: #59B14B;
}
/* Abstand zwischen Titel und Deko-Linie festlegen */
.heading-line-right h5:after {
margin: 0 0 0 20px;
}Auch hier einige Hinweise:
- Der CSS-Code in unserem Beispiel spricht nur Titel in der Grösse <h5> an. Wenn Sie andere Titel definieren wollen, müssen Sie den Code auf den Zeilen 2, 10 und 18 anpassen.
- Auf Zeile 12 wird festgelegt, wie breit der Balken ausfällt – in unserem Beispiel 5 Pixel.
- Auf Zeile 15 können Sie die Farbe des Balkens definieren – wir verwenden hier grün.
- Die Darstellung funktioniert am besten mit kurzen Titeln; bei mehrzeiligen Überschriften kann der Effekt unschön ausfallen.
- Beachten Sie auch, ob die Darstellung auch auf Mobilgeräten so aussieht, wie Sie es sich vorstellen.
Werbung
Werbung
