Source: https://divicake.com/blog/getting-started-with-divi-advanced-settings/ [Blog](https://divicake.com/blog/)/[Tutorials](https://divicake.com/category/tutorials/) # Getting Started with Divi: Advanced Settings By Divi Cake·21 December 2020·Updated 20 August 2024·6 min read Getting Started with Divi Advanced Settings We may earn a commission from affiliate links in this post. [Disclosure policy](https://divicake.com/affiliate-disclosure-policy/) On this page - [Where to Find the Settings](https://divicake.com#where-to-find-the-settings) - [CSS ID & Classes](https://divicake.com#css-id--classes) - [How to Adjust the Settings](https://divicake.com#how-to-adjust-the-settings) - [Custom CSS](https://divicake.com#custom-css) - [Attributes](https://divicake.com#attributes) - [Visibility](https://divicake.com#visibility) - [Transitions](https://divicake.com#transitions) - [Position](https://divicake.com#position) - [Scroll Effects](https://divicake.com#scroll-effects) - [Ending Thoughts](https://divicake.com#ending-thoughts) [Divi](https://divicake.com/go/divi/)Advanced settings give you more control over the look and feel of your Divi website. They provide an easy way to target elements with CSS, control which elements are visible on which devices, adjust the position of elements, add scroll effects, and more. Even though this is the Advanced settings, most are easy to learn and use. In this article, we’ll look at the Advanced tab of your sections, rows, columns, and modules and see how to use them. ## Where to Find the Settings Where to Find the Settings In the Visual Editor, hover over the element (section, row, column, or module) you want to adjust. You’ll see a set of icons. Click on the gear for the section, row, column, or modules to open the settings. Where to Find the Settings Select the Advanced tab in the settings screen. Here, you’ll see settings for CSS ID & Classes, Custom CSS, Visibility, Transitions, Position, and Scroll Effects. The options for sections, rows, and columns are the same with a few minor variations. ## CSS ID & Classes CSS ID & Classes CSS is beyond the scope of this tutorial, but if you’re using CSS you can assign the CSS ID in the first field and add CSS classes to the second field. Separate the CSS classes by spaces. The CSS itself can be placed into multiple locations within your Divi website. For more information, see our tutorial [How to Add Custom CSS to Divi](https://divicake.com/blog/how-to-add-custom-css-to-divi/). ## How to Adjust the Settings How to Adjust the Settings Most of the controls for the adjustments work the same as the Design settings. However, there is a new sliding tool to be aware of. It shows the Viewport for the top and bottom on the sides and a mid-offset in the center. The Viewport is the area of the screen that you can see. The website continues below the screen, but the edge of the screen is the bottom Viewport. The sliders simply provide a way for you to adjust how close the element can get to the top or bottom of the screen. The mid-offset is where the element starts. The best way to get the feel of what these adjustments can do is to use the sliders, enter numbers in the fields, etc., to see what effect they have on the element. Also, when you hover over the name of the setting, you’ll see a small menu appear. One of these menu items is a question mark. Click this to get a brief description of what the setting is for. ## Custom CSS Custom CSS Custom CSS includes fields where you can place your CSS to target specific elements. The Section fields include Before, Main Element, and After. The fields will match the element, so if a module has text you’ll see fields for text. Custom CSS Icons appear when you hover next to the field’s title. Clicking on the desktop icon reveals tabs for the different screen types and clicking the arrow shows a field for hover, allowing you to add CSS to the different screen sizes and hover separately. Custom CSS Most of the modules add more fields for Custom CSS. Here are the extra fields for the blurb module. Since it has an image, title, and content, each of those elements have their own Custom CSS fields. ## Attributes Attributes Most of the modules also add Attributes. The options change based on the features of the module. Blurb Attributes allow you to enter alt text for the image. Here are the Attributes for the button. It allows you to define the button relationship. Choose between bookmark, external, nofollow, noreferrer, and noopener. ## Visibility Visibility Visibility includes options to hide the section, row, column, or module on specific screen sizes. This allows you to create a specific design that will show on the desktop, another that will show on tablets, and another that will show on phones. Visibility You’ll also see settings for Horizontal Overflow and Vertical Overflow with options for default, visible, scroll, hidden, and auto. These control the overflow of the x and y-axis of the element. This example shows an image module with an image the overflows its window. In other words, it’s taller than the space allowed for it. When this happens, you can choose how Divi will handle it. In this example, I have the window to display a scroll bar. I’ve set this one to auto, which shows the scroll bar if the image needs it. ## Transitions Transitions Transitions control the speed, delay, and curve of the hover animation. For the speed curve, choose between ease-in-out, ease, ease-in, ease-out, and linear. ## Position Position Position controls the position type, which allows you to specify where the element sits on the screen in relation to its container. Normally, an element is displayed within the container. For example, a module is displayed within a column, which is displayed within a row, which is displayed within a section. With Position, you have control over that placement. You can even place it outside of its container. The position can be relative (offset without disturbing the elements around it), absolute (float within the parent elements), or fixed (float within the visible area of the browser). You can adjust the offset origin and the vertical offset, horizontal offset, and Z index. The square in the center lets you choose the corner the offset is from. The example above shows an image with the position adjusted to make it start outside of the upper left corner of its row. I’ve given the row a blue background to make it easier to see. ## Scroll Effects Divi Scroll Effects settings screen showing options for sticky position, transform effects, vertical motion, and motion effect trigger. The interface allows customization of vertical and horizontal motion, scaling, rotation, and blur effects for enhanced website interactivity. Scroll Effects Effects Scroll Effects are some of the most interesting features of Divi. They can make your elements stand out as the user scrolls up or down your website. Settings include the sticky position, transform effects, vertical motion, and the motion effect trigger (choose from the top, middle, or bottom of the element). Transform effects include vertical motion, horizontal motion, fade in and out, scaling up and down, rotating, and blur. The settings can work together or independently. Let’s look at a few of them. Vertical Motion effect with image moving independently in a vertical direction from the static background in Divi Theme. Default settings applied, adjustable using Set Vertical Motion sliders for precise positioning. Vertical Motion Effect This is Vertical Motion. The image moves separately in a vertical position from the background. I’ve left all the settings at default. You can fine-tune its position with the Set Vertical Motion sliders. Horizontal motion effect image moving with both vertical and horizontal scroll. Demonstrates seamless dual-directional movement as the page is scrolled. Horizontal Motion Effect This Horizontal Motion. The image moves horizontally as you scroll. It still moves with the page, so it also has a vertical movement. Fade In and Out effect with an image fading as it begins to scroll. The image fully appears as it aligns with the center of the screen. Fade In and Out Effect This is Fade In and Out. The image is faded when it starts to scroll and un-fades when it reaches the center. Image initially displayed at a smaller size, gradually increasing to its intended full scale. Demonstrates scaling effect, transitioning smoothly to the correct dimensions. Scaling Up and Down Effect This is Scaling Up and Down. The image starts smaller and scales up to the correct size. Image starting in a rotated position, gradually rotating into place as the user scrolls down the page. Visual effect demonstrating dynamic rotation during scroll interaction. Rotate Effect This is Rotate. The image starts in a rotated position and then rotates into place as the user scrolls. Image begins in a blurry state and gradually comes into focus as the user scrolls. The transition from blur to sharpness illustrates the effect of scrolling. Blur Effect This is Blur. The image starts blurry and then sharpens as the user scrolls. ## Ending Thoughts That’s our look at [Divi](https://divicake.com/go/divi/)Advanced Settings tab. These settings allow you to target elements with CSS and give you control over the element’s visibility, position, and scrolling animations. The scrolling effects are an especially good way to make your site stand out without having to learn advanced programming. The adjustments are standardized between sections, rows, columns, and modules, so if you learn to use one you have an idea of how to use them all. For more information about Divi settings, see our previous article: [Getting Started with Divi: Design Settings](https://divicake.com/getting-started-with-divi-design-settings). We want to hear from you. Do you use Divi’s Advanced settings? Let us know about your experience in the comments. About the author Written by Divi Cake. ## Submit a comment Comments are read before they appear. Your email is not published. Comment NameEmail Company website Submit commentSubmit commentSubmit comment The comment form needs JavaScript for its spam check. Thanks. Your comment is waiting for review and will appear here once it is approved. ## Do you need help with … - [Divi websites](https://divicake.com/divi-website-development/) - [Divi plugins](https://divicake.com/divi-plugin-development/) - [Fix a site](https://divicake.com/fix-existing-site/) - [Beyond Divi](https://divicake.com/beyond-divi/) - [Technical SEO](https://divicake.com/technical-seo/) - [SEO content](https://divicake.com/seo-content/) ## Save Annually on Divi [Save 69% on Divi VIP](https://divicake.com/go/divi-vip/)[Save 69% on Divi Cloud](https://divicake.com/go/divi-cloud/)[Save 69%, Divi Team](https://divicake.com/go/divi-teams/) ## WordPress Hosting & Tools [100% off on Kinsta for 1 Month](https://divicake.com/go/kinsta/)[Get up to 62% off Bluehost hosting.](https://divicake.com/go/wordpress-hosting-blue-host/)[Save Up to 15% on Rank Math](https://divicake.com/go/rank-math/)[Get 50% OFF on all WPForms plans](https://divicake.com/go/wpforms/) ## More in Tutorials [ Getting Started with Divi: Using the Divi Builder Tutorials7 min read ### Getting Started with Divi: Using the Divi Builder A walkthrough of the Divi Builder for new users: the backend and frontend builders, how sections, rows and modules fit together, and a simple contact page built step by step. 1 October 2026](https://divicake.com/blog/getting-started-with-divi-using-the-divi-builder/) [ How to Update the Divi Theme Tutorials4 min read ### How to Update the Divi Theme How to update the Divi theme safely: back up and test first, add your Elegant Themes API key to Theme Options, run the update from the WordPress Updates screen, and what to do with a legacy version. 23 September 2026](https://divicake.com/blog/how-to-update-divi-theme/) [ Top reasons to choose a pre-built theme for your website Blogging10 min read ### Top Reasons to Choose a Pre Built Theme for Your Website Why a pre-built theme is often the faster and cheaper way to launch a site, compared with a custom build on cost, responsiveness, customization, SEO and support. 21 September 2026](https://divicake.com/blog/reasons-to-choose-a-pre-built-theme-for-your-website/)