![]() Time to add modules, starting with a first Text Module containing some H4 content. Move on to the column’s design tab and apply some custom padding values.Īdd Text Module #1 to Column Add H4 Content Use a white background color for the column. Modify the sizing settings of the row next. Without adding modules yet, open the row settings and use a background image. This, in combination with the max height in the previous step, will help us automatically generate a scrollbar on certain screen sizes where the section elements exceed the viewport height.Ĭontinue by adding a new row to the section using the following column structure: We’re also setting the vertical overflow to auto. Open the section settings and assign a max height in the sizing settings. Add this section right in between the two placeholder sections. Now that we have the two placeholder sections in place, it’s time to create the first section that we’ll use inside our horizontal scrolling. Build Section Design Add New Section Between Sections This will help us generate some space at the top and bottom of our page, without it being part of the horizontal scrolling (see preview).ġ. Then, clone the placeholder section once. Open the section settings and assign a height to the sizing settings. This section will serve as a placeholder so we can watch the effect fall into place. Start by adding a first section to the page you’re working on. An effortless horizontal screen experience across all screen sizesġ.Making the effect work on a number of sections of our choice (not necessarily the entire page).Fake horizontal scrolling when scrolling vertically.Please check your email address to confirm your subscription and get access to free weekly Divi layout packs! Overview of Approach What We’re Using You will not be “resubscribed” or receive extra emails. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. To gain access to the download you will need to subscribe to our newsletter by using the form below. To lay your hands on the free layout, you will first need to download them using the button below. 9.4 Add New Script Tags for Custom Codeīefore we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.9.3 Add GSAP & ScrollTrigger Libraries First.9.2 Add New Code Module Somewhere Inside Page.9.1 Add CSS Class to Each Section You Want to Include in Horizontal Scroll. ![]() Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
0 Comments
Leave a Reply. |