Question 1

PCLZIP_ERR_BAD_FORMAT (-10) - Error Message Solution

Accepted Answer

The PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature error is usually displayed by WordPress as a result of one of three things:

There's an issue with the zip file you're uploading
WordPress doesn't have enough memory on the web server to unzip and upload the contents of the zip file or even your hosting Server Disk Space Issue(To confirm this, try to upload other files to your sites, such as an image, video or other Plugin. If you're not able to upload large files, then storage space is likely the issue).
An error being thrown by a plugin or script on your site

We can exclude out No.1 and No.3.

You might want to try to install the zip manually, then it may mean that there's not enough storage space on your host for WordPress to be able to unzip and upload the contents of the file. We suggest talking to your hosting support to see what they can do about the space that needed to unzip.

Question 2

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

Q: PCLZIP_ERR_BAD_FORMAT (-10) - Error Message Solution

The PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature error is usually displayed by WordPress as a result of one of three things: There's an issue with the zip file you're uploading WordPress doesn't have enough memory on the web server to unzip and upload the contents of the zip file or even your hosting Server Disk Space Issue(To confirm this, try to upload other files to your sites, such as an image, video or other Plugin. If you're not able to upload large files, then storage space is likely the issue). An error being thrown by a plugin or script on your site We can exclude out No.1 and No.3. You might want to try to install the zip manually, then it may mean that there's not enough storage space on your host for WordPress to be able to unzip and upload the contents of the file. We suggest talking to your hosting support to see what they can do about the space that needed to unzip.

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 3

Divi Shapes Module

Accepted Answer

Shapes are one of the most important elements in Design. So we’ve created this module to make your life easier. Shapes module adds life and creativity to your website. Boost your Divi designs, without having to use image files or custom code.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/AiAexCqfdk/dsm_shapes_module_showcase-1024x466.png (dsm_shapes_module_showcase-1024x466.png)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/jN35hh9nNG/shapes-module-content-options.png (shapes-module-content-options.png)

Shapes

Type

Here you can change the type of shape from 16 different Shapes. Here are the shapes that you can choose:

Square
Circle
Rectangle
Oval
Trapezoid
Parallelogram
Diamond Square
Hexagon
8 types of Blob

Size

Adjust the Size of the Shape here.

Design Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/eQvwcHv7Gw/shapes-module-designoptions.png (shapes-module-designoptions.png)

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

Using Transform Translate Options

Using Position Options

Shape Module Advanced Options

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

Question 4

Divi Scheduled Element Extension

Accepted Answer

Using this extension you can easily schedule the visibility of any Element like Section/Row/Module in Divi.

Awesome Features:

You can choose who to show or hide based on the user’s logged-in status. Apply condition to show it for All Users, Logged In Users or Visitors.
Select any user roles which is available to you from your WordPress site. You can choose to show or hide for author or all user roles.
Select days of the week. Monday to Friday or even weekend with your preferred opening & closing time.
And More...

This will extend the Visibility Option in all the Module settings that will allow you to use the Scheduled Element Extension. This feature is only available for Pro Users.

Currently, the available supported modules are listed below:

All Divi Default Modules
All Divi Supreme Pro Modules(Pro Version).

Before Using Scheduled Content Element Extension:

Before you start using the Scheduled Content Element Extension you first make sure that’s active or Enabled from the Divi Supreme Settings. Go to Divi Supreme > Divi Supreme Pro and Enable the use of Scheduled Element Extension

Usage

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

Enable this option if you want to use this extension for any module.

Show or Hide Module

Show Option - This option is very important. If you’ll select Show Option from the dropdown and will set the date and time then the module will be hidden till then but when the time arrives the Module appears which means you’ll not have to worry about the module visibility at a particular time If you don’t get time to change its visibility.
Hide Option - The same things go for the Hide Option. But your module will be visible till that time but when the time arrives the module will disappear.

Schedule a Date/Time

Enter your Desired date and time for the Module visibility to show or hide when the time arrives that you set here.

Use Between Date/Time

When you'll enable this option you'll see another Date/Time picker so you can show/hide an element between that date/time.

Schedule a Date/Time is the time of start.
Use Between Date/Time is the time of end.

Use Business Hour/Time

Enable this option if you want to show a Module only then when your business is open.

Select Day

Select your desired days here.

Opening Time

Add the Opening time of your business here so the module will be shown on your given time.

Closing Time

Add the Closing time of your business here so the module will be gone on your given time.

The time format here will be 24 hours.

Apply To

From here you can control the visibility of the module for specific roles.

All Users - Choose this option if you want to show the module to everyone e.g Logged-In Users and Visitors and all others.
Logged In Users - Choose this option if you want to show this module to only logged in users only, you’ll also get the options to select specific roles or select all for everyone who’s logged In on your site.
Visitor Users - Choose this option if you want to show this module to only visitors, which means this module will not be visible to Logged in Members it will be only visible to those users who they’re logged out from your site.

