![]() ![]() Then update the design settings as follows: Then add a text module to the row and update the following text module settings:įirst add an h2 heading in the content box as follows: Overflow Before we start adding modules, let’s give the section the following padding: Then we will see how the design changes when setting our row to overflow hidden.įirst, create a regular section with a one column row. To understand how to use the overflow hidden property, we are going to create a quick example design with overflowing text and an overflowing image. Subscribe To Our Youtube Channel 3 Helpful Ways to Use Divi’s Overflow Options in Divi #1 Using Overflow Hidden to Clip Overflowing Content for Unique Designs Now that you understand the overflow options a little better, let’s dive in to building some working examples of helpful ways to use them in real life. The content of the text module extends beyond the text module but remains visible by default.īut once you add the vertical overflow scroll property to the text module, the scroll bar appears allowing the user to scroll through the hidden content. The main difference is that a scroll bar appears allowing the user to scroll through the content that exists beyond the limits of the container.įor example, here is a text module with a height of 400px. ![]() Using overflow scroll allows you to hide the content outside the box container (much like overflow hidden). Once you add the overflow hidden property to the row, the content outside of the box becomes clipped and hidden from view entirely. In this example, the content that has been positioned outside of the row container remains visible, which is the default setting for all elements in Divi. Here are a few quick illustrations taken from the designs in this tutorial to help you understand how overflow options work. This comes in handy for when you want to add vertical scroll functionality to an element but you don’t want a scrollbar to appear horizontally as well. This would come in handy for designs with a set height or width that need to have scrolling capabilities on smaller browsers.ĭivi has an overflow option for both horizontal and vertical overflow allowing you to set different property values for each.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |