Divi Pro Tips Stunning Blurb Animations You Can’t Miss!

In this video, we'll show you how to animate your blurb images or icons for maximum impact using the Divi Theme’s powerful blurb module. With just a few lines of simple CSS code, you can bring life to your website's blurbs, making them more engaging and visually appealing. Whether you're looking to enhance user interaction or make your content stand out, adding animations to your Divi blurb images and icons is a game-changer. This tutorial is perfect for both beginners and experienced Divi users looking to add some flair to their website.

We’ll walk you through every step of the process, ensuring that your Divi theme blurb animations are responsive and effective across all devices. By the end of this tutorial, you'll have mastered how to use CSS code within the Divi blurb module to create animations that captivate visitors and encourage clicks. Don’t miss out on this essential Divi Theme tip—your site's design will never be the same!

THEMES AND PLUGINS USED IN THESE VIDEOS:

Try out the Divi theme: https://bit.ly/TryDiviNow

Divi Supreme Modules Pro Plugin 10% Off: https://divisupreme.com/system22/?ref=6

Divi Supreme Modules Light Plugin: https://bit.ly/SupremeFreeVersion

AI Images generated by Nightcafe:https://creator.nightcafe.studio?fpr=jamie25

Use promo code SYSTEM22 for 15% discount


MY YOUTUBE PLAYLISTS:

Divi For Beginners Playlist:    • Divi For Beginners  

Divi Supreme Modules Playlist:    / watch  

v=ZAO2MH0dQtk&list=PLqabIl8dx2wo8rcs-fkk5tnBDyHthjiLw

Playlist page for more videos on this:    / system22net  

Full Ecommerce Site Build Playlist:    / watch  

v=rNhjGUsnC3E&list=PLqabIl8dx2wq6ySkW_gPjiPrufojD4la9

Contact Form With File Upload Video:    • Divi Theme Contact Form With File Upl...  

Divi 4 Theme Add A responsive Search Bar to your header

Check out our playlist page for more videos on this:    / system22net  

Don't forget to drop any questions below, I will do my best to answer or make a video demo for you!

Sub:    / @system22  

MY BLOG

https://web-design-and-tech-tips.com

CODE USED TODAY

selector .et_pb_main_blurb_image {
animation: bspin 6s infinite linear
}

@keyframes bspin {
0% {transform: rotateY(0)}
50% {transform: rotateY(180deg)}
100% {transform: rotateY(0)}
}

selector .et_pb_main_blurb_image:hover {
animation:none
}

CHAPTERS

00:00 Introduction
00:47 Add A Blurb Module
02:40 Get The Icon Class Name
03:08 Add The Animation Code
04:27 Add The Keyframe Animation
06:33 Stop The Animation On Hover
08:22 Duplicate The Effect
09:36 Results

RECOMMENDED PLAYLISTS

Elementor Ecommerce Store:    • Elementor Ecommerce Store Woocommerce...  

Divi Snippets:    • Divi 4 Snippets Divi Theme Overview 👍  

Divi 4 Ecommerce Store:    • Divi 4 Ecommerce Store Theme Setup An...  

Bootstrap 4 Basics:    • Bootstrap 4 Basics Index Page and Ext...  

Elementor:    • Elementor Wordpress Builder Install A...  

WordPress Tips:    • Wordpress 2020 Theme Customize The Pa...  


Subscribe:    / @system22  

Disclaimer: Some of these links are affiliate links where I'll earn a small commission if you make a purchase at no additional cost to you.

#DiviTheme #WebDesignTips #BlurbAnimations #DiviBlurbModule #CSSAnimation #DiviTutorials #WebsiteDesign