Combining scroll animation with icons can elevate the design of your internet website online in unique tactics. In this tutorial, we’re going to find how you can add scroll-animated icons to section backgrounds in Divi. With numerous icons to choose between and with numerous built-in animation effects available in Divi, we’ll show you tactics you’ll be capable to create a lot of background animations to put across our designs to a whole new degree.
Let’s get started!
Sneak Peek
Right here’s a quick check out the design we’ll assemble in this tutorial.
And proper right here is a bonus design that shows you what’s possible with a few tweaks.
Download the Layout for FREE
To position your hands on the designs from this tutorial, you’re going to first wish to download it the usage of the button beneath. To appreciate get right to use to the download it is important to subscribe to our Divi Daily e mail list via the usage of the form beneath. As a brand spanking new subscriber, you’re going to acquire a lot more Divi goodness and a unfastened Divi Layout pack each and every Monday! When you occur to’re already on the list, simply enter your e mail care for beneath and click on on download. You’ll not be “resubscribed” or download additional emails.
@media best show and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:previous than { border-top-color: #ffffff !very important; border-left-color: transparent !very important; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !very important; border-left-color: transparent !very important; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !very important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color: #f92c8b !very important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:previous than { background: #f92c8b !very important; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !very important } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !very important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 powerful { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p powerful, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !very important;}

Download For Free
Join the Divi E-newsletter and we will e mail you a reproduction of the ultimate Divi Landing Internet web page Layout Pack, plus numerous choice glorious and unfastened Divi belongings, pointers and techniques. Follow along and also you’re going to be a Divi clutch in no time. When you’re already subscribed simply type on your e mail care for beneath and click on on download to get right to use the construction pack.
You are going to have successfully subscribed. Please take a look at your e mail care for to ensure your subscription and get get right to use to unfastened weekly Divi construction packs!
To import the section construction to your Divi Library, navigate to the Divi Library.
Click on at the Import button.
Inside the portability popup, make a selection the import tab and choose the download document from your computer.
Then click on at the import button.
Once carried out, the section construction will probably be available inside the Divi Builder.
Let’s get to the instructional, we could?
What You Want to Get Started
To get started, it is important to do the following:
- When you occur to haven’t however, install and activate the Divi Theme.
- Create a brand spanking new internet web page in WordPress and use the Divi Builder to edit the internet web page on the front end (visual builder).
- Select the selection “Assemble From Scratch”.
After that, you’re going to have a blank canvas to begin out designing in Divi.
Discover ways to Add Scroll-Animated Icons to Segment Backgrounds in Divi
The Key Concept In brief Outlined
The process of together with scroll-animated icons to section backgrounds involves 4 key parts.
1: Creating a Fullscreen Canvas
First, we wish to create a fullscreen canvas the usage of via customizing a little bit, row, and column so that every of them spans the entire width and height of the browser. This will likely an increasing number of give us one of those unhindered creative space we wish to fill with icons.
2: Together with and Positioning the Icons
Now, we will be able to strategically place the icons all the way through the fullscreen canvas (or column) to build our scroll-animated icon background design.
3: Together with Scroll Animaiton to the Icons
As quickly because the icons are in place, we will be able to add our scroll change into effects (or animation) to every of them.
4: Together with Content material subject material to the Forefront of the Segment
After the background design is complete with scroll-animated icons, we will be able to add the content material subject material we wish to the blow their own horns at the vanguard.
Now that we’ve were given an idea of what to do, let’s dive in!
Phase 1: Growing the Fullscreen Canvas (Setting up the Segment, Row, and Column)
Let’s get started via together with a one-column row to the typical section.
Segment Settings
Open the section settings and add a background color as follows:
- Background Color: #000
Beneath the design tab, add a min-height of 100vh to make sure the section spans the entire height of the viewport.
- Min Best: 100vh (desktop), 600px (tablet and phone)
Row Settings
Next, open the row settings and change the sizing so that it moreover spans the entire width and height of the section/viewport.
- Use Custom designed Gutter Width: YES
- Gutter Width: 1
- Width: 100%
- Max Width: 100%
- Best: 100%
- Padding: 0px top, 0px bottom
Beneath the sophisticated tab, give the row an absolute position.
- Position: Absolute
Column Best
Now that our section and row are in place, it is very important give the column a min-height of 100% so that it’ll moreover span the entire width and height of the section/viewport.
At this stage, we have now essentially created a fullscreen canvas that allows us to fill the column with icons.
Phase 2: Growing and Positioning the Icons all the way through the Column
Now we’re in a position to begin out rising and positioning the icons with the column. The idea is to strategically place the icon within this fullscreen column to build our scroll-animated icon background design.
Growing and Positioning Icon 1
We’ll get began via rising our first icon and then positioning it the usage of the Divi Builder.
Add an Icon Module to the column.
Open the Icon Settings and choose an icon from the icon picker.
Beneath the design tab, change the icon color and size as follows:
- Icon Color: #fff
- Icon Dimension: 3vw (desktop), 40px (tablet), 30px (phone)
Beneath the Sophisticated tab, change the positioning and offsets as follows:
- Position: Absolute
- Location: Bottom Left
- Vertical Offset: 10%
- Horizontal Offset: 10%
NOTE: Understand that the share duration unit right here’s relative to the bottom and left CSS Homes. In this case, a vertical offset of 10% is similar to “bottom: 10%” in CSS and a horizontal offset is similar to “left: 10%”. On account of our column is fullscreen, icons will keep responsive when adjusting the browser height and width. In several words, they’ll keep their position on different show sizes.
Growing and Positioning Icon 2
To create the second icon, reproduction the existing icon. Then open the settings of the reproduction icon and change the positioning settings as follows:
- Vertical Offset: 30%
- Horizontal Offset: 40%
Growing and Positioning Icon 3
To create the third icon, reproduction the previous icon. Then open the settings of the reproduction icon and change the positioning settings as follows:
- Vertical Offset: 20%
- Horizontal Offset: 30%
Growing and Positioning Icon 4
To create the fourth icon, reproduction the previous icon. Then open the settings of the reproduction icon and change the positioning settings as follows:
- Vertical Offset: 70%
- Horizontal Offset: 40%
Growing and Positioning Icon 5
To create the fifth icon, reproduction the previous icon. Then open the settings of the reproduction icon and change the positioning settings as follows:
- Vertical Offset: 60%
- Horizontal Offset: 50%
Growing and Positioning Icon 6
To create the sixth icon, reproduction the previous icon. Then open the settings of the reproduction icon and change the positioning settings as follows:
- Vertical Offset: 65%
- Horizontal Offset: 60%
Growing and Positioning Icon 7
To create the seventh icon, reproduction the previous icon. Then open the settings of the reproduction icon and change the positioning settings as follows:
- Vertical Offset: 28%
- Horizontal Offset: 70%
Growing and Positioning Icon 8
To create the eighth icon, reproduction the previous icon. Then open the settings of the reproduction icon and change the positioning settings as follows:
- Vertical Offset: 50%
- Horizontal Offset: 80%
Growing and Positioning Icon 9
To create the ninth and supreme icon, reproduction the previous icon. Then open the settings of the reproduction icon and change the positioning settings as follows:
- Vertical Offset: 15%
- Horizontal Offset: 90%
Phase 3: Together with Scroll Animation to Icons
As quickly because the icons were strategically situated, we’re in a position with the intention to upload the scroll animations to every of the icons.
Multi-Select the Icons
For this case, we’re going to add the an identical scroll animations to all 9 of the icons. On the other hand, you’ll be in a position to choose to supply unique scroll animations to every of them for my part if you choose. As a way to upload the scroll animations to all of the icons at once, use multi-select (cling ctrl or cmd while deciding at the icon modules) to select all of the icons inside the column. Then open the settings of some of the essential made up our minds on modules.
This will likely an increasing number of put across up the part settings modal. Beneath the sophisticated tab, open the Scroll Effects chance group of workers toggle. There you’re going to peer the Scroll Become Effects. We will be together with all six effects available (Vertical Motion, Horizontal Motion, Fade In and Out, Scaling Up and Down, Rotating, and Blur).
Together with Scroll Become Effects
Vertical Motion
Be sure that the Vertical Motion tab is selected and change the following:
- Allow Vertical Motion: YES
- Starting Offset: 2 (at 0%)
- Completing Offset: -2 (at 100%)
For tablet display change the offsets as follows:
- Starting Offset: 1 (at 0%)
- Completing Offset: -1 (at 100%)
For phone display change the offsets as follows:
- Starting Offset: 0.5 (at 0%)
- Completing Offset: -0.5 (at 100%)
Horizontal Motion
Next, make a selection the Horizontal Motion tab and change the following:
- Allow Horizontal Motion: YES
- Starting Offset: -1 (at 0%)
- Completing Offset: 1 (at 100%)
For tablet display, change the offsets as follows:
- Starting Offset: 0 (at 0%)
- Completing Offset: 0 (at 100%)
Fading In and Out
Next, make a selection the Fading In and Out tab and change the following:
- Allow Fading In and Out: YES
- Mid Opacity: 50% (at 50%)
Scaling Up and Down
Next, make a selection the Scaling Up and Down tab and change the following:
- Allow Scaling Up and Down: YES
- Starting Scale: 0% (at 0%)
- Mid Scale: 50% (at 50%)
Rotating
Next, make a selection the Rotating tab and change the following:
- Allow Rotating: YES
- Starting Rotation: 0% (at 0%)
- Mid Rotation: 90% (at 50%)
- Completing Rotation: 180% (at 100%)
Blur
Next, make a selection the Blur tab and make allowance the blur have an effect on:
- Allow Blur: YES
Preview
Right here’s a quick check out the scroll-animated icons in movement.
Phase 4: Together with Content material subject material to the Forefront of the Segment
Now that we’ve were given our scroll-animated icons for our background, we’re in a position with the intention to upload the content material subject material we want to display in the vanguard. The idea is to stick the row (with the column and icons) in the back of any more row(s) of content material subject material we want to be displayed in front of that background.
In this example, we’re going to add a one-column row with a simple heading.
First, add a brand spanking new one-column row directly beneath the existing row.
The prevailing row has an absolute position so together with another one will place the row at the top of the section as expected.
All over the brand new row, add a text module.
Open the text settings and add the following HTML all the way through the body content material subject material:
<h1>Divi</h1>
Beneath the design tab, change the heading text sorts as follows:
- Heading Font: Poppins
- Heading Text Alignment: Middle
- Heading Text Dimension: 8vw (desktop), 40px (tablet and phone)
Row Position
As a way to be sure that the row (and heading) are situated inside the center of the section, open the row settings and change the positioning as follows:
- Position: Absolute
- Location: Middle
Finishing Touches: Segment Background Image and Overflow
To finish off the design, open the section settings and add a background image. For this case, I’m the usage of an image from our Artificial Intelligence Layout Pack.
Beneath the sophisticated tab, be sure that the overflow is hidden via updating the visibility possible choices:
- Horizontal Overflow: Hidden
- Vertical Overflow: Hidden
This will likely an increasing number of be sure that the vertical scroll bar doesn’t show up when an icon is animated outside the section.
Final Outcome
Now let’s take a look at the total outcome on desktop and tablet.
Additional Design Example (Built-in in FREE download)
I couldn’t lend a hand on the other hand get a little bit of additional creative with this design. So, I added an additional design example that uses animated icons to concentrate on the heading. It’s included inside the unfastened download to start with of the object.
That is the preview.
Final Concepts
From time to time it’s fun to get creative and blow their own horns merely how powerful (and fun) Divi will also be as a visual internet web page builder. I consider this tutorial has helped highlight merely how environment friendly Divi will also be at making internet website online background sections come to life. The fact that you’ll be capable to add scroll change into effects to numerous quite a lot of icons opens the door for all kinds of creative designs and animations. Confidently, this offers you a boost of inspiration to use scroll-animated icons in a lot more creative tactics.
I look forward to being attentive to from you inside the comments.
Cheers!
.inline-code{padding: 0px 4px; color: red; font-family: Monaco,consolas,bitstream vera sans mono,courier new,Courier,monospace!very important} video.with-border {border-radius: 8px;box-shadow: 0 8px 60px 0 rgba(103,151,255,.11), 0 12px 90px 0 rgba(103,151,255,.11);display:block;margin: 0 auto;}
The publish How to Add Scroll-Animated Icons to Section Backgrounds in Divi gave the impression first on Elegant Themes Blog.
Contents
- 1 Sneak Peek
- 2 Download the Layout for FREE
- 3 Download For Free
- 4 You are going to have successfully subscribed. Please take a look at your e mail care for to ensure your subscription and get get right to use to unfastened weekly Divi construction packs!
- 5 What You Want to Get Started
- 6 Discover ways to Add Scroll-Animated Icons to Segment Backgrounds in Divi
- 6.1 The Key Concept In brief Outlined
- 6.2 Phase 1: Growing the Fullscreen Canvas (Setting up the Segment, Row, and Column)
- 6.3 Phase 2: Growing and Positioning the Icons all the way through the Column
- 6.3.1 Growing and Positioning Icon 1
- 6.3.2 Growing and Positioning Icon 2
- 6.3.3 Growing and Positioning Icon 3
- 6.3.4 Growing and Positioning Icon 4
- 6.3.5 Growing and Positioning Icon 5
- 6.3.6 Growing and Positioning Icon 6
- 6.3.7 Growing and Positioning Icon 7
- 6.3.8 Growing and Positioning Icon 8
- 6.3.9 Growing and Positioning Icon 9
- 6.4 Phase 3: Together with Scroll Animation to Icons
- 6.5 Phase 4: Together with Content material subject material to the Forefront of the Segment
- 6.6 Finishing Touches: Segment Background Image and Overflow
- 7 Final Outcome
- 8 Additional Design Example (Built-in in FREE download)
- 9 Final Concepts
- 10 Cybersecurity: The Final Information to Protecting Towards Cyber Assaults
- 11 Learn how to Use the Energetic Product Filters WooCommerce Block
- 12 How Instagram’s New Nudge Characteristic for Teenagers May Have an effect on Entrepreneurs or Creato...
0 Comments