The Divi Fullwidth Slider Module | Scoreapps

The Divi Fullwidth Slider Module

How to add, configure and customize Divi full width slider module.


Divi Full Width Slider Modulecan show calls to impact action, highlight important content from your website such as a popular page or publication, and divide textual content for visually appealing design.

Full-width sliders can be placed anywhere on your page, support parallel-effect backgrounds (images and videos), and have fields for title, text and button.

How to add the Full Width Slider Module to your page

  • Add a new page or edit an existing one.

  • The standard Gutenberg editor is activated by default when creating a page or entry.

  • Click the purple button below the title. Use the Divi Builder.

  • When you click, the page will reload with the Visual Divi Builder.

Add a page and load the Visual Builder

  • Once you click, the page will be reloaded with the Divi Visual Builder.

    When you reload the page, you will notice three options:

    Build from scratch

    Choose a Predefined Design

    Build with AI

    Build from scratch
    This option loads the Divi Builder with a blank page layout. Choose this option if you want to start the layout of your page from scratch.

    Choose a Predefined Design
    This option allows you to choose from our extensive library of predefined Divi designs. You can choose between Designs predefined by Divi, the ones you have designed and saved in your Divi Library, and the existing pages on your website that you can clone.

    Build with AIThis option allows you to create a complete page layout using Divi IA. Using your input text and information about your website, you can create the perfect outline of the page, then build it and fill it with content and images, bringing everything to life in a very short time.

  • Divi Page Flow

    Add Divi Full Width Slider Module

  • To add the Full Width Slider Module, you must first add a full-width section.

    Click the + icon to add a section and

    Click the Full Width tab to add a full width section.

    Insert a Full Width Section
    Scroll to Full Width Slider and click to load the module.

Insert a fullwidth Section

  • Insert the Full Width Slider Module


Insert the Fullwidth Slider module

  • Explanation of All Divi Full Width Slider Module Options

  • Once added, module settings will appear automatically. This is where the content and design styles of this module are configured. These settings are organized into three groups through the tabs at the top of the module:

    • Content

    • Design

    • Advanced


All Divi Fullwidth Slider Module Options Explained

Tab Content

Here you define global slider styles and custom styles for each slide:
Divi Fullwidth Slider Module Content Tab settings

  • Add a slide: by default there are two. Click the + icon next to "Add new slide" and an editable slide will be created. Use the return arrow to return to the main module.

Divi Fullwidth Slider Module How To Add A Slide


Divi Fullwidth Slider Module return to the main Slider module

  • Elements:

    • Show arrows - turn navigation arrows on or off.

    • Show controls - turn lower navigation points on or off.

Divi Fullwidth Slider Module Elements settings

  • Module link:

    • Link URL - paste here the URL you want to link here so that the entire module is clickable.

    • Destination - choose whether to open in the same window or in a new tab.

Divi Fullwidth Slider Module Link settings


How to add a background color

  1. Click on the first tab, the Paint Bucket icon.
  2. Click Add background color and choose a color from your site's color palette, or use the dropper icon to find a new color.

Divi Fullwidth Slider Module Background Color settings

How to add a background gradient

  1. Click the second tab, the Graduate icon.
  2. Click Add background gradient.
    To change the gradient colors, click the downgraduate stop points and select a color from your site's color palette or use the dropper icon to choose a new color. Stop points allow more colors to be added to the gradient. Click anywhere in the slider bar to add a new stop point.

Gradient options
Gradient type - You can change the gradient type by clicking on the drop-down menu and selecting the desired one.

Gradient Direction - You can change the direction of the gradient by dragging the slider bar or writing a numeric value.

Repeat degraded - Activate this option to itself if you want the gradient to repeat.

Gradient unit - The degradation unit changes how the downgraduate stop points are calculated. Select the drop-down menu to change the drive.

Place gradient on the background image - If a background image is applied, you can place the gradient above the image by activating this option itself.

Divi Fullwidth Slider Module Background Gradient settings

How to add a background image

  1. Click the third tab, the Image icon.
  2. Click the gray + icon to open the Media Library, where you can select an already uploaded photo or upload a new one.

