![]() 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. ![]() Auto – This option will engage scroll functionality whenever necessary (ie.Hidden – Overflowing content outside the box will be hidden (without the ability to scroll).Scroll – Overflowing content will be hidden, but users will be able to scroll through the hidden content either vertically or horizontally.Since this is the default setting in Divi, you will rarely need to select it. Visible – The overflowing content will remain visible and not become clipped when extending outside the box.Default – The default value is visible (see below).2.3 #3 Using Overflow Scroll to Allow Users to Scroll Through Content Horizontallyĭivi’s overflow options allow you to set the css overflow property of an element to one of the following values:.2.2 #2 Using Overflow Scroll to Allow Users to Scroll Through Content Vertically.2.1 #1 Using Overflow Hidden to Clip Overflowing Content for Unique Designs.2 3 Helpful Ways to Use Divi’s Overflow Options in Divi.1 Understanding Divi’s Overflow Options.When we hover the paragraph element's content, the content of the div element will be automatically visible because the paragraph element is the child of the div element. We can see the full content by hovering over the elements. There is a div element on which we are applying the text-overflow: ellipsis and inside the div, there is a paragraph element on which we are applying the text-overflow: inherit property. In this example, we are using the ellipsis and inherit values of the text-overflow property. Hover over the bordered text to see the full content.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |