Vielleicht kennst du diesen Effekt aus unserer Website, bei dem ein bestimmter Titel oder Text eine Hintergrundfarbe hat:
In diesem Artikel sehen wir uns an, wie du diesen Effekt mit dem Divi Builder bauen kannst. Es gibt hierbei 2 Methoden
Methode #1 "Ohne Code" (Ab Start des Videos)
Mit dieser Methode benötigst du keine Programmierkenntnisse (HTML & CSS). Du kannst den Effekt also mit den Einstellungen, die dir bereits der Divi Builder zur Verfügung stellt, einfach nachbauen. Der einzige Nachteil ist, der Effekt ist nicht so flexibel. Das wirst du im Video dann sehen
Methode #2 "Mit Code" (Ab Minute 14:15 bis Ende)
Diese Methode ist etwas komplexer und erfordert Kenntnisse mit HTML &CSS, wobei wir alles nötige im Video dann ansehen werden. Diese Methode ist aber vom Design her am flexibelsten. Mehr dazu im Video, direkt ab Minute 14:15, weil dort siehst du dann sofort der Unterscheid zur ersten Methode
Code für Methode #2
Hier findest du die Code-Vorlage für diese Methode. Diese kannst du 1zu1 in die Theme Optionen von Divi einfügen und gemäss Video oben anpassen:
/*.textbg Klasse*/
@media screen and (min-width: 981px) {
.textbg {
background-color: #000;
padding: 0 35px;
line-height: 1.8em;
}
}
@media screen and (max-width: 981px) {
.textbg {
background-color: #000;
padding: 0 17px;
line-height: 1.6em;
}
}
@media screen and (max-width: 600px) {
.textbg {
background-color: #000;
padding: 0 10px;
line-height: 1.6em;
}
}
Und hier findest du den nötigen Befehl für die Titel und Texte:
<span class="textbg">Hier kommt dein Text</span>