Background image options
Use Parallax effect - To apply a parallax effect to the image (where the image moves faster than the foreground content, giving the illusion of a 3D effect), activate this option. By default, it is disabled.

Background image size - Choose the size of your background image by selecting an option from the drop-down menu.

Background image position - Choose the position of the background image by selecting an option from the drop-down menu.

Background Image Repeat - Choose whether and how the background image is repeated by selecting an option from the drop-down menu.

Background Image Mix - Choose how the background image is mixed with other layers of the module by selecting an option from the drop-down menu.

Divi Fullwidth Slider Module Background Image settings

How to add a background video

  1. Click the fourth tab, the Video icon.
  2. Click the gray + icon to open the Media Library, where you can select an already uploaded video or upload a new one.

Background video options
Mp4 vs WebM - We recommend uploading both an mp4 version and a webm version of the video because not all browsers support WebM formats. Uploading both file types ensures that your video plays across all devices and browsers.

Background video width - Sets the width of the video by writing a numerical value.

Background video - Sets the height of the video by writing a numerical value.

Pause video when another video is played - If you want the background video to pause when another video is playing, turn on this option. By default, the video will be paused when it is not visible. If you want the video to continue, turn off this option.

Divi Fullwidth Slider Module Background Video settings

How to add a background pattern

  1. Click the fifth tab, the Pattern icon.
  2. Click Add background pattern.

Choose the type of pattern you want from the drop-down menu.

Background pattern options
Pattern Color - Select the color of the pattern from your site's color palette or use the dropper to choose a new color.

Transform pattern - Transform the pattern horizontally or vertically, rotate or invest it.

Pattern size - Here you can select the pattern size: real size, cover, adjust, stretch to fill or custom size. If you choose custom size, the options will appear: pattern width and pattern height. Drag the slider bar or type a numeric value to define it.

Pattern repeat source - Select the source from which the pattern is repeated.

Horizontal and vertical displacement of the pattern - Adjust the horizontal and vertical displacements of the pattern.

Pattern Repeat - Choose how the pattern is repeated, whether horizontal, vertical, and more.

Pattern mixing mode - Defines how the pattern layer interacts with the layers underneath it. Select one of the 16 mix modes available from the drop-down menu.

Divi Fullwidth Slider Module Background Pattern settings

How to add a background mask

  1. Click the sixth tab, the Mask icon.
  2. Click Add Background Mask.

Select the type of mask you want from the drop-down menu.

Background mask options
Mask Color - Choose the color of your site's color palette mask or use the dropper to choose a new color.

Transform mask - Transform the mask horizontally or vertically, rotate or invest it.

Mask aspect ratio - Sets the aspect ratio of the mask. The aspect ratio is the ratio between the width and height of an image.

Mask size - Select mask size: real size, cover, adjust, stretch to fill or custom size. If you choose custom size, the options will appear: width and height of the mask. Drag the slider bar or type a numeric value to define it.

Mask mixing mode - Defines how the mask layer interacts with the layers underneath it. Select one of the 16 mix modes available from the drop-down menu.


Divi Fullwidth Slider Module Background Mask settings

Administrative label

Define an internal name for the module that only you will see. By default the module name is used, but you can edit it.

Divi Fullwidth Slider Module Admin Label settings

Design tab

Here you apply visual styles:
Divi Fullwidth Slider Module Design Tab settings

  • Overlay:

    • Activate overlay on the background and select its color; you can make it transparent.

    • Activate text overlay and choose color.

    • Overlay edge radius: increases for rounded corners or 0 for squares.

Divi Fullwidth Slider Module Overlay settings

  • Navigation:

    • Arrow color: choose color.

    • Navigation point color: choose color.

Divi Fullwidth Slider Module Navigation settings

  • Image(if any):

    • Rounded corners with numerical value; unlink corners if you want independent values.

    • Edge styles: applies full edge or specific sides.

    • Minimum rim width 1 px, color and style (solid, discontinuous, dotted, etc.).

    • Box shadow: defines style, horizontal and vertical position, blur, expansion, color and whether internal or external.

    • Visual adjustments: nuance, saturation, brightness, contrast, reversing, sepia, opacity, blur and fusion mode (normal default).

