x
Bookmark

Divi – Full Width Modules

Video Tutorial

Script & Screenshots

In this video I’m going to go through the Full Width modules.

Starting with the Full Width code module. This is the same as the Code module for the regular width with the exception it is for a full width area. It is a blank canvas that allows you to add code to your page, such as plugin short codes or static HTML. If you would like to use a third party plugin, for example a third party slider plugin, you can simply place the plugin’s short code into a standard or full width code module to display the item unimpeded.

The Full width Header module makes it easy to add beautiful, colorful headers to the top of your pages or anywhere on your page. These modules can only be placed within any full width section. You can even use video as your backgrounds.

Here are some examples of full width headers.

The Full Width Image module makes it easy to add images anywhere on the page. All images come with 4 different animation styles that make browsing your website fun and engaging. Image modules can be placed in any column that you create, and their size will be adjusted to fit. You can use the full width size or the regular module width.

Here’s an example of a full width image.

The Full Width Maps module makes it easy to embed custom Google Maps anywhere on your page. You can even add unlimited pins to the map, and define a custom viewport starting location. The maps module also comes in a Normal Width format, so be sure to check that out as well.

This is an example of the Full Width Map module.

The Full Width Menu module lets you place a navigation menu anywhere on the page. This could be used to add a secondary menu down the page, or it could be used in conjunction with the Blank Page feature to move your main navigation down the page. For example, you could move your menu down below your first section to greet people with a large splash image. This essentially allow your header navigation to move around the page using the builder!

Here’s an example of a Full Width Menu module.

The Full Width Portfolio module works just like the normal Portfolio module, except that it displays your project in a beautiful full width fashion. It also comes with some unique new layouts: Grid & Carousel. The module works by displays a list of your most recent Projects, and can be used by designers and artists that want to display a gallery of their most recent work.

Here is an example of a Full Width Portfolio.

The Full Width Post Slider module makes it easy to add featured blog posts to the top of your page in a standard slider format. This module is a great compliment to the Blog module. You can use this full width module or the regular width module.

Here is an example of a Full Width Post Slider.

The Full Width Post Title Module displays the title of your current post, and optionally the post Featured Image and meta data in an elegant fashion. This allows you to create more unique looking posts when building your posts. You can use this full width version or the regular one the width of the content area.

Here is an example of a Full Width Post Title.

You can place sliders into full width sections, making your sliders span the entire width of the browser. Divi sliders support parallax backgrounds, as well as video backgrounds! You can choose to vertically center your slide image or have it rest on the bottom of your slide for a result just like this slide.