Swish-Webdesign-Blurb-Puls-Effekt

Divi Information Text Module Pulse Effect

12. February 2020

After a short absence it is time again for a Divi* CSS Tutorial. In this post I will show you how to pimp the Divi “Blurb Module”, also known as Information Text Module.
The pulse effect is a relatively simple but impressive way to draw the visitor’s attention to a certain element. So we implemented the pulse effect on our website Swish Webdesign:

 

Swish Webdesign Agency from Osnabrueck

 

Looks pretty cool, right?

Now let’s take a look and see how it works.

1. First we create a new post or a new page where we want to use the effect.

2. now we add the information text module . You can use one module or several next to each other, like in our example – it’s up to you.

 

Divi information text module

 

3. in the module settings we upload our icon as an image file. Our image is 100x100px in size.

 

Divi-Blurb-Module-Upload Image

 

4. we then assign the CSS class “wplo-blurb” under the “Advanced” tab.

 

Wplo-Blurb-CSS-Class

 

pulse effect CSS

Now only the CSS code is missing. If you’re still unsure about including CSS code, have a look at the Video-Tutorial There I show step by step how to use the pulse effect and how to make individual adjustments.
The following CSS code must be inserted into the field Custom CSS or your Divi Child Theme:

 

 

.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);
}
}

Questions?
Suggestions for improvement or suggestions for further articles? Then use the comment function below this post!

We can also do the tutorial for you. Make a request for this

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

Comments

Tell us what you think! Reply now

Your email address will not be published. Required fields are marked *