Disable On

This will disable the Module on selected Devices.

Question 5

Divi Easy Theme Builder Extension

Accepted Answer

Introducing Easy Theme Builder, the only extension to fix your issues with the Theme Builder while creating Header, using this extension you can easily enhance the Functionality of Header Providing you easy switches to turn on or off a specific feature.

You can easily create have these functionalities using this extension:

Fixed Header – Turn your Theme Builder header into a fixed one. With just a few clicks, you can turn your static custom-built header into a fixed one that follows your visitors throughout their stay on your website.
Shrink On Scroll – Shrink the Theme Builder header’s height when your visitors are scrolling. It helps reduce the space the Theme Builder header takes up in your visitors’ viewport height. No coding required!
Switching Logo On Scroll – You can switch your header logo when your visitors are scrolling. With just a few clicks, you can have a different logo customized specially for header, This gives you more control over the design of your site.

How to use

Let’s see where we can find this extension settings and how to use it.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/SvkuN7EJyE/Easy%20Theme%20Builder.png (Easy Theme Builder.png)

Theme Builder Header

Configure Theme Builder Header settings here.

Enable Fixed Header

Obviously, this will make your Header always Fixed on top even when you scroll down. For developers, the fixed header CSS Class Selector is “.dsm_fixed_header“

Disable on

You can select on which device you don’t want to make your Header Fixed. You can even select Tablet or Mobile.

Push Body Down

This will calculate the Divi Theme Builder Header height automatically and apply the height to the body to prevent the first section from overlapping. This will push the first section down based on the header height. This is not needed if you have a transparent background for the header.

On Scroll Threshold

You can define when the header should take effect after viewport. (Default: 200)

Scrolling

Here you can make changes to the element on scroll.

Enable Scrolling Options

This will enable the scrolling elements configured below. For developers, the active scroll CSS Class Selector is ".dsm_fixed_header_scroll_active"

#1 Section Background Color

Change the background color for the first section in the Header on scroll.

#2 Section Background Color

Change the background color for the second section in the Header on scroll.

Show Box Shadow on Scroll

This will hide the box shadow on page load and show on shrink threshold. You should define the Shadow in the Theme Builder section settings.

Shrink

Here you can make changes to the shrink elements.

Enable Shrink on Scroll

This will shrink your Divi Theme Builder Header and stays fixed by decreasing the height of the Header when you scroll down. For developers, the active shrink CSS Class Selector is “.dsm_fixed_header_shrink_active“

Shrink Section Padding (px)

If Shrink on Scroll is enabled, you can define a custom top and bottom padding in pixel(px) value for the section in the Header when shrinked.

Shrink Row Padding (px)

If Shrink on Scroll is enabled, you can define a custom top and bottom padding in pixel(px) value for the row in the Header when shrinked.

Shrink Menu Module Padding (px)

If Shrink on Scroll is enabled, you can define a custom top and bottom padding in pixel(px) value for the menu module when shrinked.

Let’s see how this Padding works, Let’s say you’ve 20px padding added to the section of the Header and when you’ll put 10px in the “Shrink Section Padding (px)” field it will remove that 20px from the section and will add 10px there. That’s how it works.

Shrink Image (%)

If Shrink on Scroll is enabled, you can define a max-width in percentage(%) value when shrinked for the Logo Image.

Shrink Logo Image

If Shrink on Scroll is enabled, you can change the logo image when shrinked. So you’ll have a different logo when scrolling down.

Question 6

Internal Error 500 or WordPress Memory Exhausted Error

Accepted Answer

When your WordPress code requires more memory than the default allocated memory, you get to see this error such as Internal Error 500 or Allowed memory size of … bytes exhausted (tried to allocate … bytes) in /… on line …

By default, WordPress automatically tries to increase PHP memory limit if it is less than 64MB. However, 64MB is often not high enough.

Increase PHP Memory Limit in WordPress

First you need to edit the wp-config.php file on your WordPress site. It is located in your WordPress site’s root folder, and you will need to use an FTP client or file manager in your web hosting control panel.

Next, you need to paste this code in wp-config.php file just before the line that says ‘That’s all, stop editing! Happy blogging.’

define('WP_MEMORY_LIMIT', '256M');

WP_MEMORY_LIMIT increases the default memory for front-end and back-end operations.

define( 'WP_MAX_MEMORY_LIMIT', '256M' );

This way you don’t allocate too much memory to frontend operations that could end up affecting performance

This should solve the issue you're having. Remember, this can happen to any themes or plugin out there. It also depends on your hosting.

Question 7

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.

Question 8

Divi Image Hotspots Module

Accepted Answer

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

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

Content Options

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

Image

First thing first, you will have to add an image here from your Media Library and then start adding Hotspots to the image.

Adding Hotspots to the Image

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

