Question 1

Divi Supreme Masonry Gallery Module

Accepted Answer

With Divi Supreme’s Masonry Gallery Module you can easily showcase your Images in an interesting way. Showcase your Portfolio in style whether you’re Web Designer, Photographer, etc this Module is made for you.

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/NO90dSfCVX/dsm-masonry-gallery-content-options.png (dsm-masonry-gallery-content-options.png)Gallery

Add Images from Media Library to show in the Gallery.

Settings

Use Overlay

This will enable the Overlay on each image Hover and will use the "Title" and "Description" option from Media Library. You'll need to add Title and Description to each image in Media Library to show the Overlay.

Use Lightbox

Enable this option If you want to open each Image in Lightbox/Popup and then you'll be able to switch the Image by clicking on Arrows in the Lightbox.

Use Horizontal Order

Enable this option if you want to change the Images to Horizontal Order.

Use Zoom on Hover

Enable this option to add a cool Zoom effect on Hover on each image in Gallery.

Design Options

Grid Layout

Here you'll be able to style the Images in the Gallery.

Columns

Here you can change the number columns you want to show for the Masonry Images. You can enable the Responsive Option to set column number for Mobile Devices.

Columns Gaps

Increase or decrease the Value to change the Column Gap.

Grid Items

Grid Item Rounded Corners and Border

Here you can add Rounded Corners and Border to each Image in the Gallery.

Grid Item Box Shadow

Set a custom Box shadow for each Image in the Gallery.

Overlay

You can Design the Overlay text here.

Show Image Overlay Title

Disable this option If you don't want to show the Image Overlay Title.

Show Image Overlay Description

Same goes here, disable it If you don't want to show Overlay Description.

Overlay Color

You can change the color of the Overlay here.

And further you can style the Title/Description text, You can change Font, Size, Weight and much more of Title and Description text.

How to change the Overlay's title and description?

You can edit the image title and description via the WordPress Media Library. Simply just put in your custom Title and Description text into the input field. This will shows up in the Overlay.

You can also set a custom URL to each image by inserting a custom URL in the "LINK URL" input field under "Divi Supreme Modules Only".

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/Te5CaSuPBf/masonry%20galleryimg-min.png (masonry galleryimg-min.png)

Advanced Options

Use the advanced options to give your Masonry Gallery 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 Menu Module

Accepted Answer

Display your WordPress menu and design it in whatever way you want. Use it for Footer or Sidebar.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/kHUh9yrPUD/footer-1024x427.png (footer-1024x427.png)

Content Options

Menu Title

This field is where you can enter the title of your menu.

Menu

Select a menu that should be used in the module. You can create new menus using the Appearances > Menus page in your WordPress Dashboard. Each time you create a new menu, the menu will be selectable in this dropdown menu.

Collapse Sub Menu

Enable this Option If you'd like to collapse the Sub Menu and that will reveal when you click on the Parent Menu Item.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/pPt7En8bRB/dsm-menu-711x1024.png (dsm-menu-711x1024.png)

An example how we use the menu module with the Footer Template to design our Footer

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/kHUh9yrPUD/footer-1024x427.png (footer-1024x427.png)

Admin Label

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

Design Options

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

Layout

Menu Layout

Currently the available Menu Layout is vertical.

Title

Here you can style the Title text of the Menu Module

Bottom Gap

Add some spacing under the Title text of the Module.

And you can then change the color, font, weight and more of the Title text.

Sub Menu

If there's a sub menu in the Menu you've added, then you can style those submenus here.

Left Spacing

Add some spacing on Left of of the Sub Menu Item(s).

And then you play around with changing Font, size, weight and more of the Sub Menu Items.

Sub Menu Collapse

From here you'll be able to style the Sub Menu Collapse Icon easily.

Arrow Color

Here you'll be able to change the Icon color.

Arrow Background Color

You can change the Arrow Background color from here.

Arrow Gap

Change the Arrow gap between the Menu Item and Arrow Icon.

Arrow Padding

You can add Padding to the Icon from here, Useful If you've added Background to the Icon.

Arrow Font Size

You can change the Icon font size from here.

Arrow Border, Border Radius and Box Shadow

And else you can add border radius, boc shadow and Border to the Icon easily.

Animation

Use Link Hover Animation

Enable this option to add a Hover animation to Menu Items.

Animation Type

Change the Type of the animation of the Animation here. Currently there's only Underline available we'll be adding more in upcoming updates.

Underline Animation

Here you can change the direction of the Underline Animation. You can change the direction of the Underline from 3 different types:

Left to Right
Right to Left
Center Out

Link Color

Change the color of the Underline here.

Advanced Options

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

Question 3

Divi Before After Image Slider Module

Accepted Answer

The Divi before after image slider module allows you to display the before and after versions of an image by simply sliding over them. Users will be able to move a slider to easily compare the two images.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/nMvcApx2MN/dsm-before-after-image-slider-demo-min.png (dsm-before-after-image-slider-demo-min.png)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/n1Wpk7dxic/dsm-before-after-image-slider-ss-min-453x1024.png (dsm-before-after-image-slider-ss-min-453x1024.png)

Note: Make sure that the images that you’ll place in before and after image section should be the same size, or it will make it look bad.

Images

The Image you’ll add in the first section will be the Before Image and the second one will be the After image. When you’ll add images you’ll see these options for before and after images:

Before/After Image Alternative text

This defines the HTML ALT text. A short description of your image can be placed here.

Before/After Image Title Text

This defines the HTML Title text.

Labels

Before Label text

Here you can define a custom Label text for the Before label text.

After Label text

Here you can define a custom Label text for the After label text.

Show Labels on Hover

Enable this option If you'd like to show labels on Hover only. Disable to always show the labels.

Settings

Default Offset Percentage

Here you control the position of the handle (that you use to see before and after) when the page loads. For example, If you set the offset to 0 the handle will be on the very left, and if it’s 0.5 the handle will be in the center.

Orientation

Here you can control the orientation for the handle to either Horizontal or Vertical.

No Overlay

When you hover to the Before After Image module you see an Overlay, enabling this option will remove the overlay when you hover.

Move Slider on Hover

If enabled, when you’ll hover over to the image the handle will move as the mouse moves.

Move Slider with Handle

Allow a user to swipe anywhere on the image to control the handle movement.

Click to Move slider

Allow a user to click (or tap) anywhere on the image to move the handle to that location.

Design Options

Before and After Label

This is where you can design the Before and After Label, you can add a custom background color, you can change the label font, size, color, and more.

Overlay

Here you can define a custom color for the overlay that shows when you hover over the image.

Handle Slider

Here you can design the Handle that is used to see before and after image.

Handle Border Color

You can change the color of the Handle border to your custom one.

Handle Border Radius

You can add some Corner radius to the Icon that you see in the center of the slider.

Handle Background Color

This is where you can change the background color of the handle icon.

Handle Arrow Color

This is where you can change the color of the handle icon.

And even you can add Some box-shadow, corner radius and Border to the module in the design settings the same way you do with other Divi modules.

Advanced Options

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

Question 4

Divi Blog Carousel Module

Accepted Answer

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

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/rHI8G12zbg/blog-carousel-content-1.png (blog-carousel-content-1.png)

Post Count

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

Included Categories

Choose Which post categories you want to show, you can select a particular category or choosee "All Category" to show all category posts.

Date Format

Change the Date format from here the way you like.

Elements

Show Featured Image

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

Show Title

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

Show Excerpt

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

Excerpt Text

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

Show Date

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

Show Category

Enable this switch If you want to show Post Categories in the Carousel for each post.

Meta Separator

Here you add a custom Meta Separator.

Author

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

Readmore Button

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

-Readmore Text

Add a custom Text for Readmore button here.

-Read More Link Target

From here you'll be able to change the Link Target to open in the Same Tab or in a New Window.

Show Bottom Meta Elements

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

-Bottom Date

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

-Bottom Author

You can also hide post Author Name by disabling this switch.

Carousel Effect

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

Slide
Coverflow
Flip
Cube

Carousel Direction

You can change the Carousel Content Direction from here, It can be either "Left to Right" or "Right to Left".

Columns

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

Use Multiple Row

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

Centered Mode

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

Spacing

Add some spacing between carousel Items.

Transition Duration

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

Infinite Looping

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

Autoplay

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

-Autoplay Speed

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

-Pause on Hover

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

Pagination

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

Navigation

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

Use Equal Height

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

Design Options

Post Item

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

Post Item Padding

Add padding around the Post Item here.

Background Color

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

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

Post Thumbnail

Thumbnail Height

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

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

Post Entry Title

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

Post Entry Summary

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

Post Entry Meta

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

Alignment

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

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

Navigation

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

Navi Vertical Position

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

Left Navigation Position

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

Right Navigation Position

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

Navi Arrow Icon Size

Here you can change the Size of the arrows.

Custom Prev Arrow Icon

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

Custom Next Arrow Icon

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

Arrow Color

Here you can change the Arrow Color.

