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

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

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/).

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/).

Display your WordPress menu and design it in whatever way you want. Use it for Footer or Sidebar. # Content Options **Menu Title** This field is where you can enter the title of your menu. **Menu** Select a menu that should be used in the module. You can create new menus using the Appearances > Menus page in your WordPress Dashboard. Each time you create a new menu, the menu will be selectable in this dropdown menu. An example how we use the menu module with the Footer Template to design our Footer ## Admin Label This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface. # Design Options Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything. # Layout **Menu Layout** Currently the available Menu Layout is vertical. ## Title Here you can style the Title text of the Menu Module **Bottom Gap** Add some spacing under the Title text of the Module. And you can then change the color, font, weight and more of the Title text. ## Menu **Menu Link Color** Here you can choose the color of the Menu Items **Active Link Color** Change the Active Menu Link Color here. **Menu Link Active Color** Change the color of the Active Menu Item here. **Menu Link Visited Color** Change the color of the Menu Item a user already visited. When a user opens a link and come back to that page where this Menu Module is added, the color of that Menu item the user just visited will be changed. **Space Between** Add some space between Menu Items here **Left Spacing** Add some spacing on the Left side of the Menu Items. **List Style Type** Here you can change the List style of the Menu Items to Disc, Circle, Decimal and Square. You can choose None if you don't want List style. **List Style Position** You can either choose Inside or Outside means If you've got longer text in the Menu item the text will go below the Disc (or any type you choose) and If you'll choose Outside option it will not show the text below the Disc the text will be shown below the Menu Item text. **List style Color** Change the color of the List bullets here. And then you play around with changing Font, size, weight and more of the Menu Items. ## Sub Menu If there's a sub menu in the Menu you've added, then you can style those submenus here. **Left Spacing** Add some spacing on Left of of the Sub Menu Item(s). And then you play around with changing Font, size, weight and more of the Sub Menu Items. # Animation **Use Link Hover Animation** Enable this option to add a Hover animation to Menu Items. **Animation Type** Change the Type of the animation of the Animation here. Currently there's only Underline available we'll be adding more in upcoming updates. **Underline Animation** Here you can change the direction of the Underline Animation. You can change the direction of the Underline from 3 different types: * Left to Right * Right to Left * Center Out **Link Color** Change the color of the Underline here. # Advanced Options Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

Display your WordPress menu and design it in whatever way you want. Use it for Footer or Sidebar. # Content Options **Menu Title** This field is where you can enter the title of your menu. **Menu** Select a menu that should be used in the module. You can create new menus using the Appearances > Menus page in your WordPress Dashboard. Each time you create a new menu, the menu will be selectable in this dropdown menu. An example how we use the menu module with the Footer Template to design our Footer ## Admin Label This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface. # Design Options Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything. # Layout **Menu Layout** Currently the available Menu Layout is vertical. ## Title Here you can style the Title text of the Menu Module **Bottom Gap** Add some spacing under the Title text of the Module. And you can then change the color, font, weight and more of the Title text. ## Menu **Menu Link Color** Here you can choose the color of the Menu Items **Active Link Color** Change the Active Menu Link Color here. **Menu Link Active Color** Change the color of the Active Menu Item here. **Menu Link Visited Color** Change the color of the Menu Item a user already visited. When a user opens a link and come back to that page where this Menu Module is added, the color of that Menu item the user just visited will be changed. **Space Between** Add some space between Menu Items here **Left Spacing** Add some spacing on the Left side of the Menu Items. **List Style Type** Here you can change the List style of the Menu Items to Disc, Circle, Decimal and Square. You can choose None if you don't want List style. **List Style Position** You can either choose Inside or Outside means If you've got longer text in the Menu item the text will go below the Disc (or any type you choose) and If you'll choose Outside option it will not show the text below the Disc the text will be shown below the Menu Item text. **List style Color** Change the color of the List bullets here. And then you play around with changing Font, size, weight and more of the Menu Items. ## Sub Menu If there's a sub menu in the Menu you've added, then you can style those submenus here. **Left Spacing** Add some spacing on Left of of the Sub Menu Item(s). And then you play around with changing Font, size, weight and more of the Sub Menu Items. # Animation **Use Link Hover Animation** Enable this option to add a Hover animation to Menu Items. **Animation Type** Change the Type of the animation of the Animation here. Currently there's only Underline available we'll be adding more in upcoming updates. **Underline Animation** Here you can change the direction of the Underline Animation. You can change the direction of the Underline from 3 different types: * Left to Right * Right to Left * Center Out **Link Color** Change the color of the Underline here. # Advanced Options Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visiblity on certain devices.

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

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

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.

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.

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!

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

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

