Question 1

Divi Text Notation Module

Accepted Answer

To grab the attention of your visitors, you need something more appealing. Put the focus on the important part of your text with an animated hand-drawn look and feel. 7 types of styles to choose from.

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

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/UWmk1dXVyj/text%20notation%20Module%20conent%20options.PNG (text notation Module conent options.PNG)

Before Text

Here you can specify anything you want to show Before the Notation Text.

Notation Text

Add the Notation text here, the Animation effects will be added to this Text.

After Text

Here you can specify anything you want to show After the Notation Text.

Notation Settings

Type

Choose the Type of the Animation around the Text here from 7 different Animation effects.

Underline
Box
Circle
Hightlight
Strike Through
Crossed Off
Bracket

Color

Choose the Color of the Notation Animation here.

Stroke Width

Change the width of the annotation Stroke here.

Iterations

By default annotations are drawn in two iterations, e.g. when underlining, drawing from left to right and then back from right to left. Setting this property can let you configure the number of iterations.

Animate in Viewport

Here you can set a custom value for the Animation to play at a specific Viewport.

Delay

Add a delay to the Notation Effect to start after the time you'll set.

Design Options

Q: Divi Supreme Requirement

Minimum Requirements WordPress 4.5 or greater PHP version 7.0 or greater MySQL version 5.0 or greater We recommend your host supports PHP version 7.0 or greater MySQL version 5.6 or greater WP Memory limit of 64 MB or greater (128 MB or higher is preferred) Divi Supreme recommend and required the following: Divi Theme >= version 4.1 Extra Theme >= version 3.1 Divi Builder >= version 3.1 PHP version >= 7.0

Heading Settings

Heading HTML Tag

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

Main 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 Notation Text and Before/After Text.

Before, Notation and After Text

You can easily style the Before, Notation 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 Notation Text Module to style the text’s background, padding and stuff.

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

Margin and Spacing: Add some Margin and Spacing to the Before, Notation and After text, if you want to add some spacing on both sides of Before, Notation 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.
Inline is very similar to Inline Block but it helps your text to remain on the same line when added Padding to the Before, Notation and After Text. Margin will not work with this Display Property.
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, Notation and After text by adding different colors, text-shadows, border, border-radius and more to each text.

Notation Text Module Advanced Options

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

Question 2

Divi Post Carousel Module

Accepted Answer

Surprise your Visitors by showing your Posts in a new & creative way using Divi Supreme Post Carousel Module. Add some special post Carousels to your site and take Blogging with Divi to the next level.

Content Options

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

Post Type

Choose Post type for the Carousel here. For the Blog you can use the Blog Carousel Module.

Post Count

Enter how many posts you want to show in the Carousel here.

Date Format

Change the Date format from here the way you like.

Elements

Show Featured Image

Enable or Disable this switch to show or hide Post's Featured Images.

Show Title

You can choose whether to display the Post Title or not, Disable it to hide the Post Title.

Show Excerpt

Enable to Disable this switch to show or hide the Post Excerpt.

Excerpt Text

Change the length of the Excerpt text here, enter value in numbers.

Show Date

You can choose whether to display the Post Publish Date or not, Disable it to hide the Date.

Meta Separator

Here you add a custom Meta Separator.

Author

You can choose whether to display the Post Author or not, Disable it to hide the Author Info from the Carousel.

Readmore Button

Enable this switch If you want to show the Readmore button for each Post card in the Carousel.

-Readmore Text

Add a custom Text for Readmore button here.

Show Bottom Meta Elements

This is something really cool, you can enable this option to show a nice looking Author Image and Name and Post Publish date for each Post card.

-Bottom Date

You can disable this switch If you don't want to show Date in this Meta Element.

-Bottom Author

Carousel Settings

Carousel Effect

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

Slide
Coverflow
Flip
Cube

Columns

Enter how many columns you want to show in the Carousel.

Use Multiple Row

You can enable this option If you want to show multiple rows of Posts, lets say you enter 2 in the "Row Per Slide" field and then you'll see two Rows of Posts, 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.

Centered Mode

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

Spacing

Add some spacing between carousel Items.

Transition Duration

Change the duration when sliding the Carousel using the arrows here.

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 Posts and you can’t use the next arrow if slides are ended then you’ll have to use the previous arrow.

Autoplay

You can enable this option to slide Carousel Items automatically according to the time you'll set.

-Autoplay Speed

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

-Pause on Hover

Enable this option, If you want to pause the carousel autoplay when the mouse is on the Carousel Module.

