Swish-Webdesign-Blurb-Puls-Effekt

Divi Informationstext Modul Puls-Effekt

6. November 2018

Nach kurzer Abwesenheit wird es wieder Zeit für ein Divi* CSS Tutorial. In diesem Beitrag werde ich euch zeigen, wie ihr das Divi „Blurb Module“ oder auch bekannt als Informationstext Modul, aufpimpen könnt.
Der Puls-Effekt ist eine relativ simple aber eindrucksvolle Möglichkeit, um den Besucher auf ein bestimmtes Element aufmerksam zu machen. So haben wir den Puls Effekt auf unserer Webseite Swish Webdesign umgesetzt:

 

Swish Webdesign Agentur aus Osnabrueck

 

Sieht ganz cool aus, oder?

Jetzt wollen wir uns mal ansehen wie das ganze funktioniert.

Divi Blurb Module Puls Effekt

1. Als erstes erstellen wir einen neuen Beitrag oder eine neue Seite, auf der wir den Effekt einsetzen wollen.

2. Jetzt fügen wir das Informationstext Modul hinzu. Ihr könnt ein Modul verwenden oder mehrere nebeneinander, wie in unserem Beispiel – das ist euch überlassen.

 

Divi-Informationstext-Modul

 

3. In den Einstellungen des Moduls laden wir unser Icon als Bilddatei hoch. Unser Bild ist 100x100px groß.

 

Divi-Blurb-Modul-Bild-hochladen

 

4. Anschließend vergeben wir unter dem Reiter „Erweitert“ die CSS-Klasse „wplo-blurb„.

 

Wplo-Blurb-CSS-Klasse

 

Pulse-Effekt CSS

Jetzt fehlt nur noch der CSS-Code. Wenn ihr euch noch unsicher mit dem Einbinden von CSS Code seid, dann schaut euch das Video-Tutorial an. Dort zeige ich Schritt für Schritt, wie man den Puls-Effekt einsetzt und individuelle Anpassungen vornimmt.
Folgender CSS-Code muss in das Feld benutzerdefiniertes CSS oder euer Divi Child Theme eingefügt werden:

 

 

.wplo-blurb .et_pb_main_blurb_image img {
animation: pulse 2s infinite;
border-radius: 50%;
}
@-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(85,73,187, 0.5);
}
70% {
-webkit-box-shadow: 0 0 0 12px rgba(85,73,187, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(85,73,187, 0);
}
}
@keyframes pulse {
0% {
-moz-box-shadow: 0 0 0 0 rgba(85,73,187, 0.5);
box-shadow: 0 0 0 0 rgba(85,73,187, 0.4);
}
70% {
-moz-box-shadow: 0 0 0 12px rgba(85,73,187, 0);
box-shadow: 0 0 0 12px rgba(85,73,187, 0);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(85,73,187, 0);
box-shadow: 0 0 0 0 rgba(85,73,187, 0);
}
}
Noch Fragen?

Verbesserungsvorschläge oder Anregungen für weitere Artikel? Dann nutz‘ die Kommentarfunktion unter diesem Beitrag!

Wir können das Tutorial auch für dich durchführen. Stell hierfür eine Anfrage

SIE KÖNNEN SICH BEI UNS BEDANKEN!

Sofern Ihnen der Artikel geholfen hat, können Sie sich mit wenig Aufwand revanchieren!

 

Bitte hinterlassen Sie uns eine positive Bewertung.

 

Falls Sie Fehler entdecken oder ein Artikel unvollständig ist, freuen wir uns über einen Kommentar.

Bewertung erstellen

Kommentare

Sag uns deine Meinung! Jetzt antworten

Deine E-Mail-Adresse wird nicht veröffentlicht.