Question 1

Divi Popup Extension

Accepted Answer

Divi Supreme's Popup extension opens a whole new world for Creating Popups in Divi. It makes it really easy while creating Popups of anykind. It's a whole new solution that works really nice with Divi.

This extension will extend the Visibility Option in all the Module setting that will allow you to use the Popup.

Currently, the available supported modules are listed below:

All Divi Default Modules
All Divi Supreme Pro Modules(Pro Version).

Before Using Divi Popups:

Before you start using the whole new solution of Popups make sure that It’s Enabled from the Plugin Settings. Go to Divi Supreme Pro > Enable Supreme Popup and the Click on the Save Changes Button.

Usage

To use Divi Popups Extension, go to any of the supported module’s (listed above) settings and navigate to the Advanced Tab Scroll to Visibility and look for Use Popup Switch.

Use Popup

This will enable or disable the Popup extension.

Popup Type:

This is where you can choose the Popup type.

Layout: You can choose this option to select a layout from Library to be shown in Popup.
iFrame: Using this Popup type you can load a web URL in the Popup.
Image: You can use this to show an image in the popup. You’ll be prompted to upload an image or select from Media Library..
Video: Using this Popup type you can show a video in the Popup just enter the URL of the video and you’re good to go..

Popup (Divi Library):

This is an interesting part where you can choose any Layout from your Library to show in Popup.

Trigger On:

This is where you can choose how to trigger the Popup.

Module Click: The Popup will be triggered when the whole module is clicked.
Button Click: If the module is Button the popup will only be triggered when exactly the button is clicked.
Image Click: If the module is an Image the popup will only be triggered when exactly the image is clicked.
Hyperlink Click: If there is any link in your text module then selecting the Hyperlink method will show the Popup when the link is clicked.
By ID: Select this Trigger Type to open the Popup from any element click If It has that ID.
By Class: Select this Trigger Type to open the Popup from any element click If It has that Class.
Page Load: If selected the Popup will be shown on Page Load
—–Timed Delay: Set the Duration for the Popup to show.
—–Cookie Expiry: Set the Expiry in days after then the Popup will be shown again.
—–Use Custom Cookie Expiry Date: Set your own Custom Expiry for the cookie.
Scroll: If selected the Popup will be shown only then when you’ll scroll to that module.
—–Timed Delay: Set the Duration for the Popup to show.
—–Cookie Expiry: Set the Expiry in days after then the Popup will be shown again.
—–Use Custom Cookie Expiry Date: Set your own Custom Expiry for the cookie.
Exit Intent: If selected the Popup will be shown when you’re about to leave the Browser Tab.

Close Popup Triggers:

This is where you can choose the way your popup should be closed.

Outside Popup: The Popup will close after clicking anywhere outside of the popup.
Close Button: A button will be shown to close the popup you can change the icon of the button and play with colors as well.

Use Auto Close Popup:

Enabling this option will let you close your popup after time you’ll enter in the field.

After Time Passed (in s): A button will be shown to close the popup you can change the icon of the button and play with colors as well. *

Entrance Animation In:

This is where you can choose the Entrance Animation of your Popup from 43+ Different Animations.

Exit Animation In:

This is where you can choose the Exit Animation of your Popup from 43+ Different Animations.

Popup Position:

This is where you can choose where on the screen the popup will show. There are 9 places you can select from:

Top Left
Top Center
Top Right
Center Left
Center
Center Right
Bottom Left
Bottom Center
Bottom Right

Popup Position Type:

Absolute: If selected the popup will be shown as simple content on page it will scroll with page scroll.
Fixed: If selected the popup will be fixed on screen it will stay on front even on page scroll. Very great for Cookie Notice.

Use Fullwidth:

Here you can enable this option to make the popup content to be shown on full screen.

Popup Max Width:

Here you can enable this option to make the popup content to be shown on full screen.

Show Overlay:

You can choose this option whether you want to use the background overlay or not

Overlay Background Color:

Here you can change the width of the slider.

Show Close Button:

Using this Switch you can Show or Hide the Close button to Close the Popup.

Close Button Placement:

Here you can change the Placement of the Close Button Inside or Outside.

Inside: This will show the Close Button inside of the Popup.
Outside: This will show the Close Button outside of the Popup.

Close Icon Font Size:

Here you can change the size of the close button.

Close Button Icon:

You can change the Icon of the Close button to your Desired one from the Whole Divi Icon Library.

Close Button Background Color:

Here you can change the Background Color of the Close Button Icon.

Close Button Icon Color:

Here you can change the Color of the Close Button Icon.

Some Tutorial/Helpful Links for you to get started with Divi Popup Extension:

How to create Popups using Divi Popup Extension - Complete look at all the Features

How to Create Beautiful Popup with Divi Supreme - A simple popup + Free Layout

10 Beautiful Popup Layouts to Get Started with Our Popup Extension

How to Open Popup from Menu Item Click

So we've been getting a lot of requests on this from Customers to open the Popup from the Menu Item. So Finally, there's a way to Open It from any Menu Item you wish.

Step 1: Go to Divi -> Theme Builder -> Edit Global Footer and here add an empty Text Module.

Step 2: Then Set up your Popup in this Module the way you wish. And make sure to change the Trigger type to "By Class" and then enter the class "open-popup" (You can add any class here).

Step 3: Now go to Appearance -> Menus and here click the "Screen Option" at the top and check the "CSS Classes" option.

Step 4: Now add that class to any Menu Item you wish to Open the Popup from.

Video Walkthrough:

Question 2

Divi Card Carousel Module

Accepted Answer

A creative and fully customizable Divi Carousel module to display a beautiful combination of texts, links, badge and image in a Carousel Slider. Control and customize almost everything in this powerful carousel module. It comes with image and video lightbox/popup for Image and Button and many more Carousel Settings. You can design an unlimited number of carousels with this module.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/Uq9D05ajrw/card-carousel-showcase-1-1024x465.png (card-carousel-showcase-1-1024x465.png)

Content Options

Adding Carousel Items

Click on + Add new Item to add your first Carousel. Clicking + Add new Item will open a completely new list of design settings (including Content, Design, Advanced) for your new Carousel.

See below for individual Carousel Item settings.

After you add your first Carousel, you will see a gray bar appear with the title of your Carousel shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the Carousel.

Carousel Settings

Carousel Effect

Choose a Carousel effect from 4 Different Effects and more to add soon.

Slide
Coverflow
Flip
Cube

Coverflow Effect settings

If you'll select Carousel Effect as Coverflow you'll see these options:

**Show Shadow **- Adds a shadow to next Carousel Images.
Coverflow rotate - Set the Rotate amount of the next images in the slide.
**Coverflow Depth **- Increase to show more items in the carousel with coverflow effect.

Carousel Direction

You can change the Carousel Content Direction from here, It can be either "Left to Right" or "Right to Left".

Centered Mode

If enabled, then the active slide will be centered, not always on the left side.

Slides to Show

Change the number of slides you want to show in the carousel. You can enable the responsive option to adjust it for different screen sizes.

Slides to Scroll

Change the number of slides you want to scroll when click on the arrow key to see the next slides.

Slides Speed

Adjust the speed of the slider when changing the slides.

Autoplay

You can enable this option to slide Carousel Items automatically.

Autoplay Change interval

Change the time interval for the slides to change after that time.

Pause on Hover

Enable this option if you want to stop the Autoplay when Hover over to Carousel.

Spacing

Add some spacing between carousel Items.

Infinite Looping

Enabling this option causes the carousel to loop. Means when you’ll click on the arrow to go to next slide it will then keep looping and shows all the item from first to end. Disabling this will show only the number of images and you can’t use the next arrow if slides are ended then you’ll have to use the previous arrow.

Equalize Card Heights

Equalize the carousel Items height. Carousel Card Items will be 100% in Height.

Show Arrow

Enable or Disable this option to show or hide the arrows.

Show Pagination

Enable or Disable this option to show or hide the pagination dots.

Disable Touch/Dragging

Use this option to disable touch/drag to slide the Carousel.

Use Grab Cursor

Enable or Disable this option to change the mouse icon to grab cursor icon.

Design Options

Layout & Alignment

Layout

Change the type of layout to Stacked or Inline.

Stacked will place the image on top and content on the bottom.
Inline will place the content Inline which means Image and content both in the same line.

Layout type Inline Settings

If you’ll select your layout type you will be able to see these options:

Width: Change the width of the image
Order Alignment: Change the alignment of the image to Left(Places the image on the left side of the content) or Right (Places the image on the right side of the content).
Horizontal Content Alignment - This option will let you align the content to Top, Center or Bottom, most helpful while using the inline layout type.

Image

Make changes to the image here.

Image Width

You can change the Image Width here.

Stretch Image

Enabling this option will stretch the img tag and set a maximum width for the image. This allows for more control over the image’s display, ensuring it fits well within the module’s layout while maintaining its aspect ratio.

Image Alignment

You can change the Image Alignment here to Left, Right or Center.

