Want to add Business hours to Divi? And you are looking for some Plugin in the WordPress Repository? Divi Supreme got a new Module Called Business Hours, with this Module for Divi you can easily add business hours to Divi Builder without installing any sort of plugin. The setup is very simple and you can easily make attractive Business hours Section in Divi. # Content Options **Business Hours** You can make Business hours of your choice just click on +Add New Item and then Choose Days and Time of your Business. You can add as many items you want by clicking on the +Add New Item button. # Design Options Every Divi module has a long list of design settings that you can use to change just about anything. In the Design Option, you can style your module in different ways that came by default with Divi but some options that are added by Divi Supreme plugin are these: ## Day Text: This is where you can style the Day text. You will find all of the styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your Day Text looks. ## Time Text This is where you can style the Time text. You will find all of the styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your Time Text looks. ## Separator You can add a separator line between Day and time from 8 different selections. **Weight**: You can change the weight of the line i.e 2px **Color**: You can change the color of the line **Gap Spacing**: You can change the gap spacing between the Day and Time Text. ## Divider You can add a Divider underneath every Business hours item. ## Spacing Item Spacing: This is where you will choose how much spacing should be added to business hours. Padding is the space added inside of your business hours items. # Advanced Options Use the advanced options to give your business hours module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices. # Business Hours Item Content ## Text **Time** Here put the time period you want to set for your business. **Day** Here put the Day name. ## Business Hours Design Options In the Design option, you can change font, colors and many more of a particular item. ## Day Text: This is where you can style Day text. As mentioned before. ## Time Text This is where you can style the Time text. As mentioned before. ## Business Hours Item Advanced Options Use the advanced options to give your Business Hours Item custom CSS ID’s and Classes. Add some custom CSS for advanced styling.

Want to add Business hours to Divi? And you are looking for some Plugin in the WordPress Repository? Divi Supreme got a new Module Called Business Hours, with this Module for Divi you can easily add business hours to Divi Builder without installing any sort of plugin. The setup is very simple and you can easily make attractive Business hours Section in Divi. # Content Options **Business Hours** You can make Business hours of your choice just click on +Add New Item and then Choose Days and Time of your Business. You can add as many items you want by clicking on the +Add New Item button. # Design Options Every Divi module has a long list of design settings that you can use to change just about anything. In the Design Option, you can style your module in different ways that came by default with Divi but some options that are added by Divi Supreme plugin are these: ## Day Text: This is where you can style the Day text. You will find all of the styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your Day Text looks. ## Time Text This is where you can style the Time text. You will find all of the styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your Time Text looks. ## Separator You can add a separator line between Day and time from 8 different selections. **Weight**: You can change the weight of the line i.e 2px **Color**: You can change the color of the line **Gap Spacing**: You can change the gap spacing between the Day and Time Text. ## Divider You can add a Divider underneath every Business hours item. ## Spacing Item Spacing: This is where you will choose how much spacing should be added to business hours. Padding is the space added inside of your business hours items. # Advanced Options Use the advanced options to give your business hours module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices. # Business Hours Item Content ## Text **Time** Here put the time period you want to set for your business. **Day** Here put the Day name. ## Business Hours Design Options In the Design option, you can change font, colors and many more of a particular item. ## Day Text: This is where you can style Day text. As mentioned before. ## Time Text This is where you can style the Time text. As mentioned before. ## Business Hours Item Advanced Options Use the advanced options to give your Business Hours Item custom CSS ID’s and Classes. Add some custom CSS for advanced styling.

This will show a badge before or after the text. A great way to show highlighted/important text badge. # Content Options **Main 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. **Badges Text** This field is where you can enter the badge of your text. **Badges Placement** Here you can define whether the badge should be before or after the main text. ## Background **Background Color** Here you can choose a background color for your module. **Background Image** Here you can choose a background image for your module. ## Admin Label By default, your Supreme Text Badges text module will appear with a label that reads ‘Supreme Text Badges’ 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. ## Main Text You can style the Main text here. You can play around with changing the font, size, color, weight and more of the Main text. ## Badges Text Here’s where you can style the badges appearance. **Background Color** You can choose your desired color from the color picker for the badge background color. This will be apply a background color to the badge only. **Gap** The Gap space between the main text and the badge. # 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.