Pagination

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

Navigation

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

Use Equal Height

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

Design Options

Post Item

Changes you'll make here will be applied to the Post Items/Cards in the carousel.

Post Item Padding

Add padding around the Post Item here.

Background Color

Add a background color for each post Card in the Carousel here.

And else you can play around with adding Corner Radius, Border and Box Shadow to Post Items/Cards in the Carousel.

Post Thumbnail

Thumbnail Height

You can change the height of the Featured Image here. A really helpful option.

And else you can play around with adding Corner Radius, Border, Box Shadow and Filters to Post Thumbnails in the Carousel.

Post Entry Title

Here you can change the Title styling, you can change the Heading Level, font, size, weight and much more for the Title.

Post Entry Summary

Here you can style the Description/Excerpt text the way you like.

Post Entry Meta

This is where you'll be able to style the Meta text, such as Date, Category, and Author font.

Alignment

Here you can change the alignment of the Meta text to Left, Right or Center.

And below you'll find options to style you Author, Date and Category Text's Font, Weight, Color and much more. You can give different styling to all of them.

Navigation

This is where you can style the Navigation/Arrows of the Carousel.

Navi Vertical Position

You can change the vertical position of the Arrows/Navigation here.

Left Navigation Position

From here you can horizontally change the position of the Left/Prev Arrow.

Right Navigation Position

From here you can horizontally change the position of the Right/Next Arrow.

Navi Arrow Icon Size

Here you can change the Size of the arrows.

Custom Prev Arrow Icon

Enable this option If you want to set a custom Icon for the Prev Arrow, enabling this option will show the Divi Icon Library to choose an icon.

Custom Next Arrow Icon

Same goes here, enable this option If you want to set a custom Icon for the Next Arrow, enabling this option will show the Divi Icon Library to choose an icon.

Arrow Color

Here you can change the Arrow Color.

Arrow Background Color

Change the Arrow Background color from here.

And below you'll find options to add Rounded Corners, Border and Box Shadow to the Arrow Icons.

Pagination

This is where you can style the Pagination/Dots.

Pagination Position

Change Vertical position of the Pagination here.

Pagination Color

Change the color of the Pagination here.

Pagination Active Color

Change the Active Pagination color from here.

Pagination Button Style

Here you can change the Pagination style, you've got 3 different styles to choose from.

Default
Dynamic
Progress Bar

Bottom Meta Items

Here you can play around with Bottom Meta Items styling.

Image Width

Change the Author Image width from here.

And else you can play around with the Author Name and Date Text styling. And add Rounded Corners, Border and Box Shadow to the Author Image.

Overlay

Enable this switch If you want to show an Overlay when hover on Thumbnail. When you'll enable this option It will open some settings and ask you to pick an Icon from Divi Icon Library.

Overlay Icon Color

Change the Icon Color here.

Overlay Icon Size

Change the Size of the Icon from here.

Overlay Background Color

Change the Overlay Background Color here.

Advanced Options

Use the advanced options to give your Post Carousel 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

Divi Star Rating Module

Accepted Answer

A must for all Divi sites and website owners. An important feature for many in order to get trust from your visitors. The star rating module is built with Google Schema in mind, and it’s fully customizable!

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

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/H1ldKHajdm/dsm-star-rating-709x1024.png (dsm-star-rating-709x1024.png)

Rating

Rating Scale

Default at 0 – 5. Choose a scale from 0 to 5 or 0 to 10

Rating

Here you can assign the rating based on the scale chosen.

Title

Enter the title for the rating.

Title Inline Position

From here you'll be able to position the Title to "left" or "right" of the Stars, If in any case you need to.

Display Type

Here you can choose whether you want your Title to be stacked or to be displayed as inline.

Show Rating Number

This will show the rating number text after the star icons.

Schema

By implementing Schema Support, you can display star ratings in search engine results, enhancing your visibility on platforms such as Google.

Enable Schema Support

Enable this If you'd like to enable the Schema Markup for this Star Rating module.

Author

Add the name of the Author here, you may leave this empty. Use Dynamic Content option to display dynamic info.

Product Item Name

Add the name of the Product here, you may leave this empty. Use Dynamic Content option to display dynamic info.

Number of Rating

Enter the Number of Rating here to display in Search Engines, you may leave this empty. Use Dynamic Content option to display dynamic info.

Design Options

Here you can style and/or position your text or header 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.

Stars

Size

Change the size of the stars

Gap

Control the gap between each star.

Color

Choose the color of the star icons.

