Learn how to Upload Scroll-Animated Icons to Phase Backgrounds in Divi

by | Dec 18, 2021 | Etcetera | 0 comments

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.

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !very important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !very important; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:previous than { border-top-color: #ffffff !very important; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:previous than, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:previous than { border-top-color: transparent !very important; border-left-color: #ffffff !very important; }
@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

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.

divi notification box

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

expanding corner tabs

To get started, it is important to do the following:

  1. When you occur to haven’t however, install and activate the Divi Theme.
  2. 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).
  3. Select the selection “Assemble From Scratch”.

After that, you’re going to have a blank canvas to begin out designing in Divi.

See also  Figuring out Core Internet Vitals: Learn how to Track them & their Affect to your Web page

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.

divi scroll animated icons section background

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.

divi scroll animated icons section background

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.

divi scroll animated icons section background

Segment Settings

Open the section settings and add a background color as follows:

  • Background Color: #000

divi scroll animated icons section background

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)

divi scroll animated icons section background

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

divi scroll animated icons section background

Beneath the sophisticated tab, give the row an absolute position.

  • Position: Absolute

divi scroll animated icons section background

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.

divi scroll animated icons section background

At this stage, we have now essentially created a fullscreen canvas that allows us to fill the column with icons.

divi scroll animated icons section background

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.

divi scroll animated icons section background

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.

divi scroll animated icons section background

Open the Icon Settings and choose an icon from the icon picker.

divi scroll animated icons section background

Beneath the design tab, change the icon color and size as follows:

  • Icon Color: #fff
  • Icon Dimension: 3vw (desktop), 40px (tablet), 30px (phone)

divi scroll animated icons section background

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.

divi scroll animated icons section background

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%
See also  Download a FREE Category Page Template for Divi’s Home Staging Layout Pack

divi scroll animated icons section background

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%

divi scroll animated icons section background

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%

divi scroll animated icons section background

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%

divi scroll animated icons section background

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%

divi scroll animated icons section background

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%

divi scroll animated icons section background

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%

divi scroll animated icons section background

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%

divi scroll animated icons section background

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.

divi scroll animated icons section background

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.

divi scroll animated icons section background

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%)

divi scroll animated icons section background

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%)

divi scroll animated icons section background

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%)

divi scroll animated icons section background

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%)

divi scroll animated icons section background

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%)
See also  20 Humorous Out-of-Place of business Messages to Encourage Your Personal [+ Templates]

divi scroll animated icons section background

Blur

Next, make a selection the Blur tab and make allowance the blur have an effect on:

  • Allow Blur: YES

divi scroll animated icons section background

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.

divi scroll animated icons section background

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.

divi scroll animated icons section background

Open the text settings and add the following HTML all the way through the body content material subject material:

<h1>Divi</h1>

divi scroll animated icons section background

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)

divi scroll animated icons section background

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

divi scroll animated icons section background

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.

divi scroll animated icons section background

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.

divi scroll animated icons section background

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.

WordPress Web Design

[ continue ]

0 Comments

Submit a Comment