This will show a badge before or after the text. A great way to show highlighted/important text badge. # Content Options **Main 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. **Badges Text** This field is where you can enter the badge of your text. **Badges Placement** Here you can define whether the badge should be before or after the main text. ## Background **Background Color** Here you can choose a background color for your module. **Background Image** Here you can choose a background image for your module. ## Admin Label By default, your Supreme Text Badges text module will appear with a label that reads ‘Supreme Text Badges’ 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. ## Main Text You can style the Main text here. You can play around with changing the font, size, color, weight and more of the Main text. ## Badges Text Here’s where you can style the badges appearance. **Background Color** You can choose your desired color from the color picker for the badge background color. This will be apply a background color to the badge only. **Gap** The Gap space between the main text and the badge. # 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.

Create an organized and beautiful to read headlines with Supreme Text Divider Module. With many border styles to choose from. You can also put a text in-between the Dividers or align them to suit your design. # Content Options **Divider 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 **Background Color** Here you can choose a background color for your module. **Background Image** Here you can choose a background image for your module. ## Admin Label By default, your Supreme Text Divider text module will appear with a label that reads ‘Supreme Text Divider in the builder. The Admin Label allows you to change this label for easy identification. # Design Options Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything. ## Color You can choose your desired color from the color picker for the divider color. This will be apply a color to the divider only. ## Styles Here’s where you can style the divider appearance. **Divider Style** Here you can choose your divider style such as solid, dotted, dashed and etc. **Divider Position** This controls the vertical alignment of the Text Divider. ## Text **Text Alignment** This controls the text alignment of the Text Divider. ## Divider Text You can change the Heading level of the Divider text here. And then you can style it the same way you style text in Divi. ## Sizing Here’s where you can style the Text Divider appearance. **Divider Weight** You can input a custom weight for the Divider which also refers to the thickness of the line. **Text Gap** The Gap space between the main text and the divider. **Height** Define how much vertical space you would like your text divider module to create (in pixels). # 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.

Create an organized and beautiful to read headlines with Supreme Text Divider Module. With many border styles to choose from. You can also put a text in-between the Dividers or align them to suit your design. # Content Options **Divider 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 **Background Color** Here you can choose a background color for your module. **Background Image** Here you can choose a background image for your module. ## Admin Label By default, your Supreme Text Divider text module will appear with a label that reads ‘Supreme Text Divider in the builder. The Admin Label allows you to change this label for easy identification. # Design Options Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything. ## Color You can choose your desired color from the color picker for the divider color. This will be apply a color to the divider only. ## Styles Here’s where you can style the divider appearance. **Divider Style** Here you can choose your divider style such as solid, dotted, dashed and etc. **Divider Position** This controls the vertical alignment of the Text Divider. ## Text **Text Alignment** This controls the text alignment of the Text Divider. ## Divider Text You can change the Heading level of the Divider text here. And then you can style it the same way you style text in Divi. ## Sizing Here’s where you can style the Text Divider appearance. **Divider Weight** You can input a custom weight for the Divider which also refers to the thickness of the line. **Text Gap** The Gap space between the main text and the divider. **Height** Define how much vertical space you would like your text divider module to create (in pixels). # 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.

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

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

A must for all Divi sites and website owners. An important feature for many in order to get trust from your visitors. The star rating module is built with Google Schema in mind, and it’s fully customizable! # Content Options **Rating Scale** Default at 0 – 5. Choose a scale from 0 to 5 or 0 to 10 **Rating** Here you can assign the rating based on the scale chosen. **Title** Enter the title for the rating. **Display Type** Here you can choose whether you want your Title to be stacked or to be displayed as inline. **Show Rating Number** This will show the rating number text after the star icons. # Design Options Here you can style and/or position your text or header text just how you want it by choosing the text color, orientation, font, font size, font spacing, and line height. You can also designate a border style, set a max width for your module, and add custom margin and padding. ## Stars **Size** Change the size of the stars **Gap** Control the gap between each star. **Color** Choose the color of the star icons. ## Title **Gap** Here you can control the space between the title and the star icons. And else you can play around with the Title text by changing Font, Size, Weight and more of it. ## Rating Number Text Here you can play around with the Rating Number text by changing Font, Size, Weight and more of it. This is the text that's shown after the Rating Stars only when the "Show Rating Number" is enabled in the Content tab. # 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.