Title

Gap

Here you can control the space between the title and the star icons.

And else you can play around with the Title text by changing Font, Size, Weight and more of it.

Rating Number Text

Here you can play around with the Rating Number text by changing Font, Size, Weight and more of it.

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 4

Divi Blog Carousel Module

Accepted Answer

Surprise your Visitors by showing your Posts in a new & creative way using Divi Supreme Blog Carousel Module. Add some special post Carousels to your site and take Blogging with Divi to the next level.

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/rHI8G12zbg/blog-carousel-content-1.png (blog-carousel-content-1.png)

Post Count

Enter how many posts you want to show in the Carousel here.

Included Categories

Choose Which post categories you want to show, you can select a particular category or choosee "All Category" to show all category posts.

Date Format

Change the Date format from here the way you like.

Elements

Show Featured Image

Enable or Disable this switch to show or hide Post's Featured Images.

Show Title

You can choose whether to display the Post Title or not, Disable it to hide the Post Title.

Show Excerpt

Enable to Disable this switch to show or hide the Post Excerpt.

Excerpt Text

Change the length of the Excerpt text here, enter value in numbers.

Show Date

You can choose whether to display the Post Publish Date or not, Disable it to hide the Date.

Show Category

Enable this switch If you want to show Post Categories in the Carousel for each post.

Meta Separator

Here you add a custom Meta Separator.

Author

You can choose whether to display the Post Author or not, Disable it to hide the Author Info from the Carousel.

Readmore Button

Enable this switch If you want to show the Readmore button for each Post card in the Carousel.

-Readmore Text

Add a custom Text for Readmore button here.

-Read More Link Target

From here you'll be able to change the Link Target to open in the Same Tab or in a New Window.

Show Bottom Meta Elements

This is something really cool, you can enable this option to show a nice looking Author Image and Name and Post Publish date for each Post card.

-Bottom Date

You can disable this switch If you don't want to show Date in this Meta Element.

-Bottom Author

You can also hide post Author Name by disabling this switch.

Carousel Effect

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

Slide
Coverflow
Flip
Cube

Carousel Direction

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

Columns

Enter how many columns you want to show in the Carousel.

Use Multiple Row

You can enable this option If you want to show multiple rows of Posts, lets say you enter 2 in the "Row Per Slide" field and then you'll see two Rows of Posts, 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.

Centered Mode

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

Spacing

Add some spacing between carousel Items.

Transition Duration

Change the duration when sliding the Carousel using the arrows here.

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 Posts and you can’t use the next arrow if slides are ended then you’ll have to use the previous arrow.

Autoplay

You can enable this option to slide Carousel Items automatically according to the time you'll set.

-Autoplay Speed

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

-Pause on Hover

Enable this option, If you want to pause the carousel autoplay when the mouse is on the Carousel Module.

Pagination

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

Navigation

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

Use Equal Height

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

Design Options

Post Item

Changes you'll make here will be applied to the Post Items/Cards in the carousel.

Post Item Padding

Add padding around the Post Item here.

Background Color

Add a background color for each post Card in the Carousel here.

And else you can play around with adding Corner Radius, Border and Box Shadow to Post Items/Cards in the Carousel.

Post Thumbnail

Thumbnail Height

You can change the height of the Featured Image here. A really helpful option.

And else you can play around with adding Corner Radius, Border, Box Shadow and Filters to Post Thumbnails in the Carousel.

Post Entry Title

Here you can change the Title styling, you can change the Heading Level, font, size, weight and much more for the Title.

Post Entry Summary

Here you can style the Description/Excerpt text the way you like.

Post Entry Meta

This is where you'll be able to style the Meta text, such as Date, Category, and Author font.

Alignment

Here you can change the alignment of the Meta text to Left, Right or Center.

And below you'll find options to style you Author, Date and Category Text's Font, Weight, Color and much more. You can give different styling to all of them.

Navigation

This is where you can style the Navigation/Arrows of the Carousel.

Navi Vertical Position

You can change the vertical position of the Arrows/Navigation here.

Left Navigation Position

From here you can horizontally change the position of the Left/Prev Arrow.

Right Navigation Position

From here you can horizontally change the position of the Right/Next Arrow.

Navi Arrow Icon Size

Here you can change the Size of the arrows.

Custom Prev Arrow Icon

Enable this option If you want to set a custom Icon for the Prev Arrow, enabling this option will show the Divi Icon Library to choose an icon.

Custom Next Arrow Icon