The Divi text rotator module allows you to take any text and rotate it with different phrases so you can create attractive headlines for your Divi site. Choose from any 36 animations to make your message pop. # Content Options **Rotator Text** Here you can add as many texts as you want that will have the Rotating Animation effect. You can click on the + Add New Item button to add new text that will get the Rotating effect. **Before Rotator Text** Here you can add some text that will be shown before the Rotator Text and it will not have any Animation effect. **After Rotator Text** Same goes for this, the text you’ll add here will be shown after the Rotator text and will not get any animation. **Rotate Animation** This is where you can change the animation effect of the Rotator Text. You get over 36 Animations to choose from. **Rotate Speed** Here you can specify the Speed of the Animation of the Rotating text. **Pause on Hover** When you’ll enable this option It will pause the Rotating animation on hover/mouseover. **Change on Click** You can enable this switch to let users change the Word when they click on the Rotating text. # Design Options ### Heading Settings **Heading HTML Tag** Here you can change the Heading HTML Tag of the Rotator text and Before/After Text. ## Text You can play around with the text Design settings here. The changes you’ll make here will be applied to all the texts i.e Rotator Text and Before/After Text. ## Before, Rotator and After Text You can easily style the Before, Rotator and After text in the same way you style text in the Text Module(came with Divi Builder). And we’ll only discuss those options which are added by Text Rotator Module to style the text’s background, padding and stuff. **Background Colo**r: Here you can add color to the Background of the Before, Rotator and After text. **Margin and Spacing**: Add some Margin and Spacing to the Before, Rotator and After text, if you want to add some spacing on both sides of Before, Rotator and After Text. **Display**: You can change the display property of the text to Inline Block and Block. * **Inline Block** displays the text in the same line as other texts. * **Block Displays** the text by making it a block means other texts will not be displayed in the same line. And you can play around with Before, Rotator and After text by adding different colors, text-shadows, border, border-radius and more to each text. # Rotator Text Module Advanced Options Use the advanced options to give your Rotator Text custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

The Divi text rotator module allows you to take any text and rotate it with different phrases so you can create attractive headlines for your Divi site. Choose from any 36 animations to make your message pop. # Content Options **Rotator Text** Here you can add as many texts as you want that will have the Rotating Animation effect. You can click on the + Add New Item button to add new text that will get the Rotating effect. **Before Rotator Text** Here you can add some text that will be shown before the Rotator Text and it will not have any Animation effect. **After Rotator Text** Same goes for this, the text you’ll add here will be shown after the Rotator text and will not get any animation. **Rotate Animation** This is where you can change the animation effect of the Rotator Text. You get over 36 Animations to choose from. **Rotate Speed** Here you can specify the Speed of the Animation of the Rotating text. **Pause on Hover** When you’ll enable this option It will pause the Rotating animation on hover/mouseover. **Change on Click** You can enable this switch to let users change the Word when they click on the Rotating text. # Design Options ### Heading Settings **Heading HTML Tag** Here you can change the Heading HTML Tag of the Rotator text and Before/After Text. ## Text You can play around with the text Design settings here. The changes you’ll make here will be applied to all the texts i.e Rotator Text and Before/After Text. ## Before, Rotator and After Text You can easily style the Before, Rotator and After text in the same way you style text in the Text Module(came with Divi Builder). And we’ll only discuss those options which are added by Text Rotator Module to style the text’s background, padding and stuff. **Background Colo**r: Here you can add color to the Background of the Before, Rotator and After text. **Margin and Spacing**: Add some Margin and Spacing to the Before, Rotator and After text, if you want to add some spacing on both sides of Before, Rotator and After Text. **Display**: You can change the display property of the text to Inline Block and Block. * **Inline Block** displays the text in the same line as other texts. * **Block Displays** the text by making it a block means other texts will not be displayed in the same line. And you can play around with Before, Rotator and After text by adding different colors, text-shadows, border, border-radius and more to each text. # Rotator Text Module Advanced Options Use the advanced options to give your Rotator Text custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

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.

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.