And you can make design changes to the image here. Here you can control the corner radius of the Image. Enable the link icon to control all four corners at once, or disable to define custom values for each. you can play around with adding borders and Box Shadow to the Image.

Badge

Change badge’s position color, background color and more here.

Position

Change the position of the badge anywhere on the Image.

Background Color

Change the background color of the badge to your desired one.

Padding

Add padding to the badge here to expand it more.

And you can play with the badge text by changing its font, size, color and weight and even add shadow to the badge text.

Add Rounded Corners, Border and Box Shadow to Badge

Here you can control the corner radius of the Image. Enable the link icon to control all four corners at once, or disable to define custom values for each. you can play around with adding borders and Box Shadow to the Image.

Arrow Element

This is the place where you can add custom styles to the arrow icons.

Arrow Position

Change the position of the arrow inside or outside of the carousel.

Mobile Arrow Position

Change the position of the arrow inside or outside of the carousel for Mobile only.

Use Arrow Custom position

Enable this option if you want to add both arrow icons to your custom position.

Use Custom Previous Arrow Icon

Enabling this option will let you use a custom icon for the Previous Arrow. You can browse many Icons from Divi Icon Library.

Use Custom Next Arrow Icon

Enabling this option will let you use a custom icon for the Next Arrow. You can browse many Icons from Divi Icon Library.

Arrow Size

Change the font size of the arrow.

Arrow Color

Change the color of the arrow.

Arrow Background Color

Change the background color of the arrow.

Arrow Rounded Corners

Add Rounded corners to the Arrow Icons.

Arrow Border and Box Shadow

Add Border and Shadow to the arrow Icons.

Pagination Element

Pagination Horizontal Placement

Change the horizontal position of the pagination dots.

Pagination Active Color

Change the color of the current pagination dot.

Pagination In-Active Color

Change the color of all the other pagination dots.

Other Titles, Subtitle, and Body Texts

And you can always play with the Title, Subtitle and Body text by changing its font, size, color and weight and even add shadow to the text by going to their design panels.

Button

Enable Use Custom Styles for the button to add custom stylings to the button. You can design the button same way you always design your Divi Buttons you can change button, font, size, weight and more and play with Margin and Padding and also you can add Corner Radius, Border and Box Shadow to the button.

Align Button Vertically

Enable this option, If you'd like to vertically align the button. This option will be shown If you've enabled the "Equal Height" option in the Carousel Settings Panel. You can align the button to Top, Center or Bottom from here.

Border

Card Corner Radius - Add Rounded corners to the single card item.

**Card Border **

Box Shadow

Add Shadow to the Single Card Item to make it look more natural.

Advanced Options

Use the advanced options to give your Card Carousel module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

Carousel Item Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/7xWNq8kJ4o/dsm-card-carousel-module-item-content-options.png (dsm-card-carousel-module-item-content-options.png)

Text

Title

Enter your title text here. You can take out the text if you don’t want the Title text.

Subtitle

Enter your subtitle text here. You can take out the text if you don’t want the subtitle text.

Content

Enter your description text here. You can take out the text if you don’t want the description text.

Image & Badge

Manage your Image and Badge text here.

Image

Add an image from your Library here.

Use Image as background

Enable this option to use the image as the background so you can play around with the position and Height of the image and even add hover animation to the image.

Image Height

Change the height of the image by sliding the slider.

Background Image animation

Add animation to the image from 4 different animations and to even add more in upcoming updates.

Animation Speed (in ms)

Change the Hover Background Image Speed from here in ms.

Open as Image Lightbox

Enable this option if you want to open the image in the lightbox when clicked. When you’ll enable this option you’ll then add an image from your library which will be opened in Lightbox.

Open as VideoLightbox

Enable this option if you want to show a video in an overlay. When you’ll enable this option you’ll then asked to put the URL of the video in field and module will do the rest.

Badge Text

Add text to the Badge here. You can take out the text if you don’t want the badge text. You can also add a link to the badge under the link panel.

Button

Button text

Add text to the button here you can always remove the text of the element which you don’t want.

Button URL

Add a URL to the button here.

Open as Image Lightbox

Enable this option if you want to open an image in the lightbox. When you’ll enable this option you’ll then add an image from your library which will be opened in Lightbox. And when you’ll click the button an image will be shown in Lightbox.

Open as Video Lightbox

Enable this option if you want to show a video in an overlay. Make sure you’ve added the video link to the Button URL field. And when you’ll click the button the video will be shown in Lightbox.

Item Design Options

Image

Image Overlay

Enable this switch if you want to add overlay color or icon or both to the image.

Overlay Color

Change the color of the overlay on the image to your own one.

Use Icon

You can enable this option if you want to show an icon in the overlay. And then can choose any icon from the Divi Icon Library and Change it’s color as well.

Image Rounded Corners, Border and Box Shadow

Here you can control the corner radius of the Image. Enable the link icon to control all four corners at once, or disable to define custom values for each. you can play around with adding borders and Box Shadow to the Image.

Badge

Change badge’s position color, background color and more here.

Position

Change the position of the badge anywhere on the Image.

Use Custom Position

Enabling this switch will let you position the badge on your own custom position on the image.

Background Color

Change the background color of the badge to your desired one.

Padding

Add padding to the badge here to expand it more.

And you can play with the badge text by changing its font, size, color and weight and even add shadow to the badge text.

Add Rounded Corners, Border and Box Shadow to Badge

Here you can control the corner radius of the Image. Enable the link icon to control all four corners at once, or disable to define custom values for each. you can play around with adding borders and Box Shadow to the Image.

Other Titles, Subtitle, and Body Texts

And you can always play with the Title, Subtitle and Body text by changing its font, size, color and weight and even add shadow to the text by going to their design panels.

Button

Enable Use Custom Styles for the button to add custom stylings to the button. You can design the button same way you always design your Divi Buttons you can change button, font, size, weight and more and play with Margin and Padding and also you can add Corner Radius, Border and Box Shadow to the button.

Advanced Options

Use the advanced options to give your Card Carousel module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

Question 3

Divi Supreme Advanced Tabs Module

Accepted Answer

The Layout might not show properly in the Divi Builder, Only on the front end It will be 100% accurate. This is something elegant themes will be improving in the near future for rendering divi library layout in visual builder.

The Supreme Advanced Tabs Module is the perfect module to create stunning High-Quality Tabs in Divi. The module features Beautiful Animations and a wide range of customization options & functionalities, allowing you to create tabs that perfectly match your website’s design.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/3Z1r5hXQ0k/2022-07-14%20at%2022.36.17.png (2022-07-14 at 22.36.17)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/GT7dV5KNl5/2022-06-06-at-11.07.48.png (2022-06-06-at-11.07.48 (2023).png)

Adding Tab Items

Click on + Add new Item to add your first Tab Item . Clicking + Add new Item will open a completely new list of design settings (including Content, Design, Advanced) for your new Tab Item.

See below for individual Tab Item settings.

After you add your first Tab Item, you will see a gray bar Tab Item near with the title of your Tab shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the Tab Item.

General

Layout

Here you can change the Layout type of the Tabs. You can change it to:

Horizontal
Vertical
Column

Position

Here you can change the Position of the Tabs, to Top/Bottom or Left/Right, depending upon the Layout you chose.

Trigger

Change the Trigger for Tabs to change, you can set it to "Click" or "Hover".

Show Arrow for Active Tab

Enable this option to show a cool arrow for Active Tab.

Content Animation

Here you can add Animation to the Content from many different Animations. It will apply the animation to the Wrapper.

Inner Content Animation

Here you can add Animation to the Inner Content from many different Animations. It will apply the animation to the Inner Content.

Tabs Alignment

Here you can change the Aligment of the Tabs to where it looks good to you.

Tabs Image/Icon Placement

This is where you can change the Tabs Image/Icon Placement to Left, Right or Top of the tab.

Enable Deeplink

Enabling this option will allow you to open a certain tab just from the URL, Simply enable the option and when you go to the page on frontend, and change to a different tab, you'll see the URL changes in the address bar of the browser. Simply copy and paste it anywhere, and the selected tab will be open by default.

Enable Image Lightbox

If you want to open the Content Image in the lightbox, enable this option.

Make Tabs Stick to Top