Same goes here, enable this option If you want to set a custom Icon for the Next Arrow, enabling this option will show the Divi Icon Library to choose an icon.

Arrow Color

Here you can change the Arrow Color.

Arrow Background Color

Change the Arrow Background color from here.

And below you'll find options to add Rounded Corners, Border and Box Shadow to the Arrow Icons.

Pagination

This is where you can style the Pagination/Dots.

Pagination Position

Change Vertical position of the Pagination here.

Pagination Color

Change the color of the Pagination here.

Pagination Active Color

Change the Active Pagination color from here.

Pagination Button Style

Here you can change the Pagination style, you've got 3 different styles to choose from.

Default
Dynamic
Progress Bar

Bottom Meta Items

Here you can play around with Bottom Meta Items styling.

Image Width

Change the Author Image width from here.

And else you can play around with the Author Name and Date Text styling. And add Rounded Corners, Border and Box Shadow to the Author Image.

Overlay

Enable this switch If you want to show an Overlay when hover on Thumbnail. When you'll enable this option It will open some settings and ask you to pick an Icon from Divi Icon Library.

Overlay Icon Color

Change the Icon Color here.

Overlay Icon Size

Change the Size of the Icon from here.

Overlay Background Color

Change the Overlay Background Color here.

Advanced Options

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

Question 5

Divi Floating Multi Images Module

Accepted Answer

A better and unique way to showcase multiple images to your visitors by using Floating Multi Images module. You can also change the animation either up/down or left/right.

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

Content Options

+ Image Item

This is where you add image to your Floating Multi Images Module. Clicking “add new item” will open a completely new list of design settings (including Content, Design, Advanced) for your new image. See below for individual image settings.

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

Animation

This is where you can change the floating animation effect.

Floating Effect

There are two types of Floating Animation Effect.

Image animation delay interval (in ms)

You can add a delay for the Animation to start in ms here.

Animation Speed

Here you can change the speed of the Floating Images Animation.

Image Item

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

Enable this switch to open the Image in Lightbox/Overlay.

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.

Sizing

Here you can change the placement and the width of the image.

Horizontal Align

Here you can change the horizontal alignment(left/right) of the image in percentage.

Vertical Align

Here you can change the vertical alignment(up/down) of the image in percentage.

Width

You can adjust the width of image.

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 6

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 7

Divi Image Hover Reveal Module

Accepted Answer

When you hover over the image, you will see the top image sliced into 5 pieces and revealing the image again with zoomed in animation. There are 4 types of animation to choose from. A unique way to showcase!

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

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.

Admin Label

This will change the label of the module in the builder for easy identification. When using the 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.

Sizing

Height

Default at 260px. Here you can define a height for your Image Hover Reveal.

Animation

Image Reveal Animation

Here you can choose 4 types of animation. Vertical Slide Down, Vertical Slide Up, Horizontal Slide Right and Horizontal Slide Left.

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 visibility on certain devices.

Question 8

Supreme FAQ Module

Accepted Answer

If you’re tired of dull, boring FAQs on your website, it’s time to try something new. With Divi Supreme FAQ module, you can create stunning FAQs that are both informative and visually appealing. There are many styling and content options available, so you can customize your FAQs to match your website’s look and feel.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/sSdVUG3yiX/2022-09-17%20at%2017.50.57.png (2022-09-17 at 17.50.57)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/axWxoB0raG/2022-09-17%20at%2017.50.30.png (2022-09-17 at 17.50.30)

Adding FAQ Items

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

See below for individual FAQ Item settings.

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

General

Gap

Here you can add a gap between your FAQ Items!

Make Accordion

Enable this option If you'd like to make the FAQs Accordion, with this only one item can be opened at a time, other items will be closed automatically.

Open First Item

Enable this option, If you'd like to have the First Item opened by default.

Enable Schema Support

If you'd like to show your FAQs in Google (& Others) Search Results, then enable this option.

Use Image

If you'd like to use the same Image in the Toggles for all FAQ items, then you can enable this option. A new Panel will appear, where you can add your Image for both states. See In Item settings, If you'd like to have a different image for each item.

Animate Toggle Icons

Enable this option If you'd like to animate the Toggle Icon when you open/close a Toggle.

Toggle Icon

Open FAQ Icon

Select Icon for the FAQ for Open State here.

Close FAQ Icon

Select Icon for the FAQ for Close State here.

Icon Placement

Here you can change the placement of the Icon, If you place it right, It will move the Image to Left (If used) and Icon to right.

Toggle Image

