Question 1

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.

# Content Options

**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 2

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.

# Content Options

**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 3

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.

# Content Options

# Shapes **Type** Here you can change the type of shape from 16 different Shapes. Here are the shapes that you can choose: 1. Square 2. Circle 3. Rectangle 4. Oval 5. Trapezoid 6. Parallelogram 7. Diamond Square 8. Hexagon 9. 8 types of Blob **Size** Adjust the Size of the Shape here. # Design Options

## 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** Margin adds extra space to the outside of the shape, increasing the distance between the shape and other items on the page. **Using Transform Translate Options** Under Transform Option, you’ll find the Translate tab and using that you can easily move the Shape anywhere on the screen by moving the box you’ll see under the Translate tab. **Using Position Options** Position Options were added under the Advanced Tab. You can change the position type to Relative or Absolute and shape can be easily moved anywhere on the screen by sliding the controllers or entering your own value. # 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 4

Divi Card Carousel Module

Accepted Answer

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

# Content Options ## Adding Carousel Items Click on + Add new Item to add your first Carousel. Clicking + Add new Item will open a completely new list of design settings (including Content, Design, Advanced) for your new Carousel. See below for individual Carousel Item settings. After you add your first Carousel, you will see a gray bar appear with the title of your Carousel shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the Carousel. ## Carousel Settings **Carousel Effect** Choose a Carousel effect from 4 Different Effects and more to add soon. * Slide * Coverflow * Flip * Cube **Coverflow Effect settings** If you'll select Carousel Effect as Coverflow you'll see these options: * **Show Shadow **- Adds a shadow to next Carousel Images. * **Coverflow rotate** - Set the Rotate amount of the next images in the slide. * **Coverflow Depth **- Increase to show more items in the carousel with coverflow effect. **Carousel Direction** You can change the Carousel Content Direction from here, It can be either "Left to Right" or "Right to Left". **Centered Mode** If enabled, then the active slide will be centered, not always on the left side. **Slides to Show** Change the number of slides you want to show in the carousel. You can enable the responsive option to adjust it for different screen sizes. **Slides to Scroll** Change the number of slides you want to scroll when click on the arrow key to see the next slides. **Slides Speed** Adjust the speed of the slider when changing the slides. **Autoplay** You can enable this option to slide Carousel Items automatically. **Autoplay Change interval** Change the time interval for the slides to change after that time. **Pause on Hover** Enable this option if you want to stop the Autoplay when Hover over to Carousel. **Spacing** Add some spacing between carousel Items. **Infinite Looping** Enabling this option causes the carousel to loop. Means when you’ll click on the arrow to go to next slide it will then keep looping and shows all the item from first to end. Disabling this will show only the number of images and you can’t use the next arrow if slides are ended then you’ll have to use the previous arrow. **Equalize Card Heights** Equalize the carousel Items height. Carousel Card Items will be 100% in Height. **Show Arrow** Enable or Disable this option to show or hide the arrows. **Show Pagination** Enable or Disable this option to show or hide the pagination dots. **Disable Touch/Dragging** Use this option to disable touch/drag to slide the Carousel. **Use Grab Cursor** Enable or Disable this option to change the mouse icon to grab cursor icon. # Design Options ## Layout & Alignment **Layout** Change the type of layout to Stacked or Inline. * **Stacked** will place the image on top and content on the bottom. * **Inline** will place the content Inline which means Image and content both in the same line. **Layout type Inline Settings** If you’ll select your layout type you will be able to see these options: * **Width**: Change the width of the image * **Order Alignment**: Change the alignment of the image to Left(Places the image on the left side of the content) or Right (Places the image on the right side of the content). * **Horizontal Content Alignment** - This option will let you align the content to Top, Center or Bottom, most helpful while using the inline layout type. * ## Image **Image Alignment** Change the alignment of the Image to Left, Center or Right. And you can make design changes to the image here. Here you can control the corner radius of the Image. Enable the link icon to control all four corners at once, or disable to define custom values for each. you can play around with adding borders and Box Shadow to the Image. ## Badge Change badge’s position color, background color and more here. **Position** Change the position of the badge anywhere on the Image. **Background Color** Change the background color of the badge to your desired one. **Padding** Add padding to the badge here to expand it more. And you can play with the badge text by changing its font, size, color and weight and even add shadow to the badge text. **Add Rounded Corners, Border and Box Shadow to Badge** Here you can control the corner radius of the Image. Enable the link icon to control all four corners at once, or disable to define custom values for each. you can play around with adding borders and Box Shadow to the Image. ## Arrow Element This is the place where you can add custom styles to the arrow icons. **Arrow Position** Change the position of the arrow inside or outside of the carousel. **Mobile Arrow Position** Change the position of the arrow inside or outside of the carousel for Mobile only. **Use Arrow Custom position** Enable this option if you want to add both arrow icons to your custom position. **Use Custom Previous Arrow Icon** Enabling this option will let you use a custom icon for the Previous Arrow. You can browse many Icons from Divi Icon Library. **Use Custom Next Arrow Icon** Enabling this option will let you use a custom icon for the Next Arrow. You can browse many Icons from Divi Icon Library. **Arrow Size** Change the font size of the arrow. **Arrow Color** Change the color of the arrow. **Arrow Background Color** Change the background color of the arrow. **Arrow Rounded Corners** Add Rounded corners to the Arrow Icons. **Arrow Border and Box Shadow** Add Border and Shadow to the arrow Icons. ## Pagination Element **Pagination Horizontal Placement** Change the horizontal position of the pagination dots. **Pagination Active Color** Change the color of the current pagination dot. **Pagination In-Active Color** Change the color of all the other pagination dots. ## Other Titles, Subtitle, and Body Texts And you can always play with the Title, Subtitle and Body text by changing its font, size, color and weight and even add shadow to the text by going to their design panels. ## Button Enable Use Custom Styles for the button to add custom stylings to the button. You can design the button same way you always design your Divi Buttons you can change button, font, size, weight and more and play with Margin and Padding and also you can add Corner Radius, Border and Box Shadow to the button. **Align Button Vertically** Enable this option, If you'd like to vertically align the button. This option will be shown If you've enabled the "Equal Height" option in the Carousel Settings Panel. You can align the button to Top, Center or Bottom from here. ## Border Card Corner Radius - Add Rounded corners to the single card item. **Card Border ** Add Border - Change its color and width for the single card item. ## Box Shadow Add Shadow to the Single Card Item to make it look more natural. # Advanced Options Use the advanced options to give your Card Carousel module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices. # Carousel Item Content Options

