Creating horizontal and vertical scroll effects in Divi is a simple yet effective way to add a dynamic and visually appealing touch to your website. These scroll effects not only enhance the overall design but also boost user engagement by introducing interactive elements that captivate visitors. Divi comes with built-in options for horizontal scrolling, allowing you to create sleek, sliding sections that give your website a modern and polished look. In addition to horizontal scrolling, Divi also enables you to apply vertical scroll effects, further expanding the interactive possibilities and giving your site a more engaging and immersive experience.

In this tutorial, we will guide you through the process of applying both horizontal and vertical scroll effects to your Divi pages, rows, and modules. By following these easy, step-by-step instructions, you can elevate your web design, making it more dynamic and attractive to your audience. Whether you’re looking to enhance your global body section or specific rows and modules, the options for creating stunning scroll effects in Divi are at your fingertips.

Applying Horizontal Scroll Effects to Your Divi Global Body

To create a Horizontal Scroll Effect, first navigate to the specific page or section where you want the effect applied. If you’re looking to add this effect to your Global Body, start by clicking on Divi from your WordPress dashboard, then click on Theme Builder. From there, select the Body Edit option to begin customizing the horizontal scroll effect for your Global Body section.

Setting a Horizontal Scroll Effect in Divi for Row Sections

In this step, we’ll add a horizontal scroll effect to a specific section that we want to scroll. Whether you’re editing a complete row section or an individual module, click on the settings icon for that section, as shown in the screenshot below. Since we want to apply the scroll effect to the entire row section, we’ll click the settings icon for the row. Then, navigate to the Advanced tab and scroll down to find Scroll Effects. Select Scroll Transform Effects, and under this, click the Horizontal Icon Button. Once clicked, you’ll see the Enable Horizontal Motion toggle—enable this option. You can then set the Horizontal Motion and Motion Effect Trigger. Don’t forget to click the green button to save your changes.

Applying Vertical Scroll Effects in Divi

In the Scroll Transform Effect, you have a variety of scroll effect options to choose from. To find the best one, try them out one by one. In this instance, we also applied the effect to a Text module vertically, which is another easy option provided by the Divi Page Builder. Click on the settings of the module you want to add the scroll effect to—just like we selected a Heading. Follow the same steps and this time, click on the Vertical Icon Button and enable the toggle button under this option.

Read More: How to Design Scroll Animated Bar Counters with Divi

Conclusion

Access Divi Theme Builder by navigating to the specific page or section where you want to apply horizontal or vertical scroll effects. For the Global Body, use Divi’s Theme Builder and click on the Body Edit option.

Next, customize the scroll effects by selecting the section or module where you want to add the effect. Whether horizontal or vertical, go to the Advanced tab and locate Scroll Effects.

To apply a horizontal scroll effect, choose the Scroll Transform Effects and enable the Horizontal Motion option. Adjust the settings as needed, including the motion trigger for a more customized look

For vertical scroll effects, follow similar steps, but this time click on the Vertical Icon Button. Enable the vertical scroll and configure the motion effect to suit your design.

Once you’ve applied the scroll effects, remember to save your work by clicking the green save button in Divi.

By following these steps, you can successfully create both horizontal and vertical scroll effects, adding interactivity and enhancing the overall design of your website.

Read More: How to Create Scroll Animated Number Counters with Divi.