Ihr habt sicher schon öfters ein Blurb Modul in DIVI verwendet – damit kann man sehr schön ein Icon mit einem Text verknüpfen. In diesem Module kann man dann perfekt wichtige Informationen für seine Webseitenbesucher einbauen. So sieht ein normales Blurb Modul aus.

Man hat nun die Möglichkeit das Blurb Icon mit einer Farbe zu versehen – aber wenn man einen coolen Farbverlauf haben möchte, dann geht das nicht so einfach. Dafür muss man schon ein wenig in die CSS Trickkiste greifen.

Wenn ihr den Code den ich unten eingebaut habe in euer DIVI einbaut, ja dann kann das Ganze so aussehen. Ihr seht wir haben nun einen Farbverlauf als Icon Farbe und die Farbe wechselt senkrecht.

Wenn man dann die ≪90deg≫ in zum Beispiel ≪0deg≫, ja dann sieht der Farbverlauf so aus – also waagrecht.

CSS

1
2
3
4
5

.et_pb_blurb .et-pb-icon {
background-image:linear-gradient(90deg, #dd0003, #6ac1e5);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

Wenn man dann mehrere Blurb Module hat, und man möchte jedes Icon mit einem anderen Farbverlauf haben, ja das kann man natürlich auch machen. Dann muss man halt im Quellcode nachschauen, welche ID dieses Blurb-Modul dann hat und es entsprechend zuweisen. Wie hier zb:
 

1
2
3
4
5

.et_pb_blurb_1 .et-pb-icon {
background-image:linear-gradient(90deg, #dd0003, #6ac1e5);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}