Question 1

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

Divi Image Accordion Module

Accepted Answer

Let's you display all of your images on your Divi website with a stunning hover/click animation and effects. Add as many items as you need providing them with icons, images, titles, descriptions, buttons, and links easily and quickly. It ensures the perfect image quality and combines them beautifully with amazing accordion effects. ![Image Accordion-min.gif](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/BbJQFpk7nt/Image%20Accordion-min.gif) # Content Options image accordion content options.png

Click on + Add new Item to add your first Image Accordion Item. Clicking + Add new Item will open a completely new list of design settings (including Content, Design, Advanced) for your new Image Accordion. See below for individual Image Accordion Item settings. After you add your first Accordion Item, you will see a gray bar appear with the title of your Image Hotspot shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the Image Accordion in the Main Content tab. ### Accordion Settings **Accordion Type** Here you can choose whether to open the Image Accordion by Hover or Click. **Accordion Content Animation** Choose any animation from 5 different animations for Content entrance. **Use Sequenced Animation** Enabling this option will add animation separately to all Elements in the Accordion such as Title, Description, Button, Icon etc. **Accordion Direction** You can change the accordion direction to either Horizontal or Vertical. **Accordion Height** Change Accordion height from here. # Design Options ### Overlay **Overlay Color** You can add Accordion to each Accordion from here, just change the color to any RGBA Value and it will be applied over your Image. This could be helpful to read your text clearly. ### Icon **Icon Color** Change Icon color from her, If you've added in the Accordion. **Use Icon Font Size** Enable this option If you want to change the size of the Icon, you'll then see a handle to control the size of the Icon. ### Icon Image If you've replaced your Icon with an Image then you can manage It's styling from here, you can add Border, Corner radius and Box Shadow. ### Title **Title Heading Level** Change the Heading level of the Title from H1 to H6. And else you can play around with other settings to style the Title text. ### Description Here you can play around with the styling of the Description text the same way you style the paragraph in Default Text Module. ### Button This is where you can style the Button If you've added in Accordion. Enable the switch "Use Custom Styles for Button" and then you'll see options to style the button the same way you design Default Divi Buttons. # Advanced Options Use the advanced options to give your Image Accordion module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module's visibility on certain devices. # Image Accordion Item Content Options item content options.png

**Make Item Expanded** As the name suggests, enable this option If you want the Item to be expanded by default. **Image** Add the Main Image for the Accordion here. **Use Icon** Enable this option If you want to add an Icon to the Accordion Content, then disable the switch If you want to use Image instead of icon. **Title** Your Main Title goes here. **Description** Your Description content goes here. **Show Button** Enable this switch If you want to use Button in your Accordion, then It will ask you for the Button Text & URL. **Horizontal Align** Here you can align the Accordion Content Horizontally to Left, Right & Center. **Vertical Align** Here you can align the Accordion Content Vertically to To, Bottom & Center. # Image Accordion Item Design Option ### Overlay **Overlay Color** You can add Accordion to each Accordion from here, just change the color to any RGBA Value and it will be applied over your Image. This could be helpful to read your text clearly. Enable Hover option to add a Hover Overlay effect ~ Best for Item settings. ### Title **Title Heading Level** Change the Heading level of the Title from H1 to H6. And else you can play around with other settings to style the Title text. ### Description Here you can play around with the styling of the Description text the same way you style the paragraph in Default Text Module. ### Button This is where you can style the Button If you've added in Accordion. Enable the switch "Use Custom Styles for Button" and then you'll see options to style the button the same way you design Default Divi Buttons. ### Sizing **Content Width** Change the Content width from here. # Image Accordion Item Advanced Options Use the advanced options to give your Image Accordion Item module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module's visibility on certain devices.

Question 3

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 4

Divi Image Module

Accepted Answer

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

# Content Options **Image** Place a valid image url here, or choose/upload an image via the WordPress Media Library. Images will always appeared left justified within their columns and will span the full width of your column. However, your image will never scale larger than its original upload size. The height of the image is determined by aspect ratio of your original image. ## Link **Open in Lightbox** Here you can choose whether or not your image will open in a Lightbox when clicked. If enabled, then your image will “zoom in” to their full size when clicked inside a modal window. This is a great feature for portfolios. **Link URL** Place a valid web URL in this field to turn your Image into a link. Leaving this field blank will simply leave your image as a static element. **Use as Video Popup** Enable this option if you want to show a video in overlay when user clicks on the Image. You'll then prompted to enter the URL of the Video you want to show in the overlay ## Transform & Rotation

