Divi also allows you to placed 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!View A Live Demo Of This Module
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 browser width. Based on standard screen sizes we recommend that your images are at least 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.
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. Important Note: 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.
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. Important Note: 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. For more information for on .WEBM video visit:
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.