Learning Center

Fullwidth sections in Divi are marked by the color purple. This indicates that the module inside of a section is not constrained by a row (green) and takes up the full width of a given page.

To add a new fullwidth section, click on a blue + icon and select Fullwidth.

There are several options, but the most commonly used are:

• Fullwidth Header – Title, Subtitle, Body, Buttons (x2), Logo Image, Header Image, Background
• Fullwidth Image – fullwidth Image-only
• Fullwidth Map – fullwidth Map-only
• Fullwidth Menu – Menu, Logo, Background
• Fullwidth Post Title – Page/Post Title, Meta, Author, Date (publish date), Comments (if applicable), Featured Image, Background
• Fullwidth Slider – Title, Button (x1), Body, Image or Video, Background

Fullwidth Header

Contains the following content capabilities (all optional):

• Title
• Subtitle
• Body
• Buttons (x2)
• Logo Image
• Header Image
• Background

The Fullwidth Header section has a variety of purposes but is most often used as the top header area on a page, usually on the home page. Most commonly, the Title, Body, a button or two, and a Background are used. This is the best fullwidth module to use if you need two buttons along with lots of other content options.

TIP: When using the Fullwidth Header on a page that’s not the home page, specifically a page that already has a page title at the top, in the Design tab of this module, make sure to change the Title to an H2 heading.

Fullwidth Image

Contains the following content capabilities:

• fullwidth Image-only

This is an image that takes up the fullwidth of the screen without any sort of text or other content options.

Fullwidth Map

Contains the following content capabilities:

• fullwidth Map-only

This is Google Map, pin optional, that takes up the fullwidth of the screen. It is often found as part of the footer, on contact pages, or in event templates.

TIP: In the Design tab of the module, under Controls, disable each option, as they can lead to difficulties scrolling when a map is fullwidth.

Fullwidth Menu

Contains the following content capabilities (all optional):

• Menu
• Logo
• Background

The Fullwidth Menu is often used in the global header of a site found under Divi –> Theme Builder. However, it can also be used to display submenus on pages.

TIP: In the Design tab of the module, for a basic menu layout with the logo on the left and menu on the right, under Menu Text, set to right justify, and under Sizing, set the Logo Max Width (somewhere around 300px).

TIP #2: the default for the menu background is a white background. You may have to change that to a transparent background.

Fullwidth Post Title

Contains the following content capabilities (all optional):

• Page/Post Title
• Meta
• Author
• Date (publish date)
• Comments (if applicable)
• Featured Image
• Background

The Fullwidth Post Title is often used at the top of pages and at the top of content templates. Rarely are the meta, author, date, comments, and featured image utilized except in the case of some post templates.

Fullwidth Slider

Contains the following content capabilities (all optional):

• Multiple slides
• Title
• Button (x1)
• Body
• Image or Video
• Background

Similar to the Fullwidth Header, the Fullwidth Slider section is most often used as the top header area on a page, usually on the home page. The Fullwidth Slider is very helpful if you’d like to manually create announcements.

TIP: If you like the content options and general look of the slider but do NOT need multiple slides, or if you think you might need multiple slides as an option in the future, use the Fullwidth Slider but with just one slide.

TIP #2: To automatically rotate the slides, go to the Design tab then Animation and enable Automatic Animation.

TIP #3: You can change the navigation arrow color and dot navigation in the Design tab.

TIP #4: When editing each individual slide, the Image sits in the foreground and is smaller, and the Background is the fullwidth part.