This Panel will only appear If the "Use Image" option is enabled in the "General" Settings.

Open Image

Select Image for the FAQ for Open State here.

Close Image

Select Image for the FAQ for Close State here.

Design Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/mjPiOwTET3/2022-09-17%20at%2018.01.54.png (2022-09-17 at 18.01.54)

Open State Title

Margin

Add Margin to the Icon here If you wish - For Open State.

Padding

Add Margin to the Padding here If you wish - For Open State.

Open Icon Font Size

Change the Icon Font Size here - For Open State.

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

Icon Close State

Close Icon BG Color

Change the Background Color of the Icon here - For Close State.

Close Icon Color

Change the Color of the Icon here - For Close State.

Margin

Add Margin to the Icon here If you wish - For Close State.

Padding

Add Margin to the Padding here If you wish - For Close State.

Close Icon Font Size

Change the Icon Font Size here - For Close State.

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

Content

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

Advanced Options

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

Supreme FAQ Item Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/CAd6Fddrrj/2022-09-17%20at%2018.14.02.png (2022-09-17 at 18.14.02)

General

Title

Here you can Add Title for your FAQ Item.

Content

Here you can Add Content for your FAQ Item.

Use Image

If you'd like to use Image in the Toggle for this particular item, then you can enable this option. A new Panel will appear, where you can add your Image for both states.

Toggle Icon

Open FAQ Icon

Select Icon for the FAQ for Open State here.

Close FAQ Icon

Select Icon for the FAQ for Close State here.

Toggle Image

This Panel will only appear If the "Use Image" option is enabled in the "General" Settings.

Open Image

Select Image for the FAQ for Open State here.

Close Image

Select Image for the FAQ for Close State here.

Supreme FAQ Item Design Options

Below Styling Options will only apply to this Particular Item and won't be applied to other Items, to have the same styling for all FAQ Items, use Design Options in the Main Settings.

Open State Title

Margin

Add Margin to the Icon here If you wish - For Open State.

Padding

Add Margin to the Padding here If you wish - For Open State.

Open Icon Font Size

Change the Icon Font Size here - For Open State.

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

Icon Close State

Close Icon BG Color

Change the Background Color of the Icon here - For Close State.

Close Icon Color

Change the Color of the Icon here - For Close State.

Margin

Add Margin to the Icon here If you wish - For Close State.

Padding

Add Margin to the Padding here If you wish - For Close State.

Close Icon Font Size

Change the Icon Font Size here - For Close State.

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

Content

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

Timeline Item Advanced Options

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

Question 9

Divi Facebook Like Button Module

Accepted Answer

Add a Facebook Like Button in your posts, so your visitors are encouraged to Like/Recommend or even share your content on Facebook. A single click on the Like button will ‘like’ pieces of content on the web and share them on Facebook. You can also display a Share button next to the Like button to let people add a personal message and customize who they share with.

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

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/z2zccqzDCp/dsm-fb-like-button-module-showcase-467x1024.png (dsm-fb-like-button-module-showcase-467x1024.png)

Facebook APP ID

The Facebook Like Button module uses the Facebook APP ID and requires a Facebook APP ID to function. Before using all Facebook module, please make sure you have added your Facebook APP ID inside the Divi Supreme Plugin Page. You can go to Facebook Developer and click on Create New App to get one. You can also see this guide for more help here.

URL

Here enter the URL of your Facebook Page

Layout

Change the type of Layout from 4 Different Layouts:

Standard - Will show the like button and number of likes separated.
Button Count - Will show the Like button and Like counts in the same box.
**Button **- Will only show the like button.
Box Count - Wil show the Like button and count on top and bottom separated.
Color Scheme - Change the Color Scheme of the Like Button to Light or Dark.

Show Faces

Choose whether to show faces or not(Only Standard Layout).

Action

The verb to display on the button. It can be either like or recommend.

Show Share Button

Specifies whether to include a share button beside the Like button.

Size

Change the Size of the button to either small or Large.

Design Options

There’s no option for this module in the Design Options. But you can still add Border, Corner Radius, Box Shadow and more…

Advanced Options

Use the advanced options to give your Facebook Like Button Module 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 Price List Module

Accepted Answer

Create an attractive and stunning Price List for your business with easy options. Perfect for menus, catalogs, product lists and any other list of featured items.

See the Demo page for more Design of Price lists.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/ITglE0ED1v/price-list-show-case-1024x430.png (price-list-show-case-1024x430.png)

Content Options

Adding Price List

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

See below for individual Price List Item settings.

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

Design Options