A must for all Divi sites and website owners. An important feature for many in order to get trust from your visitors. The star rating module is built with Google Schema in mind, and it’s fully customizable! # Content Options **Rating Scale** Default at 0 – 5. Choose a scale from 0 to 5 or 0 to 10 **Rating** Here you can assign the rating based on the scale chosen. **Title** Enter the title for the rating. **Display Type** Here you can choose whether you want your Title to be stacked or to be displayed as inline. **Show Rating Number** This will show the rating number text after the star icons. # Design Options Here you can style and/or position your text or header text just how you want it by choosing the text color, orientation, font, font size, font spacing, and line height. You can also designate a border style, set a max width for your module, and add custom margin and padding. ## Stars **Size** Change the size of the stars **Gap** Control the gap between each star. **Color** Choose the color of the star icons. ## Title **Gap** Here you can control the space between the title and the star icons. And else you can play around with the Title text by changing Font, Size, Weight and more of it. ## Rating Number Text Here you can play around with the Rating Number text by changing Font, Size, Weight and more of it. This is the text that's shown after the Rating Stars only when the "Show Rating Number" is enabled in the Content tab. # 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.

The Supreme Tilt Image allows you to create a unique and cool images. An interactive parallax tilt effect that responds to mouse move. Apply an Overlay Icon or Text to the image for better visibility. # 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. ## Tilt Settings **Disable on Mobile** This will disable the Image Tilt feature for Mobile Devices. **Perspective** Transform perspective, the lower the more extreme the tilt gets. **Scale** Scale on hover. 2 = 200%, 1.5 = 150%. **Max Rotation** The Max Tilt Rotation. The lower the less rotation the tilt gets. **Speed** The Speed of the enter/exit transition. **Use Glare** If enabled, it will have a “glare” effect on hover. **GLARE** The glare opacity. **Reverse** This will reverse the tilt direction. **Use 3D Pop Out Effect** This will create a pop out effect between the image and the overlay. **OVERLAY 3D POP OUT** The distance between the image and the overlay. ## 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. ## Overlay Here you can have overlay text/icon on top of the image. **Use Icon** If enabled, an overlay icon will be displayed over the image. **Overlay Title** Enter the title for the overlay. **Overlay Content** Enter the Content for the overlay. **Show on Hover** If enabled, overlay text will only show up on hover. ## 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 **Overlay Icon Color** Here you can define a custom color for the overlay icon **Overlay Color** Here you can define a custom color for the overlay. **Use Icon Font Size** If enabled, you can input a custom size for the icon that is displayed. # 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. ## Overlay Text Here you can style of overlay title and content such as fonts, colors and the alignment. **Text Vertical Alignment** You can change the vertical alignment of the Overlay text here. # Advanced Options Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

The Supreme Tilt Image allows you to create a unique and cool images. An interactive parallax tilt effect that responds to mouse move. Apply an Overlay Icon or Text to the image for better visibility. # 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. ## Tilt Settings **Disable on Mobile** This will disable the Image Tilt feature for Mobile Devices. **Perspective** Transform perspective, the lower the more extreme the tilt gets. **Scale** Scale on hover. 2 = 200%, 1.5 = 150%. **Max Rotation** The Max Tilt Rotation. The lower the less rotation the tilt gets. **Speed** The Speed of the enter/exit transition. **Use Glare** If enabled, it will have a “glare” effect on hover. **GLARE** The glare opacity. **Reverse** This will reverse the tilt direction. **Use 3D Pop Out Effect** This will create a pop out effect between the image and the overlay. **OVERLAY 3D POP OUT** The distance between the image and the overlay. ## 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. ## Overlay Here you can have overlay text/icon on top of the image. **Use Icon** If enabled, an overlay icon will be displayed over the image. **Overlay Title** Enter the title for the overlay. **Overlay Content** Enter the Content for the overlay. **Show on Hover** If enabled, overlay text will only show up on hover. ## 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 **Overlay Icon Color** Here you can define a custom color for the overlay icon **Overlay Color** Here you can define a custom color for the overlay. **Use Icon Font Size** If enabled, you can input a custom size for the icon that is displayed. # 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. ## Overlay Text Here you can style of overlay title and content such as fonts, colors and the alignment. **Text Vertical Alignment** You can change the vertical alignment of the Overlay text here. # Advanced Options Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

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.

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.

By using Divi’s built-in background gradient tool, this module allow you to have gradient text without coding. # 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.