## Text **Title** Enter your title text here. You can take out the text if you don’t want the Title text. **Subtitle** Enter your subtitle text here. You can take out the text if you don’t want the subtitle text. **Content** Enter your description text here. You can take out the text if you don’t want the description text. ## Image & Badge Manage your Image and Badge text here. **Image** Add an image from your Library here. **Use Image as background** Enable this option to use the image as the background so you can play around with the position and Height of the image and even add hover animation to the image. **Image Height** Change the height of the image by sliding the slider. **Background Image animation** Add animation to the image from 4 different animations and to even add more in upcoming updates. **Animation Speed (in ms)** Change the Hover Background Image Speed from here in ms. **Open as Image Lightbox** Enable this option if you want to open the image in the lightbox when clicked. When you’ll enable this option you’ll then add an image from your library which will be opened in Lightbox. **Open as VideoLightbox** Enable this option if you want to show a video in an overlay. When you’ll enable this option you’ll then asked to put the URL of the video in field and module will do the rest. **Badge Text** Add text to the Badge here. You can take out the text if you don’t want the badge text. You can also add a link to the badge under the link panel. ## Button **Button text** Add text to the button here you can always remove the text of the element which you don’t want. **Button URL** Add a URL to the button here. **Open as Image Lightbox** Enable this option if you want to open an image in the lightbox. When you’ll enable this option you’ll then add an image from your library which will be opened in Lightbox. And when you’ll click the button an image will be shown in Lightbox. **Open as Video Lightbox** Enable this option if you want to show a video in an overlay. Make sure you’ve added the video link to the Button URL field. And when you’ll click the button the video will be shown in Lightbox. # Item Design Options ## Image **Image Overlay** Enable this switch if you want to add overlay color or icon or both to the image. **Overlay Color** Change the color of the overlay on the image to your own one. **Use Icon** You can enable this option if you want to show an icon in the overlay. And then can choose any icon from the Divi Icon Library and Change it’s color as well. **Image Rounded Corners, Border and Box Shadow** Here you can control the corner radius of the Image. Enable the link icon to control all four corners at once, or disable to define custom values for each. you can play around with adding borders and Box Shadow to the Image. ## Badge Change badge’s position color, background color and more here. **Position** Change the position of the badge anywhere on the Image. **Use Custom Position** Enabling this switch will let you position the badge on your own custom position on the image. **Background Color** Change the background color of the badge to your desired one. **Padding** Add padding to the badge here to expand it more. And you can play with the badge text by changing its font, size, color and weight and even add shadow to the badge text. **Add Rounded Corners, Border and Box Shadow to Badge** Here you can control the corner radius of the Image. Enable the link icon to control all four corners at once, or disable to define custom values for each. you can play around with adding borders and Box Shadow to the Image. ## Other Titles, Subtitle, and Body Texts And you can always play with the Title, Subtitle and Body text by changing its font, size, color and weight and even add shadow to the text by going to their design panels. ## Button Enable Use Custom Styles for the button to add custom stylings to the button. You can design the button same way you always design your Divi Buttons you can change button, font, size, weight and more and play with Margin and Padding and also you can add Corner Radius, Border and Box Shadow to the button. # Advanced Options Use the advanced options to give your Card Carousel module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

Question 5

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.

# Content Options

## 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: 1. **Width**: Change the width of the image 2.** Order Alignment**: Change the alignment of the image to Left(Places the image on the left side of the content) or Right (Places the image on the right side of the content). 3. **Horizontal Content Alignment** - This option will let you align the content to Top, Center or Bottom, most helpful while using the inline layout type. ## Image Make changes to the image here. **Image 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.

Question 6

Divi Image Carousel Module

Accepted Answer

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

# Content Options