If you want your Tabs to be sticky on scroll (Helpful when you've long content in your tabs), simply enable this option. You'll then see the option to control the Top offset value.

Auto Scroll on Mobile

Enabling this option will automatically scroll to the tab content on Mobile If you've many tabs, making it easer for users to see content.

Design Options

Tabs Wrapper

Here you can add stylings to the Tabs Wrapper.

Width

Change the Width of the Tabs Wrapper here.

Margin

Here you can add Margin to the Tabs Wrapper.

Padding

Here you can add Padding to the Tabs Wrapper.

Background

Here you can add Background to the Tabs Wrapper.

Alignment

Change the Alignment of the Tabs Wrapper here.

Else you can customize the Tabs Wrapper by adding Border, Border Radius & Box Shadow etc.

Image & Icon

Here you can style the Image & Icon on the Tabs.

Image Width

If you've selected Image for Tab, then you can change Its width from here.

Icon Font Size

If It's an Icon, you can change its size here.

Icon Color

Change the Icon Color here for Normal State.

Active Icon Color

Change the Icon Color here for Active State.

Margin

Here you can add Margin to the Tabs Image or Icon.

Padding

Here you can add Padding to the Tabs Image or Icon.

Else you can customize the Tabs Image & Icon by adding Border, Border Radius & Box Shadow etc.

Content Image & Icon

Here you can customize the Image & Icon found in the Content area.

Margin

Here you can add Margin to the Content Image or Icon.

Padding

Here you can add Padding to the Content Image or Icon.

Icon Font Size

If you've selected Icon for Tab, you can change its size here.

Image Width

If It's the Image, then you can change Its width from here.

Else you can customize the Content Image & Icon by adding Border, Border Radius & Box Shadow etc.

Tabs

This is where you can style the Tabs, change active/inactive color and more.

Gap

Change the Gap between Tabs here.

Inactive Background

Here you can change the Background color of the Inactive tabs.

Active Background

Here you can change the Background color of the Active tab.

Inactive Color

Here you can change the Text color of the Inactive tabs.

Active Color

Here you can change the Text color of the Active tab.

Else you can customize the Tabs by changing its font, size, color and weight & even add Border, Border Radius & Box Shadow & Active Box Shadow. However you like.

Content

Here you can style the Content the way you like.

Background

Here you can change the Background color of the Content.

Margin

Here you can add Margin to the Content.

Padding

Here you can add Padding to the Content.

Else you can customize the Content area by changing its Title/Body font, size, color and weight & even add Border, Border Radius & Box Shadow to the Content.

Button

Enable Use Custom Styles for the button to add custom styling to the button. You can design the button same way you always design your Divi Buttons you can change button, font, size, weight and more and play with Margin and Padding and also you can add Corner Radius, Border and Box Shadow to the button.

Advanced Options

Use the advanced options to give your Advanced Tabs module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module's visibility on certain devices.

Advanced Tabs Item Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/K8cR4Erqla/2022-06-06-at-11.08.04.png (2022-06-06-at-11.08.04)

Tabs

Title

Here you can change the Title of the Tab.

Use Image/Icon

If you'd like to use Image/Icon for the Tab, you can enable this option and then you can choose whether to use Image or Icon.

Content

Here you can change the Content of this Tab Item.

Content Type

Here you can change the Content Type, you can choose from:

Content - Will give you options to add Image/Icon, Title, Body etc to the Content.
Divi Library - Will give you the option to choose a Layout from Divi Library for Content.

Below options will show up when using "Content" type.

Title

Change the Title of Content here.

Content

Add Body/Description in the Content here.

Use Image/Icon

If you'd like to use Image/Icon for the Content, you can enable this option and then you can choose whether to use Image or Icon.

Image/Icon Placement

Here you can change the Placement of Image/Icon to "Left" or "Top".

Button Text

If you'd like to add a Button, simply add in Button Text here.

Button URL

Change the Button URL here.

Button Link Target

Change the Button Link Target to either open in "Same Window" or in a "New Tab".

Advanced Tabs Item Design Options

Tabs Image & Icon

Here you can style the Image & Icon on the Tabs.

Image Width

If you've selected Image for Tab, then you can change Its width from here for this item.

Else you can customize this Tab Image & Icon by adding Border, Border Radius & Box Shadow etc.

Content Image & Icon

Here you can customize the Image & Icon found in the Content area for this item.

Margin

Here you can add Margin to the Content Image or Icon.

Padding

Here you can add Padding to the Content Image or Icon.

Else you can customize this Content Image & Icon by adding Border, Border Radius & Box Shadow etc.

Tabs

Here you can customize this Tab by changing its font, size, color and weight etc.

Content

Here you can customize this Tab Content by changing its font, size, color and weight etc.

Button

Enable Use Custom Styles for the button to add custom styling to this Item button. You can design the button same way you always design your Divi Buttons you can change button, font, size, weight and more and play with Margin and Padding and also you can add Corner Radius, Border and Box Shadow to the button.

Advanced Tabs Item Advanced Options

Use the advanced options to give your Advanced Tabs Item custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

Question 4

Divi Card Module

Accepted Answer

A creative Divi module to display a beautiful combination of texts, links, badge and image. With Image Hover Zoom animation, you can now impress your visitors even more.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/PnKfwIQFsH/card-module-showcase-1024x781.png (card-module-showcase-1024x781.png)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/y64GuOxCIl/dsm-card-carousel-content-option.png (dsm-card-carousel-content-option.png)

Text

Title

Enter your title text here. You can take out the text if you don’t want the Title text.

Subtitle

Enter your subtitle text here. You can take out the text if you don’t want the subtitle text.

Content

Enter your description text here. You can take out the text if you don’t want the description text.

Image & Badge

Manage your Image and Badge text here.

Image

Add an image from your Library here.

Use Image as background

Enable this option to use the image as the background so you can play around with the position and Height of the image and even add hover animation to the image.

Image Height

Change the height of the image by sliding the slider.

Background Image animation

Add animation to the image from 4 different animations and to even add more in upcoming updates.

Animation Speed (in ms)

Change the Hover Background Image Speed from here in ms.

Badge Text

Add text to the Badge here. You can take out the text if you don't want the badge text. You can also add a link to the badge under the link panel.

Icon

If you want to add an Icon to the Card you can do so here.

Use Icon

Enable this switch to enable the Use of Icon for the Card Module. Once you'll enable this you'll see so many Icons to choose from.

Button

Button text

Add text to the button here you can always remove the text of the element which you don’t want.

Button URL

Add a URL to the button here.

Design Options

Layout & Alignment

Layout

Change the type of layout to Stacked or Inline.

Stacked will place the image on top and content on the bottom.
Inline will place the content Inline which means Image and content both in the same line.
Layout type Inline Settings - If you’ll select this layout type you will be able to see these options:

Width: Change the width of the image
Horizontal Content Alignment - This option will let you align the content to Top, Center or Bottom, most helpful while using the inline layout type.

Use Equal Height

Enable this option to make all the Cards match the heights, make sure to enable "Equalize Column Heights" in Row settings as well. See at the very for more details.

Image Height

You can control the height of the Image Wrapper here (not the actual image). For this option to work, make sure "Use Image as Background" is disabled in Content Tab -> Image & Badge.

Image Vertical Alignment

Here you can control vertical alignment of the Image, Top, Bottom and Center.

Image

Make changes to the image here.

Image Width

You can change the Image Width here.

Image Alignment

You can change the Image Alignment here to Left, Right or Center.

Stretch Image

Enabling this option will stretch the img tag and set a maximum width for the image. This allows for more control over the image’s display, ensuring it fits well within the module’s layout while maintaining its aspect ratio.

Image Overlay

Enable this switch if you want to add overlay color or icon or both to the image.

Overlay Color

Change the color of the overlay on the image to your own one.

Use Icon

You can enable this option if you want to show an icon in the overlay. And then can choose any icon from the Divi Icon Library and Change it’s color as well.

Image Rounded Corners, Border and Box Shadow

Here you can control the corner radius of the Image. Enable the link icon to control all four corners at once, or disable to define custom values for each. you can play around with adding borders and Box Shadow to the Image.

Badge

Change badge’s position color, background color and more here.

Position

Change the position of the badge anywhere on the Image.

Use Custom Position

Enabling this switch will let you position the badge on your own custom position on the image.

Background Color

Change the background color of the badge to your desired one.

Padding

Add padding to the badge here to expand it more.

And you can play with the badge text by changing its font, size, color and weight and even add shadow to the badge text.

Add Rounded Corners, Border and Box Shadow to Badge

Here you can control the corner radius of the Image. Enable the link icon to control all four corners at once, or disable to define custom values for each. you can play around with adding borders and Box Shadow to the Image.

Other Titles, Subtitle, and Body Texts

And you can always play with the Title, Subtitle and Body text by changing its font, size, color and weight and even add shadow to the text by going to their design panels.

Button

Enable Use Custom Styles for button to add custom stylings to the button. You can design the button same way you always design your Divi Buttons you can change button, font, size, weight and more and play with Margin and Padding and also you can add Corner Radius, Border and Box Shadow to the button.

Advanced Options

Use the advanced options to give your Card module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

How to Equalize Card Heights

If you want to equalize card heights to the other cards in the Row, you can easily do that by going to Row settings -> Design tab -> Sizing -> and enable "Equalize Column Heights". This will equalize the Card Heights in that row.

How to Equalize Card Heights

In some cases, you'd like to have multiple cards in a row to be equal of height no matter the length of content, we've made that easy for you.

You'll need:

Enable "Equalize Column Heights" Options in Row settings.
Enable "Use Equal Height" in Card Module for each Card.

Here's a video for better understanding:

How to align buttons to the bottom

In many cases, when you've equal height cards, you'll want that buttons should be at the bottom. For that, you need to make sure that the "Equalize Column Heights" Option is enabled in the Row settings and then add the below CSS anywhere, For Example, Divi -> Theme Options -> Custom CSS box or in Page settings -> Custom CSS.

Question 5

Divi Supreme Filterable Gallery Module

Accepted Answer

With Divi Supreme Filterable Gallery Module, you can easily create Beautiful Filterable Galleries in Divi. This module is packed with features and options that allow you to create amazing galleries without having to code. You can also quickly and easily filter your Images by Categories assigned to the image.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/knTxJZPogA/2022-10-23%20at%2019.07.49.gif (2022-10-23 at 19.07.49)

Creating New Categories for Filters

To Create new categories for Filters, go to Dashboard -> Media -> Categories and here you can create new categories and also edit the categories you previously created.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/Sc4gKh8yUa/2024-03-14%20at%2019.21.09.png (2024-03-14 at 19.21.09)

Assigning Categories to Images

We have made this super easy in the latest update to assign categories to Images. We have added a new Category select option with search feature allowing you to easily add the correct category to the image.

To add a category/categories to an image, simply open that image in the Media Library and on the right sidebar you'll be able to assign your desired categories.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/qcksUu8LGN/2024-03-14%20at%2019.29.21.png (2024-03-14 at 19.29.21)

You can assign categories to an image while in Divi Builder as well, simply click the + Icon in the Filterable Gallery Module settings to add a new Image from the Media Library and then on the right sidebar you can assign your categories.

Content Options

General

Use Dynamic Images

Images

You can also manually upload your images here as many as you want. The main advantage of this is that you can rearrange the images however you like simply with drag & drop.

Number of Columns

Here you can choose the Number of Columns for Images.

Image Size

You can change the Image Size from here from different presets.

Column Gap

Here you can increase/decrease the Column gap between images.

Row Gap

Here you can increase/decrease the Row gap between images.

Speed

Here you can control the Speed when Filtering Images.

Layout

Here you can select the Layout, either "Card" or "Overlay".

*When using "Overlay", you'll see below options:

Image Height

Here you can change the Height of the Image manually.

Hover

Change the Hover style here, you can select "Fade In" or "Zoom" or "None".

Hover Transition

Change the Transition period of the Hover Effect here.

Elements

Enable Filterable Gallery

Enable/Disable If you want to have Filters at the top.

Show All Images Text

If you want to show the "All" tab, where all the images will be displayed, you can enable this option.

--All Images Text

You can also set a custom Text for "All" tab.

Show Title

Enable this option If you'd like to show Image Title in the Gallery, you can assign this Title in the Media Library for each image.

Show Caption

Enable this option If you'd like to show Image Caption in the Gallery, you can assign this Caption in the Media Library for each image.

Show Description

Enable this option If you'd like to show Image Description in the Gallery, you can assign this Description in the Media Library for each image.

Use Lightbox

You can enable this option If you'd like to show Gallery images in the Lightbox.

Show Pagination

If you got many images and want to pagination so the user won't have to scroll much, you can enable this option. You can change the Type of Pagination in the "Pagination" panel.

Configuration

Items Per Page

Here you can set how many images you'd like to show per page.

Pagination

Pagination Type

Here you can change the Pagination type to either "Load More" button or "Numbered Pagination".

Design Options

Title

Here you can customize the Title font, size, color and weight etc.

Caption

This is where you can customize the Content Caption by changing its font, size, color and weight etc.

Description

This is where you can customize the Content Description by changing its font, size, color and weight etc.

Card

There is where you can customize the Layout when using "Card" type.

Background Color

Here you can change the Background color of the Card.

Padding

Here you can add padding to the Card.

Else you can customize the Card by adding Border, Border Radius & Box Shadow etc.

Image

Margin

Here you can add Margin to the Image

Padding

Here you can add Padding to the Image.

Else you can customize the Image by adding Border, Border Radius & Box Shadow etc.

Content Wrapper

Margin

Here you can add Margin to the Content Wrapper.

Padding

Here you can add Padding to the Content Wrapper.

Else you can customize the Content Wrapper by adding Border, Border Radius & Box Shadow etc.

Overlay

Background Color

Here you can change the Background Color of the Overlay that shows on hover when using "Overlay" type.

Padding

Here you can add Padding to the Overlay.

Category Tab

Alignment

Here you can change the Alignment of the Category Tabs.

Inactive BG Color

Here you can change the Background color for Tabs for "normal" state.

Active BG Color

Here you can change the Background color for Tabs for "Active" state.

Inactive Color

Here you can change the Text color for Tabs for normal state.

Active Color

Here you can change the Text color for Tabs for normal state.

Margin

Here you can add Margin to the Category Tabs.

Padding

Here you can add Padding to the Category Tabs.

Else you can customize the Tabs by changing Font Size, color, weight and even adding Border, Border Radius & Box Shadow etc for "Normal" & "Active" state.

Pagination

Here you can customize the Numbered Pagination.

Inactive BG Color

Here you can change the Background color for Pagination for "normal" state.

Active BG Color

Here you can change the Background color for Pagination for "Active" state.

Inactive Color

Here you can change the Text color for Pagination for normal state.

Active Color

Here you can change the Text color for Pagination for normal state.

Margin

Here you can add Margin to the Pagination.

Padding

Here you can add Padding to the Pagination.

Alignment

Here you can change the Alignment of the Pagination.

Else you can customize the Pagination by changing Font Size, color, weight and even adding Border, Border Radius & Box Shadow etc for "Normal" & "Active" state.

Load More

Here you can customize the Load more button.

Background Color

Change the Background color of the Load more button here.

Margin

Here you can add Margin to the Load More button.

Padding

Here you can add Padding to the Load More button.

Else you can customize the Load More by changing Font Size, color, weight and even adding Border, Border Radius & Box Shadow etc.

Advanced Options

Use the advanced options to give your Step Flow module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module's visibility on certain devices.

How to add URL to each Image in the Gallery?

If you want to add a URL to each Image in the gallery, you can do that easily. All you've to do is open up that Image in the Media Library and add the Custom URL to it there. So when a user will click on the Image they’ll be taken to that URL that you added to Image. It will only work within Divi Supreme Modules.

Question 6

Divi Typing Effect Module

Accepted Answer

Add a nice and cool typing effect to your website using the Typing Effect for Divi. Write the text that you want to show and it will appear letter by letter like if you were typing with an old typewriter. This module automatically types out sentences and then deletes them to type the following sentence. You can configure settings such as how quickly the typing effect and backspacing takes place, then delays before starting a sentence with just a few clicks, set the animation to loop infinitely or randomise the order of the sentences.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/jiAFDTf7Bo/showcase-4.gif (showcase-4.gif)

Content Options

Text

Before Text

This will add a static text before the typing effect. Only available in the Pro version.

Typing Effect Text

This will have an animated typing effect on your Title. To seperate the words in typing effect, you will need to add “|” e.g text1|word|animating

Typing Text on a new Line

Enable this option If you'd like to have the Typing text on a new line.

After Text

This will add a static text after the typing effect. Only available in the Pro version.

After Text on a new Line

Enable this option If you'd like to have the After text on a new line.

Typing Effect

This is where you can configure the typing settings such as how quickly the typing effect and backspacing takes place, then delays before starting a sentence with just a few clicks, set the animation to loop infinitely or randomise the order of the sentences.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/QpJWGElmVA/dsm-typing-effect-517x1024.png (dsm-typing-effect-517x1024.png)

Use Loop

If enabled, typing effect will loop infinite.

Remove Cursor After Completed

This option will show up only when you disable ‘Use Loop’. This will remove the cursor after typing finish looping their effect.

Typing Speed (in ms)

Here you can control the speed of the typing effect. Lesser value will have faster typing effect.

Typing Backspacing (in ms)

Delay before backspacing.

Back Delay (in ms)

Here you can delay before backspacing.

Use Typing FadeOut

This will have fade out animation instead of backspacing.

Use Typing Shuffle

Here you can choose to shuffle your Typing Effect text strings.

Cursor Character

You can have your own custom Cursor Character here. The character is “|” by default. You can put in any characters, letters or numbers.

Animate in Viewport

Choose when you'd like to start the Typing effect when it comes to Viewport e.g 50% or 80% etc

Repeat Animation in Viewport

Enable this option to repeat the Typing effect when it comes to Viewport again.

Admin Label

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

Design Options

Here you can find the option to style the Before Text, Typing Effect and the After text. You can style and/or position your text just how you want it by choosing the text color, orientation, font, font size, font spacing, and line height.

You can also designate a border style, set a max width for your module, and add custom margin and padding.

Before Text

Background Color

If you like to have a Background color to the text which is showing Before the Typing text then specify it here.

Padding

Add Some padding around the Before Text. Useful If you've added Background color to the Typing text.

And else you can play around with changing the Font, Size, Color, Wieght and more of the Before Text

After Text

Background Color

If you like to have a Background color to the text which is showing After the Typing text then specify it here.

Padding

Add Some padding around the After Text. Useful If you've added Background color to the Typing text.

And else you can play around with changing the Font, Size, Color, Wieght and more of the After Text

Typing Styles

Cursor Color

By default, the cursor color in typing effect will appear the same as your title font color. If you would like to change the color of your cursor color, choose your desired color from the color picker using this option.

Background Color

If you like to have a Background color to the text which is Typing then specify it here.

Padding

Add Some padding around the Typing Text. Useful If you've added Background color to the Typing text.

Advanced Options

Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

Question 7

Divi Flipbox Module

Accepted Answer

With over 15 effects to choose from, you can now create stunning interactive content that converts.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/IbfuY8lsfa/showcase.gif (showcase.gif)

Content Options

+ Flipbox Item

This is where you add content, images and icon to your Flipbox Module. Just like a Blurb Module but with Front and Back Animation to show the front and back of an element when you hover. Clicking “add new item” will open a completely new list of design settings (including Content, Design, Advanced) for your new Flipbox. See below for individual Flipbox settings.

After you add your first image, you will see a gray bar appear with the title of your Flipbox shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the image.

Note: Create only two items because one is identify as Front and the other as Back.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/3Z6sx0WARQ/flipbox-1-693x1024.png (flipbox-1-693x1024.png)

Design Options

Sizing

--Height

By default, the flipbox is set at 200px. You can set to other height to suit the content of your flipbox. This is one of the most important part when using flipbox. If you content is too long and doesn’t look right. Adjust your height.

Animation

This is where you can change the flipbox animation effect.

Trigger Animation On

Choose a trigger animation for the Flipbox here. You can either select "Hover" or "Click". When you'll select Click the Flipbox will flip on Click instead of on hover.

Click On

This option will appear once you'll select the Trigger method as "Click". And from here you can choose If you want to flip the Flipbox on Whole Flipbox click or Button click.

Flipbox Type

There are 5 types of Flipbox Effect to choose from.

Flip Animation

There are 4 types of Flip Effect to choose from. "Flip Left" "Flip Right" "Flip Up" "Flip Down"

3D Effect

This option will only show up when you choose Flipbox Effect as Flip And this will create a 3D effect to your Flipbox.

Slide Animation

This option will only show up when you choose Flipbox Effect as Slide

There are 4 types of Slide Effect to choose from. "Slide Left", "Slide Right", "Slide Up" and "Slide Down".

Zoom In Animation

This will have a zoom in animation on your flipbox.

Zoom Out Animation

This option will only show up when you choose Flipbox Effect as Zoom Out

There are 5 types of Zoom Out Effect to choose from. Zoom Out Zoom Out Up Zoom Out Down Zoom Out Left * Zoom Out Right

Animation Speed (in s)

This will control the speed animation of the flipbox.

Advanced Options

Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

Flipbox Item Content

Title

Give a title to your Flipbox that will appear above the body text of the Flipbox in a bold text style.

Sub Title

If you would like to use a sub title, add it here. Your sub title will appear below your title in a small font.

Content

This field is where you can enter the body content of your Flipbox. Flipbox Text will also span the full width of your column.

Use Icon

When using Flipbox, you can choose to either use an Icon or and Image with your text. If you select “yes” for the “Use Icon” option, then you will be presented with the following options to customize your icon. If you do not choose to use an Icon, then you will be prompted to upload an image instead.

Icon

If you chose “yes” for the “Use Icon” setting, then this option will appear. This options presents you with a list of available icons that you can use with your Perky Animate text. Simply click on the con that you would like to use and it will appear in your Flipbox.

Image

If you did not choose to use an Icon, then this setting will appear. Place a valid image url here, or choose/upload an image via the WordPress Media Library. However, your image will never scale larger than its original upload size. The height of the Flipbox image is determined by the aspect ratio of your original image, so making all of your Flipbox images the same height is a good idea if you are placing them side by side.

Button

Button Text

Input your desired button text.

Button URL

Input the destination URL for your button.

URL Opens

Here you can choose whether or not your link opens in a new window.

Flipbox Item Design Options

Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

Image & Icon

Icon Color

If you chose “yes” for the “Use Icon” setting, then this option will appear. This option allows you to customize the color of your Icon. By default, the icons are set to your theme accent color.

Circle Icon

If you chose “yes” for the “Use Icon” setting, then this option will appear. This options allows you to place your icon within a colored circle. If you select “yes” for this setting, then you will be presented with additional options for customizing your circle color and border.

Circle Color

If you chose “yes” for the “Circle Icon” setting, then this option will appear. Here you can pick a color to use for your circle. This color is independent from your Icon color selected earlier. You icon, in it’s color, will appear inside this a circle with the color you select here.

Show Circle Border

If you chose “yes” for the “Circle Icon” setting, then this option will appear. This option allows you to turn on a border for your circle. If selected, an additional option will appear to select your border color.

Circle Border Color

If you chose “yes” for the “Show Circle Border” setting, then this option will appear. Here you can adjust the color of the circle border.

Use Icon Font Size

If enabled, you can input a custom size for the icon that is displayed.

Sizing

Here you can change the width of the image.

Width

Applying a max width value here will limit the width of the Flipbox image. This only affects Flipbox that are not in icon mode.

Spacing

Custom Padding

Padding is the space added inside of your flipbox item, between the edge of the file and its internal elements. You can add custom padding values to any of the flipbox item’s four sides. To remove custom margin, delete the added value from the input field. By default these values are measured in pixels, but you can input custom units of measurement into the input fields.

Flipbox Item Advanced Options

Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

Question 8

Divi Menu Module

Accepted Answer

Display your WordPress menu and design it in whatever way you want. Use it for Footer or Sidebar.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/kHUh9yrPUD/footer-1024x427.png (footer-1024x427.png)

Content Options

Menu Title

This field is where you can enter the title of your menu.

Menu

Select a menu that should be used in the module. You can create new menus using the Appearances > Menus page in your WordPress Dashboard. Each time you create a new menu, the menu will be selectable in this dropdown menu.

Collapse Sub Menu

Enable this Option If you'd like to collapse the Sub Menu and that will reveal when you click on the Parent Menu Item.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/pPt7En8bRB/dsm-menu-711x1024.png (dsm-menu-711x1024.png)

An example how we use the menu module with the Footer Template to design our Footer

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/kHUh9yrPUD/footer-1024x427.png (footer-1024x427.png)

Admin Label

This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface.

Design Options

Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

Layout

Menu Layout

Currently the available Menu Layout is vertical.

Title

Here you can style the Title text of the Menu Module

Bottom Gap

Add some spacing under the Title text of the Module.

And you can then change the color, font, weight and more of the Title text.

Sub Menu

If there's a sub menu in the Menu you've added, then you can style those submenus here.

Left Spacing

Add some spacing on Left of of the Sub Menu Item(s).

And then you play around with changing Font, size, weight and more of the Sub Menu Items.

Sub Menu Collapse

From here you'll be able to style the Sub Menu Collapse Icon easily.

Arrow Color

Here you'll be able to change the Icon color.

Arrow Background Color

You can change the Arrow Background color from here.

Arrow Gap

Change the Arrow gap between the Menu Item and Arrow Icon.

Arrow Padding

You can add Padding to the Icon from here, Useful If you've added Background to the Icon.

Arrow Font Size

You can change the Icon font size from here.

Arrow Border, Border Radius and Box Shadow

And else you can add border radius, boc shadow and Border to the Icon easily.

Animation

Use Link Hover Animation

Enable this option to add a Hover animation to Menu Items.

Animation Type

Change the Type of the animation of the Animation here. Currently there's only Underline available we'll be adding more in upcoming updates.

Underline Animation

Here you can change the direction of the Underline Animation. You can change the direction of the Underline from 3 different types:

Left to Right
Right to Left
Center Out

Link Color

Change the color of the Underline here.

Advanced Options

Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

Question 9

Divi Custom Attributes

Accepted Answer

What are HTML Attributes

You need HTML attributes to store various information associated with different pages elements, this information might not be essential for readers, but many JavaScript libraries and bots depends on it to run correctly. Many of them allow you to tweak their behavior by defining custom data attributes with given values.

You'll learn more on how to use these Attributes here: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

Now you can easily add Custom HTML Attributes in Divi with Divi Supreme's Custom Attributes Extension. With Custom Attributes extension, you can add attributes to the Wrapper of the Section/Row/Column/Module or Button.

Before Using

To use the Divi Supreme Custom Attributes Extension, you must first enable it from Divi Supreme Settings.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/yplEX7R6gU/2021-12-20%20at%2017.32.37.png (2021-12-20 at 17.32.37 (2022).png)

How to use Custom Attributes

You can find the Custom Attributes Settings by going in Settings Modal -> Advanced Tab -> Custom Attributes.

Go to any Section/Row/Column/Module settings -> Advanced tab -> Custom Attributes and enable "Use Custom Attributes".
Then you can choose whether you'd like to add the Attribute to the Wrapper or a Button in that Wrapper.
Then you can add a Title/Label to your Attribute and click the check-mark to enable the Attribute.
To add your attribute click the "Link" Icon.
Now, you'll see a Popup where you can add your Attribute Name and Value.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/k7cer8P636/2021-12-20%20at%2017.51.45.png (2021-12-20 at 17.51.45.png)

This is how the Attribute should look like on Frontend.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/rleCG7Qp0h/2021-12-21%20at%2009.56.29%20%281%29.png (2021-12-21 at 09.56.29 (1).png)

And that's it, if you want to add more Attributes, simply click the + Icon and you'll be able to add as many Attributes as you wish.

You'll learn more about Attributes References here: https://www.tutorialspoint.com/html5/html5_attributes.htm

Video Guide on How to add Attributes

Question 10

Divi Supreme Pro License

Accepted Answer

License

Important: If you've purchased from Divi Marketplace, you don't need an account on our site because you'll get updates automatically without adding a License key. The Divi Marketplace plugins are linked to your ElegantThemes account. That's the only difference between our version and the Marketplace version and the 30% off renewal through our website.>

Getting License Key

You can obtain your license key by logging in to Your Account -> Orders -> License Manager. You will also receive an email regarding the license key for your Divi Supreme Pro.

License Activation

Right after installing the plugin, you will see a notification “Divi Supreme Pro: Please enter your license key to get regular update”. The license activation is only required to receive automatic updates.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/Zq7ywr54C0/license-activate-1536x740.png (license-activate-1536x740.png)

Deactivate License

You can either login to Your Account -> Orders -> License Manager and deactivate from there or simply just login to your WordPress site and from the admin menu, navigate to Divi Supreme Pro -> License.

Check License Key Expiry

Login to YourAccount -> Orders -> License Manager and from there you will able to see your license expiry date.

Renew License Key

Login to Your Account -> Orders -> License Manager/View and from there you will able to see a renew button.

Generating a new License Key

Step 1.

Go to your Divi Supreme Account Page -> License Manage and here choose the Product and click on "License Manage" button next to that Product.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/mLTx29Po30/2024-08-05%20at%2023.25.43.png (2024-08-05 at 23.25.43)

Step 2.

Then under the "Key Generator" simply click the "Generate License Key" button to generate a new license key.

Question 11

Divi Image Carousel Module

Accepted Answer

The easy way to create a beautiful image carousel using Divi Supreme Image Carousel Module. The image carousel module is perfect for showcasing a set of images, your portfolio pieces, client logos and much more.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/5yMFBHsiQW/showcase-5-1024x364.png (showcase-5-1024x364.png)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/QvMi00dlvf/dsm-image-carousel-module.png (dsm-image-carousel-module.png)

Image Carousel

+Add Gallery Images

Choose multiple images from your Media Library here.

Order by

You can change the order of the images to default(show images the way you selected) or Random(Shows images randomly)

Image Size

Change the size of all the images here.

Carousel Settings

Carousel Effect

Here you can change Carousel Slide Effect from 4 different effects.

Slide
Coverflow
Flip
Cube

Coverflow Effect settings

If you'll select Carousel Effect as Coverflow you'll see these options:

Show Shadow - Adds a shadow to next Carousel Images.
Coverflow rotate - Set the Rotate amount of the next images in the slide.
**Coverflow Depth **- Increase to show more items in the carousel with coverflow effect.

Carousel Direction

You can change the Carousel Content Direction from here, It can be either "Left to Right" or "Right to Left".

Centered Mode

This mode will show the next image in the carousel centered means half of the image will be appearing which tells there are more items to see.

Slides to Show

Here you can change the number of images to show in one slide.

Slides to Scroll

Here you can change the number of slides to scroll when click on the arrow button to see the next items.

Slider Speed

Here you can change the speed for sliding the slider.

Use Multiple Row

You can enable this option If you want to show multiple rows of Images, lets say you enter 2 in the "Row Per Slide" field and then you'll see two Rows of Images, a new one below the first one and It will work the same way. You can change the "Row Per Slide" value to whatever you like.

Autoplay

You can enable this option to slide images automatically.

Autoplay Change interval

Change the time interval for the slides to change after that time.

Spacing

Add some spacing between carousel images.

Infinite Looping

Enabling this option causes the carousel to loop. Means when you’ll click on the arrow to go to next slide it will then keep looping and shows all the item from first to end. Disabling this will show only the number of images and you can’t use the next arrow if slides are ended then you’ll have to use the previous arrow.

Show Arrow

Enable or Disable this option to show or hide the arrows.

Show Pagination

Enable or Disable this option to show or hide the pagination dots.

Disable Touch/Dragging

Use this option to disable touch/drag to slide the Carousel.

Use Grab Cursor

Enable or Disable this option to make the mouse icon to grab cursor icon.

Lightbox

Open Image in Lightbox

Enable or Disable this option to open the images in the lightbox when click on a single image. Enabling this option will reveal some more options too.

Image Size

Here you can change the Size of the Image when opened in Lightbox.

Lightbox in Gallery Mode

Enable this option If you want a gallery in lightbox, this will show next & prev arrow in the Lightbox to switch to another Image in carousel.

Display Caption

Enable this option If you want to show Image Caption in lightbox. You can set Image caption by opening the Image in Media Library.

Design Options

Layout

Horizontal Alignment

Change the horizontal alignment of the images. If you have small and big size images in the carousel then this option would be helpful.

Element

Arrow Position

Change the arrow position to inside or outside of the carousel.

Mobile Arrow Position

Change the arrow position to inside or outside of the carousel for Mobile Devices only.

Arrow Size

Change the font size of the arrow.

Arrow Color

Change the color of the arrow.

Arrow Background Color

Change the background color of the arrow.

Pagination Placement

Here you can change the Position of the Pagination dots vertically.

Pagination Active Color

Change the color of the Active dot in the Pagination

Pagination In-Active Color

Change the color of the In-Active pagination dots here

Image

This is the place where you can add corner radius, borders, box shadow and more stuff to the carousel images.

Advanced Options

Use the advanced options to give your Price List module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

How to add URL to each Carousel Image

Adding a URL to the Image

If you want to add a URL to each Carousel Image you can do that easily. All you've to do is open up that Image in the Media Library and add the Custom URL to it there. So when a user will click on the Image they’ll be taken to that URL that you added to Image. It will only work within Divi Supreme Modules.

Adding Download link to the Image

If you want to let your users download a file when they click on the image you can simply enter the URL of that download file and check the option “Download as File”.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/N6VfRHIpbk/Download-as-file.png (Download-as-file.png)

That's it!

Question 12

How to Install Divi Supreme Pro

Accepted Answer

Before you install the Divi Supreme Pro On your site make sure that you've already downloaded the Divi Supreme Pro Plugin in your Computer. You can see this guide to see where to download the Divi Supreme Pro: https://docs.divisupreme.com/faqs/downloading-divi-supreme-products

After downloading simply follow the steps below:

Step 1. Install the Plugin

To Install Divi Supreme Pro on your site. Go to your WordPress Dashboard -> Plugin -> Add New.

Now click on "Upload Plugin" button on Top and then in the "Choose File" area choose the download Divi Supreme Pro .Zip file and then click on "Install Now" button.

So you've successfully installed the Plugin on your site.

Step 2. Activate the Plugin

After Installing the Plugin you can then Activate the Divi Supreme Pro to see all of its benefits/Features on your Divi Site. Simply click on "Activate" link to activate.

That's it, that's how easily you can Install the Divi Supreme Pro on your site. Let us know If you still face any issue by Contacting Us.

Question 13

Divi Icon List Module

Accepted Answer

Icon List module is like the Divi Blurb Module but more enhanced and well-aligned. If you want to create a list with icons then this module is helpful.

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/einuPIZNLD/icon-list-content-options.png (icon-list-content-options.png)

Adding Icon List

Click on + Add new Item to add your first Icon List . Clicking + Add new Item will open a completely new list of design settings (including Content, Design, Advanced) for your new Icon List.

See below for individual Icon List Item settings.

After you add your first Icon List, you will see a gray bar appear with the title of your Icon List shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the Icon List.

Design Options

Text

Text Indent

Here you can add padding between the text and icon.

And you can play with the text by changing its font, size, color and weight and even add shadow to the text.

Icon

Icon Color

Here can define a custom color for the icon.

Icon Background

Here you can define a custom background color for the icon.

Padding

Here you can add padding in the icon to make to look perfect if you are using the background color.

Icon Font Size

Here you can change the actual size of the Icon by increasing or decreasing the Icon font size.

Icon Rounded Corners

Here you can control the corner radius of the icon. Enable the link icon to control all four corners at once, or disable to define custom values for each.

Border

Play around with the icon by adding a border to four corners or any of the sides of the icon and change its color as well.

Image

Background

Here you can define a custom background color for the Image.

Image Padding

Here you can add padding in the icon to make to look perfect if you are using the background color.

Image Width

Adjust the width of the image by sliding the slider or enter your own value to change the size of the image.

Image Rounded Corners, Border and Box Shadow

Here you can control the corner radius of the Image. Enable the link icon to control all four corners at once, or disable to define custom values for each. you can play around with adding borders and Box Shadow to the Image

List Items

Layout

Here you'll be able to change the Layout of the Icon List to either Vertical or Horizontal.

Alignment

Change the alignment of the Icon List Item to Right, Center or Left.

Vertical Alignment

The List can be placed either above, below or in the center of the module.

Direction

Here you can choose the direction of the Icon, if you'll select Left to Right the icon will be on Left and the text on Right. And same goes for the Right to Left option, text on left and icon on right.

Space Between

Add some Space between Icon List Items.

Background Color

Add a Background color to all Icon List Items here.

Padding

Here you can define custom padding for the icon list item.

List Item Rounded Corners, Border and Box Shadow

Here you can add Corner Radius, Border and Box Shadow to the List Item.

Advanced Options

Use the advanced options to give your Icon List module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

Icon List Item Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/7pB7Zvimc4/Icon-List-Item-Content-Options.png (Icon-List-Item-Content-Options.png)

Content

Text

Add text to the icon list here.

Use Icon

You can enable this switch to use Icon and browse from hundreds of Icon from Divi Icon Library. Disabling this switch will show (+) button to add an image to the list rather than Icon.

Tooltip

Use Tooltip

Enable this switch to enable the Use of Tooltip and show a tooltip when Hover to Icon List item.

Content

After enabling the use of Tooltip, you'll see a field to enter the Content you want to show when Hover to Icon list item.

Icon List Item Content Options

Icon

Icon Color

Here can define a custom color for the icon.

Icon Background

Here you can define a custom background color for the icon.

Padding

Here you can add padding in the icon to make to look perfect if you are using the background color.

Icon Font Size

Here you can change the actual size of the Icon by increasing or decreasing the Icon font size.

Icon Rounded Corners

Here you can control the corner radius of the icon. Enable the link icon to control all four corners at once, or disable to define custom values for each.

Border

Play around with the icon by adding a border to four corners or any of the sides of the icon and change its color as well.

Image

Background

Here you can define a custom background color for the Image.

Image Padding

Here you can add padding in the icon to make to look perfect if you are using the background color.

Image Width

Adjust the width of the image by sliding the slider or enter your own value to change the size of the image.

Image Rounded Corners, Border and Box Shadow

Here you can control the corner radius of the Image. Enable the link icon to control all four corners at once, or disable to define custom values for each. you can play around with adding borders and Box Shadow to the Image

Tooltip

Placement

Here you can change the Placement of the Tooltip to:

Top
Right
Bottom
LeftBackground Color

Here you can change the Color of the Tooltip.

Tooltip Padding

You can define a custom padding inside of the Tooltip content here.

Tooltip Max width

To increase the width of the Tooltip change the max width of the Tooltip here.

And else you can play around with Tooltip text's font, size, color, weight and more.

Text

And you can play with the text by changing its font, size, color and weight and even add shadow to the text.

List Item Advanced Options

Use the advanced options to give your Icon List Item custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

Question 14

Fixing Common Issues while using Divi Supreme

Accepted Answer

This guide contains solutions for some of the most common design issues raised to us by our customers.

1. Divi Supreme Dynamic Assets

If you're noticing that the design of your website isn't displaying as it should be, don't worry! We've included a handy "Compatibility" option in Divi Supreme -> Misc to help resolve any issues you may be facing with Dynamic Assets. Simply enable the option and you should see your content properly displayed on the frontend.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/3LfK38CjbQ/2024-06-11%20at%2012.13.02.png (2024-06-11 at 12.13.02)

You may also try to disable both the options and see If your issue is fixed.

2. Caching Plugins

If your design doesn't appear correctly, chances are the Caching/Performance plugins you are using are the cause. Go ahead and disable any caching plugins you have installed in order to check if this solves the issue. After that, look for the setting which is likely causing it to appear incorrectly - disable it if possible. If you cannot find it, it may be best to reach out to the plugin's support team for help.

For Siteground Users, one option which can often cause issues is the "Defer JS" option in Plugin Settings -> Frontend -> JS. You can try to disable this and see if that fixes the problem.

3. Not Using the Latest Version

It is always best to ensure that you are using the latest version of Divi Theme and Divi Supreme Pro. To view the current version of the Divi theme, head to Dashboard > Appearance. To view the version of Divi Supreme Pro, simply go to Dashboard > Plugins, where the version number will be listed.

For both Divi and Divi Supreme, view the changelogs and ensure you have the latest version installed.

Divi Changelog: https://www.elegantthemes.com/api/changelog/divi.txt

Divi Supreme Pro Changelog: https://divisupreme.com/divi-supreme-pro-changelog/

Hope this helps to solve any issue you may facing.

Question 15

Divi Contact Form 7 Module

Accepted Answer

Big fan of Contact Form 7 plugin? Now with Supreme Contact Form 7, you can select your contact Form from the dropdown list without having to go back and forth switching between Visual Builder and Contact Form 7 setting page copying the shortcode and adding to the Divi Code Module. Style your Input Fields, Button, Labels, Validation, Error Messages and more!

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/lgJnQAR33u/showcase-1-768x882.png (showcase-1-768x882.png)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/tNTKf7dRDs/dsm-cf7-content-694x1024.png (dsm-cf7-content-694x1024.png)

Contact Form 7

Select a contact form that should be used in the module. You can create new contact form 7 using the Contact > Add New page in your WordPress Dashboard. Each time you create a new contact form, the form will be selectable in this dropdown menu.

Show Error & Validation Messages

This will show the error and validation messages on the Visual Builder for styling purposes.

Admin Label

This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface.

Design Options

Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

Labels

This is where you can style your label tag.

Bottom Spacing

The bottom spacing of the label.

Input, Textarea & Select

This is where you can style the Input, Textarea & Select such as background color, fonts, field rounded corners, border and more!

Placeholder

If you are using a placeholder on your Contact Form, this is where you can style the placeholder such as fonts.

Radio & Checkbox

If you are using a Radio & Checkbox on your Contact Form, this is where you can style the Radio & Checkbox such as fonts.

File

If you are using a File on your Contact Form, this is where you can style the File such as fonts, padding and background color.

Padding

Padding is the space added inside of your file wrapper, between the edge of the file and its internal elements. You can add custom padding values to any of the file wrapper’s four sides. To remove custom margin, delete the added value from the input field. By default these values are measured in pixels, but you can input custom units of measurement into the input fields.

Background Color

Here you can choose a background color for your file.

Error Messages

Here you can style the appearance of your Error Message. Make sure you turn on "Show Error & Validation Messages" in the Content Tab in order to view them in Visual Builder.

Background Color

Here you can choose a background color for your Error Messages.

Validation Error Messages

Here you can style the appearance of your Validation Error Messages. Make sure you turn on Show Error & Validation Messages in the Content Tab in order to view them in Visual Builder.

Background Color

Here you can choose a background color for your Validation Error Messages.

Validation Success Messages

Here you can style the appearance of your Validation Success Messages. Make sure you turn on Show Error & Validation Messages in the Content Tab in order to view them in Visual Builder.

Advanced Options

Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

Question 16

Divi Facebook Feed Module

Accepted Answer

Add Your Facebook Page Feed easily without having to embed them again.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/c3dV3Y5e7F/showcase-3-768x1017.png (showcase-3-768x1017.png)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/MXvfmIP55F/dsm-facebook-feed-653x1024.png (dsm-facebook-feed-653x1024.png)

APP ID

Enter the Facebook App ID here. You can go to https://developers.facebook.com/ and click on Create New App to get one. It is a must to provide a Facebook App ID which required to use this module.

Facebook Page URL

The URL of the Facebook Page

Tabs

Using this option you can add more tabs to the Facebook Feed Module. You can add these tabs:

Timeline
Events
Messages

Hide Cover Photo

Hide cover photo in the header

Use Small Header

Use the small header instead

Show Face Pile

Show profile photos when friends like this

Admin Label

This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface.

Design Options

Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

Alignment

Here you can choose to have your facebook feed aligned to the left, right or center.

Sizing

Height

Advanced Options

Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

Setup Facebook App ID

You will need your own Facebook account in order to create the Facebook App ID so ensure that you have created a free account by going to http://www.facebook.com first before starting this guide.

Step 1: Login to Facebook and go to developers site

Step 2: Create Facebook Application

Step 3: Give it a name, like “Divi Supreme” and click Create App ID:

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/bzA0MebVJB/dsm-facebook-app-name-1024x468.png (dsm-facebook-app-name-1024x468.png)

Step 4: Navigate to Settings > Basic

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/4GnFERpfic/dsm-facebook-app-basic-1024x626.png (dsm-facebook-app-basic-1024x626.png)

Step 5: Obtain Facebook APP ID

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/Wxuu6Zqwwq/dsm-facebook-app-id-1024x277.png (dsm-facebook-app-id-1024x277.png)

Before copying the APP ID, make sure you also change the status to LIVE. That’s all!

Question 17

How to Import Layouts

Accepted Answer

If you want to install one of our free provided Layout with every Module release in your Divi website then this article will help you out on how to import those Layouts to your site and use them.

Step 1. Download the Layout

First of all, you'll need to download the Layout from the Module Demo page. So for our example we'll download the Layout provided with Card Carousel Module.

Step 2. Import Layout in Divi Library

Now you can move to your site's Dashboard -> Divi -> Divi Library and click on Import & Export button on the top.

Step 3. Add that Layout to your Page

So lastly, let's see how to implement that Layout to your page. For that you'll first need to open up the Divi Builder on your page and click on + Icon at the bottom and then you'll see a new window, click on Your Saved Layouts Tab and choose the recently Imported Layout.

Question 18

Divi Image Accordion Module

Accepted Answer

Let's you display all of your images on your Divi website with a stunning hover/click animation and effects. Add as many items as you need providing them with icons, images, titles, descriptions, buttons, and links easily and quickly. It ensures the perfect image quality and combines them beautifully with amazing accordion effects.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/BbJQFpk7nt/Image%20Accordion-min.gif (Image Accordion-min.gif)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/WGFsRyv2NN/image%20accordion%20content%20options.png (image accordion content options.png)

Click on + Add new Item to add your first Image Accordion Item. Clicking + Add new Item will open a completely new list of design settings (including Content, Design, Advanced) for your new Image Accordion.

See below for individual Image Accordion Item settings.

After you add your first Accordion Item, you will see a gray bar appear with the title of your Image Hotspot shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the Image Accordion in the Main Content tab.

Accordion Settings

Accordion Type

Here you can choose whether to open the Image Accordion by Hover or Click.

Accordion Content Animation

Choose any animation from 5 different animations for Content entrance.

Use Sequenced Animation

Enabling this option will add animation separately to all Elements in the Accordion such as Title, Description, Button, Icon etc.

Accordion Direction

You can change the accordion direction to either Horizontal or Vertical.

Accordion Height

Change Accordion height from here.

Design Options

Overlay

Overlay Color

You can add Accordion to each Accordion from here, just change the color to any RGBA Value and it will be applied over your Image. This could be helpful to read your text clearly.

Icon

Icon Color

Change Icon color from her, If you've added in the Accordion.

Use Icon Font Size

Enable this option If you want to change the size of the Icon, you'll then see a handle to control the size of the Icon.

Icon Image

If you've replaced your Icon with an Image then you can manage It's styling from here, you can add Border, Corner radius and Box Shadow.

Title

Title Heading Level

Change the Heading level of the Title from H1 to H6.

And else you can play around with other settings to style the Title text.

Description

Here you can play around with the styling of the Description text the same way you style the paragraph in Default Text Module.

Button

This is where you can style the Button If you've added in Accordion. Enable the switch "Use Custom Styles for Button" and then you'll see options to style the button the same way you design Default Divi Buttons.

Advanced Options

Use the advanced options to give your Image Accordion module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module's visibility on certain devices.

Image Accordion Item Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/E7ulEQRwOA/item%20content%20options.png (item content options.png)

Make Item Expanded

As the name suggests, enable this option If you want the Item to be expanded by default.

Image

Add the Main Image for the Accordion here.

Use Icon

Enable this option If you want to add an Icon to the Accordion Content, then disable the switch If you want to use Image instead of icon.

Title

Your Main Title goes here.

Description

Your Description content goes here.

Show Button

Enable this switch If you want to use Button in your Accordion, then It will ask you for the Button Text & URL.

Horizontal Align

Here you can align the Accordion Content Horizontally to Left, Right & Center.

Vertical Align

Here you can align the Accordion Content Vertically to To, Bottom & Center.

Image Accordion Item Design Option

Overlay

Overlay Color

You can add Accordion to each Accordion from here, just change the color to any RGBA Value and it will be applied over your Image. This could be helpful to read your text clearly. Enable Hover option to add a Hover Overlay effect ~ Best for Item settings.

Title

Title Heading Level

Change the Heading level of the Title from H1 to H6.

And else you can play around with other settings to style the Title text.

Description

Here you can play around with the styling of the Description text the same way you style the paragraph in Default Text Module.

Button

This is where you can style the Button If you've added in Accordion. Enable the switch "Use Custom Styles for Button" and then you'll see options to style the button the same way you design Default Divi Buttons.

Sizing

Content Width

Change the Content width from here.

Image Accordion Item Advanced Options

Use the advanced options to give your Image Accordion Item module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module's visibility on certain devices.

Question 19

Divi Before After Image Slider Module

Accepted Answer

The Divi before after image slider module allows you to display the before and after versions of an image by simply sliding over them. Users will be able to move a slider to easily compare the two images.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/nMvcApx2MN/dsm-before-after-image-slider-demo-min.png (dsm-before-after-image-slider-demo-min.png)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/n1Wpk7dxic/dsm-before-after-image-slider-ss-min-453x1024.png (dsm-before-after-image-slider-ss-min-453x1024.png)

Note: Make sure that the images that you’ll place in before and after image section should be the same size, or it will make it look bad.

Images

The Image you’ll add in the first section will be the Before Image and the second one will be the After image. When you’ll add images you’ll see these options for before and after images:

Before/After Image Alternative text

This defines the HTML ALT text. A short description of your image can be placed here.

Before/After Image Title Text

This defines the HTML Title text.

Labels

Before Label text

Here you can define a custom Label text for the Before label text.

After Label text

Here you can define a custom Label text for the After label text.

Show Labels on Hover

Enable this option If you'd like to show labels on Hover only. Disable to always show the labels.

Settings

Default Offset Percentage

Here you control the position of the handle (that you use to see before and after) when the page loads. For example, If you set the offset to 0 the handle will be on the very left, and if it’s 0.5 the handle will be in the center.

Orientation

Here you can control the orientation for the handle to either Horizontal or Vertical.

No Overlay

When you hover to the Before After Image module you see an Overlay, enabling this option will remove the overlay when you hover.

Move Slider on Hover

If enabled, when you’ll hover over to the image the handle will move as the mouse moves.

Move Slider with Handle

Allow a user to swipe anywhere on the image to control the handle movement.

Click to Move slider

Allow a user to click (or tap) anywhere on the image to move the handle to that location.

Design Options

Before and After Label

This is where you can design the Before and After Label, you can add a custom background color, you can change the label font, size, color, and more.

Overlay

Here you can define a custom color for the overlay that shows when you hover over the image.

Handle Slider

Here you can design the Handle that is used to see before and after image.

Handle Border Color

You can change the color of the Handle border to your custom one.

Handle Border Radius

You can add some Corner radius to the Icon that you see in the center of the slider.

Handle Background Color

This is where you can change the background color of the handle icon.

Handle Arrow Color

This is where you can change the color of the handle icon.

And even you can add Some box-shadow, corner radius and Border to the module in the design settings the same way you do with other Divi modules.

Advanced Options

Use the advanced options to give your Before After Image Module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

Question 20

Divi Image Module

Accepted Answer

The Supreme Image allows you to transform the image using 3D transformation. Rotate it like the way you always wanted without coding.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/pIdX7QMo0I/showcase-8-1002x1024.png (showcase-8-1002x1024.png)

Content Options

Image

Place a valid image url here, or choose/upload an image via the WordPress Media Library. Images will always appeared left justified within their columns and will span the full width of your column. However, your image will never scale larger than its original upload size. The height of the image is determined by aspect ratio of your original image.

Link

Open in Lightbox

Here you can choose whether or not your image will open in a Lightbox when clicked. If enabled, then your image will “zoom in” to their full size when clicked inside a modal window. This is a great feature for portfolios.

Link URL

Place a valid web URL in this field to turn your Image into a link. Leaving this field blank will simply leave your image as a static element.

Use as Video Popup

Enable this option if you want to show a video in overlay when user clicks on the Image. You'll then prompted to enter the URL of the Video you want to show in the overlay

Transform & Rotation

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/Q25d9ms6V0/dsm-image-705x1024.png (dsm-image-705x1024.png)

Perspective

The perspective CSS property gives an element a 3D-space. The strength of the effect is determined by the value.

Rotate Y

Defines a transformation that rotates an element around the ordinate (vertical axis) without deforming it.

Rotate X

Defines a transformation that rotates an element around the abscissa (horizontal axis) without deforming it.

Rotate Z

Defines a transformation that rotates an element around the z-axis without deforming it.

Admin Label

This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface.

Design Options

Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

Overlay

Image Overlay

If enabled, an overlay color and icon will be displayed when a visitors hovers over the image.

Overlay Color

Here define a color for the Overlay.

Use Icon

Enable this option if you also want to show an icon in the overlay of image when hover.

Overlay Icon Color

Here you can define a custom color for the overlay icon

Icon Picker

Select an Icon from Divi Icon library here.

Show overlay on Hover

Enabling this option will only show the Overlay when hover to image. You can disbale this option if you want to always show the Overlay.

Overlay Rounded Corners and Border

You can then add Corner Radius and Border to the overlay if you like

Alignment

Image Alignment

Here you choose which direction your image floats within the column. You can float the image left, right or keep it centered.

Always Center Image On Mobile

Often times small images are more pleasing to the eye on mobile devices when they are centered. As columns break down, images that were aligned the left or right in smaller columns become orphaned when the columns break down and become 100% width. Enabling this column with force images to align to the center of the column on mobile without affecting the image alignment on desktop computers.

Advanced Options

Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.