Divi Theme Readme

Follow the instructions below to install and configure your new theme

« Back to Documentation

The Slider Module

Module Overview

Sliders can be placed anywhere, spanning the full width of whatever column structure they are in. Divi sliders support parallax backgrounds, as well as video backgrounds!

View A Live Demo Of This Module

The Module Options

Arrows - Choose whether or not you would like to display left and right navigation arrows..

Controls - Choose whether or not you would like to display the circle buttons/slide indicators at the bottom of the slider.

Parallax Effect - Enabling this option will give your background images a fixed position as you scroll. Keep in mind that when this setting is enabled, your images will scale your images to the browser height.

Add New Slide - Begin by clicking ‘Add New Slide’ at the top of the options modal you will add your first Slide and will be brought to the Slide Settings.

Heading - Define the title text for your slider here.

Button Text - If you would like to display a button below your slider content enter the button text here. Leave this blank if you do not wish to display a button.

Button URL - If you display a button, insert a valid web URL in this field to define the destination link.

Background Image - If defined, this image will be used as the background for this module. To remove a background image, simply delete the URL from the settings field.

The height of a slide is determined by the amount of text content that you add. If you have multiple slides, the slider will take on the height of the tallest slide.

The width of your slider is determined by the column structure that you place you slider in. We recommend that your slider images are at least the width of the column that you placed them in. Column widths are defined below.

1 column: 1080 pixels
¾ column: 795 pixels
⅔ column: 700 pixels
½ column: 510 pixels
⅓ column: 320 pixels
¼ column: 225 pixels


Note that if you enable the parallax effect, we recommend that your images are at least the size of a standard screen size since your images will take on the width or height of the browser window (i.e. 1280px by 768px)

Background Color - If you would simply like to use a solid color background for your slide, use the color picker to define a background color.

Slide Image - If you add a slide image, it will appear to the left of your slide text on top of your slide background. If you do not specify a slide image you will be left with a centered, text only slide. Because the height of each slide is determined by the text, if your slide image is tall enough it will drop below the bottom of the slide, creating bottom aligned image. See an example of this on the third slide on this page.

Note the height of a slide with a slide image could be determined by a taller slide in the slider so make sure your slide image is tall enough to accommodate if you wish to have a bottom aligned image. For legibility reasons, slide images will only appear in sliders that are in ⅔ column, ¾ column, or 1 column widths. Also, slide images will not display on browser widths of less than 768 pixels. The widths of slide images are defined below. We recommend that your slide images are at least this wide.

1 column: 410 pixels
¾ column: 308 pixels
⅔ column: 260 pixels

Image Alt Text - Alternate text provides any necessary information if the image does not load, appear properly, or in any other situation where a user cannot view the image. It also allows the image to be read and recognized by search engines.

Text Color - If your Slide Background is dark, the Text Color should be set to ‘Light’. Visa versa, if the Slide Background is light, the Text Color should be set to ‘Dark’.

Background Video MP4 - All videos should be uploaded in both .MP4 .WEBM formats to ensure maximum compatibility in all browsers. Upload the .MP4 version here. Video backgrounds are disabled from mobile devices. Instead, your bkacground image will be used. For this reason, you should define both a background image and a background video to ensure best results. Important Note: In order for the Mp4 video format to work in all browsers, your server must have the correct MIME types designated. You can learn more about using .htaccess to define MIME types here. If you notice your videos are not playing in certain browsers, then this is likely the reason.

Background Video WEBM - All videos should be uploaded in both .MP4 .WEBM formats to ensure maximum compatibility in all browsers. Upload the .WEBM versions here. Video backgrounds are disabled from mobile devices. Instead, your bkacground image will be used. For this reason, you should define both a background image and a background video to ensure best results. Important Note: In order for the WEBM video format to work in all browsers, your server must have the correct MIME types designated. You can learn more about using .htaccess to define MIME types here. If you notice your videos are not playing in certain browsers, then this is likely the reason.

Background Video Width - In order for videos to be sized correctly, you must input the exact width (in pixels) of your video here.

Background Video Height - In order for videos to be sized correctly, you must input the exact height (in pixels) of your video here.

Content - Enter the body content of your slider here. Note that the amount of text you enter here will determine the height of your slides.

Saving And Editing - After pressing the Save button in the Slide Settings, you will be taken back to the module settings where you can add a new slide, delete/edit slides, and drag and drop to rearrange your existing slides.

Admin Label - By default, your slider module will appear with a label that reads ‘Slider’ in the builder. The Admin Label allows you to change this label for easy identification.

Join 243,989 Happy Customers And Get Access To Our Entire Collection Of 87 Beautiful Themes For The Price Of One

We offer a 30 Day Money Back Guarantee, so joining is risk-free!

Sign Up Today