Divi Fullwidth Slider Module Image settings

Text



This sets out the general text styles for this module; however, you can define specific styles for specific text types on other switches such asText of the TitleandText of the Corps.

Alignment of text- Choose the alignment of the text:

  • Left

  • Centrating

  • Right

  • Justificated

Text color- Select the default color palette of the text in this module: light or dark. Default light and dark color palettes can be configured in the Divi Theme Options.

Text shadow- Apply a shadow to the whole text within this module. When selecting a shadow type, it will apply to all content, both number and title.

Divi Fullwidth Slider Module Text settings

Text of title

These are the specific style and format settings only for the title text.

Text header level- Choose the level of the header assigned to the title text: h1, h2, h3, h4, h5 or h6.

Source of title- Choose the font you want to use for the title text. The default font is automatically selected; however, you can choose a different font or upload a custom font by clicking on the drop-down box.

Title source weight- Select the thickness of the title source.

Title font style- Choose the style of the title font:

  • Cursiva

  • Capital letters

  • Versalitas

  • Underlined

  • Crossed

Alignment of the title text- Choose the alignment of the text specifically for the title:

  • Left

  • Centrating

  • Right

  • Justificated

Title text color- Choose a specific color for the title text. Select from the color palette of your site or click the dropper icon to choose a new color.

Title text size- Choose the font size of the title by dragging the slider or writing a numeric value.

Spacing between title letters- Adjust the space between letters of the title by dragging the slider or writing a numerical value. The higher the number, the more space there will be.

Title line height- Define the space between lines of the title text. The higher the number, the more space there will be between lines.

Shadow of the title text- Add a shadow to the title text. Once a style is selected, you can set the direction (horizontal and vertical), blur intensity and shadow color.

Divi Fullwidth Slider Module Title Text settings

Text of the body

These are the specific style and format settings for body text.

Body source- Choose the font for the body text. The default font is automatically selected; however, you can choose a different font or load a custom font.

Body source weight- Click on the drop-down menu to select the font thickness.

Body font style- Choose the style of the body text:

  • Cursiva

  • Capital letters

  • Versalitas

  • Underlined

  • Crossed

Alignment of body text- Select how you want to align the body text:

  • Left

  • Centrating

  • Right

  • Justificated

Color of body text- Select a specific color for the body text. Use your site palette or dropper icon to choose a new one.

Body text size- Adjust the font size of the body with the slider or by entering a numerical value.

Spacing between body letters- Adjust the spacing between letters by dragging the slider or entering a numerical value.

Body line height- Adjust the space between body lines.

Shadow of body text- Adds a shadow to the body text. Once you select a style, you can adjust direction, intensity and color.

Divi Fullwidth Slider Module Body Text settings

Button

The buttons inherit the overall style; however, if you want to apply a custom style to the buttons in this module, you can do so here.

Use custom styles for the button- By default, buttons are designed globally from the Theme Customizer. To apply unique styles to this button, turn on this option.

Button text size- Adjust the size of the button text.

Color of button text- Select a specific color for the button text.

Button background- Stylize the bottom of the button. You can add a solid color, gradient, or image.

Button edge width- Define the thickness of the rim.

Button edge color- Choose the color of the edge.

Button edge radius- Define how rounded the corners of the button are.

Spacing between button letters- Adjust the spacing between letters of the button text.

Button source- Select the font from the text from the button.

Button font weight- Defines the thickness of the button text.

Button font style- Choose between italics, capital letters, underlined or crossed.

Show icon on the button- Activate this option to display an icon.

Button icon- Select the desired icon.

Button icon color- Choose the color of the icon.

Location of icon- Decide whether the icon appears to the left or right of the text.

Show only the icon when hovering the cursor- Turn this option on or off depending on whether you want the icon to be visible all the time or only when you hover your cursor.

Button alignment- Choose the line-up: left, centered or right.