See below for individual Image Hotspot Item settings.

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

Design Options

If you want to make all your hotspots look the same then you can style them from here not Item Design Options but if you want to make them look different from each other then style each of them from the Item Design Options. All the Designs you’ll do here will be applied to all Hotspots.

Hotspot text

If you have Hotspot type text then here you’ll be able to change its color, size and weight, etc.

Hotspot Settings

Trigger Event

Here you can change the hotspot trigger event. You have two options:

Mouse Enter - Will show the tooltip on hover.
Mouse Enter & Click - Will show the Tooltip on Hover and even If you click on the Hotspot It will keep showing.
Mouse Enter & Focus - Will show the Tooltip on Hotspot Hover and If you click on the hotspost will hide the Tooltip.
Click - Will show the tooltip on click.
Click & Focus - Will show the tooltip on click, Click on hotspost again will hide the Tooltip.

Padding

Here you can add padding to the Hotspot.

Border Radius and Border

Add some border-radius and Simple Borders to the hotspot.

Hotspot Icon

Icon Color

Change the color of the Icon here.

Icon font Size

Change the size of the Icon from here.

Tooltip Settings

Background Color

Add a Background color here to the tooltip.

Tooltip Padding

Add some padding to the tooltip here.

Tooltip Max Width

Change the max-width of the Tooltip here.

Tooltip Delay Show

Add some delay for the tooltip to show by just sliding the slider.

Tooltip Delay Hide

Add some delay for the tooltip to hide by just sliding the slider.

Tooltip Heading Text

If you have added Heading text in the Text of the Tooltip then you can style that here the same you style other Heading texts in Divi.

Tooltip Body Text

Here you can style the Tooltip Body text. You can change the font color, size, weight and more.

Image

Alignment

Change the alignment of the image here.

Image Box Shadow

Add Shadow to the image here.

Sizing

Force Fullwidth

Enabling this option will Force the image to be fullwidth. After that if you want to control the width of the image according to your custom needs you'll then see Width Option to do so.

Hotspot Item Content Options

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

Hotspot

Type

Change the type of the Hotspot button. It can an Icon or Text.

Icon - If you'll select Hotspot type as Icon you can then choose an Icon for the Hotspot from Divi Icon Library.
Image - If you'll select Hotspot type as Icon you can then choose an Image from Media Library to use as Hotspot.
Hotspot Text - If you select Hotspot type to Text a text input field will appear and you’ll be able to add text to Hotspot than Icon.

Tooltip

Use Tooltip

Enable this Option, If you'd like to use Tooltip on Hover. You can disable it If you don't want to show Tooltip on hover.

Content

Here you’ll be able to add text to appear in the tooltip.

Background

Here you can change the background color of the Hotspot, you can add a solid Color, Gradient, Image or Video the Hotspot.

Hotspot Item Design Options

Hotspot Text

If you have chosen the Hotspot type as Text then you’ll be able to style that text here the same way as you always style.

Hotspot Settings

Left Position

Using this Position option you’ll be able to move the Hotspot from right to left or left to right by sliding the slider.

TOP Position

Using this Position option you’ll be able to move the Hotspot from top to bottom or bottom to top by sliding the slider.

Padding

Add some padding to the hotspot to let it take more space on the image.

Border Radius and border

Here you can add border-radius or simple border to the hotspot.

Hotspot Image

If you'll choose Hotspot Type as Image this will appear to style the Image.

Hotspot Image width

Here you can change the width of the Image

Hotspot Image Rounded Corners

Add Rounded corners to Image here.

Hotspot Image Border

Here you can add Border to the Image.

Hotspot Image Box Shadow

Add Shadow to image here to make it look more natural.

Hotspot Icon

If you'll choose Hotspot Type as Icon this will appear to style the Icon.

Icon Color

Change the color of the Icon here.

Icon font Size

Change the size of the Icon from here.

Tooltip Settings

When you’ll hover over to the hotspot a tooltip shows and that can be styled here.

Tooltip Animation

Here you can choose an animation for the Tooltip from 5 different animations.

Background color

Change the tooltip background color here.

Padding

Add some padding to the tooltip here.

Placement

Here you can choose the placement of the tooltip. The Tooltip can be placed on Top, Bottom, Left or Right of the Hotspot.

Tooltip Max Width

Change the max-width of the Tooltip here.

Tooltip Heading Text

If you have added Heading text in the Text of the Tooltip then you can style that here the same you style other Heading texts in Divi.

Tooltip Body Text

Here you can style the Tooltip Body text. You can change the font color, size, weight and more.

Tooltip Item Advanced Options

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

Question 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 Post Carousel Module

Accepted Answer

Surprise your Visitors by showing your Posts in a new & creative way using Divi Supreme Post Carousel Module. Add some special post Carousels to your site and take Blogging with Divi to the next level.

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/OfosPwxpmA/post%20carousel%20content%20options.png (post carousel content options.png)