LazyLoad have compatibility issue with most plugin out there especially when: •Grid layouts that use fixed positioning/fixed widths •e.g. some implementations of Isotope or Masonry •JavaScripxs that try to calculate spaces based on image size •Internet Explorer •LazyLoad is not supported for IE8 and below •Certain background images •Depending on how they are added, not all background images can be LazyLoaded. ### If you're using WP Rocket plugin lazyload, here's the filter function to disable. Copy and paste this function into your child theme function.php ``` function dsm_rocket_lazyload_exclude_class( $attributes ) { $attributes[] = 'class="dsm-before-after-image-slider-before"'; $attributes[] = 'class="dsm-before-after-image-slider-after"'; return $attributes; } add_filter( 'rocket_lazyload_excluded_attributes', 'dsm_rocket_lazyload_exclude_class' ); ``` ### If you're using JetPack plugin lazyload, here's the filter function to disable. Copy and paste this function into your child theme function.php ``` function dsm_exclude_image_class_from_lazy_load( $classes ) { $classes[] = 'dsm-before-after-image-slider-before'; $classes[] = 'dsm-before-after-image-slider-after'; return $classes; } add_filter( 'jetpack_lazy_images_blacklisted_classes', 'dsm_exclude_image_class_from_lazy_load', 999, 1 ); ```

LazyLoad have compatibility issue with most plugin out there especially when: •Grid layouts that use fixed positioning/fixed widths •e.g. some implementations of Isotope or Masonry •JavaScripxs that try to calculate spaces based on image size •Internet Explorer •LazyLoad is not supported for IE8 and below •Certain background images •Depending on how they are added, not all background images can be LazyLoaded. ### If you're using WP Rocket plugin lazyload, here's the filter function to disable. Copy and paste this function into your child theme function.php ``` function dsm_rocket_lazyload_exclude_class( $attributes ) { $attributes[] = 'class="dsm-before-after-image-slider-before"'; $attributes[] = 'class="dsm-before-after-image-slider-after"'; return $attributes; } add_filter( 'rocket_lazyload_excluded_attributes', 'dsm_rocket_lazyload_exclude_class' ); ``` ### If you're using JetPack plugin lazyload, here's the filter function to disable. Copy and paste this function into your child theme function.php ``` function dsm_exclude_image_class_from_lazy_load( $classes ) { $classes[] = 'dsm-before-after-image-slider-before'; $classes[] = 'dsm-before-after-image-slider-after'; return $classes; } add_filter( 'jetpack_lazy_images_blacklisted_classes', 'dsm_exclude_image_class_from_lazy_load', 999, 1 ); ```

# Updating Plugin If you activate your license key, you will receive an auto update via your WordPress. You can also FTP to your Divi Supreme folder and replace the previous files with new files you extracted on your remote server. For those do not have auto update via WordPress, either you did not activate your license or your license has expired.

# Updating Plugin If you activate your license key, you will receive an auto update via your WordPress. You can also FTP to your Divi Supreme folder and replace the previous files with new files you extracted on your remote server. For those do not have auto update via WordPress, either you did not activate your license or your license has expired.

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.

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.

Create a beautiful and stunning animated gradient text on your Divi website. # Content Options ## Content **Animated Gradient Text** Put your text here which will have an animated gradient. ### Animated Gradient Settings **Gradient Direction** Change the direction of the gradient by entering values or sliding the slider. **Animation speed (s)** Change the Speed of animation here. # Design Options ## Heading Settings **Heading HTML Tag** Change the tag of the heading from H1 to H6. ## Animated Gradient Text Here you’ll find 4 options for choosing colors which means you can have a really cool Animated Gradient Text with so many colors. But If you want to have two colors then put the same color in #1 Gradient Color and #2 Gradient Color and repeat it for the other two as well. And you can play with color Gradient Text size, weight, Font, etc. # Advanced Options Use the advanced options to give your Gradient Text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