Shadow of the button text- Adds a shadow to the button text.

Button margin- Add margin to the button.

Filling of the button- Add internal space within the button.

Shadow of the button- Add external or internal shadow to the button.

Divi Fullwidth Slider Module Button settings

Size

Width- Defines the width of the module.

Maximum width- Defines the maximum allowed width of the module.

Module alignment- If a maximum width or width is set, you can align the module:

  • Left

  • Centre

  • Right

Width of content- Defines the width of the content area within the slide.

Maximum content width- Defines the maximum width of content.

Minimum height- Defines the minimum height of the module.

Height- Set a specific height for the module.

Maximum height- Defines the maximum allowed height.

Divi Fullwidth Slider Module Sizing settings

Spacing

You can add margins or fill by entering numerical values.

  • Margin: space outside the module

  • Filling: space within the module

To maintain equal proportions, click the link icon between values (e.g. upper and lower).

Default margin values: 0

Default filling values:

  • Upper filling: 16%

  • Lower filling: 16%

  • Left filling: 8%

  • Right filling: 8%

Divi Fullwidth Slider Module Spacing settings

Edge

Add an edge to the module. You can apply it on all sides or individually.

Rounded corners- Enter a numerical value. The higher the value, the more rounded the corners will be.

Edge styles- Apply edge on all sides or individually.

Edge width- Adjust the edge thickness.

Edge color- Choose the desired color.

Edge style- Choose between solid, discontinuous, dotted, double, relief, slot, interior, exterior or none.

Divi Fullwidth Slider Module Border settings

Shadow of Box

Add a shadow to the entire module.

Horizontal position- Defines the horizontal location of the shadow.

Vertical position- Defines the vertical location of the shadow.

Blur- Controls the degree of shadow blur.

Extension- Controls the intensity or density of the shadow.

Color of shadow- Choose the color of the shadow.

Divi Fullwidth Slider Module Box Shadow settings

Filters

Adjust the filter in the module:

Tone - Defines the angle of the tone of a color.

Saturation - Defines how intense color saturation should be.

Brightness - Defines how bright the colors should be.

Contrast - Defines how marked clear and dark areas should be.

Reverse - Reverses tone, saturation and brightness according to the specified value.

Sepia - Defines a warmer appearance, with yellow/brown tones.

Opacity - Defines how transparent or opaque the background should be (color, gradient, image, etc.).

Blur - Defines the amount of Gaussian blur applied to the module.

Fusion Mode refers to how the module is mixed with the layers below. By default, you will be selected "normal".

Divi Fullwidth Slider Module Filters settings

Transformation

  1. Climbing
  2. Move
  3. Rotate
  4. Tilt

Points of origin

Press the tab key to access each option. Configure each option by entering numerical values or dragging and expanding the frame or circle.

You can block these values so that they are always identical by clicking the link icon at the bottom right.

Divi Fullwidth Slider Module Transform settings

Animation

Here you can apply an animation to the module. Once you choose a style, you can adjust the following options:

  • Duration of animation- Define the time it takes an animation to complete a cycle.

  • Delay in animation- Defines the time expected from the animation is applied to an item until it starts to run. Animation can begin later, immediately from the start or immediately in half of the animation.

  • Initial opacity of animation- Defines the initial opacity value.

  • Animation speed curve- Defines the method of transitioning animation. Gently transitioning animation at the beginning and end creates a smoother effect than a linear curve.

  • Repeat of animation- By default, animations are played only once. If you want the animation to be repeated continuously, choose the loop option here.

Divi Fullwidth Slider Module Animation settings

Advanced Tab

In the Advanced tab, you will find useful options for more experienced web designers, such as custom styles.

Here you can applyCustom CSS codeto your module. You can addclasses and CSS IDto the module, which can be useful for customizing styles using advanced CSS properties or for applying custom code using the CSS class of the module.

Divi Fullwidth Slider Module Advanced Tab settings

ID and CSS Classes

Assign a specific ID or CSS Class to this module. This is useful for applying custom CSS through your child theme's styles file.

