Question 1

How to Download Divi Supreme Pro

Accepted Answer

You can access the latest version of our products at any time provided you’re still in the license term by logging into Divi Supreme account.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/tfzgjdarOE/download.png (download.png)

Once logged in, navigate to downloads and you will see a section containing all of the available downloads for your account along with the details of your past orders:

These links will always point towards the latest version of the product.

If you have any troubles accessing your account, try resetting your password, and if that fails please contact us.

Question 2

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

Q: Icons Rendering conflict with other Plugins

Plugins such as Divi Icons Pro , Divi Upload Icons or Divi Font Awesome does not work well with 3rd party Divi modules. You should contact the author of the icon plugin if they are willing to support Divi Supreme. They do not support 3rd party modules and that is why you’re seeing icons not rendering properly on Divi Supreme Modules. There is nothing we can do unless the plugin you using supports 3rd party divi modules. This applies to all 3rd party plugins out there. We are also looking to add Icon Extension in the near future. So stay tuned for that!

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 3

I can't update through my WordPress dashboard updates

Accepted Answer

When there is a new version update available, you will be prompt in your WordPress dashboard to carry out the update. You may encounter error, failure to update or the message "An error occurred while updating. Download Failed. Forbidden". This documentation discuss the scenario and the steps for rectifying the problem.

There are two reason why this is happening.

Your license key has expired.
You recently renew the license but the download permission is not updated for your account.

Check your license key expiry date

Please login to your account to check your license expiry date. You can read more here on how to check your license key.

Recently renewed but unable to update

If you recently renew but you can't update through your WordPress dashboard updates, please contact us to address this issue. We will correct the permission on your account.

Question 4

Before and After Image Module images are not loading correctly

Accepted Answer

LazyLoad have compatibility issue with most plugin out there especially when:

•Grid layouts that use fixed positioning/fixed widths

•e.g. some implementations of Isotope or Masonry

•JavaScripxs that try to calculate spaces based on image size

•Internet Explorer

•LazyLoad is not supported for IE8 and below

•Certain background images

•Depending on how they are added, not all background images can be LazyLoaded.

If you're using WP Rocket plugin lazyload, here's the filter function to disable.

Copy and paste this function into your child theme function.php

If you're using JetPack plugin lazyload, here's the filter function to disable.

Copy and paste this function into your child theme function.php

Question 5

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 6

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 7

How to Create Facebook APP ID

Accepted Answer

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 Facebook first before starting this guide.

Step 1: Login to Facebook and go to developers site

Ensure you are logged into your Facebook account and go http://www.facebook.com/developers

Step 2: Create Facebook Application

To create your App ID, head to the Facebook Developers site. As long as you’re logged into your regular Facebook account, you should see the button to Add a New App.

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/cqN4BCITvo/dsm-facebook-app-name.png (dsm-facebook-app-name.png)

Step 4: Navigate to Settings -> Basic

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

Step 4: Obtain Facebook APP ID

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

Question 8

Where to Put Facebook APP ID

Accepted Answer

All the Facebook Modules in the Divi Supreme use the Facebook APP ID to work perfectly and for this, you should have created an APP ID from the Facebook Developers site.

To first create a Facebook APP ID, you may see this guide here: https://docs.divisupreme.com/knowledgebase/how-to-create-facebook-app-id/

When you’re done with creating your Facebook APP ID you can now put it in Divi Supreme Plugin’s Page Settings. For this go to** Divi Supreme > Social Media Settings**:Good Luck!

Question 9

Divi Social Share Buttons Module

Accepted Answer

The Divi Supreme Social Share Buttons Module provides an easy way to add Social Media Sharing Icons to your Divi website. The module includes a variety of Social icons and allows you to customize the look and feel of these icons. You can also choose where to place the icons on your page within the Divi Builder.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/7FIwmaimLv/2022-07-14%20at%2022.05.27.png (2022-07-14 at 22.05.27)

Content Options

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

Adding Social Share Icons

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

See below for individual Social Share Item settings.

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

General

View

Here you can change the View of the Social Share Items, you can choose:

Icon & Text
Icon Only
Text only

Skin

Here you can choose the Skin type for Social Share Items, you can choose from below options:

Gradient
Minimal
Framed
Boxed Icon
Flat

Shape

You can change the Shape of the Social Share Items from here, you can choose:

Square
Rounded
Circle

Columns

Here you can change the column structure of the Social Share Items, you can change it to "Auto" which will automatically do it for you or you can select customer numbers of Column from 1 to 6.

Alignment

Change the Alignment of the Items here.