Create a beautiful and stunning animated gradient text on your Divi website. # Content Options ## Content **Animated Gradient Text** Put your text here which will have an animated gradient. ### Animated Gradient Settings **Gradient Direction** Change the direction of the gradient by entering values or sliding the slider. **Animation speed (s)** Change the Speed of animation here. # Design Options ## Heading Settings **Heading HTML Tag** Change the tag of the heading from H1 to H6. ## Animated Gradient Text Here you’ll find 4 options for choosing colors which means you can have a really cool Animated Gradient Text with so many colors. But If you want to have two colors then put the same color in #1 Gradient Color and #2 Gradient Color and repeat it for the other two as well. And you can play with color Gradient Text size, weight, Font, etc. # Advanced Options Use the advanced options to give your Gradient Text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

When you hover over the image, you will see the top image sliced into 5 pieces and revealing the image again with zoomed in animation. There are 4 types of animation to choose from. A unique way to showcase! # Content Options ## Image Place a valid image url here, or choose/upload an image via the WordPress Media Library. Images will always appeared left justified within their columns and will span the full width of your column. However, your image will never scale larger than its original upload size. The height of the image is determined by aspect ratio of your original image. ## Admin Label This will change the label of the module in the builder for easy identification. When using the WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface. # Design Options Within the design tab, you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything. ## Sizing **Height** Default at 260px. Here you can define a height for your Image Hover Reveal. ## Animation **Image Reveal Animation** Here you can choose 4 types of animation. Vertical Slide Down, Vertical Slide Up, Horizontal Slide Right and Horizontal Slide Left. # Advanced Options Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

When you hover over the image, you will see the top image sliced into 5 pieces and revealing the image again with zoomed in animation. There are 4 types of animation to choose from. A unique way to showcase! # Content Options ## Image Place a valid image url here, or choose/upload an image via the WordPress Media Library. Images will always appeared left justified within their columns and will span the full width of your column. However, your image will never scale larger than its original upload size. The height of the image is determined by aspect ratio of your original image. ## Admin Label This will change the label of the module in the builder for easy identification. When using the WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface. # Design Options Within the design tab, you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything. ## Sizing **Height** Default at 260px. Here you can define a height for your Image Hover Reveal. ## Animation **Image Reveal Animation** Here you can choose 4 types of animation. Vertical Slide Down, Vertical Slide Up, Horizontal Slide Right and Horizontal Slide Left. # Advanced Options Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

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!

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!

The Divi before after image slider module allows you to display the before and after versions of an image by simply sliding over them. Users will be able to move a slider to easily compare the two images. # Content Options **Note**: Make sure that the images that you’ll place in before and after image section should be the same size, or it will make it look bad. ## Images The Image you’ll add in the first section will be the Before Image and the second one will be the After image. When you’ll add images you’ll see these options for before and after images: **Before/After Image Alternative text** This defines the HTML ALT text. A short description of your image can be placed here. **Before/After Image Title Text** This defines the HTML Title text. ## Labels **Before Label text** Here you can define a custom Label text for the Before label text. **After Label text** Here you can define a custom Label text for the After label text. ## Settings **Default Offset Percentage** Here you control the position of the handle (that you use to see before and after) when the page loads. For example, If you set the offset to 0 the handle will be on the very left, and if it’s 0.5 the handle will be in the center. **Orientation** Here you can control the orientation for the handle to either Horizontal or Vertical. **No Overlay** When you hover to the Before After Image module you see an Overlay, enabling this option will remove the overlay when you hover. **Move Slider on Hover** If enabled, when you’ll hover over to the image the handle will move as the mouse moves. **Move Slider with Handle** Allow a user to swipe anywhere on the image to control the handle movement. **Click to Move slider** Allow a user to click (or tap) anywhere on the image to move the handle to that location. # Design Options ## Before and After Label This is where you can design the Before and After Label, you can add a custom background color, you can change the label font, size, color, and more. ## Overlay Here you can define a custom color for the overlay that shows when you hover over the image. ## Handle Slider Here you can design the Handle that is used to see before and after image. **Handle Border Color** You can change the color of the Handle border to your custom one. **Handle Border Radius** You can add some Corner radius to the Icon that you see in the center of the slider. **Handle Background Color** This is where you can change the background color of the handle icon. **Handle Arrow Color** This is where you can change the color of the handle icon. And even you can add Some box-shadow, corner radius and Border to the module in the design settings the same way you do with other Divi modules. # Advanced Options Use the advanced options to give your Before After Image Module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