## Image Carousel **+Add Gallery Images** Choose multiple images from your Media Library here. **Order by** You can change the order of the images to default(show images the way you selected) or Random(Shows images randomly) **Image Size** Change the size of all the images here. ## Carousel Settings **Carousel Effect** Here you can change Carousel Slide Effect from 4 different effects. * Slide * Coverflow * Flip * Cube **Coverflow Effect settings** If you'll select Carousel Effect as Coverflow you'll see these options: * **Show Shadow** - Adds a shadow to next Carousel Images. * **Coverflow rotate** - Set the Rotate amount of the next images in the slide. * **Coverflow Depth **- Increase to show more items in the carousel with coverflow effect. **Carousel Direction** You can change the Carousel Content Direction from here, It can be either "Left to Right" or "Right to Left". **Centered Mode** This mode will show the next image in the carousel centered means half of the image will be appearing which tells there are more items to see. **Slides to Show** Here you can change the number of images to show in one slide. **Slides to Scroll** Here you can change the number of slides to scroll when click on the arrow button to see the next items. **Slider Speed** Here you can change the speed for sliding the slider. **Use Multiple Row** You can enable this option If you want to show multiple rows of Images, lets say you enter 2 in the "Row Per Slide" field and then you'll see two Rows of Images, a new one below the first one and It will work the same way. You can change the "Row Per Slide" value to whatever you like. **Autoplay** You can enable this option to slide images automatically. **Autoplay Change interval** Change the time interval for the slides to change after that time. **Spacing** Add some spacing between carousel images. **Infinite Looping** Enabling this option causes the carousel to loop. Means when you’ll click on the arrow to go to next slide it will then keep looping and shows all the item from first to end. Disabling this will show only the number of images and you can’t use the next arrow if slides are ended then you’ll have to use the previous arrow. **Show Arrow** Enable or Disable this option to show or hide the arrows. **Show Pagination** Enable or Disable this option to show or hide the pagination dots. **Disable Touch/Dragging** Use this option to disable touch/drag to slide the Carousel. **Use Grab Cursor** Enable or Disable this option to make the mouse icon to grab cursor icon. ### Lightbox **Open Image in Lightbox** Enable or Disable this option to open the images in the lightbox when click on a single image. Enabling this option will reveal some more options too. **Image Size** Here you can change the Size of the Image when opened in Lightbox. **Lightbox in Gallery Mode** Enable this option If you want a gallery in lightbox, this will show next & prev arrow in the Lightbox to switch to another Image in carousel. **Display Caption** Enable this option If you want to show Image Caption in lightbox. You can set Image caption by opening the Image in Media Library. # Design Options ## Layout **Horizontal Alignment** Change the horizontal alignment of the images. If you have small and big size images in the carousel then this option would be helpful. ## Element **Arrow Position** Change the arrow position to inside or outside of the carousel. **Mobile Arrow Position** Change the arrow position to inside or outside of the carousel for Mobile Devices only. **Arrow Size** Change the font size of the arrow. **Arrow Color** Change the color of the arrow. **Arrow Background Color** Change the background color of the arrow. **Pagination Placement** Here you can change the Position of the Pagination dots vertically. **Pagination Active Color** Change the color of the Active dot in the Pagination **Pagination In-Active Color** Change the color of the In-Active pagination dots here ## Image This is the place where you can add corner radius, borders, box shadow and more stuff to the carousel images. # Advanced Options Use the advanced options to give your Price List module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices. # How to add URL to each Carousel Image **Adding a URL to the Image** If you want to add a URL to each Carousel Image you can do that easily. All you've to do is open up that Image in the Media Library and add the Custom URL to it there. So when a user will click on the Image they’ll be taken to that URL that you added to Image. It will only work within Divi Supreme Modules.

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

That's it!

Question 7

Divi Caldera Forms Module

Accepted Answer

Now with Divi Supreme Caldera Forms module, you can select your contact form from the dropdown list without having to go back and forth switching between Visual Builder and Caldera Forms setting page to copy the shortcode and adding it to the Divi Code Module. Style your Title, Body, Horizontal Ruler (HR Tag), Labels, Field Description, Input, Textarea, Select, Placeholder, Radio, Checkbox, Basic File, Error Messages, Success Message, Submit Button, Advanced File Button and more coming your way.

# Content Options