Text

Vertical Alignment

This setting determines the vertical alignment of your Price List Text. Your content can either be aligned to the top, vertically centered, or aligned to the bottom.

Text Shadow

Here add nice shadow to the Pirce list text.

Title Text

Change the title text font, color, size, weight and more of the Price List item.

Description Text

Change the Description text font, color, size, weight and more of the Price List item.

Price Text

Background Color

Define a custom background color for the price text.

Padding

Add some padding around the Price text.

And else you can change the price text font, color, size and weight and more.

Price Text Rounded Corners, Border and Box Shadow

Here you can control the corner radius of the Price Text. 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 Price text.

Image

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 Gap Spacing

Add some spacing between Image and Texts.

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

Separator

Style

Change the style of the line between Title text and Price text from 8 different styles.

Weight

Change the weight of the Line here.

Color

Change the color of the separator line to your own one.

Gap Spacing

Change the spacing of the line between Price text and Title text.

Sizing

Item Bottom Spacing

Add some bottom spacing between other Price list items.

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.

Price List Item Content Options

Text

Price

Add your Pricing here.

Title

Add your title here.

Content

Put in your description text here.

Image

Add your image to here add in your price list item.

Price List Item Design Options

Image

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 Gap Spacing

Add some spacing between Image and Texts.

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

Price List Item Advanced Options

Use the advanced options to give your Price 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 11

Divi Image Text Reveal Module

Accepted Answer

When you hover over the image, you will see the an overlay slide from the left to hide the image with the revealing text and when you move the move away from the image, the image slide out of view to the right. There are plenty of animation for the revealing text too!

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

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/5Gh2VCmWa4/dsm-image-text-reveal-768x1018.png (dsm-image-text-reveal-768x1018.png)

Reveal Text

This field is where you can enter the reveal text.

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.

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

Reveal Overlay Color

This option allows you to customize the reveal overlay color.

Animation

Here you can choose more than 30 animation for the revealing 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 12

Divi Shapes Module

Accepted Answer

Shapes are one of the most important elements in Design. So we’ve created this module to make your life easier. Shapes module adds life and creativity to your website. Boost your Divi designs, without having to use image files or custom code.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/AiAexCqfdk/dsm_shapes_module_showcase-1024x466.png (dsm_shapes_module_showcase-1024x466.png)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/jN35hh9nNG/shapes-module-content-options.png (shapes-module-content-options.png)

Shapes

Type

Here you can change the type of shape from 16 different Shapes. Here are the shapes that you can choose:

Square
Circle
Rectangle
Oval
Trapezoid
Parallelogram
Diamond Square
Hexagon
8 types of Blob

Size

Adjust the Size of the Shape here.

Design Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/eQvwcHv7Gw/shapes-module-designoptions.png (shapes-module-designoptions.png)

Shapes

Shape Color

Here you can define a custom color for your shape.

User Border

Enable this option if you want to add Border and Corner Radius to the shape.

Shapes Shadow

Here you can add a nice Drop Shadow to the shape.

Changing the Position of the Shape

Let’s See how we can change the position of the shape. We have three options:

Using Margins

Using Transform Translate Options

Using Position Options

Shape Module Advanced Options

Use the advanced options to give your Shape 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 Facebook Embed Module

Accepted Answer

With Divi Facebook Embed Module, you can easily embed a post or video to any Divi post or page. Just copy and paste any Facebook post or video into the link input field and you're good to go. Stop wasting time on enqueuing scripts and worry that it might not work. We’ve done that for you.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/Xbkmfwmyf4/Facebook-embed-module-showcase.png (Facebook-embed-module-showcase.png)

Content Options

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

Facebook APP ID

The Facebook Embed module uses the Facebook APP ID and requires a Facebook APP ID to function. Before using all Facebook module, please make sure you have added your Facebook APP ID inside the Divi Supreme Plugin Page. You can go to Facebook Developer and click on Create New App to get one. You can also see this guide for more help here.

Type

Choose the type of Embed you like. Such as Post or Video.

Type as Post

If you’ll select the post type as Post you will see these options:

Post URL - Enter the URL of the actual post from Facebook here.
Show Text - Applied to photo/video posts. Set to Show to include the text from the Facebook post or video, if any.

Type as Video

If you’ll select the post type as Post you will see these options:

Video URL - Enter the URL of the actual Video from Facebook here.
Show Text - Applied to photo/video posts. Set to Show to include the text from the Facebook post or video, if any.
Allow Video Fullscreen - Let the video to be played in the Fullscreen. You can Allow or Disallow.
Video Autoplay -Automatically start playing the video when the page loads. The video will be played without sound (muted). People can turn on sound via the video player controls. This setting does not apply to mobile devices.
Show Video Captions -Set to show to show captions (if available) by default. Captions are only available on desktop.

Design Options

There’s no option for this module in the Design Options. But you can still add Border, Corner Radius, Box Shadow and more…

Advanced Options

Use the advanced options to give your Facebook Embed 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 Blob Shape Image Module

Accepted Answer

Fan of Blob Shaped Images? We got your back!

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/pYkPTQ33pR/blob%20shape%20image%20demo%20image.png (blob shape image demo image.png)

Content Options

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

Image

Insert your Image here.

Blob Shapes

Choose any Blob Shape from 13 different Shapes.

Overlay Content

If you want to show content on the Image as an Overlay, then you can do so here.

Title

Add your Title here for the Overlay Content.

Description

Your description for the Overlay Content goes here.

Show Content on Hover

Enable this option If you like to show the Overlay Content on Hover.

Design Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/wt7Onx9t92/blob%20shape%20image%20module%20-%20Design%20options%20.png (blob shape image module - Design options .png)

Blob Image Settings

Blob Image is placed as a Background so you can change the Size & Position of the Image easily from here and make some other changes.

Size

Change the Size of the Image from here to "Cover" or "Initial".

Position

Change the position of the Image from here the way you like.

Blob Image Height

Change the Height of the Image from here If you need to.

And else you can add Border, Border Radius and Box Shadow to the Image If you like.

Overlay

You can also add Overlay Color or Gradient to the Image from here.

Use Overlay

Enable this Option If you'd like to add an overlay to the Image. And It will ask you to change the Color of the Overlay.

Use Gradient Overlay

Enable this option If you'd like to have a Gradient Overlay. Once enabled it will show different settings to change the Angle and Offset of the Gradient Color and you'll be able to have a Gradient Overlay as you desire.

Overlay Text

Here you'll be able to change the Styling of the Overlay Title, Description and add Spacing to the Overlay Content. Open the tab you'd like to change the styling of and make the changes you like. In the Spacing tab you'll be able to add Spacing around the Content.

Advanced Options

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

Question 15

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 16

Divi Supreme Requirement

Accepted Answer

Minimum Requirements

WordPress 4.5 or greater
PHP version 7.0 or greater
MySQL version 5.0 or greater

We recommend your host supports

PHP version 7.0 or greater
MySQL version 5.6 or greater
WP Memory limit of 64 MB or greater (128 MB or higher is preferred)

Divi Supreme recommend and required the following:

Divi Theme >= version 4.1
Extra Theme >= version 3.1
Divi Builder >= version 3.1
PHP version >= 7.0

Question 17

Divi Business Hours Module

Accepted Answer

Want to add Business hours to Divi? And you are looking for some Plugin in the WordPress Repository? Divi Supreme got a new Module Called Business Hours, with this Module for Divi you can easily add business hours to Divi Builder without installing any sort of plugin. The setup is very simple and you can easily make attractive Business hours Section in Divi.

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

Content Options

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

Business Hours

You can make Business hours of your choice just click on +Add New Item and then Choose Days and Time of your Business. You can add as many items you want by clicking on the +Add New Item button.

Design Options

Every Divi module has a long list of design settings that you can use to change just about anything.

In the Design Option, you can style your module in different ways that came by default with Divi but some options that are added by Divi Supreme plugin are these:

Day Text:

This is where you can style the Day text. You will find all of the styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your Day Text looks.

Time Text

This is where you can style the Time text. You will find all of the styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your Time Text looks.

Separator

You can add a separator line between Day and time from 8 different selections.

Weight: You can change the weight of the line i.e 2px

Color: You can change the color of the line

Gap Spacing: You can change the gap spacing between the Day and Time Text.

Divider

You can add a Divider underneath every Business hours item.

Spacing

Item Spacing: This is where you will choose how much spacing should be added to business hours. Padding is the space added inside of your business hours items.

Advanced Options

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

Business Hours Item Content

Text

Time

Here put the time period you want to set for your business.

Day

Here put the Day name.

Business Hours Design Options

In the Design option, you can change font, colors and many more of a particular item.

Day Text:

This is where you can style Day text. As mentioned before.

Time Text

This is where you can style the Time text. As mentioned before.

Business Hours Item Advanced Options

Use the advanced options to give your Business Hours Item custom CSS ID’s and Classes. Add some custom CSS for advanced styling.