The Divi before after image slider module allows you to display the before and after versions of an image by simply sliding over them. Users will be able to move a slider to easily compare the two images. # Content Options **Note**: Make sure that the images that you’ll place in before and after image section should be the same size, or it will make it look bad. ## Images The Image you’ll add in the first section will be the Before Image and the second one will be the After image. When you’ll add images you’ll see these options for before and after images: **Before/After Image Alternative text** This defines the HTML ALT text. A short description of your image can be placed here. **Before/After Image Title Text** This defines the HTML Title text. ## Labels **Before Label text** Here you can define a custom Label text for the Before label text. **After Label text** Here you can define a custom Label text for the After label text. ## Settings **Default Offset Percentage** Here you control the position of the handle (that you use to see before and after) when the page loads. For example, If you set the offset to 0 the handle will be on the very left, and if it’s 0.5 the handle will be in the center. **Orientation** Here you can control the orientation for the handle to either Horizontal or Vertical. **No Overlay** When you hover to the Before After Image module you see an Overlay, enabling this option will remove the overlay when you hover. **Move Slider on Hover** If enabled, when you’ll hover over to the image the handle will move as the mouse moves. **Move Slider with Handle** Allow a user to swipe anywhere on the image to control the handle movement. **Click to Move slider** Allow a user to click (or tap) anywhere on the image to move the handle to that location. # Design Options ## Before and After Label This is where you can design the Before and After Label, you can add a custom background color, you can change the label font, size, color, and more. ## Overlay Here you can define a custom color for the overlay that shows when you hover over the image. ## Handle Slider Here you can design the Handle that is used to see before and after image. **Handle Border Color** You can change the color of the Handle border to your custom one. **Handle Border Radius** You can add some Corner radius to the Icon that you see in the center of the slider. **Handle Background Color** This is where you can change the background color of the handle icon. **Handle Arrow Color** This is where you can change the color of the handle icon. And even you can add Some box-shadow, corner radius and Border to the module in the design settings the same way you do with other Divi modules. # Advanced Options Use the advanced options to give your Before After Image Module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