**Perspective** The perspective CSS property gives an element a 3D-space. The strength of the effect is determined by the value. **Rotate Y** Defines a transformation that rotates an element around the ordinate (vertical axis) without deforming it. **Rotate X** Defines a transformation that rotates an element around the abscissa (horizontal axis) without deforming it. **Rotate Z** Defines a transformation that rotates an element around the z-axis without deforming it. ## Admin Label This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface. # Design Options Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything. ## Overlay **Image Overlay** If enabled, an overlay color and icon will be displayed when a visitors hovers over the image. **Overlay Color** Here define a color for the Overlay. **Use Icon** Enable this option if you also want to show an icon in the overlay of image when hover. **Overlay Icon Color** Here you can define a custom color for the overlay icon **Icon Picker** Select an Icon from Divi Icon library here. **Show overlay on Hover** Enabling this option will only show the Overlay when hover to image. You can disbale this option if you want to always show the Overlay. **Overlay Rounded Corners and Border** You can then add Corner Radius and Border to the overlay if you like ## Alignment **Image Alignment** Here you choose which direction your image floats within the column. You can float the image left, right or keep it centered. **Always Center Image On Mobile** Often times small images are more pleasing to the eye on mobile devices when they are centered. As columns break down, images that were aligned the left or right in smaller columns become orphaned when the columns break down and become 100% width. Enabling this column with force images to align to the center of the column on mobile without affecting the image alignment on desktop computers. # Advanced Options Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