Post Type

Choose Post type for the Carousel here. For the Blog you can use the Blog Carousel Module.

Post Count

Enter how many posts you want to show in the Carousel here.

Date Format

Change the Date format from here the way you like.

Elements

Show Featured Image

Enable or Disable this switch to show or hide Post's Featured Images.

Show Title

You can choose whether to display the Post Title or not, Disable it to hide the Post Title.

Show Excerpt

Enable to Disable this switch to show or hide the Post Excerpt.

Excerpt Text

Change the length of the Excerpt text here, enter value in numbers.

Show Date

You can choose whether to display the Post Publish Date or not, Disable it to hide the Date.

Meta Separator

Here you add a custom Meta Separator.

Author

You can choose whether to display the Post Author or not, Disable it to hide the Author Info from the Carousel.

Readmore Button

Enable this switch If you want to show the Readmore button for each Post card in the Carousel.

-Readmore Text

Add a custom Text for Readmore button here.

Show Bottom Meta Elements

This is something really cool, you can enable this option to show a nice looking Author Image and Name and Post Publish date for each Post card.

-Bottom Date

You can disable this switch If you don't want to show Date in this Meta Element.

-Bottom Author

Carousel Settings

Carousel Effect

Choose a Carousel effect from 4 Different Effects and more to add soon.

Slide
Coverflow
Flip
Cube

Columns

Enter how many columns you want to show in the Carousel.

Use Multiple Row

You can enable this option If you want to show multiple rows of Posts, lets say you enter 2 in the "Row Per Slide" field and then you'll see two Rows of Posts, a new one below the first one and It will work the same way. You can change the "Row Per Slide" value to whatever you like.

Centered Mode

If enabled, then active slide will be centered, not always on the left side.

Spacing

Add some spacing between carousel Items.

Transition Duration

Change the duration when sliding the Carousel using the arrows here.

Infinite Looping

Enabling this option causes the carousel to loop. Means when you’ll click on the arrow to go to next slide it will then keep looping and shows all the item from first to end. Disabling this will show only the number of Posts and you can’t use the next arrow if slides are ended then you’ll have to use the previous arrow.

Autoplay

You can enable this option to slide Carousel Items automatically according to the time you'll set.

-Autoplay Speed

Change the time interval for the slides to change after that time.

-Pause on Hover

Enable this option, If you want to pause the carousel autoplay when the mouse is on the Carousel Module.

Pagination

Enable or Disable this option to show or hide the pagination dots.

Navigation

Enable or Disable this option to show or hide the arrows.

Use Equal Height

Equalize the carousel Items height. Carousel Card Items will be 100% in Height.

Design Options

Post Item

Changes you'll make here will be applied to the Post Items/Cards in the carousel.

Post Item Padding

Add padding around the Post Item here.

Background Color

Add a background color for each post Card in the Carousel here.

And else you can play around with adding Corner Radius, Border and Box Shadow to Post Items/Cards in the Carousel.

Post Thumbnail

Thumbnail Height

You can change the height of the Featured Image here. A really helpful option.

And else you can play around with adding Corner Radius, Border, Box Shadow and Filters to Post Thumbnails in the Carousel.

Post Entry Title

Here you can change the Title styling, you can change the Heading Level, font, size, weight and much more for the Title.

Post Entry Summary

Here you can style the Description/Excerpt text the way you like.

Post Entry Meta

This is where you'll be able to style the Meta text, such as Date, Category, and Author font.

Alignment

Here you can change the alignment of the Meta text to Left, Right or Center.

And below you'll find options to style you Author, Date and Category Text's Font, Weight, Color and much more. You can give different styling to all of them.

Navigation

This is where you can style the Navigation/Arrows of the Carousel.

Navi Vertical Position

You can change the vertical position of the Arrows/Navigation here.

Left Navigation Position

From here you can horizontally change the position of the Left/Prev Arrow.

Right Navigation Position

From here you can horizontally change the position of the Right/Next Arrow.

Navi Arrow Icon Size

Here you can change the Size of the arrows.

Custom Prev Arrow Icon

Enable this option If you want to set a custom Icon for the Prev Arrow, enabling this option will show the Divi Icon Library to choose an icon.

Custom Next Arrow Icon

Same goes here, enable this option If you want to set a custom Icon for the Next Arrow, enabling this option will show the Divi Icon Library to choose an icon.

Arrow Color

Here you can change the Arrow Color.

Arrow Background Color

Change the Arrow Background color from here.

And below you'll find options to add Rounded Corners, Border and Box Shadow to the Arrow Icons.

Pagination

This is where you can style the Pagination/Dots.

Pagination Position

Change Vertical position of the Pagination here.

Pagination Color

Change the color of the Pagination here.

Pagination Active Color

Change the Active Pagination color from here.

Pagination Button Style

Here you can change the Pagination style, you've got 3 different styles to choose from.

