How to Create a Divi Hero Slider

May 19, 2023 | Divi Resources

3 Easy Steps to Build an Engaging Divi Hero Slider

The hero section of a website is the crucial segment. It sets the mindset of the user whether they will explore your platform or not. If it’s not interesting, no matter what you have on the rest of the page, it doesn’t matter. 

Therefore, it’s a must you work on your hero section. 

One of the best ways to improve a hero section is to make it slide. A sliding hero section can help you convey more points/ideas/services you offer to the client. 

For Divi users, it’s easy and amazing to build a hero slider. The Divi Builder provides you with amazing tools that make it possible to quickly build a Divi slider hero that can capture users’ attention. Furthermore, it allows you to add the best copy, graphics, and animations. So, if you’re looking to build a Divi hero section that can slide, this is the tutorial; you need to read till the end.

And for your convenience, we have a surprise at the end that makes building an awesome Divi hero section easy and fun. But now, let’s move to our steps to build a sliding hero in Divi.

3 Steps to Build Divi Hero Slider


Follow the steps below to create a slider hero section in Divi. All the steps include native options that Divi provides. Hence, no need to look for any 3rd party solution. 

Step 1: Edit or Create a New Homepage

Whether you want to create a sliding hero section for the homepage or some other pages, it depends on you. The hero section can be added to any page of the website. However, most of the time, it’s needed for the landing page

If you don’t have a landing page already, you can try some pre-built landing page layouts to fasten the process. 

It’s not necessary that you should have a landing page, but a great hero section should be on a page which you want to target the most. Anyway, once you have decided where you want to add the sliding Divi hero section, launch the Divi builder by clicking Use The Divi Builder.

Launching Divi Builder

Choose to BUILD FROM SCRATCH and then click on the Build On The Front End button, and once the builder is launched, select BUILD FROM SCRATCH again.

Once the Divi visual builder has launched, move to the next step.

Step 2: Insert the Fullwidth Section and Slider

Now, build a Divi hero slider section; you need first to insert a Fullwidth section. For that, click on the Insert New Section button.

Inserting a Fullwidth Section

Then, select Fullwidth. This will insert a new section underneath the default section. Now, to make your hero section slider, first, remove the default section. 

Deleting the Default Divi Section for the Sliding Hero

Simply click on the delete icon. Then, in your Fullwidth section, insert the following Fullwidth Slider module. 

Inserting Fullwidth Slider module for Divi Slider Hero

Once added to the slider module, move to the next.

Step 3: Customize Your Divi Hero Slider

Now, you have the slider added to the hero section. However, to make it look like a sliding hero section, you need to make some customizations. For starters, when you insert the module, you’ll see the Content tab. Here, you can insert the slides for the hero section. 

Add a New Slide Option for the Sliding Hero

Simply click on the Add New Slide button. This will open the Slide Settings. Here, you can add the content of your slide. It provides you with the following settings:

In the Text settings, you assign Title, Button and Body for the slider.

Image and Video Settings for Divi Slider Hero

If you want to add an Image and/or Video to the hero slider, you can do that using the Image & Video settings. Likewise, other settings allow you to add links and backgrounds to improve the content. To customize the slide further, you need to open the Design. It provides you with the following settings.

Design Settings of Slide in Divi

Here, you can add an overlay to the slide, customize the navigation color, text styles and more. 

Once done, customize the slide, click Save Changes, and it will bring you back to the slider’s main settings.

More Slides in the Sliding Divi Hero

To add more slides, simply click the Add New Slide. Further, explore the settings to improve your sliding hero section.

That’s it; by utilizing the available options in the Fullwidth Slider module, you can built a Divi hero slider easily. No 3rd party plugin or module required!  

Examples of Divi Hero Slider (Ready to Use Layouts)


For website owners who are busy and don’t want to involve themselves in designing from scratch, pre-built layouts are always a great solution. Therefore, we have designed some amazing hero section layouts, which you can make yours by getting the Hero Sections for Divi Pack.

Divi Hero Sections

It includes a total of 60 amazing Divi hero sections, which also include slider hero sections for Divi. So, if you don’t want to spend more time, you can try the layouts included with this bundle. The following are some of the Divi hero slider layouts available with the package.

Divi Slider Hero Example 1

Divi Slider Hero Example 2

Conclusion


By following the above steps, you can easily build a sliding hero section in Divi. The steps involve the native settings, and you don’t have to use any 3rd party tool. However, if you want to save time and build something great looking, then choosing the pre-built layouts from the Hero Sections for Divi pack is a nice decision. 

You get tons of layouts that are quick to adapt to your website’s niche. Hence, a perfect Divi hero slider that serves your purpose the best. 

Try it today and let us know in the comments what your experience was. 

Posted By:
Divya
Divya is a WordPress theme Wizard at Elicus. She loves bringing design ideas to life.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Divi Agency Child Theme to Present Your Enterprise

Divi Agency Child Theme to Present Your Enterprise

When you are using Divi to create your agency website on WordPress, you need a Divi agency child theme. This is a perfect solution with 5 modern Divi agency layouts to introduce your services, portfolio, contact, and other essential things about your company. Display...

Add an Instagram Feed to Your Website Using Divi Plus

Add an Instagram Feed to Your Website Using Divi Plus

Instagram is one of the most popular social platforms and you can leverage that to grow your business, company, or blog. You can connect with individuals related to your company or business and relevant social communities of your niche but for that, you need to show...

What Are the Essential Elements for Good Photography Websites?

What Are the Essential Elements for Good Photography Websites?

To make an online platform thrive, it needs a good design. And good design cannot happen just right away. You need appropriate elements in the appropriate location to make any website look outstanding.  The same is true with photography websites. If you want to...

Divi WooCommerce Extended

Popular on Divi Extended

Divi Plus WooCommerce Extended Divi Layouts Extended Divi Header Layouts