Lottie is an iOS, macOS, Android, and React Native library that renders After Effects animations in any native app. And we’re bringing it to Divi with a Custom Module that’ll let you add beautiful animations with ease. [Click here](https://divisupreme.com/features/divi-lottie-module/) to see live demo. # Content Options ![content options.PNG](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/efKqxhL969/content%20options.PNG) **Lottie JSON File** Here you’ll need to upload the .JSON File that you’ll download from LottieFiles and you don’t have to worry about uploading a .JSON File because Divi Supreme already did it for you. **Loop** If you want to keep running/Looping enable this option. **Number of Times** Here you can specify the number of times the Animation will Loop. If you enter 2 the animation will loop 2 times and then it will stop. **Direction** Here you can change the direction of the animation it maybe either Normal or Reverse. **Speed (More is Faster)** Here you can change the speed of the animation the more value you’ll enter here the more speed of the animation will be. **Trigger** Enable this option to trigger the animation on Hover or Click. **Trigger Method** * Play Animation on Hover/Mouse over - This option will let you play the Lottie Animation when you hover the mouse on the Animation. * Play Animation on Click - This option will let you play the Animation on click. So when you'll click the Animation it will play. * Play Animation on Scroll - (A great addition) This will let you animate the Animation on Scroll. Create something extraordinary. **Relative To** * Entire Page - You can relate the animation Scroll to Entire Page, more option will be added in upcoming Updates! **On Mouseout action** This option will show if you select the Animation Trigger method as "Hover". And it will let you do different things with Animation like Stop, Pause or Reverse the Animation when you move the mouse away from the Module. **Animate in Viewport** Here you can play around with animation to play at a specific viewport. # Design Options Because It’s an animation you don’t need to do any design settings here. But if you want then you can add a Box Shadow, Corner Radius and Play around with other settings here. # Advanced Options Use the advanced options to give your Lottie Module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

Lottie is an iOS, macOS, Android, and React Native library that renders After Effects animations in any native app. And we’re bringing it to Divi with a Custom Module that’ll let you add beautiful animations with ease. [Click here](https://divisupreme.com/features/divi-lottie-module/) to see live demo. # Content Options ![content options.PNG](https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/efKqxhL969/content%20options.PNG) **Lottie JSON File** Here you’ll need to upload the .JSON File that you’ll download from LottieFiles and you don’t have to worry about uploading a .JSON File because Divi Supreme already did it for you. **Loop** If you want to keep running/Looping enable this option. **Number of Times** Here you can specify the number of times the Animation will Loop. If you enter 2 the animation will loop 2 times and then it will stop. **Direction** Here you can change the direction of the animation it maybe either Normal or Reverse. **Speed (More is Faster)** Here you can change the speed of the animation the more value you’ll enter here the more speed of the animation will be. **Trigger** Enable this option to trigger the animation on Hover or Click. **Trigger Method** * Play Animation on Hover/Mouse over - This option will let you play the Lottie Animation when you hover the mouse on the Animation. * Play Animation on Click - This option will let you play the Animation on click. So when you'll click the Animation it will play. * Play Animation on Scroll - (A great addition) This will let you animate the Animation on Scroll. Create something extraordinary. **Relative To** * Entire Page - You can relate the animation Scroll to Entire Page, more option will be added in upcoming Updates! **On Mouseout action** This option will show if you select the Animation Trigger method as "Hover". And it will let you do different things with Animation like Stop, Pause or Reverse the Animation when you move the mouse away from the Module. **Animate in Viewport** Here you can play around with animation to play at a specific viewport. # Design Options Because It’s an animation you don’t need to do any design settings here. But if you want then you can add a Box Shadow, Corner Radius and Play around with other settings here. # Advanced Options Use the advanced options to give your Lottie Module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

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

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

Create engaging and fresh interactions using Divi Block Reveal Text Module. The effect first shows a decorative block element drawn and when it starts to decrease its size, it uncovers text underneath. 4 types of animation to choose from. # Content Options ## Block Reveal Text Here you can enter the text which will be revealed with a nice animation. ## 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 **Text** This is where you can style the text which you’ve entered in the content tab. You can design it the same way you design every text module in Divi. **Heading HTML Tag** Here you can change the HTML Tag of the Text from H1 to H6. # Advanced Options Use the advanced options to give your Block Reveal Text Modulecustom 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 Text Module. The effect first shows a decorative block element drawn and when it starts to decrease its size, it uncovers text underneath. 4 types of animation to choose from. # Content Options ## Block Reveal Text Here you can enter the text which will be revealed with a nice animation. ## 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 **Text** This is where you can style the text which you’ve entered in the content tab. You can design it the same way you design every text module in Divi. **Heading HTML Tag** Here you can change the HTML Tag of the Text from H1 to H6. # Advanced Options Use the advanced options to give your Block Reveal Text Modulecustom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

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.

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.

FAQs and documentation for Divi Supreme Products

How to Create Facebook APP ID

How to Download Divi Supreme Pro

Divi Menu Module

Divi Flipbox Module

Divi Card Module

SCRIPT_DEBUG and et_load_unminified_scripts issue

Divi Supreme Requirement

Divi Text Rotator Module

Divi Shapes Module

Before and After Image Module images are not loading correctly

Divi Supreme Pro Plugin Update

Divi Price List Module

Divi Animated Gradient Text Module

Divi Image Hover Reveal Module

Divi Facebook Feed Module

Divi Before After Image Slider Module

Divi Lottie Module

Divi Card Carousel Module

Divi Block Reveal Text Module

Divi Image Text Reveal Module