# Add License Key


After purchased plugin,

 Go to **WordPress Dashboard** >> **Divigrid** >> **License** >> write your license key and click **save changes.**

**![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/jpIWlY514rgeh7ZkfzIKC1XgMXTr28Cs1S3PcDLX.png)**


# How To Get  Your License Key


License Key is very important to activate the plugin and ensure that you get automatic updates and our premium quality support.

#### Purchased From DiviGrid

If you purchased this plugin from our website, you can find your license keys in your e-mail account with the download option. 
However, if you want to see your license key and whether the plugin is active or inactive or on which websites you want or have 
used this plugin, you can visit our website account area. There you will see two options.

##### a. View Details and Downloads

##### b. View Licenses

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/IYowOgKx8ks6na1TK19g3XLIZqAWIU8kVSj5fcMb.png)

#### View Details and Downloads

After clicking “View Details and Downloads” you will see your purchase details including license key and invoice and even you can see your plugin status in the subscription details options.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/GVceniDyPncK4FLVabo2IUhYTepNEqB61P7GT2sm.png)![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/84410WaYBmo8qjA8fJAdI8Z6ASojzVNpBDNF7Dsy.png)

#### View Licenses

After clicking the View Licenses option you can see your purchased items with Manage Sites option. Go to Manage Sites

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/x6H5eYJjnbAZX3eTH2XvnO0WkQfRu9wQxlGZD9s7.png)

Now you can see your License key and product name.

Also, you can see the URL of the website where you have used this plugin. If you want to use this plugin on a new website, add the link in the box below

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/SbMtmWpIjWDpDZiyCkVMepNwBLP51HZ8nNT4qH2G.png)


# Advanced Blurb


## Overview

Introducing the Advanced Blurb Module, a game-changer that transcends the limitations of the standard Divi Builder Blurb module. This module is a class apart, boasting a wealth of unique features and a modern aesthetic that sets it apart from the rest. What makes it truly special is its perfect blend of complete responsiveness across all devices and an easy-to-use customization interface, making it a powerful tool for crafting stunning content.

This documentation will help you to understand how to use the Advanced Blurb Module efficiently.

### Advanced Blurb Content Tab

After inserting the **DiviGrid Advanced Blurb Module** you will find several new toggles along with the default toggles. Toggle names are listed below

1. **Content**
2. **Image & Icon**
3. **Badge**
4. **Content Position**
 
**Content:**

In the content toggle, you can title, subtitle, description, and button. The required content for a blurb, i.e. title, subtitle, description and linkable buttons can be added from this toggle.

**Image & Icon:** There is an opportunity to go beyond conventional concepts and use images and icons together. There is also an option to change the image while hovering and use a different image. If you want to use this unique feature, you have to turn on the Show Alternate Image on the Hover switch from the Image & Icon toggle. After turning on an image field will appear. You just have to upload the image to use it. What to do for that is :

**Go to image & icon --> Enable Show Alternate Image Switch --> Upload and alternate image --> Save and publish.**

Also, if you need to use the icon for the sake of necessity, just switch on the use icon. Then select the icon and publish to see the image and icon showing simultaneously.

**Badge:** You can use badges in blurb in two ways. With and without images. When the image is present the badge will change its orientation to focus on the image. This means the badge can be set at any position on the image. Also when not using the image in some cases the badge will change its position by focusing on the full box. The idea that only text can be used in the bag can be changed by using badges and badge icons at the same time. Turn on the Use badge icon switch and select the icon. That's it.

**Content Position:** You can change the order between titles, subtitles, dividers, descriptions, and buttons located inside the container/box. The default value is 1. Gradually increasing the value from 1 causes the fields to change their position and move downwards. Decreasing the value of any of the fields below will make it appear above. Similarly, if you increase the value of any field placed above, it will appear below.

### Advanced Blurb Design Tab

After inserting the **DiviGrid Advanced Blurb Module** you will find several new toggles along with the default toggles in the design tab. Toggle names are listed below

1. **Z Index**
2. **Icon Settings**
3. **Image Settings**
4. **Hover Effect**
5. **Badge Settings**
6. **Divider Settings**
7. **Content Wrapper Settings**
8. **Button**
9. **Pocket Button Settings**
 
**Z Index:** Each element in the blurb is a separate stack. You can change the position of the stack by the z index value. The element with the lowest value will be at the bottom. Whichever has more will be at the top of the stack.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/ZQxOaR1HXYakmzo7riByV5VZx9VUoVQxmeOEUPJV.png)

**Alignment:** This alignment feature allows for effortless image repositioning. It provides the flexibility to place the image at any desired location, whether it's the top, bottom, left, or right. Once you've chosen a position, you can further fine-tune the image's alignment both vertically and horizontally, ensuring a precise placement. Plus, it seamlessly adapts to various devices, making it easy to opt for a left alignment on a desktop and switch to a top alignment on mobile views.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/pM9tqVXeD7n3DT9NEH2c5EaDZvFbYpeFz9ge3zVz.png)

**Icon Settings:** Modify the icon's color, size, margin, padding, border, box shadow, background, and alignment to your content. You have the flexibility to position the icon relative to the content box, whether it's at the top, left, right, or bottom, as well as adjust its placement. This feature seamlessly adapts to different devices and is a breeze to personalize. Moreover, for those who wish to write their own custom CSS, the Advanced tab provides a Custom CSS field for your creative expressions.

**Image Settings:** You have the power to adjust the blurb image's height, width, margin, padding, border, box-shadow, background, and alignment according to your preferences. You can use two types of values in image width, pixel value and percentage. The image's placement can be easily shifted using the Alignment options. This feature smoothly adapts to various devices, offering effortless personalization. Within the Image Settings, there's a captivating feature known as Image Overlay. This allows you to introduce a unique touch to your website by adding Mannan's signature overlay color to your image, enhancing its visual appeal. Moreover, if you're inclined to craft your own custom CSS, the Advanced tab offers a dedicated Custom CSS field, giving you the creative freedom to express yourself.

**Hover Effect:** A variety of effects can be created from hover effects to blurb images and custom buttons. Many hover effects are customized to save users time from writing custom code. Each effect is unique and new. Which is not possible to do with the Divi default button. Just choose and use. 10+ image hover effects and 15+ button hover effects are added in this hover effects toggle.

 | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/pUucNSC8pv1qqeHfNflLzSZHWmPH124wiB1GVemk.png) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/gQrL8D3MW5nmtbr1RPybKsVo3X6MmukMrcUvI3hK.png) |
|---|---|

**Badge Settings:** Blurb badges are a fundamental component, serving a vital role in drawing attention to specific items. These badges can significantly enhance the focus of your content. Within the settings, you'll discover the ability to incorporate an icon into your badge. These settings grant you the flexibility to position the icon alongside your badge text, allowing for precise customization. You have complete control over badge attributes like font style, color, icon size, icon color, spacing, background, margin, padding, border, box-shadow, and alignment. Choose from nine different positions to place your badge, and even explore rotation options, enabling you to express your content in a visually compelling and effective manner.

A crucial point to remember is that the location of the badge is dependent on the presence of an image. When an image is present, the badge will adjust its position to the image. However, where there is no image, the placement of the badge shall be based on the entire container or box. That means, the badge cannot be used against the container if it has an image in it.

**Divider Settings:** Dividers can be used to increase the readability of content. Besides, content can be more focussed by changing the order and replacing the title or subtitle nicely. You can change the divider color, height, width, align style margin, etc. from the divider settings.

**Content Wrapper Settings**: The contents of the content wrapper are a title, subtitle, description, divider, and button. Content wrappers about these. This text content is enclosed with a wrapper. It also has the necessary customization options. You can easily change width, alignment, background color, border, etc. from these settings

**Pocket Button Settings:** These configuration options are designed for customizing the appearance of button text and icons on pocket buttons, offering the flexibility to style them differently. Notably, these settings come into effect when the "Show Icon On Hover" switch is turned off. This separation of styles allows for individual adjustments of padding, background color, border, box-shadow, and more, specifically for the button text and icons. This innovative feature opens the door to creating distinctive button designs that can elevate the visual appeal of your content.

 | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/LxMCYbXrjHJ18iDxk5mI1gyijHMCIlKxvLcU4nFn.png) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/Nl1itAhQyEemzYhDIMUjBAh5HAZrr09GVzytcS0a.png) |
|---|---|

### Some common questions of Advanced Blurb

#### 1. How to use the alternate image?

If you want to show another image along with the blurb image, switch to Alternate Image. After that upload and save the image. When hovering over the image, the original image will fade away to reveal the alternate image through a smooth transition. This is a unique feature which is not available in other blurb modules.

#### 2. Can I use images and icons at the same time?

Yes Sure. You can use images and icons together. you can use and align both as your desired place.

#### 3. What are pocket buttons? How does it work?

Pocket button is a feature. If you want to customize your button text and icon with your own choice, you can do so by switching the pocket button switch turned on. What to do for that is to first switch on the use icon and switch off the show icon on hover. A pocket button switch is available after turning it off. You can switch and design the pocket button from the settings as you like.

#### 4. Can badges only be used in images?

No, you can use the badge on the image and also on the container. But it depends on some conditions. If your blurb module contains an image, the badge is relative to the image. Depending on the condition of the image, the badge can change its position to 9 different places. Again if there is no image in the module then the badge will change its position against the container.


# Advanced Heading Module


The Divigrid Advanced Heading Module is a powerful tool designed to create visually captivating headings with a wide range of customization options. This module is perfect for enhancing the typography of your website, allowing you to create dynamic and engaging headings that stand out. Below, you'll find comprehensive documentation for the Content and Design tabs of the Advanced Heading module, guiding you through the process of customizing your headings to suit your design needs.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/ejEWRYZFmIxK2YmysWRmNaJhsFdcvKQIYLrU1AmK.jpg)

### How to Add a Module to Your Page

Once Divi Grid is activated, multiple modules are introduced to the Divi Builder. To add a module to a page, follow these steps:

**Create or Edit a Page/Post:** Open an existing page or post, or create a new one using the Divi Builder.
**Create or Edit a Row:** Add a new row or edit an existing one within the page layout.
**Add a Module:**

* Click the Add New Module button within the selected row.
* From the module list, select DG Advanced Heading.

## **Content Tab Customization**

The Content Tab in the Advanced Heading module provides you with a variety of input fields and settings to customize the text content and structure of your headings.

### **1. Content**

**Prefix Text:** Add a text prefix to your heading. This could be a small introductory word or phrase that precedes your main title.

**Infix Text:** Place additional text in the middle of your heading, allowing you to emphasize or highlight certain parts of the title.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/eoGU66w8hJjWEl3aq4kNyDNNG5Y2xV0DnhrNwtp6.jpg)

**Suffix Text:** Add text after your main title to complete the heading. This can be useful for subheadings or additional context.

**Title Tag:** Select the appropriate HTML tag for your heading (e.g., H1, H2, H3, etc.). This not only defines the visual hierarchy but also impacts SEO.

### **2. Duel Text**

**Dual Text Switch:** Enable this setting to create a dual text effect, where this text is presented upper or deeper from the main text.

**Enable Custom Switch:** Once the Dual Text switch is enabled then just show the prefix, infix, and suffix text in the duel text effects. You can turn on the Enable Custom switch to customize the text further.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/YmD3d5sSqFs0jjtzQAL7GA1UP2kF1bus0YGoXOsD.jpg)

**Dual Text Title:** This input box will appear when custom dual text is enabled. You can enter your custom text here, providing flexibility in design.

### **3. Divider**

**Divider Position:** Choose where to place the divider in relation to your heading (e.g., top, or bottom between the text sections).

**Divider Color:** Select the color for the divider line to match your design scheme.

**Divider Thickness:** Adjust the thickness of the divider line to make it more prominent or subtle.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/U2zhJXEdo4lDj8F4KfzXwrZACCKDcVpiQ22zQbYW.jpg)

**Divider Border Radius:** Customize the corners of the divider, allowing for rounded edges or sharp corners.

**Divider Max Width:** Set the maximum width of the divider to control how far it extends across the heading area.

**Divider Alignment:** Align the divider to the left, right, or center to achieve the desired visual balance.

## **Design Tab Customization**

### **1. Heading**

**Background:** Once the Dual Text switch is enabled then set a background color, background gradient color, or image for the heading area, allowing for a distinct visual separation from other content.

**Margin & Padding:** Adjust the space around the heading to control its placement and spacing in relation to other elements.

**Border:** Define a border around the heading, with options for rounded corners, color, style, and thickness.

**Box Shadow:** Add a shadow effect to the heading for depth and emphasis.

### **2. Heading Font**

Customize the font for all heading text (prefix, infix, and suffix). This ensures a consistent typography style across the entire heading.

### **3. Font Styles**

Style the font settings (font family, weight, size, color, etc.) individually for the prefix, infix, and suffix texts. This provides flexibility in creating a visually dynamic heading.

### **3. Duel Text**

**Margin & Padding:** Fine-tune the spacing around the dual text, ensuring it integrates smoothly with the rest of your content.

**Dual Text Font Styles:** Customize the font styles specifically for the dual text to differentiate it from the main heading text.

### **5. Gradient & Background Clip**

#### **Gradient Tab:**

**Select Gradient Field:** Choose the text field of text where you want to apply gradient color (prefix, infix, and suffix).

**Gradient Type:** Choose the type of gradient you want to apply (linear, radial, etc.).

**Primary Color & Location:** Set the starting color and its position within the gradient.

**Secondary Color & Location:** Choose the ending color and its placement in the gradient.

**Gradient Angle:** Control the angle of the gradient, giving you more creative control over the visual flow.

#### **Background Clip Tab:**

**Select Background Clip Field:** Choose whether the background should be clipped to the text.

**Image Field:** Optionally add an image to be used as the background for the text.

### **6. Reveal and Hover Effect**

#### **Reveal Effect Tab:**

Once you activate the reveal effect, you can choose from multiple styling options to customize its appearance.

**Select Reveal Effect Style:** Choose from over 5 unique styles to reveal the heading text in a visually engaging way.

**Reveal Background:** Customize the background for the reveal effect to enhance the visual impact.

| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/NfVvWAGjO4FvGutDYCwM2eWl12Gh7JtFdo8A3IWM.jpg) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/cdNDoyNj8lg8WF201WErEZAnaN6OugRwjVg5NjYh.jpg) |
|---|---|

#### **Hover Effect Tab:**

**Select Hover Field:** Specify whether the hover effect applies to the prefix, infix, or suffix text.

**Select Hover Style:** With over 30 modern hover styles available, you can create interactive and dynamic headings that respond to user interaction.

### 7. Prefix, Infix & Suffix Settings

**Enable Outline Text Switch:** Toggle this option to apply an outline effect to the text, which can help it stand out.

**Overflow Visible Switch:** Enable this option to ensure that any overflow text is visible, rather than being clipped.

**Display Block Switch:** This setting allows the text to behave as a block-level element, influencing its layout and positioning.

**Use Background Switch:** Apply a background color or image specifically to the prefix, infix, or suffix text.

**Margin & Padding:** Adjust spacing around these text elements for precise control over layout.

**Border:** Customize the borders around each text element for added emphasis.

**Box Shadow:** Apply a shadow effect to individual text elements, creating depth and separation.

### 8. Animation Settings

**Select Animation Field:** Choose which part of the heading (prefix, infix, or suffix) the animation applies to.

**Animation Type:** Select from over 12 animation types to bring your heading text to life.

**Animation Speed:** Control the speed of the animation, tailoring it to the overall pacing of your webpage.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/3c6ayEnFDl8YBht7chRnNqcQDdXe25gYoZtXg5l6.jpg)

### 9. Divider Image & Icon

**Divider Image Switch:** Enable this switch to use an image as the divider.

**Divider Icon Switch:** Alternatively, use an icon as the divider for a more stylized appearance

**Divider Z-Index:** Control the stacking order of the divider, ensuring it appears above or below other elements as needed.

| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/XqMvTMtwBxa0CClqFktbQSwRVys6Xvz2KnaWkAks.jpg) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/2xLHIFUIhS5uTKjOGaFl8PRukSJrsXz4CEQyf5Mu.jpg) |
|---|---|

**Divider Image & Icon Margin and Padding:** Fine-tune the spacing within the divider image or icon.

**Divider Image and Icon Border & Box Shadow:** Apply border and shadow effects to the divider image or icon for additional emphasis.

**Divider Margin & Padding:** Adjust the spacing around the divider image or icon to integrate it seamlessly into your design.

### 10. Text Highlight

**Select Text Highlight Field:** Choose which part of the heading (prefix, infix, or suffix) to apply the highlight effect.

**Highlight Type:** With over 7 highlighting options, you can draw attention to specific parts of your heading text.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/2IVV8CavIFePiRAx7dhXPbcjpPSNmJt965uuk27P.jpg)

**Highlight Color:** Customize the color of the highlight to match your branding or design scheme

**Highlight Weight:** Adjust the thickness of the highlight, making it more or less prominent.

## Some Common FAQs About Advanced Heading Module

### Q. What is the purpose of the Prefix, Infix, and Suffix text in the Content tab?

These text input boxes allow you to add text before (Prefix), in the middle of (Infix), and after (Suffix) your main heading to create a customized heading layout.

### Q. How do I select the correct Title Tag for SEO purposes?

The Title Tag option lets you choose the appropriate HTML tag (e.g., H1, H2, H3) for your heading, impacting both the visual hierarchy and SEO. **Go to content >> Title Tag >> Select**

### Q. What is the Dual Text feature, and how do I use it?

The Dual Text feature allows you to create a heading with two lines of text. When enabled, you can also add custom text for a more tailored design.

### Q. How do I customize the divider in the Advanced Heading Module?

In the Divider section, you can set the divider's position, color, thickness, border radius, max width, and alignment to match your design needs.

### Q. How can I apply a background to my heading?

In the Design tab, under the "Heading" section, you can select a background color or image to make your heading stand out. **Go to Design tab >> Heading >> Use Background Switch >> Turns ON >> Select Background Color / Image.**

**![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/Xm5ODWHGcwmhwBJGwiBQ7POjSc5eh9Y8zxCOSV89.jpg)**

### Q. How do I apply hover effects to my heading?

Under the "Reveal and Hover Effect" section, you can select hover styles for your heading text, with over 30 modern hover effects available. **Go to Design tab >> Reveal & Hover Effect >> Hover Effect >> Use Hover Effect >> Turns ON >> Select Hover Field and Select Hover Effect**

**![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/mtf5WqiBUUThhybziI4JHQKQtgr0zU147cImnt7e.jpg)**

### Q. Can I animate my heading text?

Yes, the "Animation Settings" in the Design tab allows you to choose animation types and control the speed for the prefix, infix, or suffix text. **Go to Design tab >> Animation Settings >> Use Animation >> Turns ON >> Select Animation Field and Animation type**

**![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/rfMOuSoa3wXKRVpdhPGZ2gLdu6252xWaBNjeuLfw.jpg)**

### Q. How do I highlight specific text within my heading?

In the "Text Highlight" section, you can choose a highlight type, color, and weight to emphasize the prefix, infix, or suffix text.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/WFX3gVaI7VhLmYUhfcdz6ENib8DlqA3DDSpuPZyl.jpg)

### Q. What does the "Enable Outline Text" switch do?

When you enable outline text, you're creating a border or stroke around each character of your text. This stroke can be customized in terms of its width, color, and other properties, allowing you to create a visually distinct and eye-catching effect.

### Q. Can I apply a border and box shadow to individual text elements?

Yes, in the "Prefix, Infix & Suffix Settings," you can add borders and box shadows to each text element, enhancing their visual impact.

### Q. What is the "Use Background" switch for?

This switch allows you to apply a background color or image to specific text elements within your heading.

### Q. Why isn't my dual text displaying correctly?

Ensure that the Dual Text and Enable Custom switches are both enabled. Then, check that you've entered text in the Dual Text Title Input Box.

### Q. Why aren't my hover effects working?

Verify that you've selected a hover style and applied it to the correct text element (prefix, infix, or suffix). Additionally, make sure the hover effects are enabled in the module settings.

### Q. Can I apply different fonts to the Prefix, Infix, and Suffix text?

Yes, you can apply individual font styles to each text element in the Design tab, allowing for diverse and creative heading designs. **Go to Design tab >> Font Styles >> Select Your Specific text**


# DiviGrid Advanced Image Carousel


Discover the DiviGrid Advanced Image Carousel – a dynamic solution that takes your website's visual journey to new heights. The possibilities are endless with two versatile carousel types, horizontal and vertical slider orientations, adjustable item height, autoplay, and looping options, and the flexibility to navigate from left to right or right to left. Enrich your carousels further with the ability to incorporate background images. Elevate your site's engagement with a carousel experience that's genuinely advanced and exceptional.

Experience simplicity with the DiviGrid Advanced Image Carousel. Designed for ease, it offers seamless usage. For any concerns, find assistance in our welcoming documentation. Your journey is our priority.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/xi5CmThPCAx5bYCXlf3vMFJGc3k2JooUC7CvOAkP.png)

### **Carousel Settings**

Regarded as the cornerstone of the Divi Advanced Image carousel module, the Carousel setting holds paramount significance. Within this setting lie several advanced attributes that define its capabilities. Delve into an exploration of how these features operate and contribute to an enhanced carousel experience.

| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/kf8ifdFI9YhgvblFfJXTOiIakIiVZkPL8wHYegVE.png) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/umPAkpsWGtrsNTBTlMwm4BNqeQw2CV1MPIGx4cs3.png) |
|---|---|

* **Carousel Type**

Within the Carousel Setting, the Carousel Type feature empowers designers to select the carousel type for the module. As a designer, you can opt for either the Slide or Coverflow carousel type, catering to your design requirements. Make your choice to achieve the desired visual effect.

When you select Coverflow, discover its Coverflow effect settings, which offer many options for enhancing your carousel. Adjust slider shadows for depth, apply slide rotation for dynamic movement, stretch gaps between slides for balance, control slide depth for layered effects, and fine-tune slide modifiers for a personal touch. These settings transform your carousel into a visually impressive and interactive masterpiece.

* **Carousel Direction**

The slider direction feature enables effortless switching between vertical and horizontal orientations. The carousel loops smoothly both vertically (top to bottom) and horizontally (left to right), ensuring a dynamic content display. This versatile customization offers full control over your carousel's appearance and behavior.

* **Item Height**

The Item Height attribute proves highly beneficial when incorporating images of different sizes. This feature ensures the same image height, enhancing the visual consistency of your carousel's content presentation.

* **Active Item Height**

The height of active slider items in the carousel can be precisely adjusted to align with your design vision. Modify their dimensions to be smaller or larger than other items, creating a distinct visual effect that enhances your carousel's overall appearance.

* **Slide Per View**

The "Slides Per View" setting in the carousel allows you to control the number of slides that are visible within the carousel's viewport at any given time. This feature offers flexibility in choosing how many slides are displayed, influencing the user's viewing experience and the overall design of the carousel.

* **Item Space Between**

The "Item Space Between" setting in the carousel module allows you to define the spacing between individual items. By adjusting this parameter, you can control the gap between each slide, fine-tuning the overall look and feel of your carousel's layout.

* **Enable Loop**

The "Enable Loop" option within the carousel module grants the ability for slides to loop continuously. When activated, the last slide seamlessly transitions back to the first, creating a smooth and uninterrupted carousel experience for your website visitors.

* **Auto Play**

The "Autoplay" feature in the carousel module facilitates automatic and continuous slide transitions. When enabled, the carousel cycles through its slides at a predefined interval, enhancing user engagement and interaction without requiring manual navigation.

* **Center Slide**

The "Center Slide" functionality centers a specific slide within the carousel's viewport, gives it prominence and focus, and makes it upper from other items, ensuring that the highlighted slide becomes the central visual element, increasing its visibility and attracting audience attention.

* **Pause On Hover**

The "Pause on Hover" option within the carousel module allows for automatic slide transitions to halt when a user hovers their cursor over the carousel. This interaction offers users control over the carousel's pacing, enhancing the browsing experience.

* **Carousel Slide Direction**

The Carousel Slider Direction setting governs slide movement. Opt for left-to-right or right-to-left direction, influencing carousel navigation and enhancing user engagement.

* **pagination**

Enabling the pagination option displays bullet point navigation on the left side of the static panel. Shifting the static panel's alignment from left to right will correspondingly relocate the pagination to the right. It's worth noting that pagination will exclusively appear beneath static content for mobile devices. Should you prefer not to have pagination visible, simply toggle off the switch. Furthermore, the advanced tab provides options for modifying bullet point size, color, line height, and line color, offering extensive customization possibilities.

### Content Settings (Width & Position)

In the "Content Settings" of the DiviGrid Advanced Image Carousel module, you can fine-tune several crucial aspects:

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/VspmHqh5tKwK2oq6gWg4yf4IJswi3GF1PiIfxCKD.png)

**Static Content Position**: Adjust the positioning of static content, choosing between left-to-right or right-to-left alignment to suit your design flow.

**Static Content Width**: Define the width of the static content within the carousel, ensuring it fits seamlessly and aligns with your design preferences.

**Carousel Content Width**: Similarly, you can specify the width of carousel content. This allows for consistent and balanced alignment of items as users navigate through the carousel.

By utilizing these content settings, you can precisely control how content is displayed, ensuring a polished and cohesive carousel presentation that aligns harmoniously with your overall design vision.

### Background Carousel

**Enable Slider Background Image**

The "Enable Slider Background Image" feature gives you the ability to include impressive background images within the carousel. Enable this option to add an extra layer of visual appeal to your carousel slides, increasing their impact and making your content more immersive. Individual background images can be used for each item or a single image can be used. Totally it's up to you.

**NB: No single color can be used on a single item. Only images can be used. If you want to use color, you have to use color from the background of the content tab**

**Background Images**

The background image within the slider functions as a unifying backdrop, seamlessly connecting the static and carousel panels while bridging the gap between these segments. Infusing depth, emotion, and visual harmony, it serves as a complementary canvas for the core content, be it images or text. This background image assumes a pivotal role, captivating the audience, eliciting emotions, and amplifying the impact of the carousel's conveyed message.

Functioning akin to an image gallery, the background image option empowers you to curate the carousel's aesthetics. From your media collection, handpick one or multiple images, tailoring the carousel's appearance. Each item possesses the potential for a distinct background image, or a singular image may envelop all items cohesively. Upon uploading background images corresponding to the slider items, each image seamlessly integrates as the backdrop for its respective item, enriching the visual experience.

### Advanced Tab Settings

The "Advanced" tab in the DiviGrid Advanced Image Carousel module presents a bunch of sophisticated customization options, enabling a higher degree of control over the module's appearance and behavior.

| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/L0Y0ZinmKh6Z4z23IgLBijaNaGfOOMmiDLoHA1Hi.png) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/M1bqMKUQCKZQjmz5Qn2SSJVtQ4Os1aQfYMuFiD0A.png) |
|---|---|

In the "Advanced" tab of the DiviGrid Advanced Image Carousel module, you'll discover a range of powerful customization options to elevate your carousel's design and functionality. "Arrow Settings" allow you to precisely define navigation arrow icons, ensuring seamless and intuitive user interaction. The Static Font Styles & Carousel Panel Font Styles empower you to fine-tune font attributes for both static and carousel panels, harmonizing typography throughout. Static and Carousel Panel Styles provide the means to customize image height, width, alignment, border, box shadow, margin, padding, borders, overlay, and other visual elements, adding a unique touch to each section. In "Pagination Settings," tailor pagination dot features for easy navigation.

All required toggles are also present by default. Simply put, a carousel has all the toggles to make it attractive and visually appealing. No need to write any custom code. Style is now in your hands.

* **Static Panel Fonts**

In the "Static Panel Fonts" section, you'll find two distinct sub-toggles: "Title" and "Description." These toggles share the same font styles, allowing for consistent typography across your static content.

Within each sub-toggle, you're presented with a range of font customization options. These encompass choosing the font itself, determining the font weight and style, aligning the text, selecting colors, adjusting text size, and configuring line height, among others. These comprehensive customization choices ensure that your static content's fonts align precisely with your design vision, presenting a polished and cohesive appearance throughout the module.

* **Carousel Panel Fonts**

Within the "Carousel Panel Fonts" section, you'll encounter two distinct sub-toggles: "Title" and "Description." Remarkably, both sub-toggles share identical font styles, promoting uniformity in typography across your carousel content.

* **Static Panel Styles**

Under the "Static Panel Styles" section, you have the opportunity to define the visual attributes of the static content. Key customization points include:

1. **Image Alignment**: Adjust the alignment of images within the static panel, ensuring they are positioned precisely according to your design intentions.
2. **Image Width and Height**: Set specific dimensions for images in the static panel, maintaining visual consistency and enhancing the overall presentation.
3. **Background Color**: Choose a background color for the static panel, harmonizing it with your branding or design scheme for a polished look.
4. **Spacing**: Fine-tune the spacing around the static content, ensuring optimal alignment and an organized visual layout.

These customization options within the "Static Panel Styles" enable you to curate a visually appealing and well-structured static content presentation that seamlessly integrates with the overall module design.

* **Carousel Panel Styles**

In the "Carousel Panel Styles" section, you're granted the ability to shape the visual characteristics of your carousel content. Here are the key customization points:

1. **Carousel Content Alignment**: Precisely align the carousel content within each panel to achieve your desired visual composition and symmetry.
2. **Overlay Color**: Apply an overlay color to the carousel content, adding depth and visual interest while ensuring readability and aesthetics.
3. **Background Color**: Define a background color for the carousel panels, harmonizing them with your design theme and enhancing overall coherence.
4. **Spacing**: Adjust spacing around the carousel content, allowing for optimal layout and alignment of elements within each panel.

By manipulating these customization options in the "Carousel Panel Styles" section, you can create an engaging and visually captivating carousel that seamlessly integrates with your design vision and elevates the overall user experience.

* **Arrow Settings**

In the realm of the "Arrow Settings" feature, you're granted a suite of tools to finely craft your navigation arrows, ensuring a fluid and engaging user experience. This intricate customization encompasses:

1. **Select Next and Previous Arrow**: Exercise your choice in picking arrow icons that impeccably match your design sensibilities, allowing users to effortlessly navigate through your content.
2. **Position**: Tailor the placement of arrow icons to your precise specifications, ensuring they're optimally located for intuitive interaction.
3. **Border**: Apply borders to arrow icons for an attention-grabbing effect, accentuating their presence and integrating them harmoniously into your design.
4. **Icon Size**: Delve into the minutiae of icon sizing, balancing functionality and aesthetics for a visually pleasing navigation experience.
5. **Opacity**: Master the art of opacity adjustments, adjusting the transparency of arrow icons to seamlessly blend with your module's visual theme.
6. **Arrow Margin**: Exercise pixel-perfect control over arrow spacing, allowing you to achieve a polished and organized visual layout.
7. **Arrow Container/Box Margin**: Fine-tune the margins around the arrow container or box, ensuring their integration aligns seamlessly with your overall design concept.

By harnessing these comprehensive options within the "Arrow Settings," you can expertly fashion navigation arrows that not only facilitate movement but also harmonize flawlessly with your module's design language, enhancing both user interaction and visual appeal.

* **Pagination Settings**

Within the "Pagination Settings," you'll uncover a treasure trove of options for refining your pagination appearance. This feature grants you the power to meticulously tweak various aspects, including:

1. **Bullet Point Size**: Adjust the size of pagination bullet points, ensuring they're easily discernible and aligned with your design aesthetics.
2. **Color Customization**: Infuse personality into your pagination with color choices that resonate with your branding and overall theme.
3. **Active Dot Color**: Define the color of the active dot, facilitating seamless navigation and enhancing user understanding.
4. **Line Color**: Fine-tune the color of connecting lines, achieving visual cohesion and contributing to a polished look.
5. **Pagination Height**: Tailor the height of the pagination area, ensuring it's proportionate to your content and design layout.

This comprehensive suite of customization options in the "Pagination Settings" empowers you to curate a pagination experience that harmonizes seamlessly with your module's visual identity, enhancing both aesthetics and user interaction.

### **Static Panel And Carousel Panel**

We have divided the DiviGrid Advanced Image Carousel into two parts. The first is a static panel and the second is a carousel panel. In the static panel, you can use an image, title, text, and a linkable button. On the other hand, you can use images, text, and titles in the carousel panel.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/Q3Q6LCkXN4EqYnDcficVJRRqE9wbWRVWaCG6iDQ9.png)

The static and carousel panels are combined in such a way that when the carousel item slides, the static panel of the carousel item also slides through a transition. This means you can provide different information simultaneously as each carousel item slides. Static and carousel panels can be repositioned from left to right. Again there is a facility to use overlay color on carousel items as per design requirement.

### **What are static content and carousel content?**

Static content refers to elements located in a container outside of the carousel's slider items, such as titles, descriptions, images, and buttons. Users navigate through the carousel, enter required information, and maintain continuity. When the slider item changes, the static items also change with it.

On the other hand, carousel content consists of dynamic items that change as users interact with the carousel. These are images, text or other media that users scroll or swipe through, creating an engaging and interactive browsing experience. Carousel content is the centerpiece of the carousel's visual presentation, while static content adds context and information to each slide.

### What can I add to static and carousel content?

In static content, you can add elements like titles, descriptions, images, buttons, and other informative components. This content provides context, branding, and essential information.

In carousel content, you can include dynamic elements such as images, text, or description that changes as users interact with the carousel. This content captures users' attention, conveys your message, and creates an engaging browsing experience.

### How do horizontal and vertical orientation work?

In a carousel setting, the choice between horizontal and vertical orientation significantly influences the arrangement and navigation of content within each slide. When opting for a horizontal orientation, the content within a slide is organized from left to right. This is particularly advantageous for showcasing a series of images, products, or any sequential information that benefits from a side-by-side presentation.

On the other hand, vertical orientation arranges content from top to bottom within a carousel slide. This arrangement is ideal for presenting information in a stacked format and naturally follows a top-down flow.

By selecting the appropriate orientation for each carousel slide, you can tailor the content's layout to match its nature and optimize the user's viewing experience. This choice directly affects how users interact with the carousel and engage with the presented content.

### What is carousel item height and active item height?

Carousel Item Height refers to the vertical measurement of each individual item or slide within a carousel. It determines how much vertical space a single slide occupies within the carousel container. Carousel Item Height remains constant for all slides, ensuring a uniform appearance.

Active Item Height, on the other hand, pertains to the height of the slide that is currently in focus or active within the carousel. This height can be adjusted independently from the Carousel Item Height. Having control over Active Item Height allows you to create visual emphasis on the active slide, making it stand out from the rest.

By customizing both Carousel Item Height and Active Item Height, you can enhance the visual presentation of your carousel, highlight specific content, and maintain a cohesive design throughout the carousel navigation.

### Are there any options for autoplay and looping?

Yes, carousel modules often include options for autoplay and looping.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/5t2qzSyAnwVVD2QWjm5F90FNHyuFCb2s9DJIHDyQ.png)

These features provide the ability to set your carousel to play automatically, transitioning from one slide to another at specified intervals. This can be especially useful for showcasing content without requiring users to manually navigate through each slide.

Looping, on the other hand, ensures a seamless experience by allowing the carousel to cycle back to the beginning after reaching the last slide. This prevents any abrupt stops in the carousel's progression, maintaining a continuous and smooth viewing experience.

With these options, you can create dynamic and engaging carousels that captivate users while offering user-friendly and uninterrupted interaction.

### What is the way to move static content from the left side to the right side?

To move static content from left to right, you need to go to Content Settings in the Content tab. Then change the static content position from left to right.

### What purpose does the background image serve in the carousel?

The slider background image acts as a background between the static and carousel panels, bridging the two sections. It adds depth, emotion, and visual cohesion that complements the primary content, whether images or text. The background image plays an important role in captivating the audience, evoking emotion, and reinforcing the message conveyed through the carousel, making it more impactful.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/JEcNuYKgreiPPQwZ6CsJPJhVjrpnqzVhk6E97TCt.png)

The background image option works as an image gallery. You can select one or more images from your media collection to customize the look of your carousel. Each item can have a unique background image, or a single image can be used across all items. If you upload background images corresponding to the number of slider items, each image will appear as a background for each item.

However, if you want to use a different background color or gradient color for each item, I'm sorry to inform you that this is not possible. You can set a specific color as the background of all items, which can be either a solid background color or a gradient color.

### Can I use the background color on every single item?

**No, unfortunately, you cannot use a background color on an item.** If you can use a background color, you must use the same background color for all items. For that, the background color should be selected from the background option of the content tab.

### Can the width of static content or carousel content be increased or decreased?

Yes, of course. You can increase or decrease the width of static or carousel content from the content settings toggle. Define the width of static and carousel content based on your carousel design

### How can I change the slider direction for the carousel item?

To change the direction of the slider, navigate to Carousel Settings within the Content tab. Within this section, look for the option labeled "Carousel Slider Direction". Here, you can change the direction of the carousel slide as per your preference. Adjust this setting to determine whether the slides go left to right or right to left. Go to **Content Tab-> Carousel Settings-> Carousel Slide Direction** for the change of the Carousel Slide Direction.

### Can pagination be used in this carousel?

Certainly, the carousel supports pagination functionality. You have the option not only to enable but also to customize and modify pagination through the pagination settings. If desired, you can disable pagination altogether. When activated, the pagination is represented by vertical bullet points situated on the left side of the carousel.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/pqxQKf6xCpxgnfQoMhd6dclH3hmajGhect4Cyg12.png)

Within the pagination settings, you can easily adjust the size, color, and spacing of these bullet points to align with your design preferences. This level of customization ensures that the pagination seamlessly integrates with your overall carousel presentation.

**Still Stuck? Our 24/7 support team is always ready. We are always ready for any need you may have.**


# Advanced Person


The Advanced Person module by Divigrid for the Divi theme is a highly customizable module that allows users to create detailed and visually appealing profiles. With a wide range of settings, this module is perfect for showcasing team members, personal profiles, and more. This documentation will guide and provide a comprehensive overview of all available customization options.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/acFRVr3Iw5iM7dmdwsRKjqb8dOsIy3MTacmb6dz9.jpg)

## **Content Tab Customization**

The Content tab of the Advanced Person module is where you define the primary elements of the profile, such as the title, designation, description, images, and more. This section provides a detailed breakdown of the customization options available within each sub-section of the Content tab.

### **1. Content Section**

**Title**: This field allows you to input the name or title of the person. The title is typically the most prominent piece of text on the profile card, so make sure it’s clear and representative of the person’s role or identity.

**Designation**: This field is used to specify the person’s job title or designation. Like the title, this is an important piece of information that provides context to the user.

**Description**: The description field allows you to write a brief bio or introduction for the person. This is where you can elaborate on their role, achievements, or any other relevant information.

| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/souhoa6Tmb44yPZW9aWp5ffAkiUhkyzq88edt08Z.jpg) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/EXRyHEuAewFrzGah8EL9gaznRmpNLJ65yqvpAWrz.jpg) |
|---|---|

**Use Button Switch**: Enabling this switch adds a call-to-action (CTA) button to the profile card. This is particularly useful if you want to link to more information or prompt user interaction.

* **Button Text**: Define the text that will appear on the button. (e.g., "Learn More," "Contact").
* **Link URL**: Provide the URL the button will link to. This could be a page within your site or an external link.
* **URL Opens**: Choose whether the link opens in the same tab or a new tab, offering control over the user's navigation experience.

### **2. Image Section**

**Image**: Upload the primary image of the person here. This image is the face of the profile card, so it’s essential to choose a high-quality and representative picture.

**Image Alt**: The alt text is crucial for accessibility and SEO, providing a textual alternative for users who cannot view the image.

| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/G7FaXTIZ3uXrHMFPmhjXCuXHLaChOskHUxBgWNuZ.jpg) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/I0b96FsTvE81g2dzOmg1sKyQrEcNzg0kPizK52Uz.jpg) |
|---|---|

**Show Alternate Image Switch**: This switch allows you to add an alternate image that can be used in various scenarios, such as when hovering over the profile.

* **Alternate Image Field**: Upload a secondary image that can be displayed based on specific interactions or when the visitor hovers the card.
* **Alternate Image Alt**: Provide alternative text for the alternate image, following the same guidelines as the primary image alt text.

**Use Badge Switch:** After turning ON the badge switch, Enter text for a badge that can be displayed on the profile image. Badges can be used to highlight special statuses, awards, or other noteworthy information.

### **3. Configuration Section**

**![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/AY7uCITiTxMeOn0xUGFu1wwkQ5Q9nqtFKv6hN1aX.jpg)**

#### **Border Animation Switch** 

This switch enables border animation around the profile card, adding a dynamic element to the design. The border animation switch allows you to add dynamic border animations to the Advanced Person module, enhancing the visual appeal of the content box.

| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/cSv8fsVApCiImcj6taHQPqYtvOO0mZiCWfZZlGqU.jpg) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/2piR0bALjIeNTSLRj8RHyxEXwXejOYVg4uHjlKVI.jpg) |
|---|---|

**Settings:**

* **Border Color**: Customize the color of the border surrounding the content box. You can choose any color that matches your site's theme.
* **Border Width**: Adjust the thickness of the border by setting the width in pixels.
* **Border Space**: Define the space between the content and the border. This spacing can be adjusted to create more visual separation.
* **Border Animation Style**: Choose from 19+ animation styles to create the desired visual impact. Each style offers a unique look, ranging from subtle glows to more pronounced effects.

#### **Show Content Above Image Switch**

This switch allows you to control whether the content (such as title, designation, description, etc.) appears above the image or not.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/ZrTzpPtNUQ5Mo1O0PvYL7nzu0sIR8Cn33eiKFPGJ.jpg)

**Show Content on Hover Switch:** Enable this option if you want the content to be visible only when the user hovers over the image. This creates a cleaner, more minimalistic design, revealing information only on interaction.

#### **Change Content Position**

This setting provides control over the positioning of various content elements within the module. You can rearrange these elements to appear in any order you prefer, ensuring the layout meets your design requirements. This flexibility allows you to highlight the most important information first.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/lvBaPST8ew9e51Nc33WfEPdIRbRaNcx3tcWo0F1M.jpg)

#### **Use Star Rating Switch**

The star rating feature is useful for showcasing ratings or feedback, such as client testimonials, team member evaluations, or product reviews.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/r5E7B3NM7BqSXGgYkGCXLow7eeFk35WpZityznuu.jpg)

* **Rating Scale:** Choose the scale for the rating (e.g., 1-5 stars).
* **Rating:** Set the rating value that should be displayed (e.g., 4 out of 5 stars).
* **Show Rating Number Switch:** Enable this option to display the numerical rating alongside the star icons. This can help provide more precise feedback.

#### **Change Z Index Switch**

The z-index settings allow you to control the stacking order of the content and image wrappers. This is particularly useful when layering content elements or ensuring certain aspects are always on top. Adjust the z-index of the image wrapper and Content wrapper z-index, determining its position relative to other components.

#### **Use Social Media Switch**

Social media integration allows you to display social icons alongside individual profiles, making it easy for visitors to connect via social platforms.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/KS4PvJ9iK27ftY1FZzsRHZsAfPzeOrMlg9xLRjGW.jpg)

**Show the Social Icon Above Image Switch:** This setting determines whether social icons are displayed above the image. You can use this to highlight your social media presence or link directly to social profiles.

## **Design Tab Customization**

The Design tab provides extensive styling options, allowing you to control the visual presentation of the profile elements. This tab ensures that the profile aligns with your overall site design and branding.

### **1. Image Settings**

**Image Hover Type:** Choose from 10 modern image hover animations that apply effects when the user hovers over the profile image. These animations add an interactive element to the profile, enhancing user engagement.

**Alignment:** Align the profile image within its container (left, center, right). This setting is crucial for ensuring the profile looks balanced within different layouts.

**Image Height & Width:** Define the height and width of the profile image. These settings allow you to maintain a consistent image size across all profiles. This setting is responsive, allowing you to specify different heights & widths for desktop, tablet, and mobile views.

**Use Overlay Switch:** This switch allows you to add an overlay over the image.

* **Background Color**: Set a solid background color for the overlay that appears over the image.
* **Gradient Color**: Choose a gradient overlay, providing a smooth transition between colors for a more dynamic effect.
* **Background Image**: Upload an image to use as the overlay background, adding texture or branding elements.

**Image Spacing:** Control the spacing around the image, ensuring it fits well within the profile layout without crowding other elements.

**Image Border**: Customize the border around the image with various color, width, and style options.

**Image Box Shadow**: Add a shadow to the image, creating depth and a more polished look.

### **2. Font Style**

**This section allows for individual styling of the text elements within the module, including the title, designation, and description.**

The font styling feature offers a comprehensive suite of options for tailoring the visual appearance of text elements. Users can fine-tune font size to ensure optimal readability and visual hierarchy. By selecting from bold, italic, or underlined styles, users can emphasize key points and create a sense of urgency or importance. Precise alignment options (left, center, right) allow for balanced and organized layouts. Additionally, adjusting letter spacing and line height enables users to control the density and spacing of text, improving readability and visual appeal. For added depth and dimension, users can apply text shadows with customizable color, blur, and position settings. Finally, the ability to select specific text colors allows for seamless integration with the overall design palette, creating a cohesive and visually pleasing composition.

### **3. Badge**

**Badge Alignment:** Position the badge in any of the 9 available positions around the image, such as top-left or bottom-right.

**Badge Rotation:** Rotate the badge to create dynamic angles that make your design stand out.

**Badge Background:** Customize the badge’s background using a solid color, gradient, or image to match your overall design theme.

**Badge Spacing:** Control the margins around the badge for proper alignment with other elements.

**Badge Font Styles:** Tailor the text within the badge, adjusting font size, style, alignment, and color, and applying text shadows.

**Badge Border and Box Shadow:** Enhance the badge’s appearance with borders and shadows, giving it more prominence on the page.

### **4. Social Media Settings**

The Social Media section allows you to style the social media icons that are displayed within the Advanced Person module. These settings ensure that the icons align with your site’s design and branding.

**Social Media:** Customize the color and background color of individual social media icons (such as Facebook, Twitter, and Instagram). This allows you to ensure that each icon aligns with your site's branding or the specific aesthetic you want to achieve.

* **Icon Color**: Set the color of the social media icons to either the brand colors of the platforms or a custom color that fits your design.
* **Background Color**: Choose a background color that complements the icon color. You can use solid colors or gradients for a more dynamic look.

**Social Media Wrapper:**

**Alignment:** This option allows you to align the social media icons within the content area. You can align them to the left, center, or right, depending on your design preference.

**Social Icon Size:** Adjust the size of the social media icons to ensure they are prominent and easy to interact with. Larger icons may be more visually striking, while smaller icons can be more subtle.

**Social Icon Space:** Control the spacing between each social media icon to create the right amount of separation. This helps to prevent clutter and ensures a clean, organized appearance.

**Global Social Icon Color and Background Color:** Set a uniform color and background color for all social media icons if you prefer a consistent look across the board.

**Social Icon Container Margin:** Adjust the margin around the social media icon container to create space between the icons and other content elements.

**Social Icon Margin and Padding:** Customize the margin and padding of each social media icon to fine-tune its placement within the container.

**Border and Box Shadow:** Apply borders and shadows to the social media icons to give them more definition and depth. Borders can be solid, dashed, or dotted, while shadows add a three-dimensional effect that helps the icons stand out.

### **5. Star Rating Settings**

The Star Rating section provides options for customizing the appearance and layout of star ratings within your module. These settings allow you to control the size, spacing, and colors of the stars, ensuring they complement your overall design.

**Star Rating Alignment:** Align the star ratings to the left, center, or right within the content area. Proper alignment helps maintain balance and symmetry in your design.

**Star Font Size:** Adjust the size of the star icons to ensure they are easily visible and make a strong visual impact.

**Star Icon Space:** Control the spacing between each star to prevent them from appearing too close together or too far apart. This helps maintain clarity and readability.

**Filled Star Color:** Set the color for filled stars to highlight the rating value. This color should contrast well with the empty stars for better visibility.

**Empty Star Color:** Choose a color for the empty stars that complements the filled stars. The empty star color is usually lighter or more subdued to make the filled stars stand out.

**Star Rating Number Color:** Customize the color of the numerical rating displayed next to the stars. This color should be easily readable and consistent with the overall color scheme.

**Star Rating Background:** Set a background color for the star rating area. This can be a solid color or a gradient, depending on your design preference.

**Star Rating Spacing:** Adjust the spacing around the star rating area to ensure it is well-positioned within the content layout.

**Star Rating Border:** Add a border around the star rating area to give it a more defined look. You can customize the border’s color, width, and style to match your design.

### **6. Content Wrapper Settings**

The Content Wrapper section allows you to customize the area that surrounds your content (such as text and images). This section is crucial for creating a cohesive and visually appealing layout.

**Content Wrapper Alignment:** 
Align the content wrapper to the left, center, or right. This ensures that the content is properly positioned within the module and aligns with other design elements.

**Content Wrapper Width:** 
Set the width of the content wrapper to control how much space it occupies within the module. This allows you to create a balanced layout that doesn't overwhelm the viewer.

**Content Wrapper Height:** 
Adjust the height of the content wrapper to ensure it accommodates all the content without causing overflow or excessive white space.

**Content Wrapper Background**

* **Background Color:** Choose a background color for the content wrapper that complements the overall design. This can be a solid color or a gradient.
* **Background Gradient:** Apply a gradient background to the content wrapper for a more dynamic and visually interesting effect. Gradients can be subtle or bold, depending on the design goal.
* **Background Image:** Set an image as the background for the content wrapper to create a more immersive experience. Ensure the image is high-quality and relevant to the content.

**Content Wrapper Spacing:** 
Adjust the spacing around the content wrapper to create a balanced and well-organized layout. Proper spacing helps to prevent clutter and ensures the content is easy to read.

**Border:** 
Add a border around the content wrapper to give it more structure. You can customize the border’s color, width, and style (solid, dashed, dotted, etc.).

**Box Shadow:** 
Apply a box shadow to the content wrapper to add depth and dimension. Shadows can create a more dynamic look and help the content stand out from the background.

### **7. Button Styling**

The Call to Action (CTA) button is a powerful tool for directing user behavior. Divi's Design Tab provides a robust set of customization options to create visually appealing and effective CTAs.

Easily tailor the appearance of your CTA button by adjusting text color, background color, font size, and padding. To create a more interactive experience, apply hover effects that change color or size when the user hovers over the button. With these features, you can design CTAs that not only look great but also encourage users to take the desired action.

## **FAQs About Advanced Person Module**

#### Q. What is the purpose of the 'Show Alternate Image' feature, and how do I use it?

The 'Show Alternate Image' feature allows you to display a different image under certain conditions, such as on hover. To use this feature, enable the 'Show Alternate Image Switch' in the Content tab, then upload your alternate image and set its alt text.

#### Q. Can I specify different alt text for the primary and alternate images?

Yes, you can provide separate alt text for both the primary and alternate images, ensuring that each image is described accurately for accessibility purposes.

#### Q. Is it possible to control when the alternate image is displayed?

The alternate image typically displays on hover or based on other interactive triggers. You can manage these settings through the module’s configuration options.

#### Q. How do I add and configure social media icons in the Advanced Person module?

To add social media icons, enable the 'Use Social Media Switch' in the Content tab. Then, configure the individual social media links and customize the icon settings in the Social Media section.

#### Q. Which social media platforms are supported by the Advanced Person module?

The module supports a variety of popular social media platforms, including Facebook, Twitter, Instagram, LinkedIn, and more. You can easily add icons for these platforms in the Content tab.

#### Q. Is it possible to set different colors for social media icons and their backgrounds?

Yes, you can independently set colors for both the icons and their backgrounds in the Social Media section under the Design tab.

#### Q. What can I customize in the Title and Designation fields?

In the Content tab, you can customize the title and designation text, select appropriate HTML tags, and control their positioning within the module.

#### Q. What is the 'Use Star Rating' feature?

The 'Use Star Rating' feature allows you to display a star rating for the profile, with customizable rating scales, star icons, and the option to show the rating number.

#### Q. Can I adjust the Z-index of the image and content wrappers?

Yes, the Content tab includes settings for changing the Z-index of both the image wrapper and content wrapper, helping you manage stacking orders.

#### Q. What are the customization options for badges?

Badge settings in the Design tab allow you to adjust alignment, rotation, background (color, gradient, image), spacing, font styles, borders, and box shadows.

#### Q. Is it possible to adjust the spacing between stars?

Yes, the spacing between stars can be adjusted in the Star Rating section of the Design tab.

#### Q. Can I globally style all social media icons?

Yes, global styling options are available in the Design tab, allowing for consistent color, size, and other design elements across all icons.

#### Q. Is it possible to add custom social media icons?

While the module supports standard icons for popular platforms, custom icons may require additional setup or plugins.

#### Q. Can I rotate the badge or image for creative effects?

Yes, rotation settings are available in the Design tab, allowing you to apply creative transformations to badges or images.

#### Q. Can I display the star rating as numerical values?

Yes, toggle the 'Show Rating Number' option in the Content tab to display the numerical value alongside the star icons.

#### Q. Can I ensure the module is responsive across various devices?

Yes, use the responsive editing tools in the Design tab to ensure the module adapts well to different screen sizes.


# Advanced Price List


The **Advanced Price List module** from **Divigrid** provides extensive customization for creating price lists with diverse content types and a highly stylized presentation. With this module, you can display pricing information in an organized, clear, and professional manner, suitable for a wide variety of businesses, from restaurants to service providers. The module allows for the integration of images, icons, text, and call-to-action (CTA) buttons, which can all be customized to suit your website’s needs.

The module is divided into **Content** and **Design** tabs, each offering various settings. Let’s break down the module’s functionalities.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/0LgcVrPH2vrNBeUAEAJD48wUDgS7OjgMFx9D5YUB.jpg)

## **Content Tab Customization ( *Item* )**

The **Content Tab** is where you add and structure the elements of your price list. It allows you to integrate various content types such as images, icons, text, buttons, and lists. This section will guide you through each option available in the Content Tab.

When you open the Advanced Price List module, the first area you’ll interact with is the Content tab. This section is primarily responsible for adding elements like images, icons, text fields, CTA buttons, and lists to your price list.

### **Price List Content Types**

The Advanced Price List module supports multiple content types, each offering unique customization possibilities. The content types available within the module are:

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/0rwFvMv0rnJAjLT2Tj7xrK50nf2aqdj4D9IiQ64X.jpg)

#### **Text Fields (Title, Description, Price)**

**Title**: The main title for each price list item. This could be the name of a product, service, or feature. Set the correct HTML tag (H1-H6) for the title based on its importance for SEO and design hierarchy.

**Description**: A brief explanation or detail about the product or service.

**Price**: Displays the price of the item, usually in a larger, bolded font for emphasis.

#### **Image and Icon Integration**

In addition to text, the Advanced Price List module allows you to add images or icons next to each item to visually represent the product or service.

**Image**: Upload an image to accompany the item.

**Icon**: If you prefer to use icons instead of images, you can select from Divi’s extensive icon library.

#### **Lists (Ordered and Unordered)**

You can add either **ordered (numbered)** or **unordered (bullet point)** lists to your price list. This is useful when you need to break down features or services within an item.

**Ordered List**: Displays a numbered list. Ideal for ranking or sequencing information.

**Unordered List**: Displays a bullet point list. Use this for unordered features or specifications.

#### **Image and Icon Integration with title**

This feature within the Price List module of Divigrid allows users to create attractive and informative price lists by choosing either an image-based list (Image List) or an icon-based list (Icon List). Depending on the selection, different settings will appear, allowing you to customize the list for a variety of use cases, such as menus, product catalogs, or service offerings.

**Image List**

An Image List allows you to display images alongside each list item, which is particularly useful for visualizing products or services. Once you choose the "Image List" option, several customization fields will appear, allowing you to upload and manage images effectively. Here's a detailed breakdown of the available fields. This field allows you to upload images for each list item. The image could represent a product, service, or any item relevant to the list.

| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/Sdpg4DESfrcBQiaoFWlE7uLRC3nMA8wCSSEhoGnB.jpg) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/lk4apQN2ceYR9GNfnjQdZJ2hKJxgjBpEjbdzFi6R.jpg) |
|---|---|

The title field allows you to set the title for the price list item. The title typically represents the name of the product or service being listed and the title tag determines the HTML heading level for the title. Available options include H1, H2, H3, H4, H5, and H6. Choosing the appropriate heading level is important for both SEO and ensuring proper content structure.

**Icon List**

An Icon List replaces the image with an icon, which can be chosen from the Divi Library. This is ideal for services or items where an icon better represents the content. When the "Icon List" option is selected, the module allows you to integrate icons from the Divi Library. This can be useful for more minimalistic designs or when representing items with symbols. Icons are a great way to visually represent services, such as using a fork and knife icon for restaurant menus or a shopping cart icon for e-commerce product lists.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/rxcItkuXOzMArqzWS6amCqu644JdNgqqUmlRWyxA.jpg)

The title field allows you to set the title for the price list item. The title typically represents the name of the product or service being listed and the title tag determines the HTML heading level for the title. Available options include H1, H2, H3, H4, H5, and H6. Choosing the appropriate heading level is important for both SEO and ensuring proper content structure.

## Design Tab Customization ( *Item* )

The **Design Tab** in the Advanced Price List module offers extensive customization options, allowing you to style every element to create visually appealing and professional-looking price lists. Whether you're adjusting the layout for mobile responsiveness or creating a unique design for your brand, this tab provides everything you need to fine-tune the aesthetics of your price list. The tab is organized into multiple sections that let you control the visual elements of icons, images, typography, buttons, and more.

### **Icon Settings**

Icons can significantly enhance the look of your price list by adding visual cues to your items. The **Icon Settings** allow for detailed customization of any icons you choose to display alongside your list items. Here’s a breakdown of what each setting offers:

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/NdpTCKY9KGO04y65qNx4XwE1JuShRK7pd3FzzlM5.jpg)

**Icon Size**: You can adjust the size of the icon to match the text or list items. This ensures that your icons are neither too large nor too small, striking the perfect balance in relation to the text size.

**Icon Color**: This setting allows you to choose a color for the icon that complements your overall design. You can match the icon color with your brand’s color scheme or pick a contrasting color to make the icon stand out.

**Icon Background**: Add a background color behind the icon to give it more prominence. You can choose between solid colors, gradients, or even image backgrounds to suit your design needs.

**Icon Spacing**: Control the spacing between the icon and other elements like text or images. Adjusting the spacing ensures that the icon doesn’t appear too crowded or too far apart from the associated content, maintaining a balanced layout.

### **Image Settings**

Images can add context or visual appeal to your price list. In the **Image Settings** section, you can manipulate how images are displayed, making sure they fit perfectly with the surrounding content. The settings include:

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/N7NWk8VXxZzK7YLzO6adtzqDhBPKw4JzxwqtcBlM.jpg)

**Image Width**: This option allows you to set a fixed width for your images. You can ensure that images maintain a uniform size across the list, making the overall layout look more organized.

**Image Height**: Adjust the height of the image to control its proportions. This is useful for ensuring that images don’t appear stretched or compressed.

**Image Spacing**: You can define the space between the image and adjacent content like text, icons, or buttons. Proper spacing helps in creating a clean, clutter-free design where the images are visually distinct but well-integrated.

### **Alignment**

Alignment plays a crucial role in how your price list is perceived. Proper alignment ensures that the content is easy to read and aesthetically pleasing. The **Alignment** section allows you to adjust the alignment for different elements

### **Font Style**

Typography is one of the most important aspects of design. The **Font Style** section gives you full control over how the text appears, allowing you to craft a cohesive look for your price list. Here’s what you can adjust:

**Title Padding**: This setting controls the spacing around your title text. By increasing or decreasing the padding, you can ensure that the title has enough breathing room, making it stand out without appearing too detached from the rest of the content.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/GjDENh2hcqEoL36RQ0DP3cc39YwNF5SGyxcQxVKM.jpg)

**Fonts**: Select from Divi’s wide range of available fonts to create a distinct look that aligns with your brand. This customization lets you use a modern, professional, or playful font depending on the tone of your price list.

**Font Weight**: Control the thickness of the text with font weight options, ranging from light to extra bold. This allows you to emphasize certain elements, such as headers or prices.

**Text Alignment**: Align the text to the left, center, or right to match the overall alignment of your list items.

**Line Height**: Adjust the spacing between lines of text. By modifying the line height, you can make your content more readable and improve its overall visual flow.

**Letter Spacing**: Set the space between individual letters to make the text feel more open or condensed.

**Text Shadow & Color**: Add a shadow effect to the text for a subtle 3D appearance. You can also choose text colors that complement the rest of your design, ensuring a harmonious color scheme.

### **Price Font Style**

The price is a key component of any price list, and the **Price Font Style** section offers extensive options for making the price stand out:

**Padding**: Control the space around the price to ensure it fits perfectly within the layout, without appearing cramped or too spaced out.

**Fonts**: Choose a custom font for the price to make it stand out. You can select a different font from the rest of the text to highlight the price.

**Font Weight**: Adjust the font weight to ensure the price is clear and easy to read. You can opt for a bold font to make the price more prominent.

**Text Alignment**: Align the price to the left, center, or right, depending on your design preferences.

**Line Height**: Set the spacing between price lines, especially when the price includes both currency symbols and numbers.

**Letter Spacing**: Adjust the space between letters in the price text for a cleaner or more compact look.

**Text Shadow & Color**: Apply a shadow effect to the price text for additional emphasis, and choose a text color that helps the price pop out without clashing with other elements.

### **Order List ( *In the Font Style tab* )**

**Order Number Background**: Add a background color behind the numbers to make them more distinct. You can choose solid colors, gradient effects, or even background images to create a unique look.

### **Button Styling**

Buttons are a crucial part of a price list, especially when they serve as calls to action (CTAs). The **Button Styling** section provides a range of customization options for buttons, helping you create interactive elements that align with the overall design. Use Divi’s default button customization options to style the call-to-action buttons. Options include button color, shape, text size, and hover effects.

## **Advanced Price List Settings Customization ( *Global* )**

The Advanced Price List settings provide global controls for adding and managing list items, as well as customizing badges, headings, and more. These settings allow for deeper customization of the price list as a whole.

## **Content Tab options**

### Add New Item

In the **Add New Item** section, users can add new content to the price list. Each new image item can have its own set of content, images, or icons. This provides a flexible structure for building rich, interactive scroll sections.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/ocLI5ejkVymOWIjK9Y6B3DsIAsx6BYOF6FGGulPk.jpg)

### **Use Badge Switch**

By enabling the **Badge Switch**, you can show a badge over the price list item. This is useful for highlighting promotions or special offers.

### **Heading Text & Heading Tag**

You can add a heading above the price list. This is especially useful for creating category headings or sections in a larger list. the header tag determines the HTML heading level for the title. Available options include H1, H2, H3, H4, H5, and H6. Choosing the appropriate heading level is important for both SEO and ensuring proper content structure.

## **Design Tab Customization**

The **Design** tab under Advanced Settings offers global styling options for headings, badges, and list items.

### **Alignment**

As with individual items, you can globally align all price list elements to the left, center, or right.

### **Font Style for Heading & Title**

This setting allows you to style the headings and titles. Each has independent styling options.

* **Fonts**
* **Font Weight**
* **Text Alignment**
* **Line Height**
* **Letter Spacing**
* **Text Shadow & Color**

Here are other extra header customization options to style the header:

* **Header Spacing**: Adjust the space above or below the header.
* **Header Background**: Add a background color, gradient, or image to the header. 
    * **Header Background Color**: You can set a solid color for the Header. This is especially useful for images where you want to dim or highlight certain areas to make text more legible. The color opacity can also be adjusted to fine-tune the visibility of the underlying image.
    * **Header Background Gradient Color**: Similar to the badge, you can apply a gradient to the Header for a more sophisticated look. The gradient can include a primary and secondary color, and you can adjust the gradient direction to match the design.
    * **Header Background Image**: For a more creative header, you can use an image. This feature allows you to layer an image over your price list, providing extra texture or thematic elements to enhance the design. The background image can be adjusted for size and position to ensure it fits perfectly within the header area.

### **Badge Settings**

**Badge Position:** Badges are typically used for special promotions or best-selling items, and placement can make these more noticeable..Choose from 10+ different positions to place the badge, like top-left, top-right, or center.

**Badge Rotation:** Add a rotating effect to the badge for an extra visual appeal.

**Badge Background:** Set the badge’s background to a solid color, gradient, or image for enhanced styling.

| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/XfSQBcA4CDts24VOEZB095UCUx2br3RlOtVV20XK.jpg) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/YGNc9V4GeDIfpfpoekDLGqmuG5XFGfGn7mWMCDrD.jpg) |
|---|---|

**Badge Font styles:** The **Badge Font Styles** section gives you the tools to customize the appearance of the badge text. You can control every aspect of the text, from font family to color and shadow effects, to make sure the badge fits your website’s overall design language. Here’s what you can customize:

* Font
* Font Weight ( Bold, medium, etc )
* Font Style ( Italic, underlined, etc )
* Alignment ( left, center, right )
* Font Color
* Line Height
* Letter Spacing
* Text Shadow

**Badge Spacing:** Control the padding and margin around the badge to ensure it doesn’t overlap other content.

**Badge Border & Box Shadow:** Apply borders and shadows to define the badge further.

### **Order List Settings**

The **Order List Settings** offer customization options specifically for numbered or ordered lists. Numbered lists are ideal for step-by-step guides, rankings, or sequential product listings, and these settings allow you to control their visual style. You can modify various aspects to ensure the numbered list fits seamlessly with the overall design of your price list. Here’s what you can adjust

* Order Number Background
* Spacing
* Border Styles
* Box Shadow Effects

### **Item Settings**

Each individual item in your price list can be fully customized to stand out or blend seamlessly with the list’s overall design. The **Item Settings** section provides powerful tools to ensure that each item has a unique look while still maintaining a cohesive design. Here are the key customization options for each list item:

| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/r3eUPwktLfC7xJKGPgj77akbboo52WCk83aQzdK1.jpg) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/75y18HuJY5fWiuUWO7lK9ghd7NmgTx4sUEW7h5UR.jpg) |
|---|---|

* **Background**: You can set a background for each price list item, choosing between solid colors, gradients, or even images. This allows for great flexibility in design. For example:
    
    
    * **Solid Color**: Set a uniform background color for a clean and consistent look.
    * **Gradient**: Apply a gradient to create a more dynamic and visually appealing background.
    * **Image Background**: Use an image as the background to add texture or visual context related to the product or service listed.
* **Spacing**
* **Border styles**
* **Box Shadow**

The **Advanced Price List module** is a highly versatile tool for creating detailed, professional price lists that stand out. Whether you are adding icons, images, text, or call-to-action buttons, this module provides all the design flexibility you need.

By following this documentation, you can fully customize every aspect of your price list—from individual items to global settings—ensuring your price list meets your design and functionality goals.

For any further questions, refer to the FAQs or consult additional resources provided by **[Divigrid.](https://divigrid.com)**

## **Frequently Asked Questions (FAQs)**

#### **Q. What is the Advanced Price List module, and how does it benefit my website?**

The Advanced Price List module is a versatile tool designed to create customizable and visually appealing price lists for various products and services. It benefits businesses by allowing them to display prices, descriptions, images, and CTA buttons in an organized, user-friendly format.

#### **Q**. What types of businesses can benefit from the Advanced Price List module?

This module is suitable for a wide range of businesses, including restaurants, e-commerce, service providers, and more.

#### **Q**. What content types can I add to my price list?

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/R4MvpXEbkiZ51Rz0yElpeYsYpMce0y0Cy3KhmW71.jpg)

You can add text fields (title, description, and price), images, icons, lists (ordered and unordered), image & text, icon & text, and call-to-action (CTA) buttons.

#### **Q**. What is the difference between an Image List and an Icon List?

An Image List displays images alongside each item, while an Icon List displays icons. Both options have their own unique customization settings.

#### **Q**. Can I add badges to the price list?

Yes, you can add badges to highlight special items, promotions, or bestsellers. Badges can be customized in terms of position, rotation, background, and font style.

#### **Q**. Can I globally customize the price list?

Yes, the Advanced Price List settings offer global controls for customizing elements such as headings, badges, and list items across the entire price list.

#### **Q**. Can I add images and icons to the price list?

Yes, the module allows you to add both images and icons to each price list item. You can customize the size, alignment, and style of these elements to enhance visual appeal.

#### **Q**. What responsive design options are available for mobile and tablet views?

The Advanced Price List module includes responsive design controls, allowing you to customize how the price list appears on mobile, tablet, and desktop devices for a seamless user experience.

#### **Q**. How can I ensure my price list is SEO-friendly?

By using proper HTML heading tags (H1-H6) for titles and descriptions, along with optimized text and image alt tags, your price list can be made SEO-friendly, improving search engine visibility.

#### **Q**. Is it possible to apply a background image to each individual price list item?

Yes, you can apply unique background images to individual list items through the Background Image Settings for a more dynamic and personalized presentation.

#### **Q**. Can I add multiple CTA buttons to a single price list item?

While the default setting allows for one CTA button per item, you can duplicate the button element and customize it for additional links or actions.

#### **Q**. Is it possible to use different background colors for each price list item?

Yes, you can assign different background colors or gradient settings to individual price list items, creating a dynamic and visually appealing layout.

#### **Q**. Is it possible to display different fonts for the title and price?

Yes, the module allows you to choose different fonts for titles and prices, giving you greater control over the design and visual hierarchy.


# Advanced Tabs


## Overview

Welcome to the Advanced Tabs module documentation! This module is designed to empower developers with a powerful and flexible solution for implementing tabbed navigation within web applications. Tabs play a crucial role in organizing and presenting content, and the Advanced Tabs module takes this fundamental UI pattern to new heights.

The primary goal of the Advanced Tabs module is to simplify the process of creating dynamic and interactive tabbed interfaces. By offering a rich set of features and customization options, this module allows developers to enhance user experiences, streamline content presentation, and build visually appealing applications with ease.

## Common Questions About Advanced Tabs

#### 🔴 **How does the Use Nav Width Control Switch function, and what sets its operation apart as a specialized feature?**

✔️ If you prefer not to maintain the navigation item width at 100%, you can utilize the switch to control its width. It allows you to set a specific height and define minimum and maximum width values.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/pWylDc6q0zBpy2EnnjgWmhnmMS4pvi5GpiNFau7P.png)

To ensure proper alignment of items, the Nav Item Alignment option field lets you position them accurately, adjusting their size by specifying widths.

#### 🔴 **What are elegant ways to arrange multiple navigation items for a polished appearance on a tablet or mobile view?**

✔️ The Nav Item switch facilitates the tidy arrangement of navigation items in tablet and mobile views. Once activated, items can be organized into column sizes or adjusted to specific widths as needed.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/n9VH3DfhdXggY5AuGP6jNt4MozIl0tzFEl2s2M4o.png)

#### 🔴 **How can I set a specific width of items when the nav placement is in the left or right position?**

✔️ If the navigation placement is configured to left or right, an option field will appear to set the specified width. In this field, you can define a specific width for the navigation, providing customization according to your requirements.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/rrwgWnKjVYhav4578Np45Tq7q6H31impw5cXY0ch.png)

#### 🔴 **Can I use library content in these Advanced Tabs? How is that?**

✔️ Certainly! To integrate library content into the Advanced Tab using Divi Advanced Tabs, start by selecting your preferred library layout from the Divi library and saving the layout. Keep in mind that the library content visuals will be visible only on the front end.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/I35amLBVV01YsOAueaC279pQTp1tGKebNFnYt0Yr.png)

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/CmhZ0XbcuGUBJgxFtoyo1RlQ62FfsUCZG5uHRx2A.png)

To showcase library content in the Advanced Tab, toggle the Content switch in the Advanced tab item. Upon clicking the content tab, a select field option named Tab Content Type will emerge. Choose the library layout option and select the specific layout from the available options. Save your changes, and the library content will be smoothly incorporated into the Advanced Tab.

#### 🔴 **Are there options to write custom CSS?**

✔️ It's fantastic that our Advanced Tabs module includes the option to write custom CSS. By selecting Custom CSS from the Advanced tab, you gain the ability to craft specific styles for your tabs. This feature allows you to write custom CSS code for particular classes within the Custom CSS module elements, providing a high degree of customization and control over the appearance of your Advanced Tabs.

#### 🔴 **Is it possible to assign different positions to images within the content area?**

✔️ Certainly! If you wish to adjust the placement of your image or icon within the content area, you have two options. Firstly, you can access the Advanced tab and navigate to the content area settings toggle. Once there, click on the toggle, and you will find an option field named image/icon placement. From this field, you can select your preferred positions.

 | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/wCPMq0gwrSoddMG7MvrvZ1crCNsSaeNIenzkeeGp.png) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/kMBFknuw925tRSoIeiMrlFFrJLpJ3Vv5Fknxm6QY.png) |
|---|---|

Alternatively, if you prefer to make this change from the Advanced tab Item, you can go to the content wrapper toggle within the Design tab. Within the content wrapper toggle, look for the image/icon placement option, and choose the desired placement for your image or icon. This dual-option approach provides flexibility in customizing the positioning of images or icons according to your design preferences.

#### 🔴 **How can I customize the backgrounds of individual navigation items to have distinct styles for each in a website or application?**

**✔️** You can choose a different background for each navigational item from the Advanced tab item's Navigation Background option.

## Getting Started

The Advanced Tabs module is straightforward. With minimal setup, developers can quickly integrate tabbed navigation into their projects. The module is designed to be developer-friendly.

Whether you are a seasoned developer or just starting, the documentation provides step-by-step guides, and best practices to help you integrate and leverage the Advanced Tabs module effectively.

Let's dive into the documentation to explore the features, customization options, and best practices for incorporating the Advanced Tabs module into your projects.

## Advanced Tabs Item Content Tab

#### **👉 Navigation Content**

**Use Icon Switch**

The Advanced Tabs module provides the flexibility to customize the appearance of tabs by allowing users to choose between icons and images for navigation content. Depending on your preference, you can enable or disable this feature to tailor the visual representation of your tabs.

**Navigation Image**

In the Advanced Tabs module, the introduction of navigation images becomes a pivotal feature, particularly when the icon switch is turned off. Users can leverage the image field to infuse visual appeal into their tabbed interface by adding relevant images to each tab in the navigation bar. The image field offers users the freedom to select images that resonate with the content or functionality of each tab, providing a quick and recognizable visual identifier.

**Navigation Title**

In the Advanced Tabs module, configuring the navigation title is a straightforward process that allows you to define clear and descriptive labels for each tab. Whether you're emphasizing functionality, providing context, or guiding users through specific sections, customizing tab titles enhances the overall user experience.

**Description**

The description field complements the title, providing an additional layer of information to offer users more context about the tab's content or functionality. Utilize the description to provide hints or brief details about what users can expect within the tab and Offer context that may not be fully conveyed by the title alone.

#### **👉 Content**

The content area is the space where the specific content related to the selected tab is displayed. It dynamically changes based on the user's tab selection. The content area can contain text, images, or any other relevant information based on the purpose of the tab.

**Tab Content Type**

Within the content area of the Advanced Tabs module, users enjoy a versatile design experience with the option to seamlessly switch between two distinctive layouts: **custom and library layouts**.

In the custom layout, users wield complete creative control, curating their own tabbed content with personalized elements. They can effortlessly integrate eye-catching icons or images to visually represent each tab, accompanied by a carefully crafted title and a descriptive narrative to provide valuable context. Additionally, users have the flexibility to insert engaging buttons, fostering interactive experiences within the tab.

On the other hand, the library layout taps into the Divi library, offering a collection of pre-designed templates for users to effortlessly apply to their tabs. Whether users opt for the freedom of custom layouts or the efficiency of library layouts, the Advanced Tabs module empowers them to shape a dynamic and visually compelling tabbed interface tailored to their unique preferences and content requirements.

**Custom Layout**

**Flexibility to use Images or Icon**

By default, the content area provides options for displaying images, accompanied by an image alt field for accessibility. However, the user has the power to activate the "use icon" switch, initiating a shift in the content presentation. Once enabled, users can opt for icons as visual identifiers instead of images. Notably, the system enforces exclusivity, ensuring that users can't use both images and icons simultaneously. This intelligent design choice streamlines the user experience, allowing for clean and purposeful customization of tab content based on individual preferences and design requirements.

**Heading & Description Field**

In the Advanced Tabs module, users have the flexibility to customize the heading and description fields within the content area, enriching each tab with meaningful information. The heading field serves as the primary title for the tab, providing a concise and clear label that encapsulates the essence of the content. Users can craft compelling titles that capture the user's attention and convey the purpose of the tab effectively.

Complementing the heading is the description field, offering users the opportunity to provide additional context or details about the tab's content. This descriptive text helps users understand the nuances of what each tab holds, fostering a more informative and engaging user experience. Whether users are creating a custom layout or leveraging the library layout, the ability to personalize headings and descriptions empowers them to curate a tabbed interface that aligns seamlessly with their content strategy and user engagement goals.

**Button**

For enhanced interactivity, users can integrate **valuable buttons** within the content area, facilitating seamless navigation or triggering specific actions. This flexible approach empowers users to curate a dynamic and user-centric experience within the content area, ensuring their tabs are not only visually appealing but also rich in informative and interactive elements.

#### **👉 Navigation Background**

An innovative aspect is the "Navigation Background" feature, which allows users to individualize the background of each navigation item. This unique capability means that, for every nav item, users can choose a different background, adding a layer of customization and personalization that goes beyond conventional navigation item interfaces. Whether it's selecting vibrant colors, gradients, or even images, this feature empowers users to the specific theme and branding of their web application.

## Advanced Tabs Item Design Tab

#### **👉 Content Alignment**

The Advanced Tabs module introduces a nuanced approach to content alignment, featuring two essential fields: **Tab Horizontal Alignment** and T**ab Vertical Alignment**. Through the tab horizontal alignment field, users gain the capability to strategically position tab contents, choosing between left, center, or right alignments within the content area. Complementing this, the tab vertical alignment field empowers users to align content vertically with precision. Whether opting for a top, center, or bottom alignment, users can harmonize the vertical positioning of their tab contents, achieving a balanced and aesthetically pleasing arrangement.

#### **👉 Content Icon Settings**

The Advanced Tabs module offers users robust control over content icon settings, featuring customization options such as icon size, icon color, icon background, border, box shadow, margin, and padding. With the ability to define the content icon's size and color, users can seamlessly integrate icons into their tabbed content, aligning with their overall design theme.

The options for background, border, and box-shadow empower users to create visually distinctive icons that complement the aesthetic of their web application. Additionally, precise adjustments to margin and padding enable meticulous spacing control, contributing to a polished and well-balanced layout.

#### **👉 Content Image Settings**

With the ability to adjust image width and height, users can ensure optimal sizing within tabbed content. The options for margin and padding offer meticulous spacing control, allowing users to create a well-balanced and visually appealing layout.

Furthermore, users can define a border for the image, providing additional styling options. The inclusion of a box shadow feature adds a layer of depth and visual distinction to the image within the tab.

#### **👉 Heading & Description Font**

Those crucial features allow users to seamlessly tailor the typography within the content area, ensuring a harmonious blend with their design aesthetics. With the ability to update the font family, users can choose a style that aligns with their brand or visual theme. Precise adjustments to font size cater to readability preferences, while options for alignment provide flexibility in text positioning. Users can infuse personality into their tabs by customizing font color, and achieve optimal legibility by setting line height. Additionally, letter spacing options contribute to fine-tuning the overall text presentation.

#### **👉 Content Wrapper Settings**

**Content Wrapper** feature emerges as an important role in the customization of tab content. This powerful tool empowers users to thoughtfully organize their content by providing a designated space for **images/icons** and **text**. Users can place their image/icon in four different positions top, right, bottom, and left. Create separation between images/icons and text using the "**Gap**" feature, allowing for a well-defined layout.

Precise control over margin and padding for the content wrapper enables users to fine-tune the spacing around their content. Additionally, the capability to set a background for the content wrapper introduces a visual layer of distinction. Further customization options encompass adding a border to the content wrapper for enhanced styling and applying a box shadow to introduce depth and dimension.

#### **👉 Button Settings**

Starting now, you have the freedom to personalize the styling of specific buttons within the Advanced Tabs module. Divi introduces default button styling options, providing users with a versatile toolkit to tailor the appearance of buttons to their liking. From adjusting button colors and sizes to fine-tuning the border, margin, and padding, you have the creative control to seamlessly integrate buttons into your tabbed interface.

## Advanced Tabs Content Tab

#### **👉 Configuration**

**1. Event Type:** The Event Type setting offers two options: "Click" and "Hover." Users can choose their preferred interaction method to trigger tab actions. When the user clicks on a navigation item, the dependent tab content on that item will be displayed. If you choose to hover again, hovering over the navigation item will show its content.

**2. Tab Reveal Animation:** Choose from a variety of 8+ animations in the Tab Reveal Animation setting to add dynamic transitions when activating tabs.

**3. Animation Duration:** Define the speed of the reveal animations by setting the Animation Duration, allowing users to control the duration of the transition effect.

**4. Gap (Navigation & Tab Item): 
The Gap setting is used to create space between navigation items and tab content, facilitating a visually pleasing layout with customizable spacing.

## Advanced Tabs Design Tab

**Nav Container Settings Nav Settings Arrow Settings Content Area Settings Item Settings Button Settings Custom Spacing Custom Border & Box Shadow**

#### **👉 Nav Container Settings**

**Use Nav Width Control switch:** When the switch is in the off position by default, navigation items extend across the entire tab area, forming alliances that evenly distribute space. However, toggling the switch on results in navigation items being precisely positioned. This allows users to specify the width and height according to their preferences, providing a customizable layout.

**Nav Item Control switch (Only for Tablet & Phone):**

Their display on phones or tablets may become suboptimal when dealing with numerous navigation items. This switch serves as a remedy for this issue. Once activated, the items seamlessly transform into a column format without requiring specific width settings for each item. Notably, this responsive adjustment exclusively applies to the phone and tablet view, optimizing the user experience on smaller screens.

**Nav Placement:**

In the context of Advanced Tabs, navigation placement stands out as a crucial feature, allowing users to strategically position navigation items in four distinct locations: Top, Left, Right, and Bottom. The default placement is set to the top position, ensuring an optimal starting point for user navigation. Notably, this navigation placement is designed to be fully responsive and device-friendly, adapting seamlessly to different screen sizes.

Moreover, when users opt for left or right navigation placement, an additional customization field, "nav container width," becomes available. This feature empowers users to adjust the width of the navigation container for each device view, providing a tailored and responsive layout.

 **Nav Item Alignment:** When users specify a specific width for navigation items, the widget introduces a valuable feature that enables precise control over the location of these items. This includes the ability to set navigation items to start, center, or end positions, aligning them according to the design preferences of the tabs. Whether users aim to emphasize the beginning, center the items for a balanced presentation, or place them at the end for a specific design effect, this functionality ensures flexibility in tailoring the appearance of the navigation items within the module.

 **Navigation Item gap:** This feature can be used to create a specified amount of gap between navigation items. Its function is to create a certain amount of space between each nav item.

**Z-Index** The z-index parameter in Advanced Tabs allows users to control the stacking order of navigation items and tab content. By incrementing or decrementing the z-index value, the item with the higher value will be positioned above the one with a lower value. This straightforward functionality provides precise control over the visual hierarchy within the tabbed interface.

#### **👉** Nav Settings

Within the nav settings of Advanced Tabs, two distinct sub-toggles, namely General and Active, offer users refined control over the appearance of navigation elements. Focusing on the General Settings sub-toggle, users gain the ability to efficiently modify parameters such as Image Height, Image Width, Icon Size, Icon Color, Icon Background, Image/Icon Placement, Alignment, Border, and Box Shadow. This comprehensive set of customization options empowers users to precisely tailor the visual attributes of navigation items.

Conversely, the Active sub-toggle within the nav settings of Advanced Tabs provides dedicated design options for the active item. Users can seamlessly customize the appearance of active items independently, as all design options are available separately in this sub-toggle. This streamlined approach allows users to effortlessly design and fine-tune the visual presentation of the active navigation item, ensuring it stands out distinctly in the tabbed interface.

#### **👉** Arrow Settings

In the Arrow Settings of Advanced Tabs, users have specific options to customize the appearance and behavior of arrows within the tabbed interface:

**1. Use Active Arrow Switch:** Activate or deactivate the switch to enable or disable the display of arrows for active items within the tab navigation. When the **Use Active Arrow** Switch is enabled the rest of the options are shown.

**2. Active Arrow Color:** Define the color of arrows associated with active items, ensuring visual coherence with the overall design.

**3. Arrow Size:** Specify the size of arrows to achieve the desired visual impact and alignment within the tabbed interface.

**4. Arrow Alignment:** Control the positioning of arrows about the tab content, choosing an alignment that suits the design and layout preferences.

#### **👉 Content Area Settings**

In the Content Area Settings of Advanced Tabs, users enjoy a spectrum of customization options to finely tune the presentation of tabbed content:

**1. Content Vertical Align:** Choose between "Start," "Center," or "End" to vertically align the content within the tab area.

**2. Image/Icon Placement:** Define the placement of images/icons as "Top," "Right," "Bottom," or "Left" within the content area.

**3. Gap:** Set the gap to create space between images/icons and texts, ensuring a visually appealing and organized layout.

**4. Horizontal Alignment:** Opt for "Left," "Center," or "Right" alignment to position the content horizontally within the tab.

**5. Vertical Alignment:** Align the content vertically with options such as "Top," "Center," or "Bottom" to achieve the desired layout.

**6. Icon Size:** Specify the size of icons for a visually striking representation within the tabbed content.

**7. Icon Color:** Define the color of icons to match the overall color scheme and design aesthetics.

**8. Image Width and Height:** Customize the width and height of images within the content area for precise control over visual elements.

**9. Content Area Background:** Set the background color of the content area to create a cohesive and visually pleasing design.

#### **👉 Item Settings**

**1. Item Background:** Customize the background of tab items to match branding or design preferences, ensuring a visually cohesive tabbed interface.

**2. Item Margin and Padding:** Adjust the margin to control the space between tab items and their surrounding elements. Similarly, set padding to determine the space within each tab item, allowing for precise layout adjustments.

**3. Item Border:** Tailor the appearance of tab items by configuring the border settings. Define the color, style, and thickness of the border to add a polished and refined look to each tab item.

**4. Item Box Shadow:** Introduce subtle or prominent box shadow effects to tab items, providing a sense of elevation and depth. This enhances the visual hierarchy and contributes to a modern and engaging tabbed interface.

#### **👉 Button Settings**

You have the freedom to personalize the styling of all buttons within the Advanced Tabs module. Divi introduces default button styling options, providing users with a versatile toolkit to tailor the appearance of buttons to their liking. From adjusting button colors and sizes to fine-tuning the border, margin, and padding, you have the creative control to seamlessly integrate buttons into your tabbed interface.

#### **👉 Custom Spacing**

In the realm of Advanced Tabs, users gain the capability to assign custom margins and padding to every navigation element, commencing with nav containers and extending to nav items. This inclusive customization of spacing ensures a tailored and visually cohesive layout. Similarly, users can conveniently set margins and padding for all elements within the tab content area, allowing for seamless adjustments. This centralized control over spacing empowers users to achieve a precise design.

#### **👉 Custom Border & Box Shadow**

**Custom Border :**

The Custom Border toggle in Advanced Tabs provides users with precise control over the visual appearance of various elements. With this feature, users can individually define the borders for nav items, navigation icons, navigation images, content wrappers, and content icons/images. This customization encompasses specifying border color, style, and thickness for each element, allowing users to achieve a cohesive design within the tabbed interface.

**Custom Box Shadow Toggle:**

Similarly, the Custom Box Shadow toggle empowers users to enhance the visual depth of their tabbed interface. This feature, allows users to apply custom box shadow effects to nav items, navigation icons, navigation images, content wrappers, and content icons/images. By adjusting parameters such as shadow color, blur, and offset, users can introduce subtle or pronounced shadows, providing a sense of elevation and dimension to different elements

## Custom CSS (parent & child module)

The Advanced Tabs module goes a step further by offering users the flexibility to design and extend functionality through custom CSS. With the Custom CSS feature, users have the freedom to apply their unique design styles or introduce new features by writing custom code directly within the Advanced Tab. Whether it's fine-tuning layouts, introducing custom animations, or implementing unique styling, the Custom CSS feature provides an avenue for advanced users to unleash their creativity and achieve a truly customized and distinctive tabbed interface.


# Divi Content Grid


#  

Once you have installed **DiviGrid** Module, you will find Divi Content Grid alongside the rest of the Divi Modules that are available in the “Insert Module” window.

## **Divi Content Grid Settings**

After inserting the Divi Content grid you will find a new toggle called **Grid Settings** along with the default toggles.

### **Grid Settings**

Inside the Grid Settings toggle, there are three more switches and some grid options.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/OH9KzLx8FeDMyu2wLZbTtfrFPeSPvstDahciyRu5.png)

**Grid Gap**

The Grid Gap property defines the size of the gap between the rows and columns in a grid layout.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/eCqPjqrsf4bgEEwvdQS87vmjICX1wO50em7PIefi.png)

**Grid Column Number**

 The Grid Column Number specifies the number of columns in a grid container. The values are a space-separated list, where each value specifies the size of the respective column.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/iMo2IlOGTe9ChdpCIqZu0o1OJxuFGyTrZaKRhJiR.png)

**Grid Row Number**

The Grid Row Number specifies the number of rows in a grid container.

The values are a space-separated list, where each value specifies the size of the respective row.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/EgkHmHdYY04MQWplMO4jaYhBy9zgR6sId3sKqnXc.png)

**Grid Layout Switch**

This is premade grid layout switch. If this switch is enabled, many built-in layouts will be available.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/5f3LV1wgr0x2vugI8wF2ZxkBjZfvKCYGJpFLbnYW.jpg)![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/dLSuxXYKDSMJDTe7RrDv1IPnKW7uLWDksu5HAhow.png)

**If you want, you can create a custom grid layout by clicking the Add item.**

**Enable Mobile Responsive Switch**

this switch is used for mobile responsive views only।

If the switch is turned on, each item in the mobile grid layout will maintain the same height and width.

**Item Alignment switch**

Provides options to specify where contents can be displayed within the grid layout.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/utTd2EXCBJ9wYRL5RvsXn00syvigWXmqz96IS5jd.png)

### **Design Tab**

In the design tab, tons of new modules have been added for design purposes. With the help of modules such as title, subtitle, content, and image settings, everything can be designed very smoothly.

**Hover Effects**

In Design Tab, there is a new module called Hover Effects. Basically, it is a Yes\_No switch button. If you want to use Hover Effects then press yes. Now you have found the hover effects style. Chose a style that matches your content.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/d9fhbGSuFYkrsZm3k01gMm6ALIHsJ612nkFq0hH0.png)

**a. Focus Item**

**b. Content Reveal**

 **Focus Item**
Typically, when the User hovers over any of the items in a section, that item will appear zoomed in slightly from other items in that section.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/KODulOnoP0wxJGvcNghaiZH8MJCtWCwl0N2iZN4a.jpg)

**Content Reveal**

The Content Reveal style is such that there is an image first and the contents of the grid are hidden. Those contents will appear above the image when hovered over. Also, the image is slightly zoomed and slightly rotated to increase the glamor of the style.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/zvFge66EdZpHDkbntBHVlSUPWYURc0VPE94beCoq.jpg)

**Spacing**

The Spacing toggle provides options to set the margin or padding of each grid at once.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/6gidmohCGMZH6zIFFWqF8seM8Nqi598luCRLOweH.jpg)

**Also, in each module of the design tab, the necessary options are given.**

 

\-----------------------------------------------------------------------------------------------------------------------------------

## **Divi Content Grid Item Settings**

#### **Content Tab**

There are **Five** new modules inside the Content tab of the Divi Content Grid item

**a. Content**

**b. Image or Icon**

**c. Button**

**d. Grid Settings**

**e. Item Position**

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/epx5iwO7tbGYcumWnQOYpWmksEHigC3CunLsijpO.png)

#### **Content**

Write your Title, Subtitle, and Short description in the content toggle.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/ODjNHO8lNifpVcCs15kOy1aUUza5MtnfaBecyO4m.jpg)

**Image & Icon**

You can add images or icons to this toggle. It would be better to write the image's alt name along with the image. Image alt is very useful for SEO purposes.

**Image scale**

The Image Scale property allows you to change the size of the uploaded image. Image scale Defines defines a transformation that resizes an element on the 2D plane. Because the amount of scaling is characterized by a vector, it can resize the horizontal and vertical dimensions at different scales.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/G58h7c39hyRYHW9QY8FbJnmNLQTHWxZ2xpVZAK4f.jpg)

If you want to add an icon, then there is a switch called Use Icon, enabling it will bring up the option to add an icon.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/EhxiY2aAQfms84f4r2AXTxs53qsEylBWumJa6ix7.jpg)

#### **Button**

A button is a small way to jump to a new page or specific post. In the button text option just enter the text title and also enter the exact URL. Then go to the specific page with one click.

After clicking, if you want to open the page or post in the same window or in a separate window, you can also select from the following URL opens.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/5WWxHpvsUFjtTiJTLvgvL1FTngDvYyfCG62y1ZzI.jpg)

#### **Grid settings**

How grid settings work is described in Content Grid Settings. [Click here](#grid_settings) for details.

In this grid setting, there are two tabs named Column and Row. Where you can define where your columns and rows start and end.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/oGWv43XsQ1HYWbu2kdpw5nYco2PJBBgnpN9QEXyw.png)

**Grid column start**

The **grid column start** property defines on which column-line the item will start.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/gUllehB1FsWDv4t7hOPm5oIsEj4238YYthBOY9dv.png)

**Grid row start**

The **grid row start** property defines on which row-line the item will start.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/wJmrd8awE4VDxQMvOMrIPVqYDOOvyN5ujY2vRuGG.png)

**Item Position**

There are two switches here.

**Enable Position** and **Item Alignment.**

 **Enable position**


 If Enable Position is enabled then the order of the item's position can be changed. You can change the order as per your wish here. By default, the Enable position switch is **OFF.**

**![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/JrSDLzI9ySJybgL6t2EbcT1DmFHq6fSHTB32wlyU.png)**

**Item Alignment**

Provides options to specify where contents can be displayed within the grid layout. By default, it's **OFF**.

### **Design Tab**

An Advanced tab has different designing toggles for designing the contents of the content grid items to facilitate the need. Also, several options have been added to some of the default toggles.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/Oy9vuOIVXibjkzFoAUqyeOYJdyHyzHWjxQ92Pu0p.jpg)

In Design Tab, there is a new module called Hover Effects. Basically, it is a Yes\_No button. If you want to use Hover Effects then press yes. Now you have found an option.

**Cool Effects**

Typically, Cool Effects is a switch button to activate the Animated border. By default, the Animated border switch is OFF.

**Animated Border**

This is the first of many **Cool Effects**.

This effect is provided to give individual animated borders to all items in a grid. You can create colorful border animation with custom color, width, and border-radius without any hassle.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/dCAGai7PO686viDE45jzbXMHMU429rx4HLuLTdyp.jpg)

**Content Wrapper**

Here you can design and change the background and width of your content wrapper. You can even change your alignment horizontally. Border design features can make your items more beautiful and attractive.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/iYUtF0M18o5IvBpCw2sruKH4FZpW4ZaXOUoxlvLV.png)

**Spacing**

Here are added options to give margin and padding to each content separately.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/SJc9wqQyQZi90caiDahNMgUoIoKHmS7odo6NwayG.png)

**Custom CSS**

You can write your custom CSS code here for your design purpose.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/RITrqJbwU1bGOh1w3EO8DFFLlbgmsw7EpTFwlS4r.jpg)![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/whHiGvabgjNG54wlZaHY8tF3ZcYxP2rebFfl658g.png)![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/MMfyqNgXC8M9yBSX397zNmf91DrlyzuzcuuAZEVw.png)![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/sPSJ9kKKeV2JN4Dh3Ceoc3Fi94wYcls3cXrEyczA.png)

You can see which class you want to write your custom code in by clicking on the question mark

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/Q19e9laHkDaxdHkgwacLjfUl9eBhP0GRjLpPjdUE.png)

Here are some of the custom code demo examples

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/XX3AdWbTppqk49lFSl6cJARPK2vjnkBhWkrzFh6N.png)

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/7b8tyIXbEA6r92QfU8so91B1eBBDn5b9PGA4WRAl.png)

To learn more about grid-gap property please visit [w3schools.com/grid](https://www.w3schools.com/css/css_grid.asp)


# Interactive Divi Card


Today we will introduce a module that has never been in Divi before. Its name is **Interactive Divi Card**. We make many cards for different needs but in this module, you will be guaranteed to create a beautiful card without complications. How to install this module and use it will be described in detail in this documentation article. Let's start...

Once you have installed **DiviGrid** Module, you will find the **Interactive Divi Card** alongside the other Divi Modules available in the “**Insert Module**” window.

## Interactive Divi Card Module

Generally, a card has two parts. One front part and another back part. Usually, the front part has the company identity and the back part has the full details. This interactive card has been created keeping in mind the idea of ​​how to look out beautifully on a webpage by combining both. 
Through interactive cards, you can present your identity and the organization's identity to your clients in a wonderful and attractive way.

We hope you will enjoy our very own new **Interactive Divi Card**. Let's see what we have done in this module.

## Interactive Divi Card Content Settings

After inserting the Interactive Divi card you will find a new toggle called **Grid Settings** along with the default toggles.

### grid settings

Inside the grid settings, there are two more fields for the layout selection.

a. Grid column Number

b. Grid Gap

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/dFWdXIy3GZd4AoCsx5Sjt1OruD0ekdaUMMZpj3CQ.jpg)

**Grid Column Number**

How many columns will be in a row can be defined from this field. Columns can be easily defined for specific designs. From one to ten columns can be defined from this field.

**Grid Gap**

This field is used to define exactly how much gap you want in each grid column. You can create the same amount of gaps in columns and rows from this grid gap field. The gap can be created from 0 to 50 pixels.

### Background

We modified the background field. there are 3 sub toggles in the background field. first, for the container box, 2nd for the interactive cards front part, and 3rd is the interactive cards back parts. Background color can be set globally for all module items.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/CCmI1OEf49wCj4Ngnss0fpZhxwd2Ws1Yl0O0Gg2V.jpg)

## Interactive Divi Card Item Content Settings

The interactive Divi card has four new toggles and modified background settings.

**Grid Settings**

In this grid setting, there are two tabs named Column and Row. Where you can define where your columns and rows start and end.

**Grid column start**

The **grid column starts** property defines on which column line the item will start.

**Grid column end**

The **grid column end** property defines on which column line the item will end.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/QyiNYtgFCTu5YVvw5uYPR5vSVbRpijhSuA8PXBcj.jpg)

**Grid row start**

The **grid row starts** property defines on which row-line the item will start.

**Grid row start**

The **grid row ends** property defines on which row line the item will end.

**Enable Dual Part**

There are two switches in the Enable Dual Parts toggle settings.

a. Enable Dual Part

If you open this switch, your front part and back part will show side by side at the same time. Divide the entire length of a column into two equal parts, the front part, and the back part will show at the same time.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/scrZXx6qf2t4yq0Qgix47TTTdJDTXuYbgQxltI9i.jpg)

b. Show Back Part For Style

The 2nd switch is for Visual Builder only. Because that part cannot be seen while designing the back part. This switch is provided for the convenience of designing by looking at the back part. It doesn't show anything on the front end or website.

**Content**

Inside the content settings, there are two sub-toggles named The Front Content and the Back Content. In the front content, there are a title, subtitle, content text, and a button. On the other hand in the back content part, there are title, subtitle, content text, button text, button URL, and a useful social media switch. if you open the social media switch there are Facebook, Twitter, and other 4 more social media fields to write URL links.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/UsjjcdzG58kIoPFl4C1vRaoWuHXfSA8PeMXYzZQs.jpg)![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/09Rp5PAnSU0Cy3FdbqOQ1UtpjQrAWa0rHVkFRosr.jpg)

**Image & Icon**

Inside the image and Icon settings, you can set an image or icon. On the other hand, if you want you can use an image in the background-position. just **ON** the background switch, the image is automatically positioned in the background. Always keep in mind that image alternative text is very useful for SEO purposes.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/SJLA8BRREyHkzxfKYiw8OgsPiEmm0FR1EZtLELQY.jpg)

 **Background**

Background Settings has three sub-toggles. From here you can use the item, front part, back part a color, gradient color, and image.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/GeCH2lQ9fM6N2hUs8HJBhxvx1BnvssMdVVoi0z8e.jpg)

## Interactive Divi Card Design Settings

In the design tab, tons of new modules have been added for design purposes. The new design toggle items are listed below.

a. Item Container Height

b. Item Vertical Position

c. Image & Icon

d. Front Content

e. Back Content

f. Content Wrapper

g. Front Button

h. Back Button

i. Social Media

j. Animation Settings

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/X1kqJHEvSxXKk183bBZFcgnE1Mh33X3OlnIq8go9.jpg)

### Animation Settings

Since only the front part can be seen between the front part and the back part, there are several styles for how you want to show the back part in these settings and also set the time. If you want, you can use an animated border on the front and back parts. You can select one of our favorite animated borders. Here, you can also set the border width, color, and border from here.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/SMce4LYnPTo8KJBL9kQSBacfSi8lCJwFzOI1ARZh.jpg)![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/YoLLXDYM7ri6DBeBuoazmJqCXqqwVlFRK5jxgQUM.png)

### Item Container Height

Item Container Height toggle to specify how much height is required for each column. You can define the height for the front part and the back part as per requirement. This height is applicable for both the front part and the back parts. You can easily set the height of both items and cards. Also, define height separately for each module from the item.

### Item Vertical Position

Inside the Item vertical position has two sub-toggles named **front Item Position** and **Back Item Position.** You can choose a height for the front and back parts**.** After defining a certain amount of height, you can vertically align the contents of the item according to your preference. There are three ways to align: Top, Center, and Bottom. Usually, the contents of the item will be aligned at the top position. You can do this vertical alignment from the item and card toggle tab. The advantage of doing this from cards is that you can align all the items at the same time.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/wUuEjCGysrAY5DXgOHTawWPybEWedj7BDOkbJuTK.jpg)

### Image & Icon 

**Overlay Color**

If the image is set to background, you can use the overlay color on the front or back part where you used the image in the background. This overlay color option will come only if you use an image in the background.

**Image/ Icon position :**

You can define the position you want to keep your image from these four options (Left, Right, Top and Bottom). As per your selection, the contents will be inserted according to the position of the image.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/LBgLNgFRGzoVBOjzQHywTZ3NinaXt06tfr0c8bD8.jpg)

**Image/ Icon Horizontal Alignment :**

Image Position Left, Center or Right determines where you want your image to be placed when it is top or bottom position.

**Image/ Icon Vertical Alignment**

Image Position top or bottom determines where you want your image to be placed when it is left, center, or right position.

### **Front Content**

In the front content design tab, there are three more sub-toggles. each sub-toggles has the same options for designing texts.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/6JPMYLvaNTAlAv7fJEI05XQvfDQSP7HW0XJJUqEB.jpg)

### **Back content**

The Back part also has three sub-toggles. Divi defaults text designing options available there

### **Content Wrapper**

Content Wrapper has two more sub-toggles. one for the front part and another for the back part. both have the same options for designing content wrappers. Content background, Content Box shadow, and border are available to design the content box.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/ak9bM6uc6rJvfseiljLhHfVjRSvFav8wRjvhqtf7.jpg)

### **Front Button**

Everything you need to design a button is found in this Front Button Toggles.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/lB2CrKFc51WHMBiNGhchigbT3vqkkW0JLYbQ8j3a.jpg)

### **Back button** 

Divi default button options can be found in these back button toggles.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/Mlxr78nR7VuGptwRJtY1Harep9P8PTzagibU8Bno.jpg)

### **Social Media**

You can use social media links below the inline pop-up content if you want. This is a very popular option now. You can use these icons for yourself or for business. Social media options can certainly give you some added benefits.

**Alignment:**

Social media icons can be selected on the left, center, or right. this alignment can start with the left, center, or right side.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/julcuFYVxN1wQRW7zJamy7kqTwkk1z4YvtonKTAw.jpg)

**Icon Size:**

From here you can change the size of social media icons.

**Color And Background Color For Social Media Icon:**

You can change the color and background color of social media icons very easily. Given as a sub toggle for convenience.

## Write Custom CSS Code

Options for writing custom code as required are provided in Custom CSS Options.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/4gsrvOpgtQQKgPehUTVhiEIJSPZF3eSWyzFrQWSu.jpg)

Our guidelines have tried to give you a maximum idea of ​​how to use this module. If you want to know anything about our module, you can knock us anytime **[Here](https://divigrid.com/contact/).**


# Divi List Grid


Once you have installed DiviGrid Module, you will find Divi List Grid alongside the rest of the Divi Modules that are available in the “Insert Module” window.

## **Divi List Grid Settings**

After inserting Divi List grid you will find two extra toggles along with the default toggles.

**a. Direction Settings**

**b. Connector**

**![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/FssuIQrt7Ixsy3n6Hwo8vGSWi3Zc5Xh45VbUwsTf.png)**

### Direction Setting

In Direction settings, you will find a select option whose name is **Right to Left**. This **Right to Left** select option declared the direction of a text element displayed on a page. It is mainly used for languages written from right to left (like Hebrew or Arabic) and left to right (like English and most other languages). If you choose **Yes**, it means, you want to write directions from left to right**.** **Right to Left** selected by default **No**.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/8fOjjAyN9D9lE6RWT4gR2KxcmV6we6vLvGhMfc9G.png)

You've also got a switch button called **Content Shows Vertically on Mobile View** It only works in the mobile version. If you choose **YES**, your content will be displayed vertically (top to bottom). Otherwise, it displays horizontally (left to right) in the mobile version. By default, this switch button is selected **NO**.

### **Connector**

There are two switches inside the connector
**a.** **Use connector**
**b.** **Use Mobile Connector**

**Use Connector**

**![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/Frr0YXbiepbRDmwhH4FkNLCWhymmj1WYuELXa0aq.png)**

If you choose the **YES** button, you will find several options to change your connector. You can change the color, height, width, spacing, position, and sizes (vertically and horizontally) of your connectors, as well as move them from left to right.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/D9CRqAtyOAey5BRwT24yuwcIICT01EbOhC8ZWsV5.png)

By default Use Connector is **OFF.**

The **Use Mobile Connector** button is a switch by which you can decide whether you want to show this connector on mobile or not. If **YES** then you can show the connector on mobile view also.

By default Use Mobile Connector is **ON.**

\-----------------------------------------------------------------------------------------------------------------------------------

### **Design Tab** 

An Advanced tab has different designing toggles for designing the contents of the list grid items to facilitate the need. Also, several options have been added to some of the default toggles.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/sRNwfxOQNavy00Km8fRYXc2JrvB1bXKbecE8EuUS.jpg)

### **Hover Effects**

In Design Tab, there is a new module called Hover Effects. Basically, it is a Yes\_No button. If you want to use Hover Effects then press yes. Now you have found two options.

**a. Focus Item**

**b. Overlay**

**FOCUS ITEM**

Typically, when the User hovers over any of the items in a section, that item will appear zoomed in slightly from other items in that section.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/VurQkSvx2UNLF2QBQ7ikpvMhsAyH7TjiDPHgd2u1.png)

**OVERLAY**

An overlay is just a name in hover effect styles. Here you can choose different types of hover effects such as Swipe, Diagonal swipe, Alternate, etc.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/tYCbBNR0qeuX2pdcRGJl3z7utXEu93yOwRMorDIF.png)

**Overlay Style Names**

**a. Swipe**

**b. Position Aware**

**c. Diagonal Swipe**

**d. Alternate**

**e. Double Swipe**

**f. Smoosh**

**g. Diagonal Close**

**h. Zooming In**

**I. Corners**

**j. Collision**

**k. Slice**

In every hover effect style, you will find various options to style your list grid.

**\[ N.B: If you use hover effects then you cannot use a connector. \]**

**Color & Transition**

In Overlay Hover Effect, you can change your title color, subtitle color, and content color in hover.

**Background**

You can use a background color in all styles but there are certain hover styles in which you cannot use background image and background gradient color. Below is a list of those that cannot be used.

a. **Diagonal Swipe,**

b. **Diagonal Close,**

c. **Zooming In,**

d. **Slice**

**Overlay Transition Speed Curve**

 This Overlay Transition Speed Curve specifies the speed curve of the transition effect. This property allows a transition effect to change speed over its duration. Choose from our many speed curves that fit your style.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/jUWpmPw4lAP2QriyQKaeGCB0BViRVgx0DVZwz46d.png)

\-----------------------------------------------------------------------------------------------------------------------------------

 ```
```

## **Divi List Grid Item Settings**

In this module, you will find some new toggles called Content, Images & Icons, and Item Position.

#### **Content**

**Title**

In the Content tab, there is a writing text option called Title. You can write your List grid item title here.

**Content**

In the Content tab, there is a writing short description text option called Content.

This option is provided to enter a short description of the list grid.

**Badge Text**

You'll find a new option called Badge Text in the Content toggle on the Content tab. A badge is basically a markup option for design purposes. For design convenience, you can write some small text or numbers and use them with or without links as you like.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/aoJTZ5B3ppDmoo5l78m5WAqlNzwKygloyyxm0xwC.png)

#### **Images & Icons**

You can add images or icons to this toggle. It would be better to write the image's alt name along with the image. Image alt is very useful for SEO purposes.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/PoKstvdhFT3X9CcgfsJcIYdaDu31itVPTuwu5HMY.png)

If you want to add an icon, then there is a switch called Use Icon, enabling it will bring up the option to add an icon.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/Q0odo3rr5xUiP5KaxSasG18ALpvzSkbofUjNKFy7.png)

**Item Position**

Basically, you will find a switch inside the item position and the option to change the item position order.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/ZA3jNpe9iQ58X1cZdtDZxHeB2wahnLw8u9PdHB5S.png)

### Design Tab 

**Shape settings**

By enabling the shape setting switch, some shape pattern styles are available. Some pre-made images or icon shape patterns are provided for the list grid in the shape pattern option.

Change the shape as you wish without any hassle. You can also easily change the shape icon color, border color, border width shape background color, image, gradient, and box-shadow. In these shape settings, there are so many options for designing shapes.

 ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/KzKD0wl94JVTIyoupUR0p76VJ1zjhAcEDAezgwVT.png)

**\[N.B: When you use the hover effect on shape, please put your shape pattern into the container box to get a better hover effect\]**

**Badge Settings**

There are many options for designing your badge in the badge settings
You can use font size, font weight, height, width, text color, background image, color or gradient color, border styling options, box-shadow, etc. for your design purposes

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/UZgUjvCtFQogSRj8bVEsx3wulQDElbNiuxoE0WLR.png)

**Content Wrapper**

Here you can design and change the background color of your content wrapper. Border design features can make your items more beautiful and attractive.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/AApDCVuCTcmiruo8VWrTkm1O4Ge3QNWguQKBtoHj.png)

**Spacing**

Here are added options to give margin and padding to each content separately.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/g201UuOhAxDNEPSVxpbSwLD0gy0T3FsfGE1coZD5.png)

**Custom CSS**

You can write your custom CSS code here for your design purpose.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/kuUqiLIhg9jxsVDArN3I8bisi1n2CQO4CkL97g7i.jpg)![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/WlkfY0VTpDV24ChCaUMfO534vkzu5sJU1gvLLSFX.png)![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/FlyfiFG7ClqHZX6RJdKU8Rrn6sx64qtQ78u8walw.png)

You can see which class you want to write your custom code in by clicking on the question mark.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/Yio1EVxF9Q4XthiDykZRqY10VJXx2wTOPRl8Gsw0.png)

Here are some of the custom code demo examples:

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/wwehZx0CPLLopTdRf5szhoCo5xS2Cr0y3qNU0koi.png)


# Before After Image


The before-after slider presents two images side-by-side, with one image representing the "before" state and the other representing the "after" state. The user can drag a slider or swipe left and right to reveal the difference between the two images. The slider may also display a percentage value indicating how much of the image has been revealed or hidden.

Before-after sliders are often used in photo editing software to compare the original image with the edited version, allowing users to see the changes made and the effect they have on the image. In web design, they can be used to demonstrate the visual impact of design changes or to showcase the transformation of a website over time.

Overall, before-after sliders are a simple yet effective tool for visually communicating change or transformation, and they are widely used in a variety of industries.

### Few Common questions about Divigrid Before After Image Slider:

#### Is it possible to change the orientation of the image and handle in the image and compare the module?

Yes, DiviGrid's "before-after image" slider allows you to easily change the orientation of the slider and handle to best fit your needs. Simply navigate to the Content tab, then to the Settings section, where you can select either a horizontal or vertical slider orientation. By default, the slider orientation is set to horizontal, but you have the flexibility to change it to a vertical orientation if it better suits your design. This feature provides you with more control over the look and feel of your before-after slider, allowing you to create a more user-friendly and engaging experience for your audience.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/OZm2GQRazmRhZXvqlFzOUxtOReTwRxxeJas1rXA9.png)

Simply, **Goto Content Tab ->-> Settings ->-> Slider orientation.**

#### Can I add text labels to the before and after sections of the image to show the changes more clearly?

Yes, you can add text labels to the before and after sections of the image using DiviGrid's before-after slider. This feature can help make the changes in the image more clear and provide additional context to your audience. To add text labels, navigate to the Content tab and select the Before and After image sections. From there, you can add a text module or caption module and customize the content and styling to fit your needs. You can also adjust the positioning and layout of the text labels to best complement your images from the label settings. With this feature, you can create a more informative and engaging before-after slider that effectively showcases the changes in your images.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/626MZFwqpFjjTNzhuCjCjJaUo651Ss5bc5RUguz6.png)

#### Can I customize the behavior of the handle in the before-after image module?

In the content tab settings, you can adjust the handling behavior by selecting one of the available handle options. These options include drag, hover, and click. With the drag option, the handle will move when the user clicks and drags it across the image. With the hover option, the handle will move when the user hovers over it with their cursor. And with the click option, the handle will move only when the user clicks on it.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/RK5zgntCQ1Ymza6ZxCcSIKJRSELPspvWFYx3slbV.jpg)

#### How do I adjust the position of the handle in the before-after image module?

To adjust the position of the handle in DiviGrid's image compare module, follow these steps: 
go to the content tab settings and then define the position from starting point option. Define any point from 0.1 to 0.9, the handle position will be fixed at that place.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/iedYdzeA3bJJFSi3aTCF4Fjp3ByN9N2NfwuMpdy1.png)

#### Is it possible to add multiple before-after sliders to a single page using this module?

Yes, it is possible to add multiple before-after sliders to a single page using DiviGrid's before-after slider module. This allows you to showcase different comparisons and transformations on a single page, making it easier for your audience to explore your content. To add multiple sliders, simply add the before-after slider module to the page as many times as you need and customize each instance with your images and text labels. You can also adjust the settings for each slider individually. With this flexibility, you can create a unique and interactive user experience for your audience and effectively communicate the value of your work or products. Whether you're a photographer, designer, or marketer, the ability to add multiple before-after sliders to a single page can help you showcase your skills and build credibility with your audience.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/M0HF5tULNQ3lXRD74ePxsK6FbnnMzrdMjlAYbPtA.jpg)

#### What type of images can be used with Divigrid's before-after image?

DiviGrid's Before-After Image module supports most image formats, including JPG, JPEG, PNG, and GIF. However, it's important to note that the module works best with images that have similar dimensions and aspect ratios. Using images that are significantly different in size or shape may result in distortion or visual anomalies. It's also recommended to use high-quality images with good contrast and clarity for the best visual impact.

#### Is there an option to add captions to the before-after slider images?

Yes, you can add captions to the before-after slider images using DiviGrid's Before-After Image module. To add captions, simply go to the Content tab of the module settings and enter the text for the captions in the "Before Label" and "After Label" fields. You can customize the font size, color, and alignment of the captions using the available options in the "Font Styles" toggle in the Advanced Tab. Adding captions can help provide additional context to the images and highlight the changes made between the before and after versions.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/yKwSLObFHF0soC8HIzzYpvJzp2QskxfivLubIWwU.png)

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/KSSE1fZHdu8MByf3JaFpEOZ2VaAlCrxlUg5KNFRR.jpg)

#### Can I move the label text as I wish?

Yes, you can move the label text in DiviGrid's Before-After Image slider as per your requirement. In the Label settings, you will find two options to set the label position. One is for Before label position and the other is after label position. where you can choose your desired position of the slider handle. You can also adjust the label's font size, font color, and background color to make it more visually appealing and match your website's design. With these options, you can move and customize the label text as per your preference, making the slider more informative and engaging for your users.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/HJ2FQx9Bj1pePYWtq6i6wqaBc0G3m4TuB8o0NWiA.jpg)

#### Are there any customization options available for the appearance of the handles and labels?

Yes, DiviGrid's before-after image slider offers several customization options for the appearance of the handles and labels. You can choose the color, size, font, and style of the handles and labels to match your website's design. Additionally, you can set the position of the labels to be above, below, or to the side of the slider handles. With these customization options, you can create a before-after image slider that seamlessly integrates with your website's design and effectively showcases your images.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/TpWh8vHv7AZlLUrfuQxIsHwfGNu8nSgNZw0hd2Yd.jpg)

#### Can I move the handles by hovering over them instead of clicking and dragging?

You are correct, DiviGrid's before-after image slider does have the option to move the handles by hovering over them instead of clicking and dragging. This feature can be enabled in the content settings toggle under the "Move Slider on Hover" option for Handle Behavior. Turn on the switch to enable the hover option.

#### Is it possible to have an overlay of the slider?

Yes, it is possible to have an overlay on the slider in DiviGrid's before-after image module. The overlay can be customized with different colors, opacity levels, and blend modes to create various effects. You can add an overlay to the entire slider, depending on your preference. This feature is useful for adding text elements that enhance the visual impact of the slider and highlight the changes between the before and after images. With DiviGrid's before-after image module, you have the flexibility to customize the overlay to create the desired effect and make your images stand out.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/SUjwGwHOQ3XXb5MLmy1j22XcT6RS5iZ0RN80tx4G.jpg)

#### Are there any examples or demos of the image compare module in use that I can see before deciding to use it on my own website?

Yes, there are many demos and examples of the Before After Image module in use that you can check out before deciding to use it on your own website. Here is the Link: **https://divigrid.xyz/**

#### Is the Before After image module mobile-friendly and responsive?

Yes, the Before After Image module from DiviGrid is mobile-friendly and responsive. It is designed to work seamlessly on various devices, including mobile phones and tablets, without compromising on the user experience. The module automatically adjusts to fit the screen size of the device it is being viewed on, ensuring that the slider remains functional and easy to use. This feature allows you to showcase your work on different platforms and devices, making it accessible to a wider audience. So, whether your audience is viewing your website on a desktop, tablet, or mobile phone, they will be able to experience your before-after images without any issues.


# DiviGrid Blog Carousel


## Overview

In the fast-paced world of web design and content creation, capturing your audience's attention is paramount. One effective way to do this is by presenting your blog posts in an appealing way. Blog carousels, also known as sliders, have become a staple feature on modern websites, and for good reason. They allow you to display your blog posts in an interactive and dynamic way, making it easier for visitors to discover your content and stay engaged. Whether you want to showcase your latest articles, highlight featured posts, or add a touch of professionalism to your homepage, a DiviGrid blog carousel plugin is the solution you've been searching for.

### Blog Carousel Content Tab

After inserting the **DiviGrid Blog Carousel Module** you will find several new toggles along with the default toggles. Toggle names are listed below

1. **Settings**
2. **Element**
3. **Carousel Settings**
4. **Category Settings**
5. **Tag Settings**
6. **Divider**
7. **Item Order**
8. **Item Background**
 
**Settings: Customize your posts**

In the Settings tab, these toggles are valuable tools that provide you with the ability to fine-tune how your WordPress posts are displayed, organized, and styled. They allow you to ensure that your website's content aligns with your brand identity and objectives.

 

 

 

**Post Count:** The "Post Count" toggle is a simple but essential feature that allows you to decide whether or not to display the number of posts in a particular category, tag, or query result. Enabling this toggle adds a clear and concise count of the posts being showcased, providing valuable context to your audience about the quantity of content available.

**Display Post By (Recent, by Category, by Tag):** The "Display Post By" toggle is a versatile tool that empowers you to organize and present your content based on different criteria. You can toggle between "Recent" to showcase the latest posts, "by Category" to group posts under specific topics, or "by Tag" to highlight content associated with particular keywords or themes. This toggle offers flexibility in tailoring your content presentation to suit your website's objectives.

**Order By (Newest to Oldest, Oldest to Newest, Random):** The "Order By" toggle offers control over the chronological arrangement of your posts. You can choose to display content "Newest to Oldest" for a standard chronological order, "Oldest to Newest" for a reversed timeline, or "Random" to introduce an element of surprise. This toggle enhances your ability to curate content and engage your audience with diverse content exploration experiences.

**Meta Wrapper:** The "Meta Wrapper" feature offers you greater control and flexibility in how you display crucial post metadata, including categories, tags, dates, and authors. With a simple and intuitive interface, this feature empowers you to curate your post presentation to match your unique content strategy. When set to "Show," the post metadata will be prominently displayed alongside your content, providing context and organization.

**Category and Tag Separator:** The "Category and Tag Separator" toggle enables you to define how categories and tags are visually separated when multiple categories or tags are associated with a single post. You can customize this separator to match your website's style and layout preferences, ensuring a polished and cohesive presentation of your content.

In the Element tab, you have control over how your post is displayed. Adjust post content, use excerpts, show featured images, display publication dates, tags, Read More links, author information, categories, and more. Customize your post's appearance to match your content strategy and design preferences.

**Carousel Settings: Customize Your Carousel Display**

In your carousel settings, you have several key options to shape the carousel's behavior and appearance:

**Carousel Type:** Choose from various styles, such as "Slide," "Coverflow," "Flip," and "Cube," to determine how your carousel transitions between slides.

**Slides per View:** Specify how many slides are visible at once in the carousel, influencing the number of items shown concurrently.

**Item Space:** Set the spacing between individual carousel items to achieve the desired visual layout.

**Auto Play:** Enable or disable automatic slide transitions to make your carousel self-advancing.

**Enable Loop:** Decide whether your carousel should loop back to the beginning after reaching the last slide.

**Pause on Hover:** Control whether the carousel pauses its automatic movement when a user hovers over it.

**Use Keyboard Navigation:** Allow users to navigate through the carousel using their keyboard's arrow keys for enhanced accessibility and usability.

These carousel settings empower you to create an engaging and visually appealing user experience, tailored to your website's design and content requirements.

**Divider in Blog Carousel: Enhance Visual Separation**

Dividers serve as visual signposts, guiding your readers through your content. By choosing their placement based on item order selection, you can maintain a well-structured and organized post that suits your storytelling style. This dynamic approach to content structuring ensures that each post is unique

**Read More Text Field:**

The "Read More" text field is a valuable tool for content creators, particularly in blogs or news websites. It enables you to determine the specific text that appears as a clickable link or button, often used to encourage readers to continue reading a blog post or article. This customizable link text offers flexibility and helps you craft compelling calls to action, enticing visitors to delve deeper into your content.

**Item Backgrounds in Carousel Items:**

Item backgrounds within carousel items provide the background design of each slide or item in a carousel or slider. By customizing backgrounds with colors, and images. With this item's background options, you can add an image, gradient colors, and color in the each of carousel items.

### Blog Carousel Advanced Tab

**Layout:** there are two types of layout styles in the carousel. In Layout 1, post content is presented in a columnar arrangement, providing a clean and organized appearance. What sets Layout 1 apart is its flexibility; users can easily change the order of content elements within the column to suit their preferences. On the other hand, layout 2, the positioning of the featured image on the left side of the post content. and it will show one post at a time.

**Image overlay & Hover:** The overlay will work when the item hovers over. If the overlay is switched on, two colors will appear. One is primary and the other is secondary. There will be directions for combining the two colors. Also, icons can be used as extras on overlays. All icon styles can be done here. Image Hover Type is one of the unique features of the Divi post grid. there are many image hover types in the list. from the several types of image hover types, you can choose one of the best image scale types for your featured image. you can use the image hover type with or without overlay active. if you don't use overlay then the image hover type works only in the images.

**Alignments:** There are three types of alignment in this setting. The first alignment will work if the image is in the background. The contents can then be used to align the top, center, or bottom as desired.

The 2nd alignment is bound by a switch. Switching it on will reveal the alignment option. This alignment allows each item to be positioned at the top, bottom, or center. This allows images, metadata, and post content to be repositioned together.

The 3rd and last alignment is the alignment of the metawrapper data. How categories, tags, dates, and author data can be positioned can be decided. Metadata can be changed to left, right, center, or justified positions.

**Pagination Settings:** There are two types of pagination. Bullets and fractions. pagination is the most important part of the carousel. you can style your pagination. All the style settings are contained in the pagination settings tab.

## Common Questions about DiviGrid Blog Carousel

#### **1. How to add a featured image?**

If the post does not have a featured image, you can set or replace the featured image from the WordPress post's settings option.
If the featured image is set in the post, you can show that image as desired.
You can turn it off if you want. There is a switch in the element toggles of the Postgrid plugin called Show Featured Images.
From there the featured image of the post can be turned on or off.

 | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/MEyryGn4Wid6W9qFQsXtJsU58CPILmPj6lmTCljc.jpg) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/jmKIb9pgrmuzJppsv4gBNmxW37HR8IclJ6XtUu0z.png) |
|---|---|

#### **2. How to use the image as a background?**

"If your post includes a featured image, you have the option to use it as the background image in our plugin. To do this, follow these simple steps:

1. Access the image settings of your advanced tab.
2. Enable the 'Use Image As Background' switch.
 
Once activated, all items within the carousel will display the featured image as their background."


go to the plugin's Advanced tab --> image settings --> ON the switch " Use Image As Background".

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/ngyyMsV6Hd7BOgAMsWren0XEu3seE61ZxOl7rhxS.png)

#### **3. How to change meta data-position?**

All metadata can be repositioned by wrapping them together. 
First, the metadata should be switched on. Then open the Meta Wrapper switch from the settings toggle and select all metadata. 
Then the metadata can be changed to Left, Right, Center, or Justified position from the Alignment toggle of the Design tab.

#### **4. Can I change the position of individual metadata such as author, date, tag, and category?**

From the element toggle of the content tab, the switch of the meta-data you want to change the position of should be turned on. A new settings toggle will be enabled in the Content tab as soon as it is turned on. From there you can change the location of your desired meta-data.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/25E7tMC7yJlRetukT5R3mVj27qNg5MQdYFu9QUgM.png)

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/1aQt0JmCuRBPNTqB0SBWvlSUB2p51LYcEc8P92LY.png)

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/XgwQdO2QRzZyYPz5CT3cR9pCIs7QjYt1s3EwuFEZ.png)

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/6mnpBlaBZvKtzzhb77JmLoiI9iTjz1T8s2VcZbYO.png)

#### **5. How to change post content position?**

Go to the Alignment toggle on the Design tab. Here you choose to place the content wrapper at the top, center, or bottom, and If you want to change the position of the grid item, you can set the position to the top, 
center or bottom by turning on the item alignment switch.

#### **6. How to set the background image as a selected item?**

If you want to use the featured image of one or more items in the carousel as a background, 
you must turn on the Enable Individual Item Image As Background switch from the image Settings. Keep in mind that, when "Use image as background" switch is turned on then "Enable Individual Item Image As Background" switch does not show. You can define the item number which you want to use image as a background. The featured image of the defined numbers will show as a background.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/xUqv0dmWHHoo54Cbtn0ctOiZ6NWO54l8UHbSmco5.png)


# Divigrid Business Hour


Divigrid's Business Hours module provides accurate and up-to-date information about their operating hours. This module is perfect for displaying your business hours in a clear and organized way, making it easy for your customers to know when you are available. Streamline your customers' experience with Divigrid's Business Hours module, and never worry about displaying outdated information again.

#### How to use a separator?

Separators can be used to visually separate names and time periods, which is a helpful way to display business hours. Although not strictly necessary, it's a common practice to associate time with a workday or name to avoid confusion when there are multiple items. The Divigrid Business Hours module allows you to customize the width, height, and color of the separator, giving you control over the appearance of your business hours. Additionally, the module features a Separator Type option, allowing you to choose from different separator types, making it ideal for both user-friendly and tech-savvy individuals.

#### 
How to use a divider?

The Divigrid Business Hours module includes a Divider feature that enables you to present each business hour item separately, making it easier to read and understand. This feature is customizable, much like the separator, allowing you to adjust the divider's width and color to match your website's aesthetic. Additionally, you can select from different divider types available in the module's Divider Type option, giving you a range of choices to fit your specific needs.

#### 

What will happen if using start time to end time instead of just time?

The Start Time and End Time Switch in the Divigrid Business Hours module is a unique option that sets it apart from other Divi modules. This switch offers individual customization options for the start time, end time, and the small separator between them. With the Start and End switches, you can give different background fonts, colors, and other styling options to each, making your business hours module more unique and colorful.

#### What is the maximum number of grid columns I can use and why?

A maximum of three columns can be used in a row. Since there are devices of many widths today, a maximum of three columns can be used for responsive display on each device. Moreover, there is an option to set separate columns on each device.

#### What does 'Auto column set as per width' do?

Rather than setting the column separately for each device, turning this switch on will automatically make it device responsive. This will save time. Auto Responsive can be done with this switch without any code.

#### Can I customize the design of the business hours module?

Yes, you can customize the design of the business hours module. The module offers various options to change the appearance of the business hours, such as the color, font, and size of the text. You can also change the width and height of the divider used to separate the business hours items. In addition, the start time and end time switch allow you to individually customize the start time, end time, and the small separator between them with different font, color, and background options. This makes the business hours module more unique and visually appealing.

#### Is the business hours module mobile-friendly and responsive?

Yes, Divigrid's business hours module is designed to be mobile-friendly and responsive. This means that it will adapt to different screen sizes and resolutions, ensuring that it looks and functions well on mobile devices as well as desktops.


# Divigrid Header Layout Pack


Transform your website's design with our comprehensive Header Layout Pack for Divi. Crafted with precision and creativity, this pack offers a variety of stunning header designs that are not only visually appealing but also highly functional. Whether you're aiming for a minimalist look or a more elaborate layout, our header pack has something to suit every style and purpose. Perfect for web designers, developers, and anyone looking to make a bold statement with their website's header, this pack is your go-to solution for creating a lasting first impression.

## **01. Divigrid Header Layout Pack**

**Step 1:** Download the Divigrid Header Layout Pack from[ **Divigrid.**](https://divigrid.com/divi-header-layouts/)

**Step 2:** Extract the Files After downloading, you will find a .zip file named **Divigrid Headers json File.zip**. Extract this zip file to access the contents.

**Step 3:** After Downloading you will find two subfolder called **Divigrid Headers separate json File** and **One Click Import json File.

Divigrid Headers separate json File**

Explore the Folder Inside the extracted folder, you will find 6 subfolders, each representing a different category. Each subfolder contains individual header layouts, allowing you to upload and use a specific header without needing to import the entire pack.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/jRhBWH4MRQ93qf9F10RhgR0DQViUiaouC7Yap8hx.png)

**One Click Import JSON File**

To import all headers simultaneously, use this folder containing all our headers. Simply import the included JSON file via the Divi **Export/Import** option to access all the headers. Choose your preferred header and add it to your website effortlessly.

**Note:** **If you select the "Replace Existing Content" button, all your existing designed content will be erased.**

 

 

 

 

## **02. Importing the Headers into the Divi Library**

**Step 1: Open the Divi Library**

Navigate to your WordPress dashboard, and go to **Divi > Divi Library.**

**Step 2: Import the JSON File**

Click on the **"Import & Export"** button at the top of the page. In the import tab, click "Choose File" and select the extracted JSON file from the Divigrid Header Layout Pack. Then click "Import Divi Builder Layouts".
![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/NB6aaQf3ztEnIm5YWPfuy7sFqE3BWGQN6WJhUI8D.jpg)

**Step 3: Use Your New Headers**

Once the import is complete, you'll see the new header in your Divi Library. You can now add this header to your pages by selecting this from the library when building or editing a page.

## **03. Importing a Header in Your Theme Builder** 

**Step 1: Open the Theme Builder**

In your WordPress dashboard, navigate to **Divi > Theme Builder.**

**Step 2: Import the Header**

Within the new template, click on **"Add Global Header"** and then select **"Add From Library"**. Choose the header layout you previously imported into your Divi Library.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/CajToOe2sdm77vgFawHt8wPlFEzOqCGUWSxJlgk6.jpg)

**Step 4: Save Your Changes**

After selecting the desired header, click "Save" to apply the changes. Make sure to save the Theme Builder settings to ensure the header is active on your site.

Your new header is now live and integrated into your theme, enhancing your website's design and functionality.

## **04. Customizing the Header: Changing the Logo**

**Step 1: Identify the Header Type**

The method to change the logo depends on the specific header layout you are using.

**Step 2: Change the Logo in the Menu Module**

For headers that use the Menu Module:

* Open the Divi Builder and navigate to the header section.
* Click on the Menu Module to edit it.
* Go to the "Logo" tab within the module settings.
* Upload your own logo by selecting a new image from your media library or uploading a new file.
 
**Step 3: Change the Logo in the Image Module**

For headers that use an Image Module:

* Open the Divi Builder and navigate to the header section.
* Locate the Image Module used for the logo.
* Click on the Image Module to edit it.
* Upload your own logo by selecting a new image from your media library or uploading a new file.
 
**Step 4: Save Your Changes**

After making the necessary changes, click "Save" to apply the new logo to your header. Make sure to save and update your page or template to ensure the changes are live on your website.

## **05. Customizing the Header: Changing Colors**

Most of the header colors can be customized directly within the modules, rows, and sections. However, some colors are set in the Code Module. Here’s how to change them:

**Step 1: Change Colors in Modules, Rows, and Sections**

* Open the Divi Builder and navigate to the header section.
* Select the module, row, or section you want to customize.
* In the settings, go to the "Design" tab where you can change colors for backgrounds, text, borders, etc.
 
**Step 2: Change Colors in the Code Module**

* Switch to the Wireframe View in the Divi Builder to easily locate the Code Module.
    ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/pekrKI7co2i8yWGmJkxHdseffAxmdHGjTwcutOgw.jpg)
* Open the Code Module, where you will find CSS code that affects the header’s colors.
    ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/bPyeSgzScNJb5XiokcpSwCePpFE1IYXW0ilJ7qNw.jpg)
 
**Step 3: Locate and Edit the Color Codes**  
The relevant CSS for color customization is found between the comment lines /\* Colors / and / End Colors \*/. Here is an example of what the CSS might look like:

**Step 4: Modify the CSS Colors
![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/QSgByjunxHhuNPFo8nUl5KrQxqgdyN6yUXDIemz4.jpg)**

* **Red Mark Area:** Change the border-bottom to your desired dropdown menu line color.
* **White Mark Area**: Change the border-bottom to your desired dropdown menu arrow color.
* **Green Mark Area:** Change the collapsing mobile menu icon and background color.
 
**Step 5: Save and Apply Changes** 
After making the necessary changes, click **"Save"** to apply the new colors. Ensure that the updates are saved and your page or template is updated.

By following these steps, you can effectively customize the colors of your header to match your website’s design and branding.


# DiviGrid Honey Comb


Divigrid Honeycomb is a powerful tool that can help you showcase your image gallery on your website in a unique and stylish way. It's a module that allows you to easily create hexagon grids, making your gallery look like individual honeycomb cells.

You can choose from a variety of placement options, such as linkable images, content, title, icon, and descriptions. This gives you the flexibility to customize your grid and make it your own.

The module also ensures that your images are resized to fit seamlessly within the available space, creating a sleek and tidy look. With Divigrid Honeycomb, you can showcase your work in a polished and sophisticated manner on various websites.

In short, if you want a gallery that stands out from the rest, Divigrid Honeycomb is the perfect choice for you. 
Here is the demo image to give you an idea of what the honeycomb grid looks like

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/KpGfjA3ZD98HSkJFzgHmPnuxVoD4XRl1J8h4tkoR.jpg)

## HoneyComb Settings

#### How do styles work? 

Honeycomb style comes in two types, each with its unique way of working. The first type automatically arranges your grid items in a honey cell shape. The layout style depends on the number of grid items you have.
The second type allows you to create a triangle shape. You can create triangles with 4-3- 2 rows, as well as shapes with 4-3-4 rows. So, you have the flexibility to choose the shape that works best for your needs.

#### What does the "**Set Custom Height For Full Containe**r" switch do?

By default, the "Set custom height for entire container" switch is turned off in the Honeycomb module. When this switch is off, there might be some empty space under the grid items which can affect the overall look of your gallery. To fix this, you can turn on the switch which will automatically adjust the height of the container box based on the number of grid items. This will ensure that there is no extra blank space under the grid items, resulting in a cleaner and more polished gallery display.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/CLMvtmQUNHfMVyIOshTr46iQN7iTmm6bkNuvXGUs.jpg)

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/nQnYx3kmDbDO1Q3bKCn6d1Olg1K3wKwDDTYL9W0D.jpg)

#### How does the link URL work?

If you want to add a link to your product or images, simply enter the URL in the designated field. You can also choose whether the link will open in a new tab or not. Once you've added the link, your grid item will become clickable and users will be redirected to the desired website when they click on it. It's a great way to direct traffic to your product or website.

#### What contents can the user set on a grid item?

With Divigrid Honeycomb, users can enhance their website's visual appeal by adding titles, descriptions, and icons to each grid item. By using overlay colors, users can make their content stand out and direct their website visitors to specific links. This way, users can easily find out more about the product or service represented by the grid item, and also quickly find what they're looking for and get more information with just a click.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/6m0kfVzanx0hA0UeTgC5cbcbnc8YANSr3LqrtZLQ.jpg)

#### Does changing the column structure from one to two columns affect the honeycomb grid structure?

If you're using the first honeycomb style and change the column layout from one to two columns, the honeycomb grid will automatically adjust to fit the new layout. The grid items will form a neat two-column structure, filling up the space evenly. However, if you're using the second style, changing the column layout may cause the honeycomb grid to break. In this case, you can adjust the comb spacing to fix the issue.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/DT2Hap3gL4Xw6r3bXEj0AQ5zWY0jiikomvenrshq.jpg)

#### What will the pattern look like if the structure is changed to 3 columns or more?

If you use the first honeycomb style and switch from one column to three or more columns, the honeycomb grid will automatically adapt to the new layout. Grid items will form a three- or more-column structure, evenly filling the space below. If you switch from three columns to four or more columns, one grid item at a time will continue to take up space at the bottom. Grid items will adapt to the new layout. In this case, the second style will also change in the same way.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/6wYxTYGAK02Jxq6H5sfvEmreFTwi0sGwr64qiUDn.jpg)

#### What can be done with Comb Width & Comb Spacing?

By adjusting these values, you can change the appearance of the honeycomb grid, making the cells larger or smaller, and increasing or decreasing the spacing between them. It's important to note that changing these values may require additional adjustments to ensure that the grid is still properly aligned and visually appealing.

**Comb Width:** This attribute sets the width of each honeycomb cell. By default, it is set to 350px. This means that each cell will have a width of 350 pixels. You can adjust this value to change the size of the honeycomb cells.
**Comb Spacing:** This attribute sets the margin between each honeycomb cell. By default, it is set to a value of 10px. This means that there will be a margin of 10 pixels between each cell. You can adjust this value to change the spacing between the honeycomb cells.


# Divigrid Justified Gallery


The Justified Gallery module from DiviGrid offers multiple placement options, including as a lightbox on a specific website, on a page featuring a single image, via a media file, or as a clickable image leading to a custom URL. The module's design ensures that images in a justified gallery are resized to fit seamlessly into the available space, creating a sleek and tidy appearance that can be utilized on a diverse range of websites to showcase their work in a polished and sophisticated manner.
![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/qtfmUiCDkd1A6UD17SIht9utt1RJtETf7MFhyG04.jpg)

### Gallery Settings:

**How Row Height Works:** Row Height refers to the height of the row of images displayed in the gallery. The row height is determined by the height of the tallest image in the row, and all the other images in that row are vertically centered within that space. This creates a visually pleasing and balanced layout for the gallery, where images of varying heights are displayed in a way that looks harmonious.

**Last Row Settings**: Sometimes very few images come to the last row that may not look good. Set this setting to manage last-row images. **Justify** option will cover the entire row.

### **How The Filter Nav Switch Works:**

In the WordPress media library, you can assign categories to images. Categories show up as a navigation bar above images. You can turn off the navigation bar by flipping a switch.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/d3TOMKQxzJALqlUxNA75879EMOyc9RshG0U3EBjy.jpg)

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/3VrBhNTebP3oAqTpU91u546HUbOTiUQIT9aOYvwH.jpg)

**Lightbox**: If you select "Lightbox" the image will pop up. The background color of the lightbox can be changed.

**Media File**: Once the media file is selected, the image will open at its own URL।

**Attachment Page:** If the Attachment Page is selected, the image will open in a singular type page with its caption and description details. If desired, this page can also be designed differently.

**Custom URL:** If you want to take the user to a website by clicking on the image, then you have to write that specific URL from the custom URL field of the media library while uploading the image.

### **where do I write the custom URL?**

To write a custom URL, enter the specified URL in the Media Library DivGrid Custom URL field.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/8IIfptGN5yPlhbsffyyl3wfjBdV1OnnMsU3GtKsX.jpg)

**![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/uD5A02ucPRfYZeC2D91YY3K5jNVjzBfHpbAZeWQ4.png)**

### **How to add the caption and the description?**

When you upload an image to the media library or choose to upload a new file, you'll see a field next to each image where you can add a caption and description. Simply type in your desired caption and description for each image in those fields. If you choose not to provide any caption or description, they won't be displayed for that particular image in the gallery. So, it's completely up to you whether you want to include captions and descriptions for your images in the justified gallery.

### **How to show the Caption on the image?** 

To display captions, toggle the "Show caption on hover" switch to the on position. Additionally, there is another switch located below this option that allows you to display captions at all times. Enabling this switch will ensure that captions are always visible. To add a title or caption, enter the desired text in the caption field when uploading an image from the media library. Do not show the **Always Show Caption** switch if the **Show Caption on Hover** switch is not turned on.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/cltbhmJHLyZSsCekNrZ8U3UtkQPn7ptsMlSTq08T.png)

**![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/RDlHleOnD3wjS1FdFY5tXSiZ7jxDZZ9hXq2HABw8.jpg)**

### **How to show the Description on the image?** 

To display the description, the same steps have to be done, which was done during the caption text.


# Divigrid Masonry Gallery


The DiviGrid Masonry Gallery Module is a versatile tool designed to showcase images in a stylish masonry layout. This module offers dynamic image grids that automatically adjust based on the content, creating a seamless and visually appealing gallery. Whether you want to present a portfolio, a collection of images, or a photo gallery, the Masonry Gallery Module is a powerful solution that integrates smoothly with Divi.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/9waIW1sFOsVzqxUCwxTbBjbEJmjHt7Rs8W7fx1JD.jpg)

### How to Add a Module to Your Page

Once Divi Grid is activated, multiple modules are introduced to the Divi Builder. To add a module to a page, follow these steps:

**Create or Edit a Page/Post:** Open an existing page or post, or create a new one using the Divi Builder.
**Create or Edit a Row:** Add a new row or edit an existing one within the page layout.
**Add a Module:**

* Click the Add New Module button within the selected row.
* From the module list, select DG Masonry Gallery.

| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/kZRZZDejLMiMtjKRXPYUlEbUDnSZi9ZuFRuJHpe6.jpg) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/OsEbvHmJBXEwtr9mhIOUFza1knhRuBVyrxdbEVgr.jpg) |
|---|---|

## **Content Customization**

### **1. Upload Gallery Images**

Go to the **Content** tab >> **Upload Gallery Images** >> **Gallery Images** >> **Add Gallery Images**. It will open Media Library, and select the images you want to display in the Masonry Gallery.

### **2. Gallery Settings**


This section offers extensive options for controlling the layout and presentation of your images:

* **Image Size:** Choose the size of your images, ranging from thumbnail to full size. You can select predefined sizes or set custom dimensions to ensure a consistent visual style across your gallery.
* **Images in Row:** Determine how many images appear in each row, with options from 1 to 8. This setting allows you to create dense layouts with more images or spacious arrangements with fewer items per row.
* **Item Space-Between:** Adjust the spacing between images to control the compactness or spread of your gallery. Whether you prefer tightly packed images or a layout with generous whitespace, this setting offers precise control.
* **Filter Navigation:**
    
    
    * **Filter Nav Switch:** Toggle this option to enable a filter navigation menu above your gallery, allowing users to filter images by category.
    * **Hide All Filter Text Switch:** Hide the default "All" filter option if it’s not needed, giving a more focused user experience.
    * **First Nav Text Input Box:** Customize the label for the first filter category, ensuring it aligns with your content or branding.
    * **Random Image Load:** Enabling this setting will display your images in a random order each time the page loads, creating a fresh and dynamic gallery experience.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/aPWh5vZxL1Fmt0LX2IAs6ElzMJgrkjh5SFpICxpe.jpg)

### **3. Lightbox/Links**


Control how images behave when clicked, with a range of options for linking and lightbox presentation:

* **Link Options:** You can select the action that occurs when an image is clicked:
    
    
    * **Lightbox:** Opens the image in a lightbox for a closer view.
    * **Media File:** Links directly to the image file itself.
    * **Attachment Page:** Redirects to a page containing the image and additional information.
    * **Custom URL:** Set a custom link to any URL, making the gallery interactive and functional.
    * **No Link:** Disable linking entirely if you only want the images to be displayed without further action.
* **Lightbox Image Fit in Window:** Ensure that images opened in the lightbox automatically resize to fit within the user’s screen, providing an optimized viewing experience.

### **4. Pagination**

For galleries with many images, pagination options help manage loading and display by splitting content across multiple pages. You can control the number of images per page and style the pagination controls.

### **5. Overlay**

This setting allows precise customization through the selection of a primary and secondary color, along with control over the gradient’s direction. These options enable designers to create smooth, visually engaging transitions that align with their design preferences. The flexibility offered by these settings ensures a dynamic and polished hover effect. You can also adjust the opacity for a seamless hover experience.

### **6. Hover Settings**

The Masonry Gallery module provides two categories of hover effects, offering rich animation and interaction possibilities:

* **Directional Hover Settings**: These settings control the hover effects that animate based on the direction of the mouse movement:
    
    
    * **Image Rotate**: This applies a smooth rotation to the image when hovered over.
    * **Image Rotate (Odd and Even)**: Alternates the rotation direction for odd and even images in the gallery, adding variation.
    * **Image Blur**: Introduces a blur effect on hover for a stylized appearance.
* **Advanced Hover Settings**: More complex hover animations can be configured here, including border animations and content reveal:
    
    
    * **Hover Types**: Choose from six different hover types, each offering distinct visual effects.
    * **Border Animation**: 19+ animated border transitions that play when an image is hovered over.
    * **Image Hover type:** The Masonry Gallery module offers over 10 image hover animations, such as pan left, pan right, zoom, and more. When hovering over images, these effects add dynamic motion and visual interest. Simply select the desired hover type from the available options and preview the results to see the differences in action.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/L745Ff25JAbMMz2VrRCbQKzxX0oxUn73UaFuHneA.jpg)

Additionally, you can fine-tune hover content behavior:

* **Content Space**: Adjust the padding around content displayed on hover, ensuring it aligns well within the image area.
* **Content Position**: Choose where hover content appears (top left, center, bottom right & more) for optimal layout.
* **Show Caption on Hover**: Enable captions that appear only when hovering over an image.
* **Caption Reveal**: Select from 12 unique reveal effects for captions, such as sliding in, fading, or zooming.

## **Design Customization**

The Design tab focuses on styling and appearance, allowing you to customize every visual detail of your gallery for a polished and cohesive look.

**Font Styles**
Control the typography of text elements like captions and descriptions:

* Customize font family, weight, style, and size.
* Adjust line height, letter spacing, and text alignment.
* Choose colors that align with your overall design scheme.

**Image Styling**

* Customize the appearance of images using the following options:
* **Border**: Set border styles to define the outline of images.
* **Box Shadow**: Apply shadow effects to add depth and dimension.
* **Image Hue**: Adjust the hue to alter the color tone of images.
* **Image Opacity**: Control transparency to achieve various overlay effects.
* **Image Blend Mode**: Choose blend modes to control how images interact with backgrounds and overlays.

**Filter Buttons & Active Filter Buttons**
Style the filter buttons to align with your design by adjusting:

* **Alignment**: Position filter buttons as needed.
* **Background**: Customize the background color and hover states.
* **Font Styles**: Set the typography for filter button text.
* **Borders**: Apply border styles to define the button edges.
* **Box Shadow**: Add shadow effects for a 3D appearance.

| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/NkLBhKSzrTWd9fx3xO7bRm7wWtgLOZynHoLPPaxj.jpg) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/tngYWp4OO08gTzjRkLWxHxt4OCvSOcMDx21oNA58.jpg) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/9k8cM8vtlXObwjJERAqyWdXqr7lJUDZl7360s2Ne.jpg) |
|---|---|---|

###  **Lightbox**

The Lightbox feature enhances the viewing experience by providing a pop-up window for images. Customize the lightbox with the following settings:

* **Overlay Color:** Choose the background color of the lightbox overlay, which appears behind the image and can affect the overall contrast and focus.
* **Tools Background Color:** Set the background color for the lightbox navigation tools (e.g., download, share) to ensure they blend with or contrast against the overlay.
* **Tools Color:** Customize the color of the lightbox navigation tools to enhance visibility and match your design theme.
* **Arrow Color:** Adjust the color of the navigation arrows within the lightbox to make them stand out or blend seamlessly with the overall design.
* **Lightbox Title Show Switch:** Toggle this option to display or hide the title of the image within the lightbox.
* **Title Style:** Choose from four title styles to fit your design: 
    * Pill: Rounded edges with a pill-like appearance.
    * Transparent: A clear background with text only.
    * Bar: A solid bar with the title text.
    * Block: A block-style background with the title text.
* **Preloader Type:** Select from 10 different preloader animations to display while the lightbox image is loading. Options are (Plane, Chase, Bounce, Pulse & more)

### **Pagination ( Normal & Active )**

The Pagination settings control the appearance and spacing of pagination controls used for navigating through multiple pages of gallery images:

* **Background Color:** Set the background color for pagination buttons to ensure they are clearly visible and complement your gallery’s design.
* **Text Color:** Customize the color of the pagination text for clarity and consistency with your overall color scheme.
* **Border Color:** Define the color of the borders around pagination buttons to enhance their visibility and styling.
* **Padding:** Adjust the padding inside pagination buttons to control the spacing between the button text and its edges, ensuring a balanced appearance.
* **Spacing:** Set the spacing between pagination buttons to provide adequate separation and improve usability.

## Some Common FAQs About Masonry Grid Module

### **How can I control the number of images displayed in each row?**


In the Gallery Settings section of the Content tab, there is an option called Images in Row. You can choose to display between 1 and 8 images per row, allowing you to create a compact or spacious gallery layout.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/c3NVNuWzj2ejwiFGMjnareYGGdxEsTVCCjpklppU.jpg)

### **Can I categorize and filter images in the gallery?**


Yes, you can enable filter navigation in the Gallery Settings by toggling the Filter Nav Switch. This adds a filter menu above your gallery, letting users view images by category. You can also customize the filter labels and hide the default "All" filter if needed.

### **What hover effects can I apply to images in the gallery?**


The module offers two types of hover effects: Directional Hover Settings and Advanced Hover Settings. Directional hover settings include options like image rotation and blur, while advanced hover settings provide more complex animations such as image hover type (12 image hover type) border transitions and multiple contents reveal effects.
**Go to Hover Settings >> Select Hover types >> Customize style as you desire.**

### **Is it possible to randomize the order in which images load?**


Yes, you can enable the Random Image Load option in the Gallery Settings. This feature shuffles the order of the images each time the page is loaded, creating a fresh viewing experience. **Go to Gallery Settings >> Turn ON Random image load switch.**

**![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/Em3qGNIEDipbklnLxE2dEqmbEnoNxafnKxB5gobh.jpg)**

### **How can I ensure that the lightbox images fit properly on all screen sizes?**


The Lightbox Image Fit in Window option ensures that images opened in the lightbox resize automatically to fit within the user’s screen, providing an optimal viewing experience across devices. **Go to Lightbox/Links >> Turn ON Lightbox Image Fit in Window Switch**

### **Can I customize the captions displayed on hover?**


Yes, in the Hover Settings, you can enable captions to display on hover and choose from 12 different captions to reveal effects. You can also adjust the caption’s font style, positioning, and space to fit your design preferences.

| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/0j5D3ad5OicMMY9HrRACtg1oYNr1nPlcJyKpvv0K.jpg) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/NqzLt14Y4LXdH4NzhA53FYjqqMbm2LlzYxYNIl2t.jpg) |
|---|---|

### **What types of image sizes can I choose for the gallery?**


You can select from predefined image sizes such as thumbnail, medium, large, or full-size. Additionally, you have the flexibility to set custom dimensions, ensuring consistency and a balanced visual style within your gallery.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/GJVHUtecBwRXLv6j00euBLBa3iwRyVLbdj57zCgH.jpg)

### **How do I control the spacing between images in the gallery?**


In the **Gallery Settings** of the Content tab, there is an option called **Item Space Between**. You can adjust this setting to increase or decrease the gap between images, allowing for either a tighter or more spaced-out layout.

### **What happens if I disable the lightbox option?**


Disabling the lightbox option in the **Lightbox/Links** settings will prevent images from opening in a pop-up window. Instead, depending on your link choice, images can either link directly to a media file, attachment page, or a custom URL or have no link at all.

### **Can I display content on hover that’s different from the image itself?**


Yes, within the **Hover Settings**, you can enable and configure different content to show on hover, such as captions, buttons, or other elements. You also have options to control the content position and reveal effects.

### **What are the different caption reveal effects available?**


The Masonry Gallery module offers 12 unique captions reveal effects, including sliding in from different directions, fading, zooming, and more. These options allow you to create dynamic visual transitions that enhance the user experience.

### **Is there an option to always show content on mobile devices?**


Yes, within the **Hover Settings**, you can enable the option to always display content (such as captions) on mobile devices. This ensures that important information remains visible even when hover effects aren’t triggered on touch devices.

### **where do I write the custom URL & categories?**

To write a custom URL, enter the specified URL in the Media Library DivGrid Custom URL field.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/9c0r5WLGQEZUGgnD1lwsFDhLSbLqBVgfjWylzj06.jpg)

### **How to add the caption and the description?**

When you upload an image to the media library or choose to upload a new file, you'll see a field next to each image where you can add a caption and description. Simply type in your desired caption and description for each image in those fields. If you choose not to provide any caption or description, they won't be displayed for that particular image in the gallery. So, it's completely up to you whether you want to include captions and descriptions for your images in the justified gallery.


# DiviGrid Social Share


The DiviGrid Social Share module is an innovative and user-friendly tool designed to enhance the social media sharing experience for content creators on the web. Tailored specifically for users of 18+ social media platforms, this module empowers individuals to effortlessly share their blogs, articles, and content across various social networks.

## Add The Module To Your Layout

Once you've determined the module's placement, proceed to integrate it into your Divi Builder layout. In the Divi Visual Builder layout, initiate the addition of a new module by clicking the gray plus button. Expedite the process by utilizing the search bar and entering "social" to promptly locate our custom module titled "DG Social Share." Upon identification, select the module, and seamlessly incorporate it into your layout.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/0ij0rbMQyNnWZKmCNH0rO6kLsjTwNciZkiuQTjpp.png)

## Add Social Network Buttons

Upon adding the module to your layout, your initial task is to include the specific social networks you wish to showcase. Navigate to the main Content tab of the module, where you'll find a plus button for adding new networks. As you incorporate new networks, they will be displayed in a list format, allowing you the flexibility to rearrange them according to your preferences. For further customization, simply click on each individual network to access and edit its settings. This step ensures that the module aligns precisely with your chosen social media platforms and allows you to fine-tune each network's presentation as needed.

 | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/coUia6OERvYUSxviVxPRB2lZLM2Cpj0Yj0wmWwx9.png) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/PCcvUzACRGonlP25wbSb527pxP8zzKJlyBV5rgZ9.png) |
|---|---|

## Choose A Layout And Placement Option

Following the addition of your preferred social networks, the subsequent crucial step involves selecting the desired layout option to showcase the buttons. The module provides two distinctive button layout choices: modern and classic. Depending on your preference between these layouts, you can then proceed to determine the horizontal and vertical placement of these social share items. Below this configuration, additional options will emerge, allowing you to fine-tune and customize the appearance of the social share buttons according to your design preferences. This pivotal step ensures that your chosen layout seamlessly aligns with your aesthetic vision, offering a tailored and visually appealing presentation of the social sharing buttons.

 | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/iJEj1uj7DqqnrheDFHoBTXaMC6MHYYakdA9b9OYu.png) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/PXedQupQcBeLcgarQi5yBzMVAFmU0uqdLUY4hGm3.png) |
|---|---|

After incorporating your selected social networks and determining the layout, another significant aspect to consider is the number of buttons per row. This parameter allows you to control the arrangement and density of the social sharing buttons within each row. Whether you aim for a streamlined, single-button-per-row design or a more condensed multi-button layout, adjusting the buttons per row setting empowers you to achieve the optimal visual presentation. This level of customization ensures that the module aligns precisely with your preferred design aesthetics and provides a harmonious integration of social share within your layout.

## Leveraging Title, Share Text, and Icon Switches

The Show Title switch empowers you to toggle the visibility of titles associated with each social network. Activate it to display titles and provide additional context for your users, or deactivate it for a cleaner, minimalist appearance.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/IrEk1NHnMdIjoVEfMCrf8S7fJeVbakvBOcimBK1g.png)

The Show Share Text switch allows you to control the visibility of accompanying share text for each social network. Turn it on to include descriptive text with your buttons, providing users with more information, or turn it off for a sleek and concise presentation.

The Show Icon switch governs the display of icons associated with each social network. Activate this switch to showcase recognizable icons alongside your buttons, enhancing visual appeal and aiding in quick identification. Alternatively, switch it off for a text-only approach.

## Adjust The Alignments

Navigate the visual intricacies of your social sharing module with precision through three key alignment controls. First, the Content Alignment option allows you to strategically position titles and share text, ensuring optimal readability and visual coherence. Next, fine-tune the presentation of social media icons with the Icon Alignment setting, selecting between centered, left-aligned, or right-aligned orientations for a polished appearance. Lastly, the Button Alignment feature provides flexibility in placing the social sharing buttons, allowing you to achieve a centered, left-aligned, or right-aligned arrangement that seamlessly integrates with your overall design aesthetic. These alignment controls empower you to create a visually cohesive and engaging user experience, aligning content, icons, and buttons precisely according to your design preferences.

 | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/l4EJSC48l0Pn9IoOp6LwJV3oYo4jKIxVOu0PwMqO.png) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/I3m1PhGSt3zj6NkGBDOtNsOlKXoYgoBI5TS6hunm.png) |
|---|---|

## Adjust The Design Settings

Now, you have the creative reins to tailor every design facet of the module to your exact specifications. The wealth of design settings we offer aims to provide you with a comprehensive toolkit, encompassing hundreds of possibilities. Whether you wish to personalize the text, alter the icon and button sizes, experiment with colors, adjust spacing, and borders, or implement box shadows, these customization options abound. Most of these settings are conveniently located in the module's dedicated Design tab, though some may be distributed across other tabs.

 | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/RNBKLrgJ4JHjAIciAvOBZ4wrofybVTdfsSWfMKQq.png) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/96ayoFrFqGnhK6SzgoIXxFxCuyIschLEXfc8G44v.png) |
|---|---|

Notably, the module features main content and design tabs that exert a global influence on all buttons, ensuring consistent styling. Simultaneously, each individual network within the module possesses inner tabs, granting you the flexibility to override global settings and refine the appearance of each button independently. With this extensive array of design options, your social sharing buttons can seamlessly align with your unique vision and website aesthetics.

## Ensure Everything Responsive

The Divi Social Sharing module seamlessly integrates responsive settings, aligning with the adaptable nature of other modules within the Divi Builder. This empowers you to fine-tune values and options independently for Desktop, Tablet, or Phone, allowing for a tailored user experience across various devices. The flexibility is yours to decide whether your layout or design necessitates responsive adjustments. While some settings remain harmonious across devices, others benefit from individual adjustments to optimize the user interface. The extensive range of customizable options spans from colors, font sizes, and icon sizes to layout structure, number of columns, button border color, background color, and more. Your creative control is virtually boundless, enabling you to curate a responsive and visually appealing presentation of your social sharing buttons that aligns seamlessly with your website's design vision.

#### **🔴 How Can I Find My Facebook App ID** 

**✔️** Before You can implement any product of Facebook APIs, you must first **[Register](https://developers.facebook.com/apps)** as a Facebook Developer and App Dashboard to provide information about your app. Log in first**[ Facebook App Dashboard](https://developers.facebook.com/apps)**. First Register your Facebook Developer ID and then you will create an app. After that, you will find your app ID.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/9ZtgYzStksT6dTzf4VCdBtOttvapbJ4ux06y6bux.png)


# DiviGrid VAT Handling via Paddle: User Guide


## Overview

When purchasing the DiviGrid plugin, Paddle’s payment system can automatically apply your VAT number to deduct VAT from the purchase price. This guide walks you through entering your VAT number in Paddle so that:

* **VAT is correctly deducted** from your order
* **Your final charge** reflects the net amount (e.g. $99 for DiviGrid)

## Prerequisites

* A valid **EU VAT number** (or equivalent local VAT/GST registration number)
* An active **DiviGrid license** purchase in Paddle’s checkout flow

## Step-by-Step Instructions

**Visit the DiviGrid Purchase Page**
Navigate to the DiviGrid Checkout page and click **Buy Now** **or Purchase.**

1. **Enter Your Billing Details**
    In the checkout window, fill in your name, email, and billing address fields.
2. **Locate the “Add VAT Number” Field**
    You will see an input labeled **VAT Number** (or **Tax ID**).
3. **Enter Your VAT Number**
    Paste your full VAT registration number (including country code, e.g. GB123456789) into the field.
4. **Verify Automatic VAT Deduction**
    After entering your VAT number, the order summary on the right will refresh. You should see:
    
    
    * **VAT line item** change to zero or disappear
    * **Total due** update to the net price (for example, $99)
5. **Complete the Purchase**
    Click **Pay Now** to finalize. Paddle will process the transaction without VAT.

![BlockNote image](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/Ll1EJOvgiAWjnyRpRxPiRe8YbRI2FwGDRtIH0hIJ.jpg)


# Facebook Modules


Effortlessly engage your audience with our advanced Facebook Integration Modules for Divi, crafted to seamlessly embed Facebook functionalities into your website. Whether you want to showcase your Facebook page, encourage likes, or facilitate easy content sharing, these powerful modules offer extensive customization options and responsive design. Tailored to align with your brand identity and audience preferences, our solution ensures a smooth integration of Facebook’s dynamic features, enhancing user interaction while preserving the aesthetic integrity of your site. Elevate your online presence with social connectivity, driving more engagement and visibility with ease.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/te0cAivOGRdVgexpAt9PpTSYabOHpfokrpTRgv1M.png)

In this documentation, we'll dive into the various settings available of the facebook modules, and how you can customize these settings to create visually consistent and professionally designed facebook layouts.

## Facebook Page

The **DG Facebook Page Module** offers seamless integration for embedding a Facebook page directly on your website. This documentation provides a detailed, user-friendly guide for configuring and styling the module to align with your design needs and functionality requirements.

---

### Module Setup: Inserting the Facebook Page Module

1. **Insert Module**: Add the DG Facebook Page module to your page by selecting it from the module options.
2. **Accessing Settings**: Once inserted, navigate to the **Content** tab. Here you’ll find key settings organized into the following sections: 
    * **FB Page Settings**: Configure the Facebook page URL and display settings.
    * **Configuration**: Customize width, tabs, and visibility options.
    * **Background**: Adjust background colors or images to enhance visual integration.
    * **Admin Label**: Rename the module for internal organization purposes.

---

### FB Page Settings: Adding Your Facebook Page

1. **Insert Facebook Page URL**:
    
    
    * Navigate to **FB Page Settings**.
    * Locate the **Facebook Page URL** field.
    * Insert the complete URL of the Facebook page you wish to display.
2. **Adjusting Page Height**:
    
    
    * Still in **FB Page Settings**, find the **Height** field.
    * Enter the desired height or use the slider to adjust for an optimal display.

---

### Configuration: Advanced Display Customizations

**1. Adjusting Width**

* Go to **Configuration** settings and locate the **Width** field.
* Specify a custom width or adjust as necessary to fit your layout.

**2. Displaying Facebook Page Events**

* In **Configuration**, navigate to the **Facebook Tabs** field.
* Select **Events** to display any upcoming or past events linked to your Facebook page.

**3. Enabling User Messaging**

* Within **Configuration**, locate the **Facebook Tabs** dropdown.
* Select **Messages** to allow users to send direct messages via the Facebook page module.

**4. Displaying Followers’ Profile Pictures**

* In **Configuration**, toggle **Show Face Pile** to **YES** to showcase your page’s followers.

**5. Hiding the Cover Picture**

* To simplify the display, set **Hide Cover Picture** to **YES** in **Configuration**.

**6. Compact Header with Like Button Display**

* To display a small header featuring a Like button under the page title, go to **Configuration** and set **Display Small Header** to **YES**.

**7. Hiding CTA and Enabling Share Button**

* In the **Configuaration** settings, set **Hide CTA** to **YES** to replace the CTA button with a share button.

**8. Enabling Lazy Loading**

* Enable **Lazy Loading** by going to **Configuration** and setting it to **YES** to optimize page performance.

---

### Design Tab: Customizing Alignment and Visual Styling

To adjust the positioning of the Facebook page module within your design:

1. **Change Alignment**: 
    * Go to the **Design** tab.
    * Locate **Alignment** settings.
    * Choose from available alignment options to best fit your page layout.

---

This DG Facebook Page Module documentation provides everything needed for effortless setup, customization, and optimization. Explore each setting to fully leverage the module’s capabilities for a smooth Facebook integration.

## Facebook Like Module

The **DG Facebook Like Module** enables you to add a highly customizable Facebook Like button to your webpage, allowing users to like or recommend your content directly from your site. This documentation provides detailed, user-friendly guidance for configuring and enhancing the Like button module to meet your design and functionality needs.

---

### Module Setup: Inserting the Facebook Like Module

1. **Insert Module**: Begin by adding the DG Facebook Like module to your page.
2. **Accessing Settings**: Once added, navigate to the **Content** tab. Here, you’ll find a variety of options for personalizing the module: 
    * **FB Content Settings**: Configure URL settings and lazy loading.
    * **Like Button**: Customize the button style, layout, and additional display options.
    * **Background**: Adjust background colors for visual integration.
    * **Admin Label**: Rename the module for easy identification.

---

### FB Content Settings: Configuring the Like Module’s URL and Color Scheme

1. **Setting the Share Button URL**:
    
    
    * Navigate to **FB Content Settings**.
    * In the **Page URL** field, insert the URL of the page where you’ve added the module.
        *Note: Only required if the Share Button option is enabled (see Step 8).*
2. **Enabling Lazy Loading**:
    
    
    * In **FB Content Settings**, set **Enable Lazy Loading** to **YES** to optimize page performance by delaying loading until needed.
3. **Selecting a Color Scheme**:
    
    
    * Change the button color from **Light** to **Dark** (or vice versa) by adjusting the **Color Scheme** setting within **FB Content Settings**.

---

### Like Button Settings: Button Type, Layout, Size, and Share Display

1. **Selecting the Action Type**:
    
    
    * Go to **Like Button** settings within the **Content** tab.
    * Under **Action Type**, choose between the **Like** or **Recommend** button options.
2. **Changing Button Layout**:
    
    
    * In **Like Button** settings, go to **Layout** and select from four available layouts: **Standard, Button, Button Count,** and **Box**.
3. **Adjusting Button Size**:
    
    
    * Within **Like Button** settings, go to **Button Size**.
    * Choose between **Small** or **Large** for the button size.
4. **Displaying the Share Button**:
    
    
    * If you want to include the Share button alongside the Like/Recommend button, navigate to **Like Button** settings.
    * Set **Display Share Button** to **YES**.

---

### Design Tab: Customizing Button Alignment

1. **Aligning the Button**: 
    * Go to the **Like Button** tab and locate the **Alignment** settings.
    * Select the alignment option that best suits your page layout.

---

This comprehensive guide covers all configuration and customization settings for the DG Facebook Like Module, making it easy to enhance user engagement directly from your site. Explore each setting to fully optimize the module for a seamless, engaging user experience.

## Facebook Share Module

The **DG Facebook Share Module** allows you to embed a customizable Facebook Share button directly onto your webpage, enabling visitors to easily share your content on their Facebook accounts. This documentation provides a comprehensive guide for configuring and personalizing the Share button for an optimal user experience and seamless integration.

---

### Module Setup: Inserting the Facebook Share Module

1. **Insert Module**: Add the DG Facebook Share module to your page from the module selection menu.
2. **Accessing Settings**: Upon insertion, go to the **Content** tab to access settings for personalizing the module: 
    * **FB Content Settings**: Configure the URL and enable lazy loading.
    * **Share Button**: Adjust the button layout and size.
    * **Background**: Customize the background to match your design.
    * **Admin Label**: Rename the module for internal tracking and organization.

---

### FB Content Settings: Configuring the Share Button URL

1. **Setting the Share Button URL**: 
    * Navigate to **FB Content Settings**.
    * In the **Page URL** field, enter the URL of the page where the module is used. This URL will display on users' Facebook accounts when they share the page.

---

### Share Button Settings: Layout, Size, and Display Options

1. **Changing the Share Button Layout**:
    
    
    * Go to **Share Button** settings in the **Content** tab.
    * Under **Layout**, select from three layout options: **Button, Button Count,** or **Box Count** to match the style of your website.
2. **Adjusting the Button Size**:
    
    
    * In the **Share Button** settings, locate **Button Size**.
    * Choose either **Small** or **Large** to set the size of the Share button as per your design requirements.
3. **Enabling Lazy Loading**:
    
    
    * To improve performance, enable **Lazy Loading** by navigating to the **Share Button** settings and setting it to **YES**.

---

### Share Button Alignment: Customizing Placement on the Page

1. **Adjusting Alignment**: 
    * Go to the **Share Button** tab, then to **Alignment**.
    * Choose an alignment option that best fits the module within your page layout.

---

This documentation provides step-by-step instructions to set up and customize the DG Facebook Share Module, making it easy to create an engaging, user-friendly social sharing experience on your site.


# Food Menu


The Divigrid Food Menu module is a powerful and flexible tool for restaurant and cafe websites, providing a customizable and visually appealing way to display menu items. Through both individual item customization and global styling options, this module ensures that your menu not only looks professional but also aligns perfectly with your branding. With its comprehensive customization capabilities for images, fonts, buttons, and badges, this module elevates your menu design to the next level.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/Tummf4s0YOKjiVeGXKMRV5jEgimsYZKWLPXPfkij.jpg)

## **Food Menu Item Customization**

***(Single Item Customization)***

The Food Menu Item focuses on the customization of a single food entry in your menu. This flexibility allows you to showcase each menu item’s details, such as its name, description, and price, with precision. Additionally, you can add special promotional badges, customize icons, and apply styling to make each item stand out.

### **Content Tab Customization for Food Menu Item**

The Content Tab is the primary section where you input the core information for each menu item, such as text, pricing, and imagery.

#### Content Section:

**Food Title:** This field allows you to enter the name of the food item, which is usually the most prominent text in the item box. The title is one of the first things visitors see, so it needs to be clear and prominent

**Food Title Tag**: Select the HTML heading tag (H1, H2, H3, etc.) for the title, useful for SEO and structuring your content.

***\[ Use H2 or H3 tags for food titles as it balance visual hierarchy while maintaining SEO best practices. \]***

**Food Subtitle:** A space for additional information like a brief description, ingredients, or dietary information. The subtitle provides more context about the food item without cluttering the description.

**Food Subtitle Tag:** Choose the appropriate HTML tag (H1-H6, paragraph, etc.) for this subtitle.

**Currency & Price:** Input the currency symbol and the price of the food item, such as "$12.99." This field pairs directly with the food title, so users can immediately see the cost of each item.

| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/pqbsxseeVT5pEyg22xBjqiiIUInr3tV0fea24g1x.jpg) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/oqDsMbMkWu214qAj1nN6O2dlPdsKVPGOlZG9xpsD.jpg) |
|---|---|

**Description:** Here, you can describe the food item in more detail, such as ingredients, preparation style, or any unique attributes. A detailed description helps customers make informed choices and adds personality to your menu.

**Button Options:**

* **Button Text:** This allows you to define a call-to-action (CTA) text like "Order Now" or "View Details."
* **Button URL:** Input the URL to which the button should direct users.
* **URL Opens (Same Window or New Window):** Decide whether the link should open in the same tab or a new tab.
    
    ***\[ If you’re linking to an external page or a third-party service, set it to open in a new window to keep users on your site. \]***

**Use Badge Switch:** Enable this if you want to display a badge on the food item, such as "Best Seller" or "New Arrival."

* **Badge Text:** The text for the badge can be fully customized based on the promotion or special event, like “20% Off” or “Chef’s Choice.”

#### Image & Icon Section:

In this section, you control the visual elements that accompany the food item—either an image or an icon.

**Use Icon Switch:** This toggle allows you to use an icon instead of an image to represent your food item. If this switch is enabled, the image field disappears, and an icon selection appears. You can select from Divi's built-in icons or use Font Awesome to represent your item.

| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/kI4hyZRa7aKbumen7FJKYlqojLWCeXl947KzQ9uk.jpg) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/yBhmgveUE1zM0UT4slabyJvdZGrXTlxwqDUjDIQO.jpg) |
|---|---|

**Image Upload Field:** If you choose not to use an icon, this is where you upload an image representing the food item. Food images are a critical selling point for restaurants, helping entice visitors with visual appeal.

**Image Alt Text:** Enter alternative text for the image. Alt text is crucial for accessibility and SEO, describing the image content for screen readers and search engines.

#### Settings Section:

This section offers settings for adding separators and dividers, enhancing the layout and structure of each food menu item.

**Show Separator Switch:** Separators help visually distinguish between different pieces of information, creating a clean and organized layout. Enable this switch to add a separator between the food name and price.

**Show Divider Switch:** Dividers help break up content visually, making your menu easier to scan for users. This switch adds a divider between the food name/subtitle and the description.

## **Design Tab Customization for Food Menu Item**

The Food Menu Item Design tab provides granular control over the appearance of each individual menu item. Here’s a detailed look at the available customization options:

| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/OepBdv56FwY3KTkSSDmTzE4sWqOP3zME8cGeU0Fc.jpg) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/GEkn3E6VJq8Mt66PKQLrZ4oMMzqcDWGSKDS2xtPu.jpg) |
|---|---|

#### Alignment

You can align the content of each menu item to the top, center, or bottom of its container. This ensures that the content is positioned exactly where you want it within the item’s area.

#### Image & Icon

**Image Width and Height:** Adjust the dimensions of the images used in your menu items to fit your design needs. This setting allows you to specify the exact width and height for each image.

***\[ Be consistent with image sizes to avoid a messy, uneven look. \]***

**Icon Size:** Control the size of the icons used in your menu items. Larger icons can draw attention, while smaller ones can provide a subtler visual cue.

**Icon Color:** Choose the color of the icons to match your menu’s theme. You can select any color from the color palette or use custom hex codes.

| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/I4WPmBTALyHDmurLSJ7aakoEkAHHec6LzfsY2F0k.jpg) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/TICz5TwD7dda9ygSYKnmDfysZlAJt8wvyow2ddrJ.jpg) |
|---|---|

**Icon Background:** Customize the background of icons with color, gradient, or image options. This setting allows you to create visually distinctive icons that stand out on your menu.

**Image/Icon Spacing:** Define the space around images and icons to ensure they are appropriately separated from other content elements.

**Image/Icon Border Styles:** Apply borders to images and icons with customizable styles, including width, color, and type (e.g., solid, dashed).

**Image/Icon Box Shadow:** Add shadows to images and icons to give them a three-dimensional effect. This can enhance visual hierarchy and focus.

#### Font Styles

Typography is key in maintaining the readability and aesthetics of your menu, so selecting the right font and style is critical. You can customize the font family, size, weight, style, alignment, color, line height, and letter spacing for each text element (title, subtitle, and description).

**Price Text:** You can apply similar font options (font size, style, color, etc.) to the price and currency text, ensuring it stands out while staying consistent with the rest of the design.

#### Badge Settings

**Badge Position:** Badges are typically used for special promotions or best-selling items, and placement can make these more noticeable..Choose from 10+ different positions to place the badge, like top-left, top-right, or center.

**Badge Rotation:** Add a rotating effect to the badge for an extra visual appeal.

**Badge Background:** Set the badge’s background to a solid color, gradient, or image for enhanced styling.

**Badge Spacing:** Control the padding and margin around the badge to ensure it doesn’t overlap other content.

**Badge Border & Box Shadow:** Apply borders and shadows to define the badge further.

#### Wrapper Settings

**Wrapper Background:** Customize the background of the content wrapper using solid colors, gradients, or images.

**Wrapper Spacing:** Adjust padding and margins to create sufficient breathing room around the content.

**Wrapper Border & Box Shadow:** Add a border or box shadow to the wrapper to separate it from the background or other elements on the page.

#### Separator & Divider

**Width & Height:** These settings allow you to define the exact dimensions of your separators and dividers. The width determines how long the line will be across the screen, while the height sets the thickness of the line. Adjusting these values can help the separator stand out or blend more subtly, depending on your design needs. For example, you might want a bold, thick line to separate sections or a thin, minimalist line to create subtle divisions.

| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/Dr8xpRIpD5DViijg8x4oRcn2QPrU3i1QHHELIQvd.jpg) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/x7GW45uioKCDMBAS6Jv0dGRLVLhh7nIfJIUCbvEz.jpg) |
|---|---|

**Color:** This option lets you choose the perfect color for your separator or divider. You can match the line color to your website’s theme or menu design, ensuring a cohesive look. You could go for a neutral tone like gray or white, or make it pop with a vibrant accent color. This flexibility helps integrate the separator seamlessly into your overall design.

**Style:** DiviGrid offers multiple line styles to choose from. You can select a solid line for a clean, straightforward look, a dotted line for a lighter, less formal feel, or a dashed line for a more creative, playful touch. The choice of style can have a significant impact on the visual flow and tone of your menu layout.

**Box Shadow & Margin:** Adding a box shadow to your separator or divider gives it depth, creating a subtle 3D effect that can make your menu look more polished and professional. The margin setting allows you to control the spacing around the separator/divider, ensuring it doesn’t feel too cramped or isolated from other content. Proper margin settings enhance readability and create a balanced layout.

#### Button Styling

Use Divi’s default button customization options to style the call-to-action buttons. Options include button color, shape, text size, and hover effects.

## Food Menu Content Tab Customization

***\[ Global Customization \]***

The **Food Menu** component allows for global control over the overall layout and design of the menu. Any changes made here will affect all **Food Menu Items** under this module.

### **Content Tab Customization**

**Title and Title Tag**

Set the menu title (e.g., “Dinner Menu” or “Specials”) and the appropriate heading tag. The title is important for both SEO and user readability, so ensure it’s clear and descriptive.

#### Grid Settings

**Grid Column Number**: Define how many columns will appear per row. Depending on your layout, you may want 2, 3, or even more items per row for a clean grid display.

**Column Gap**: Control the gap between individual menu items, ensuring there’s enough white space to make the layout visually appealing without feeling cluttered.

## Food Menu Design Tab Customization

### Header Section

#### Font Styles

The Font Styles settings provide extensive control over the typography used for the food menu title. You can adjust the font size to make the title more prominent or subtle, depending on the visual hierarchy of your design. The font weight, font style, line height, and letter spacing, create either a more open or condensed look. These combined options ensure your menu title stands out in a visually appealing and easily readable way.

#### Header Background

You have the ability to set a background for the header section, making it visually distinct from the rest of the menu. Choose between a solid color for a clean, simple design, a gradient for a more dynamic and eye-catching effect, or even an image to add texture or complement the theme of your restaurant or café. The right background choice can significantly enhance the visual appeal of the header, ensuring that the title not only grabs attention but also blends seamlessly with the overall aesthetic of the page.

#### Header Spacing

Spacing is crucial for creating a balanced design. With the **Header Spacing** settings, you can control the **padding** around the text, ensuring it has enough breathing room and doesn’t feel cramped. Additionally, you can adjust the **margins**, determining how far the header is from other sections on the page

#### Header Border and Box Shadow

Adding a **border** around the header can give it a more defined and structured look, helping to separate it from surrounding content. You can customize the border’s color, width, and style (solid, dashed, dotted) to suit your design needs. Additionally, applying a **box shadow** introduces depth and a subtle 3D effect, making the header stand out even more.

### More Global Styling Options

All the detailed styling options available in the **Food Menu Item Design Tab**—such as **Alignment**, **Image & Icon**, **Font Styles**, **Price Text**, **Badge Settings**, and **Separator & Divider**—can be applied globally to every menu item via the **Food Menu Design Tab**.

| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/F0sUhVkbXXQfh9ZebeEKHFIcAeOlarQste3nogrO.jpg) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/NtTqerbg5zm8vVDIWUcyxNpjTyqHbG7jzzsnpfGj.jpg) |
|---|---|

This ensures that all individual menu items share a consistent and cohesive appearance, streamlining the design process. Instead of styling each item individually, these global options allow you to make changes across the entire menu with a single adjustment. This not only saves time but also guarantees uniformity, ensuring that your menu design maintains a harmonious and professional look across every single item.

## Food Menu Module FAQ

### Q. What is the significance of the 'Use Badge' switch?

The "Use Badge" switch enables you to add a promotional badge to a food item. Badges are commonly used to highlight special promotions, such as "Best Seller" or "New Arrival." This feature allows you to add custom text for the badge, making it a great way to attract attention to particular menu items. By using badges strategically, you can guide customer choices and promote high-margin or popular dishes.

### Q. What is the purpose of separators and dividers in the Food Menu module?

Separators and dividers help organize and structure the content in your food menu. Separators visually break up different pieces of information, such as the food title and price, to create a clear distinction between them. Dividers are used to separate sections of content, like the food name and description, making the menu easier to scan and read. Both elements enhance the overall layout, improving readability and user experience.

### Q. What line styles are available for separators and dividers?

The Food Menu module offers several line styles for separators and dividers. You can choose from solid lines for a clean and straightforward appearance, dotted lines for a lighter, less formal look, or dashed lines for a more creative and playful touch. The choice of style impacts the visual flow and tone of your menu layout, allowing you to align it with your design preferences.

### Q. What are the best practices for using separators and dividers in menu design?

Best practices for using separators and dividers include:

* **Consistency:** Use consistent styles for separators and dividers to maintain a cohesive look throughout the menu.
* **Clarity:** Ensure separators and dividers are visible but not distracting, and that they clearly delineate content without cluttering the design.
* **Responsiveness:** Adjust separator and divider styles for different screen sizes to ensure they remain effective across devices.
* **Spacing:** Provide adequate spacing around separators and dividers to avoid overcrowding and to enhance readability.

### Q. What are the benefits of using the Food Menu module for restaurants and cafes?

The Food Menu module provides a professional, visually appealing way to showcase menu items with extensive customization options for branding and user experience.

### Q. What are grid settings, and how do they affect the menu layout?

Grid settings allow you to define how many columns will appear per row and control the gap between individual menu items. This ensures a clean and visually appealing grid layout for your menu.

### Q. What is the benefit of using global design settings for the Food Menu module?

Global design settings ensure consistency across the entire menu, making it easier to maintain a cohesive look and feel while applying uniform styles and settings.

### Q. Is the Food Menu module mobile responsive?

Yes, the Food Menu module is designed to be mobile responsive. It adjusts the layout, font sizes, and image dimensions to ensure optimal viewing and usability on mobile devices.

### Q. Can I apply unique styles to menu items for mobile view only?

Yes, you can apply unique styles to menu items for mobile view only by using responsive design settings and custom CSS. This allows you to create a tailored experience for mobile users without affecting the desktop layout.


# Gradient Text


The **Gradient Text Module** allows website designers and developers to add engaging gradient color effects to text elements in Divi. Whether you’re looking to highlight important content, create vibrant headers, or simply add a dynamic visual element, the Gradient Text Module offers numerous customization options to make your text stand out. This documentation will guide you through the module’s features, including text and gradient customization, animation, stroke text, individual prefixes, infix, suffix text, hover effects, and advanced settings.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/C8R95VkRCSpRaK2TvrRDLlGaCwMYuraGydPxQ22y.jpg)

## How to Add a Module to Your Page

Once Divi Grid is activated, multiple modules are introduced to the Divi Builder. To add a module to a page, follow these steps:

**Create or Edit a Page/Post:** Open an existing page or post, or create a new one using the Divi Builder.
**Create or Edit a Row:** Add a new row or edit an existing one within the page layout.
**Add a Module:**

* Click the Add New Module button within the selected row.
* From the module list, select DG Gradient Text.

## Module Overview

The Gradient Text Module is designed to create attention-grabbing text elements with customizable gradient overlays. The module allows users to apply gradient effects to text by configuring the primary and secondary colors, adjusting gradient direction, and adding hover effects. Additionally, it includes responsive settings, so you can tailor your design to work perfectly on desktop, tablet, and mobile devices.

Key features include:

* Individual Prefix, infix, and suffix texts
* Individual Prefix, infix, and suffix text customization
* Customizable gradient text colors
* Gradient direction control (linear, radial)
* Typography settings (font, size, weight, style)
* Background clipping
* Animations
* Stroke Text
* Hover effects to animate text
* Advanced CSS customization options
* Responsive design for different screen sizes

## Content Tab Customization

The Content Tab in the Gradient text module provides you with a variety of input fields and settings to customize the text content and structure of your headings.

### **Content**

**Prefix Text:** Add a text prefix to your heading. This could be a small introductory word or phrase that precedes your main title.

**Infix Text:** Place additional text in the middle of your heading, allowing you to emphasize or highlight certain parts of the title.

**Suffix Text:** Add text after your main title to complete the heading. This can be useful for subheadings or additional context.

**Title Tag:** Select the appropriate HTML tag for your heading (e.g., H1, H2, H3, etc.). This not only defines the visual hierarchy but also impacts SEO.

## **Design Tab Customization**

### **Heading**

**Use Background ( *Switch* )**

When the "Use Background" switch is enabled, the Gradient Text Design Tab allows you to customize the heading text background. This feature adds an extra layer of design flexibility, making it easy to enhance the visual appeal of your gradient text by adding contrast or highlighting specific content.

* **Background Color**: This option lets you apply a solid color overlay to the text within the module's row.
* **Background Gradient**: With this setting, you can apply a gradient overlay, blending two or more colors across the text. Gradients can add depth and make your design more visually dynamic than using a single color. You have full control over the gradient's appearance.
* **Background Image**: This feature allows you to use an image as the background, creating a layered effect. It provides complete creative control over the design of each accordion item, offering a powerful way to enhance your content's look.

**Margin & Padding:** Adjust the space around the heading to control its placement and spacing in relation to other elements.

**Border:** Define a border around the heading, with options for rounded corners, color, style, and thickness.

**Box Shadow:** Add a shadow effect to the heading for depth and emphasis.

### **Heading Font**

Customize the font for all heading text (prefix, infix, and suffix). This ensures a consistent typography style across the entire heading. You have full control over how the review text is styled, including font family, weight, alignment, and more.

* Font
* Font Weight
* Style
* Alignment
* Line Height
* Letter Spacing
* Text Shadow
* Text Color

### Font Styles

Each text element—**Prefix**, **Infix**, and **Suffix**—can be styled independently, giving you granular control over the typography. You can modify:

* Font
* Font Weight
* Style
* Alignment
* Line Height
* Letter Spacing
* Text Shadow
* Text Color

### **Gradient Heading**

Once the "Use Gradient Color" switch is enabled, a variety of customization options become available, allowing you to design visually appealing gradient effects for your text. These settings give you complete control over the colors, style, and flow of the gradient applied to your heading.

**Select Gradient Field**: This option allows you to choose which part of the text will display the gradient effect. You can apply the gradient to the prefix (the beginning), infix (the middle), or suffix (the end) of the text, offering flexibility in how and where the gradient is displayed.

**Gradient Type**: This setting allows you to select the style of the gradient you want to apply. You can choose between different types, such as linear, where colors transition smoothly from one side to another, or radial, where the colors radiate from a central point. Each gradient type provides a unique visual effect, giving you more options to match your design needs.

**Primary Color & Location**: This setting lets you choose the starting color of your gradient and determine where it begins within the gradient flow. You can adjust the color position to control how much of the text is covered by the primary color, ensuring the gradient transitions smoothly.

**Secondary Color & Location**: Similar to the primary color setting, the secondary color marks the ending point of your gradient. You can select the color and decide where it should appear within the gradient, creating a balanced or contrasting effect depending on your design preferences.

**Gradient Angle**: This option allows you to set the angle at which the gradient flows. Adjusting the angle changes the direction in which the colors transition, giving you full creative control over how the gradient interacts with the text. You can create horizontal, vertical, or diagonal gradients by manipulating the angle setting.

By using these settings, you can fully customize the gradient effect on your heading, tailoring it to your design's aesthetic while maintaining flexibility in color placement and flow.

### **Background Clip**

The **Background Clip** settings provide additional customization for how the background interacts with the text. These options let you determine whether the background is clipped specifically to the text and whether you want to include an image to enhance the visual design.

**Select Background Clip Field**: This option allows you to decide if the background should be clipped to the shape of the text. When enabled, the background will only appear within the text itself, creating a cleaner and more focused design.

**Image Field**: Here, you have the option to upload and use an image as the background for the text. This feature allows for more creative expression, letting you combine both text and imagery to create a visually compelling effect. The image will be clipped according to your text settings, ensuring a seamless integration.

### **Prefix, Infix & Suffix Settings**

The **Prefix, Infix & Suffix Settings** provide fine-tuned control over the appearance and behavior of each part of your text. These settings allow you to apply unique styling and layout customizations to ensure that each text element stands out and complements your overall design.

**Enable Outline/Stroke Text Switch**: Toggle this option to add an outline around the text, making it more distinct and enhancing its visibility. This effect can help your text stand out, especially against complex backgrounds.

**Overflow Visible Switch**: Enable this option to ensure that any text exceeding its container remains visible, rather than being clipped. This is useful when you want the full text to display without restrictions on space.

**Display Block Switch**: When enabled, this setting makes the text behave as a block-level element. This means the text will take up the full width available, allowing for greater control over its layout and positioning within the design.

**Use Background Switch**: This setting allows you to apply a background color or image specifically to the prefix, infix, or suffix text. You can customize each part of the text individually, giving your design more flexibility in terms of visual emphasis.

**Margin & Padding**: These settings let you adjust the spacing around the prefix, infix, and suffix text elements. By fine-tuning the margins and padding, you can control how much space is around each text segment, ensuring balanced and precise placement.

**Border**: Add borders around the prefix, infix, or suffix to create a distinct separation or emphasize certain parts of the text. You can customize the border's style, color, and width to fit your design needs.

**Box Shadow**: Apply a shadow effect to individual text elements, such as the prefix, infix, or suffix, to create depth and a sense of separation from the background. This feature enhances the overall visual impact, giving your text a more three-dimensional look.

### **Animation Settings**

When the **"Use Animation"** switch is enabled, various customization options will become available, allowing you to animate different parts of your heading text. These settings offer flexibility in how animations are applied, adding dynamic movement to your design and enhancing user engagement.

**Select Animation Field**: This option lets you choose which part of the heading (prefix, infix, or suffix) the animation should apply to. You can animate different sections of your text independently, giving you control over which part of the heading draws attention.

**Animation Type**: Choose from over 12 different animation types to bring your heading text to life. Whether you prefer subtle fade-ins or eye-catching bounces, these animation options add movement and interactivity to your design, making the heading more engaging.

**Animation Speed**: This setting allows you to control how fast the animation plays. You can adjust the animation speed to match the overall flow of your webpage, ensuring that the pacing feels natural and doesn’t distract from the content.

These animation settings provide the tools to create dynamic and visually appealing headings, adding a layer of interactivity to your design while giving you full control over which parts of the text are animated and how they behave.

### **Hover Settings**

Once the **"Use Hover Effect"** switch is enabled, a range of customization options becomes available, allowing you to apply dynamic hover effects to your text. These effects bring an interactive element to your design, enhancing user engagement with over 30 modern and aesthetic styles to choose from.

**Select Hover Field**: This setting allows you to specify which part of the text (prefix, infix, or suffix) the hover effect will apply to. By customizing the hover effect for different sections of the text, you can create unique visual interactions that highlight specific parts of your heading when users hover over them.

**Select Hover Style**: With access to over 30 stylish and modern hover effects, you can create dynamic headings that react to user interaction. These hover styles offer a wide range of effects, from subtle transitions to bold animations, allowing you to design engaging text that stands out and responds visually when hovered over.

Additionally, Divi's default design settings—such as **Spacing, Border, Box Shadow, Transform, Animation, and more**—are fully available to further customize the Gradient Text module. These built-in options provide added flexibility, allowing you to refine the layout, adjust visual elements, and apply advanced design effects to create a polished and unique look for your gradient text. Whether you're fine-tuning spacing or adding depth with shadows, these settings give you full control over the module's design.

## **Frequently Asked Questions ( FAQ's )**

#### **Q. What is the Gradient Text Module in Divi?**

The Gradient Text Module allows designers to add dynamic gradient effects to text elements, offering customization options like gradient color, animation, stroke text, hover effects, and more.

#### **Q. What key features does the Gradient Text Module offer?**

It includes prefix, infix, and suffix text, gradient colors, gradient direction, stroke text, hover effects, typography, animations, background clipping, and responsive design settings.

#### **Q. What does the "Display Block" switch do?**

It makes the text behave like a block element, meaning it will occupy the full width available in the row or section.

#### **Q. Can I animate the prefix, infix, and suffix independently?**

Yes, you can choose to apply animations to each text section (prefix, infix, suffix) independently.

#### **Q. Can I apply different gradients to the prefix, infix, and suffix?**

No, the gradient effect applies to the entire text as a whole, but you can control which section (prefix, infix, suffix) gets the gradient.

#### **Q. What is the purpose of the 'Enable Outline/Stroke Text' switch?**

The "Enable Outline/Stroke Text" switch serves to apply a visible outline around your text, improving its clarity and making it more prominent, especially when placed over intricate or visually busy backgrounds. This feature is particularly useful in ensuring that your text remains readable and visually appealing in any design context.

Once activated, you can further customize the stroke effect using several settings. These include:

* **Outline Width**: Adjust the thickness of the outline to suit your design.
* **Outline Color**: Choose the color of the outline to match or contrast with your text and background.
* **Outline Fill Color**: Set the inner color of the text to complement the outline for a cohesive look.

These customizable options allow for a high degree of flexibility, enabling you to tailor the text appearance to match your design needs.

#### **Q. Is it possible to apply gradient effects individually to Prefix, Infix, and Suffix text elements?**

Yes, the module allows you to apply unique gradient effects to the Prefix, Infix, and Suffix text elements, enabling precise customization for each section of your heading.

#### **Q. Can I apply individual backgrounds to the Prefix, Infix, and Suffix elements?**

Yes, the module provides options to apply unique backgrounds—whether color, gradient, or image—to apply background in the prefix, infix, or suffix, go to

#### **Q. Is it possible to add borders around each text element?**

Yes, the module allows for the addition of borders around the Prefix, Infix, and Suffix text elements, with full customization options for border style, color, width, and radius.

#### **Q. Does the module support responsive design across different devices?**

Yes, the module is fully responsive, allowing you to customize how your heading appears on desktop, tablet, and mobile devices to ensure a seamless experience across platforms.


# How to download demo design and import it to the Divi library?


Divigrid is the perfect way to make your website stand out from the crowd. With its unique grid system, you can create a truly one-of-a-kind design that will wow your visitors.

Assuming you would like tips on downloading and importing the DiviGrid Demo Design:

1. To download the DiviGrid Demo Design, go to [https://divigrid.xyz](https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqbEpJN2dLLWtYZU5OeElITVlWRW9CcVQzVmdpUXxBQ3Jtc0tuaVQyMS1GUXFyeGpJVmlIcHlYbERpUTJVVG5MLWROb3RqVk9WRnVTdWRBVmJ4YkpleFIyWjdQOHNUV0xQY0JFNEN2OXJZUGo5T3dKdnRGVGpoV3NfYnV0dC0tSGR4VTM3MXZSUXRJZTQ2RG9xVFVlTQ&q=https%3A%2F%2Fdemo.divigrid.com%2F&v=2SMIFxxkI9o) and click on the “Download Demo” button in the left side bar
2. Save the file to your computer and unzip it.
3. In your WordPress dashboard, go to Divi > Divi library and import a json file from the downloaded folder.
4. On the next step, Go to the page or post url and Enable the Divi Visual builder.
5. Import your saved Divigrid layout from the Divi library.
 
Here is a Full Video


# How to install DiviGrid?


#### 1. Install and activate Divi

First of all, make sure you have the Divi Theme/ Extra Them/ Divi Builder by Elegant Themes installed and active. This is important because DiviGrid is completely based on Divi.

#### 2. Download DiviGrid

After the purchase of our DiviGrid plugin, download the file to your computer. The plugin file ends with “.zip” at the end of the file name. You can download the file from your Elegant Themes account.

#### 3. Installation

Installing any DiviGrid plugin is exactly like any other WordPress plugin. DiviGrid plugin can be installed using two methods.

1. From WordPress Dashboard
2. Manually uploading via FTP
 
#### 1. From WordPress Dashboard

 Go to **WordPress Dashboard** >> **Plugins** >> **Add New** >> **Upload Plugin** >> **Choose File** >> Browse **divigrid.zip** and click **Install Now** >> **Activate Plugin**.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/2qrueWRJkMkQRrKBXWI8yCc1NC6fV2uQtdGeyD3D.png)

#### 2. Manually uploading via FTP

 a. Extract **divigrid.zip**.

 b. Connect to your server using an FTP application.

 c. Navigate to **wp-content/plugins/**.

 d. Upload the divigrid in the plugins directory of your server.

 e. Go to **WordPress Dashboard** >> **All Plugins** >>**Activate DiviGrid**.


# Can I use Divigrid in WooCommerce platform?


## DiviGrid in the WooCommerce platform

**Sorry to say that No, for now**, you cannot use ContentGrid and ListGrid on the WooCommerce platform. In our upcoming version, we will add the product grid module in the Divigrid Plugin. But now you can link up the single post/project/product or any custom post page using dynamic links. Details are given below.

DivGrid module buttons and badges have dynamic module URL links. Thanks for the Dynamic feature of Divi builder. Things you need to do…

**1. Goto button/badge module URL from link options**

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/iT28ObGx9NRNGdzyYQAleBNPX5XjvFEkVPOUTQaj.jpg)

**2.** **Click Dynamic module Icon**

**![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/g3ysnMy1pYgs5NAIBGihXMjbPOxX5m9PCdtoU1e5.jpg)**

**3. Select your product link from the dynamic link options**

**![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/80DeFShDQZpMLupzVJu4NvdFZ9mloljR3QzCmrLB.png)**

**4. Select your specific post from your product list which you want to display in a single post.**

**![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/rNcJU1eXLVyIPdQHWFNhJjBHyFs9KljZcmnh8Bjq.png)**

**Here is the selected post link**

**![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/eD6lNkr4nGzEbbp1Z0dUOO5JYyGnK1vb00F63EbL.jpg)**

**5. Display the product in the single page**

**![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/LxlZ1GgMSUQcluWrLnuMpKbYNDKLT9DjNYX5TDJz.jpg)**

We want to tell you very seriously that our modules cannot be used in the WooCommerce platform for now. You can use the link option to display only your products on a single product page.

Thank you.

**DiviGrid Team**


# Image Accordion


The **Divigrid Image Accordion** module is a versatile and visually engaging tool for showcasing content in an accordion layout. It allows you to display multiple images that expand to reveal additional information when interacted with. This module is highly customizable, giving users full control over the accordion’s layout, style, and animations. This module allows users to present images in an accordion format where individual accordion items expand to reveal additional content on hover or click. It's ideal for showcasing portfolios, galleries, and dynamic content in an interactive manner.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/fDPfhcNfAqcJS9meZMT8zpViHTlq6PTG4d9mJipp.jpg)

In this documentation, we'll dive into the various settings available in the **Content** and **Design** tabs of the Image Accordion module, and how you can customize these settings to create visually consistent and professionally designed accordion layouts.

## **Content Tab Settings**

### Accordion Settings

The Accordion Settings section is where you control the overall behavior and interaction of the accordion. You can determine how users will interact with the accordion (by hovering or clicking), its orientation, height, and how content is displayed. Here are the settings explained in detail:

### **Accordion Trigger**:

* **Hover**: When this option is selected, the accordion items will expand automatically when the user hovers their mouse over them. This is ideal for creating a more fluid, user-friendly experience, where users don’t need to click but can simply explore by moving their cursor.
* **Click**: With this option, the accordion items will expand when the user clicks on them. This gives users more control over the interaction, as they can decide when to expand an item.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/iQWLyli0BFXcpfSGWlKQYWLM0jfZl6UNsWUy5hSv.jpg)

### Accordion Orientation

* **Horizontal**: The accordion items will expand horizontally across the width of the container. This is the default orientation and is suitable for horizontal layouts where images are aligned side by side.
* **Vertical**: The accordion items expand vertically, stacking on top of one another. This orientation is perfect for sidebar-style accordions or for displaying content in a vertical scrolling format.

**Accordion Height**: This setting allows you to specify the height of the accordion. By adjusting this value, you can control how tall the accordion appears on the page. A fixed height ensures that the accordion fits perfectly within your page layout.

**Equal Each Item Switch**:

* **Enabled**: When this switch is turned on, all accordion items will have the same width, even when they are collapsed. This ensures a uniform, grid-like structure where each item is balanced in size.
* **Disabled**: If the switch is turned off, accordion items will adjust their width based on their content or other settings.

**Active Item Number**: This option lets you select which accordion item will be active when the page initially loads. If you want to highlight a particular item, you can set it to be open by default. You can select from any of the items in your accordion.

**Active Image Size**: You can control the size of the image for the active accordion item. The image for the expanded item can be larger or smaller than the collapsed items, helping to draw attention to the currently active content.

**Visible Content Always Switch**:

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/wiYAM2NgqefkKaCX7F1R8rFYWQbwcrImRnZyx2tL.jpg)

* **Enabled**: When this switch is turned on, the content inside each accordion item will always be visible, even when the accordion is collapsed. This is useful for designs where you want the user to always have access to the content without needing to interact with the accordion.
* **Disabled**: If turned off, the content will only be visible when the accordion item is expanded.

## Animation Settings

The animation settings add a dynamic, interactive element to your accordion. With these settings, you can control the movement and visual effects that occur when accordion items are expanded or collapsed.

**Transition Time**: This setting controls how quickly the accordion items expand and collapse. A lower value will result in faster transitions, creating a snappier interaction, while a higher value will slow down the transition for a more dramatic effect. Transition time is measured in milliseconds.

| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/BTbuK1ZbQPaVZV4NgJAfe8ERGd1FULEpRUxVIqjV.jpg) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/wwRLDcGcLpvVZ4JszljNprJGZakY9eKOizg5a9i6.jpg) |
|---|---|

**Use Content Animation Switch**: Once you activate this switch, several additional settings for content animations will appear. These settings allow you to apply animated effects to the text and other content inside the accordion.

* **Content Animation Style**: Select from over 12 modern animation styles to animate the content within each accordion item. These animations can range from subtle fades to more dramatic movements, adding a layer of interactivity and engagement.
* **Animation Speed**: Set the speed at which the content animations occur. You can adjust this to create faster or slower movements, depending on the aesthetic you’re going for.

| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/XJbRGiUH0nCBxIkpaHx2cNshqnsvwFHPfUhPgdOP.jpg) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/T7ZCnUjXC98SDxhXlvf60v6Xdh0AyzRyQ6FwGF0h.jpg) |
|---|---|

**Use Border Animation Switch**: This switch activates the animated border settings, allowing you to add motion to the borders of each accordion item when they expand or collapse.

* **Border Animation Style**: Choose from over 12 animation styles for the borders. This adds another layer of design flair to your accordion by making the borders animated, providing a polished and modern feel.
* **Border Animation Speed**: Set how fast the border animations occur. A higher value slows down the animation, while a lower value speeds it up.
* **Animated Border Width**: Define the width of the animated border. You can create thin, delicate borders or thick, bold outlines depending on your design preferences.
* **Animated Border Color**: Select a color for the animated border to ensure it matches your overall design theme.

## **Image Accordion Item Content Tab**

Each individual accordion item has its own set of content options. This section allows you to upload an image, add text, and optionally include buttons for each accordion item.

### **Image**:

* **Accordion Main Image Upload Field**: Use this field to upload the main image for the accordion item. The image will be displayed as part of the accordion and will expand when the accordion item is activated.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/xwgiSKJJ4IwjxoWR5Xjy2UKhJaqA5NVGWLDhrRJL.jpg)

* **Image Alt**: Provide alternative text for the image. This is crucial for improving the accessibility of your site, as screen readers will use this text to describe the image to visually impaired users. Alt text is also important for SEO purposes.

### **Content**:

* **Accordion Title**: Enter the title that will be displayed as part of the accordion item. This title is typically the main clickable or hoverable element of the accordion and should clearly describe the content within.
* **Title Tag**: Choose the appropriate HTML tag for the title (H1, H2, H3, etc.). This is important for SEO, as search engines use these tags to understand the hierarchy of your content.
* **Description**: Add a description that will be revealed when the accordion item is expanded. This is a great place to add more context or information about the content being showcased.

| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/zwWPS1l4O4URBgKia3Cu0OTIkyn2lk5rBlvmxk04.jpg) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/W3lm851e72ge7nAW88bGAFGbtguyTAyzT2DIPmor.jpg) |
|---|---|

### **Use Icon Switch**:

If you activate this switch, the image field will disappear, and you’ll be able to use an icon instead. This is useful for designs where you want a simpler or more abstract representation rather than an image.

### **Use Button**:

* **Button Text**: Enter the text for the button that will be displayed inside the accordion item.
* **Button URL**: Specify the URL that the button will link to. This is ideal for creating CTA buttons that direct users to other pages or content.
* **URL Opens**: Choose whether the URL should open in the same tab or in a new tab. Opening in a new tab is often useful when linking to external content.

## Design Tab Settings

### Image Accordion Design settings

####  *\[ Design Customization ( Global ) \]*

The **Image Accordion Design Tab** offers global styling options for the entire accordion. These options allow you to style every accordion item at once, ensuring uniformity and saving you time.

| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/yd8snyZ7AAhCVIaWAN96B85lPdcbzXZksxoNuDn3.jpg) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/T6exjY0vIqmULkYNO5SHN8Yjwk4YkUmTHgdVAJYZ.jpg) |
|---|---|

All the detailed styling options available for individual accordion items—such as **Image & Icon, Font Styles, Overlay, and Content Settings**—can be applied globally via this tab. This ensures that all individual accordion items share a consistent appearance, streamlining the design process.

### Image Accordion Item Design settings

#### *\[ Individual Design settings for every accordion item \]*

Instead of styling each item individually, these global options allow you to make changes across the entire accordion with a single adjustment.

### Image & Icon Customization

In the **Image Accordion Item Design Tab**, the **Image & Icon** section provides granular control over how both images and icons are displayed. Each setting is essential to creating a visually cohesive and striking design, ensuring flexibility while maintaining consistency across your site.

* **Image Width**: This setting controls how wide your image appears within the accordion item. By default, images scale based on their natural size, but here you can specify a custom width
* **Image Height**: This setting determines the height of your image, allowing for custom height values similar to the width. Use this in conjunction with the width setting for a balanced design:

| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/YJIxA7PVLKmdzp2XBFafIaV6kGj3OxLgn025yApF.jpg) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/cTpuwZYsUt0u9gunP4QkqlhGvNTSBGPTPDPB4LJ2.jpg) |
|---|---|

* **Icon Size**: Customize the size of the icon if you’ve chosen to use an icon instead of an image. When using an icon instead of an image, the **Icon Size** setting becomes essential. This setting controls how large the icon will appear relative to the container
* **Icon Color**: Select a color that matches your design scheme for the icon.
* **Icon Background**: You can set a background color for the icon, adding contrast or visual separation from the content. The **Icon Background** setting allows you to add a background color behind the icon. This adds contrast and ensures your icon stands out, especially against complex images or gradient backgrounds.
* **Image/Icon Alignment**: Control the placement of the image or icon within the accordion, allowing for left, right, center, or justified alignment.
* **Image/Icon Spacing:** The spacing around the image or icon helps create a clean layout:
    
    
    * **Padding**: Controls the internal spacing between the image/icon and its container edges. Adjusting padding ensures the image doesn’t feel cramped or too far from the content.
    * **Margin**: Sets the external spacing between the image/icon and other elements. This provides separation from other accordion items or content areas, creating visual breathing room.
* #### **Image/Icon Border**
    
    Borders can help define the edges of your images or icons. This setting lets you add:
    
    
    * **Border Width**: Set the thickness of the border (in px).
    * **Border Style**: Choose from solid, dashed, dotted, or double borders, allowing for stylistic flair.
    * **Border Color**: Select a color that either contrasts or complements the image/icon and background.
    * **Border Radius**: Rounds the corners of the border. A higher radius results in more circular or rounded edges, while a lower radius maintains sharp corners.
* #### **Image/Icon Box-Shadow**
    
    Box-shadow adds a shadow effect behind the image or icon, giving the appearance of depth:
    
    
    * **Horizontal & Vertical Shadow**: Set how far the shadow extends horizontally and vertically (in px).
    * **Blur Radius**: Controls how blurry or sharp the shadow appears.
    * **Shadow Color**: Select a color for the shadow to make it subtle or bold.
    
    A well-applied shadow can make the image or icon appear lifted from the background, enhancing the visual hierarchy of the accordion.

### Content Settings

The **Content Wrapper Settings** allow you to manage the overall appearance and layout of the content within each accordion item. This includes text, buttons, and any other content that accompanies the image or icon.

#### **Content Position**

This setting allows you to choose where the content appears relative to the image or icon. There are **9 predefined positions**, giving you plenty of flexibility:

* **Top-Left, Top-Center, Top-Right**: Content is aligned at the top in the chosen direction.
* **Center-Left, Center-Center, Center-Right**: Content is centered horizontally and vertically within the accordion item.
* **Bottom-Left, Bottom-Center, Bottom-Right**: Content is aligned at the bottom of the item, useful for keeping text close to a CTA button.

| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/YXdWdTjxSQMFIlr7RsKKiR82DZBxDS5bK7GfdKJM.jpg) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/Pp4s2ZfpTXDZZbNk5bKsZtw8CECoCNAaraK3Zzrf.jpg) |
|---|---|

#### **Content Wrapper Background**

The background of the content wrapper helps distinguish the text from the rest of the accordion. You can choose from:

* **Solid Color**: Pick a uniform background color for the content wrapper.
* **Gradient**: Apply a gradient using two or more colors, which can add depth and visual interest.
* **Image**: Use a custom image as the background of the content wrapper, adding a unique texture or pattern.

This setting allows you to play with color theory or match the brand theme to create a cohesive design.

#### **Content Wrapper Spacing**

This setting controls the padding and margin of the content wrapper:

* * **Padding**: Adjust the internal spacing inside the content wrapper. This creates space between the content and the wrapper's border.
    * **Margin**: Control the external spacing outside the wrapper, allowing you to separate it from the image/icon and other design elements.

**Content Wrapper Border**: Add a border around the content wrapper with full control over style, width, and color.

**Content Wrapper Box-Shadow**: Apply a shadow effect to the entire content wrapper, giving it more depth and prominence.

### **Overlay** 

The Overlay Settings in the Image Accordion Item Design Tab give you control over how the background overlay appears on hover or at all times, providing an additional layer of design customization. Overlays are useful for enhancing the visual appeal of your accordion items, adding contrast, or highlighting specific content.

#### **Background Color Overlay**

The **Background Color Overlay** setting allows you to apply a solid color overlay over the image or icon within the accordion item. This color typically becomes visible on hover, creating an engaging effect.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/7Sf9M3LOB4TTgAFpm3M8HgCFw10QoM2zFAT03NRK.jpg)

#### **Background Gradient Overlay**

This setting allows you to apply a gradient overlay, combining two or more colors that blend across the image or icon. A gradient overlay can add depth and complexity to your design, making it more dynamic than a single-color overlay. You can fully control the look of the gradient

#### **Background Image Overlay**

The **Background Image Overlay** setting allows you to use an image as an overlay, creating a multi-layered visual effect. This is a powerful design feature that gives you total creative freedom over the look of each accordion item.

### ***Tips For Overlay Settings***

* ***Subtlety vs. Boldness**: Overlays can either create a subtle effect that complements the content or a bold, eye-catching feature that grabs attention. Use opacity and color to control the balance between these two extremes.*
* ***Text Readability**: Ensure that the overlay does not obscure or clash with text or buttons on the accordion item. A slight transparency in the overlay color or gradient often works best to keep content legible.*
* ***Consistent Styling**: When using overlays across multiple accordion items, consider maintaining consistency in your color schemes and hover effects to ensure a cohesive look across the module. This keeps the design professional and polished.*
* ***Pairing with Box-Shadow**: For added emphasis, combining overlay effects with box-shadow settings can give each accordion item a three-dimensional feel, making the design more engaging and interactive.*

## Image Accordion FAQ

**Q. Can I use the Image Accordion module on any WordPress site?**

Yes, the Image Accordion module can be used on any WordPress site with the Divi theme and the Divigrid plugin installed.

**Q. Is the Image Accordion module mobile-responsive?**

Yes, the module is fully responsive and adjusts seamlessly to various screen sizes, including mobile devices.

| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/D0BG8Z1YvyxZEbrUgGaX2VXsGDdEqdv8wWXNbgXE.jpg) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/7BrKyNBDSBRHgU6f3ap1O4Nq3tkBtHzH6EROt85N.jpg) |
|---|---|

**Q. What is the purpose of the accordion-style layout?**

The accordion layout allows for more content to be displayed in a condensed space, improving user interaction and design aesthetics.

**Q. How many accordion items can I add to this module?**

You can add as many accordion items as needed, depending on your design preferences and content requirements.

**Q. What is the difference between hover and click triggers?**

With hover, the accordion items expand when hovered over, while with a click, users need to click on an item to expand it.

**Q. How do I set which accordion item is active by default?**

You can specify the active item by using the Active Item Number setting. The number corresponds to the item that will be expanded by default.

**Q. What is the purpose of the 'Use Content Animation' switch?**

Activating this switch enables various content animation options, allowing you to add dynamic transitions to the accordion’s content when expanded.

**Q. Can I apply global design settings to all accordion items?**

Yes, you can apply global design settings to all accordion items, saving time by styling all items uniformly rather than adjusting each item individually.

**Q. How can I apply an overlay to each accordion item?**

The overlay settings allow you to add a background color, gradient, or image to each accordion item. You can adjust the opacity and hover effects for the overlay as well.

**Q. Is it possible to add unique hover effects for each accordion item?**

Yes, you can assign unique hover effects to each accordion item, including content and overlay transitions.

**Q. Can I customize the content position for each accordion item?**

Yes, you can choose from 9 different content positions, which determine where the content (title, description, and button) appears within the accordion item.

**Q. How do I make the content appear only when the accordion item is expanded?**

In the Accordion Settings of the Content tab, set the Visible Content Always switch to “No” to make the content appear only when the accordion item is expanded.


# Image Caption Module


The Image Caption module by Divigrid is a powerful tool designed to enhance the visual appeal of your website by allowing you to easily add and customize captions on images. This module is particularly useful for creating photo galleries, portfolios, and other image-rich content sections. The module operates with a parent-child relationship, giving you control over both global settings and individual caption items.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/jAt62vR7eJLwIkzPdsMmO0Y2CN799OlZx9ckAAGl.jpg)

This documentation provides a comprehensive guide to the settings available under the **Content** and **Design** tabs, enabling you to fully utilize the module's capabilities to achieve your desired design.

## **Content Tab Customization**

The Content tab is where you configure the fundamental elements of the Image Caption module. It’s divided into sections for managing both global settings (parent) and specific settings for each individual image caption (child).

### **Parent Content Tab**

The parent content settings apply globally to the entire grid of image captions, establishing the overall layout and structure.

**Add New Item**: This option allows you to add a new captioned image to your grid. When you click "Add New Item," a new child item is created where you can customize its content and design settings. This feature is crucial for incrementally building your grid by adding images and their corresponding captions one by one. Each item can be individually configured to create a diverse and dynamic grid layout.

#### **Grid Settings**

**Column Number**: Define how many columns will be displayed within your grid. For instance, if you choose 4 columns, the images will be evenly distributed across these columns, creating a balanced layout. Adjusting this number is crucial for ensuring that your grid is responsive and fits well within the page’s design. Depending on the content, you might opt for fewer columns for a more spacious look or more columns for a compact and dense presentation.

**Column Gap**: Control the space between the columns in your grid. This feature is essential for maintaining a clean and organized layout. A smaller gap can create a more tightly packed grid, suitable for showcasing a large number of images in a limited space. Conversely, a larger gap can give each image more breathing room, making the grid feel more open and spacious. This setting is particularly important in responsive design, as it ensures that the grid looks balanced and visually appealing across different screen sizes.

These global settings in the parent content tab are crucial for setting up the basic structure of your image grid. By fine-tuning the column number and gap, you can achieve various layouts, each suited to different types of content and visual preferences.

### **Child Content Tab**

The child content tab is where you manage the settings for each individual image caption. This section offers extensive customization options, allowing you to tailor how each image and its accompanying caption are presented.

#### Content

**Image**: Upload the image to be displayed with the caption. This is the visual centerpiece of your caption, so it’s important to choose high-quality images that align with your content. The image you select will serve as the focal point for the caption, and you can change it anytime by uploading a new file.

**Image Alt**: Image alt text is critical for accessibility and search engine optimization (SEO). This text is used by screen readers to describe the image to visually impaired users and by search engines to index the image’s content. It’s important to provide clear and descriptive alt text that accurately reflects the image’s content.

**Image Position**: Determine the position of the image within the module. Options include Initial, Top, Center, Bottom, Left, and Right. This feature allows you to create unique layouts by positioning the image in different areas. For example, positioning the image at the top with the caption below creates a classic look, while centering the image with the caption overlaying it can create a more modern and dynamic effect.

**Title**: Enter the main caption text that will accompany the image. This title is typically the most prominent text associated with the image, so it should be descriptive, relevant, and engaging.

**Title Tag**: Choose the HTML tag for the title, which impacts both the styling and SEO of your content. Common options include H1 through H6 tags, corresponding to different levels of heading importance in HTML.

**Enable Description Switch**: Toggle this to enable or disable an additional description area beneath the title. When activated, a text box appears where you can enter supplementary information or context related to the image. This description can provide more details, offer commentary, or even include a call to action. It’s a useful feature for adding depth to your captions and guiding users through the content.

#### **Grid Settings**

**Grid Column Start**: Specify the starting position of the grid column for each individual item. This is especially useful in more complex layouts where you want to control the exact placement of each image within the grid.

**Grid Column End**: Similar to the start setting, this option lets you determine where the grid column should end for each item. This level of control is essential for creating custom layouts that go beyond simple grid structures. By adjusting these settings, you can achieve intricate designs that guide the viewer’s eye across the content in a deliberate and engaging way.

The child content tab provides the flexibility needed to create unique and engaging image captions. By adjusting these settings for each individual item.

### **Design Tab Customization (Global)**

The Design Tab of the Image Caption module in Divigrid provides a comprehensive set of tools to fine-tune the overall appearance of your image captions. These settings apply to all items within the grid, ensuring that your design remains consistent across the module.

#### **Image Settings**

**Image Width & Height**: Here, you can adjust the dimensions of the images. This is important for ensuring that all images in the grid are the same size, which contributes to a neat and organized layout. You can set specific pixel values or use percentage-based sizes for responsive design.

**Image Opacity**: The opacity setting allows you to adjust the transparency of the images. Lowering the opacity can create a subtle, faded effect, which can be useful for background images or when you want the caption text to stand out more.

**Image Margin & Padding**: Margin and padding settings give you control over the spacing around the images. Margins affect the space outside the image, while padding affects the space inside the image’s border. These settings are crucial for fine-tuning the layout and ensuring that each image has enough space around it.

**Border**: The border setting allows you to add a border around each image. You can customize the color, width, and style of the border to match your site’s design. Borders are useful for creating visual separation between images or drawing attention to specific items.

**Box-Shadow**: Box-shadow settings let you add a shadow effect around the images, creating depth and dimension. You can customize the color, blur, spread, and offset of the shadow to achieve the desired effect.

These image settings provide a wide range of options for customizing how your images are displayed. By adjusting these settings, you can create a cohesive and visually appealing grid that enhances your website’s overall design.

#### **Font Styles**

**Blend Style**: The blend style setting allows you to blend the text with the background, creating unique visual effects. This can be useful for creating subtle overlays or integrating the text more seamlessly with the image.

**Title Font Styles**: Here, you can further customize the title font by choosing different font families, sizes, colors, and weights. This level of control allows you to create a title that stands out and matches your site’s overall design.

**Description Font Styles**: Similar to the title font styles, this setting allows you to customize the font for the description text. You can choose a different font or use the same font as the title for consistency.

**Title Margin & Padding**: These settings control the spacing around the title text. Adjusting the margin will affect the space outside the title, while padding will affect the space inside the title’s container. This is useful for ensuring that the title text is properly aligned and spaced within the grid.

Font styles are crucial for creating a visually appealing and readable layout. By adjusting these settings, you can ensure that your text is both attractive and easy to read, enhancing the overall user experience.

#### **Item Settings**

**Background**: The background setting allows you to set a background color or image for each caption item. This is useful for creating contrast between the text and the image, ensuring that the caption is readable and visually distinct.

**Margin & Padding**: These settings give you control over the spacing around each item. Adjusting the margin will affect the space outside the item, while padding will affect the space inside the item’s border. Properly adjusting these settings is crucial for creating a clean and organized layout.

**Border & Box-Shadow**: Further customize the appearance of each item by adding borders and shadow effects. These settings help create depth and visual interest, making each item stand out.

These design settings provide the flexibility to create a cohesive and visually appealing grid of image captions that align with your overall site design. By carefully adjusting these parameters, you can ensure that your captions are informative and enhance your website's aesthetic appeal.

## **FAQs About Image Caption**

**1. What is the Image Caption module, and how does it function?**
The Image Caption module by Divigrid is a tool that allows users to add captions to images within a grid layout. It supports a parent-child relationship, where the parent controls global settings, and each child item represents an individual image with its caption.

**2. Can I control the spacing around the images?**
Yes, the module offers margin and padding settings under the "Image Settings" and "Item Settings" sections in the Design Tab. You can adjust these to control the space inside and outside of each image.

**3. What are the grid settings in the Parent Content Tab?**
The Parent Content Tab includes grid settings like the number of columns and the column gap. These settings control the overall structure of the grid layout, determining how many images are displayed per row and the spacing between them.

**4. Is the Image Caption module responsive on different devices?**
Yes, the module is designed to be fully responsive, ensuring that your image captions look great on all devices, including desktops, tablets, and smartphones. The responsive design settings ensure that the layout adjusts dynamically to different screen sizes.

**5. What is the Blend Style option, and how does it work?**
The Blend Style option in the Design Tab allows you to apply blending effects to text and images within the Image Caption module. This feature helps you create unique visual effects by merging the image and text layers in various ways. You can customize the blend mode to achieve effects like darkening, lightening, or adding contrast, which can enhance the overall aesthetic of your captions.

**6. Is it possible to add multiple images with different captions?**

Yes, you can add multiple images with unique captions by using the "Add New Item" feature in the Parent Content tab. Each image can have its own caption and settings.

**7. How many blend styles are in the image caption module?**

There are 7+ blend styles in the blend style options called ( Difference, Luminosity, Color, Normal, Multiply, Exclusion, and Color Dodge).


# Image Carousel Module


The Image Carousel module by Divigrid for Divi is a powerful tool designed to create visually engaging and interactive image sliders. This module features a parent-child relationship, allowing users to add and customize content through child items, ensuring flexibility and precision in design. This documentation will be providing comprehensive guidance on leveraging the module's features to create professional, SEO-friendly, and user-friendly carousels.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/uZKAZSxX3ZqdTJ6X6NKzzp4nu9rgwAo1bExrJy8Q.jpg)

## **Child Content Tab Customization**

The Child Content tab is where you add and customize individual slides within the carousel. Each child item represents a unique slide, with its own content and settings.

### **1. Upload Content**

In the Upload Content section, you add the main visual elements and accompanying text for each slide.

* **Upload Image:** Upload the image that will be displayed in the slide. The quality and dimensions of the image are important to ensure it fits well within the carousel’s layout.
* **Image Alt Text:** Provide descriptive alt text for the image. This is crucial for accessibility and SEO, as it helps search engines understand the content of the image and improves the experience for users with screen readers.

| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/jYLLHUiriEny6EvzmbVwpylUI8Xg6IEb6iacavkM.jpg) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/YIexxDjxYLekDXUaAWvyLd2iNCvtbto8elaD10hv.jpg) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/0LpqfMRCEM0VLEffeZ4baDtB78Tm1R1dG4HODiQh.jpg) |
|---|---|---|

* **Title Text:** Enter a title for the slide. This text can be displayed over the image or in a specified position and serves to provide context or highlight important information
* **Title Tag:** Choose the HTML tag for the title text (e.g., H1, H2, H3). This is important for maintaining the correct semantic structure of your page and for SEO purposes.
* **Description:** Add a description for the slide. This can be used to provide additional details or context and can be displayed alongside the title or in a separate area.
* **Button Text & URL:** If you want to include a call-to-action (CTA) on the slide, enter the text for the button and the URL it should link to. This is ideal for driving traffic to other pages or external sites directly from the carousel.

## **Child Design Tab Customization**

### **Button Settings**

* **Style Buttons Individually:** In the child item settings, you have the flexibility to style each button individually. This allows you to create unique styles for every button in the carousel, tailoring them to match the specific content or design of each slide. Customize font size, color, background, border, shadow, and other properties for a truly personalized look.

## **Parent Content Tab Customization**

The Parent Content tab is where you control the overarching settings for your image carousel, including adding new items, configuring the carousel’s behavior, and managing pagination.

### **1. Add New Item**

The "Add New Item" option allows you to create a new slide in the carousel. Each new item represents an individual slide, which you can further customize in the Child Content tab. Simply click "Add New Item" to begin adding your content.

### **2. Carousel Settings**

The Carousel Settings section is where you configure the main features and behavior of the carousel. Each setting allows for a high degree of customization, ensuring your carousel performs exactly as desired.

* **Carousel Type:** Choose from various carousel types ( Slide, Coverflow, Flip, Cube ) to define the layout and behavior of your carousel. The available types will dictate how your images are displayed.
* **Item Height:** Set the height for each item within the carousel. Consistent heights are ideal for uniformity, but varying heights can create a dynamic, artistic effect.
* **Slider Per View:** Specify how many slides are visible at once. You can opt for a single slide or multiple slides to be displayed simultaneously, depending on your design needs.
* **Item Space Between**: This setting allows you to control the space between each slide. Adjusting the spacing can help create a more open or tightly packed carousel layout.
* **Autoplay Switch:** Enable this switch to cycle the carousel automatically through slides. This is particularly useful for carousels on homepages or landing pages where you want to showcase multiple images without user interaction.

| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/CyrvvbZnSMji36YulCCrrkehPhmnyJ6H5zseINyS.jpg) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/KKXPEZAXaMA6NENdNrhuy1yxEtLaPNPgW6M1yccx.jpg) |
|---|---|

* **Enable Loop Switch:** When enabled, the carousel will continuously loop through the slides, returning to the first slide after the last slide is displayed. This is ideal for creating an endless slideshow effect.
* **Center Slide:** This option focuses the carousel on the center slide, making it the most prominent image in view. It’s especially effective in the Coverflow carousel type.
* **Pause on Hover Switch:** Toggle this switch to pause the carousel’s autoplay when a user hovers over it. This feature enhances user control and ensures that important content isn’t missed.
* **Use Keyboard Navigation:** Enable this to allow users to navigate through the carousel using the left and right arrow keys on their keyboard, improving accessibility.
* **Auto Width Image Switch:** When enabled, images will automatically adjust their width to fit the container. This is useful for maintaining a responsive design across different screen sizes.
* **Force Full Width Switch:** This setting forces the carousel to occupy the full width of its container, creating a more immersive viewing experience.

### **3. Pagination Settings**

Pagination is essential for helping users understand where they are within the carousel. The Pagination Settings allow you to customize the appearance and behavior of these navigational elements.

#### **1. Show Pagination Switch**

Enable this switch to display pagination controls, helping users navigate between slides.

* **Pagination Type:** Choose between "Bullet" and "Fraction" pagination styles: 
    * **Bullet:** Displays small dots to indicate each slide.
    * **Fraction:** Shows the current slide number in relation to the total number of slides (e.g., 2/5).
* **Pagination Position:** Set the position of the pagination within the carousel. You can choose from top, right, left, or bottom placements.\\
* **Pagination Alignment:** Align the pagination to the left, center, or right, depending on the overall design and layout of your page.
* **Pagination Alignment:** Align the pagination to the left, center, or right, depending on the overall design and layout of your page.
* **Image Pagination Switch:** Enable this to use thumbnail images as pagination indicators. This provides a more visual navigation option.

| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/CWrP8mrnqKV07UWOS9TPwkqQV9VZGIZonqkKQ7Or.jpg) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/lPUStkJ6tL84ZB231IYdbEPE0YhZGG3mbESTJ9MI.jpg) |
|---|---|

* **Dynamic Bullet Switch:** Enable dynamic bullets, where the pagination bullets will animate or change style based on the active slide.
* **Bullet Color:** Customize the color of pagination bullets to match your branding or page design.
* **Bullet Size:** Adjust the size of the bullets for better visibility or to create a subtle navigation option.
* **Bullet Border Radius:** Modify the bullet’s border radius to change its shape (e.g., round, square).
* **Active Bullet Style Switch:** This option allows you to apply a unique style to the active pagination bullet, making it stand out from the inactive ones.
* **Pagination Container Margin:** Adjust the margin around the pagination container to fine-tune its position and spacing within the carousel.

## **Parent Design Tab Customization**

### **1. Overlay**

**Enable Overlay Switch**

Enable this switch to add an overlay to the carousel images. Overlays can enhance the visual appeal of your images and make text more readable.

**Background Styling Options:**

* **Background Color:** Choose a solid background color for the overlay.
* **Background Image:** Add a background image for the overlay, which can add depth and texture to your carousel.
* **Background Gradient Color:** Apply a gradient color to the overlay for a more dynamic visual effect. You can customize the direction and colors of the gradient to match your design theme.

### **2. Hover Settings**

* **Border Animation**

* * **Border Animation Style:** Choose from over 20 different border animation styles to add dynamic effects when users hover over the carousel items.
    * **Border Color:** Customize the color of the border animation to match or contrast with your site’s color scheme.
    * **Border Width:** Set the width of the border to enhance its visibility and impact.
    * **Border Space:** Adjust the space between the border and the image to create a desired visual effect.

* **Image Hover Type:** Choose from over 10 different image hover effects, including Zoom, Pan, Rotate, and Blur. These effects add interactivity and can make your carousel more engaging.
* **Image Opacity When Hovered:** Control the opacity of the image when hovered over. This feature is useful for creating focus on text or other overlay elements.
* **Content Space:** Adjust the space around the content (title, description, button) within each slide. This helps ensure that the content is readable and aesthetically pleasing.
* **Content Position:** Choose from 9+ content position options to determine where the text and buttons appear within the slide.
* **Show Title on Hover:**

* * **Title Reveal Animation:** Select from 12+ modern animations to reveal the title when the user hovers over the slide. These animations add a sophisticated touch to your carousel.

* **Show Description on Hover:**

* * **Description Reveal Animation:** Choose from 12+ animations to reveal the description when the user hovers over the slide.

* **Show Call to Action Button on Hover:**

* * **Button Reveal Animation:** Apply one of 12+ button reveal animations to create dynamic interactions when users hover over the slide.

### **3. Arrow Settings**

Arrows are essential for navigation within the carousel. The Arrow Settings section allows you to customize their appearance and behavior.

* **Enable Arrow Switch:** Enable this switch to display navigation arrows on the carousel, allowing users to manually cycle through slides.
* **Previous and Next Arrow Icon Selection Panel:** Choose icons for the previous and next arrows from a selection panel. This allows you to match the arrows with the overall design of your carousel.
* **Arrow Position:** Set the position of the arrows within the carousel. You can place them at the edges, corners, or center depending on your design preference.
* **Arrow Alignment:** Align the arrows to the left, center, or right for better visual harmony.
* **Arrow Opacity:** Adjust the opacity of the arrows to make them more or less prominent within the carousel.
* **Arrow Icon Color:** Customize the color of the arrow icons to ensure they are easily visible against the background.
* **Arrow Icon Size:** Set the size of the arrow icons, making them larger or smaller depending on the importance of navigation.
* **Arrow Icon Background Color:** Choose a background color for the arrow icons to help them stand out against the carousel images.
* **Arrow Icon Border Color:** Set a border color around the arrow icons to give them a defined edge.
* **Arrow Icon Border Radius:** Adjust the border radius to make the arrow icons square, round, or anywhere in between.
* **Arrow Icon Border Style:** Choose a border style for the arrow icons, such as solid, dashed, or dotted, to match your site’s design theme.
* **Previous Arrow Margin & Padding:** Set the margin and padding for the previous arrow to control its placement and spacing.
* **Arrow Container Margin & Padding:** Control the margin and padding around the entire arrow container for optimal spacing and alignment.

### **4. Font Styles**

Typography is a key aspect of design. The Font Styles section allows you to customize the text within your carousel. Customize the font size, weight, line height, letter spacing, text shadow, font style (bold, italic, underline), alignment, color, margin, and padding for the title and description text.

### **5. Fraction Font:**

If you’re using fraction pagination, this setting allows you to style the fraction text, including font size, weight, line height, letter spacing, font style, alignment, and color.

### **6. Pagination Settings**

* **Image Pagination Border Styles:** Customize the border styles around image pagination, including border width, color, and style.
* **Image Pagination Box Shadows:** Add shadow effects to the image pagination for a more pronounced and 3D appearance.
* **Active Image Pagination Border Styles:** Apply distinct styles to the border of the active image pagination to make it stand out.
* **Active Image Pagination Box Shadows:** Enhance the active image pagination with shadow effects, helping users easily identify the current slide.

### 7. Button Settings

The Button Settings section offers global settings for all buttons within the carousel. Customize the appearance of all buttons in the carousel, including font size, weight, letter spacing, border radius, color, background color, border style, padding, and margin.

The Image Carousel module by Divigrid is a versatile tool that allows you to create highly customizable and visually appealing image sliders within Divi. By understanding and leveraging the settings within the Content and Design tabs, you can create carousels that not only look great but also function seamlessly across different devices and screen sizes. This documentation serves as a comprehensive guide to help you get the most out of the Image Carousel module, ensuring your carousels are both professional and user-friendly.

Whether you’re showcasing a portfolio, highlighting product features, or creating an engaging slideshow, the Image Carousel module provides all the tools you need to make your content stand out.

## **FAQs About Image Carousel**

#### **Q. Is the Image Carousel module responsive?**

Yes, the Image Carousel module is fully responsive and can be customized to display correctly on all device sizes.

#### **Q. What types of content can I add to the Image Carousel module?**

You can add images, titles, descriptions, and buttons to each slide in the carousel.

#### **Q. How do I adjust the spacing between items in the carousel?**

The spacing between items can be adjusted in the Parent Content tab under Carousel Settings by changing the "Item Space Between" setting. **Go to Carousel Settings >> Item Space Between**

**![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/mfyMcEh15RUghTe7flWJovXUnWpVKkxVHTuQMxuP.jpg)**

#### **Q. Can I control the height of the items in the carousel?**

Yes, the item height can be set in the Parent Content tab under Carousel Settings. **o to Carousel Settings >> Item Height**

**![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/tSn1CPzRNB7jcT0Mi2IOEIlLdJJupUBaaVeSLpnI.jpg)**

#### **Q. What is the “Center Slide” option?**

The "Center Slide" option focuses on the center item in the carousel, making it more prominent compared to the others.

#### **Q. How do I enable keyboard navigation for the carousel?**

Keyboard navigation can be enabled in the Parent Content tab under Carousel Settings by turning on the "Use Keyboard Navigation" switch. **Parent Content Tab >> Carousel Settings >> Use Navigation switch >> Turn ON**

#### **Q. Can I apply hover effects to the images in the carousel?**

Yes, hover effects can be applied in the Design tab under Hover Settings. You can choose from various effects like zoom, pan, rotate, and more.

#### **Q. What is the “Auto Width Image” feature?**

The "Auto Width Image" feature automatically adjusts the image width to fit within the carousel dimensions.

#### **Q. Can I pause the carousel when the user hovers over it?**

Yes, you can enable this by turning on the "Pause On Hover" switch in the Carousel Settings.

#### **Q. What types of pagination are available in the Image Carousel module?**

The module supports bullet and fraction pagination types, which can be selected in the Content tab under Pagination Settings.

#### **Q. How do I apply hover animations to the title and description?**

Hover animations for the title and description can be enabled and customized in the Parent Design tab under Hover Settings, with options for revealing animations and effects.

| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/wD1nlE6YHMXuANlAj3yJQId8VVAUcN8DoSsOtqYF.jpg) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/1anTn7ET5JNSrltDfKKllSa4PDJzZ9QxY7Q2b0V3.jpg) |
|---|---|

#### **Q. What are border animation settings in the Hover Settings?**

Border animation settings allow you to add animated borders to the images on hover, with over 20 animation styles to choose from.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/OtotX9jiwAIKQStc5wzHBtYxnB2tyoGo7Cx1mNyU.jpg)

#### **Q. How do I optimize the Image Carousel module for SEO?**

To optimize the Image Carousel for SEO, ensure that alt text is provided for all images, use descriptive titles and descriptions, and consider using pagination for better indexing.

#### **Q. How to display images instead of bullets for pagination in the Image Carousel module**

To display images instead of bullets for pagination in the Image Carousel module, follow these steps:

**Enable Image Pagination:**

In the Parent Content tab, navigate to Pagination Settings.
Ensure the **Show Pagination switch** is turned on.
Enable the **Image Pagination switch**. This automatically uses the images from your carousel as pagination indicators, so there's no need to upload separate images. Use this setting to adjust the width of the pagination images to suit your design preferences and to differentiate between active and inactive pagination images, adjust the Inactive Pagination Image Opacity setting. Lowering the opacity for inactive images will help highlight the active image while still keeping the others visible.
By following these steps, you can effectively use the carousel's own images as pagination indicators, enhancing the navigation experience.


# Image Hotspot


## Overview 

Welcome to the Image Hotspot Documentation, where creativity meets interactivity! Image hotspots are your gateway to transforming static images into captivating and informative visual experiences. This comprehensive guide will walk you through the process of implementing, customizing, and optimizing image hotspots to elevate your projects to new heights.

Image hotspots are dynamic overlays strategically positioned on images to create interactive points of interest. By responding to user interactions such as clicks or hovers, hotspots unveil additional information, multimedia content, or navigational elements. Whether you're building educational content, interactive maps, or product showcases, image hotspots inject life into your visuals, fostering engagement and exploration.

## 
Image Hotspot Item Content Tab

#### **👉 Spot Content**

#### **👉 Spot Settings**

#### **👉 Tooltip Content**

**Spot Content:**

You will get three types of options in Spot Content. Images, icons, and text. Find out how to use different spot types to tell your story. Each type has its own flair, and we'll guide you on how to make the most of them.

**Spot Settings** In the world of image hotspots, the spotlight is on spot settings—your tools for fine-tuning the placement, size, and animation of each interactive element. Adjust the horizontal and vertical positions with ease, ensuring your spots align perfectly with your visual narrative. Tailor the spot width and height to suit the content, providing a seamless and visually pleasing experience. Dive into the world of animations by toggling the animation switch and selecting from five distinctive styles. Want to add a touch of flair? Customize the animation color to match your project's aesthetic. With spot settings, your interactive canvas is not just a canvas—it's a masterpiece in the making. Explore the possibilities and let your creativity shine!

**Tooltip Content**

Welcome to the Tooltip Content section—a place where you weave a layer of informative magic into your image hotspots. Choose between two options: **Basic Tooltip(Text)** and **Library Content Tooltip**, each offering unique advantages.

**Basic Tooltip(Text):** Craft your narrative with the essentials. Toggle the tooltip image switch to include visuals, enhancing engagement. Prioritize SEO with the image alt attribute. Then, let your words shine by adding descriptive tooltip text. Simple, effective, and perfect for a personalized touch.

**Library Content Tooltip:** For a seamless experience, opt for Library Content. Dive into your Divi Library, select content, and effortlessly integrate it into your tooltips. No need to recreate the wheel—just choose, save, and elevate your user experience.

## Image Hotspot Item Design Tab

With the Image Hotspot Item Design Tab, each set is a brushstroke, allowing you to paint a masterpiece of interactive storytelling. Within this tab, you'll find a myriad of settings that empower you to tailor the appearance of your image hotspots with precision and creativity.

#### **👉 Spot Icon Design:** 

The heartbeat of your hotspot, the Spot Icon Design settings, allows you to customize the essence of guidance and interaction. Choose the spot icon color to align seamlessly with your visual palette, ensuring coherence within your design. Tailor the spot icon size, allowing it to command attention or gracefully complement the surrounding elements. Introduce a spot icon background for an added layer of distinction, enhancing the visual impact of your interactive markers.

#### **👉 Image Styling:** 

When you choose spot type image you will find its design options.  For those who leverage the storytelling power of images, the Design tab provides a canvas for customization. Define the image width and height, ensuring your visuals fit harmoniously into your overall design scheme. Fine-tune margins and padding to sculpt the spacing around your image hotspot, achieving the perfect balance in your composition. Borders and box shadows further elevate the aesthetic, adding depth and dimension to your visual narrative.

#### **👉 Responsive Magic:**

In the dynamic landscape of various devices, ensure your image hotspots maintain their allure. Responsive settings for image or icon margin, padding, and sizing ensure a seamless experience, whether viewed on a desktop, tablet, or smartphone. This responsive magic guarantees that your carefully crafted design adapts effortlessly to the diverse screens of your audience.

#### **👉 Spot Font:**

Beyond the visual elements, the Spot Font settings provide the typography tools to express your narrative eloquently. Choose from a range of fonts to infuse personality into your text. Adjust font size and line height for optimal readability and visual hierarchy. Harmonize your text with the overall color scheme through font color settings, and experiment with font styles to emphasize key points. Responsive typography ensures your text maintains its impact across different screen sizes.

#### **👉 Additional Design Elements:**

Comprehensive design encompasses every detail. Adjust the image or icon margin, padding, border, and box shadow to refine the spatial relationships within your image hotspots. Precision in positioning, alignment, and transformation of text adds an extra layer of finesse to your visual storytelling.

## Image Hotspot Content Tab

#### **👉 Content**

#### **👉 Tooltip Settings**

#### Hotspot Image

At the heart of the Hotspot module lies the significance of the Main Image—a canvas that serves as the cornerstone for the entire interactive narrative. This primary image dictates the positions and arrangements of all hotspot items, dictating the visual choreography that unfolds for users. Let's delve into the pivotal role that the Main Image plays in shaping the user experience within this module.
The Main Image acts as the visual anchor, determining the spatial coordinates of each hotspot item. Every element, from spot icons to images and text, finds its place on this canvas, creating a cohesive and harmonious composition. The Main Image is not just a backdrop; it is the stage upon which your interactive story unfolds.
All hotspot items align themselves with the features and landmarks within the Main Image. The positions are intricately connected to the visual cues present in this central canvas, ensuring that users seamlessly navigate through the interactive elements, fostering a sense of intuitive exploration.

#### **Tooltip Settings**

The Tooltip Settings within the Hotspot module offer a plethora of customization options, transforming your interactive narrative into a finely tuned and user-centric experience. Let's unravel the key points that define the dynamics of tooltips, shaping the way users engage with your content.

**1. Use Tooltip Switch:**

At the heart of tooltip functionality lies the Use Tooltip switch. When activated, tooltips come to life, providing additional information upon interaction with hotspot items. Conversely, when turned off, tooltips gracefully step aside, allowing users to explore without the intrusion of informational overlays.

**2. Arrow Switch:**

The Arrow Switch introduces a visual cue to hotspot items. When activated, arrows gracefully guide users, indicating the direction of the associated tooltip. This subtle addition enhances the user experience, providing intuitive navigation and orientation within the interactive canvas.

 | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/y4y9c98WCWFkmVULoivUmXyzza2wsEnuvIG9gJio.png) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/EVlN24UrKLHnyruw1ZrjtJ6YeEVkcGtmymkNjFYe.png) |
|---|---|

**3. Tooltip Placement and Animation Styles:**

Customization reaches new heights with the ability to strategically position tooltips in 12 different places empowering users to finely tune the placement of informational overlays. The visual allure of tooltips reaches new heights with a curated selection of six animation styles, infusing a dynamic and engaging dimension to the unveiling of information.

**4. Trigger Options:**

The trigger options dictate the user interaction required to reveal tooltip content. Choose between hover and click triggers based on your design intent. Hover triggers activate tooltips upon cursor hover, seamlessly integrating information into the user's exploration. On the other hand, click triggers offer a deliberate interaction, ensuring tooltips appear only upon a user's intentional click on a hotspot item.

**5. Hover Over Tooltip:**

The Hover Over Tooltip switch introduces an additional layer of control. Activate this switch to enable or disable the tooltip hover area, allowing you to define whether tooltips appear when the cursor hovers over the item. The Tooltip Content Hide Delay complements this feature, determining how long tooltips persist after the cursor leaves the hotspot item.

**6. Follow Cursor Switch:**

For a dynamic and fluid experience, the Follow Cursor Switch allows tooltips to move with the cursor, revealing content precisely where the user's attention is focused. This feature enhances engagement, making the tooltip content an extension of the user's exploration.

**7. Max-Width:**

Fine-tune the visual aesthetics of tooltips with the Max-Width setting, defining the maximum width that tooltips can occupy. This ensures that tooltips maintain an optimal size, balancing information density with a visually pleasing presentation.

**8. Tooltip Distance Switch:**

Within this setting, two distinct options, Tooltip Arrow Move, and Tooltip Distance, provide nuanced control. Tooltip Arrow Move creates a defined distance between the hotspot item and the arrow, ensuring a visually appealing layout. Tooltip Distance, on the other hand, specifies the overall distance from the hotspot item to the tooltip content, allowing for precise placement and spacing.

## Image Hotspot Design Tab

#### **👉** Global Spot Image & Icon Settings

#### **👉** Global Spot Font Settings

#### **👉** Tooltip Image

#### **👉** Tooltip Style

#### **👉** Tooltip Fonts

#### **👉** Item Settings

**Global Spot Image & Icon Settings**

There is a global settings feature for grouping to avoid repeating the same actions over and over again. The Global Spot Image & Icon Settings serve as the curator of visual consistency in the Hotspot module, allowing for a unified and polished design across all hotspot items. From defining the color and size of spot icons to controlling the dimensions of spot images, these settings provide a cohesive visual language. The Spot Icon Background adds distinction, while Spot Margin and Padding ensure precise spatial relationships, guiding users through an organized exploration. With options to customize spot item borders and introduce subtle box shadows, these global settings add the finishing touches, elevating the overall aesthetic of the interactive canvas. In essence, these settings empower creators to craft an immersive and harmonious visual narrative, where every hotspot item contributes seamlessly to the cohesive design language.

**Global Spot Font Settings**

The Global Spot Font Settings in the Hotspot module serve as the orchestrators of typographic consistency, providing creators with centralized control over font type, size, color, and styling. These settings unify the textual elements across hotspot items, establishing a cohesive and visually pleasing narrative. With options for responsive typography, ensuring adaptability across diverse devices, and features like text alignment and transformations, creators can craft a seamless reading experience. Notably, the global font settings feature for grouping minimizes redundancy, enabling creators to apply the same font adjustments effortlessly across multiple hotspot items.

**Tooltip Image**

**1. Alignment:** Alignment options for Tooltip Images—left, center, and right—allow creators to precisely position images in relation to the associated tooltips. This choice ensures a visually pleasing and intentional layout, enhancing the overall design coherence.

**2. Tooltip Image Width and Height:** Fine-tune the dimensions of Tooltip Images with global control over width and height. This setting ensures uniformity, creating a consistent visual language that complements the entire interactive canvas.

**3. Margin and Padding:** Spatial relationships play a crucial role in design, and Tooltip Image settings provide control over margin and padding. These options allow for meticulous adjustments, ensuring images are appropriately spaced within tooltips, creating a polished and well-organized appearance.

**4. Border and Box Shadow:** Customization extends to the finer details with the ability to add borders and box shadows to Tooltip Images. Whether it's a subtle border or a gentle shadow, these settings add a touch of sophistication, contributing to the overall visual appeal.

**Tooltip Style**

The Tooltip Style settings within the Hotspot module offer a palette of customization options, transforming informational overlays into visually refined elements. Key points in Tooltip Style settings shape the aesthetic nuances of tooltips:

**1. Tooltip Background:** The foundation of Tooltip Style—the background setting—allows creators to define the color or texture that envelops the tooltip. This choice not only sets the tone for the overall design but also ensures a visually cohesive and engaging backdrop.

**2. Tooltip Arrow Color:** The Tooltip Arrow Color setting introduces a subtle yet impactful detail, allowing creators to customize the color of the arrow that points to the hotspot item. This choice adds a touch of flair and enhances the visual harmony between tooltips and the interactive canvas.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/V82XlHvJ3WuR1C8ysg3uc01aCY1MQesGREetAkmF.png)

**3. Tooltip Margin and Padding:** Spatial precision is achieved through the Tooltip Margin and Padding settings. Creators can fine-tune the spacing around tooltips, ensuring they seamlessly integrate into the design layout. This attention to detail contributes to a polished and well-organized appearance.

**4. Border and Box Shadow:** Refinement extends to the edges of tooltips with options for Borders and Box Shadows. Creators can add borders to define the tooltip's boundaries and introduce box shadows for a subtle depth effect, elevating the overall sophistication of the design.

In addition to these individual settings, the Tooltip Style settings feature a global capability for grouping, allowing creators to apply the same style adjustments effortlessly across multiple tooltips. This feature streamlines the design process, promoting consistency and efficiency.

**Tooltip Fonts & Tooltip Heading Fonts**

Tooltip Fonts and Tooltip Heading Fonts emerged as the architects of typographic excellence, enabling creators to sculpt a visually immersive textual narrative. As the narrative unfolds within tooltips.

The Paragraph (**p**) setting becomes pivotal, offering creators the ability to fine-tune font types, sizes, and colors, ensuring a consistent and readable structure. Unordered Lists (**ul**) and Ordered Lists (**ol**) find their distinct style within tooltips, with customized fonts shaping the aesthetic of bullet points or numbering, seamlessly integrating lists into the overall typographic theme. Links (**a**) take center stage with font customization, allowing creators to distinguish hyperlinks within tooltips, not only guiding user interaction but also contributing to the overall elegance of the design. The Blockquote (**quote**) setting introduces a unique typographic identity for quoted content within tooltips, enhancing visual clarity and prominence.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/9J09z5tskAThPRmp3NPa1gzqiLRs1c097YgWJ7q9.png)

The hierarchical structure of Headings (**h1, h2, h3, h4, h5, h6**) receives meticulous attention, empowering creators to individually style and customize fonts, sizes, and colors, establishing a clear hierarchy and visual flow. The global settings feature for grouping becomes a beacon of efficiency, streamlining the design process by enabling creators to apply consistent font adjustments effortlessly across diverse textual elements within tooltips. In essence, Tooltip Fonts and Tooltip Heading Fonts empower creators to not only convey information but to weave a harmonious and visually refined typographic narrative within tooltips, where each element plays a pivotal role in shaping the overall user experience.

**Item Settings**




Item Settings within the Hotspot module serve & grant creators control over the visual characteristics of each hotspot item. By customizing the Item Width and Height, designers can ensure that each element seamlessly integrates into the overall layout, fostering a sense of precision and intentionality. The Item Background Color becomes a vibrant canvas, allowing for personalization that aligns with the overarching theme, creating a cohesive and visually appealing interactive canvas.

Spatial relationships are finely tuned through Item Margin and Padding settings, ensuring each hotspot item finds its strategic place within the design, presenting a polished and organized appearance. With the addition of Borders and Box Shadows, creators can introduce a layer of refinement, framing each item elegantly and adding a subtle depth effect that elevates the overall aesthetic of the interactive narrative.

## Common Questions About Image Hotspots

#### **🛑 Can I give each spot item a different or the same background?**

**✔️** Yes, you have the flexibility to assign either a distinct or uniform background to each spot item within the Hotspot module. If a consistent background is desired for all items, navigate to the parent Design tab labeled "Item Settings," where you can select a background color, gradient, or image to be applied uniformly across all items. Conversely, for individualized backgrounds, access the Item Content tab, specifically named "Background," and configure unique backgrounds for each spot item as per your design preferences. This dual approach provides creators with the freedom to tailor the visual presentation of spot items according to their specific design goals.

#### **🛑 From where can I change the position of the spot item?**

**✔️** To adjust the position of the spot item within the Hotspot module, navigate to the "Spot Settings" within the Image Hotspot Item Content tab. Within the Spot Settings, you will encounter two pivotal options—horizontal position and vertical position. These settings empower you to precisely place the spot item within the interactive canvas, allowing for fine-tuned control over both its horizontal and vertical coordinates. By manipulating these parameters, you can strategically position the spot item according to your design preferences and create an engaging and visually pleasing interactive experience.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/47XPH2CiiBP81mJcmWNjW12XBrDsMPK9tcn3QSrC.png)

#### **🛑 Is it possible for each spot item to have a distinct image, icon, or text?**

**✔️** Absolutely, each spot item can indeed have a distinct image, icon, or text. The flexibility lies in the Spot Content options, where you can individually select your desired media or text for each item. Simply choose the preferred spot type – be it an image, icon, or text – within the Spot Content settings for each item, providing a tailored and varied visual or informational experience across the interactive canvas.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/vPHOZV5DHC2oJeGPjmpk5y9NaG3zvigNt2P9QCJa.png)

#### **🛑 Is it possible to use different animations for each spot item?**

**✔️** Certainly, you can absolutely employ various animations for each spot item within the Hotspot module. The customization options reach the animation styles applied to individual items. By activating the spot animation switch for each spot item, you have the freedom to choose distinct animations, resulting in a diverse and captivating visual experience as each piece of content is revealed. This flexibility provides creators with the means to imbue a distinctive flair into each spot item, enhancing the overall dynamism and allure of the interactive narrative.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/X9D72QyTb0tmEhFWbE7IdHOyrB4ccoMUmy7NXDAQ.png)

#### **🛑** How can I use the library layout?

**✔️** To implement the library layout, start by selecting the library layout option in the Tooltip Content Type option.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/7IXNwKDC08hBBZpFGUxqOv9fwM2yMVvB1pwgtWg0.png)

Upon selection, a "Select Layout" box will appear, offering various layouts you saved previously. Choose the preferred layout, and save your selection.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/7eGpzcX7JVvcTzFRqV5Vnon55kBWaoA3i3JgUH1l.png)

 It's important to note that the changes made using the library layout are visible exclusively on the front end of the website, but not showing in the visual builder. This streamlined process allows users to effortlessly integrate and customize library layouts, ensuring a visually appealing and well-structured design for their website or platform.


# Image Mask Slider


## **Divi Image Mask Slider**

Image masking sliders are not very common in the Divi marketplace. The **Image Mask Slider** is very lightweight, unique, and attractive. A slider created using CSS masks, animations, and transitions that will leave you mesmerized.

This documentation will help you to understand how to use the image mask slider efficiently.

Here's a quick look at the names of the new toggles you'll get when you activate the Image Mask slider.

**Content Tab**

* Style
* Mask Style
* Slider tags
 
**Advanced Tab**

* Slider Settings
* Image Settings
* Arrow Settings
* Slider Text Style
* Badge Settings
* Content Wrapper
* Button
 
We will gradually learn how these toggles work. Before that, let's answer some common questions to help us understand how to use this image mask slider in the right way.

1. **What is Image Mask Slider?**
    
    Image masking is an extremely useful technique to edit your images in a non-destructive way. It is a non-destructive way to replace the original background and make the image unique. Typically, image masking is the process of limiting a certain visible adjustment in photos. With image masking, you can “conceal and reveal,” meaning you can hide portions of your image and display other portions, allowing you much more flexibility in how you edit your images.
2. **How does the image mask slider work?** Our mask slider relies on two separate sprite mask images and they work together by adjusting the background image. The sprite mask image is hidden and added to the module which is not visible from the outside. x-axis values, y-axis values, and mask image steps are integrated very efficiently. You can easily create new effects by changing this field in the Mask Style toggle settings in the module. The entire slide is completed by combining the z-index values of the previous background image, the current background image, and the next background image.
3. **Is using a background image essential for the image mask slider?** Yes of course! The background image is the actual part of this slider. If no background image is used or the same background image is used, the slider will not work. Note that using the same background image will not show the effect of the slider.
4. **What will be the problem if I change the value of the Previous and Forward Mask styles?** 
    The values we set as defaults are highly calculated and efficient. If someone wants to change that value, they can. Of course, care should be taken when changing the values of the Previous and Next Mask sliders as a small value change will change the effect of the entire slider.
5. **How can badges be used outside of the container?** 
    If design convenience requires the badge to extend outside the container, Divi's custom CSS field is the way to go. Then the visibility toggle for horizontal overflow and vertical overflow should be set to Visible from its default value.
 
### Image Mask Slider Item Settings

Divi's default toggles have been removed except for some toggles required for sliders from the Image Mask item. There are only 3 toggles in the item to create a perfect slide. Every toggle is perfectly modified and works beautifully. The Item toggles are -

* Images
* Contents
* Badge
 
The image toggle contains the slider background image field essential for sliding. There is also an extra image switch for using images with content. Turning on the switch will bring up the image field. The image can be shifted to the left or right position from the options in the Design tab.

Title, subtitle, and content text fields have a clickable button to link to something. All have styling options and alignment features.

If one wants to use a badge in the slider, a badge field will appear by turning on the switch located in the badge toggle. The slider can be made more attractive by adding a highlighted text or number. Options for styling the badge are on the Design tab.

 | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/vT127DrcwYKLVCWk5WR81MXMFdgqUgCZS6iuwHyI.png) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/Yev5j9Mk5i0r1CxSuUeDYjnrYsBVyeAW7jse1lXk.png) |
|---|---|

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/6CqABqyvAvB5p7sAeTPBTZYSigfaU3AYJWXHFuCb.png)

### Image Mask Slider Settings

The first toggle on the Image Mask slider is **Style**. From here you can choose the styling of the slider. The default value will be no masking but sliding. The rest will show different sliding effects. Define the sliding style to suit the needs of the website from this toggle.

**The Mask Style toggle** provides some fields for forward and previous mask styles to change the preferred sliding effect from the style. Add values to those fields carefully. Because if you are not careful or if you input arbitrary values, the effect of sliding can change completely. We suggest not changing the masking value. By doing this you will get the perfect sliding effect.

There is also an option to change the HTML tag of the content from **the slider tag**. And the rest of the toggles are the default toggles of Divi.

 | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/lmAFWQ0gKP3qnd5n3GvHz0WgTDOsnsmcIc89lWCf.png) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/3sIRZi23tqEG50e5293a54sZ708Bl0I84Rzwxuxc.png) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/MZp4Wi4CFCkE1EFgl5E7EQW8mE1MeeiRcmmhe6gF.png) |
|---|---|---|

### Image Mask Slider Design Tab Settings

### **👉 Slider Settings**

The height of the slider container and the background overlay option is provided as an extra field to highlight the content within the slider. Backgrounds, gradient colors, or images can also be used in overlays.

### **👉 Image Settings**

This **Image Settings** provide essential styling options including padding, margin, height, width, border, and box-shadow to style an image. There is also an option to set the image to the left/right position of the content. Even in the mobile version, there is an on/off switch to show images.
In the desktop, and tablet versions, the content and images will be positioned side by side in rows but in the mobile version, the images and content will show in columns. That is, the image will show first and the contents below it. If you don't want to show the image in the mobile version, you have to turn off the "Use image in mobile" switch from the option.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/pFn0uJOVziuSh4g4UaYEzUHAB4Z0lFz2ZYjEoVsl.png)

### **👉 Arrow Settings**

The slider has arrows to move to the previous and next slides. You can choose any icon from four types of arrow icons. Even there is a select field to set the arrow icons to specific positions. Also, there are left and right arrow position setting fields to set the left and right arrow positions. Through which the arrow can be moved to the left or right side, there are all the necessary settings fields for styling the arrows in this **Arrow Settings**.

 | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/yma8Gz2EwzG95fEOLKvaB1zft1LF4UBZ0sOecbF0.png) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/kW9g0q7BrSUTk1oPBYBaGQ4KoPwy3pXHuVjqXEuD.png) |
|---|---|

### **👉 Slider Text Style**

Divi's default styling options for styling titles, subtitles, and text are included in the form of a subtoggle. From this toggle, the contents of the slider can be styled simultaneously.

### **👉 Badge Settings**

Added badges to bring some variety to the slider. Many times offers or sales are posted through sliders. Then this badge can play an important role. The position of the badges can be set to a suitable position. If the badge needs to be outside the container, visibility must be turned on from the custom CSS tab of the div. Besides, there is an option to style the badge in these **Badge Settings**.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/bnqjFcCPrQckhgu00R4lhOmX0NKwggR85ENuD824.png)

### **👉 Content Wrapper**

Added a settings field called Content Wrapper to wrap slider titles, subtitles, text, and buttons. Wrrapar's title, subtitle, text, and buttons will show in column form. Each content can be aligned in the left, center, or right position. There are styling settings to give the content wrapper a specific height/width and to style it.

**And that’s it! I hope you find this tutorial useful and have fun creating your own cool mask effects! Don’t hesitate to share your creations, We would love to see them!**


# Divi Inline Popup Grid


Once you have installed **DiviGrid** Module, you will find the **Divigrid inline popup** alongside the other Divi Modules available in the “**Insert Module**” window.

## Divigrid Inline Popup Module

An inline popup displays an area within a small popup element on the current page. It's like a dialog but doesn't have a title bar, header, or close button.
Inline pop-ups don't appear to be separate windows but appear to be separate parts of the same page. Our inline popup exposes hidden content vertically.

We hope you will enjoy our very own new **Divi inline popup grid**. Let's see what we have done in this module.

## Inline Popup Grid Item Settings

An inline popup grid item has two sub-toggles for writing content.

### a. Display Content

The Display Content sub toggle is the preview item that will be displayed by default. The content that will be written or given here will show in the item. To learn more, click on the Display item to show the contents of the details of contents as an inline popup.

As display content, you can add images, image alt text, title subtitle, text, and overlay text and do styling as required.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/QMRk2bB5cLWaWMZSyUR5qpJ6OiPMcCHMXtnalhyq.jpg)

### b. Popup Content

If you want to describe something in detail or take it to another website, you can display some content inline pop-ups. An inline pop-up is to describe something in detail to the client without the hassle of redirecting. If you want to discuss content in detail, this inline pop-up can be the best solution for you. Inline pop-up, you want to add an image, title, subtitle, text, a button for the link, button text, link in the same window or new window as pop-up content, and add a social media link of the company or individual. But you can add if you want.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/jBHGy1JjaqT0EGlGi0Rg9BeQpGxDlJTV208TSdhV.jpg)

## **Divi Inline Popup Content Settings**

After inserting the Divi inline popup grid you will find a new toggle called grid settings alongside the defaults toggles.

### Grid Settings

Inside the Grid Settings toggle, there are four more switches, grid options, and some fields for styling. The switches are listed below.

* **Enable Auto Responsive,**
* **Popup Activate First,**
* **Enable Scroll To Viewport,**
* **Enable Backdrop Filter**
 
#### Eneble Auto Responsive :

If you enable the auto responsive **ON**, it will detect the item's minimum width and set the item per column automatically.

#### Popup Activate First :

Activate the first item popup when the page is loaded. By default, the switch is **OFF**. but if you **ON** this switch it will activate the first item's popup content.

#### Enable Scroll To Viewport

The virtual scroll viewport itself acts as the scrolling element by default. After clicking on an element, the page scrolls down to viewport. By default, the switch is **OFF.**

#### Enable Backdrop Filter :

The **backdrop-filter *CSS*** property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent. By default, the switch is **OFF.**

In addition to the switch, several styling options are provided. Trying to give an idea of ​​how they work or what they do.

**Grid Column Number :**

The **Grid Column Number** specifies the number of columns in a grid container.

The values are a space-separated list, where each value specifies the size of the respective column.

**Grid Gap :**

The Grid Gap property defines the size of the gap between the rows and columns in a grid layout. By default, the grid gap is 5px but you can change the gap up to 50px for your design purpose.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/FwZhknd2lJW0GDF0ZYSTgUmpNbm4OZE4OkmF8s1T.jpg)

And there is the rest of the toggles named **Background** and **Admin Label**. The background is used for the Item's Background color or masking image.

## **Design Tab**

In the design tab, tons of new toggles have been added for design purposes. With the help of toggles such as Display Settings, Popup Settings, Display Text, Popup Text, Overlay, Custom Spacing, and Social Media. Everything can be designed very smoothly. An Advanced tab has different designing toggles for designing the contents of the inline popup grid items to facilitate the need. Also, several options have been added to some of the default toggles.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/MhxsaFRKcgAhm0qZmHSMn6UH8mleGev4EpX7rgfV.png)

### Display Settings :

In this Display Settings, there are styling options for Displaying image items. Items related to all the styling options are available in these settings.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/AjtYzAdyd8Bk1i5H3fXYWpdupNkh2i9Xt04mNJxh.jpg)

**Image position :**

You can define the position you want to keep your image from these four options (Left, Right, Top and Bottom). As per your selection, the contents will be inserted according to the position of the image.

**Image Horizontal Alignment :**

Image Position Left, Center or Right determines where you want your image to be placed when it is top or bottom position.

**Image Max Width:**

You can set the maximum width for your image from these settings.

**Image width:**

These image width settings are used to define what width the image should be to display nicely according to the display grid.

**Image Height:**

These image height settings are used to define what height the image should be to display nicely according to the display grid.

**Enable Display Image Object Position:**

After inserting the image into the container, the item box provides settings to change the position to expose the image well.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/PppLk2DBFktwmHlzRiW1pMS2IaWVNuClSIXkWPee.jpg)

**Enable Display Image Full Width:**

If you want to keep or display the image in full width, then enabling the full-width switch, will show the image in full width.

**Enable Image Hover Style :**

Several options have been added to these settings to determine how the display image will be styled when hovered over. You can choose the hover effect style as per your choice from here. No need to write custom CSS separately. By default, the switch is **OFF.**

**![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/9IGMFfH9r0oHwNEbsgOdWg8oFapiIUzyrTAJK0oW.png)**

**Enable Display Image Style:**

There are more than 25 shapes to give different shapes to your images and different design patterns. You can use these settings to avoid the hassle of writing any custom code for any shape. By default, the switch is **OFF.**

**![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/tVj71qFv6NDeJ4Z4qcNmwRqO8rPEmXgq9wTBA8qa.png)**

**Enable Display Image Wrapper Style:**

You can use these styles in image wrappers like image styles. There are more than 25 shapes to give different shapes to your images and different design patterns. You can use these settings to avoid the hassle of writing any custom code for any shape.

If both image and image wrapper styles are turned **ON**, more new styles can be created.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/VhJZIH7cAeTiEUItcJP6059VWPB3z2JsUnZstDGo.png)

**Enable Display Image Background Color:**

In the image, if you want can use the background color. The background color is given because sometimes loading issues can occur where the color comes first and the image takes time to load later.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/yxRW8RS628fYoOfZhBPxVQoNoiswe7tCZd80Mrr1.jpg)

**Image Border:**

There is nothing new to say about the border toggle. The Divi default border is the same in all modules. Here in the image, you can use the border for a beautiful design.

**Image Wrapper Border:**

Like images, image wrappers also have options to use borders.

**Item Box Shadow:**

In these settings, you will find the option to use a box shadow for your preview content box item.

### **Popup Settings**

In the popup settings, there are two sub-toggles called Basic & Misc.

#### Basic

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/Ya0Vmd80GuG5uKghJMI7jT8b2BTevShC6sYtxet1.jpg)

**Image Position:**

You can define the position you want to keep your image from these four options (Left, Right, Top and Bottom). As per your selection, the contents will be inserted according to the position of the image.

**Popup Image Horizontal Alignment:**

Image Position Left, Center or Right determines where you want your image to be placed when it is top or bottom position.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/9w0CliIGZd5pxiQ296f2eu9RnhCZZ8lpTf9RCTr0.jpg)

**Popup Item Vertical Alignment:**

Image Position Top, Center, or Bottom determines where you want your image to be placed when it is Left or Right position.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/PHCMa3IwCIF86ZKEpgNmkIjrfZ2OJ1UyOlKPaJIX.jpg)

**Popup Image width:**

These image width settings are used to define what width the image should be to display nicely according to the display grid.

**Popup Image Height:**

These image height settings are used to define what height the image should be to display nicely according to the inline popup grid.

**Enable Popup Image Style:**

There are more than 25 shapes to give different shapes to your images and different design patterns. You can use these settings to avoid the hassle of writing any custom code for any shape. By default, the switch is **OFF**.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/2ASVQWzFldGIVuEGe1GGWLLqUqAc48qu1rs6XZEQ.png)

**Enable Popup Image Object Position:**

After inserting the image into the container, the item box provides settings to change the position to expose the image well. By default, the switch is **OFF**.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/Vk2Kbx8tivb57TPV82bjRLFRBnl5PU9Sb9zItDeE.jpg)

**Popup Container Border:**

There is nothing new to say about the border toggle. The Divi default border is the same in all modules. Here in the popup container, you can use the border for a beautiful design.

#### 
Misc

**Top Bar Color:**

In this setting, you can change the color of the top bar. which is shown after the "**preview display content**" and when the inline popup is enabled.

**Popup Content Top Arrow Position :**

Here you can change the position of the top arrow at your convenience. You can make your design look beautiful by changing the arrow position very easily.

**Popup Content Top Arrow Color :**

Depending on your design you can change the color of your top arrow here.

**Popup Content Top Arrow size :**

You can define the size of the top arrow here. You can also change the size or look of your arrow. It Can be scaled from 0 to 150 pixels.

**Popup Content Top Margin From the Display Content :**

You can define how far you can enable the tip bar from your display item. You can increase or decrease the distance from 0 to 100 pixels from this range field.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/RWnUeuldHSlbfa5V0UpMrdXyhsBMOetlMwRae89g.jpg)

**Close Icon Color:**

In the popup content, there is a close icon in the top right corner to close the inline popup. for these designs, you can change or define the close icon color.

**Close Icon Size:**

You can define the size of your icon in these settings. You can resize your close icon from 0 to 150 pixels.

**Close Icon Position:**

Similarly, you can change the position of your close icon from here. If you have enlarged the icon but it is not in the right place, then you can change its position using this option.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/js7a5b4lTrtchxic7ILzPNgtPqAgWZqZKEqAcbEg.jpg)

### **Display Text**

This Display Text toggle provides all font styles for title, subtitle, and paragraph text in preview items. This toggle can change all font styles of multiple child items simultaneously.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/xittUOIvpPLtcagNm8edqeAXo6CYt2uVS7MTLXHM.jpg)

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/Le5w04derSXbYT8lvCSsp4fnqjSprJ5fD7PRItvT.jpg)

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/yFRJxOBzrN4BGSD9tGRIMnHzqGUBLqUwLf1MvlD6.jpg)

### **Popup Text**

It is also similar to the "display text" toggle. The title, subtitle, and paragraph text of all inline popups can be changed simultaneously.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/fKjdeDFVARvMpP4FCAUn1QqVky4YHHuYufd2iBpv.jpg)

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/92qK6CQxl4VbLYtsgNxzbuPiDHofy4gClM0U6w0L.jpg)

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/rSHrKXCyMNOWDCV3tAySA16eJKkZFsyTtnVgUHa3.jpg)

### **Overlay**

**Image Opacity For The Display Content:**

Use this setting to increase/decrease the opacity of the image. If you can reduce the opacity of the image and combine it with the background color, you can get some nice overlay effects.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/2h5mPlpLRL1tu7lkQPk9OdL8nmfkh32YrI80hUuV.jpg)

**Enable Display Item Overlay:**

Typically this is a switch. If turned on, you will get a field of Overlay Text and also select how the overlay style will be. Various overlay styles can be selected from here. And if you write something in the overlay text field, it will show in the middle of the preview image when overlayed.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/ZOa6R2euPgk4JEyDUzz2J2kMbPYlGG8TOiek95kJ.jpg)

**Display Item Overlay Text:**

If you want to show any text in the overlay, you can write that text in this field. That text will show when overlaid on the item.

**Display Item Overlay Style:**

You can choose any style from Overlay Style for which side or where the overlay will start. Here we have created several styles.

**Display Item Overlay Background:**

You can use an overlay background color if you want to give a specific color to the overlay after it is switched on. You can use any color that matches the color of your item.

**Overlay Text Font Items:**

All overlay text styling options are available in overlay text fonts. Here you can style the font as you wish.

### **Custom Spacing**

The margin and padding of each content between items are in this toggle settings option. Margin and padding of all child items can be given from this option.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/WxBQCNau6K7Rey6NlnUJsgJKehKoKAcxiaICzxm9.jpg)

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/eMDeMs1FkxRJiT23U48Q0PeK0uHn5uEO6LqCT1Jf.jpg)

### **Social Media**

You can use social media links below the inline pop-up content if you want. This is a very popular option now. You can use these icons for yourself or for business. Social media options can certainly give you some added benefits.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/NA578XBR7llURcpctJ5gSXEa0iHQxwvGeGj24MC5.jpg)

**Alignment:**

Social media icons can be selected on the left, center, or right. this alignment can start with the left, center, or right side.

**Icon Size:**

From here you can change the size of social media icons.

**Color And Background Color For Social Media Icon:**

You can change the color and background color of social media icons very easily. Given as a sub toggle for convenience.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/20ybu436RAmTMgFl564dl0pKTFVh72H6FN0t4xXv.jpg)

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/EGLCg6PVVK25JXE3sR2SxBETczVJvCeGm7vtRBLb.jpg)

Our guidelines have tried to give you a maximum idea of ​​how to use this module. The inline popup grid module is designed to allow detailed discussion of any content without any redirects. If you want to know anything about our module, you can knock us anytime **[Here](https://divigrid.com/contact/).**

**For Content Grid documentation please visit [Content Grid](//divigrid-support.thrivedeskdocs.com/en/divi-content-grid)**


# Multiple Button


The **Multiple Button** module in Divigrid is designed to help users create dynamic, interactive buttons for their website using the Divi theme. With extensive customization options, you can control the button layout, appearance, hover effects, fonts, borders, and more, ensuring a flexible and visually appealing design.

This documentation will guide you through the complete customization process available in both the **Content** and **Design** tabs. By the end of this, you will have a deep understanding of how to set up and modify buttons to fit your exact design needs.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/X19Wc7Rv1ASXlwP5rd4LaqeCS35WSlA2ar6STFM7.jpg)

#### **Multiple Button item customization ( Individual item )**

## **Content Tab Customization**

The **Content** tab is the cornerstone of the **Multiple Button** module, allowing you to define the fundamental elements of each button. Here, you can set up the button text, URL, and specify how the URL should open.

**Button Text**: This field allows you to specify the text displayed on each button. This is a key element for user interaction, so you should choose your text based on the purpose of the button (e.g., "Buy Now", "Learn More", "Contact Us").

**Button URL**: Here, you can input the URL to which the button links. You may want to link to different pages within your website or external pages.

***\[ Tip: Always ensure the URL is correct and begins with the appropriate protocol (`http://` or `https://`) to prevent broken links. \]***

**URL Opens**: This option allows you to choose where the linked URL will open:

* **Same Window**: Select this if you want the link to open in the current browser tab.
* **New Window**: Select this if you prefer the link to open in a new tab. This is useful for external links or resources you don’t want the user to navigate away from.

## **Design Tab Customization**

The **Design Tab** offers powerful controls for customizing the appearance of each button. This is where you can modify the hover effects, fonts, icons, borders, and spacing to create visually appealing and interactive buttons that fit your brand and design preferences.

### **Hover Effect Customization**

This setting provides access to over 30 modern CTA (Call-to-Action) button hover styles, each designed to introduce unique animation effects when users hover over the button. These hover styles add a dynamic, interactive element to your website, enhancing user engagement. You can choose from a wide range of hover effects. Each hover style offers its own set of customizable options to align with your design preferences perfectly.

**Button Transition (Milliseconds)**: This controls the speed of the hover animation. A lower value (e.g., 200ms) will create a quick, snappy transition, while a higher value (e.g., 600ms) will create a smoother, more gradual effect.

### **Button Font Customization**

**Button Background**:

You can choose between a **solid background color**, a **gradient**, or even a **background image** for your button. Each option gives you the flexibility to match your site’s overall color scheme or branding.

**Background Color**: This option lets you apply a solid background color to the text within the button.

**Gradient Background**: Create two-tone or multi-tone backgrounds by selecting two colors and adjusting the gradient direction (top to bottom, left to right, or diagonal).

**Background Image**: Upload an image to use as the background of your button. This can be especially effective for marketing or call-to-action buttons.

**Button Font Styles**:

Customize the font for button text. This ensures a consistent typography style across the entire button. You have full control over styling the button text, including font family, weight, alignment, and more.

* **Font Family**
* **Font Weight**
* **Font Style**
* **Text Alignment**
* **Line Height**
* **Letter Spacing**
* **Text Shadow**

### **Button Icon Customization**

**Select Button Icon**: Choose from a diverse collection of icons available in the Divi Library. Adding an icon to your button can significantly enhance its visual appeal and draw more attention to the call to action. Whether you're looking for something minimalist or a bold, eye-catching design, there’s an icon to fit your specific needs.

**Button Icon Color**: Customize the color of the icon to match your button's text or complement the overall theme of your website. This feature allows you to ensure a cohesive look by aligning the icon color with your site's branding or color scheme.

**Icon Font Size**: Adjust the size of the icon to ensure it integrates seamlessly with the button’s design. Whether you prefer a subtle, small icon or a more prominent, bold symbol, this option gives you full control over the icon’s proportions relative to the button.

**Button Icon Placement**: Choose the ideal placement for your icon, either to the left or right of the button text. This customization allows you to create a balanced design that aligns with the button's purpose and the overall layout of the page.

**Right Icon Spacing**: Fine-tune the spacing between the icon and the button text for optimal alignment. Adjusting the space ensures that the icon doesn’t feel cramped or too far from the text, creating a clean, polished look that improves the button's overall presentation.

**Show Icon on Hover**: Enable this feature if you'd like the icon to appear only when the user hovers over the button. This option adds a sleek, minimalist touch to the button design, keeping it simple and understated until the user interacts with it, thereby creating a more engaging user experience.

### Button Border Customization

**Button Border Styles**: Adjust the button’s border thickness and style. Choose between solid, dashed, or dotted borders.

**Border Radius**: Control how rounded the button’s corners are. A **0px** value will create sharp corners, while higher values will result in more rounded buttons, giving a softer, friendlier feel.

**Button Shadow Customization**

Add shadow to the button, adjusting parameters such as **blur radius**, **spread**, **offset**, and **color** to give depth and make your buttons pop.

#### **Multiple Button customization ( Global )**

## **Multiple Button Content Tab Customization**

### **Add New Item**:

This section is crucial for adding multiple buttons. Each button acts as an individual item and has its own content and design settings.

***\[ Tip: You can add as many buttons as you want, each with its own unique text, URL, and customization options, enabling you to create a complex button setup.\]***

### Button Direction

**Row**: The buttons will align side by side in a horizontal row. This is ideal for displaying multiple buttons in a compact space or when you want the buttons to be part of the same call-to-action area.

**Column**: The buttons will be stacked vertically. This setting works well when you want the buttons to be presented in a step-by-step format or in longer forms.

### **Button Alignment**

This feature allows you to control how the buttons are aligned within their container.

* **Left**: Align the buttons to the left side of the row or column.
* **Center**: Aligns the buttons to the center, creating a balanced look.
* **Right**: Align the buttons to the right, which can give a clean, modern feel.

## **Multiple Button Design Tab Customization**

**Button Spacing**: Gain full control over the spacing of your buttons with the ability to adjust both the margin and padding. The margin setting controls the space outside the button, dictating how much separation there is between the button and other elements on the page. Padding, on the other hand, adjusts the space inside the button, ensuring that the text and icon within the button have ample room and are not too cramped. This feature allows for precise positioning of your buttons within their container, whether they're part of a single row, column, or complex layout.

***\[Tip*: By carefully adjusting the margins and padding, you can create a visually harmonious layout. This is especially useful when working with multiple buttons in a row or column, as proper spacing can ensure the buttons are evenly distributed and aligned, avoiding a cluttered or unbalanced appearance.\]**

**Borders & Box Shadow**: As with individual buttons, you can apply borders and box shadows to all the buttons in a set to ensure a cohesive and professional design. Borders can be customized in terms of thickness, style (solid, dashed, dotted), and color, allowing you to define the buttons' edges for a sharper or softer look. Adding a box shadow can introduce depth and dimension to your buttons, making them appear slightly elevated from the background for a more engaging design.

These settings allow you to create consistency across multiple buttons, ensuring that they have a uniform appearance while also giving you the flexibility to adjust the finer details to suit your design needs. Whether you're aiming for a minimalist look with subtle borders or a bold style with prominent shadows, these tools provide you with the versatility to design buttons that stand out while maintaining balance and professionalism.

## **Frequently Asked Questions (FAQ's)**

#### **Q. What is the Multiple Button module in Divigrid?**

The Multiple Button module allows users to create interactive buttons with extensive customization options, including hover effects, fonts, borders, and more, for a visually appealing design.

#### **Q. What is the purpose of the Button Text field?**

The Button Text field allows you to specify the text that appears on each button, essential for guiding users toward a specific action, such as "Buy Now" or "Learn More."

#### **Q. What customization options are available in the Design tab?**

The Design tab allows you to adjust hover effects, fonts, icons, borders, spacing, and shadows, giving you full control over the appearance of each button.

#### **Q. What are the benefits of using the Multiple Button module for my website?**

The Multiple Button module offers flexibility in creating dynamic, interactive buttons with full customization over layout, hover effects, fonts, icons, and spacing, allowing you to enhance user experience and engagement.


# Off Canvas


The **Off Canvas** module in DiviGrid offers a seamless way to showcase different types of website content, enhancing user experience and engagement. This versatile widget allows you to present content in an appealing and efficient manner, making it more attractive and accessible for your visitors.

In this documentation, we’ll explore how to use the Off Canvas module to elevate your website’s design and functionality.

### Prerequisites

To use the Off Canvas module, ensure you have the following:

* **Divi** theme or builder
* **DiviGrid Plugin** installed and activated

### Module Setup: Inserting the DG Off Canvas Module

1. **Activate Divi Grid**: Ensure Divi Grid is activated, as it adds additional modules like the DG Off Canvas to your Divi builder.
2. **Add the Off Canvas Module**: 
    * Open a page or post that uses the Divi builder.
    * Add or edit a row, then click on **Add New Module**.
    * Select **DG Off Canvas** from the module options.

Once you’ve added the Off Canvas module, you'll find various settings to customize its functionality and appearance. The module is divided into two main tabs: **Content** and **Design**.

| #### **Off canvas Content Tab** | #### **Off Canvas Design Tab** |
|---|---|
| Content | Font Styles |
| Direction | Button Settings, |
| Animation | Align, |
| Background | Design |

##  

| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/ZLQwn7dStrNqRDRWbMPaJeY2Wsz194CyzjdCgYce.png) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/T9IaRV0rF0lUrEEhL3G7qkkE09zhRLUv7RuHCtGy.png) |
|---|---|

## Off Canvas Content Tab Settings

### Content

The **Content** tab within the Off Canvas module allows you to customize the toggle and main content that will appear in the Off Canvas panel. This tab includes options to define the type of content displayed on the toggle, set the trigger behavior, and select the primary content for the canvas from the Divi library. Below is a breakdown of the settings available:

#### Toggle Content Type

The **Toggle Content Type** option lets you choose one of five different types of toggle content to activate the Off Canvas panel. Each type provides specific fields and customization options:

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/ZzrlJCtVjgAEen6jlrjTk4s5ffBkg92v90QJgQ8A.png)

* **Text**: Displays a text toggle. When selected, a text input field will appear, allowing you to enter custom text for the toggle.
* **Icon**: Displays an icon as the toggle. This option gives access to the Divi icon library, where you can select an icon and customize its color and size.
* **Image**: Displays an image toggle. When selected, fields for uploading an image, adding image alt text, and adjusting image width and height will appear.
* **Button**: Displays a button as the toggle. Similar to the other options, selecting this will allow you to customize the button’s appearance and behavior.
* **Icon & Text**: Combines both icon and text within the toggle. You can customize both elements individually to achieve a cohesive look.

> ***\[Note: Only one toggle content type can be selected at a time. Each option comes with specific fields that allow you to style and configure the toggle content to align with your website’s design.\]***

#### Trigger

The **Toggle Trigger** setting defines how the Off Canvas panel will be activated. There are two options available:

* **Hover**: The Off Canvas panel will open when the user hovers over the toggle.
* **Click**: The Off Canvas panel will open when the user clicks on the toggle.

Choose the trigger type based on your design needs and the interaction style you want to create for your users.

#### Canvas Content

The **Canvas Content** option lets you select the main content that will appear within the Off Canvas panel. This content is pulled directly from the Divi library. Here’s how it works:

1. **Design Off Canvas Content**: First, create and design your Off Canvas content using the Divi Builder. Customize it according to your needs and save it in the Divi library.
2. **Select from Library**: Once your content is saved, return to the Off Canvas module settings, click on **Select Off Canvas Content from Library**, and choose the content you saved previously.

This feature provides flexibility in designing your Off Canvas content, allowing you to create rich, customized panels that seamlessly integrate with your website’s design.

### Off Canvas Direction

The **Off Canvas Direction** setting provides control over where and how the Off Canvas content appears on the screen. This setting offers four distinct options that dictate the slide-in or drop-down effect, giving you flexibility to align the content's movement with your website’s design aesthetic:

* **Left**: Choosing "Left" will make the Off Canvas content slide in from the left side of the screen. This is useful for menus or panels that you want to appear as though they are expanding from the left margin of the page.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/tMlawcYAnaEmiKExyIPoGJSHovEvmd5OwFt8Dpkf.png)

* **Right**: Selecting "Right" will cause the Off Canvas content to slide in from the right side of the screen. This effect is particularly suited for secondary menus or quick-access content you want to appear from the right.
* **Top**: With "Top," the Off Canvas content drops down from the top of the screen. This setting is ideal for announcements, navigation, or other information you want to have a full-width, top-down effect.
* **Bottom**: Choosing "Bottom" makes the Off Canvas content rise up from the bottom of the screen. This is commonly used for footers, notifications, or quick links that naturally appear from the bottom.

Each direction provides a seamless and visually appealing transition, allowing you to create an engaging experience for your users based on where you want the content to appear. This flexibility helps ensure the Off Canvas module aligns perfectly with your website’s layout and user interaction flow.

### Animation Settings

The **Animation** settings in the Off Canvas module allow you to customize how the content appears on the screen, adding an extra layer of interactivity and visual appeal. By selecting different animation types and easing effects, you can control the style and behavior of the Off Canvas transitions, creating a smooth, engaging user experience.

#### Animation Type

Choose from four animation types to define how the Off Canvas content moves into view:

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/87DJzVod623PcunpNPSklcN6eoOO8umygyQfPSrw.png)

* **Slide**: The Off Canvas content slides smoothly into place from the selected direction (left, right, top, or bottom). This is a popular and visually appealing choice for side panels and menu options.
* **Push**: With the push effect, the Off Canvas content will push the main page content aside as it enters the screen, creating a more dynamic interaction.
* **Reveal**: The reveal effect allows the Off Canvas content to unfold as if it’s being uncovered, making it appear as though it was hidden behind the main content. This effect adds a unique layer of depth to the interface.
* **Fade**: The fade effect gently fades in the Off Canvas content, creating a smooth and subtle transition. This effect is particularly suitable for notifications and overlays, giving them a polished appearance.

#### Easing

The **Easing** option lets you control the speed and timing of the animation, creating either a fast, immediate transition or a smoother, gradual movement. Each easing type gives a distinct feel to the animation, allowing you to match the Off Canvas content’s movement to your website’s tone. You can choose from 13 different easing options:

| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/9STP3tNVAsvwjmG5XVLIqTB5wkKnwEpYX2OaetMC.png) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/1B5OMIabGAWXBk7uLmoHD7WRtkStGWYHmlJIMhB8.png) |
|---|---|

* **Ease In**: Starts slowly, then speeds up for a smooth entrance.
* **Ease Out**: Starts quickly, then slows down for a gentle finish.
* **Ease In Out**: Starts and ends slowly, with a faster transition in the middle, providing a balanced motion.
* **Linear**: Maintains a constant speed throughout the animation, creating a straightforward effect.
* **Ease Out Cubic**: Speeds up at the beginning and eases towards the end, creating a sharp yet smooth finish.
* **Ease In Cubic**: Begins gradually and accelerates quickly, ideal for drawing attention.
* **Ease In Expo**: Creates a dramatic effect with a slow start and rapid acceleration.
* **Ease Out Expo**: Quick start with a slow deceleration for a strong finish.
* **Ease In Out Back**: Adds an “overshoot” effect, giving the animation a playful bounce at both the beginning and end.
* **Ease In Circ**: Uses a circular easing function to create a softer, natural movement.
* **Ease Out Circ**: Similar to Ease In Circ but decelerates towards the end.
* **Ease In Out Circ**: Smooth circular transition both at the start and end.
* **Ease In Out Quint**: A powerful easing function that provides a fast start and slow end, making the animation feel deliberate and controlled.

These animation and easing options give you total control over how the Off Canvas content enters the screen, allowing you to tailor the motion to the user experience you want to deliver. With these settings, you can make your Off Canvas content feel engaging, polished, and fully in harmony with your site’s design.

### Design Tab Settings

The **Design Tab** in the Off Canvas module provides powerful styling options, allowing you to fully customize the look and feel of your Off Canvas content. With these settings, you can define typography, button styles, alignment, image borders, and more to ensure that your Off Canvas module matches your site’s branding and visual identity.

#### Font Styles

The **Font Styles** settings allow you to control the typography of the title and main text within the Off Canvas content. Here’s what you can customize:

* **Title Heading Level**: Choose the appropriate heading level (H1 to H6) to set the semantic importance of the title in your Off Canvas content.
* **Fonts**: Select from a variety of fonts to match your site’s typography style.
* **Font Style**: Apply italic, underline, and other font styles for emphasis and unique design.
* **Font Weight**: Choose from a range of font weights (light, regular, bold, etc.) to control the thickness of the text.
* **Font Color**: Customize the font color to match your brand’s color scheme.

#### Button Settings

The **Button Settings** allow you to style buttons in the Off Canvas content, providing full control over their appearance. You have access to Divi’s default button styling options, as well as additional customizations:

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/hOz6I8xr15lqfqDB6SdJx1R13R3JEgQz9kfzwdhF.png)

* **Background Color**: Set a solid background color for the button to make it stand out.
* **Gradient Background**: Use a gradient background for a more dynamic look, with control over gradient direction and colors.
* **Background Image**: Add an image background to the button for a visually engaging effect.

These settings allow you to create buttons that capture attention and invite users to take action.

#### Alignment

The **Alignment** option gives you control over the alignment of the Off Canvas content within the module. You can position your content to the:

* **Left**
* **Center**
* **Right**

This ensures that the content aligns perfectly within the Off Canvas panel, based on the layout and design of your site.

#### Image Border and Box Shadow

If you select **Image** as the toggle content type in the Off Canvas settings, you can further style it with border and shadow effects:

* **Border**: Customize the border style, color, and width to enhance the image’s appearance and make it stand out.
* **Box Shadow**: Apply a shadow effect to give the image a sense of depth and make it more visually appealing. You can control the shadow color, intensity, and positioning.

These options give you flexibility in styling images to make them more integrated with the Off Canvas design.

#### Design Settings

The **Design Settings** provide additional styling options specific to the Off Canvas module:

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/lhsSYMu529LJyN0HEuiW13OGwRTHwF7i24Zvr8gu.png)

* **Close Icon Color**: Customize the color of the close icon to ensure it’s visible and matches the module’s aesthetic.
* **Close Icon Font Size**: Control the size of the close icon for easy usability.
* **Overlay Color**: Set an overlay color for the screen background that appears when the Off Canvas content is open. This color can be semi-transparent to provide a subtle dimming effect on the background.

These options allow you to create an accessible and polished experience for users interacting with the Off Canvas content.

#### Sizing

The **Sizing** settings control the dimensions of the Off Canvas content, allowing you to set an optimal layout:

* **Off Canvas Content Width**: Adjust the width of the Off Canvas panel to accommodate the amount of content while keeping it user-friendly.
* **Off Canvas Content Height**: Control the height of the Off Canvas panel to fit your design needs.
* **Divi Default Sizing Options**: Utilize Divi’s standard sizing controls to fine-tune the Off Canvas dimensions.

With these sizing controls, you can tailor the layout of the Off Canvas panel to fit different devices and screen sizes, ensuring a responsive and user-friendly design.

---

The **Design Tab** offers comprehensive styling options, enabling you to create a cohesive, attractive, and branded Off Canvas experience for your website visitors. By adjusting font styles, button appearance, alignment, image effects, and sizing, you can make the Off Canvas module an integral part of your site’s design.

## **Frequently Asked Questions (FAQs)**

#### **Q. What is the DG Off Canvas module in DiviGrid?**

The DG Off Canvas module is a feature in DiviGrid that allows you to create side panels or overlays to display additional content, enhancing user experience and engagement.

#### **Q. What content types can I use for the Off Canvas toggle?**

You can choose from Text, Icon, Image, Button, or Icon & Text as your toggle content types.

#### **Q. How do I add the DG Off Canvas module to my page?**

Open your page in Divi Builder, add or edit a row, click on Add New Module, and select DG Off Canvas.

#### **Q. What are the prerequisites for using the Off Canvas module?**

You can select Slide, Push, Reveal, or Fade for the animation type.

#### **Q. Can I customize the close icon?**

Yes, in the Design Settings, you can change the close icon color,size for better visibility.

#### **Q. Can I add an overlay color when the Off Canvas panel is open?**

Yes, set an overlay color to dim the background when the panel is active.

#### **Q. Can I display videos in the Off Canvas panel?**

Yes, include a video module in the Off Canvas content created in the Divi Library.

#### **Q. How can I make the Off Canvas panel full-screen?**

Adjust the Off Canvas Content Width and Height settings to cover the full screen.

#### **Q. Can I add borders or shadows to images in the Off Canvas panel?**

**Yes,** You can add border and box shadow for the image. If you want that then **Go to Design tab >> Border >>** you found image border settings. And for the box shadow **Go to Design tab >> Box Shadow >> you found image box shadow settings**

#### **Q. Can I make the Off Canvas panel slide in from a different direction?**

Yes! you can make the Off Canvas panel slide in from the different direction

#### **Q. How do I add multiple Off Canvas panels on a single page?**

Add multiple DG Off Canvas modules, each configured with unique conten**t.**

#### **Q. Can I add both an icon and text to the toggle button?**

Go to the Content tab of the Off Canvas module, select **Toggle Content type "Icon & Text"** and input your desired text and select your icon. You can further style the text under the **Design** tab, adjusting font, size, color, and spacing to match your site’s design.


# Post Grid


## WordPress Posts

A WordPress post is what makes up the blog aspect of your site. A WordPress post contains content written in order of publication and it can be arranged and categorized. Posts may also be “pinned” in a blog, meaning that regardless of the publication date.

WordPress Posts are generally news or informational updates about a certain topic or talking point. Posts can be tagged, categorized, and even archived on your site. They’re dynamic and constantly changing the content your end users see.

We all know Post is the most important in WordPress. From the idea of how to make your work with posts more efficient and smooth, we created a module with advanced features compatible with WordPress and Divi. This module can easily design, style, and modify all WordPress posts. The module is named PostGrid.
If you want to know more about us or our other products, please visit us **[Here](https://divigrid.com/)**

# Post Grid

Once you have installed **DiviGrid** Module, you will find the **PostGrid** alongside the other Divi Modules available in the “**Insert Module**” window.

### PostGrid-related common questions

#### **1. How to add a featured image?**

If the post does not have a featured image, you can set or replace the featured image from the WordPress post's settings option.
If the featured image is set in the post, you can show that image as desired. 
You can turn it off if you want. There is a switch in the element toggles of the Postgrid plugin called Show Featured Images. 
From there the featured image of the post can be turned on or off.

 | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/HXs4GA2BWhbs0BlzQGC7eXji5rh2UtTJ624d3otZ.jpg) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/reXrE3I6Xo77hYGjwkzA8ICqTqZX4dSrY3qfqYrY.jpg) |
|---|---|

#### **2. How to change grid layout patterns?**

There are more than 30 grid layout patterns in our plugin. To change the grid layout pattern, 
first, go to the grid settings and from there turn on the grid layout switch. 
After turning it on, grid layout style options will appear. Choose one as per preference.
go to plugins grid settings toggle -> Enable grid layout switch -> Choose your desired grid pattern style

 | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/aX8mjqS64MUKUuccBBMgIdgjcUqywdzBFcsBN9LR.jpg) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/ahxi855OSsiKbxeo3Ia925fiGk2Iw8FMphJqxWbz.png) |
|---|---|

#### 
**3. How to use the image as a background?**

If your post has a featured image set, you can set that image as the background image from our plugin. 
For this, first, go to the grid settings of the plugin. Then turn on the Use Image As Background switch. 
All items in the grid will show the featured image as the background image.
go to the plugin's grid settings --> ON the switch " Use Image As Background".

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/nCwq6qNp2sEhm2he1cJU4BhhUV7gCS5o7XoDfKXJ.png)

#### **4. How to change meta data-position?**

All metadata can be repositioned by wrapping them together. 
First, the metadata should be switched on. Then open the Meta Wrapper switch from the settings toggle and select all metadata. 
Then the metadata can be changed to Left, Right, Center, or Justified position from the Alignment toggle of the Design tab.

 | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/bhkduhVCZaGvsj4FaU2o75VMXRkfLey01w1xIUvM.png) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/fP79uVySlPiqx7zKBzQFjRAUPsbT3mnhEXNlDKh3.png) |
|---|---|


Also, if you want to change the position of metadata separately, you need to switch on metadata from the content settings tab. 
If turned on, a separate toggle will be created for each metadata in the Content tab. 
The position of the metadata can be easily set to any position from the Left, Right, Top, and Bottom option fields.

 | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/WfYW12wvg0ADiKIYNXxXVKeTmPLWOKFAs33JXqYY.png) |
|---|
| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/uCBQkMEy8ofdjQSsQ06qT2wgcIoQ1bzOhXxiQ11W.png) |
| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/VxIYJMxT2En267UibIlBuvMXSv32Zx9nkKDlIimi.png) |
| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/SnxwOwYugfIJcpLcCoFv4ccnJvEZsgOLgKvKldBE.png) |

#### **5. How to change post content position?**

Go to the Alignment toggle on the Design tab. Here you choose to place the content wrapper at the top, 
center, or bottom.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/JafiXMPuw2TRHGTrd7lLUhXqpyUmOTOHHOAs2e0L.png)

And if you want to change the position of the grid item, you can set the position to the top, 
center or bottom by turning on the item alignment switch.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/IwjI2OsmqeWechwLCRjrCxKuE2MwB9jqQMxhjcir.png)

#### **6. How to create hover effects?**

Go to the Overlay and Hover Settings toggle on the Design tab. 
Click the Hover Image Type field. Select the hover type for featured images in the post.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/zAum70stbXRlBpketNZAVvDSbdyCErmiYn6VripW.png)
Also if you want to use the hover effect for the background image then enable the background image hover switch from the grid settings of the content tab. 
You can choose the specific hover effect from here.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/IosVX6464qCqi2w7J9DHdnwaDrhL75XtNn9wh4s8.png)

#### **7. How to set the background image as a selected item?**

If you want to use the featured image of one or more items in PostGrid as a background, 
you must turn on the Enable Individual Item Image As Background switch from the Grid Settings. 
The number of the grid item should be defined from the field that appears there. 
The featured image of the defined numbers will show as a background.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/6FEMgTIlDudcKq5YfefFDcScQa3ixwRbZ5pQMSuD.png)

#### **8. How to remove the blurry effect when the pagination is active?**

Sometimes when pagination is active and you go to new or old posts the section gets blurred. Due to this, the content cannot be properly focused. It takes a little effort to overcome this problem. Go to Performance Tab from General Settings of Divi Theme Options. Then from there, the dynamic javascript library switch should be disabled. Then the blur effect will be removed from the pagination. Which option to disable is selected in the image below.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/x66R2XdKTA6k4JvoWGBJwzWhWn8gY0FIE3rQpeOK.png)

## **OVERVIEW**

## Divi Post Grid Module

**PostGrid** gives you the simplest and easiest way to create a post grid from WordPress posts with just a few clicks Additionally, you can filter post content and display it in a grid view. We have created many attractive premade layouts that you can use as per your choice. This module lets you simply display your posts and thumbnails in a post grid layout using the grid layout style.
In this article, we will go into detail about how our module's advanced features and design options work. **Let's start...**

## **Divi Post Grid Content Settings**

After inserting the **Divi Post Grid Module** you will find several new toggles along with the default toggles. Toggle names are listed below

1. **Settings**
2. **Element**
3. **Grid Settings**
4. **Category Settings**
5. **Tag Settings**
6. **Date Settings**
7. **Author Settings**
8. **Divider**
9. **Item Order**
 
**![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/93YaOJycTdL9vUGA8hYEjyjGWY6qbcNCUSgUXAEa.jpg)**

Every toggle has a bunch of fields for modifications. A detailed explanation of how each setting works is provided below.

### Settings

**1. Post Count**

This field is for specifying how many posts you want to display in a post grid style. From here you can decide how many posts you want to publish at once.

**2. Display Post By**

This field is for selecting whether you want to show the posts category-wise, tag-wise, or just recent posts. If you select the category, the posts will be displayed according to the category, if you select the tag, the posts will be displayed according to the tag. Initially, the posts will show based on recent posts. You have to select any tag or category post you want to show from the selection box

**3. Post Offset Number**

Offsets are useful because they can allow a user to skip a certain number of WordPress posts before starting output. The post offset number of users specifies how many posts from the beginning you don't want to show, or want to exclude. If you write the number of posts you want to exclude, other posts will be shown in our grid.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/MoBQq38KjmVlDwXoVzdesS65iQtfjvmb7ukud89a.jpg)

**4. Show Pagination**

Pagination is one of the most common and important aspects of WordPress. Our module has two switches for pagination. One is to display pagination and the other is to display pagination as numbers. If you turn on the first one only the pagination will show. If both switches are turned on, you can see the number of pages you are on along with pagination.

**5. Use Number pagination**

By switching on the use number pagination you can see which pagination page you are on. And if you keep it off, only the default pagination tie will be active.

**6. Older Entries Button text**

After the pagination is active, you can write any text of your choice as a new entry, such as New Post, First Post, etc. Whatever you type will show as the first part of the pagination.

**7. Next Entries Button Text**

After the pagination is active, you can write any text of your choice as an old entry, such as Old Post, Next Post, etc. Whatever you type will show as the last part of the pagination.

**8. Category Separator & Tag Separator**

A post can have one or more categories and multiple tags. Each tag and category can be separated using commas or pipes. How to separate tags or categories in a post by writing here will separate the tags/categories accordingly.

### Element

1. **Meta Wrapper**
2. **Add Meta in the Wrapper**
3. **Title tag**
4. **Show Post Content**
5. **Post Content**
6. **Use post Excerpt**
7. **Excerpt Length**
8. **Show Read More**
9. **Show Author**
10. **Show Author Image**
11. **Author Image Size**
12. **Hide Author Text**
13. **Show Date**
14. **Date Format**
15. **Show Categories**
16. **Show Tags**
 
**![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/ccnCzeKgATDvmErjpGN4aEcff4azZ14hJc1lPW5L.jpg)**

**Meta wrapper**

Meta items can be wrapped together with the Meta Wrapper switch. If the switch is turned on, every meta item will be neatly wrapped inside this wrapper. They can be well placed inside the meta wrapper.

**Add Meta in the Wrapper**

You can select your metadata through the Add Meta Wrapper field. Select the data you want to show inside a wrapper and they will be enclosed by a wrapper. Then it will be convenient to place them together. Your selected metadata will be aligned together.

**Title Tag**

In this field, you will get the option to change the title tag of the post titles of the post grid. From here you can select the required title for your post. Changing from one place will change the title of all posts.

**Show Post Content**

This is the switch to show the post contents. If it is OFF, the grid will not show any posted content. There are options to show post content in full or in excerpts.

**Post Content**

There are two options in the post content field. One to display the content of your post as an excerpt and the other to display the entire content together. If you select Excerpt, you can add text with a Read More button below.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/YgsgmAnkMZtR6aqXxXIfRlbZ19N9YszmmaiCSCOF.jpg)

**Use Post excerpt**

If you want to show only post excerpts, then you need to turn on the Use Post Excerpts switch.

**Excerpt Length**

After switching on Use Post Excerpt, another field called Excerpt Length will appear. From this field, you can determine how many words you want to keep the length of your excerpt. By default, the length of the excerpt will be 270 words.

**Show Read More**

When except is selected, a read more button option is provided for ease of understanding to view the rest of the content. When on click the full content will show on a single post page. You can write any text of your choice on this Read More button to prompt the client to read or view the full content of your post.

**Show Author**

You can turn your author off or on at will with a switch. The author has two separate switches for Text and Image. Through which you can hide or show the author's text or the image of the author. When you hide, that option will no longer be shown in the post grid. The ability to define the size of the author's image is given in this author's setting.

**Show Date**

The vital metadata of a post is the date. The date can be shown on or off through the switch. You can also define the format of how the date will be shown. You can attach the date to the post as you wish.

**Show Categories**

Categories provide a helpful way to group related blog posts. You might want to create categories for different topics you cover in your blog. For example, if you have articles that cover a specific genre of music, you might want to keep those grouped in a category.

Categories not only help keep posts organized, but you can also use categories to display posts in several places across your site, making it easier for your visitors to find what they’re looking for quickly. You can show or hide the category type with this switch.

**Show Tags**

WordPress tag is one of the default tools you can use to categorize your WordPress posts. Each post can contain multiple tags and visitors can click on a tag to find similar posts that have that same tag. Tags are completely optional. There is a switch called a show tag switch to show and hide these tags together. If the switch is on, it will show tags and if it is off, it will not show any tags in Postgrid.

### Category Settings

The category Settings has 5 sub-toggles to align & positioning the category's metadata. Display, Left, Right, Top, and Bottom. From the 1st sub-toggle, you can define how to keep the display position of category data. The remaining sub-toggles are for the alignment of category metadata. To set in any position, you can align from left, right, top, or bottom as desired.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/gfCbmFN1eKxkSbuEWhnMxsmgxCzZVxmwcBC7dJwW.png)

### Tag Settings

The Tag Settings has 5 sub-toggles to align & positioning tags metadata. Display, Left, Right, Top, and Bottom. From the 1st sub-toggle, you can define how to keep the display position of tags. The remaining sub-toggles are for the alignment of tags metadata. To set in any position, you can align from left, right, top, or bottom as desired.

### Date Settings

The Date Settings has 5 sub-toggles to align & positioning date metadata. Display, Left, Right, Top, and Bottom. From the 1st sub-toggle, you can define how to keep the display position of dates. The remaining sub-toggles are for the alignment of dates metadata. To set in any position, you can align from left, right, top, or bottom as desired.

### Author Settings

The Author Settings has 5 sub-toggles to align & positioning author metadata. Display, Left, Right, Top, and Bottom. From the 1st sub-toggle, you can define how to keep the display position of the author. The remaining sub-toggles are for the alignment of authors' metadata. To set in any position, you can align from left, right, top, or bottom as desired.

### Divider

Dividers can be used to separate content or metadata from images. You will get many fields to define divider height, gradient color, direction, color starting position, and color ending position. Styling of dividers can be done as required.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/KyBp4kpotpObhBZEVLxcnz528lIEzqnJtHni59PZ.jpg)

### Item Order

Image order toggle to change the order of post content like metadata, images, dividers, titles, etc. You can change the order to place any content first in your grid layout.

### Read More

A button to show the entire post is required when the post excerpt is used. So that the post can be shown in a single post by clicking the button. Whatever is written in this field will show as button text at the end of the excerpt.

### **Item Background**

This field is for giving background color, image, and gradient color between each item. Background can be given to all posts together.

### Grid Settings

**Use Image As Background**

This switch is useful for using the feature image as a background. If the switch is turned on, the feature image will appear in the background. And the rest of the post content will come on top of the image and the metadata can be shown as desired. And the background scale on the hover switch is given because if desired when the developers hover over the post, the image will zoom in or zoom out a bit. By doing this, the look out of the post grid will change a lot and look beautiful.

**Enable Background Image Hover**

When hovering over an item, this option makes the featured image change its position and move slightly to the right or left to be slightly more focusable. This hover effect can be used based on the type of post.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/6AmNoNo37QfdarVqa4fvWkGvEpL5MUc5pA9B5hcN.jpg)

**Enable Grid Row & Enable Grid Row Size**

When Enable Row is switched on there are two options and select fields. One is dependent on the other. Its row size will depend on your grid row selection. The thing is, if you select a row, all the items in the 1st row will implement that row size. If two rows are selected or three rows are selected, the row size will be applied to all items in those two or three rows.

**Grid Layout Switch & Grid Layout Style**

The grid layout switch is for selecting any grid layout from the options of premade layouts. You can select one according to your choice from here without creating a new grid. These layout options are available when the switch is turned on.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/fpziFKjFDEuZNFIflNqLeqziLJ6Vafrizg6qjP97.png)

**Grid Gap**

This switch creates a gap between each item in the grid. Gaps can be made from 0 to 50 pixels

**Enable individual Item Image As Background**

If you want to specify an item from the grid and use it as the background of the post, you will get the option by turning on the switch. Selecting from there will show the post's featured image as the background image.

**Choose the Image Background Individually**

If a post-featured image of the grid is shown as a background, the featured image of these items will show as the background image only after writing the number of grid layout items.

**Enable Individual Item Font Color**

After turning on the Individual Item Font Color switch, 4 color options are available. Title and Content Color will change the title and content color of the item. Wrapper Inside Meta Color Meta can be used to change the color of the metadata inside the wrapper. MetaColor outside the wrapper can be used to change the color of the metadata outside the wrapper. Both options are given here. But keep in mind that, this feature will only work when the Feature Image Edge Background switch is turned on.

## Post Grid Design Settings

There are tons of design options to style the post grid beautifully. The options given to design each item are listed.

1. **Overlay & Hover**
2. **Image Settings**
3. **Alignments**
4. **Text Style**
5. **Meta Text Style**
6. **Meta Wrapper**
7. **Content Wrapper**
8. **Pagination**
9. **Active Pagination**
10. **Read More**
11. **Item Spacing**
 
**![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/8olz1IKZPDcMwdL03ak5U5htyryEYF7LJae9enWb.png)**

### Overlay & Hover

The overlay will work when the item hovers over. If the overlay is switched on, two colors will appear. One is primary and the other is secondary. There will be directions for combining the two colors. Also, icons can be used as extras on overlays. All icon styles can be done here.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/JqiHbHtE76bN5lO6LxyqrMLru9IT1z4hQGxFLNL6.jpg)

Image Hover Type is one of the unique features of the Divi post grid. there are many image hover types in the list. from the several types of image hover types, you can choose one of the best image scale types for your post-grid layout. you can use the image hover type with or without overlay active. if you don't use overlay then the image hover type works only in the images.

### Image Settings

You can select what size image you want to use as the featured image in a post. You can select a size as per your requirement from various ratios.
There are also options for designing image borders, box shadows, etc. You can give a more attractive look to the post image from these settings.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/xKpq8FPvC0bwRGnQVogFCnbzoDoe3rIQpy16axNU.png)

### **Alignments**

There are three types of alignment in this setting.
The first alignment will work if the image is in the background. The contents can then be used to align the top, center, or bottom as desired.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/Spjwo8EJNjnf6C0p64kOCpELQS25C4hQwQirozMm.png)

The 2nd alignment is bound by a switch. Switching it on will reveal the alignment option. This alignment allows each item to be positioned at the top, bottom, or center. This allows images, metadata, and posts content to be repositioned together.

The 3rd and last alignment is the alignment of the meta wrapper data. How categories, tags, dates, and author data can be positioned can be decided. Metadata can be changed to left, right, center, or justified positions.

### Text Style & Meta Text Style

The Divi default text styles for post titles and content text are available as toggles. Metadata text font, stylings, background style, margin, and padding can be done from here.

### Meta Wrapper & Content Wrapper

There are various styling options to style the wrapper box where the metadata will be together. Margin, padding, background, meta wrapper width, border, box-shadow, etc. styles can be found in this toggle. There are similar setting options for the content wrapper toggle.

### Pagination

Pagination is an important part of the post grid. Important options like alignment, background, next and previous icon selection, icon size, margin, padding, pagination font styles, border, and box-shadow have been added to give a nice look to pagination.

### Active Pagination

This toggles settings, to indicate which page is active within the grid. Options for changing the background, border, box shadow, and background color are available.

### Read More 

The main idea is to give the client a button to read the entire post on a single page when the post excerpt is turned on. Details on how to style this button can be found in Read More Toggles

### Item Spacing

This field is for giving a specific amount of space to each item. Required Margin and Padding can be done from here. This field applies to all items together.

### Border

There are two field options for styling the border of containers and items together. Each item's border can be styled together from here. Also, the full container border can be styled.


# Scroll Multiple Image


The Multiple Scroll Image module, developed by Divigrid, offers users the ability to showcase a collection of scrolling images with customizable layouts, directions, and design options. This module provides unique and interactive ways to present image galleries, portfolios, or featured images. It’s a flexible solution for users who need a responsive and visually appealing image scroll feature.

In this documentation, we’ll cover every aspect of customizing the **Scroll Multiple Image Module**, including content, image, and design settings.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/dv2HRCpgadoXbQO0x8sqRWPIicPG7vXgpUfQ5fA6.jpg)

## Scroll Multiple Image Item Customization

### Title & Description

In this section, you can add textual content for each scrolling image item.

* **Title**: Add a title for the image. This title will appear alongside the image and can be customized in terms of typography and placement.
* **Description**: Add a description to provide additional context for the image. This could be a short caption or a more detailed explanation, depending on the needs of the site.

### Image & Icon

In addition to the textual content, you have the option to upload an image and customize its display.

* **Upload Image**: This is where you can upload the image that will be part of the scrolling collection. Multiple images can be uploaded and displayed in either horizontal or vertical scroll layouts.
* **Image Alt**: Add an alt text for accessibility purposes. This alt text is also important for SEO, ensuring that your images are properly indexed by search engines.

## Content Tab Customization

The **Content Tab** is where you can manage the core information related to each image in the scrolling gallery. It allows you to add multiple images, along with titles and descriptions, and configure scrolling settings for a dynamic, user-friendly experience.

### Add New Item

In the **Add New Item** section, users can add new images to the scrolling collection. Each new image item can have its own set of content, images, and icons. This provides a flexible structure for building rich, interactive scroll sections.

### Configuration

This section provides control over how your images scroll. The settings here allow you to manage the direction, speed, and spacing of the scrolling images.

#### Scroll Type

You can choose between **Horizontal** or **Vertical** scroll types, depending on how you want your images to move.

* **Horizontal Scroll**: This type moves the images left and right across the screen, making it ideal for wide images or collections that need to be viewed in a side-by-side manner.
* **Vertical Scroll**: This type moves the images up and down, which is useful for galleries or items that are tall rather than wide.

#### Scroll Direction Type

* **Horizontal Scroll**:
    
    
    * **Left to Right**: The images will begin on the left side of the module and scroll to the right.
    * **Right to Left**: The images will start on the right side and scroll toward the left.
* **Vertical Scroll**:
    
    
    * **Top to Bottom**: The images will scroll from the top of the module to the bottom.
    * **Bottom to Top**: The images will start at the bottom and scroll upward.

***\[ Tip**: Choose a scroll direction that complements the flow of your content. \]*

#### Scroll Duration (Milliseconds)

The **Scroll Duration** setting controls how long it takes for an image to scroll from one end of the screen to the other. This is measured in milliseconds, giving you precise control over the speed.

*\[ **Tip**: Consider the amount of content on each image. If you have lengthy descriptions or important details, you may want to extend the scroll duration so that users have time to read everything. \]*

#### Item Spacing

The **Item Spacing** setting adjusts the amount of space between each image as it scrolls. This can be particularly useful when you have multiple images displayed at once or when you want to create a cleaner, less cluttered layout.

## **Design Tab Customization**

The **Design Tab** is where you can fine-tune the appearance of your images, content, and items within the scroll module. This tab provides advanced styling options for each element, ensuring that your scroll looks exactly the way you want it.

### Image Style

The **Image Style** section provides options to customize how the images are displayed within the module.

#### **Use Image as Background (Switch)**

This option lets you decide whether the uploaded image should be used as the background for the item. When enabled, the image will stretch across the entire background of the image container, with the title and description appearing as an overlay.

#### Image Position

You can position the image within the item in four ways:

* **Left**
* **Right**
* **Top**
* **Bottom**

This setting controls the alignment of the image relative to other content within the item.

*\[ **Tip**: If you're using a horizontal scroll with text descriptions, placing the image on the left or right of the text creates a professional-looking layout that is easy to read and visually balanced. \]*

#### Alignment

This setting controls the alignment of the image within its container. The options are:

* **Left**
* **Center**
* **Right**

#### Image Width & Height

You can manually set the width and height of the images to control how much space they occupy within the item. This is useful for standardizing the size of all images or creating custom layouts where certain images are larger than others.

#### Image Spacing

Adjust the spacing around the image. This can help separate the image from other elements within the item, such as the title and description.

#### Image Border Styles

You can apply a variety of borders to your images, including solid, dotted, dashed, or none. You can also customize the border width and color.

#### Image Box Shadow

This setting allows you to apply a shadow effect to the image, which can create a sense of depth and make the image stand out more on the page. You can adjust the shadow’s color, spread, blur, and position.

### **Font Style Customization**

The Scroll Image module allows you to customize the **Title** and **Description** fonts independently, giving you precise control over how each text element appears.

#### Title Font Style

In the **Title Font Style** section, you can customize the font settings for the title text:

* **Font Family**: Choose from a wide variety of fonts to match your website’s branding.
* **Font Weight**: Adjust the weight of the text (e.g., Light, Normal, Bold).
* **Alignment**: Align the text to the left, right, or center, depending on your layout.
* **Letter Spacing**: Increase or decrease the spacing between letters to achieve your desired typographic look.
* **Line Height**: Adjust the space between lines of text for better readability.
* **Color**: Choose the color of the title text.
* **Text Shadow**: Add a shadow behind the text to create depth and highlight the title.

#### Description Font Style

Similarly, the **Description Font Style** offers a wide range of options for customizing the description text. This ensures that your description is styled in a way that complements the overall design of the scroll multiple images.

### Item Settings

#### Alignment

Control the alignment of each item within the module. You can choose from the standard options:

* **Left**
* **Center**
* **Right**

#### **Item Width & height**

Manually adjust the width and height of each item. This gives you fine control over the layout, allowing you to create a consistent look or highlight specific images by making them larger.

#### **Item Flex-basis**

Flex-basis is used in CSS Flexbox layouts to define the default size of an element before any remaining space is distributed. You can adjust this setting to control how the items within the scroll behave in flexible containers.

#### **Item Background**

The **Item Background** is one of the most customizable elements in the Scroll multiple Image module. You can choose between a solid color, gradient color, or even use an image as the background for your item, giving it a unique look that suits your website’s style.

* **Item Background Color**: You can set a solid color for the item background, choosing from any color in the palette or using custom hex codes. This is ideal if you want a bold, uniform badge that stands out.
* **Item Background Gradient Color**: If a single color feels too flat, you can add a gradient background to the item. The **Gradient Color** feature lets you choose a primary and secondary color, as well as define the direction of the gradient (horizontal, vertical, diagonal). This gives the item a more dynamic and polished look.
* **Item Background Image**: For even more customization, you can use an image as the item’s background. This is useful for brands that want to use logos, textures, or patterns within the item. The **Background Image** setting allows you to upload any image, adjust its size, and control its position to ensure it fits well within the item area.

### **Overlay Settings**

**Use Overlay on Item (Switch)**

When activated, this switch adds an overlay to the entire item, covering the image, title, and description. This is often used to apply a color overlay that makes the text stand out more clearly against the image.

The **Use Overlay** switch allows you to enable or disable the overlay feature on the scroll image. Once activated, you can access a range of options to customize the overlay’s appearance, including color, gradient, and even the addition of an icon.

* **Overlay Background Color**: You can set a solid color for the overlay. This is especially useful for images where you want to dim or highlight certain areas to make text or badges more legible. The color opacity can also be adjusted to fine-tune the visibility of the underlying image.
* **Overlay Background Gradient Color**: Similar to the badge, you can apply a gradient to the overlay for a more sophisticated look. The gradient can include a primary and secondary color, and you can adjust the gradient direction to match the design.
* **Overlay Background Image**: For a more creative overlay, you can use an image. This feature allows you to layer an image over your scroll image, providing extra texture or thematic elements to enhance the design. The background image can be adjusted for size and position to ensure it fits perfectly within the overlay area.

#### Use Overlay Icon

Enabling the **Overlay Icon** places an icon in the center of the scroll multiple image. This is ideal for creating a clickable image or adding a visual cue to the image. Once activated, you’ll have access to customization options for the icon’s style and background.

* **Icon Selection**: You can choose from a wide variety of icons, such as arrows, play buttons, or custom icons, to place in the center of the overlay. This is perfect for creating interactive elements on the image, like linking to a video or another page.
* **Icon Color**: You can customize the color of the icon to ensure it stands out against the overlay and the image. Choose from the default color palette or use custom hex codes to match your site’s design scheme.
* **Icon Background**: The background of the icon is customizable with three options:
    
    
    * **Background Color**: Set a solid color for the background of the icon to make it stand out more.
    * **Background Gradient Color**: Add a gradient to the background, similar to the item, for a more polished and layered look.
    * **Background Image**: For even more design flexibility, you can use an image as the icon’s background.

#### Overlay Icon Spacing

The **Icon Spacing** settings allow you to control how much space surrounds the overlay icon. This ensures that the icon does not feel cramped or too close to the edges of the scroll image.

* **Padding**: Control the space inside the overlay icon background, ensuring that the icon is properly balanced within its background area.
* **Margin**: Adjust the margin to position the icon appropriately on the scroll image.

#### Overlay Border

The **Overlay Border** settings allow you to add a border around the entire overlay, creating a defined space between the image and the surrounding page elements. You can adjust the border’s width, style, and color for full control.

#### Overlay Box Shadow

Lastly, the **Overlay Box Shadow** allows you to create depth around the overlay by adding shadows. This feature helps the overlay stand out, especially if you want it to hover above the image content.

The Multiple Scroll Image Module from Divigrid provides powerful and flexible options for creating scrolling image galleries with dynamic customization. From content settings to intricate design tweaks, this module offers everything you need to make your images stand out. Whether you want to showcase a horizontal or vertical image gallery, this module gives you complete control over scroll direction, speed, item spacing, and style. With user-friendly controls and endless customization possibilities, it is a must-have for creating engaging, interactive image displays on any Divi-powered website.

## **Frequently Asked Questions (FAQs)**

#### **Q. What is the maximum number of items I can add to the scroll?**

There is no hard limit, but the more items you add, the more careful you need to be with performance and load times.

#### **Q. Is the Scroll Multiple Image module mobile responsive?**

Yes, the module is fully responsive and allows you to customize the design and settings for different screen sizes, such as desktop, tablet, and mobile.

#### **Q. Can I add custom CSS to the Scroll Multiple Image module?**

Yes, in the Advanced tab, you can input custom CSS to further refine the design and behavior of the module.

#### **Q. What image formats are supported by the Scroll Multiple Image module?**

The module supports common image formats such as JPG, JPEG, PNG, and GIF.


# Scroll Single Image


The **Scroll Image** module is a feature-rich component of the Divigrid plugin, which is a third-party plugin for the Divi theme. This module allows you to create visually engaging scrollable images with a wide variety of customization options, such as adding badges, setting scroll direction and speed, applying different overlays, and more. Perfect for creating interactive and dynamic website experiences, this module is ideal for showcasing products, portfolios, or any image-heavy content that requires movement and a modern design.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/MJeM1Ut1GXAWXv1ckD1OqZbGbAFUVMzmGCx3h8ot.jpg)

## **Content Tab Customization**

The **Content** tab in the Scroll Image module contains the core settings that define the image, its scroll behavior, and any accompanying content such as badges, titles, and descriptions. These settings allow you to control what image is used, how it behaves during the scroll, and the additional elements that appear over or near the image.

### **Upload Image**

The most fundamental part of this module is the image itself. Uploading an image is simple, and it serves as the base for the scrolling effect. The image will scroll either horizontally or vertically, depending on the settings you choose. The Scroll Image module works best with **high-resolution images** to prevent any pixelation or blur when the image moves.

***\[ For best results, choose an image that is larger than the module container to allow for a smooth scrolling effect. \]***

### **Use Badge Switch**

The **Use Badge Switch** gives you the option to overlay a badge on top of the scroll image. A badge is a small label that appears over the image, providing additional information such as a discount, promotion, or any other noteworthy content.

**Badge Text:** This is the core content of the badge. Once the badge is enabled, you’ll see a Badge Text field where you can input the text you want to display. Common use cases for this could be adding labels like "New," "Sale," "Exclusive," or any short, impactful message. The badge adds an extra layer of visual interest to the image.

### **Title & Title Tag**

Below the badge, the **Title** field allows you to add a title that appears near the scroll image. This is useful for adding a heading or descriptive title to complement the image. Divigrid provides a wide variety of options for customizing the title, both in terms of **text content** and **SEO relevance**.

* **Title Content**: You can add any descriptive title you want. For example, if the scroll image is part of a product catalog, you can include the product’s name here.
* **Title Tag**: From an SEO perspective, you can choose different HTML heading tags such as **H1**, **H2**, **H3**, etc. It’s a best practice to use H1 for the primary title on a page and H2 or H3 for sub-headings.

### **Description**

The **Description** field allows you to add a block of text that further explains or supports the image content. This text can be as brief or as long as you need, though shorter descriptions are generally more effective for maintaining a clean design.

## **Settings**

The Scroll Image module offers several key settings that govern how the image behaves when it scrolls. These settings are essential for ensuring a smooth and visually appealing user experience.

### **Scroll Direction**

The **Scroll Direction** setting allows you to control how the image scrolls across the screen. This adds dynamic movement to an otherwise static image, making it more engaging for viewers. You can select one of the following options:

* **Top to Bottom**: The image starts from the top and slowly moves downward, revealing different sections of the image.
* **Bottom to Top**: The image begins at the bottom and scrolls upward.
* **Left to Right**: The image starts from the left side and scrolls to the right, which is particularly useful for wide, panoramic images.
* **Right to Left**: The image begins from the right side and scrolls to the left, creating an eye-catching horizontal movement.

By combining the right image with the appropriate scroll direction, you can create a visually compelling experience. For instance, a city skyline would work beautifully with a **left-to-right** scroll.

### **Scroll Speed**

**Scroll Speed** controls how fast the image moves. You can adjust the scroll speed using a millisecond, where the lower the millisecond, the faster the scroll. Conversely, a higher millisecond results in a lower scroll. A slower scroll speed is ideal for images where you want viewers to spend more time absorbing details. It’s perfect for intricate product images or designs that need to be revealed gradually. When setting the scroll speed, consider how the image interacts with the rest of your page's content. Too slow a scroll can bore users, while too fast a scroll might make it difficult to catch important details.

## **Design Tab Customization**

The **Design** tab offers a wealth of customization options to help you refine the appearance of the scroll image and its associated elements like the badge, font styles, and overlays.

### **Scroll Image Customization**

This section allows you to control how the scroll image looks within the module. These options ensure that the image fits seamlessly into your overall page design.

#### Image Height

The **Image Height** setting allows you to specify the visible height of the scroll image container. This setting does not change the height of the image itself but adjusts the container’s height, controlling how much of the image is visible at one time.

#### Scroll Image Spacing

**Scroll Image Spacing** controls the space between the scroll image and other nearby elements on the page. This setting ensures that the image doesn’t feel cramped or awkwardly positioned within your design.

#### Scroll Image Border

Adding a **Scroll Image Border** can help define the image's boundaries. You can customize the border's color, width, and style, which can either blend with or contrast against the rest of the page.

#### Scroll Image Box Shadow

The **Box Shadow** setting allows you to create depth by adding a shadow around the scroll image. This effect can be used to make the image appear as though it’s hovering above the page. The shadow settings include adjustments for:

* **Color**
* **Blur Strength**
* **Spread Spread Strength**
* **Horizontal and Vertical Offsets**

### **Font Style Customization**

The Scroll Image module allows you to customize the **Title** and **Description** fonts independently, giving you precise control over how each text element appears.

#### Title Font Style

In the **Title Font Style** section, you can customize the font settings for the title text:

* **Font Family**: Choose from a wide variety of fonts to match your website’s branding.
* **Font Weight**: Adjust the weight of the text (e.g., Light, Normal, Bold).
* **Alignment**: Align the text to the left, right, or center, depending on your layout.
* **Letter Spacing**: Increase or decrease the spacing between letters to achieve your desired typographic look.
* **Line Height**: Adjust the space between lines of text for better readability.
* **Color**: Choose the color of the title text.
* **Text Shadow**: Add a shadow behind the text to create depth and highlight the title.

#### Description Font Style

Similarly, the **Description Font Style** offers a wide range of options for customizing the description text. This ensures that your description is styled in a way that complements the overall design of the scroll image.

### **Badge Customization**

Badges are a crucial part of the Scroll Image module, especially if you’re using the scrollable image to highlight special offers or important content. The **Badge Customization** section offers several options for styling the badge:

#### Badge Background

The **Badge Background** is one of the most customizable elements in the Scroll Image module. You can choose between a solid color, gradient color, or even use an image as the background for your badge, giving it a unique look that suits your website’s style.

* **Badge Background Color**: You can set a solid color for the badge background, choosing from any color in the palette or using custom hex codes. This is ideal if you want a bold, uniform badge that stands out.
* **Badge Background Gradient Color**: If a single color feels too flat, you can add a gradient background to your badge. The **Gradient Color** feature lets you choose a primary and secondary color, as well as define the direction of the gradient (horizontal, vertical, diagonal). This gives the badge a more dynamic and polished look.
* **Badge Background Image**: For even more customization, you can use an image as the badge’s background. This is useful for brands that want to use logos, textures, or patterns within the badge. The **Background Image** setting allows you to upload any image, adjust its size, and control its position to ensure it fits well within the badge area.

#### Badge Spacing

The **Badge Spacing** settings control how much space surrounds the badge, ensuring it is visually distinct from the rest of the content. This option includes the ability to add margin and padding to the badge.

* **Margin**: Adjust the distance between the badge and other elements of the scroll image. This ensures the badge doesn't feel cramped or too close to other content.
* **Padding**: Padding adds space inside the badge, between the badge’s content (text or icon) and its border. This is useful if you want to create a more spacious, well-balanced badge design.

#### Badge Font Style

The **Badge Font Styles** section gives you the tools to customize the appearance of the badge text. You can control every aspect of the text, from font family to color and shadow effects, to make sure the badge fits your website’s overall design language. Here’s what you can customize:

* Font
* Font Weight ( Bold, medium, etc )
* Font Style ( Italic, underlined, etc )
* Alignment ( left, center, right )
* Font Color
* Line Height
* Letter Spacing
* Text Shadow

#### Badge Border

Adding a **Border** to your badge can enhance its visual appeal and define its shape. The Scroll Image module allows you to fully customize the badge border, offering settings for border width, style, and color.

#### Badge Box Shadow

Adding a **Box Shadow** to the badge gives it depth and creates the illusion that the badge is hovering above the scroll image. Box shadows are highly customizable, allowing you to control the **shadow color**, **blur**, **spread**, and **offset**.

### **Overlay Customization**

Overlays are a powerful design element that can be applied to the scroll image, allowing you to place a semi-transparent layer over the image to improve the readability of text, highlight specific areas, or add an icon.

#### Use Overlay Switch

The **Use Overlay** switch allows you to enable or disable the overlay feature on the scroll image. Once activated, you can access a range of options to customize the overlay’s appearance, including color, gradient, and even the addition of an icon.

* **Overlay Background Color**: You can set a solid color for the overlay. This is especially useful for images where you want to dim or highlight certain areas to make text or badges more legible. The color opacity can also be adjusted to fine-tune the visibility of the underlying image.
* **Overlay Background Gradient Color**: Similar to the badge, you can apply a gradient to the overlay for a more sophisticated look. The gradient can include a primary and secondary color, and you can adjust the gradient direction to match the design.
* **Overlay Background Image**: For a more creative overlay, you can use an image. This feature allows you to layer an image over your scroll image, providing extra texture or thematic elements to enhance the design. The background image can be adjusted for size and position to ensure it fits perfectly within the overlay area.

#### Use Overlay Icon

Enabling the **Overlay Icon** places an icon in the center of the scroll image. This is ideal for creating a clickable image or adding a visual cue to the image. Once activated, you’ll have access to customization options for the icon’s style and background.

* **Icon Selection**: You can choose from a wide variety of icons, such as arrows, play buttons, or custom icons, to place in the center of the overlay. This is perfect for creating interactive elements on the image, like linking to a video or another page.
* **Icon Color**: You can customize the color of the icon to ensure it stands out against the overlay and the image. Choose from the default color palette or use custom hex codes to match your site’s design scheme.
* **Icon Background**: The background of the icon is customizable with three options:
    
    
    * **Background Color**: Set a solid color for the background of the icon to make it stand out more.
    * **Background Gradient Color**: Add a gradient to the background, similar to the badge, for a more polished and layered look.
    * **Background Image**: For even more design flexibility, you can use an image as the icon’s background.

#### Overlay Icon Spacing

The **Icon Spacing** settings allow you to control how much space surrounds the overlay icon. This ensures that the icon does not feel cramped or too close to the edges of the scroll image.

* **Padding**: Control the space inside the overlay icon background, ensuring that the icon is properly balanced within its background area.
* **Margin**: Adjust the margin to position the icon appropriately on the scroll image.

#### Overlay Border

The **Overlay Border** settings allow you to add a border around the entire overlay, creating a defined space between the image and the surrounding page elements. You can adjust the border’s width, style, and color for full control.

#### Overlay Box Shadow

Lastly, the **Overlay Box Shadow** allows you to create depth around the overlay by adding shadows. This feature helps the overlay stand out, especially if you want it to hover above the image content.

The **Scroll Image** module for Divigrid is a powerful tool for adding dynamic, scrollable images to your Divi-based website. By using the extensive customization options within the **Content** and **Design** tabs, you can create visually stunning designs that captivate your audience and elevate your content. Whether you’re showcasing products, portfolios, or any other image-based content, this module offers the flexibility and control needed to create a professional and engaging experience.

## **FAQs for Scroll Image Module**

#### Q. How can I add a scroll effect to an image?

The Scroll Image Module automatically adds a scroll effect to the image. You can adjust settings such as the scroll speed and direction in the module settings.

#### Q. What are badges in the Scroll Image Module?

Badges are visual elements that you can place on your images to highlight important information such as sales, promotions, or new product features.

#### Q. Is the Scroll Image Module responsive on all devices?

Yes, the module is fully responsive and automatically adjusts to various screen sizes, including desktops, tablets, and mobile devices.

#### Q. What is the overlay feature in the Scroll Image Module?

The **Overlay** feature allows you to apply a semi-transparent layer over the image, which can include a background color, gradient, image, or icon.

#### Q. How do I add an icon to the overlay?

To add an icon, enable the **Use Overlay Icon** switch, and select an icon from the available options.

#### Q. Can I animate the scroll image?

Yes, you can add hover and scroll animations using the **Animation Settings** available in the Design tab.

#### Q. Is the Scroll Image Module SEO-friendly?

Yes, you can add **alt text** and image titles to enhance the SEO of your scroll images, making them easier for search engines to index.

#### Q. Can I apply different scrolling speeds for different sections of a webpage?

Yes, by adding multiple instances of the Scroll Image Module to different sections, you can apply varying scroll speeds, creating dynamic and interactive content.


# Star Rating


The **Divigrid Star Rating Module** is an intuitive and highly customizable feature designed to add a star-based rating system to your website. This module, a part of the **Divigrid plugin** for the **Divi** theme, is ideal for product reviews, service evaluations, or any rating system where user feedback is essential. With flexible options like custom rating icons, detailed star design settings, and the ability to display user reviews, this module allows you to present ratings in a visually appealing and informative way.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/5Mh9z1Bwa0uundoSvcjEF2yKbUSFmEHPOc5cO8vI.jpg)

## **Content Tab Settings**

The **Content Tab** holds the fundamental settings for defining the appearance and structure of your Star Rating module. Here, you can control the rating scale, customize icons, and manage the title, subtitle, and description.

### Star Rating Settings

#### Rating Scale

The **Rating Scale** allows you to define the maximum number of stars or icons that represent the rating system. The default setting is typically a 5-star system, which is widely recognized in product or service reviews. However, with this option, you can adjust the scale to fit your needs, whether it’s a 10-point scale or something unique like 6 stars. This flexibility allows you to match the rating system with your website's theme or business model.

***\[ Tip: For customer reviews, the standard 5-star rating system is widely understood and user-friendly. For more specialized industries, consider adjusting the scale accordingly.\]***

#### Rating

This option lets you set the **default rating** that will appear in the module. For example, if you are showcasing a specific product's rating, you can preset it as **3 out of 5 stars**. The rating can either be static or dynamically adjustable based on the feedback from users or customers. This is especially useful if you’re displaying product or service ratings that have been reviewed multiple times.

#### Show Rating with Title (Switch)

When this switch is activated, the **Star Rating** and the **Title** will be aligned in a single horizontal line. This creates a compact layout, which is ideal when space is limited, such as in a product summary widget or a compact review section.

#### Show Rating Number (Switch)

Enable this switch to display the actual **numeric rating** alongside the stars, enclosed in parentheses (e.g., **3/5**). This is a helpful visual cue for users to quickly gauge the rating without needing to count the stars manually. It also adds an extra layer of transparency by showing both the stars and the number.

#### Use Custom Rating Icon (Switch)

This is a standout feature in the **Star Rating module**. Activating this switch allows you to replace the traditional star icons with **custom icons** from the Divi icon library. For example, you could replace stars with hearts, thumbs, or other symbols that match your branding or the nature of the review.

#### Show Total Reviews (Switch)

Activating this switch will show the **total number of reviews** alongside the rating. This gives more context to the rating by indicating how many users contributed to the score.

#### Wrap Rating Item

Control the **layout** and **appearance** of the rating by wrapping it inside a customizable container. This setting allows you to ensure that the rating item behaves consistently across devices and layouts.

### **Content Settings**

#### **Use Image (Switch)**

If you want to add a visual element alongside the star rating, activate this switch to include an image. When activated, the following settings become available:

* **Upload Image**: Upload an image, such as a product photo, user avatar, or brand logo.
* **Image Alt Text**: Provide an **Alt Text** for the image for SEO and accessibility purposes.
* **Use Badge (Switch)**: Toggle this option to add a badge overlay on the image.
* **Use Badge Icon**: Choose an icon for the badge, which can be a star, checkmark, or any other symbol that complements the rating.

#### Title Text & Title Tag

Enter the **Title** for the rating section (e.g., **Product Name** or **Review Title**). The **Title Tag** allows you to set the heading level (**H1, H2, H3, etc.**) for SEO hierarchy and accessibility.

#### Use Subtitle (Switch)

Activate this switch to display a **Subtitle** below the main title. This adds additional information to complement the title, such as a product's tagline or a brief summary of the review.

#### Use Description (Switch)

Enabling this option will display a **description field** below the subtitle. You can use this to provide a more detailed explanation of the product, service, or user experience that is being rated.

## **Design Tab Settings**

The **Design Tab** gives you control over the visual appearance of the **Star Rating module**. This includes settings for images, fonts, icons, and overall layout styling.

#### Image Position

Choose where the image will be placed in relation to the rating and text. The available positions are:

* **Top**
* **Right**
* **Bottom**
* **Left**

#### Image Alignment

When the image is positioned at the top or bottom, you can align it to the **left, center, or right**. If the image is placed on the left or right, you can align it to the **top, center, or bottom**.

#### Image Width & Height

Adjust the **width and height** of the image to suit your design. This ensures that the image does not overpower the rating and remains proportional to the layout.

#### Image Spacing

Define the **space** between the image and other content elements like the star rating or the description. This helps maintain a clean and balanced layout.

#### **Border**

You can customize the border width, style (solid, dashed, dotted, etc.), and color. Borders can help define the image’s boundaries, making it stand out more clearly.

#### Box Shadow

This setting allows you to create a shadow around the image, giving it a three-dimensional effect. You can control the color of the shadow, its spread, blur, and position (horizontal/vertical offsets). Box shadows add depth and can make the image appear as though it’s floating.

### Font Styles

Each text element—**Title**, **Subtitle**, and **Description**—can be styled independently, giving you granular control over the typography. You can modify:

* Font
* Font Weight & Style
* Alignment
* Line Height & Letter Spacing
* Text Shadow
* Text Color

### Star Rating Settings

The **Star Rating** is the core visual element of this module. Customizing the stars allows you to match the rating design with the rest of your website, making it more engaging and visually cohesive.

#### **Star Rating Alignment**

You can control the alignment of the stars in relation to other content. Choose from:

* **Left**
* **Center**
* **Right**

#### Star Size

The size of the stars plays a significant role in their visual impact. Larger stars draw more attention, while smaller stars can blend in with the rest of the content. Adjust the star size to ensure it fits within your layout and remains visible without overpowering other elements.

#### **Star Icon Space**:

This setting controls the space between individual stars. Increasing the space can make each star more distinct while reducing it creates a more compact appearance.

#### Filled Star Color

Set the color for the filled (active) stars. This is the color that represents the actual rating value (e.g., 4 out of 5 stars).

#### Empty Star Color

Customize the color for the empty (inactive) stars. This color serves as the background or outline for the stars that are not filled.

#### Star Rating Number Color

Customize the color of the numeric value displayed next to the stars (if the option is enabled).

#### Star Rating Background

This option controls the background behind the star rating, giving it a container or background color for visual separation. Choose a solid background color or use gradients to add depth.

#### Star Spacing

This controls the space around the star rating block, ensuring it fits comfortably within the design layout. Set specific spacing (margin or padding) on all sides (top, bottom, left, right).

#### Star Border & Box Shadow

You can add borders around each star to give them more definition and emphasize the rating system. Set border width, color, and style (solid, dashed, dotted). Add shadows behind the stars to create depth and dimension. This can make the star rating more visually appealing. Control shadow color, blur radius, spread, and horizontal/vertical offset.

### Star Rating Wrapper

The wrapper settings control the overall container around the stars, allowing you to refine further the placement, background, spacing, and border properties.

#### Star Rating Wrapper Width

Adjust the width of the container holding the star rating, which can help fit the rating into specific sections of a webpage. Set the width in pixels, or percentages, or use responsive scaling.

#### Wrapper Background

Define a background color for the entire star rating wrapper, making it distinct from the rest of the page. Choose solid colors, gradient fills, images, or transparent backgrounds.

#### Star Container Spacing

Control the spacing around the star container within the wrapper, ensuring that the stars fit neatly inside the container.

#### **Border**

You can customize the border width, style (solid, dashed, dotted, etc.), and color. Borders can help define the wrapper’s boundaries, making it stand out more clearly.

#### Box Shadow

This setting allows you to create a shadow around the container, giving it a three-dimensional effect. You can control the color of the shadow, its spread, blur, and position (horizontal/vertical offsets). Box shadows add depth and can make the container appear as though it’s floating.

### Review Text

The review text section allows you to display textual feedback from users, which can be customized extensively for design and layout.

#### Review Text Space

Control the space around the review text to ensure it has proper separation from the star rating or other content elements. Increased space around review text can help make the feedback more prominent on the page.

#### Review Text Background

The background of the review text helps distinguish the text from the rest of the star rating. You can choose from:

* **Solid Color**: Pick a uniform background color for the review text.
* **Gradient**: Apply a gradient using two or more colors, which can add depth and visual interest.
* **Image**: Use a custom image as the background of the review text, adding a unique texture or pattern.

This setting allows you to play with color theory or match the brand theme to create a cohesive design.

#### Review Text Padding

Adjust the padding inside the review text block to create more breathing room between the text and the borders.

#### Font Style

You have full control over how the review text is styled, including font family, weight, alignment, and more.

* Font
* Font Weight & Style
* Alignment
* Line Height & Letter Spacing
* Text Shadow
* Text Color

#### Review Text Border & Review Text Box Shadow

You can add borders around the review text block for a cleaner, more defined look. Apply shadow effects to the review text block to give it more depth and make it stand out from the background.

### Badge Settings

Badges can be used to display additional information alongside the star rating (e.g., "Top Rated" or "Editor’s Pick"). This section covers all customization options for badges.

#### Alignment

Control the alignment of the badge relative to the star rating module.

#### Gap

Adjust the gap between the badge and the star rating or other nearby elements.

#### Icon Position

For badges that include icons, this option lets you choose where the icon is positioned in relation to the text.

#### Icon Color

Define the color of the icon within the badge, which can either complement or contrast with the text and background.

#### Badge Background

The background of the review text helps distinguish the text from the rest of the star rating. You can choose from:

* **Solid Color**: Pick a uniform background color for the badge.
* **Gradient**: Apply a gradient using two or more colors, which can add depth and visual interest.
* **Image**: Use a custom image as the background of the badge, adding a unique texture or pattern.

#### Badge Font Styles

You have full control over how the badge text is styled, including font family, weight, alignment, and more.

* Font
* Font Weight & Style
* Alignment
* Line Height & Letter Spacing
* Text Shadow
* Text Color

The **Divigrid Star Rating Module** offers a comprehensive set of tools to create visually engaging and functional star rating systems for any Divi-powered website. With full control over design elements, animations, and responsiveness, this module can be customized to fit seamlessly into any layout. Whether you're showcasing product reviews, user feedback, or any other form of rating, this module provides all the features you need to create a polished and professional design.

## FAQs About Star Rating Module

#### Q. How do I add the Star Rating module to a page or post in Divi?

Simply open the Divi Builder, add a new module, and select "Star Rating" from the list of available modules. You can then customize it according to your needs.

#### Q. How to Use the Star Rating Module

The **Star Rating Module** is highly versatile and can be used in various contexts:

* **Product Reviews**: Showcase customer feedback with star ratings.
* **Service Evaluations**: Allow users to rate services offered by your business.
* **User Reviews**: Enable visitors to rate blog posts, articles, or other content.

To use the module:

1. **Add the Star Rating Module** to your Divi page layout.
2. **Configure the Content** tab with your desired rating settings.
3. **Style the module** using the **Design** tab.
4. **Use custom CSS** in the **Advanced** tab if needed.

#### Q. Can I use custom icons instead of stars?

Yes, by enabling the **Use Custom Rating Icon** option, you can replace stars with any icon from the Divi library or upload custom icons.

#### Q. How do I display the number of reviews alongside the rating?

You can show the total number of reviews by enabling the **Show Total Reviews** switch in the Content tab.

#### Q. What is the purpose of the ‘Show Total Reviews’ switch?

When enabled, the **Show Total Reviews** switch will display the total number of reviews next to the star rating (e.g., "Based on 200 reviews").

#### Q. What is the 'Wrap Rating Item' feature?

The **Wrap Rating Item** feature ensures the entire star rating element wraps within a single container, which can be useful for responsive layouts or when aligning it with other content.

#### Q. Can I display a title along with the star rating?

Yes, you can add a title text by filling out the **Title Text** field in the **Content** tab.

#### Q. Can I customize the position and appearance of the badge?

Yes, in the **Badge** section of the **Design Tab**, you can adjust the **Badge Alignment**, **Icon Position**, **Icon Color**, and other appearance settings.

#### Q. Can I make the star icons larger for mobile devices?

Yes, you can use the **Responsive Settings** in the **Design Tab** to customize the **Star Icon Size** specifically for mobile devices.

#### Q. Can I display a numerical rating alongside the stars?

Yes, the module allows you to display a number representing the rating (e.g., 4.5 out of 5) alongside the stars.


# Testimonial Carousel


The Divigrid Testimonial Carousel module offers an elegant and customizable way to showcase client testimonials on your website using the Divi theme. This documentation will cover each setting in detail, with step-by-step instructions and tips for maximizing each feature’s potential. With options for carousel styling, item arrangement, and visual customization, this module is a powerful tool for adding credibility and aesthetic appeal to any page.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/Srf6jRKlBnS9PDyr5B47q5fu4YFYATWwhmzXeufz.png)

## **Testimonial Carousel Item Settings**

The **Item Settings** allow you to add content specific to each testimonial and include image and rating customization.

### Content Settings

Define the main content for each testimonial, including author details and the company they represent.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/aehzXL8xB3H8aKlVUJ1wq94fCe8Cip9MUntHP2Cn.png)

* **Author Name**: Enter the name of the individual providing the testimonial.
* **Author Designation**: Add the author’s title or role for authenticity.
* **Company**: Specify the name of the company associated with the testimonial.
* **Company URL**: Add a clickable link to the company’s website.
* **Description**: Provide the main testimonial text that highlights the customer's experience.

### Image Settings

Manage images associated with each testimonial, including author photos and brand logos.

* **Upload Author Image**: Add a photo of the author to personalize the testimonial.
* **Author Image Alt Text**: Include alternative text for the author’s image for accessibility and SEO.
* **Upload Brand Logo**: Add a company logo that will display alongside the testimonial.
* **Brand Logo Alt Text**: Provide alternative text for the brand logo for accessibility and SEO.

| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/GpJzKgjcFtvc6d77yCe24C4Z3piqTP2cMIcVBbTE.png) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/7WT36WcA0QcMmMPsC5I8YuI8wbE3tQorOMtf5Ux1.png) |
|---|---|

### Settings

Additional configuration options for icons and ratings.

* **Enable Star Rating Switch**: Enable or disable the star rating feature.
* **Enable Quote Switch**: Toggle this to display a quote icon or image. 
    * **Enable Quote Icon**: If using an icon instead of an image, enable this switch, and select an icon from the Divi library.

## Testimonial Carousel Item Design Tab

In the **Design Tab**, child items share a unified design, so specific design options for individual items are not available. This approach ensures a consistent visual style across all testimonials.

## **Testimonial Carousel Settings (Global)**

### **Content Tab**

The **Content Tab** is divided into multiple settings sections, allowing you to customize the overall carousel, coverflow effects, and item order within the carousel.

### 1. Carousel Settings

The Carousel Settings section allows you to define the overall functionality and layout of your carousel.

#### Carousel Type

You have the option to choose between two carousel types: "Slide" and "Coverflow." The default setting is "Slide," which provides a smooth, continuous scroll effect, moving images or content panels horizontally or vertically in a streamlined manner.

* **Coverflow**: Display testimonials in a 3D rotating view where each item is angled for a dynamic appearance. Ideal for highlighting one testimonial at a time.
* **Slide**: A classic sliding effect where each testimonial appears next to the previous, offering a smoother flow. Great for continuous scrolling of testimonials.

#### Slide per View

* The "Slides Per View" setting lets you control how many slides are displayed at once, with specific customization options for desktop, tablet, and mobile views.Each view setting ensures that the carousel adjusts responsively, providing a seamless browsing experience across all device types. Customize these options to create the ideal layout for your audience.
    
    * **Desktop**: Adjust the number of testimonials shown simultaneously on desktops.
    * **Tablet**: Set the optimal view for tablets.
    * **Mobile**: Optimize the number of slides for mobile screens to ensure readability.

#### Item Space Between

The "Item Space Between" setting allows you to control the spacing or gap between individual slides in the carousel, enhancing both aesthetics and readability across devices. This customization is crucial for achieving a balanced, clean look that adjusts responsively.

#### Speed (ms)

The "Transition Speed" setting lets you define the duration, in milliseconds, for the transition between each slide. This feature allows you to control how quickly slides, such as testimonials, rotate within the carousel.

#### Centered Slide

The "Enable Centered Slide" setting allows you to focus on a single, central slide within the carousel, giving it prominence over the surrounding slides. When enabled, the selected slide is positioned in the center of the carousel, typically appearing larger or highlighted, while the neighboring slides are partially visible on each side.

| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/QRlKE4fz0Ahv4cfAlSsDdeuxIenP14gabbd17Oz8.png) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/fYzlE6lLjcWqRE4Xbw3AUoHDraBdE0Y4wBch4iHX.png) |
|---|---|

#### Enable Looping

The "Enable Loop" setting allows the carousel to continuously cycle through the slides without stopping, creating an infinite loop effect. When this option is activated, once the last slide is reached, the carousel seamlessly transitions back to the first slide, providing an uninterrupted viewing experience.

#### Autoplay

The "Autoplay" setting enables the carousel to automatically rotate through the slides without any user intervention. When activated, the slides will transition at a predetermined interval, allowing users to enjoy the content without needing to click or scroll manually.

#### Autoplay Delay

The "Autoplay Delay" setting determines the amount of time, in milliseconds, that each slide remains visible before transitioning to the next one in an autoplay carousel. This interval is crucial for managing the pace at which content is presented, allowing you to tailor the viewing experience based on the type of content and audience preferences.

#### Pause on Hover

The "Pause on Hover" setting allows the autoplay feature of the carousel to temporarily halt when a user hovers their mouse pointer over a slide. This functionality enhances user control over the viewing experience, ensuring that they can pause and focus on specific content without the carousel automatically transitioning to the next slide.

#### Enable Dot Pagination Switch

The "Dot Pagination" setting provides a visual navigation aid for the carousel, displaying a series of dots or indicators at the bottom of the slider that represent each slide. These dots allow users to see their current position within the carousel and navigate directly to specific slides by clicking on the corresponding dot.

#### Equal Height Item

The "Equal Height Item" setting ensures that all slides in the carousel maintain the same height, regardless of the content within each slide. This feature creates a visually balanced and cohesive look, enhancing the overall aesthetics of the carousel while improving user experience.

### 2. Coverflow Settings

The **Coverflow Settings** are applied when the Coverflow effect is enabled. Customize the 3D appearance and rotation of the slides.

#### Enable Slide Shadows

Enabling the "Shadow Effect" option adds a visually appealing shadow to the testimonial carousel slider, enhancing its depth and making it stand out on the page. This feature provides two distinct coloring methods for the shadow: **dark** and **light**, allowing for customization based on your design preferences. You can easily adjust the shadow color to complement your overall design scheme. This flexibility ensures that the carousel blends seamlessly with your website’s aesthetics, enhancing the visual hierarchy of the content. By default, the shadow effect remains turned **OFF.**

#### Slide Rotate (Degrees)

Adjust the degree of rotation for each slide, giving testimonials a tilted look. A higher degree creates a more dramatic rotation.

***\[Tips:** Ensure that the rotation effect looks good across different devices and screen sizes. Subtle rotations may work better on smaller screens, while more dramatic rotations might be suited for larger displays.**\]***

#### Stretch Space Between Slides

The "Stretch Space Between Slides" setting allows you to adjust the spacing between individual slides within the carousel, effectively controlling the amount of space that separates each item. This feature enhances the visual layout of the carousel, contributing to a more organized and aesthetically pleasing presentation.

#### Depth Offset (px)

Set the depth of the carousel, providing a sense of layered depth among testimonials. A larger offset brings the central slide closer to the viewer. The "Depth Offset (px)" setting allows you to create a sense of depth in the carousel by adjusting the vertical positioning of slides. This feature lets you offset each slide in relation to the others, adding a three-dimensional effect that enhances visual interest and engagement.

#### Effect Multiplier

The "Effect Multiplier" feature serves as a powerful tool that amplifies the values of all attributes within the Coverflow carousel settings. By adjusting this multiplier, you can enhance the visual effects and transitions applied to each slide, allowing for a more dynamic and engaging presentation. This setting takes all the defined attributes—such as rotation, scale, and opacity—and multiplies them by the specified value. This means that increasing the multiplier will intensify the effects, making the carousel more visually striking. In summary, the "Effect Multiplier" feature provides a flexible way to control the intensity of the Coverflow carousel's visual effects, enabling you to create a captivating and cohesive user experience tailored to your design vision.

### 3. Items Order

The **Items Order** section provides you with the flexibility to customize the display order of various elements within the testimonial carousel. This feature enables you to arrange content in a way that best suits your design and enhances user engagement. Here’s how each component can be configured:

* **Quote Order**: Determine the placement of the quote icon or image within the testimonial. You can choose to position it prominently at the beginning, in the center, or any other location that aligns with your design preferences.
* **Brand Logo Order**: Control the arrangement of the brand logo associated with the testimonial. Whether you want it to appear at the top, bottom, or alongside the testimonial text, this setting allows you to create a cohesive visual flow.
* **Description Order**: Set the position of the testimonial description to ensure that the content is presented in a logical sequence. This could involve placing the description before or after the author’s details, depending on how you wish to convey the message.
* **Author Wrapper Order**: Organize the information about the author of the testimonial, such as their name, title, and other relevant details. You can decide where this information fits best within the overall layout, enhancing clarity and user understanding.

By utilizing the **Items Order** feature, you can create a tailored presentation of testimonials that effectively highlights key elements and improves the overall user experience on your site.

## **Testimonial Carousel Design Settings (Global)**

The **Global Design Tab** governs the overall style, layout, and appearance of each component within the testimonial carousel, ensuring a cohesive and visually appealing presentation across all slides. Here’s a breakdown of the key features available under this tab:

### 1. Image Settings

Customize the appearance and spacing for author images to enhance their visual impact within the carousel.

* **Author Image Max Width**: Specify a maximum width for the author images to maintain consistency in size and ensure that they fit well within the layout. This control helps to create a balanced look without overwhelming other elements in the carousel.
* **Spacing (Margin and Padding)**: Adjust the spacing around the author images using margin and padding settings. This flexibility allows you to create the desired amount of space between the images and other elements, promoting clarity and visual harmony.
* **Image Border and Box Shadow**: Personalize the appearance of author images by adding borders and shadow effects. Custom borders can frame the images beautifully, while box shadows can add depth, making the images stand out and drawing the viewer’s attention.

### 1. Brand Logo Settings

The **Brand Logo Settings** section provides design options specifically tailored for the logos associated with testimonials. These settings allow you to customize the appearance of brand logos, ensuring they enhance the overall aesthetic of the carousel. Here’s an overview of the key features:

* **Brand Logo Max Width**: Set a maximum width for brand logos to ensure consistent sizing across all testimonials. This control helps maintain a uniform look and prevents logos from dominating the visual hierarchy of the carousel.
* **Alignment**: Choose the alignment of the brand logos to suit your layout preferences. Options may include left, center, or right alignment, allowing you to position the logos in a way that complements the overall design and improves readability.
* **Background Options**: Customize the background for the brand logos with color, gradients, or images. This flexibility enables you to create a distinct visual context for the logos, enhancing their visibility and integration within the carousel.
* **Spacing, Border, and Box Shadow**: Define spacing around the brand logos to maintain proper separation from other elements. Additionally, you can add borders or shadows to enhance the styling of the logos, making them stand out and contributing to the overall design cohesiveness.

By leveraging the features within the **Brand Logo Settings**, you can create a polished and visually appealing presentation for brand logos in your testimonial carousel, reinforcing brand identity and enhancing user engagement.

### Author Settings

The **Author Settings** section offers design options specifically tailored for the display of author information within the testimonial carousel. These settings allow you to customize the presentation of the author’s details, ensuring they are both visually appealing and coherent with the overall design. Here’s a breakdown of the key features:

* **Author Image Position**: Adjust the positioning of the author image to create a balanced layout. You can choose to place the image alongside the text, above it, or in any configuration that enhances readability and visual flow.
* **Horizontal and Text Alignment**: Set the alignment for both the author text and image. Options include left, center, or right alignment, allowing you to create a harmonious arrangement that fits your design preferences and improves user engagement.
* **Author Box Spacing**: Control the spacing around the author box to ensure adequate separation from other elements in the carousel. Proper spacing enhances clarity and allows users to focus on the author's information without distraction.
* **Author Box Background**: Customize the background of the author box with a solid color, gradient, or image. This feature enables you to create a distinct visual context for the author’s information, making it more prominent and engaging.
* **Border and Box Shadow**: Add borders or shadow effects to the author box to enhance its styling. Borders can frame the author information, while shadows can create depth, adding to the overall visual appeal of the carousel.

By utilizing the features within the **Author Settings**, you can effectively design a visually compelling and organized presentation of author information, enhancing the overall user experience of your testimonial carousel.

### Font Styles

Typography is one of the most important aspects of design. The **Font Style** section gives you full control over how the text appears, allowing you to craft a cohesive look for your Testimonial.

**Font Styles for Author, Designation, and Company**

Define fonts, colors, alignments, text shadows, etc for the author’s name, title, and company. Here’s what you can adjust:

| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/m7NsHtIZx3YkBajLMwhGvUHOFr4jKVaGFwqyj8TO.png) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/vBq1wCdXxz72uaT3egFSuKqS3kmiQCBWp0nuAEmU.png) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/I486WWaO4veDU7NbqpkmIPjvBnB5hDGf0jqizOA8.png) |
|---|---|---|

**Fonts**: Select from Divi’s wide range of available fonts to create a distinct look that aligns with your brand. This customization lets you use a modern, professional, or playful font depending on the tone of your Testimonial carousel.

**Font Weight**: Control the thickness of the text with font weight options, ranging from light to extra bold. This allows you to emphasize certain elements.

**Text Alignment**: Align the text to the left, center, or right to match the overall alignment of your carousel items.

**Line Height**: Adjust the spacing between lines of text. By modifying the line height, you can make your content more readable and improve its overall visual flow.

**Letter Spacing**: Set the space between individual letters to make the text feel more open or condensed.

**Text Shadow & Color**: Add a shadow effect to the text for a subtle 3D appearance. You can also choose text colors that complement the rest of your design, ensuring a harmonious color scheme.

### Font Styles (Description)

Define **Fonts, Colors, Alignments, Text shadows, Line height, Font styles, Font weights, Font sizes padding and Background** for the description

### Quote Settings

The **Quote Customization Settings** section allows you to tailor the appearance of quotes used in testimonials, ensuring they effectively convey the intended message while enhancing the overall design of the carousel. Here are the key features available for customizing quotes:

* **Alignment**: Set the alignment of the quote to your preference—left, center, or right. This flexibility allows you to integrate the quote seamlessly within the layout of your testimonial carousel.
* **Icon Size**: Define the size of the quote icon to ensure it is proportionate to the text and other elements. A well-sized icon can enhance visibility and improve the overall aesthetic of the testimonial.
* **Icon Color**: Choose a color for the quote icon that complements your theme, ensuring it stands out without clashing with other design elements.
* **Icon Background Color**: Add a background color to the quote icon for emphasis, helping it to catch the viewer's eye and drawing attention to the testimonial.

| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/eVqy9WuWU7WbVe1CfTcH3rLQuc9Zw7Ngyf576OFJ.png) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/I8LZILEyu1AabjJ1hPYT8ZIv9GLxFNODhnh0EM1p.png) |
|---|---|

* **Quote Image Max Width**: Set a maximum width for any quote images used, maintaining a consistent look across different testimonials and ensuring that images do not overwhelm the text.
* **Opacity**: Adjust the opacity of the quote to create a transparent effect, allowing for a more layered and sophisticated visual presentation.
* **Z-Index**: Control the stacking order of the quote elements, ensuring that the quote appears correctly layered above or below other components within the carousel.
* **Quote Icon Spacing**: Define spacing around the quote icon to prevent overcrowding, allowing each element to breathe and contributing to a cleaner layout.
* **Quote Image Spacing**: Set spacing around the quote image for a balanced design that enhances overall readability and aesthetics.
* **Quote Container Spacing**: Control spacing for the entire quote container to facilitate better layout management, ensuring that the quote is visually distinct from other elements.
* **Quote Border and Box Shadow**: Add borders and shadow effects to the quote container for added visual interest, creating a more engaging and dynamic presentation.

### Arrow Settings

The **Navigation Arrow Customization** section allows you to personalize the navigation arrows used in your testimonial carousel, enhancing usability and visual consistency. Here are the key features available for customizing navigation arrows:

* **Previous and Next Arrow Icon Selection**: Choose custom icons for the navigation arrows to match your branding and style preferences. This flexibility allows for a unique look that aligns with the overall design of your carousel.
* **Arrow Position**: Define the positioning of the arrows relative to the carousel. You can select whether they appear top, center or bottom of the carousel, allowing for optimal placement based on your layout.
* **Arrow Alignment**: Set the horizontal alignment of the arrows, with options for left, center, or right alignment. This control ensures that the arrows are positioned in a way that complements the overall layout and enhances user experience.
* **Opacity**: Adjust the opacity of the arrows to create a subtle effect, allowing them to blend seamlessly with the carousel while remaining functional and easily identifiable.
* **Icon Color**: Customize the color of the arrows to fit your design scheme, ensuring they stand out appropriately against the carousel background.
* **Icon Size**: Control the size of the arrows to ensure they are easily clickable and accessible to users, promoting better navigation throughout the carousel.
* **Icon Background Color**: Add a background color to the arrows for emphasis, helping them to pop against the surrounding elements and improve visibility.
* **Icon Border Radius**: Define how rounded the corners of the arrow icons are for stylistic choices. This feature allows you to create a softer or more modern look, depending on your design goals.
* **Previous Arrow Spacing**: Set spacing around the previous arrow to achieve an optimal layout that balances the visual elements of the carousel.
* **Next Arrow Spacing**: Control spacing around the next arrow to maintain equilibrium and ensure a visually appealing arrangement.
* **Arrow Container Spacing**: Manage spacing for the entire arrow container, facilitating better integration with the rest of the carousel design.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/eJuapKQJtgBGs2j0Qa1BzCY7RHdqxffzlUPVsaij.png)

### Dot Pagination Settings

The **Pagination Dot Customization** section allows you to manage the appearance and layout of the pagination dots used for navigation within your testimonial carousel. This feature enhances user experience by providing clear visual cues for slide navigation. Here are the key customization options available:

* **Dots Size**: Set the size for pagination dots to ensure they are easily visible and proportionate to the overall design of the carousel. A well-sized dot can enhance user interaction and visibility.
* **Alignment**: Define the alignment of the dots, with options for left, center, or right positioning. This flexibility allows you to integrate the dots harmoniously within your carousel layout.
* **Large Active Dot Switch**: Enable or disable a larger size for the active dot, making it stand out from the inactive dots. This feature helps users easily identify the currently displayed slide. The large active dot size is **40px**.
* **Dots Color**: Choose colors for the inactive dots to match your design scheme, ensuring they are cohesive with the overall look of the carousel.
* **Active Dot Color**: Set a distinctive color for the active dot to draw attention, allowing users to quickly see which slide they are currently viewing.
* **Dots Spacing**: Control the spacing between the dots for a clean and organized appearance. Proper spacing contributes to an uncluttered layout, enhancing the user experience.

### Star Ratings

The **Star Rating Customization** section enables you to define the design parameters for star ratings, allowing you to create a visually appealing and cohesive representation of ratings within your testimonial carousel. Here are the key features available for customizing star ratings:

* **Alignment**: Define the alignment of the star rating, with options for left, center, or right alignment. This flexibility allows you to position the star ratings in a way that complements the overall layout of your testimonial carousel.
* **Star Font Size**: Control the size of the star icons to ensure they are easily recognizable and proportionate to other elements in the carousel. Proper sizing enhances visibility and readability.
* **Star Icon Space**: Set the space between individual star icons to create a balanced and visually appealing arrangement. Adequate spacing helps prevent overcrowding and improves the overall aesthetic.
* **Filled Star Color**: Choose the color for filled stars, which signify positive ratings. Selecting a distinct color can enhance user engagement and visually communicate the quality of the testimonial.
* **Empty Star Color**: Set the color for empty stars to provide contrast against filled stars, contributing to a clearer representation of ratings.
* **Star Rating Number Color**: Customize the color of the numeric rating display to ensure it aligns with your design scheme, making the ratings easily readable.
* **Star Rating Number Size**: Control the font size of the numeric rating to enhance visibility and ensure it is proportionate to the star icons.
* **Star Rating Background**: Set a background color for the rating display to help it stand out and integrate smoothly within the overall design of the carousel.
* **Star Ratings Spacing**: Adjust the spacing for the entire star rating component to create a cohesive layout that enhances readability and overall design harmony.

### Item Settings

The **Item Settings** section provides a comprehensive set of options for individual item customization within your testimonial carousel. This allows you to define the overall layout and visual appearance of each testimonial. Below are the key features available for customizing testimonial items:

#### Items

* **Item Background Options**: Set the background style for each testimonial item, offering a range of options:
    
    
    * **Background Color**
    * **Gradient Color**
    * **Background Image**
* **Border**: Define the border properties for each testimonial item, allowing for a visual distinction between testimonials.
* **Box Shadow**: Add shadow effects to create depth, giving each testimonial item a layered appearance that stands out.
* **Spacings**: Control padding and margins around each testimonial to achieve balanced layouts and enhance readability. Proper spacing is crucial for an uncluttered design.

#### Item Box

* **Item Box Background Options**: Similar to the item settings, this feature allows you to customize the box surrounding each testimonial, ensuring a cohesive design throughout.
* **Border**: Set borders for the item box to provide visual distinction and enhance the overall layout.
* **Box Shadow**: Incorporate shadows for depth and emphasis, making the item box visually appealing.
* **Spacings**: Adjust spacings around the item box to ensure a well-structured layout that aligns with the overall design.

The **Divigrid Testimonial Carousel Module** offers a comprehensive solution for displaying customer testimonials with flexibility and style. By utilizing the extensive settings available in the Content and Design tabs, you can create a visually appealing and functional carousel that enhances the credibility of your website. This documentation provides a detailed overview of each setting to ensure you can make informed decisions about how to best utilize this powerful module.

## **Frequently Asked Questions (FAQs)**

**Q. Is it possible to use images in the testimonials?**

Absolutely! You can upload images for authors or brands within the testimonial settings.

**Q. How can I pause autoplay on hover?**

Enable The pause on hover switch, the autoplay feature when the user hovers over the carousel, allowing them to read a specific testimonial without interruption.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/9AmawxKB3b3Rps9izpa9cnD5tO1lFYGmhamzu88V.png)

**Q. What is the "Centered Slide" feature?**

The Centered Slide feature ensures that the current testimonial is prominently displayed in the center of the carousel.

**Q. What happens if I enable the Equal Height Item option?**

Enabling the Equal Height Item option ensures that all testimonials have the same height, providing a uniform appearance.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/LHPy4wLWioeoSYLB7ItyQXKJYUgGCBwu0gtHH9jS.png)

**Q. Can I add a link to the company name in the testimonial?**

Yes, you can include a Company URL in the item settings, allowing users to click through to the company website.

**Q. Are there any limitations on the number of testimonials I can add?**

Typically, there is no strict limit, but performance may be affected if you add too many testimonials, so it's best to keep it manageable.

**Q. Is it possible to display numeric ratings alongside star ratings?**

Yes, you can enable the numeric rating display, which can be customized in terms of color and font size.

| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/VLJ6V3G3WGvgTlg89e0iMq8D9Xbhaeyg969lrYs2.png) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/LI3YBGgIYX9ZgDlq3kHw8kH35E19cfE5isnVyFYl.png) |
|---|---|

**Q. What is the "Effect Multiplier"?**

The Effect Multiplier enhances the visual effects of the carousel, multiplying the values of attributes set in the Coverflow settings for more pronounced effects.

**Q. Can I use multiple testimonial carousels on one page?**

Yes, you can add multiple instances of the Testimonial Carousel Module on a single page, allowing for varied testimonials in different sections.

**Q. What image formats are supported for uploading author images and logos?**

The module supports standard image formats such as JPG, PNG, and GIF for author images and brand logos.

**Q. How do I ensure my testimonials are responsive?**

The module is designed to be fully responsive. You can test responsiveness by adjusting the display on various devices and screen sizes.

**Q. Can I link testimonials to specific pages on my website?**

Yes, you can add links to testimonials that direct users to specific pages for more information about the service or product being reviewed.

**Q. Can I set a delay for autoplay?**

Yes, you can set an autoplay delay in milliseconds to control how long each testimonial is displayed before the next one appears.

**Q. What kind of support is available for troubleshooting?**

Divigrid offers customer support through documentation, and direct contact options for resolving issues.


# Tilt Image Card


The Divigrid Tilt Image Card Module is a powerful and versatile tool designed to create visually engaging and interactive image cards with dynamic tilt effects. This module offers extensive customization options that allow you to fine-tune every aspect of the card's content and design. Below is a comprehensive guide to configuring the **Content** and **Design** tabs for the Tilt Image Card module.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/lWI6Q3IvHeq0gQriHeqMeMWc05usH2emRMr95SFF.jpg)

## **Content Tab Customization**

###  **1. Contents**

**Tilt Title Text:** This field allows you to enter the primary title that will appear on the tilt card. The title is a key element that catches the viewer's attention**.**

**Tilt Title Tag:** Select the appropriate HTML tag for the title, such as H1, H2, H3, etc., based on its importance in your content hierarchy. This choice affects SEO and the visual presentation of the title.

**Description**: Add a brief description that provides context or additional information to complement the title. This is particularly useful for summarizing the content or providing a call to action.

**Use Stroke Text Switch**: Enable this option to apply a stroke effect to the title text, giving it a more pronounced and styled appearance. This can make the title stand out against various backgrounds.

**Use Button Switch**: Activate this switch to include a button within the card, turning it into an interactive element. The button can link to other pages, products, or external resources.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/FPbLrqeJGmqtnTEmdJBDR1hC3UkusHrxD9XAFLw1.jpg)

### **2. Image & Icon**

**Use Image Switch**: Turn on this switch if you want to display an image on the tilt card. This image serves as the main visual element and should be high-quality and relevant to the content.

**Use Icon Switch**: Toggle this switch to display an icon instead of an image. Icons are useful for minimalist designs or to represent abstract concepts visually.

***Note: Both switches can remain off if you do not wish to display an image or icon, focusing the card purely on text content.***

### **3. Tilt Settings**

**Reverse the Tilt Direction**: This option allows you to reverse the default direction of the tilt effect, changing how the card responds to mouse movements. It's useful for creating a customized user experience.

**Tilt Rotation**: Adjust the degree of rotation applied to the card when it tilts. This setting defines the intensity of the tilt effect, giving you control over how subtle or dramatic the effect appears. Control the degree of rotation applied to the card when it is tilted. This setting defines how much the card will tilt on the X and Y axes.

**Transform Perspective**: Set the perspective from which the card appears to tilt. A higher perspective value creates a more pronounced 3D effect, adding depth to the card.

**Glare Switch**: Enable this switch to add a glare effect to the card. The glare simulates light reflecting off the card's surface, enhancing the 3D appearance.

* **Glare Opacity**: Fine-tune the opacity of the glare to adjust its visibility. A higher opacity makes the glare more noticeable, while a lower opacity creates a subtler effect.

**Card Scale on Hover**: This option allows the card to slightly scale up when hovered over, adding a dynamic zoom effect. It draws attention to the card and invites interaction.

**Speed**: Control the speed of the tilt and hover effects. A faster speed creates a more responsive effect, while a slower speed can create a more relaxed, fluid motion.

**Full Page Listing Switch**: When this switch is activated, the card will extend to cover the full width of the page, making it a prominent visual feature.

| ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/3MTklHzdOPcYtxeN2TMXsIzmtuNDb1QcVRoBpPHP.jpg) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/oKUZEugj1IDAjrD8L2Wyk3NJELmpCJtlCwova6Ds.jpg) | ![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/EEwJgG2q6pxTXU9zqPmHp1HervNqi52Hp3A3ceLG.jpg) |
|---|---|---|

**Disable X/Y Axis Switch**: Choose to disable the tilt effect on the X-axis, Y-axis, or both. This setting is useful if you want to restrict the tilt movement to a single axis or prevent it entirely.

* **Disable X/Y Axis Value**: Specify which axis (or both) should be disabled to restrict the tilt effect.

**Use 3D Effect Switch**: Toggle this switch to enable a 3D transformation effect, adding depth and a more immersive experience to the tilt card.

* **Translate Z**: Adjust the Z-axis translation to control the depth of the 3D effect. This setting helps to create a more or less pronounced 3D illusion.
* **Scale**: Modify the scale of the card to enhance or minimize the 3D effect. Scaling can make the card appear larger or smaller when tilted.

**Show Content on Hover**: Activate this option to reveal the card’s content only when the user hovers over it. This effect can create a sense of discovery and interactivity.

* **Content Animation**: Select from various animation styles to control how the content appears when the card is hovered over. This adds an extra layer of engagement.
* **Animation Speed**: **Animation Speed**: Set the speed of the content to reveal animation, ensuring that it aligns with the overall design aesthetic and user experience.

**Always Show Content on Mobile**: **Always Show Content on Mobile**: Enable this setting to ensure that the card’s content is always visible on mobile devices, where hover effects may not function as intended.

## **Design Tab Customization**

The Design Tab provides options to refine the visual style of the Tilt Image Card, including settings for images, icons, typography, and overall card appearance.

### **1. Image & Icon Style**

**Image/Icon Alignment**: Set the alignment of the image or icon within the card. Options include left, center, and right alignment, allowing you to position the visual element precisely.

**Width & Height**: Define custom dimensions for the image or icon to ensure that it fits seamlessly within the card’s layout and complements the overall design.

**Margin & Padding**: Control the spacing around the image or icon by adjusting the margin and padding. This helps to fine-tune the visual balance and spacing within the card.

**Border**: Apply a border to the image or icon to make it stand out. You can customize the border style, width, and color to match the card’s design.

**Box-Shadow**: Add a shadow effect to the image or icon, creating depth and emphasizing the visual element. The box-shadow setting allows you to control the shadow’s color, size, and position.

### **2. Font Styles**

**Individual Font Styles for Title and Description**: Customize the typography for the tilt title and description separately. You can set the font family, size, weight, text shadow, line height, alignment, letter spacing, color, and padding, ensuring that each text element is distinct and visually appealing.

**Stroke Fill Color**: If the stroke text option is enabled, you can select a fill color for the stroke, allowing you to create a vibrant, outlined text effect that enhances readability and style.

### **3. Content Wrapper Settings**

**Background**: Set a background color or image for the content wrapper. This background serves as a canvas for the card’s text and visuals, adding contrast and depth to the design.

**Margin & Padding**: Adjust the spacing around the content wrapper by modifying the margin and padding. This setting allows you to control the layout and spacing within the card, ensuring a balanced and aesthetically pleasing design.

**Border**: Define a border for the content wrapper, with options to customize the style, width, and color. This can help to frame the content and make it stand out within the card.

**Box-Shadow**: Apply a shadow effect to the content wrapper, giving it a layered look that adds depth and dimension to the card.

## **Some Common FAQs About Tilt Image Card**

#### **Q. Can I reverse the tilt direction on the Tilt Image Card?**

Yes, you can reverse the tilt direction by toggling the "Reverse Tilt Direction" switch in the Tilt Settings. **Go to Tilt Settings >> Reverse the tilt direction switch >> Turn ON**

**![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/KWP5lMiqDOlnoBLNbZFnvktAKdpEfaFZc1HzMCho.jpg)**

#### **Q. Can I use both an image and an icon on the same Tilt Image Card?**

No, you must choose either an image or an icon by turning on the corresponding switch under the Image & Icon section.

#### **Q. How do I apply a stroke effect to the title text?**

Enable the "Use Stroke Text" switch under the Content section, and then customize the stroke fill color under the Design tab.
To activate the stroke go to **Go to Content >> Use stroke text >> Turn ON**

**![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/GL00HBR0Grra796o0pok1nwFyjogtWHZy6WRac7U.jpg)**

To design stroke text **Go to the Design tab >> Font Styles >> Title >> Stroke fill color**

**![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/qlFYi3YvI8eMJXKIRZnwzwv2RvIigmwS87X56dfe.jpg)**

#### **Q. How can I change the tilt rotation angle?**

You can adjust the tilt rotation angle in the Tilt Settings by setting the desired degree of rotation. **Go to Tilt Settings >> Max tilt rotation (Degrees)>> Modify the degree value**

**![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/hvxTIo5vu1OhyQzIIdkTIPj456ixoIMlHf1GVz8Y.jpg)**

#### **Q. What does the Glare effect do?**

The Glare effect simulates light reflecting off the card's surface, enhancing its 3D appearance. You can enable this in the Tilt Settings and adjust its opacity.

#### **Q. Can I disable the tilt effect on certain axes?**

Yes, you can disable the tilt effect on the X-axis, Y-axis, or both using the "Disable X/Y Axis Switch" in the Tilt Settings. **Go to Tilt Settings >> Disable X/Y Axis >> Activate the switch >> Choose disable X/Y axis value**

**![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/OT7EJzD49eGH3ENYpNTOEUFCcotWUb9dQeVuw9uQ.jpg)**

#### **Q. What does the Full Page Listing switch do?**

When enabled, the Full Page Listing switch expands the Tilt Image Card to cover the full width of the page, making it a prominent visual element.

#### **Q. Can I add animation to the content reveal on hover?**

Yes, you can select from various content reveal animations and set the speed in the Tilt Settings under the Show Content on Hover option.

#### **Q. How can I make the Tilt Image Card full-width?**

Enable the Full Page Listing switch under Tilt Settings to make the card extend to the full width of the page.

#### **Q. How can I control the perspective of the tilt effect?**

The Transform Perspective setting in the Tilt Settings allows you to control the depth and angle of the tilt effect, giving you more control over how the card moves in 3D space.

#### **Q. What does the "Always Show Content on Mobile" option do?**

The "Always Show Content on Mobile" option ensures that all content on the card is displayed on mobile devices, regardless of the hover or reveal settings.


# Twitter Modules


Enhance audience engagement effortlessly with our state-of-the-art Twitter Integration Modules for Divi. These advanced modules allow seamless embedding of Twitter’s powerful features directly onto your website, offering a range of customization options to suit your brand’s unique style. Whether your goal is to showcase live tweets, increase follower counts, or enable easy content sharing, our modules provide full responsiveness across all devices, ensuring a cohesive look and experience for your audience. Boost your site's social connectivity and user engagement without compromising on design, driving visibility and interactions that align with your brand’s identity. Let your website thrive with integrated social interactions that capture attention and foster connections.

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/FIRsTPMtaQ20e8FNrfR0n5Azb8ULp8mV840XJZHp.png)

In this documentation, we’ll guide you through each feature, customization option, and step-by-step setup process to help you get the most out of these Twitter Integration Modules.

## Twitter Timeline

The **DG Twitter Timeline Module** enables you to embed a live Twitter feed onto your webpage, making it easy to showcase tweets from any Twitter account. This guide provides step-by-step instructions for configuring and customizing the Twitter Timeline module, enhancing user experience with your social media content.

---

### Module Setup: Inserting the Twitter Timeline Module

1. **Activate Divi Grid**: Ensure Divi Grid is activated, as it adds additional modules like the DG Twitter Timeline to your Divi builder.
2. **Add the Twitter Timeline Module**: 
    * Open a page or post that uses the Divi builder.
    * Add or edit a row, then click on **Add New Module**.
    * Select **DG Twitter Timeline** from the module options.

---

### Content Tab: Adding and Configuring Twitter Timeline

1. **Adding Twitter Timeline**:
    
    
    * Go to the **Content** tab.
    * Locate **Twitter Name** and in **Twitter Username**, enter the Twitter handle (username) of the account you want to display.
2. **Customizing Twitter Theme**:
    
    
    * Change the appearance of the timeline by navigating to **Twitter Name Settings** and adjusting the **Theme** option.
    * Select either **Light** or **Dark** to match your website’s design.

---

### Twitter Timeline Settings: Display Options and Customizations

1. **Limit Tweets**:
    
    
    * **Description**: This option allows you to set a maximum number of tweets to display. If left off, the module will show the default number of tweets.
    * **Setting**: Toggle switch (On/Off).
2. **Display Header**:
    
    
    * **Description**: Choose to display a header at the top of the Twitter feed, which includes the Twitter account name and handle.
    * **Setting**: Toggle switch (Yes/No).
3. **Display Footer**:
    
    
    * **Description**: Enable this option to add a footer, which often includes options to follow the Twitter account or view more tweets.
    * **Setting**: Toggle switch (Yes/No).
4. **Add Borders**:
    
    
    * **Description**: Adds a border around the Twitter feed for visual separation from other elements on the page.
    * **Setting**: Toggle switch (Yes/No).
5. **Set Transparency**:
    
    
    * **Description**: When enabled, removes the background color of the Twitter feed, allowing it to blend with your website’s design.
    * **Setting**: Toggle switch (Yes/No).
6. **Show Scrollbar**:
    
    
    * **Description**: Enable this option to add a scrollbar within the Twitter feed. This is useful if you want to restrict the feed's area but allow scrolling.
    * **Setting**: Toggle switch (Yes/No).
7. **Set Max Width**:
    
    
    * **Description**: Define the maximum width of the Twitter feed to ensure it fits within the desired layout on larger screens.
    * **Setting**: Numeric input (pixels or percentage).
8. **Set Max Height**:
    
    
    * **Description**: Define the maximum height of the Twitter feed to control vertical space, especially for responsive design.
    * **Setting**: Numeric input (pixels or percentage).

---

### Alignment: Adjusting the Module Placement

1. **Aligning the Twitter Feed**: 
    * Go to the **Twitter Name** tab and find **Alignment**.
    * Choose the alignment option that best fits the module within your page layout.

---

This documentation covers all the essential steps to configure and integrate the DG Twitter Timeline Module, making it simple to showcase a live Twitter feed on your site while maintaining a professional, cohesive design.

## Twitter Embedded Tweet Module

The **DG Twitter Embedded Tweet Module** allows you to embed specific tweets directly on your webpage using the Divi builder. This guide provides a comprehensive overview of configuring and customizing the module to display tweets with various layout and display options.

---

### Module Setup: Inserting the Twitter Embedded Tweet Module

1. **Activate Divi Grid**: Ensure Divi Grid is activated to add advanced modules, including the DG Twitter Embedded Tweet, to your Divi builder.
2. **Adding the Twitter Embedded Tweet Module**: 
    * Open a page or post that uses the Divi builder.
    * Add or edit a row, then click on **Add New Module**.
    * Select **DG Twitter Embedded Tweet** from the module options.

---

### Content Tab: Configuring Embedded Tweet Display

1. **Displaying a Specific Tweet**:
    
    
    * Go to the **Content** tab.
    * Find **Twitter ID** and, in **Tweet ID**, enter the identification number of the tweet you wish to display.
2. **Show Conversation**:
    
    
    * **Description**: This option allows you to display the conversation thread associated with the tweet, offering more context.
    * **Setting**: Go to **Content tab > Settings > Show Conversation** and toggle the switch to enable this feature.
3. **Display Tweet Media Cards**:
    
    
    * **Description**: Show attached media such as images, videos, or link previews directly within the embedded tweet.
    * **Setting**: Go to **Content tab > Settings > Show Cards** and toggle the **Show Cards** switch to enable this option.

---

### Display Settings: Enhancing Embedded Tweet Appearance

1. **Aligning the Twitter Feed**:
    
    
    * **Description**: Adjusts the positioning of the embedded tweet within your page layout.
    * **Setting**: Go to the **Settings** tab, find **Alignment**, and select the preferred alignment option.
2. **Change Tweet Theme**:
    
    
    * **Description**: Switch between light and dark themes for the embedded tweet, enhancing readability and style.
    * **Setting**: Go to **Settings > Theme** and choose between **Light** or **Dark**.
3. **Adjust Tweet Width**:
    
    
    * **Description**: Set the maximum width of the embedded tweet, controlling how much horizontal space it occupies on your page.
    * **Setting**: Inside the **Display settings**, adjust the **Max Width** field by entering a value or using the slider.
4. **Define Twitter Language**:
    
    
    * **Description**: Specify the language code for displaying the tweet, ensuring content matches your site’s primary language.
    * **Setting**: Enter the desired language code in the **Twitter Language** field to display tweets in the specified language.

---

This documentation provides step-by-step instructions for setting up and customizing the **DG Twitter Embedded Tweet Module** within Divi, enabling you to enhance your webpage with embedded tweets tailored to your design and layout preferences.

## Twitter Share Module

The **DG Twitter Share Module** allows you to create a customizable Twitter sharing button on your webpage, enabling users to easily share content with their followers. This guide provides a step-by-step approach to setting up and configuring the module effectively.

---

### Module Setup: Inserting the Twitter Share Module

1. **Activate Divi Grid**: Ensure that Divi Grid is activated to access the additional modules in the Divi builder.
2. **Adding the Twitter Share Module**: 
    * Create or edit a page/post that uses the Divi builder.
    * Create or edit a row within the page/post.
    * Click on the **Add New Module** option and select **DG Twitter Share** from the module list.

---

### Content Tab: Configuring Share Options

1. **Adding Custom Share Text**:
    
    
    * **Description**: Input custom text to be included in the tweet when users share your content.
    * **Setting**: Navigate to the **Content tab**, find **Share Element**, and enter your desired text in the **Custom Share Text** field. 
        * *Note*: Keep in mind the Twitter character limit of 280 characters when crafting your message.
2. **Adding Page URL for the Tweet**:
    
    
    * **Description**: Specify the URL that will be included in the tweet.
    * **Setting**: Go to the **Share Element settings** and enter the desired link in the **Tweet URL** field.
3. **Adding Hashtags**:
    
    
    * **Description**: Enhance tweet visibility by including relevant hashtags.
    * **Setting**: In the **Share Element settings**, find **Hashtags** and input your desired tags.
4. **Associating Twitter Username for Attribution**:
    
    
    * **Description**: Credit a specific Twitter username in the tweet.
    * **Setting**: Go to the **Share Element**, find **Via**, and input the Twitter username you want to associate.
5. **Mentioning Related Twitter Accounts**:
    
    
    * **Description**: Mention other Twitter accounts to increase engagement and visibility.
    * **Setting**: Navigate to the **Share Element settings**, find **Related Accounts**, and input the Twitter usernames of the accounts you want to mention.

---

### Button Settings: Customizing Appearance

1. **Changing Twitter Share Button Size**:
    
    
    * **Description**: Control the size of the Twitter share button to fit your design.
    * **Setting**: Go to the **Button Settings** tab, locate **Size**, and choose between **Large** or **Small** options.
2. **Aligning the Twitter Share Module**:
    
    
    * **Description**: Adjust the positioning of the Twitter share button within your page layout.
    * **Setting**: In the **Button Settings** tab, find **Alignment** and select your preferred alignment option.

---

### Language Configuration

1. **Defining Twitter Language**: 
    * **Description**: Specify the language code to ensure tweets display in the desired language, aligning with your site's primary language.
    * **Setting**: Enter the desired language code in the **Twitter Language** field.

---

This documentation serves as a comprehensive guide for setting up and customizing the **DG Twitter Share Module** within Divi, allowing you to create an engaging and user-friendly sharing experience for your website visitors.

 

## Twitter Follow Module 

The **DG Twitter Follow Module** allows you to easily add a Twitter follow button to your website, enabling users to follow your Twitter account directly from your page. This guide outlines the steps to add and configure the module effectively.

---

### Adding the Module to Your Page

1. **Activate Divi Grid**: Ensure that Divi Grid is activated to access the additional modules in the Divi builder.
2. **Inserting the Twitter Follow Module**: 
    * Create or edit a page/post that utilizes the Divi builder.
    * Create or edit a row within the page/post.
    * Click on the **Add New Module** option and select the **DG Twitter Follow** module from the module list.

---

### Content Tab: Configuring Follow Options

1. **Adding the Twitter Follow Button**:
    
    
    * **Description**: Input your Twitter username to create the follow button.
    * **Setting**: Navigate to the **Content** tab, locate **Twitter Name**, and enter your **Tweet Username** in the designated field.
2. **Showing Twitter Username**:
    
    
    * **Description**: Determine whether to display the Twitter username next to the follow button.
    * **Setting**: Go to the **Content tab**, find **Settings**, and set **Show Username** to **NO** if you do not want to display it.
3. **Hiding Twitter Followers Count**:
    
    
    * **Description**: Control the visibility of the follower count.
    * **Setting**: Navigate to **Display**, find **Show Count**, and set it to **NO** if you wish to hide the follower count.

---

### Aligning the Twitter Follow Button

* **Description**: Adjust the positioning of the Twitter follow button within your page layout.
* **Setting**: In the **Twitter Name** tab, find **Alignment** and select your preferred alignment option.

---

### Changing Button Size

1. **How to Change Twitter Follow Button Size**: 
    * **Description**: Customize the size of the Twitter follow button to fit your design.
    * **Setting**: Go to the **Display settings**, find **Size**, and choose either **Large** or **Small**.

---

### Language Configuration

1. **Defining Twitter Language**: 
    * **Description**: Specify the language code to ensure that the Twitter follow button and related content display in the desired language, aligning with your site's primary language.
    * **Setting**: Enter the desired language code in the **Twitter Language** field.

---

This documentation serves as a comprehensive guide for setting up and customizing the **DG Twitter Follow Module** within Divi, enabling you to provide an easy and engaging way for users to follow your Twitter account.


# Visual Builder Not Loading After Installation


**Overview:** Some users have reported issues with the DiviGrid plugin, particularly with the Visual Builder not loading after installation. This problem often arises due to specific server PHP configuration settings.

**Steps to Resolve:**

**Identify the Issue:** If the DiviGrid plugin installation results in the Visual Builder not loading, it could be due to your server's PHP settings.

**Update PHP Settings:** Ensure the following PHP settings are configured correctly:

**memory\_limit: 512M**

**max\_execution\_time: 300**

![](https://assets.thrivedeskdocs.com/96de52ee388d4e4a80ee45b61edf8146/public-files/BwKbgO6yjgTScIaQDC3VDuhHbb1amLdk1zQZe3Hw.jpg)

To update these settings, you may need to access your server's PHP configuration file (`php.ini`) or contact your hosting provider for assistance.

**Further Investigation:**

* * If updating the PHP settings does not resolve the issue, further investigation is required.
    * Obtain temporary login details for the affected site to allow for a detailed examination.
 
**Creating a Temporary Login:**

* Use the [**Temporary Login Without Password**](https://wordpress.org/plugins/temporary-login-without-password/) plugin to create a temporary login without sharing your password.
* Follow these steps: 
    1. Install the **Temporary Login Without Password** plugin from the WordPress plugin repository.
    2. Create a temporary login and provide the generated link to the support team.