Default
Dynamic
Progress Bar

Bottom Meta Items

Here you can play around with Bottom Meta Items styling.

Image Width

Change the Author Image width from here.

And else you can play around with the Author Name and Date Text styling. And add Rounded Corners, Border and Box Shadow to the Author Image.

Overlay

Enable this switch If you want to show an Overlay when hover on Thumbnail. When you'll enable this option It will open some settings and ask you to pick an Icon from Divi Icon Library.

Overlay Icon Color

Change the Icon Color here.

Overlay Icon Size

Change the Size of the Icon from here.

Overlay Background Color

Change the Overlay Background Color here.

Advanced Options

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

Question 11

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 12

Divi Custom Attributes

Accepted Answer

What are HTML Attributes

You need HTML attributes to store various information associated with different pages elements, this information might not be essential for readers, but many JavaScript libraries and bots depends on it to run correctly. Many of them allow you to tweak their behavior by defining custom data attributes with given values.

You'll learn more on how to use these Attributes here: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

Now you can easily add Custom HTML Attributes in Divi with Divi Supreme's Custom Attributes Extension. With Custom Attributes extension, you can add attributes to the Wrapper of the Section/Row/Column/Module or Button.

Before Using

To use the Divi Supreme Custom Attributes Extension, you must first enable it from Divi Supreme Settings.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/yplEX7R6gU/2021-12-20%20at%2017.32.37.png (2021-12-20 at 17.32.37 (2022).png)

How to use Custom Attributes

You can find the Custom Attributes Settings by going in Settings Modal -> Advanced Tab -> Custom Attributes.

Go to any Section/Row/Column/Module settings -> Advanced tab -> Custom Attributes and enable "Use Custom Attributes".
Then you can choose whether you'd like to add the Attribute to the Wrapper or a Button in that Wrapper.
Then you can add a Title/Label to your Attribute and click the check-mark to enable the Attribute.
To add your attribute click the "Link" Icon.
Now, you'll see a Popup where you can add your Attribute Name and Value.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/k7cer8P636/2021-12-20%20at%2017.51.45.png (2021-12-20 at 17.51.45.png)

This is how the Attribute should look like on Frontend.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/rleCG7Qp0h/2021-12-21%20at%2009.56.29%20%281%29.png (2021-12-21 at 09.56.29 (1).png)

And that's it, if you want to add more Attributes, simply click the + Icon and you'll be able to add as many Attributes as you wish.

You'll learn more about Attributes References here: https://www.tutorialspoint.com/html5/html5_attributes.htm

Video Guide on How to add Attributes

Question 13

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 14

Divi Popup Extension

Accepted Answer

Divi Supreme's Popup extension opens a whole new world for Creating Popups in Divi. It makes it really easy while creating Popups of anykind. It's a whole new solution that works really nice with Divi.

This extension will extend the Visibility Option in all the Module setting that will allow you to use the Popup.

Currently, the available supported modules are listed below:

All Divi Default Modules
All Divi Supreme Pro Modules(Pro Version).

Before Using Divi Popups:

Before you start using the whole new solution of Popups make sure that It’s Enabled from the Plugin Settings. Go to Divi Supreme Pro > Enable Supreme Popup and the Click on the Save Changes Button.

Usage

To use Divi Popups Extension, go to any of the supported module’s (listed above) settings and navigate to the Advanced Tab Scroll to Visibility and look for Use Popup Switch.

Use Popup

This will enable or disable the Popup extension.

Popup Type:

This is where you can choose the Popup type.

Layout: You can choose this option to select a layout from Library to be shown in Popup.
iFrame: Using this Popup type you can load a web URL in the Popup.
Image: You can use this to show an image in the popup. You’ll be prompted to upload an image or select from Media Library..
Video: Using this Popup type you can show a video in the Popup just enter the URL of the video and you’re good to go..

Popup (Divi Library):

This is an interesting part where you can choose any Layout from your Library to show in Popup.

Trigger On:

This is where you can choose how to trigger the Popup.

Module Click: The Popup will be triggered when the whole module is clicked.
Button Click: If the module is Button the popup will only be triggered when exactly the button is clicked.
Image Click: If the module is an Image the popup will only be triggered when exactly the image is clicked.
Hyperlink Click: If there is any link in your text module then selecting the Hyperlink method will show the Popup when the link is clicked.
By ID: Select this Trigger Type to open the Popup from any element click If It has that ID.
By Class: Select this Trigger Type to open the Popup from any element click If It has that Class.
Page Load: If selected the Popup will be shown on Page Load
—–Timed Delay: Set the Duration for the Popup to show.
—–Cookie Expiry: Set the Expiry in days after then the Popup will be shown again.
—–Use Custom Cookie Expiry Date: Set your own Custom Expiry for the cookie.
Scroll: If selected the Popup will be shown only then when you’ll scroll to that module.
—–Timed Delay: Set the Duration for the Popup to show.
—–Cookie Expiry: Set the Expiry in days after then the Popup will be shown again.
—–Use Custom Cookie Expiry Date: Set your own Custom Expiry for the cookie.
Exit Intent: If selected the Popup will be shown when you’re about to leave the Browser Tab.