Arrow Background Color

Change the Arrow Background color from here.

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

Pagination

This is where you can style the Pagination/Dots.

Pagination Position

Change Vertical position of the Pagination here.

Pagination Color

Change the color of the Pagination here.

Pagination Active Color

Change the Active Pagination color from here.

Pagination Button Style

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

Default
Dynamic
Progress Bar

Bottom Meta Items

Here you can play around with Bottom Meta Items styling.

Image Width

Change the Author Image width from here.

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

Overlay

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

Overlay Icon Color

Change the Icon Color here.

Overlay Icon Size

Change the Size of the Icon from here.

Overlay Background Color

Change the Overlay Background Color here.

Advanced Options

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

Question 5

Divi Image Carousel Module

Accepted Answer

The easy way to create a beautiful image carousel using Divi Supreme Image Carousel Module. The image carousel module is perfect for showcasing a set of images, your portfolio pieces, client logos and much more.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/5yMFBHsiQW/showcase-5-1024x364.png (showcase-5-1024x364.png)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/QvMi00dlvf/dsm-image-carousel-module.png (dsm-image-carousel-module.png)

Image Carousel

+Add Gallery Images

Choose multiple images from your Media Library here.

Order by

You can change the order of the images to default(show images the way you selected) or Random(Shows images randomly)

Image Size

Change the size of all the images here.

Carousel Settings

Carousel Effect

Here you can change Carousel Slide Effect from 4 different effects.

Slide
Coverflow
Flip
Cube

Coverflow Effect settings

If you'll select Carousel Effect as Coverflow you'll see these options:

Show Shadow - Adds a shadow to next Carousel Images.
Coverflow rotate - Set the Rotate amount of the next images in the slide.
**Coverflow Depth **- Increase to show more items in the carousel with coverflow effect.

Carousel Direction

You can change the Carousel Content Direction from here, It can be either "Left to Right" or "Right to Left".

Centered Mode

This mode will show the next image in the carousel centered means half of the image will be appearing which tells there are more items to see.

Slides to Show

Here you can change the number of images to show in one slide.

Slides to Scroll

Here you can change the number of slides to scroll when click on the arrow button to see the next items.

Slider Speed

Here you can change the speed for sliding the slider.

Use Multiple Row

You can enable this option If you want to show multiple rows of Images, lets say you enter 2 in the "Row Per Slide" field and then you'll see two Rows of Images, 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.

Autoplay

You can enable this option to slide images automatically.

Autoplay Change interval

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

Spacing

Add some spacing between carousel images.

Infinite Looping

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

Show Arrow

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

Show Pagination

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

Disable Touch/Dragging

Use this option to disable touch/drag to slide the Carousel.

Use Grab Cursor

Enable or Disable this option to make the mouse icon to grab cursor icon.

Lightbox

Open Image in Lightbox

Enable or Disable this option to open the images in the lightbox when click on a single image. Enabling this option will reveal some more options too.

Image Size

Here you can change the Size of the Image when opened in Lightbox.

Lightbox in Gallery Mode

Enable this option If you want a gallery in lightbox, this will show next & prev arrow in the Lightbox to switch to another Image in carousel.

Display Caption

Enable this option If you want to show Image Caption in lightbox. You can set Image caption by opening the Image in Media Library.

Design Options

Layout

Horizontal Alignment

Change the horizontal alignment of the images. If you have small and big size images in the carousel then this option would be helpful.

Element

Arrow Position

Change the arrow position to inside or outside of the carousel.

Mobile Arrow Position

Change the arrow position to inside or outside of the carousel for Mobile Devices only.

Arrow Size

Change the font size of the arrow.

Arrow Color

Change the color of the arrow.

Arrow Background Color

Change the background color of the arrow.

Pagination Placement

Here you can change the Position of the Pagination dots vertically.

Pagination Active Color

Change the color of the Active dot in the Pagination

Pagination In-Active Color

Change the color of the In-Active pagination dots here

Image

This is the place where you can add corner radius, borders, box shadow and more stuff to the carousel images.

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.

How to add URL to each Carousel Image

Adding a URL to the Image

If you want to add a URL to each Carousel Image you can do that easily. All you've to do is open up that Image in the Media Library and add the Custom URL to it there. So when a user will click on the Image they’ll be taken to that URL that you added to Image. It will only work within Divi Supreme Modules.

Adding Download link to the Image

If you want to let your users download a file when they click on the image you can simply enter the URL of that download file and check the option “Download as File”.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/N6VfRHIpbk/Download-as-file.png (Download-as-file.png)