Question 18

Divi Supreme Random Image Module

Accepted Answer

Important: For Random Images to work optimally, you'll need to turn off caching on the page that the module is implemented on.

The Divi Supreme Random Image module streamlines the display of a random image on your website. Upload images to the module, and it will automatically select and display a random image. This feature offers an effortless way to showcase a variety of images without the need for manual selection.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/rNNyLS25P6/2023-05-28%20at%2015.57.30.gif (2023-05-28 at 15.57.30)

Content Options

Images

Here you can upload your Images that you want to ranomly show on your page.

Image Size

Choose the Size of the Image here or leave it to "Full Size".

Link

Use Image Link URL

Enable this option If you'd like to enable URL for each image. See below to learn how to add a URL to each image.

Lightbox

Here you can choose whether you want to open the image in Lightbox, simply enable the option If you want to open the image in lightbox.

Image Size

You can also select a different size for the image in lightbox only or leave it to "Full Size" to show the full image.

Design Options

Overlay

Image Overlay

Enable this option If you'd like to show an Image Overlay.

Show Overlay on Hover

If you only want to show the Overlay on hover, enable this option.

Overlay Icon Color

Here you can change the Color of the icon that shows in the Overlay.

Overlay Color

Here you can change the color of the Overlay itself, use the transparency slider to make a transparent overlay effect.

Icon Picker

Choose the Icon to show in the Overlay here.

Image

Here you can style & customize the Image by adding Border Radius, Border, Box Shadow, Filters and more.

Advanced Options

Use the advanced options to give your Random Image 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 Scroll Image Module

Accepted Answer

The Divi Scroll Image Module allows you to add images on your Divi website which scroll up or down when the user hovers over the image. Scroll it like the way you always wanted without coding.

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

Content Options

Image

Add an Image here from your Media Library.

Link

Open in Lightbox

When you’ll click on the image it will be shown in Lightbox.

Image link URL

Add a URL for the image here and change the Target method.

Use as a Video Popup

If enabled you can show a video in Lightbox if you click on the image. Just make sure to put the URL of the video in the Image Link URL field.

Scroll Settings

Scroll Speed (in s)

Add the speed in seconds in which the image will be scrolled from top to bottom by sliding the slider.

Scroll Reverse Direction

Normally the image scrolls from top to bottom but you can enable this option to scroll the image from bottom to top.

Design Options

Overlay

You can enable the Image Overlay here. This means when you’ll hover over the image you can display an icon and a color that will cover the image.

Overlay Color

You can change the color of the overlay here

User Icon

Use this switch to enable or disable the use of Icon in the Overlay.

Overlay Icon color

You can change the color of the icon in the overlay here.

Icon Picker

Pick an icon here from the Divi Icon Library.

Show Overlay on Hover

You can always change the behavior of the overlay if you disable this overlay will stay on the image rather than showing only on hover.

Overlay Border Radius and Border

Here you can play around with the Border Radius and Border of the overlay.

Lightbox

If you've added Image/Video Overlay to the Scroll Image under the Link panel you'll see this option in the Design tab to design the Overlay.

Close Color

Change the color of the close button icon here.

Overlay Max Width

Change the max-width of the overlay here.

Advanced Options

Use the advanced options to give your Scroll 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 Icon Divider Module

Accepted Answer

Create an organized and unique Icon Divider with Supreme Icon Divider Module. With many border styles to choose from. You can put an icon in-between the Dividers or align them to suit your design.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/PCIZhhEfzY/showcase-9-1024x605.png (showcase-9-1024x605.png)

Content Options

Use Icon

When using Icon Divider, 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 Icon Divider.

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 Icon Divider image is determined by the aspect ratio of your original image, so making all of your Icon Divider images the same height is a good idea if you are placing them side by side.

Background

Background Color

Here you can choose a background color for your module.

Background Image

Here you can choose a background image for your module.

Admin Label

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

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.

Alignment

This controls the divider alignment of the Icon Divider.

Color

You can choose your desired color from the color picker for the divider color. This will be apply a color to the divider only.

Styles

Here’s where you can style the divider appearance.

Divider Style

Here you can choose your divider style such as solid, dotted, dashed and etc.

Divider Position

This controls the vertical alignment of the Icon Divider.

Sizing

Here’s where you can style the Text Divider appearance.

Divider Weight

You can input a custom weight for the Divider which also refers to the thickness of the line.

Icon Gap

The Gap space between the icon and the divider.

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.