Target URL

You can change the Target URL of the Social Share Items to "Current" or "Custom". If you plan to use "Custom", you'll see a new field to add the custom URL.

Hover Animation

Here you can add a Hover Animation of the Social Share Items.

Design Options

Share Button

Columns Gap

Here you can change the Column gap between the Social Share Items.

Row Gap

Here you can change the Row gap between the Social Share Items.

Button Size

Change the Button Size here.

Icon Size

This is where you can change the Icon Size.

Button Height

Here you can change the Button Height

Color

You can use Official Color or select "Custom" option to use Custom Colors for all the Social Share Items.

Label

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

Advanced Options

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

Social Share Item Content Options

General

Network

Change the Network here you can select from below available Networks:

Facebook
Twitter
Linkedin
Pinterest
Reddit
Vk
Tumblr
Digg
Skype
Stumbleupon
Mix
Telegram
Pocket
Xing
WhatsApp
Email
Print

Custom Label

If you want to use a Custom Label for this Social Share Item, you can do so here.

Social Share Item Design Options

Social Button

Here you can set a Custom Color for this Social Share Item, you can set a different color for each item.

List Item Advanced Options

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

Question 10

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.

Question 11

How to translate Divi Supreme Plugin

Accepted Answer

You can also use Poedit locally when translating. This is an open source tool for all major OSs. The free Poedit default version supports manual scanning of all source code with Gettext functions. A pro version of it also features one-click scanning for WordPress plugins. After generating the PO file you can rename the file to POT. If a MO was generated then you can delete that file as it is not needed. If you don’t have the pro version you can easily get the Blank POT and use that as the base of your POT file. Once you have placed the blank POT in the languages folder you can click “Update” in Poedit to update the POT file with your strings.

After creating your .PO and .MO files.

Make sure the following filename is named as "dsm-supreme-modules-pro-for-divi-fr_FR.mo" or "dsm-supreme-modules-pro-for-divi-fr_FR.po" and placed them under the plugin /languages/ folder.

Example above is for French using "fr_FR". You might need to change to your own prefix.

More information can be found here https://developer.wordpress.org/plugins/internationalization/localization/

Question 12

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 13

Divi Animated Gradient Text Module

Accepted Answer

Create a beautiful and stunning animated gradient text on your Divi website.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/aJ031fOgdt/Showcase-3-1024x464.png (Showcase-3-1024x464.png)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/RfzUQA1K8b/dsm-animated-gradien-text.png (dsm-animated-gradien-text.png)

Content

Animated Gradient Text

Put your text here which will have an animated gradient.

Animated Gradient Settings

Gradient Direction

Change the direction of the gradient by entering values or sliding the slider.

Animation speed (s)

Change the Speed of animation here.

Design Options

Heading Settings

Heading HTML Tag

Change the tag of the heading from H1 to H6.

Animated Gradient Text

Here you’ll find 4 options for choosing colors which means you can have a really cool Animated Gradient Text with so many colors. But If you want to have two colors then put the same color in #1 Gradient Color and #2 Gradient Color and repeat it for the other two as well.

And you can play with color Gradient Text size, weight, Font, etc.

Advanced Options

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

Question 14

Divi Text Rotator Module

Accepted Answer

The Divi text rotator module allows you to take any text and rotate it with different phrases so you can create attractive headlines for your Divi site. Choose from any 36 animations to make your message pop.

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

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/qIh30mtsZq/Text-Rotator-Module-Content-Options.png (Text-Rotator-Module-Content-Options.png)

Rotator Text

Here you can add as many texts as you want that will have the Rotating Animation effect. You can click on the + Add New Item button to add new text that will get the Rotating effect.

Before Rotator Text

Here you can add some text that will be shown before the Rotator Text and it will not have any Animation effect.

After Rotator Text

Same goes for this, the text you’ll add here will be shown after the Rotator text and will not get any animation.

Rotate Animation

This is where you can change the animation effect of the Rotator Text. You get over 36 Animations to choose from.

Rotate Speed

Here you can specify the Speed of the Animation of the Rotating text.

Pause on Hover

When you’ll enable this option It will pause the Rotating animation on hover/mouseover.

Change on Click

You can enable this switch to let users change the Word when they click on the Rotating text.

Design Options

Heading Settings

Heading HTML Tag

Here you can change the Heading HTML Tag of the Rotator text and Before/After Text.

Text

You can play around with the text Design settings here. The changes you’ll make here will be applied to all the texts i.e Rotator Text and Before/After Text.

Before, Rotator and After Text