That's it!

Question 6

Divi Blob Shape Image Module

Accepted Answer

Fan of Blob Shaped Images? We got your back!

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/pYkPTQ33pR/blob%20shape%20image%20demo%20image.png (blob shape image demo image.png)

Content Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/FabVU8dRCy/blob%20shape%20image%20moduel%20-%20content%20options.png (blob shape image moduel - content options.png)

Image

Insert your Image here.

Blob Shapes

Choose any Blob Shape from 13 different Shapes.

Overlay Content

If you want to show content on the Image as an Overlay, then you can do so here.

Title

Add your Title here for the Overlay Content.

Description

Your description for the Overlay Content goes here.

Show Content on Hover

Enable this option If you like to show the Overlay Content on Hover.

Design Options

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/wt7Onx9t92/blob%20shape%20image%20module%20-%20Design%20options%20.png (blob shape image module - Design options .png)

Blob Image Settings

Blob Image is placed as a Background so you can change the Size & Position of the Image easily from here and make some other changes.

Size

Change the Size of the Image from here to "Cover" or "Initial".

Position

Change the position of the Image from here the way you like.

Blob Image Height

Change the Height of the Image from here If you need to.

And else you can add Border, Border Radius and Box Shadow to the Image If you like.

Overlay

You can also add Overlay Color or Gradient to the Image from here.

Use Overlay

Enable this Option If you'd like to add an overlay to the Image. And It will ask you to change the Color of the Overlay.

Use Gradient Overlay

Enable this option If you'd like to have a Gradient Overlay. Once enabled it will show different settings to change the Angle and Offset of the Gradient Color and you'll be able to have a Gradient Overlay as you desire.

Overlay Text

Here you'll be able to change the Styling of the Overlay Title, Description and add Spacing to the Overlay Content. Open the tab you'd like to change the styling of and make the changes you like. In the Spacing tab you'll be able to add Spacing around the Content.

Advanced Options

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

Question 7

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 8

Divi Floating Multi Images Module

Accepted Answer

A better and unique way to showcase multiple images to your visitors by using Floating Multi Images module. You can also change the animation either up/down or left/right.

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

Content Options

+ Image Item

This is where you add image to your Floating Multi Images Module. Clicking “add new item” will open a completely new list of design settings (including Content, Design, Advanced) for your new image. See below for individual image settings.

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

Animation

This is where you can change the floating animation effect.

Floating Effect

There are two types of Floating Animation Effect.

Image animation delay interval (in ms)

You can add a delay for the Animation to start in ms here.

Animation Speed

Here you can change the speed of the Floating Images Animation.

Image Item

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

Enable this switch to open the Image in Lightbox/Overlay.

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

Here you can change the placement and the width of the image.

Horizontal Align

Here you can change the horizontal alignment(left/right) of the image in percentage.

Vertical Align

Here you can change the vertical alignment(up/down) of the image in percentage.

Width

You can adjust the width of image.

Advanced Options

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

Question 9

Divi Supreme Content Toggle Module

Accepted Answer

The Layout might not show properly in the Divi Builder, Only on the front end It will be 100% accurate. This is something elegant themes will be improving in the near future for rendering divi library layout in visual builder.

Using the Divi Supreme Content Toggle Module you can easily create a Toggle to switch between two content Layouts. Use it to create stunning Pricing Tables, Food Menus and much more you can think of.

Content Options

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

Content One

Heading

Your heading for the Content one switch goes here.

Content Type

Here you can choose the Type of Content, If you'll choose "Custom Content", you'll be able to add custom content such text, Images and stuff. And If you'll choose type as "Library" then you'll be prompted to choose a Divi Library Layout. And for the third content type Shortcode, If you'll select it you'll be able to add shortcode of the content you want to show in the Toggle One.

Content Two

Heading

Your heading for the Content one switch goes here.

Content Type

Here you can choose the Type of Content, If you'll choose "Custom Content", you'll be able to add custom content such text, Images and stuff. And If you'll choose type as "Library" then you'll be prompted to choose a Divi Library Layout. And for the third content type Shortcode, If you'll select it you'll be able to add shortcode of the content you want to show in the Toggle Two.

Design Options

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

Switcher

Switcher Size

Here you can change the size of the Toggle Switch.

Alignment

Change the alignment of the toggle switch here to Center, Left or Right.

Switcher Primary Background Color

Here you can change the switcher primary background color. Which is the default state of the Switch.

Switcher Secondary Background Color

Here you can change the background color of the switch when you'll click to Switch the Content, the background color of the switcher will be changed to what you've added here.