Close Popup Triggers:

This is where you can choose the way your popup should be closed.

Outside Popup: The Popup will close after clicking anywhere outside of the popup.
Close Button: A button will be shown to close the popup you can change the icon of the button and play with colors as well.

Use Auto Close Popup:

Enabling this option will let you close your popup after time you’ll enter in the field.

After Time Passed (in s): A button will be shown to close the popup you can change the icon of the button and play with colors as well. *

Entrance Animation In:

This is where you can choose the Entrance Animation of your Popup from 43+ Different Animations.

Exit Animation In:

This is where you can choose the Exit Animation of your Popup from 43+ Different Animations.

Popup Position:

This is where you can choose where on the screen the popup will show. There are 9 places you can select from:

Top Left
Top Center
Top Right
Center Left
Center
Center Right
Bottom Left
Bottom Center
Bottom Right

Popup Position Type:

Absolute: If selected the popup will be shown as simple content on page it will scroll with page scroll.
Fixed: If selected the popup will be fixed on screen it will stay on front even on page scroll. Very great for Cookie Notice.

Use Fullwidth:

Here you can enable this option to make the popup content to be shown on full screen.

Popup Max Width:

Here you can enable this option to make the popup content to be shown on full screen.

Show Overlay:

You can choose this option whether you want to use the background overlay or not

Overlay Background Color:

Here you can change the width of the slider.

Show Close Button:

Using this Switch you can Show or Hide the Close button to Close the Popup.

Close Button Placement:

Here you can change the Placement of the Close Button Inside or Outside.

Inside: This will show the Close Button inside of the Popup.
Outside: This will show the Close Button outside of the Popup.

Close Icon Font Size:

Here you can change the size of the close button.

Close Button Icon:

You can change the Icon of the Close button to your Desired one from the Whole Divi Icon Library.

Close Button Background Color:

Here you can change the Background Color of the Close Button Icon.

Close Button Icon Color:

Here you can change the Color of the Close Button Icon.

Some Tutorial/Helpful Links for you to get started with Divi Popup Extension:

How to create Popups using Divi Popup Extension - Complete look at all the Features

How to Create Beautiful Popup with Divi Supreme - A simple popup + Free Layout

10 Beautiful Popup Layouts to Get Started with Our Popup Extension

How to Open Popup from Menu Item Click

So we've been getting a lot of requests on this from Customers to open the Popup from the Menu Item. So Finally, there's a way to Open It from any Menu Item you wish.

Step 1: Go to Divi -> Theme Builder -> Edit Global Footer and here add an empty Text Module.

Step 2: Then Set up your Popup in this Module the way you wish. And make sure to change the Trigger type to "By Class" and then enter the class "open-popup" (You can add any class here).

Step 3: Now go to Appearance -> Menus and here click the "Screen Option" at the top and check the "CSS Classes" option.

Step 4: Now add that class to any Menu Item you wish to Open the Popup from.

Video Walkthrough:

Question 15

Supreme FAQ Module

Accepted Answer

If you’re tired of dull, boring FAQs on your website, it’s time to try something new. With Divi Supreme FAQ module, you can create stunning FAQs that are both informative and visually appealing. There are many styling and content options available, so you can customize your FAQs to match your website’s look and feel.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/sSdVUG3yiX/2022-09-17%20at%2017.50.57.png (2022-09-17 at 17.50.57)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/axWxoB0raG/2022-09-17%20at%2017.50.30.png (2022-09-17 at 17.50.30)

Adding FAQ Items

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

See below for individual FAQ Item settings.

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

General

Gap

Here you can add a gap between your FAQ Items!

Make Accordion

Enable this option If you'd like to make the FAQs Accordion, with this only one item can be opened at a time, other items will be closed automatically.

Open First Item

Enable this option, If you'd like to have the First Item opened by default.

Enable Schema Support

If you'd like to show your FAQs in Google (& Others) Search Results, then enable this option.

Use Image

If you'd like to use the same Image in the Toggles for all FAQ items, then you can enable this option. A new Panel will appear, where you can add your Image for both states. See In Item settings, If you'd like to have a different image for each item.

Animate Toggle Icons

Enable this option If you'd like to animate the Toggle Icon when you open/close a Toggle.

Toggle Icon

Open FAQ Icon

Select Icon for the FAQ for Open State here.

Close FAQ Icon

Select Icon for the FAQ for Close State here.

Icon Placement

Here you can change the placement of the Icon, If you place it right, It will move the Image to Left (If used) and Icon to right.

Toggle Image