By using Divi’s built-in background gradient tool, this module allow you to have gradient text without coding. # 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.

Create engaging and fresh interactions using Divi Block Reveal Image Module. The effect first shows a decorative block element drawn and when it starts to decrease its size, it uncovers image underneath. You get 4 types of animation to choose from. # Content Options ## Image Add the Actual Image here that will be shown after a cool animation. ## Link **Open in Lightbox** Here you can choose whether or not the image should open in Lightbox. Note: if you select to open the image in Lightbox, URL options below will be ignored. **Open as Video Popup** Put the Video link on the Image URL. Copy the video URL link and paste it here. Support: YouTube, Vimeo and Dailymotion. Then If you click on the Image a video Popup will be shown. ## Block Reveal Animation **Block Reveal Animation style** Here you can set Animation Direction. You can select where it will start from and where it will be ending. You Have Four Options to choose from: * Left to Right * Right to Left * Top to Bottom * Bottom to Top **Block Reveal Color** Here you can change the color of the Block which will be shown first with an animation. **Delay** Adjust the Delay of the Block Reveal Animation here. **Animate in Viewport** The Text Animation will only be shows at a specific Viewport. # Design Options ## Overlay **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. **Overlay Rounded Corners, Border and Box Shadow** Here you can control the corner radius of the Image Overlay. 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 Overlay. ## Add Rounded Corners, Border and Box Shadow to Image Here you’ll find options to control the corner radius of the Image. You can play around with adding borders and Box Shadow to the Image under Design Options. # Advanced Options Use the advanced options to give your Block Reveal Image module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

Create engaging and fresh interactions using Divi Block Reveal Image Module. The effect first shows a decorative block element drawn and when it starts to decrease its size, it uncovers image underneath. You get 4 types of animation to choose from. # Content Options ## Image Add the Actual Image here that will be shown after a cool animation. ## Link **Open in Lightbox** Here you can choose whether or not the image should open in Lightbox. Note: if you select to open the image in Lightbox, URL options below will be ignored. **Open as Video Popup** Put the Video link on the Image URL. Copy the video URL link and paste it here. Support: YouTube, Vimeo and Dailymotion. Then If you click on the Image a video Popup will be shown. ## Block Reveal Animation **Block Reveal Animation style** Here you can set Animation Direction. You can select where it will start from and where it will be ending. You Have Four Options to choose from: * Left to Right * Right to Left * Top to Bottom * Bottom to Top **Block Reveal Color** Here you can change the color of the Block which will be shown first with an animation. **Delay** Adjust the Delay of the Block Reveal Animation here. **Animate in Viewport** The Text Animation will only be shows at a specific Viewport. # Design Options ## Overlay **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. **Overlay Rounded Corners, Border and Box Shadow** Here you can control the corner radius of the Image Overlay. 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 Overlay. ## Add Rounded Corners, Border and Box Shadow to Image Here you’ll find options to control the corner radius of the Image. You can play around with adding borders and Box Shadow to the Image under Design Options. # Advanced Options Use the advanced options to give your Block Reveal Image module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

Add Facebook Comments to the anywhere to allow your readers to easily comment using their Facebook account. # 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. **Page URL** Get the Comments of the Current Page, or for a Custom URL. This can be other page URL but it’s best to use it on your current page URL to keep track of the Facebook comments related to your page. **Number of Posts** The number of comments to show by default. The minimum value is 1. **Color Scheme** The color scheme used by the comments plugin. Can be “light” or “dark”. **Order by** The order to use when displaying comments. Can be “social”, “reverse_time”, or “time”. The different order types are explained in the FAQ **Social** – This is also known as “Top”. The comments plugin uses social signals to surface the highest quality comments. Comments are ordered so that the most relevant comments from friends and friends of friends are shown first, as well as the most-liked or active discussion threads. Comments marked as spam are hidden from view. **Time** – Comments are shown in the order that they were posted, with the oldest comments at the top and the newest at the bottom. **Reverse Time** Comments are shown in the opposite order that they were posted, with the newest comments at the top and the oldest at the bottom. ## Admin Label This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface. # Design Options Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything. # Advanced Options Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