You can easily style the Before, Rotator and After text in the same way you style text in the Text Module(came with Divi Builder). And we’ll only discuss those options which are added by Text Rotator Module to style the text’s background, padding and stuff.

Background Color: Here you can add color to the Background of the Before, Rotator and After text.

Margin and Spacing: Add some Margin and Spacing to the Before, Rotator and After text, if you want to add some spacing on both sides of Before, Rotator and After Text.

Display: You can change the display property of the text to Inline Block and Block.

Inline Block displays the text in the same line as other texts.
Block Displays the text by making it a block means other texts will not be displayed in the same line.

And you can play around with Before, Rotator and After text by adding different colors, text-shadows, border, border-radius and more to each text.

Rotator Text Module Advanced Options

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

Question 15

Icons Rendering conflict with other Plugins

Accepted Answer

Plugins such as Divi Icons Pro, Divi Upload Icons or Divi Font Awesome does not work well with 3rd party Divi modules. You should contact the author of the icon plugin if they are willing to support Divi Supreme. They do not support 3rd party modules and that is why you’re seeing icons not rendering properly on Divi Supreme Modules. There is nothing we can do unless the plugin you using supports 3rd party divi modules. This applies to all 3rd party plugins out there.

We are also looking to add Icon Extension in the near future. So stay tuned for that!

Question 16

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 17

Supreme Progress Bar Module

Accepted Answer

If you’re looking for a way to add a little extra flair to your Divi site, then look no further than the Supreme Progress Bar Module. This nifty little module allows you to add a sleek and stylish reading progress bar to your pages, Not only does it look great, but it’s completely Customizable, helping your readers keep track of their progress as they read through your content.

Content Options

General

Tracker Type

Here you can select the Tracker Type, you can either select "Horizontal" or "Circular".

Progress Relative To

Here you can select the Relative to for Progress Bar. You can choose from:

Entire Page - Progress Bar will be relative to Entire Page.
Selector - You can add a class here for a Module/Row/Section (That Module/Row/Section must contain the class added here) and enter the class. Then the Progress Bar will be relative to that Module/Row/Section and will start when that Module/Row/Section comes in viewport and will reach 100% when that Module/Row/Section goes out of Viewport.

Direction

Here you can change the Direction of the Progress, you can change to "Left" or "Right".

Percentage

Enable this option If you'd like to show Percentage in Progress Bar.

Size

If you select "Circular" type, then here you can change the size of the Circle.

Design Options

Progress Indicator

For Horizontal Type

Background

Here you can change the Background/Progress Bar Color, you can even create Gradient If you like.

For Circular Type

Width

You can control the width of the Circular Type Tracker here.

Color

Here you can change the color of the Tracker.

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

Tracker

For Horizontal type

Background

Change the Background of the Tracker here.

Height

Here you can control the Height of the Progress Bar.

For Circular type

Width

You can control the width of the Circular Type Tracker here.

Color

Here you can change the color of the Tracker.

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

Percentage Text

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

Advanced Options

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

Question 18

Divi Embed Google Map Module

Accepted Answer

If you just need a simple Google Map, then this Embed Google Map Module will do the job nicely. This will embed into your Divi’s site easily without having to worry about anything else.

The Maps JavaScript API v2 is deprecated and will has turned off on May 26, 2021. As a result, all site's v2 embed maps will stop working, and will return JavaScript errors. Google Embed now required a API key even for embed map. https://developers.google.com/maps/documentation/embed/get-started

However, old method using copy/paste method does work for now, however we cannot confirm this method is stable or will be deprecated in the future as well(Google is known to change things):

Obtain a Google embed code

Go to Google Maps
Enter the business address in the search bar, then click the search button
Click on the Share icon
Choose "Embed map"
Select the size of the map from the drop down
Select and copy the HTML iframe embed code

Even thought having API for embed is free and has unlimited usage(https://developers.google.com/maps/documentation/embed/usage-and-billing).

You can read more on how to create the free API for the embed google map: https://developers.google.com/maps/documentation/embed/get-api-key

Make sure Maps Embed API in the Library is enabled as well.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/2HnJ7wvEJq/Maps%20Embed%20API.png (Maps Embed API.png)

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

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/ssYQ5siTYC/dsm-embed-google-map-768x893.png (dsm-embed-google-map-768x893.png)

Google Map API Key

Address

Enter an address for the map, and the address will be geocoded and displayed on the map. You can simply type in an address in a standard format, such as “1235 Sunny Road, Some City, State, 88343.”

Zoom

The Zoom level of the map.

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.

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 19

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 20

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.