Question 1

Divi Lottie Module

Accepted Answer

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 to see live demo.

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/efKqxhL969/content%20options.PNG (content options.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.

Question 2

Divi Flipbox Module

Accepted Answer

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

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

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.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/3Z6sx0WARQ/flipbox-1-693x1024.png (flipbox-1-693x1024.png)

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.

Flip Animation

There are 4 types of Flip Effect to choose from. "Flip Left" "Flip Right" "Flip Up" "Flip Down"

3D Effect

This option will only show up when you choose Flipbox Effect as Flip And this will create a 3D effect to your Flipbox.

Slide Animation

This option will only show up when you choose Flipbox Effect as Slide

There are 4 types of Slide Effect to choose from. "Slide Left", "Slide Right", "Slide Up" and "Slide Down".

Zoom In Animation

This will have a zoom in animation on your flipbox.

Zoom Out Animation

This option will only show up when you choose Flipbox Effect as Zoom Out

There are 5 types of Zoom Out Effect to choose from. Zoom Out Zoom Out Up Zoom Out Down Zoom Out Left * Zoom Out Right

Animation Speed (in s)

This will control the speed animation of the flipbox.

Advanced Options

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

Flipbox Item Content

Title

Give a title to your Flipbox that will appear above the body text of the Flipbox in a bold text style.

Sub Title

If you would like to use a sub title, add it here. Your sub title will appear below your title in a small font.

Content

This field is where you can enter the body content of your Flipbox. Flipbox Text will also span the full width of your column.

Use Icon

When using Flipbox, you can choose to either use an Icon or and Image with your text. If you select “yes” for the “Use Icon” option, then you will be presented with the following options to customize your icon. If you do not choose to use an Icon, then you will be prompted to upload an image instead.

Icon

If you chose “yes” for the “Use Icon” setting, then this option will appear. This options presents you with a list of available icons that you can use with your Perky Animate text. Simply click on the con that you would like to use and it will appear in your Flipbox.

Image

If you did not choose to use an Icon, then this setting will appear. Place a valid image url here, or choose/upload an image via the WordPress Media Library. However, your image will never scale larger than its original upload size. The height of the Flipbox image is determined by the aspect ratio of your original image, so making all of your Flipbox images the same height is a good idea if you are placing them side by side.

Button

Button Text

Input your desired button text.

Button URL

Input the destination URL for your button.

URL Opens

Here you can choose whether or not your link opens in a new window.

Flipbox Item Design Options

Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

Image & Icon

Icon Color

If you chose “yes” for the “Use Icon” setting, then this option will appear. This option allows you to customize the color of your Icon. By default, the icons are set to your theme accent color.

Circle Icon

If you chose “yes” for the “Use Icon” setting, then this option will appear. This options allows you to place your icon within a colored circle. If you select “yes” for this setting, then you will be presented with additional options for customizing your circle color and border.

Circle Color

If you chose “yes” for the “Circle Icon” setting, then this option will appear. Here you can pick a color to use for your circle. This color is independent from your Icon color selected earlier. You icon, in it’s color, will appear inside this a circle with the color you select here.

Show Circle Border

If you chose “yes” for the “Circle Icon” setting, then this option will appear. This option allows you to turn on a border for your circle. If selected, an additional option will appear to select your border color.

Circle Border Color

If you chose “yes” for the “Show Circle Border” setting, then this option will appear. Here you can adjust the color of the circle border.

Use Icon Font Size

If enabled, you can input a custom size for the icon that is displayed.

Sizing

Here you can change the width of the image.

Width

Applying a max width value here will limit the width of the Flipbox image. This only affects Flipbox that are not in icon mode.

Spacing

Custom Padding

Padding is the space added inside of your flipbox item, between the edge of the file and its internal elements. You can add custom padding values to any of the flipbox item’s four sides. To remove custom margin, delete the added value from the input field. By default these values are measured in pixels, but you can input custom units of measurement into the input fields.

Flipbox Item Advanced Options

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

Question 3

Divi Text Rotator Module

Accepted Answer

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.

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

Content Options

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

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 Color: 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.

Question 4

Divi Image Module

Accepted Answer

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

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/pIdX7QMo0I/showcase-8-1002x1024.png (showcase-8-1002x1024.png)

Content Options

Image

Place a valid image url here, or choose/upload an image via the WordPress Media Library. Images will always appeared left justified within their columns and will span the full width of your column. However, your image will never scale larger than its original upload size. The height of the image is determined by aspect ratio of your original image.

Link

Open in Lightbox

Here you can choose whether or not your image will open in a Lightbox when clicked. If enabled, then your image will “zoom in” to their full size when clicked inside a modal window. This is a great feature for portfolios.

Link URL

Place a valid web URL in this field to turn your Image into a link. Leaving this field blank will simply leave your image as a static element.

Use as Video Popup

Enable this option if you want to show a video in overlay when user clicks on the Image. You'll then prompted to enter the URL of the Video you want to show in the overlay

Transform & Rotation

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/Q25d9ms6V0/dsm-image-705x1024.png (dsm-image-705x1024.png)

Perspective

The perspective CSS property gives an element a 3D-space. The strength of the effect is determined by the value.

Rotate Y

Defines a transformation that rotates an element around the ordinate (vertical axis) without deforming it.

Rotate X

Defines a transformation that rotates an element around the abscissa (horizontal axis) without deforming it.

Rotate Z

Defines a transformation that rotates an element around the z-axis without deforming it.

Admin Label

This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface.

Design Options

Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

Overlay

Image Overlay

If enabled, an overlay color and icon will be displayed when a visitors hovers over the image.

Overlay Color

Here define a color for the Overlay.

Use Icon

Enable this option if you also want to show an icon in the overlay of image when hover.

Overlay Icon Color

Here you can define a custom color for the overlay icon

Icon Picker

Select an Icon from Divi Icon library here.

Show overlay on Hover

Enabling this option will only show the Overlay when hover to image. You can disbale this option if you want to always show the Overlay.

Overlay Rounded Corners and Border

You can then add Corner Radius and Border to the overlay if you like

Alignment

Image Alignment

Here you choose which direction your image floats within the column. You can float the image left, right or keep it centered.

Always Center Image On Mobile

Often times small images are more pleasing to the eye on mobile devices when they are centered. As columns break down, images that were aligned the left or right in smaller columns become orphaned when the columns break down and become 100% width. Enabling this column with force images to align to the center of the column on mobile without affecting the image alignment on desktop computers.

Advanced Options

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

Question 5

Divi Image Text Reveal Module

Accepted Answer

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

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

Content Options

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

Reveal Text

This field is where you can enter the reveal text.

Image

Place a valid image url here, or choose/upload an image via the WordPress Media Library. Images will always appeared left justified within their columns and will span the full width of your column. However, your image will never scale larger than its original upload size. The height of the image is determined by aspect ratio of your original image.

Admin Label

This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface.

Design Options

Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

Overlay

Reveal Overlay Color

This option allows you to customize the reveal overlay color.

Animation

Here you can choose more than 30 animation for the revealing text.

Advanced Options

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

Question 6

Divi Price List Module

Accepted Answer

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

See the Demo page for more Design of Price lists.

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

Content Options

Adding Price List

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

See below for individual Price List Item settings.

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

Design Options

Text

Vertical Alignment

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

Text Shadow

Here add nice shadow to the Pirce list text.

Title Text

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

Description Text

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

Price Text

Background Color

Define a custom background color for the price text.

Padding

Add some padding around the Price text.

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

Price Text Rounded Corners, Border and Box Shadow

Here you can control the corner radius of the Price Text. Enable the link icon to control all four corners at once, or disable to define custom values for each. You can play around with adding borders and Box Shadow to the Price text.

Image

Image Width

Adjust the width of the image by sliding the slider or enter your own value to change the size of the image.

Image Gap Spacing

Add some spacing between Image and Texts.

Image Rounded Corners, Border and Box Shadow

Here you can control the corner radius of the Image. Enable the link icon to control all four corners at once, or disable to define custom values for each. You can play around with adding borders and Box Shadow to the Image

Separator

Style

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

Weight

Change the weight of the Line here.

Color

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

Gap Spacing

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

Sizing

Item Bottom Spacing

Add some bottom spacing between other Price list items.

Advanced Options

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

Price List Item Content Options

Text

Price

Add your Pricing here.

Title

Add your title here.

Content

Put in your description text here.

Image

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

Price List Item Design Options

Image

Image Width

Adjust the width of the image by sliding the slider or enter your own value to change the size of the image.

Image Gap Spacing

Add some spacing between Image and Texts.

Image Rounded Corners, Border and Box Shadow

Here you can control the corner radius of the Image. Enable the link icon to control all four corners at once, or disable to define custom values for each. You can play around with adding borders and Box Shadow to the Image

Price List Item Advanced Options

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

Question 7

Divi Tilt Image Module

Accepted Answer

The Supreme Tilt Image allows you to create a unique and cool images. An interactive parallax tilt effect that responds to mouse move. Apply an Overlay Icon or Text to the image for better visibility.

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

Content Options

Image

Place a valid image url here, or choose/upload an image via the WordPress Media Library. Images will always appeared left justified within their columns and will span the full width of your column. However, your image will never scale larger than its original upload size. The height of the image is determined by aspect ratio of your original image.

Tilt Settings

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/UjKuUuhh7F/dsm-tilt-image-458x1024.png (dsm-tilt-image-458x1024.png)

Disable on Mobile

This will disable the Image Tilt feature for Mobile Devices.

Perspective

Transform perspective, the lower the more extreme the tilt gets.

Scale

Scale on hover. 2 = 200%, 1.5 = 150%.

Max Rotation

The Max Tilt Rotation. The lower the less rotation the tilt gets.

Speed

The Speed of the enter/exit transition.

Use Glare

If enabled, it will have a “glare” effect on hover.

GLARE

The glare opacity.

Reverse

This will reverse the tilt direction.

Use 3D Pop Out Effect

This will create a pop out effect between the image and the overlay.

OVERLAY 3D POP OUT

The distance between the image and the overlay.

Link

Open in Lightbox

Here you can choose whether or not your image will open in a Lightbox when clicked. If enabled, then your image will “zoom in” to their full size when clicked inside a modal window. This is a great feature for portfolios.

Link URL

Place a valid web URL in this field to turn your Image into a link. Leaving this field blank will simply leave your image as a static element.

Overlay

Here you can have overlay text/icon on top of the image.

Use Icon

If enabled, an overlay icon will be displayed over the image.

Overlay Title

Enter the title for the overlay.

Overlay Content

Enter the Content for the overlay.

Show on Hover

If enabled, overlay text will only show up on hover.

Admin Label

This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface.

Design Options

Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

Overlay

Overlay Icon Color

Here you can define a custom color for the overlay icon

Overlay Color

Here you can define a custom color for the overlay.

Use Icon Font Size

If enabled, you can input a custom size for the icon that is displayed.

Alignment

Image Alignment

Here you choose which direction your image floats within the column. You can float the image left, right or keep it centered.

Always Center Image On Mobile

Often times small images are more pleasing to the eye on mobile devices when they are centered. As columns break down, images that were aligned the left or right in smaller columns become orphaned when the columns break down and become 100% width. Enabling this column with force images to align to the center of the column on mobile without affecting the image alignment on desktop computers.

Overlay Text

Here you can style of overlay title and content such as fonts, colors and the alignment.

Text Vertical Alignment

You can change the vertical alignment of the Overlay text here.

Advanced Options

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

Question 8

Divi Facebook Like Button Module

Accepted Answer

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

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

Content Options

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

Facebook APP ID

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

URL

Here enter the URL of your Facebook Page

Layout

Change the type of Layout from 4 Different Layouts:

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

Show Faces

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

Action

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

Show Share Button

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

Size

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

Design Options

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

Advanced Options

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

Question 9

Divi Facebook Embed Module

Accepted Answer

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

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

Content Options

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

Facebook APP ID

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

Type

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

Type as Post

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

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

Type as Video

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

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

Design Options

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

Advanced Options

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

Question 10

Divi Image Hover Reveal Module

Accepted Answer

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

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

Content Options

Image

Place a valid image url here, or choose/upload an image via the WordPress Media Library. Images will always appeared left justified within their columns and will span the full width of your column. However, your image will never scale larger than its original upload size. The height of the image is determined by aspect ratio of your original image.

Admin Label

This will change the label of the module in the builder for easy identification. When using the WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface.

Design Options

Within the design tab, you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

Sizing

Height

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

Animation

Image Reveal Animation

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

Advanced Options

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