Add Facebook Comments to the anywhere to allow your readers to easily comment using their Facebook account. # 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. **Page URL** Get the Comments of the Current Page, or for a Custom URL. This can be other page URL but it’s best to use it on your current page URL to keep track of the Facebook comments related to your page. **Number of Posts** The number of comments to show by default. The minimum value is 1. **Color Scheme** The color scheme used by the comments plugin. Can be “light” or “dark”. **Order by** The order to use when displaying comments. Can be “social”, “reverse_time”, or “time”. The different order types are explained in the FAQ **Social** – This is also known as “Top”. The comments plugin uses social signals to surface the highest quality comments. Comments are ordered so that the most relevant comments from friends and friends of friends are shown first, as well as the most-liked or active discussion threads. Comments marked as spam are hidden from view. **Time** – Comments are shown in the order that they were posted, with the oldest comments at the top and the newest at the bottom. **Reverse Time** Comments are shown in the opposite order that they were posted, with the newest comments at the top and the oldest at the bottom. ## Admin Label This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface. # Design Options Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything. # Advanced Options Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

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.

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.

All the Facebook Modules in the Divi Supreme use the Facebook APP ID to work perfectly and for this, you should have created an APP ID from the [Facebook Developers site](https://developers.facebook.com/apps/). To first create a Facebook APP ID, you may see this guide here: https://docs.divisupreme.com/knowledgebase/how-to-create-facebook-app-id/ When you’re done with creating your Facebook APP ID you can now put it in Divi Supreme Plugin’s Page Settings. For this go to** Divi Supreme > Social Media Settings**: And in the Facebook APP ID field, Paste your Facebook APP ID which you’ve created already. **Good Luck!**

All the Facebook Modules in the Divi Supreme use the Facebook APP ID to work perfectly and for this, you should have created an APP ID from the [Facebook Developers site](https://developers.facebook.com/apps/). To first create a Facebook APP ID, you may see this guide here: https://docs.divisupreme.com/knowledgebase/how-to-create-facebook-app-id/ When you’re done with creating your Facebook APP ID you can now put it in Divi Supreme Plugin’s Page Settings. For this go to** Divi Supreme > Social Media Settings**: And in the Facebook APP ID field, Paste your Facebook APP ID which you’ve created already. **Good Luck!**

If you just need a simple Google Map, then this Embed Google Map Module will do the job nicely. This will embed into your Divi’s site easily without having to worry about anything else. # Content Options **Address** Enter an address for the map, and the address will be geocoded and displayed on the map. You can simply type in an address in a standard format, such as “1235 Sunny Road, Some City, State, 88343.” **Zoom** The Zoom level of the map. ## Admin Label This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface. # Design Options Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything. # Advanced Options Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

If you just need a simple Google Map, then this Embed Google Map Module will do the job nicely. This will embed into your Divi’s site easily without having to worry about anything else. # Content Options **Address** Enter an address for the map, and the address will be geocoded and displayed on the map. You can simply type in an address in a standard format, such as “1235 Sunny Road, Some City, State, 88343.” **Zoom** The Zoom level of the map. ## Admin Label This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface. # Design Options Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything. # Advanced Options Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

If you're getting this error Notice after Installing Divi Supreme than this guide will help you to solve this issue. This is a bug in Divi and we're hoping that it will be solved very soon. > Error Message: Divi uses uncombined and unminified javascript files because "SCRIPT_DEBUG" constant on wp-config.php has been set to "true". Other plugin can enforce Divi to use uncombined and unminified javascript files by filtering "et_load_unminified_scripts" filter as well. To Solve: 1. Deactivate Divi Supreme Plugin, If you've installed both Pro/Free than deactivate both. 2. Go to Divi -> Theme Options -> and Turn On "Minify And Combine Javascript Files" and Save the Changes. 3. Now Reactivate Divi Supreme Pro/Lite and you'll not face this issue. Have a great day!

If you're getting this error Notice after Installing Divi Supreme than this guide will help you to solve this issue. This is a bug in Divi and we're hoping that it will be solved very soon. > Error Message: Divi uses uncombined and unminified javascript files because "SCRIPT_DEBUG" constant on wp-config.php has been set to "true". Other plugin can enforce Divi to use uncombined and unminified javascript files by filtering "et_load_unminified_scripts" filter as well. To Solve: 1. Deactivate Divi Supreme Plugin, If you've installed both Pro/Free than deactivate both. 2. Go to Divi -> Theme Options -> and Turn On "Minify And Combine Javascript Files" and Save the Changes. 3. Now Reactivate Divi Supreme Pro/Lite and you'll not face this issue. Have a great day!

Create and Embed Twitter Timeline Feed easily without any coding. # Content Options **Twitter Timeline Settings** **Twitter Username** Enter the Twitter Username without the hashtag @ e.g TwitterDev **Limit Tweets** Here you can limit the number of tweets. **Number of Tweets** Display a specific number of items between 1 and 20. **Theme** Here you can choose whether the Twitter Timeline will appear in light or dark theme. **Show Header** Hides the timeline header. Implementing sites must add their own Twitter attribution, link to the source timeline, and comply with other Twitter display requirements. **Show Footer** Hides the timeline footer and Tweet composer link, if included in the timeline widget type. **Show Border** Removes all borders within the widget including borders surrounding the widget area and separating Tweets. **Show Scrollbar** Crops and hides the main timeline scrollbar, if visible. Please consider that hiding standard user interface components can affect the accessibility of your website. **Remove Widget’s Background Color** Enable this Option to Removes Widget’s Background Color ## 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. ## Sizing **Height** Adjust the height of your Twitter Timeline. The pixel height of the plugin. Min. is 200. # 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.

Create and Embed Twitter Timeline Feed easily without any coding. # Content Options **Twitter Timeline Settings** **Twitter Username** Enter the Twitter Username without the hashtag @ e.g TwitterDev **Limit Tweets** Here you can limit the number of tweets. **Number of Tweets** Display a specific number of items between 1 and 20. **Theme** Here you can choose whether the Twitter Timeline will appear in light or dark theme. **Show Header** Hides the timeline header. Implementing sites must add their own Twitter attribution, link to the source timeline, and comply with other Twitter display requirements. **Show Footer** Hides the timeline footer and Tweet composer link, if included in the timeline widget type. **Show Border** Removes all borders within the widget including borders surrounding the widget area and separating Tweets. **Show Scrollbar** Crops and hides the main timeline scrollbar, if visible. Please consider that hiding standard user interface components can affect the accessibility of your website. **Remove Widget’s Background Color** Enable this Option to Removes Widget’s Background Color ## 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. ## Sizing **Height** Adjust the height of your Twitter Timeline. The pixel height of the plugin. Min. is 200. # 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.

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.

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.

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.

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.

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.

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.

Create an organized and unique Icon Divider with Supreme Icon Divider Module. With many border styles to choose from. You can put an icon in-between the Dividers or align them to suit your design. # Content Options **Use Icon** When using Icon Divider, you can choose to either use an Icon or and Image with your text. If you select “yes” for the “Use Icon” option, then you will be presented with the following options to customize your icon. If you do not choose to use an Icon, then you will be prompted to upload an image instead. **Icon** If you chose “yes” for the “Use Icon” setting, then this option will appear. This options presents you with a list of available icons that you can use with your Perky Animate text. Simply click on the con that you would like to use and it will appear in your Icon Divider. **Image** If you did not choose to use an Icon, then this setting will appear. Place a valid image url here, or choose/upload an image via the WordPress Media Library. However, your image will never scale larger than its original upload size. The height of the Icon Divider image is determined by the aspect ratio of your original image, so making all of your Icon Divider images the same height is a good idea if you are placing them side by side. ## Background **Background Color** Here you can choose a background color for your module. **Background Image** Here you can choose a background image for your module. ## Admin Label By default, your Supreme Icon Divider text module will appear with a label that reads ‘Supreme Icon Divider’ in the builder. The Admin Label allows you to change this label for easy identification. # Design Options Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything. ## Image & Icon **Icon Color** If you chose “yes” for the “Use Icon” setting, then this option will appear. This option allows you to customize the color of your Icon. By default, the icons are set to your theme accent color. **Circle Icon** If you chose “yes” for the “Use Icon” setting, then this option will appear. This options allows you to place your icon within a colored circle. If you select “yes” for this setting, then you will be presented with additional options for customizing your circle color and border. **CIRCLE COLOR** If you chose “yes” for the “Circle Icon” setting, then this option will appear. Here you can pick a color to use for your circle. This color is independent from your Icon color selected earlier. You icon, in it’s color, will appear inside this a circle with the color you select here. **Show Circle Border** If you chose “yes” for the “Circle Icon” setting, then this option will appear. This option allows you to turn on a border for your circle. If selected, an additional option will appear to select your border color. **CIRCLE BORDER COLOR** If you chose “yes” for the “Show Circle Border” setting, then this option will appear. Here you can adjust the color of the circle border. **Use Icon Font Size** If enabled, you can input a custom size for the icon that is displayed. ## Alignment This controls the divider alignment of the Icon Divider. ## Color You can choose your desired color from the color picker for the divider color. This will be apply a color to the divider only. ## Styles Here’s where you can style the divider appearance. **Divider Style** Here you can choose your divider style such as solid, dotted, dashed and etc. **Divider Position** This controls the vertical alignment of the Icon Divider. ## Sizing Here’s where you can style the Text Divider appearance. **Divider Weight** You can input a custom weight for the Divider which also refers to the thickness of the line. **Icon Gap** The Gap space between the icon and the divider. # Advanced Options Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

Create an organized and unique Icon Divider with Supreme Icon Divider Module. With many border styles to choose from. You can put an icon in-between the Dividers or align them to suit your design. # Content Options **Use Icon** When using Icon Divider, you can choose to either use an Icon or and Image with your text. If you select “yes” for the “Use Icon” option, then you will be presented with the following options to customize your icon. If you do not choose to use an Icon, then you will be prompted to upload an image instead. **Icon** If you chose “yes” for the “Use Icon” setting, then this option will appear. This options presents you with a list of available icons that you can use with your Perky Animate text. Simply click on the con that you would like to use and it will appear in your Icon Divider. **Image** If you did not choose to use an Icon, then this setting will appear. Place a valid image url here, or choose/upload an image via the WordPress Media Library. However, your image will never scale larger than its original upload size. The height of the Icon Divider image is determined by the aspect ratio of your original image, so making all of your Icon Divider images the same height is a good idea if you are placing them side by side. ## Background **Background Color** Here you can choose a background color for your module. **Background Image** Here you can choose a background image for your module. ## Admin Label By default, your Supreme Icon Divider text module will appear with a label that reads ‘Supreme Icon Divider’ in the builder. The Admin Label allows you to change this label for easy identification. # Design Options Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything. ## Image & Icon **Icon Color** If you chose “yes” for the “Use Icon” setting, then this option will appear. This option allows you to customize the color of your Icon. By default, the icons are set to your theme accent color. **Circle Icon** If you chose “yes” for the “Use Icon” setting, then this option will appear. This options allows you to place your icon within a colored circle. If you select “yes” for this setting, then you will be presented with additional options for customizing your circle color and border. **CIRCLE COLOR** If you chose “yes” for the “Circle Icon” setting, then this option will appear. Here you can pick a color to use for your circle. This color is independent from your Icon color selected earlier. You icon, in it’s color, will appear inside this a circle with the color you select here. **Show Circle Border** If you chose “yes” for the “Circle Icon” setting, then this option will appear. This option allows you to turn on a border for your circle. If selected, an additional option will appear to select your border color. **CIRCLE BORDER COLOR** If you chose “yes” for the “Show Circle Border” setting, then this option will appear. Here you can adjust the color of the circle border. **Use Icon Font Size** If enabled, you can input a custom size for the icon that is displayed. ## Alignment This controls the divider alignment of the Icon Divider. ## Color You can choose your desired color from the color picker for the divider color. This will be apply a color to the divider only. ## Styles Here’s where you can style the divider appearance. **Divider Style** Here you can choose your divider style such as solid, dotted, dashed and etc. **Divider Position** This controls the vertical alignment of the Icon Divider. ## Sizing Here’s where you can style the Text Divider appearance. **Divider Weight** You can input a custom weight for the Divider which also refers to the thickness of the line. **Icon Gap** The Gap space between the icon and the divider. # Advanced Options Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

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.

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.

FAQs and documentation for Divi Supreme Products

Divi Business Hours Module

Divi Text Badges Module

Divi Text Divider Module

Divi Scroll Image Module

Divi Star Rating Module

Divi Tilt Image Module

Divi Facebook Like Button Module

Divi Gradient Text Module

Divi Block Reveal Image Module

Divi Facebook Comments Module

Divi Glitch Text Module

Where to Put Facebook APP ID

Divi Embed Google Map Module

SCRIPT_DEBUG and et_load_unminified_scripts issue

Divi Twitter Timeline Module

Divi Shuffle Letters Module

Divi Mask Text Module

Divi Dual Heading Module

Divi Icon Divider Module

Divi Facebook Embed Module

Divi Supreme

Need Help?