Scrolling animation and icons are combined to improve website design in a unique way. In this tutorial, we will learn how to add scrolling animation icons to some backgrounds in divi. With hundreds of optional icons and a large number of built-in animation effects available on divi, we will show you how to create a large number of background animation to take our design to a whole new level. Let’s go! The following are the designs to build in this guide. And here are some bonus designs that show the possibility of several adjustments.
To the design of this tutorial for free, you must first use the following buttons to . To access the , you must subscribe to the divi day email list using the form below. New subscribers will receive more divi offers and free divi layout packs every Monday! If you are already in the list, just enter your email address below and click . You will not \
Successfully subscribed. Check your email address to confirm your subscription and access the free weekly divi layout package! To import a layout into the divi library, go to the divi library. Click the import button. Select the import tab from the portability pop-up menu, and then select file from your computer. Then click the import button. When finished, you can use the layout in divi builder. Enter the tutorial? To start the required you must do the following: If not already installed, install and activate the divi theme. Create a new page in WordPress and then edit the page at the front end (visual builder) using divi builder. Select the build from scratch option. Then you can start designing in divi.
The core concept of how divi adds scrolling animation icons in the layout background briefly describes the process of adding scrolling animation icons in the layout background, including four key parts. 1: Before creating a full screen canvas, you must customize parts, rows, and columns, and create a full screen canvas that spans the total width and height of the browser, respectively. This will provide us with an undisturbed creative space that needs to be filled with icons. Male 2: add and position icons. Now you can strategically place icons in the full screen canvas (or column) to build a rolling animation icon background design.
Male 3: after adding scrolling animation icon is placed on the icon, you can add scrolling conversion effect (or animation) for each icon. Male 4: at the front of the plate, after the background design is added to the content and the scrolling animation icon is completed, the required content can be added to the showcase at the front. Now that we have the idea of the task to be performed, let’s officially start. Part 1: create a full screen canvas (setup section, row and column), starting with adding a column to the general section. Turn on the setting of malepart and add the background color: Background color: #000 male
On the design tab, add a minimum height of 100vh to ensure the total height of this section across viewports. Minimum height: 100vh (desktop), 600px (tablet and mobile phone) maleline setting, turn on the line setting, and turn on the section \/ viewport
Update the sizing to match the overall width and height. Use custom giant width: giant width: 1 width: 100% maximum width: 100% height: 100% down jacket: top 0px, bottom 0px maleadvanced label to specify the absolute position of the line. Position: absolute column height segments and rows are ready, so it is important to specify a minimum height of 100% in the column between the total width and height of the segment \/ viewport.
At this point, we create a full screen canvas, which can basically fill the columns with icons. Male part 2: create icons in the column and specify the location. Now you are ready to create and place icons with columns. The idea is to strategically place icons in the full screen column to build a scrolling animation icon background design. Male icon 1 creation and location first create the first icon, and then use divi builder to specify the location. Add an icon module to the column. Open the icon setting and select the icon in the icon selector. On the design tab, update the icon color and size:
Icon color: #fff icon size: on 3vw (desktop), 40px (tablet), 30px (phone) maleadvanced tab, update position and offset: Position: absolute position: lower left vertical offset: 10% horizontal offset: 10% note: the percentage length unit here is based on the bottom and left CSS properties. In this case, a 10% vertical offset is equivalent to \
To generate the male Icon 2 and specify the location, copy the existing icon. Then open the settings of the copy icon and update the location settings as follows: Vertical offset: 30% horizontal offset: to create a third icon with a 40% male icon 3 and a specified position, copy the previous icon. Then open the settings of the copy icon and update the location settings as follows: Vertical offset: 20% horizontal offset: to generate the fourth icon with 30% male and female icon 4 and specify the position, copy the previous icon. Then open the settings of the copy icon and update the location settings as follows:
Vertical offset: 70% horizontal offset: to create a 40% male icon 5 and position the fifth icon, copy the previous icon. Then open the settings of the copy icon and update the location settings as follows: Vertical offset: 60% horizontal offset: to create a sixth icon with a 50% male icon 6 and a specified location, copy the previous icon. Then open the settings of the copy icon and update the location settings as follows: Vertical offset: 65% horizontal offset: to create a 60% male icon 7 and position the seventh icon, copy the previous icon. Then open the settings of the copy icon and update the location settings as follows:
Vertical offset: 28% horizontal offset: to create an eighth icon with a 70% male icon 8 and a specified position, copy the previous icon. Then open the settings of the copy icon and update the location settings as follows: Vertical offset: 50% horizontal offset: to create an 80% male icon 9 and specify the location, copy the previous icon. Then open the settings of the copy icon and update the location settings as follows: Vertical offset: 15% horizontal offset: 90% male3 parts: if you add scrolling animation to the strategic placement of icons in icons, you can prepare to add scrolling animation to each icon. Multi icon selection in this example, the same scrolling animation will be added to all 9 icons. But you want
load. Here’s a preview. The last idea is sometimes to be creative and show the power and fun of divi as a visual page builder. I think this tutorial helps to emphasize the effectiveness of divi in injecting life into the background of the website. You can add rollover effects to hundreds of different icons, which opens the possibility for all types of creative design and animation. Hopefully, this will inspire the use of scrolling animated icons in a more creative way. I will wait for your comments with comments. Cheers!
