How to create an eyecatching animated Social Media Icons bar with the Divi Theme. In this video we will be showing how to create this feature using the inbuilt options included in the Divi theme and a bit of CSS Code ( Code Below ).
So follow along with this video to see how to create this great effect, on your Divi site.
Today we will be demonstrating how to build this feature using a Divi Social Media Follow Module and the Additional CSS Panel. There are no extra plugins involved in this build today.

In this video we will cover:

Adding A Row,
Adding A Divi Social Media Follow Module,
Adding A CSS Class Name,
Duplicating The Module,
Adjusting The Z Index,
Using Fixed Positioning,
Using The Additional CSS Panel,
Writing The Animation Code,
Publishing The Code

We are going to be using the Divi theme to create some great effects in this series of videos. The Divi theme has some great modules and effects. With a little work you can achieve some great eye-catching effects to enhance the look and user experience of your website.

Animated icons can be an effective way to enhance the user experience on a website. By adding movement and interactivity to static graphics, they can grab users' attention and make the website feel more engaging and dynamic. Animated icons can also help to convey information or functionality more clearly, by showing actions such as loading, searching, or navigating. Additionally, they can add personality and character to a website's design, helping to establish a brand identity and making the website more memorable to users. Overall, animated icons can contribute to a more enjoyable, informative, and effective website experience for users.

So, follow along with the video and see how to create this, using the fantastic Divi Theme. For more information on the Divi theme, check out our Divi playlists below.

Get Your Icon Here: [ Ссылка ]

Try out the Divi theme: [ Ссылка ]

Divi Supreme Modules Pro Plugin 10% Off: [ Ссылка ]

Divi Supreme Modules Light Plugin: [ Ссылка ]

Divi Supreme Modules Playlist: [ Ссылка ]?
v=ZAO2MH0dQtk&list=PLqabIl8dx2wo8rcs-fkk5tnBDyHthjiLw

Playlist page for more videos on this: [ Ссылка ]

Full Ecommerce Site Build Playlist: [ Ссылка ]?
v=rNhjGUsnC3E&list=PLqabIl8dx2wq6ySkW_gPjiPrufojD4la9

Contact Form With File Upload Video: [ Ссылка ]

Divi 4 Theme Create An Ecommerce Store In One Hour: [ Ссылка ]

My Blog : [ Ссылка ]

Check out our playlist page for more videos on this: [ Ссылка ]

Sub: [ Ссылка ]

---------- CSS CODE USED TODAY ----------

/* Floating SM */

.floatsm {
animation: smsc 5s infinite;
}

@keyframes smsc {
0% {transform:scale(1)}
50% {transform:scale(1.2)}
100% {transform:scale(1)}
}

---------- CHAPTERS ----------

00:00 Introduction
01:15 Adding A Row,
01:37 Adding A Divi Social Media Follow Module,
03:00 Adding A CSS Class Name,
03:26 Duplicating The Module,
04:52 Adjusting The Z Index,
05:53 Using Fixed Positioning,
07:24 Using The Additional CSS Panel,
08:04 Writing The Animation Code,
11:10 Publishing The Code,
11:30 Result.

---------- RECOMMENDED PLAYLISTS ----------

Elementor Ecommerce Store: [ Ссылка ]

Divi Snippets: [ Ссылка ]

Divi 4 Ecommerce Store: [ Ссылка ]

Bootstrap 4 Basics: [ Ссылка ]

Elementor: [ Ссылка ]

WordPress Tips: [ Ссылка ]


Subscribe: [ Ссылка ]

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.

#YouTubeTips #WebDesignTips #FreeWebDesignTutorials #BuildYourOwnWebsite

свернуть