Question 5

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](http://www.facebook.com) 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](https://developers.facebook.com/apps/). 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:

### Step 4: Navigate to Settings -> Basic

Fill up the forms required such as Domain(Make sure it’s your domain), Privacy Policy URL, Terms of Service URL and etc. Then Click Save Changes ### Step 4: Obtain Facebook APP ID

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

Question 6

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 7

Divi Scheduled Element Extension

Accepted Answer

Using this extension you can easily schedule the visibility of any Element like Section/Row/Module in Divi. **Awesome Features:** * You can choose who to show or hide based on the user’s logged-in status. Apply condition to show it for All Users, Logged In Users or Visitors. * Select any user roles which is available to you from your WordPress site. You can choose to show or hide for author or all user roles. * Select days of the week. Monday to Friday or even weekend with your preferred opening & closing time. * And More... This will extend the **Visibility Option** in all the Module settings that will allow you to use the Scheduled Element Extension. This feature is only available for Pro Users. Currently, the available supported modules are listed below: * All Divi Default Modules * All Divi Supreme Pro Modules(Pro Version). ### Before Using Scheduled Content Element Extension: Before you start using the Scheduled Content Element Extension you first make sure that’s active or Enabled from the Divi Supreme Settings. Go to Divi Supreme > Divi Supreme Pro and Enable the use of Scheduled Element Extension

## Usage To use Scheduled Element Extension, go to any of the supported module’s (listed above) settings and navigate to the** Advanced Tab** Scroll to **Visibility** and look for **Use Scheduled Element** Switch.

**Use Scheduled Element** Enable this option if you want to use this extension for any module. **Show or Hide Module** * **Show Option** - This option is very important. If you’ll select Show Option from the dropdown and will set the date and time then the module will be hidden till then but when the time arrives the Module appears which means you’ll not have to worry about the module visibility at a particular time If you don’t get time to change its visibility. * **Hide Option** - The same things go for the Hide Option. But your module will be visible till that time but when the time arrives the module will disappear. **Schedule a Date/Time** Enter your Desired date and time for the Module visibility to show or hide when the time arrives that you set here. **Use Between Date/Time** When you'll enable this option you'll see another Date/Time picker so you can show/hide an element between that date/time. * **Schedule a Date/Time** is the time of start. * **Use Between Date/Time** is the time of end. **Use Business Hour/Time** Enable this option if you want to show a Module only then when your business is open. **Select Day** Select your desired days here. **Opening Time** Add the Opening time of your business here so the module will be shown on your given time. **Closing Time** Add the Closing time of your business here so the module will be gone on your given time. The time format here will be 24 hours. **Apply To** From here you can control the visibility of the module for specific roles. * **All Users** - Choose this option if you want to show the module to everyone e.g Logged-In Users and Visitors and all others. * **Logged In Users** - Choose this option if you want to show this module to only logged in users only, you’ll also get the options to select specific roles or select all for everyone who’s logged In on your site. * **Visitor Users** - Choose this option if you want to show this module to only visitors, which means this module will not be visible to Logged in Members it will be only visible to those users who they’re logged out from your site. **Disable On** This will disable the Module on selected Devices.

Question 8

Divi Supreme Content Toggle Module

Accepted Answer

> The Layout might not show properly in the Divi Builder, Only on the front end It will be 100% accurate. This is something elegant themes will be improving in the near future for rendering divi library layout in visual builder. Using the Divi Supreme Content Toggle Module you can easily create a Toggle to switch between two content Layouts. Use it to create stunning Pricing Tables, Food Menus and much more you can think of. ![content toggle demo-min.gif](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/7aUT1SfzRW/content%20toggle%20demo-min.gif) # Content Options

### Content One **Heading** Your heading for the Content one switch goes here. **Content Type** Here you can choose the Type of Content, If you'll choose "**Custom Content**", you'll be able to add custom content such text, Images and stuff. And If you'll choose type as "**Library**" then you'll be prompted to choose a Divi Library Layout. And for the third content type **Shortcode**, If you'll select it you'll be able to add shortcode of the content you want to show in the Toggle One. ### Content Two **Heading** Your heading for the Content one switch goes here. **Content Type** Here you can choose the Type of Content, If you'll choose "**Custom Content**", you'll be able to add custom content such text, Images and stuff. And If you'll choose type as "**Library**" then you'll be prompted to choose a Divi Library Layout. And for the third content type **Shortcode**, If you'll select it you'll be able to add shortcode of the content you want to show in the Toggle Two. # Design Options

### Switcher **Switcher Size** Here you can change the size of the Toggle Switch. **Alignment** Change the alignment of the toggle switch here to Center, Left or Right. **Switcher Primary Background Color** Here you can change the switcher primary background color. Which is the default state of the Switch. **Switcher Secondary Background Color** Here you can change the background color of the switch when you'll click to Switch the Content, the background color of the switcher will be changed to what you've added here. **Switcher Inner Color** Here you can change the color of the Switcher that indicates on which Switch you're currently on. ### Heading One **Heading Level** Change the heading level from H1 to H6. Here you can play with the Heading One by changing its font, size, color and weight and even add shadow to the text. ### Heading Two **Heading Level** Change the heading level from H1 to H6. Here you can play with the Heading Two by changing its font, size, color and weight and even add shadow to the text. ### Content One **Content Background** Here you can change the background color of the Content One. **Content Padding** Add some padding inside the Content here, helpful If you've added Background, Border and Box shadow. **Content Spacing Top** Add some top spacing for the content one here If required. **Make this Layout Fullwidth** Enable this option to fullwidth the Layout. And else you can play around with changing Text Font, Weight, Size and much more. ### Content Two **Content Background** Here you can change the background color of the Content Two. **Content Padding** Add some padding inside the Content here, helpful If you've added Background, Border and Box shadow. **Content Spacing Top** Add some top spacing for the content two here If required. **Make this Layout Fullwidth** Enable this option to fullwidth the Layout. And else you can play around with changing Text Font, Weight, Size and much more for content two. # Advanced Options Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

Question 9

How to Download Divi Supreme Pro

Accepted Answer

You can access the latest version of our products at any time provided you’re still in the license term by logging into [Divi Supreme account](https://divisupreme.com/login/).

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

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

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

If you have any troubles accessing your account, try [resetting your password](https://divisupreme.com/my-account/lost-password/), and if that fails please [contact us](https://divisupreme.com/contact/).

Question 10

How to show a Popup Globally

Accepted Answer

If you want to show a Popup Globally on your site then you must follow this guide. We'll see how to show the Popup you've created Globally on your site. It could be a Sale Notice Popup, Important Notice or anything.

We can use the Divi's Theme Builder to show the Popup globally. Just Edit your Global Header or Footer as both shows on your whole site so will the Popup. Let's Edit the Global Footer.
![edit global footer.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/H2QYdA9iZJ/edit%20global%20footer.png)
Now you can open up any Module settings to set up the Popup. If you don't know how to set up a Popup here's a complete guide on our Popup Extension: [https://divisupreme.com/blog/how-to-create-popups-using-divi-popup-extension/](https://divisupreme.com/blog/how-to-create-popups-using-divi-popup-extension/)

Once you've opened the Module settings, you can go to Advanced tab -> Visibility -> Use Popup and set up the Popup the way you like. 
![setup your popup.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/4bNxin20sK/setup%20your%20popup.png)
Once you're done setting up the Popup, all you need to do now is Save the Changes and now you'll be able to see your Popup on Every Page/Post of your site.

Hope you'll found it useful, Let us know If you need any help. Have a great day!

Question 11

Divi Library Widget Extension

Accepted Answer

At times, you wish to add Divi modules right inside Sidebar Widget and with this extension, you can add any Divi Library Layout to Your Widget Area – Sidebars, Footer or any that you’ve created. 
### Before Using
Make sure to activate the extension by going to Divi Supreme -> "Enable Divi Library Widget" and enable it.
![enable extension.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/PaKwUUkkmr/enable%20extension.png)
### Usage
To use the Divi Library Widget extension, go to Appearance -> Widgets and there you'll find a new widget "Divi Library Widget". Just drag it and drop it to the place where you want to show It can be Sidebar, Footer etc.
![usage-min.gif](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/sKs1zIItSI/usage-min.gif)
So that's it, that's how easily you can use any Library layout in your sidebar.

Cheers!

Question 12

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.
![Blog Carousel Demo-min.gif](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/pGgR38pTtU/Blog%20Carousel%20Demo-min.gif)

# Content Options
<img alt="blog-carousel-content-1.png" src="https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/rHI8G12zbg/blog-carousel-content-1.png" width="40%">

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

# Readmore
This is where you can style the Readmore button. Enable the switch "Use Custom Styles for Readmore" and then you'll see options to style the Readmore button the same way you design Default Divi Buttons.

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

How to Solve common issues caused by Cache.

Accepted Answer

If you're facing any issue that you think shouldn't happen or the Plugin isn't behaving properly? Then you might wanna do the Following:

* Clear your browser cache.
* Clear/purge any cache plugin.
* Clear/purge if you're on CDN.
* Re save Permalink.
* Might be a Plugin.

## Clear your browser cache

Most of the time any unusual plugin behavior or any kind of new is caused by the Browser Cache. Clearing your Browser Cache might help here. You can also try Incognito Mode in such situations. Here's an article to clear browser cache on any Browser: [elegantthemes.com/blog/wordpress/how-to-clear-all-browser-caches](https://www.elegantthemes.com/blog/wordpress/how-to-clear-all-browser-caches)

## Clear/purge any cache Plugin

If you've installed any Caching plugin like WP Super Cache, W3 Total Cache or similar Caching Plugins, then you must try to clear your Cache using the Plugin. Almost every plugin provide an option in admin bar to Clear/Purge Cache. Take a look 👀

## Clear/purge if you're on CDN

Your CDN might be a culprit, so you must clear your CDN Cache as well. Login to your CDN Provider Dashboard and find an option to clear your CDN Cache.

## Re save Permalink

Resaving you permalink might be helpful sometimes. Here's how to resave it:

![Screen Recording 2020-12-18 at 12.23.59 PM.gif](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/G2VfMYu1NZ/Screen%20Recording%202020-12-18%20at%2012.23.59%20PM.gif)

## Might be a Plugin.

Try to deactivate all the plugins installed on your site to see If there's any conflict caused by any plugin you've installed on your site. If you found out that your issue was caused by this specific plugin, you might need to report them about the conflict.

Question 14

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!

# Content Options

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

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 16

Enable SVG Upload in Divi

Accepted Answer

We've added a new functionality to Divi Supreme and using that you can easily Enable the SVG Uploads in Divi by simply enabling a switch. ### How to Enable SVG Uploads To enable the SVG Uploads in Divi all you've to do is open up Divi Supreme Settings > Misc > **Allow SVG file Upload** enable this switch and click on Save Changes button. SVG Uploads option in Divi.png

Now when you'll try to upload any SVG to Media Library or from anywhere where you can access media Library, you'll see the SVG file uploads without any restrictions. SVG Uploads in Divi.png

That's how easily you can enable SVG uploads in Divi using this extra option available in Divi Supreme. Hope you'll find it useful and you'll don't need to add custom code to functions.php or install a separate plugin for this.

Question 17

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 18

Divi Breadcrumbs Module

Accepted Answer

Display a hierarchical representation of navigation links and make your site’s navigation easier to follow, add breadcrumbs to your site to improve the user’s experience, and yeah It's good for SEO too.
![dsm-breadcrumbs-demo.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/S2ifBw5hVv/dsm-breadcrumbs-demo.png)

# Content Options
![dsm-breadcrumbs-content-option.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/kAzqTvHJT7/dsm-breadcrumbs-content-option.png)

### BreadCrumbs
**Show Custom Home**

Enable this option If you want to show a Custom Text for the Home Link.

**Show Home Icon**

Enable this option If you want to show an Icon along with the Text of Home link. You'll see an Icon Picker where you can choose any icon from Divi Icon Library for your Home Link.

**Custom Separator Icon**

Enable this option If you want to set a Custom Icon for the Separator. You'll see an Icon Picker where you can choose any icon from Divi Icon Library for your Separator.

# Design Options
### Alignment
Here you can change the Alignment of the Breadcrumbs, enable the responsive option to set a different alignment for Mobile Devices.
### Items
Here you can design the Items/Links in the Breadcrumbs, you can add Background Color, Padding, Border Radius, Box Shadow and more.

**Item Background Color**

Here you can define a custom Color for the Links/Items in the Breadcrumb.

**Bottome Gap**

Add a gap between Breadcrumbs Items/Links if the structure of the Breadcrumbs is longer than the space given to it.

**Items Padding**

Set a padding around the Item/Link from here, useful If you've added a Background color to the Item.

You can design the Item/Link color, font size and more.

**Rounded Corners and Borders**

Add Rounded Corners or Borders to the Item/Link here.

**Box Shadow**

Set a custom Shadow to show for the Links/Items in the Breadcrumbs. Enable Hover option to show shadow on Hover.

### Home Icon
Here you'll be able to design the Home Icon If you've enabled it.

**Icon Color**

Here you can change the Color of the Home Icon. If you've enabled the option (Show Home Icon) in the Content tab.

**Icon Size**

Here can define a custom size for the Home Icon.

### Separators
Here you'll be able to design the Separator in the Breadcrumbs.

**Separators Background Color**

Here you can define a custom Color for the Separator in the Breadcrumb.

**Bottome Gap**

Add a gap to Separator if you feel there is a need of it.

**Items Padding**

Set a padding around the Separator from here, useful If you've added a Background color to the Separator.

You can design the Item/Link color, font size and more.

**Rounded Corners and Borders**

Add Rounded Corners or Borders to the Separator here.

**Box Shadow**

Set a custom Shadow to show for the Separators in the Breadcrumbs.

### Current
Here you'll be able to set custom design values for the Current Item in the breadcrumbs.

**Item Background Color**

Here you can define a custom Color for the Current Links/Items in the Breadcrumb.

**Bottome Gap**

Add a gap between Breadcrumbs Current Items/Links if the structure of the Breadcrumbs is longer than the space given to it.

**Items Padding**

Set a padding around the Current Item/Link from here, useful If you've added a Background color to the Item.

You can also design the Current Item/Link color, font size and more.

**Rounded Corners and Borders**

Add Rounded Corners or Borders to the Current Item/Link here.

**Box Shadow**

Set a custom Shadow to show for the Current Links/Items in the Breadcrumbs. Enable Hover option to show shadow on Hover.

# Advanced Options
Use the advanced options to give your Breadcrumbs 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 Facebook Feed Module

Accepted Answer

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

# Content Options

**APP ID** Enter the Facebook App ID here. You can go to https://developers.facebook.com/ and click on Create New App to get one. It is a must to provide a Facebook App ID which required to use this module. **Facebook Page URL** The URL of the Facebook Page **Tabs** Using this option you can add more tabs to the Facebook Feed Module. You can add these tabs: * Timeline * Events * Messages You can even uncheck any of them if you don't want to display them. **Hide Cover Photo** Hide cover photo in the header **Use Small Header** Use the small header instead **Show Face Pile** Show profile photos when friends like this ## Admin Label This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface. # Design Options Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything. ## Alignment Here you can choose to have your facebook feed aligned to the left, right or center. ## Sizing **Height** Adjust the height of your Facebook Feed. The pixel height of the plugin. Min. is 70. # Advanced Options Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices. # Setup Facebook App ID You will need your own Facebook account in order to create the Facebook App ID so ensure that you have created a free account by going to http://www.facebook.com first before starting this guide. Step 1: Login to Facebook and go to developers site 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:

### Step 4: Navigate to Settings > Basic

Fill up the forms required such as Domain(Make sure it’s your domain), Privacy Policy URL, Terms of Service URL and etc. Then Click Save Changes ### Step 5: Obtain Facebook APP ID

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

Question 20

Popup styling issue on Frontend

Accepted Answer

If you're facing such issue then here's a quick solution. All you've to do is to make sure that the Layout type in Library is set to "Layout". This is a bug with Divi so that's the only solution for now.
![layout type.png](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/3Jn6Ar8xly/layout%20type.png)

So that's it, now the Popup on Front end will load without any styling issue, Cheer!

Divi Supreme

Need Help?