This Panel will only appear If the "Use Image" option is enabled in the "General" Settings.

Open Image

Select Image for the FAQ for Open State here.

Close Image

Select Image for the FAQ for Close State here.

Design Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/mjPiOwTET3/2022-09-17%20at%2018.01.54.png (2022-09-17 at 18.01.54)

Open State Title

Margin

Add Margin to the Icon here If you wish - For Open State.

Padding

Add Margin to the Padding here If you wish - For Open State.

Open Icon Font Size

Change the Icon Font Size here - For Open State.

Else you can customize the Icon Open State by adding Border, Border Radius & Box Shadow etc.

Icon Close State

Close Icon BG Color

Change the Background Color of the Icon here - For Close State.

Close Icon Color

Change the Color of the Icon here - For Close State.

Margin

Add Margin to the Icon here If you wish - For Close State.

Padding

Add Margin to the Padding here If you wish - For Close State.

Close Icon Font Size

Change the Icon Font Size here - For Close State.

Else you can customize the Icon Close State by adding Border, Border Radius & Box Shadow etc.

Content

This is where you can customize the Content Description by changing its font, size, color and weight etc.

Advanced Options

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

Supreme FAQ Item Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/CAd6Fddrrj/2022-09-17%20at%2018.14.02.png (2022-09-17 at 18.14.02)

General

Title

Here you can Add Title for your FAQ Item.

Content

Here you can Add Content for your FAQ Item.

Use Image

If you'd like to use Image in the Toggle for this particular item, then you can enable this option. A new Panel will appear, where you can add your Image for both states.

Toggle Icon

Open FAQ Icon

Select Icon for the FAQ for Open State here.

Close FAQ Icon

Select Icon for the FAQ for Close State here.

Toggle Image

This Panel will only appear If the "Use Image" option is enabled in the "General" Settings.

Open Image

Select Image for the FAQ for Open State here.

Close Image

Select Image for the FAQ for Close State here.

Supreme FAQ Item Design Options

Below Styling Options will only apply to this Particular Item and won't be applied to other Items, to have the same styling for all FAQ Items, use Design Options in the Main Settings.

Open State Title

Margin

Add Margin to the Icon here If you wish - For Open State.

Padding

Add Margin to the Padding here If you wish - For Open State.

Open Icon Font Size

Change the Icon Font Size here - For Open State.

Else you can customize the Icon Open State by adding Border, Border Radius & Box Shadow etc.

Icon Close State

Close Icon BG Color

Change the Background Color of the Icon here - For Close State.

Close Icon Color

Change the Color of the Icon here - For Close State.

Margin

Add Margin to the Icon here If you wish - For Close State.

Padding

Add Margin to the Padding here If you wish - For Close State.

Close Icon Font Size

Change the Icon Font Size here - For Close State.

Else you can customize the Icon Close State by adding Border, Border Radius & Box Shadow etc.

Content

This is where you can customize the Content Description by changing its font, size, color and weight etc.

Timeline Item Advanced Options

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

Question 16

Divi Library Shortcodes Extension

Accepted Answer

If you ever wanted to use a Divi Module inside another module then this extension will be helpful. Using this Extension you can easily put a Divi Layout(Saved in your Library) inside of any module where you can write text. When you’ll enable this extension you’ll then see a Shortcode added for your Layout you’ve saved in Divi Library. This is a free extension which means it can also be found in our Free Plugin.

Before Using Divi Popups:

Before you start using the shortcode extension make sure that It’s Enabled from the Plugin Settings. Go to Divi Supreme Pro > Enable Divi Library Shortcodes and the Click on the Save Changes button.

Usage

When you’ll enable this extension from the plugin settings you can open up the Divi Library and you’ll see shortcode for each layout in the Library.

Question 17

Using Dynamic Assets with Divi Supreme.

Accepted Answer

⚡ Dynamic Assets Now available in Divi Supreme Pro version 4.8! This eliminates all file bloat and greatly improves load times. Divi Supreme is now more clean, lean and bloat-free.

All supreme modules and extensions CSS are broken up into individual files. Only load CSS/JS files when they are needed on the page on all Supreme Modules and Extension. Unused CSS is never loaded. Same goes to JavaScript assets.

No-one cares about your Divi sites like Divi Supreme do.

How To Enable Dynamic Assets

To enable Dynamic Assets, Navigate to Divi Supreme Settings Page -> Misc Tab -> Enable Dynamic Assets.

You need to clear "Static CSS File Generation" under Divi -> Theme Options -> Builder -> Advanced Tab. Re-saving page might be required where the Divi Supreme Modules and Extension are being used if it does not work.

You also need to Enable "Dynamic CSS" under Divi -> Theme Options -> Performance.

Video Walkthrough

Question 18

Divi Responsive Viewer Extension

Accepted Answer

Introducing Responsive Viewer Extension for Divi. Want to create even more responsive websites with Divi then this extension is made for you.