That "Note" at the top means that you'll need to disable the Default Caldera Forms styling by going to Caldera Forms and click "General Settings" at the Top and disable all the switches from here. ## Caldera Forms **Caldera Form** Select a form from the dropdown all of your forms that you’ve created using the Caldera form plugin will appear in the Dropdown menu. If you haven’t created a form already Hover over to Caldera Form > Forms and click on the New Form button at the top. **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 the WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface. # Design Options ## Header Text Here you can play around with the header text you may have added to the Form while creating the Form. ## Body Text Here you can play around with the body/description text you may have added to the Form while creating the Form. ## Horizontal Ruler (HR Tag) **Color** Here you can change the color of the Divider line in the Form. **Gap** You can add spacing to the top and bottom of the Divider line in the form. ## Label **Bottom Spacing** Add some spacing to the bottom of the Label. **Required Asterisk Color** Change the color of the (*) with the showing with the label which indicates that this field is Important to be filed. And else you can change the color, size, font and more of the Label text. ## Field Description If you’ve added a description to the field(Shows down of the field) then you can style it here. You change the background color and size, font, weight and more of the description text. ## Input, Textarea and Select All the changes you’ll make here will be applied to all the form fields including Name, Email, Message box and to the Drodpwn select field as well. **Margin Bottom** Add some spacing at the bottom of all the fields. **Background Color** Change the Background color of the form Fields and Select box. You can change the input Font, Size, color and more of the text will be entered in the Field. **Field Rounded Corners, Border and Box Shadow** Here you can control the corner radius of the Form Field. 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 Form Field. **Input, Textarea and Select Focus** When you’ll try to write something in the form and wanted to add some attention to the field then use this option to change the size, weight, and more of the text Input. ## Placeholder If you are using a placeholder on your Contact Form, this is where you can style the placeholder such as font, size and more. ## Radio & Checkbox If you are using a Radio & Checkbox on your Contact Form, this is where you can style the Radio & Checkbox such as font, size and more. * Custom **Radio/Checkbox** Styles * You can switch this option to add custom styles to the **Radio/Checkbox.** * Checked Color * You can change the color of the circle icon when checked here. * Checked Background Color * You can change the color of the background when checked here. * Background Color * You can change the color of the background for the **Radio/Checkbox** here. ## Basic File If you’ve added a Basic file uploader to the form then it can style here. You can add Padding, Change the background color, font, size, weight and more. ## Error Messages Here you can change the error message background color, font, size and more. You can also add drop shadow, Rounded corners and Borders to the Error message. ## Success Messages Here you can change the Success message background color, font, size and more. You can also add drop shadow, Rounded corners and Borders to the Success message. ## Submit Button **Button Alignment** Change the alignment of the button to Left, Center or Right. **Margin Top** Add some top margin to the button here. **Use Custom styles for the button** You can switch this option to style the Submit button the same way you style the Divi Button or any button in Divi Builder. ## Advanced File Button(1.0) Use Custom styles for the Advanced File Button(1.0) You can switch this option to style the Advanced File Button(1.0) the same way you style the Divi Button or any button in Divi Builder. # Advanced Options Use the advanced options to give your Caldera Forms 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

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](https://divisupreme.com/features/price-list-module/) for more Design of Price lists.

# 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 9

Divi Icon List Module

Accepted Answer

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

**Adding Icon List** Click on + Add new Item to add your first Icon List . Clicking + Add new Item will open a completely new list of design settings (including Content, Design, Advanced) for your new Icon List. See below for individual Icon List Item settings. After you add your first Icon List, you will see a gray bar appear with the title of your Icon List shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the Icon List. # Design Options ## Text **Text Indent** Here you can add padding between the text and icon. And you can play with the text by changing its font, size, color and weight and even add shadow to the text. ## Icon **Icon Color** Here can define a custom color for the icon. **Icon Background** Here you can define a custom background color for the icon. **Padding** Here you can add padding in the icon to make to look perfect if you are using the background color. **Icon Font Size** Here you can change the actual size of the Icon by increasing or decreasing the Icon font size. **Icon Rounded Corners** Here you can control the corner radius of the icon. Enable the link icon to control all four corners at once, or disable to define custom values for each. **Border** Play around with the icon by adding a border to four corners or any of the sides of the icon and change its color as well. ## Image **Background** Here you can define a custom background color for the Image. **Image Padding** Here you can add padding in the icon to make to look perfect if you are using the background color. **Image Width** Adjust the width of the image by sliding the slider or enter your own value to change the size of the image. **Image Rounded Corners, Border and Box Shadow** Here you can control the corner radius of the Image. Enable the link icon to control all four corners at once, or disable to define custom values for each. you can play around with adding borders and Box Shadow to the Image ## List Items **Alignment** Change the alignment of the Icon List Item to Right, Center or Left. **Vertical Alignment** The List can be placed either above, below or in the center of the module. **Direction** Here you can choose the direction of the Icon, if you'll select **Left to Right** the icon will be on Left and the text on Right. And same goes for the **Right to Left** option, text on left and icon on right. **Space Between** Add some Space between Icon List Items. **Background Color** Add a Background color to all Icon List Items here. **Padding** Here you can define custom padding for the icon list item. **List Item Rounded Corners, Border and Box Shadow** Here you can add Corner Radius, Border and Box Shadow to the List Item. # Advanced Options Use the advanced options to give your Icon List module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices. # Icon List Item Content Options

## Content **Text** Add text to the icon list here. **Use Icon** You can enable this switch to use Icon and browse from hundreds of Icon from Divi Icon Library. Disabling this switch will show (+) button to add an image to the list rather than Icon. ## Tooltip **Use Tooltip** Enable this switch to enable the Use of Tooltip and show a tooltip when Hover to Icon List item. **Content** After enabling the use of Tooltip, you'll see a field to enter the Content you want to show when Hover to Icon list item. # Icon List Item Content Options ## Icon **Icon Color** Here can define a custom color for the icon. **Icon Background** Here you can define a custom background color for the icon. **Padding** Here you can add padding in the icon to make to look perfect if you are using the background color. **Icon Font Size** Here you can change the actual size of the Icon by increasing or decreasing the Icon font size. **Icon Rounded Corners** Here you can control the corner radius of the icon. Enable the link icon to control all four corners at once, or disable to define custom values for each. **Border** Play around with the icon by adding a border to four corners or any of the sides of the icon and change its color as well. ## Image **Background** Here you can define a custom background color for the Image. **Image Padding** Here you can add padding in the icon to make to look perfect if you are using the background color. **Image Width** Adjust the width of the image by sliding the slider or enter your own value to change the size of the image. **Image Rounded Corners, Border and Box Shadow** Here you can control the corner radius of the Image. Enable the link icon to control all four corners at once, or disable to define custom values for each. you can play around with adding borders and Box Shadow to the Image ## Tooltip **Placement** Here you can change the Placement of the Tooltip to: * Top * Right * Bottom * Left **Background Color** Here you can change the Color of the Tooltip. **Tooltip Padding** You can define a custom padding inside of the Tooltip content here. **Tooltip Max width** To increase the width of the Tooltip change the **max width** of the Tooltip here. And else you can play around with Tooltip text's font, size, color, weight and more. ## Text And you can play with the text by changing its font, size, color and weight and even add shadow to the text. # List Item Advanced Options Use the advanced options to give your Icon List Item custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

Question 10

Divi Mask Text Module

Accepted Answer

To grab the attention of your visitors, you need something more appealing. Mask your text with any image to achieve a very cool effect. The creativity you can achieve with our mask text module is insanely cool.

# Content Options

**Mask Text** Put the text to start working on making a Mask Text in Divi. ## Mask Image **Background Image** Add an image from Media Library which will be placed as a background in the text. You can play around with changing the background image size and Position and make it Repeat. # Design Options ## Heading Settings **Heading Tag** Change the tag of the Mask Text from H1 to H6. ## Mask Text You can play around with changing the color, size, weight, and font of the Mask Text. # Advanced Options Use the advanced options to give your Mask 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 11

Divi Animated Gradient Text Module

Accepted Answer

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

# Content Options

## 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 12

Divi Image Hotspots Module

Accepted Answer

Adding Beautiful Image Hotspots was never easier in Divi Builder but now it’s super easy. Image Hotspots Module will let you add Hotspots to your image, if you ever wondered to add more info to your image then this module will be helpful.

# Content Options

**Image** First thing first, you will have to add an image here from your Media Library and then start adding Hotspots to the image. **Adding Hotspots to the Image** Click on + Add new Item to add your first hotspot to the Image. Clicking + Add new Item will open a completely new list of design settings (including Content, Design, Advanced) for your new Image Hotspot. See below for individual Image Hotspot Item settings. After you add your first Hotspot, you will see a gray bar appear with the title of your Image Hotspot shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the image hotspot. # Design Options If you want to make all your hotspots look the same then you can style them from here not Item Design Options but if you want to make them look different from each other then style each of them from the Item Design Options. All the Designs you’ll do here will be applied to all Hotspots. ## Hotspot text If you have Hotspot type text then here you’ll be able to change its color, size and weight, etc. ## Hotspot Settings **Trigger Event** Here you can change the hotspot trigger event. You have two options: * Hover - Will show the tooltip on hover * Click - Will show the tooltip on click **Padding** Here you can add padding to the Hotspot. **Border Radius and Border** Add some border-radius and Simple Borders to the hotspot. ## Hotspot Icon **Icon Color** Change the color of the Icon here. **Icon font Size** Change the size of the Icon from here. ## Tooltip Settings **Background Color** Add a Background color here to the tooltip. **Tooltip Padding** Add some padding to the tooltip here. **Tooltip Max Width** Change the max-width of the Tooltip here. **Tooltip Delay Show** Add some delay for the tooltip to show by just sliding the slider. **Tooltip Delay Hide** Add some delay for the tooltip to hide by just sliding the slider. ### Tooltip Heading Text If you have added Heading text in the Text of the Tooltip then you can style that here the same you style other Heading texts in Divi. ### Tooltip Body Text Here you can style the Tooltip Body text. You can change the font color, size, weight and more. ## Image **Alignment** Change the alignment of the image here. **Image Box Shadow** Add Shadow to the image here. ## Sizing **Force Fullwidth** Enabling this option will Force the image to be fullwidth. After that if you want to control the width of the image according to your custom needs you'll then see Width Option to do so. # Hotspot Item Content Options

## Hotspot **Type** Change the type of the Hotspot button. It can an Icon or Text. * Icon - If you'll select Hotspot type as Icon you can then choose an Icon for the Hotspot from Divi Icon Library. * Image - If you'll select Hotspot type as Icon you can then choose an Image from Media Library to use as Hotspot. * Hotspot Text - If you select Hotspot type to Text a text input field will appear and you’ll be able to add text to Hotspot than Icon. ## Tooltip **Use Tooltip** Enable this Option, If you'd like to use Tooltip on Hover. You can disable it If you don't want to show Tooltip on hover. **Content** Here you’ll be able to add text to appear in the tooltip. ## Background Here you can change the background color of the Hotspot, you can add a solid Color, Gradient, Image or Video the Hotspot. # Hotspot Item Design Options ## Hotspot Text If you have chosen the Hotspot type as Text then you’ll be able to style that text here the same way as you always style. ## Hotspot Settings **Left Position** Using this Position option you’ll be able to move the Hotspot from right to left or left to right by sliding the slider. **TOP Position** Using this Position option you’ll be able to move the Hotspot from top to bottom or bottom to top by sliding the slider. **Padding** Add some padding to the hotspot to let it take more space on the image. **Border Radius and border** Here you can add border-radius or simple border to the hotspot. ## Hotspot Image If you'll choose Hotspot Type as Image this will appear to style the Image. **Hotspot Image width** Here you can change the width of the Image **Hotspot Image Rounded Corners** Add Rounded corners to Image here. **Hotspot Image Border** Here you can add Border to the Image. **Hotspot Image Box Shadow** Add Shadow to image here to make it look more natural. ## Hotspot Icon If you'll choose Hotspot Type as Icon this will appear to style the Icon. **Icon Color** Change the color of the Icon here. **Icon font Size** Change the size of the Icon from here. ### Tooltip Settings When you’ll hover over to the hotspot a tooltip shows and that can be styled here. **Background color** Change the tooltip background color here. **Padding** Add some padding to the tooltip here. **Placement** Here you can choose the placement of the tooltip. The Tooltip can be placed on Top, Bottom, Left or Right of the Hotspot. **Tooltip Max Width** Change the max-width of the Tooltip here. ### Tooltip Heading Text If you have added Heading text in the Text of the Tooltip then you can style that here the same you style other Heading texts in Divi. ### Tooltip Body Text Here you can style the Tooltip Body text. You can change the font color, size, weight and more. # Tooltip Item Advanced Options Use the advanced options to give your Image Hotspot module 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 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.

<img alt="showcase (1).gif" src="https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/h6FgyNXDmf/showcase.gif" align="center">
# 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 14

Divi Dual Heading Module

Accepted Answer

Are you looking for adding Attractive and Modern Headings to your Divi Site then welcome the Supreme Dual Heading Module to Divi Builder. Using this you can easily create beautiful Heading that attracts visitors.

# Content Options

In the Content tab, you’ll find three Text Input options (Before, Middle and After) and you can have separate designs for each. ## Dual Heading Text **Before Text** Here you can put the Before Text. **Middle Text** Here you can put the Middle Text. Make sure to add spacing before and after the text in the text you’ll write. **After Text** Here you can put the After Text. # Design Options Every one of the text you’ll enter in Before, After and Middle Text field can be designed separately in the Design Options.

## Heading Settings **Heading HTML Tag** You can change the Heading tag of all the texts (Before, Middle and After) from H1 to H6 ## Main Text In this Design Option, you can change the font, color, weight and size, etc of all the texts (Before, Middle and After) ### Before, Middle and After Text You can easily style the Before, Middle 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 Dual Heading Module to style the text’s background, padding and stuff. **Background Color**: Here you can add color to the Background of the Before, Middle and After text. **Margin and Spacing**: Add some Margin and Spacing to the Before, Middle and After text, if you want to add some spacing on both sides of Before, Middle 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, Middle and After text by adding different colors, text-shadows, border, border-radius and more to each text. # Advanced Options Use the advanced options to give your Dual Heading module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

Question 15

Divi Shuffle Letters Module

Accepted Answer

Add a nice and cool text effect to your website using the Shuffle Letters Module for Divi. Write the text that you want to show and it will shuffle letter by letter in the random text before revealing. You can configure settings such as shuffle speed, duration and the random text with just a few clicks.

# Content Options
## Text
**Before Text**

Add text here before the Shuffle text.

**Shuffle Text**

Add text here which will be shown after the shuffling effect.

**Shuffle Text on a new line**

Enable this option if you want to put the shuffle text below the before text or in a new line.

**After Text**

Add text here which will be shown after the Shuffle text.

**After Text on a new line**

Enable this options if you want to put the After text below the Shuffle Text or in a new line.

## Shuffle Letters Options
**Shuffle Speed (in ms)**

Adjust the speed of the Shuffle Animation by sliding the slider in milliseconds.

**Duration (in s)**

Change the duration of the Shuffle Animation so the Shuffle text will appear after the time duration you set.

**Overwrite Random Shuffle Text**

Enter your text here, only if you want to have your own random character text. Use without space e.g ‘Shuffle Text’.

# Design Options
**Before**, **Shuffle** and** After Text** Stylings. You can play around with changing the color, size, weight, and font and more of the Before, Shuffle and After Text.

# Advanced Options
Use the advanced options to give your Mask 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 16

Divi Supreme Button Module

Accepted Answer

Allow you to have two buttons with a separator text in between. 10 types of hover animation to choose from, image/video lightbox that supports: YouTube, Vimeo and Dailymotion! Not only that, we added URL link type that supports: URL, Email, Phone, SMS, Facebook Messenger, Skype, WhatsApp and Telegram! # Content Options Within the content tab, you will find all of the module’s content elements, such as text, images and icons. Anything that controls what appears in your module will always be found within this tab.

## Text **Button #1 Text** Input your desired button #1 text. **Button #2 Text** Input your desired button #2 text. ## Links #### Link Type for Button #1 Choose the type of URL (URL, Email, Phone, SMS, Facebook Messenger, Skype, WhatsApp or Telegram) **Email** This option will show up only when using Email Type. Enter the Email Address for Button #1. **Download File** Using this Option you can easily add a Click to download feature to the Button, Simply upload any file or Choose from Media Library. **CC** Enter the carbon copy email address for Button #1. **BCC** Enter the blind carbon copy email address for Button #1. **SUBJECT** Enter the default subject of the email for Button #1. **MESSAGE** Enter the default body message of the email for Button #1. **Phone Number** Enter the phone number to call for Button #1 (This will usually work on mobile phones) **SMS** Enter the phone number to SMS for Button #1 (This will usually work on mobile phones) **Facebook Messenger** ---**USERNAME** This option will show up only when using Facebook Messenger. Enter a person, page, or bot username. **Skype** ---**USERNAME** This option will show up only when using Skype. Enter the Skype username for Button #1. **ACTION TYPE** Choose the action type for Skype. You can choose to chat or call. **WhatsApp** ---**NUMBER** This option will show up only when using WhatsApp. Enter the phone number to message directly via WhatsApp message for Button #1. **ACTION TYPE** Enter the default body message of the WhatsApp for Button #1. **Telegram** ---**TELEGRAM USERNAME** This option will show up only when using Telegram. Enter the Telegram Username. **MESSAGE** Enter the default body message of the Telegram for Button #1. **Button #1 URL** Input the destination URLfor your button #1. **Open as Image Lightbox** Here you can choose whether or not the button should open in Lightbox. Note: if you select to open the button in Lightbox, URL options below will be ignored. **Open as Video Lightbox** Put the Video link on the Button #1 URL. Copy the video URL link and paste it here. Support: YouTube, Vimeo and Dailymotion. **Use Tooltip** This will show a tooltip on your Button #1 **TOOLTIP CONTENT** Input your desired tooltip content for button #1. **SHOW ARROW** If enabled, then an arrow will be added to the tooltip. **SIZE** The size of the tooltip from Small to Large. **PLACEMENT** Here you can choose the placement of the tooltip. Top, Right, Bottom and Left. **ANIMATION** Here you can choose different types of animation for your tooltip. **URL Opens** Here you can choose whether or not your link opens in a new window. #### Link Type for Button #2 Choose the type of URL (URL, Email, Phone, SMS, Facebook Messenger, Skype, WhatsApp or Telegram) **Email** This option will show up only when using Email Type. Enter the Email Address for Button #2. **Download File** Using this Option you can easily add a Click to download feature to the Button, Simply upload any file or Choose from Media Library. **CC** Enter the carbon copy email address for Button #2. **BCC** Enter the blind carbon copy email address for Button #2. **SUBJECT** Enter the default subject of the email for Button #2. **MESSAGE** Enter the default body message of the email for Button #2. **Phone Number** Enter the phone number to call for Button #2 (This will usually work on mobile phones) **SMS** Enter the phone number to SMS for Button #2 (This will usually work on mobile phones) **Facebook Messenger** ---**USERNAME** This option will show up only when using Facebook Messenger. Enter a person, page, or bot username. **Skype** ---**USERNAME** This option will show up only when using Skype. Enter the Skype username for Button #2. **ACTION TYPE** Choose the action type for Skype. You can choose to chat or call. **WhatsApp** ---**NUMBER** This option will show up only when using WhatsApp. Enter the phone number to message directly via WhatsApp message for Button #2. **ACTION TYPE** Enter the default body message of the WhatsApp for Button #2. **Telegram** ---TELEGRAM USERNAME This option will show up only when using Telegram. Enter the Telegram Username. **MESSAGE** Enter the default body message of the Telegram for Button #2. **Button #2 URL** Input the destination URL for your button #2. **Open as Image Lightbox** Here you can choose whether or not the button should open in Lightbox. Note: if you select to open the button in Lightbox, URL options below will be ignored. **Open as Video Lightbox** Put the Video link on the Button #2 URL. Copy the video URL link and paste it here. Support: YouTube, Vimeo and Dailymotion. **Use Tooltip** This will show a tooltip on your Button #2 **TOOLTIP CONTENT** Input your desired tooltip content for button #2. **SHOW ARROW** If enabled, then an arrow will be added to the tooltip. **SIZE** The size of the tooltip from Small to Large. **PLACEMENT** Here you can choose the placement of the tooltip. Top, Right, Bottom and Left. **ANIMATION** Here you can choose different types of animation for your tooltip. **URL Opens** Here you can choose whether or not your link opens in a new window. ## Separator **Separator Text** Input your desired separator text, or leave blank for no separator text in between the both buttons. **Make Separator Text Fullwidth On Mobile** This will make the Separator Text as fullwidth instead of inline-block on mobile devices. **Remove Separator Text On Mobile** This will remove the Separator Text on mobile devices. ## Admin Label This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface. # Design Options Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything. ## Alignment Here you can choose to have your Button Wrapper aligned to the left, right or center. ## Lightbox If you've added an Image/Video Overlay to the button, then here you can change the settings of the Overlay. **Overlay color** Choose any color for the Overlay **Max Width** Here you can choose the Maximum width of the Overlay. ## Separator Text Here you can style the Spearator text's font, size, color and more. ## Tooltip Text If you've added Tooltip to the buttons you can easily style it here. You can have different styling for each button by going to each tab. You can style the Tooltip text's font size, color, and much more. ## Sizing **Separator Gap Text** The gap spacing between both buttons. ## Button One This is where you can style your Button #1 the same way you style other button in Divi. ## Button Two This is where you can style your Button #2 the same way you style other button in Divi. ## Animation

**Button Hover #1 Animation** Here you can select one hover animation from the dropdown list for Button #1. You can select any from over 29 Animations. The Lite version of Divi Supreme will have only few of them. **Button Hover #2 Animation** Here you can select one hover animation from the dropdown list for Button #2. You can select any from over 29 Animations. The Lite version of Divi Supreme will have only few of them. **Button Icon Hover #1 Animation** If you've added Icon to the Button #1 and disable the switch called "**Only Show Icon on Hover for Button One**" then you'll see this Option in the Animation Panel, So you can add a Hover animation to Button's Icon as well from Over 15 Animations. **Button Icon Hover #2 Animation** If you've added Icon to the Button #2 and disable the switch called "**Only Show Icon on Hover for Button Two**" then you'll see this Option in the Animation Panel, So you can add a Hover animation to Button's Icon as well from Over 15 Animations.

Button Icon hover animation - Divi Supreme.png

# 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 17

Divi Flipbox Module

Accepted Answer

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

# Content Options **+ Flipbox Item** This is where you add content, images and icon to your Flipbox Module. Just like a Blurb Module but with Front and Back Animation to show the front and back of an element when you hover. Clicking “add new item” will open a completely new list of design settings (including Content, Design, Advanced) for your new Flipbox. See below for individual Flipbox settings. After you add your first image, you will see a gray bar appear with the title of your Flipbox shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the image. **Note**: Create only two items because one is identify as Front and the other as Back.

# Design Options **Sizing** **--Height** By default, the flipbox is set at 200px. You can set to other height to suit the content of your flipbox. This is one of the most important part when using flipbox. If you content is too long and doesn’t look right. Adjust your height. **Animation** This is where you can change the flipbox animation effect.

**Trigger Animation On** Choose a trigger animation for the Flipbox here. You can either select "Hover" or "Click". When you'll select Click the Flipbox will flip on Click instead of on hover. **Click On** This option will appear once you'll select the Trigger method as "Click". And from here you can choose If you want to flip the Flipbox on Whole Flipbox click or Button click. **Flipbox Type** There are 5 types of Flipbox Effect to choose from. * Flip * Slide * Zoom In * Zoom Out * Fade * See [Flipbox Demo here](https://divisupreme.com/features/flipbox-module/). **Flip Animation** There are 4 types of Flip Effect to choose from. **"Flip Left"** **"Flip Right"** **"Flip Up"** **"Flip Down"** **3D Effect** This option will only show up when you choose Flipbox Effect as **Flip** And this will create a 3D effect to your Flipbox. **Slide Animation** This option will only show up when you choose Flipbox Effect as **Slide** There are 4 types of Slide Effect to choose from. **"Slide Left"**, **"Slide Right"**, **"Slide Up"** and **"Slide Down"**. **Zoom In Animation** This will have a zoom in animation on your flipbox. **Zoom Out Animation** This option will only show up when you choose Flipbox Effect as **Zoom Out** There are 5 types of Zoom Out Effect to choose from. Zoom Out Zoom Out Up Zoom Out Down Zoom Out Left * Zoom Out Right **Animation Speed (in s)** This will control the speed animation of the flipbox. # Advanced Options Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices. # Flipbox Item Content **Title** Give a title to your Flipbox that will appear above the body text of the Flipbox in a bold text style. **Sub Title** If you would like to use a sub title, add it here. Your sub title will appear below your title in a small font. **Content** This field is where you can enter the body content of your Flipbox. Flipbox Text will also span the full width of your column. **Use Icon** When using Flipbox, you can choose to either use an Icon or and Image with your text. If you select “yes” for the “Use Icon” option, then you will be presented with the following options to customize your icon. If you do not choose to use an Icon, then you will be prompted to upload an image instead. **Icon** If you chose “yes” for the “Use Icon” setting, then this option will appear. This options presents you with a list of available icons that you can use with your Perky Animate text. Simply click on the con that you would like to use and it will appear in your Flipbox. **Image** If you did not choose to use an Icon, then this setting will appear. Place a valid image url here, or choose/upload an image via the WordPress Media Library. However, your image will never scale larger than its original upload size. The height of the Flipbox image is determined by the aspect ratio of your original image, so making all of your Flipbox images the same height is a good idea if you are placing them side by side. ## Button **Button Text** Input your desired button text. **Button URL** Input the destination URL for your button. **URL Opens** Here you can choose whether or not your link opens in a new window. # Flipbox Item Design Options Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything. ## Image & Icon **Icon Color** If you chose “yes” for the “Use Icon” setting, then this option will appear. This option allows you to customize the color of your Icon. By default, the icons are set to your theme accent color. **Circle Icon** If you chose “yes” for the “Use Icon” setting, then this option will appear. This options allows you to place your icon within a colored circle. If you select “yes” for this setting, then you will be presented with additional options for customizing your circle color and border. **Circle Color** If you chose “yes” for the “Circle Icon” setting, then this option will appear. Here you can pick a color to use for your circle. This color is independent from your Icon color selected earlier. You icon, in it’s color, will appear inside this a circle with the color you select here. **Show Circle Border** If you chose “yes” for the “Circle Icon” setting, then this option will appear. This option allows you to turn on a border for your circle. If selected, an additional option will appear to select your border color. **Circle Border Color** If you chose “yes” for the “Show Circle Border” setting, then this option will appear. Here you can adjust the color of the circle border. **Use Icon Font Size** If enabled, you can input a custom size for the icon that is displayed. ## Sizing Here you can change the width of the image. **Width** Applying a max width value here will limit the width of the Flipbox image. This only affects Flipbox that are not in icon mode. ## Spacing **Custom Padding** Padding is the space added inside of your flipbox item, between the edge of the file and its internal elements. You can add custom padding values to any of the flipbox item’s four sides. To remove custom margin, delete the added value from the input field. By default these values are measured in pixels, but you can input custom units of measurement into the input fields. # Flipbox Item Advanced Options Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

Question 18

Divi Gradient Text Module

Accepted Answer

By using Divi’s built-in background gradient tool, this module allow you to have gradient text without coding.

<img alt="showcase-12-1024x449.png" src="https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/RLJReiMvwo/showcase-12-1024x449.png" align="center">
# Content Options
**Gradient Text**
This field is where you can enter the content of your text. Text content spans the full width of the column that it is in.

### Background
With Divi’s built-in background gradient tool, you can style the gradient of the text.

# 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.

# 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 Glitch Text Module

Accepted Answer

The glitch effect can bring some very unique style to your site, but can be also very distracting if you overuse it. So Glitch responsibly!

# Content Options **Glitch Text** This field is where you can enter the content of your text. Text content spans the full width of the column that it is in. ## Glitch Effect This is where you can choose different types of animation for the glitch effect.

## Background **Background Color** Here you can choose a background color for your text module. **Background Image** Here you can choose a background image for your text module. ## Admin Label By default, your glitch text module will appear with a label that reads ‘Glitch Text’ in the builder. The Admin Label allows you to change this label for easy identification. # Design Options Here you can style and/or position your text just how you want it by choosing the text color, orientation, font, font size, font spacing, and line height. You can also designate a border style, set a max width for your module, and add custom margin and padding. # 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 Typing Effect Module

Accepted Answer

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

# Content Options ## Text **Before Text** This will add a static text before the typing effect. **Typing Effect Text** This will have an animated typing effect on your Title. To seperate the words in typing effect, you will need to add “|” e.g text1|word|animating **Typing Text on a new Line** Enable this option If you'd like to have the Typing text on a new line. **After Text** This will add a static text after the typing effect. **After Text on a new Line** Enable this option If you'd like to have the After text on a new line. ## Typing Effect This is where you can configure the typing settings such as how quickly the typing effect and backspacing takes place, then delays before starting a sentence with just a few clicks, set the animation to loop infinitely or randomise the order of the sentences.

**Use Loop** If enabled, typing effect will loop infinite. **Remove Cursor After Completed** This option will show up only when you disable ‘Use Loop’. This will remove the cursor after typing finish looping their effect. **Typing Speed (in ms)** Here you can control the speed of the typing effect. Lesser value will have faster typing effect. **Typing Backspacing (in ms)** Delay before backspacing. **Back Delay (in ms)** Here you can delay before backspacing. **Use Typing FadeOut** This will have fade out animation instead of backspacing. **Use Typing Shuffle** Here you can choose to shuffle your Typing Effect text strings. **Cursor Character** You can have your own custom Cursor Character here. The character is “|” by default. You can put in any characters, letters or numbers. **Animate in Viewport** Choose when you'd like to start the Typing effect when it comes to Viewport e.g 50% or 80% etc **Repeat Animation in Viewport** Enable this option to repeat the Typing effect when it comes to Viewport again. ## Admin Label By default, your typing effect module will appear with a label that reads ‘Supreme Typing’ in the builder. The Admin Label allows you to change this label for easy identification. # Design Options Here you can find the option to style the Before Text, Typing Effect and the After text. You can style and/or position your text just how you want it by choosing the text color, orientation, font, font size, font spacing, and line height. You can also designate a border style, set a max width for your module, and add custom margin and padding. ## Before Text **Background Color** If you like to have a Background color to the text which is showing **Before** the Typing text then specify it here. **Padding** Add Some padding around the **Before** Text. Useful If you've added Background color to the Typing text. And else you can play around with changing the Font, Size, Color, Wieght and more of the **Before** Text ## After Text **Background Color** If you like to have a Background color to the text which is showing **After** the Typing text then specify it here. **Padding** Add Some padding around the **After** Text. Useful If you've added Background color to the Typing text. And else you can play around with changing the Font, Size, Color, Wieght and more of the **After** Text ## Typing Styles **Cursor Color** By default, the cursor color in typing effect will appear the same as your title font color. If you would like to change the color of your cursor color, choose your desired color from the color picker using this option. **Background Color** If you like to have a Background color to the text which is **Typing** then specify it here. **Padding** Add Some padding around the **Typing** Text. Useful If you've added Background color to the Typing text. # Advanced Options Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

Divi Supreme

Need Help?