The Settings Tab

  1. Home
  2. Knowledge Base
  3. Documentation
  4. Usage
  5. The Settings Tab

The Settings tab defines the type of the Divi Area and decides, which pages or requests include the Divi Area.

Pro-Tip

Set user-roles and page-rules to generate smaller pages that load faster.
Most options in the “Settings” tab are processed by the server and impact the generated HTML code. Options from the other tabs are mostly processed by JavaScript in the browser.

Layout Type

Define the type of Area to create from the four layout types (Popup, Fly-In, Hover, Inline). Each type has slightly different options and behaves differently on the front end.

Options

Area Type

Choose the type of Area you want to design. Each Area type has distinct features, behaves a little differently, and has other use-cases. You can find more about the differences in the Overview of Layout-Types.

Static Inline Area

  • Applies to:
  • Popup
  • Fly-In
  • Hover
  • Inline

An Inline Area can be made static or dynamic (default). Generally, static Inline Areas are better for performance, as the plugin attempts to process them on the server and the resulting page can be cached. Static Inline Areas might impact your SEO, as their content is visible in the HTML code like normal page content.

Note that static Inline Areas cannot be triggered and are visible instantly when the page loads. Also, they can not have a close button and as a result, will be always visible. If you want to use a trigger or allow users to close the Area, make the Inline Area dynamic, which delegates the behavior to the JavaScript library.

When using a static Inline Area, you can use the user-role or page-rule options to decide who can see the Area – for example, you can show a login form to all guests.


User Roles

Define, which users can see the Area.

Options

User Role Limitation

By default, any Area is displayed to all users. If your Area should be restricted by the user role, enable this option.

User Roles

After enabling user role limitation you can pick the user roles that will see the Area.

The special role “Any logged in user” matches any user that has a valid session, regardless of the actual user’s role. When this option is selected, you cannot choose other roles, as that would be redundant or result in the same behavior as disabling the user role limitation.

Notes

Heads-up

The user role limitation is processed by the server and impacts the generated HTML code. Keep this in mind when you want to trigger an Area via the JS API – you can only trigger Areas that are actually present in the HTML code!


Page Rules

Define, which pages or page-types will load the Area.

Options

Page Limitation

By default, an Area is loaded on all pages/requests. In many cases, you want to restrict an Area to a list of pages, posts, or post-types that might use an Area.

Page Rules

Select the exact pages that will load the Area using the checkboxes. The page rule selector works very similar like Divis theme builder (and in fact uses Divis internal functions to generate the list):

Include an Area on a page, by checking the green (left) checkbox and exclude the Area from a post by checking the red (right) checkbox. In most cases, you can directly select the pages that should load an Area, but there are some advanced use-cases that you can implement by combining include/exclude options.

For example, include an Area for “All Posts” but exclude it from “Posts with Specific Tag: Tutorial”.

Notes

Heads-up

The page rule limitation is processed by the server and impacts the generated HTML code. Keep this in mind when you want to trigger an Area via the JS API – you can only trigger Areas that are actually present in the HTML code!


Inline Location

  • Applies to:
  • Popup
  • Fly-In
  • Hover
  • Inline

Define the place on the page where an Inline Area is displayed.

Options

Area Location

Defines the place where the Inline Area appears on the page. You can choose one of the predefined theme-locations or use the “CSS Selector” location to specify a custom location.

Options:

CSS Selector
Specify a custom location using the input field “CSS Selector” below.
Header
Target the entire theme header; also works with custom Theme Builder headers.
Main Menu
Target the main menu; also works with Slide-In or Fullscreen headers.
Post Content
Target the post content of single pages. This location has no effect on archive pages.
Comment Form
Target the comment form.
Footer
Target the entire theme footer; also works with custom Theme Builder footers.

Position

Specify where the Inline Area should be displayed relative to the Location. Possible values are Before, After or Replace.

Options:

  • Before – Display the Inline Area before (i.e., above) the specified location.
  • After – Display the Inline Area after (i.e., below) the specified location.
  • Replace – The Inline Area replaces the content at the specified location.

CSS Selector

Here you can enter a custom CSS selector that specifies the location of the Area. It’s possible to enter multiple selectors that are separated either by newline or a comma – notice, that the Inline Area will only be displayed once: At the first selector that is present on the page. Using multiple selectors is useful to specify different positions depending on the page/post/post-type.

If possible, use a “simple selector” that targets a single CSS class or ID like .section1 or #button-cta. Those simple selectors are processed on the server and are recommended when using static Inline Areas. However, you can also use other selectors for static Inline Areas: Those will be processed via JavaScript by the browser and might not be SEO relevant.

Notes

Heads-up

The Inline Area is either positioned outside the location element (e.g., before the opening tag of the main menu) or it completely replaces the location element. That means, the Inline Area will not inherit CSS rules of the target location.

Pro-Tip

When you create a dynamic Inline Area that replaces an element, you can add a close button to the Area. Once the Area is closed, the original content is restored.


Was this article helpful?

Related Articles