Divi Fullwidth Slider Module CSS ID and Classes settings

Custom CSS

  • CSS freely- Write free CSS using the keyword selector to apply styles to this module. Example: selector h1 {color: network;}

  • Module elements- You can also apply custom CSS by pasting it into this tab. By clicking the Elements tab of the Module, you will see individual sections where you can add custom CSS properties.

Divi Fullwidth Slider Module Custom CSS settings

Attributes

This defines the link of the button link between the source you are linking to and the page from which you are linking.

Divi Fullwidth Slider Module Button Attributes settings

Conditions of Use

Display conditions allow you to choose when to display this module according to a set of conditions, as if a user is visiting the page, if they have already bought before, which browser they are using, which operating system they use, and more.

You can add a condition or multiple conditions.

Divi Fullwidth Slider Module Display Conditions settings

Visibility

This defines the visibility of the module. You can disable it (hide it) when the display window is a phone, tablet or desktop computer by ticking the appropriate box. You can also determine how you want overflowed content to be displayed if the content exceeds the item on which it is contained. You can choose between visible, scrolling, hidden or automatic for both horizontal and vertical content. By default, automatic is selected.

  • Show content on mobile- Turn this option on or off to display or hide content on mobile phones.

  • Show call to action on mobile- Turn this option on or off to show or hide the call-to-action button on mobile phones.

  • Display image/video on mobile- Turn this option on or off to display or hide the image or video on mobile phones.

  • Disable in- Defines the visibility of the module. You can hide it on your phone, tablet or desktop by ticking the appropriate box.

Horizontal overflow- Defines what is displayed when the content exceeds the left and right edges of a block item:

  • Visible- The content will be displayed if it exceeds height.

  • Displacement- If the contents of the module exceeds its height, a vertical scroll bar will appear.

  • Hidden- If the content exceeds its height, the surplus part will be hidden.

  • Automatic- The browser will decide whether to display a scroll bar.

Vertical overflow- Defines what is displayed when the content exceeds the upper and lower edges of a block element:

  • Visible

  • Displacement

  • Hidden

  • Automatic

Divi Fullwidth Slider Module Visibility settings

Transitions

Controls the duration, delay and speed curve of the animation when you hover your cursor.

  • Duration of transition- Defines the duration (in milliseconds) of the animation by passing the cursor.

  • Delay in transition- Defines the delay in the transition of animation by passing the cursor (in milliseconds).

  • Transition speed curve- Define the speed curve of the transition by passing the cursor.

Divi Fullwidth Slider Module Transition settings

Position

  • Position- Defines the position of the module:

    • Relative (default)- The module is positioned according to the normal flow of the document, and the scrolling values relate to itself.

    • Absolute- The module is removed from the normal flow and positioned with respect to its nearest container or the initial container.

    • Fixed- The module is positioned with respect to the browser window. Useful for creating sticky modules (sticky).

  • Vertical displacement- Defines the vertical position of the module.

  • Horizontal displacement- Defines the horizontal position of the module.

  • Index Z- Defines the order of the module in the page layout. A higher number overlaps the module over others.

Divi Fullwidth Slider Module Positions settings

Displacement effects

This section defines the behavior of the module when scrolling around the page. You can make the module sticky at the top, bottom or both, and decide whether to transform while the user moves.

You can also enable vertical movement, allowing you to adjust the speed of scrolling of the module without affecting the surrounding elements.

The option ofMotion triggerallows you to choose when the scrolling effect is triggered: when the top, middle or bottom of the element is visible.

Divi Fullwidth Slider Module Scroll Effects settings

How to Stylize Individual Full Width Slides

In Divi's full width slider module, you can apply global styles and also stylize each individual slide so that each has its own unique style.

The design and advanced settings are the same for individual slides as those in the module. Below are the unique options available for each slide.

First, click the gear icon to access the settings of an individual slide. To delete a slide, click the trash can icon. To rearrange a slide, drag and drop it.

How to Add and Style Individual Fullwidth Slides

Text