Switcher Inner Color

Here you can change the color of the Switcher that indicates on which Switch you're currently on.

Heading One

Heading Level

Change the heading level from H1 to H6.

Here you can play with the Heading One by changing its font, size, color and weight and even add shadow to the text.

Heading Two

Heading Level

Change the heading level from H1 to H6.

Here you can play with the Heading Two by changing its font, size, color and weight and even add shadow to the text.

Content One

Content Background

Here you can change the background color of the Content One.

Content Padding

Add some padding inside the Content here, helpful If you've added Background, Border and Box shadow.

Content Spacing Top

Add some top spacing for the content one here If required.

Make this Layout Fullwidth

Enable this option to fullwidth the Layout.

And else you can play around with changing Text Font, Weight, Size and much more.

Content Two

Content Background

Here you can change the background color of the Content Two.

Content Padding

Add some padding inside the Content here, helpful If you've added Background, Border and Box shadow.

Content Spacing Top

Add some top spacing for the content two here If required.

Make this Layout Fullwidth

Enable this option to fullwidth the Layout.

And else you can play around with changing Text Font, Weight, Size and much more for content two.

Advanced Options

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

Question 10

Divi Image Accordion Module

Accepted Answer

Let's you display all of your images on your Divi website with a stunning hover/click animation and effects. Add as many items as you need providing them with icons, images, titles, descriptions, buttons, and links easily and quickly. It ensures the perfect image quality and combines them beautifully with amazing accordion effects.

https://malcolm-en-gb.s3.eu-west-1.amazonaws.com/instances/yTil6KxH5F/resources/BbJQFpk7nt/Image%20Accordion-min.gif (Image Accordion-min.gif)

Content Options

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

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

See below for individual Image Accordion Item settings.

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

Accordion Settings

Accordion Type

Here you can choose whether to open the Image Accordion by Hover or Click.

Accordion Content Animation

Choose any animation from 5 different animations for Content entrance.

Use Sequenced Animation

Enabling this option will add animation separately to all Elements in the Accordion such as Title, Description, Button, Icon etc.

Accordion Direction

You can change the accordion direction to either Horizontal or Vertical.

Accordion Height

Change Accordion height from here.

Design Options

Overlay

Overlay Color

You can add Accordion to each Accordion from here, just change the color to any RGBA Value and it will be applied over your Image. This could be helpful to read your text clearly.

Icon

Icon Color

Change Icon color from her, If you've added in the Accordion.

Use Icon Font Size

Enable this option If you want to change the size of the Icon, you'll then see a handle to control the size of the Icon.

Icon Image

If you've replaced your Icon with an Image then you can manage It's styling from here, you can add Border, Corner radius and Box Shadow.

Title

Title Heading Level

Change the Heading level of the Title from H1 to H6.

And else you can play around with other settings to style the Title text.

Description

Here you can play around with the styling of the Description text the same way you style the paragraph in Default Text Module.

Button

This is where you can style the Button If you've added in Accordion. Enable the switch "Use Custom Styles for Button" and then you'll see options to style the button the same way you design Default Divi Buttons.

Advanced Options

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

Image Accordion Item Content Options

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

Make Item Expanded

As the name suggests, enable this option If you want the Item to be expanded by default.

Image

Add the Main Image for the Accordion here.

Use Icon

Enable this option If you want to add an Icon to the Accordion Content, then disable the switch If you want to use Image instead of icon.

Title

Your Main Title goes here.

Description

Your Description content goes here.

Show Button

Enable this switch If you want to use Button in your Accordion, then It will ask you for the Button Text & URL.

Horizontal Align

Here you can align the Accordion Content Horizontally to Left, Right & Center.

Vertical Align

Here you can align the Accordion Content Vertically to To, Bottom & Center.

Image Accordion Item Design Option

Overlay

Overlay Color

You can add Accordion to each Accordion from here, just change the color to any RGBA Value and it will be applied over your Image. This could be helpful to read your text clearly. Enable Hover option to add a Hover Overlay effect ~ Best for Item settings.

Title

Title Heading Level

Change the Heading level of the Title from H1 to H6.

And else you can play around with other settings to style the Title text.

Description

Here you can play around with the styling of the Description text the same way you style the paragraph in Default Text Module.

Button

This is where you can style the Button If you've added in Accordion. Enable the switch "Use Custom Styles for Button" and then you'll see options to style the button the same way you design Default Divi Buttons.

Sizing

Content Width

Change the Content width from here.

Image Accordion Item Advanced Options

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