Breakpoint Presets Preview

Save your precious time and preview all your responsive design in different breakpoint with just a few clicks.

Custom Breakpoint Preview

Besides choosing from the presents, You can also set your own custom responsive sizes right in the Divi Builder.

Perfect Responsive

It’s time to make your mobile Divi sites even better. Preview your beautiful design for iPhone, iPad, Android devices or even the biggest or smallest mobile devices.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/sxcCVjYWLd/dsm-responsive-viewer.gif (dsm-responsive-viewer.gif)

Before you start using

Make sure that the extension is enabled from Divi Supreme’s Settings page for it to work.

How it Works?

After enabling the extension you’ll now be able to see more responsive sizes when you’re editing your page using Visual Builder, Backend Divi Builder, and Theme Builder. When you’ll go to Mobile view you’ll now see some more screen sizes and a field where you can set your own custom size.

Backend Builder Preview

Here’s a quick look at how it Looks like in the Backend Divi Builder. If you love to use the Divi Backend builder that don’t worry this extension also work perfectly there.

Theme Builder Preview

This extension also works with the Divi’s Theme Builder helping you to create more responsive Header, Footer, Archive pages and more. Here’s a quick look

Question 19

Translating Divi Supreme Modules with WPML

Accepted Answer

Divi Supreme works with multiple Translation plugins out of the box. And in this guide we'll show you how translate Divi Supreme Modules when using WPML, which is the most popular Translation plugin for WordPress with a tons of functionalities and features.

Before We Get Started, make sure you have the following plugins installed & activated on your site:

Divi Supreme Pro
WPML Multilingual CMS (Main Plugin)
WPML Media
WPML String Translation

If you're new to using WPML, check out their Getting Started Guide for more information on installation and setup.

How to Translate a Page with WPML

Let's see how you can easily translate your Page using WPML, which will also nicely translate Divi Supreme Modules.

Make sure to have your Page Published and there are Divi Supreme Modules on the page to be translated.
Now Edit that page you need to Translate.
On the right side, you'll see "Language" panel, this is where you can hit the + Icon to translate the whole page (In our case, we'll click the + Icon next to French).

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/TmGvEYddU1/2024-05-16%20at%2001.30.16.png (2024-05-16 at 01.30.16)

Next, you'll be redirected to WPML Translation page, and this is where you can translate all the content of the page to your preferred language.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/c69QFpqiSg/2024-05-16%20at%2001.41.43.png (2024-05-16 at 01.41.43 (2025).png)

Once you reach 100% Progress level, make sure to click the "Complete Translation" button and you'll be redirected back to your website. Now If you view the page, and switch the Translation option, It will work nicely.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/9GcJlQ0IV6/2024-05-16%20at%2001.48.59.gif (2024-05-16 at 01.48.59)

Note: If you're using a Gallery Module, then the module might not work correctly on the translated page. To fix that, enable the Divi Visual Builder on the Translated Page and reselect your gallery Images.

Question 20

Divi Block Reveal Image Module

Accepted Answer

Create engaging and fresh interactions using Divi Block Reveal Image Module. The effect first shows a decorative block element drawn and when it starts to decrease its size, it uncovers image underneath. You get 4 types of animation to choose from.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/IwjnfgDeSm/showcase-block-reveal-image-module.gif (showcase-block-reveal-image-module.gif)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/xSzxD8AwfS/block-reveal-image-module.png (block-reveal-image-module.png)

Image

Add the Actual Image here that will be shown after a cool animation.

Link

Open in Lightbox

Here you can choose whether or not the image should open in Lightbox. Note: if you select to open the image in Lightbox, URL options below will be ignored.

Open as Video Popup

Put the Video link on the Image URL. Copy the video URL link and paste it here. Support: YouTube, Vimeo and Dailymotion. Then If you click on the Image a video Popup will be shown.

Block Reveal Animation

Block Reveal Animation style

Here you can set Animation Direction. You can select where it will start from and where it will be ending. You Have Four Options to choose from:

Left to Right
Right to Left
Top to Bottom
Bottom to Top

Block Reveal Color

Here you can change the color of the Block which will be shown first with an animation.

Delay

Adjust the Delay of the Block Reveal Animation here.

Animate in Viewport

The Text Animation will only be shows at a specific Viewport.

Design Options

Overlay

Image Overlay

Enable this switch if you want to add overlay color or icon or both to the image.

Overlay Color

Change the color of the overlay on the image to your own one.

Use Icon

You can enable this option if you want to show an icon in the overlay. And then can choose any icon from the Divi Icon Library and Change it’s color as well.

Overlay Rounded Corners, Border and Box Shadow

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

Add Rounded Corners, Border and Box Shadow to Image

Here you’ll find options to control the corner radius of the Image. You can play around with adding borders and Box Shadow to the Image under Design Options.

Advanced Options

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