Here you can add and edit the text content of a slide.

  • Title- Write the slide title here. Leave it blank if you do not want a title to appear.

  • Button- Type the text of the button here. If you do not want a button to appear, leave it blank.

  • Corps- Write the body text here. Leave it blank if you do not want to display text.

Divi Fullwidth Slider Module Slide Text settings


Image and Video

Add an image or video to the slide.

  • Image- Click "Add image" to open the media library and select or upload a photo.

  • Video- Click "Add video" to open the media library and select or upload a video.

Divi Fullwidth Slider Module Slide Image and Video settings


Link

  • button link URL- Paste here the URL you want to apply to the button.

  • Destination of the button link- Defines whether the link opens in the same window or in a new tab:

    • In the same window

    • In a new tab

  • Module link URL- Paste the URL here to click on the entire module.

  • Purpose of the module link- Defines whether the link opens in the same window or in a new tab:

    • In the same window

    • In a new tab

Divi Fullwidth Slider Module Slide Link settings

Save your Design

Once you're done stylizing and setting up the module, click the green arrow at the bottom right of the module to save your layout. If you close the module without saving, the changes will be lost.

Save Page Design

To save the page layout, press CMD+S on Mac or CTRL+S on PC. You can also click the purple circular icon with three dots to expand the toolbar and then click the green "Save" button at the bottom right.

Exit the Visual Builder

Once all your changes are saved, click "Exit the Visual Builder" in the administrator's toolbar to exit.

    • Popular Articles

    • How to Create an App for Restaurants (with or without Delivery)

      Text Enter First Steps Once inside the platform, from the main dashboard you will find a series of icons on the left hand side menu. Just click on 'Apps'. Then click on 'Create App' and give it a name. Then you'll get to a screen where you choose the ...

    • APPS: Radio

      The function of Radio allows the addition of radio broadcast within its application. In addition to this function To add this function to your application go to step "Functions" and click on the icon "Radio": Once added you must name this new ...

    • APPS: Webhooks

      The advanced Webhooks feature lets you connect certain events that occur in your App by sending them to a URL called Webhook. You can use a free Webhooks service as Zapier to create automations that can help you with your App business. For example, ...

    • APPS: Audio & Music

      How to add this feature To add this feature to your application go to step "FUNCTIONS" and click on the " iconAudio": Then give this new section of the application a name. Then click on the + icon to add a new Playlist Then add a title and an image ...

    • QR Promotions

      This function would allow you to create discount coupons that would be unlocked by scanning a specific QR code. Once unlocked, the customer can use the discount whenever they want. The coupon would not appear in the application until the user has ...

    • Related Articles

    • The Divi Fullwidth Portfolio Module

      Cómo agregar, configurar y personalizar el módulo de portafolio de ancho completo de Divi. Cómo agregar el módulo Portfolio de ancho completo de Divi a tu página Antes de comenzar, necesitarás agregar algunos Proyectos a tu sitio web de WordPress. ...

    • The Divi Fullwidth Menu Module

      Cómo añadir, configurar y personalizar el módulo de menú de ancho completo de Divi <br> El módulo de menú de ancho completo de Divi te permite colocar un menú de navegación de ancho completo en cualquier parte de tu página. Puedes usar ...

    • The Divi Fullwidth Map Module

      Cómo agregar, configurar y personalizar el módulo de mapa de ancho completo de Divi. <br> El Módulo de Mapa a Ancho Completo de Divi facilita agregar un mapa interactivo de Google a tu sitio web. Es una excelente manera de mostrar dónde ...

    • The Divi Slider Module

      Cómo agregar, configurar y personalizar el módulo de deslizamiento de Divi <br> El Módulo Deslizante de Divi puede colocarse en cualquier parte de tu sitio web. Los deslizadores pueden ser grandes, pequeños, de ancho fijo o de ...

    • The Divi Fullwidth Header Module

      Cómo agregar, configurar y personalizar el módulo de encabezado de ancho completo de Divi. <br> El Módulo de Encabezado de Ancho Completo de Divi es versátil y puede usarse en todo el diseño de tu sitio web de muchas maneras. ...