Divi Plus Documentation

easy instructions to get you started

Download

A download link is sent in the order confirmation email. The product can also be downloaded from My Account area.

File Structure

The name of the plugin file is divi-plus.zip.

Installation

Divi Plus can be installed using 2 methods.

  1. From WordPress Dashboard
    1. Go to WordPress Dashboard >> Plugins >> Add New >> Upload Plugin >> Choose File >> Browse divi-plus.zip and click Install Now >> Activate Plugin.
  2. Manually uploading via FTP
    1. Extract divi-plus.zip.
    2. Connect to your server using an FTP application.
    3. Navigate to wp-content/plugins/.
    4. Upload the divi-plus directory in the plugins directory of your server.
    5. Go to WordPress Dashboard >> All Plugins > > Activate Divi Plus.
  3. Once the plugin gets activated, make sure all the modules are active. To do that, go to WordPress Dashboard >> Settings >> Divi Plus >> Here, you find all the modules available in the Divi Plus plugin. By default, all modules are active, but if you want to use any specific, then you can easily disable others by unchecking the checkbox adjacent to the module name.
  4. Once done, save changes, and you’re ready to use the Divi Plus modules.

Enable or Disable a Specific Divi Plus Module.

Divi Plus gives you control to enable or disable a specific module. If disabled, that module won’t show in the list of modules in Divi Builder.
In order to enable or disable a module, go to Settings >> Divi Plus and check/uncheck your desired module.

Adding a Divi Plus Module on a Page

Once Divi Plus is activated, it adds a number of modules to the Divi builder. To insert a module, use the following steps.

Adding a divi plus module

  1. Create/Edit a Page/Post that uses Divi builder.
  2. Create/Edit row (Standard row, not full-width).
  3. Create/Edit column.
  4. Go to the Module option.
  5. And click on the module you want to insert.

How to Import Divi Plus Homepage Layouts

The plugin’s demo page showcases homepage layouts that are free of cost and made using the modules of the Divi Plus plugin. You can download those layouts directly visiting the demo and clicking the download button at the bottom of the layout. Follow the below steps to successfully import them on your website.

  1. Upon a successful download, you’d receive a zip file.
  2. Extract it to retrieve the layout’s json file.
  3. Then log in to your Divi theme website.
  4. Make sure you’ve installed the plugin Divi Plus and activated its modules. If yes, then create a page or edit an existing one.
  5. Deploy the Divi Builder, once the builder gets loaded, click the portability icon.
  6. Then choose Import, click No File Selected, and select the json file you’ve extracted earlier.
  7. Then, click Import Divi Builder Layout.
  8. And that’s it, your premade Divi Plus Homepage layout has been imported.

Divi Plus Breadcrumbs Module

  1. Insert the DP Breadcrumb module on your page.
  2. Go to the Content tab and select layout 1 or layout 2.

Here is a blog post that covers the setup process of the Divi Plus Breadcrumb module with example.

Before After Slider Module

  1. Add DP Before After Slider module to a page.
  2. Go to Content tab.
  3. On the Slider Content section, click Before and upload the image for before section. If you want to display text label, enter the text in the label field.
  4. Click on After Section and upload the image for after section. If you want to display text label, enter the text in label field.
  5. This will add the before after slider to your Divi theme with default values. In order to customize, go to Design tab of the module.
  6. Under Slider Styling section of the Design tab, select Horizontal or Vertical orientation.
  7. Handle offset will let you define the position of the slide. By default it is 0.5 which is at the center of the image.
  8. Mouse on Hover setting will let you run slider without tapping or dragging. Just move the mouse to see the slide.
  9. Move on click will enable a click action where the slider will move when clicked at a certain spot on the image.
  10. Handle Color will let you manage the color setting of the handle (separator). Divi before after slider setting panel
  11. On hover overlay setting allows adding an overlay of text or gradient along with option to control opacity of the color and gradient.
  12. Configure other settings as required.

Here’s the blog post that covers the setup and working process of the Divi Plus Before After Slider module.

Fancy Heading Module

  1. Add DP Fancy Heading to page.
  2. On the content tab under Heading Content section, enter the heading which is divided into three parts Pre Heading, Heading and Post Heading.
  3. Go to Design tab and open Text Setting.
  4. Define parameters for Pre, Main and Post in the Text Settings section.
  5. Define background for Pre, Main and Post. It can be color, gradient or image for each section of the heading. Divi plus fancy heading setting panel
  6. Define other settings as required.

Here is a blog post that covers the setup process of the Divi Plus Fancy Heading module.

Fancy Text Module

  1. Add DP Fancy Text module to a page.
  2. On the Content tab, go to the Fancy Text Content section.
  3. Under Text Style selector, choose Gradient for gradient text or Background Clipping for clip text effect.
  4. Enter the text in the Fancy Text input field.
  5. Go to the Design tab and set the gradient color, type and other settings.
  6. If the Text Style is set to Background Clipping, the Design tab will show image field under the Fancy Text Styling section.Divi fancy text module setting panel
  7. Set the image and define the properties for image.

Here is a blog post that covers the setup process, and working of the Divi Plus Fancy Text module.

Separator Module

  1. Add DP Separator module to a page.
  2. Go to Content Tab and then on the Separator Content.
  3. Select Separator Type as Line or Shadow. If line is selected, then it will show more options under content to customize line. It let you use image, text, icons and place separator around it.
  4. To give the line style, go to Select Line Style section and select a style.
  5. Use With section allows adding text (images as well) or icon to the separator.
  6. Go to Design tab and then Separator Styling section.
  7. Set thickness, color, gradient of the separator if required.
  8. Go to Text Styling and set the formatting of text and alignment. By default text is aligned to the left.

Divi plus separator setting panel

Here is a blog post that covers the setup process, and working of the Divi Plus Separator module.

Image Hotspot Module

  1. Insert the DP Hotspot module on a page.
  2. Add Image: On the Content tab, add image by using the upload image setting located under Hotspot Content section.
  3. Tooltip: Go to the Design tab and under the Hotspot section, select the option when to display the tooltip (Hover, Click).
  4. Pulse Animation: The setting is available under the Design tab. Go to the Global Marker Styling and enable the toggle that says Use Pulse Animation.
  5. Marker Shape: You could specify a shape to the hotspot icon. To enable it, look for the setting located under the Design Tab, Global Marker Styling and then marker Shape. Select Square or Circle and customize the color and other design settings. Default setting for Marker shape is none.

Adding and configuring Hotspot markers

To add hotspot markers on the image, click on Add New Item on the Content tab. There can be multiple hotspot markers added. Click the settings icon to customize the hotspot marker.

Once you click on the hotspot marker settings icon, it will open up the setting for individual markers.

  1. On the Content tab, select the  type of marker. Options include Icon, Text and Image.
  2. If Icon is selected, the icon panel will open up. Pick the icon you want to use as a marker. Specify the text in the next field labeled as Tooltip Content.
  3. If Text is selected, the input field for the marker text will appear. Enter the marker text. Specify the text in the next field labeled as Tooltip Content.
  4. If Image is selected as Marker Content, the image upload box will open up. Upload the image that you want to use as a hotspot marker. Specify the text in the next field labeled as Tooltip Content.

Marker Placement and styling: Go to the design tab of the marker. Specify the position from top and left in percentage relative to the image. This will define where the hotspot marker is placed.

Adjust the formatting using the available settings for the various elements of the marker.

Text Animator

  1. Insert DP Text Animator Module on a page.
  2. On the Content tab, go to the Animator Content section.
  3. Specify the Prefix text, Animated Text, and Postfix Text. The multiple words that animate are added in the Animated Text field separated by |.
  4. Select the heading tag (h1-h6) or paragraph tag for the content.
  5. Animation type: Go to the design tab and navigate to the Select Layout section.
  6. From the select layout option, pick the layout you want.
  7. Stack the pre, animated, and post text. To enable this feature, navigate to the Design tab, then go to Select Layout and enable Display Text in Stack toggle.
  8. Animation Duration: To enable this feature, navigate to the Design tab, then go to Select Layout and specify the duration and delay.

Button

  1. Insert DP Button Module on a page.
  2. On the Content tab, add a button by clicking the “Add New Button” icon.
  3. Inside the Button setting, choose button type, either “Classic” or “Conversion.” If you choose conversion, then enter text in both input fields.
  4. In the Link setting, add the link of the page that you want to open when the button gets clicked.
  5. To add background hover effects on the button, go to Background setting, and choose available Background Hover Fill Style.
  6. You can also add color, gradient, and image to the background of the button.
  7. To adjust the placement of the button, go to the design tab, and inside the alignment setting, you can adjust the positioning of the button.
  8. Similarly, you can customize the Secondary Text, Primary Text, Use Icon on the button, apply spacing, border, and more using the available settings in the design tab.

Add more buttons and how to customize them.The above instructions are for customizing the individual button. However, to add multiple buttons, and customize them together, follow the below instructions.

  1. Once you’re done creating a button, click the return icon above the content tab of the individual button. It will take you to the parent content setting of the module.
  2. Here, you’d find the button you’ve already created, and an option to add more buttons below it.
  3. If you’ve created multiple buttons and want to place them in a single line. Then, you can toggle the “Inline Buttons” of the Configuration setting as, “YES.” This would place all the buttons in a single line together.
  4. The parent design tab of this module allows you to customize the Alignment, Button Text, Border, Box Shadow, and other features on every button from a single setting.
  5. However, customization made at the parent design tab is only applicable on a button or group of buttons if they are not already customized in the individual settings.

Timeline

  1. Insert DP Timeline module a page.
  2. Then click the “Add New Timeline Item” on the module’s content tab to insert the timeline item.
  3. Similarly, you can add multiple timeline items according to your needs.
  4. To customize the timeline item, click the setting icon available on the New Item.
  5. Here you get the content, design, and advanced settings for individual timeline items.
  6. Inside the Timeline Content setting, input text for Timeline Title and Content.
  7. If you want to display time on the timeline, go to the Timeline Time setting and toggle the “Display Time,” as “YES.”
  8. Here you get the option to either enter custom time manually or by choosing the date from the calendar. If you want to choose a date, then click the Custom Time from the Time Input Method, and choose Datepicker from the dropdown list.
  9. As soon as you select the Datepicker option, it will open a calendar to help you choose the date. And another option, “Time Format,” to help you select the format you want to display.
  10. If you want to use an image or icon, rather than default circular shape of the timeline element. Go to the Timeline Icon/Image setting, and click “Add Image,” to use a picture. Else toggle “Use Icon,” as “YES,” to go with the icon instead.

To customize all timeline items together and select a different layout

  1. Click the Return icon above the content tab.
  2. Layout: To choose a different layout, go to the parent design tab of the module. Inside the Select Layout option of the Timeline Layout setting, choose any from available layouts.
  3. In this same setting, you get the option “Select Option” that allows you to choose a different placement style for the timeline and its content. Choose any from the available options.
  4. To customize the timeline icon or image, go to Timeline Icon/Image Styling. And apply appropriate customization according to requirements.
  5. To customize the vertical line or timeline stem, go to Timeline Stem Styling and apply appropriate customization according to requirements.
  6. Inside the Timeline Item Styling setting, you get the option to customize the background of the timeline time by adding color, gradient, image, and adjusting padding.
  7. To customize the timeline title, go to the Timeline Heading setting in the design tab, and apply customizations.
  8. Date setting available in the Design tab of the module allows you to customize the appearance of the timeline date.
  9. Timeline text setting further allows you to customize the content available in the timeline items.

How To Schema

Follow the below instructions to use the How To Schema module effectively.

  1. Insert DP How To Schema module on a page.
  2. On the content tab, input the title and content of the How To Schema inside the content setting. Insert image and give primary Step Title to your instructions and process to accomplish a particular goal.
  3. Tools & Supplies: This allows you to display tools & supplies that would come in use while following the steps. Check the toggle “Show Tools,” as “YES,” and input tools title and add tools required. Do the same for the supplies in the supplies tab.
  4. Time & Cost: This allows you to display how much time the process takes to complete. And how much expense there’s required. Follow the same process as Tools and Supplies to add Time & Cost.

Add steps

  1. To insert a new step, click the “Add New Step” in the content tab of the module available at the top in the setting.
  2. Then input title, content inside the Step Content setting.
  3. Add an image too, inside the same Step Content setting, to support the HowTo steps.
  4. To customize the step, go to the design tab.
  5. Step Heading: Here, you can customize the heading level and font appearance of the step title.
  6. Step Description: This would allow you to customize the appearance of the text available as the content of the steps.
  7. To add multiple steps, and customize other elements of How To Schema, click the return icon above the content tab.
  8. Once you come out of the individual setting of the setting, you’ll find steps you’ve created and an option to add more steps.

Customize the elements of How To Schema

Follow the below steps to customize other elements on the How To Schema in the design tab of the module.

  1. Heading: To customize the heading, go to the design tab and inside How to Heading setting, run customization that suits best. Select heading as H1 to H6, apply different fonts and other similar settings.
  2. Description: To customize the primary description of the How To Schema, you have to perform customization options inside the How to Description setting available in the design tab. Change font, add color, shadow, border, and more.
  3. Step Text: This particular setting available in the Design tab of the module allows you to customize the Primary Step title, the title of the secondary steps, and content available in them. Respective settings available under Heading, Sub Heading, and Content tab of this setting panel. (Only applicable when steps are not customized at the individual level).
  4. Time Text: This allows you to customize the time heading text and content text available inside the time section of the How To Schema.
  5. Cost Text: This allows you to customize the cost heading text and content text available inside the cost section of the How To Schema.
  6. Tools & Supplies Text: This allows you to customize the heading level of Tools & Supplies Text and content text available inside the Tools & Supplies section of the How To Schema.

Content Toggle

  1. Insert the DP Content Toggle module on a page.
  2. On the Content tab of the module, you get Content One setting. It allows you to input the Toggle Title, and choose Content Type. Under the content type option, you can select text and layout. If you select the layout, then you get the option to choose the layout you’ve saved in your Divi library.
  3. Similarly, the Content Two setting allows the function for the 2nd item of the toggle.
  4. Background settings available in the content tab of the module give functionality to customize the background of the content item with color, gradient, image, and video.
  5. To change the alignment and appearance of the content toggle switch, go to the design tab and inside the Toggle Switch Styling setting, choose any placement option available, and apply appearance customization according to your needs.
  6. To customize the toggle title, go to the design tab and inside the Toggle Title Text Setting, apply text customization. Here you can change the heading level of the title. Font style, font color, shadow, and more.
  7. To customize the text appearance of the content toggle items, go to Content One and Two Text settings available inside the design tab. And run customization upon requirements.

Business Hours

  1. Insert DP Business Hours module on a page.
  2. On the Content Tab, you get the option to customize the background and “Add New Business Hour.”
  3. To add business hours, click the available option in the content tab.
  4. Once you add a new business hour, it opens up new options.
  5. Text: Gives you the option to add Day and Time.
  6. Background: To customize individual business hour background.
  7. To customize the business hour at the individual level, go to the design tab, and perform customization accordingly.
  8. Day: Allows you to customize day text.
  9. Time: Allows you to customize Time text.
  10. To add multiple business hours and customize them together, click the return icon above the content tab inside individual settings.
  11. Once you come out to the module’s parent settings, you get the business hour you’ve just created and an option to add another business hour.
  12. Go to the design tab of the module and perform customization to apply changes on every business hour you’ve created. (Only applicable when business hours are not customized at the individual level)

Logo Slider

  1. Insert DP Logo Slider module on a page.
  2. On the Content Tab, under the Slider Content setting, you get the option to select how many logos you want to display per view. It allows up to 10 logos, choose any according to the requirement.
  3. To insert logos on the slider, click “Add New Logo.”
  4. Upon adding the new logo, you can insert the Alt text and add an image for the logo.
  5. To customize the appearance of the logo, go to the design tab, and perform customization according to the requirements.
  6. To add another logo and customize the logo slider further, click the return icon above the content tab.
  7. Once you come out to the module’s parent settings, you find the logo you’ve just created and an option to add other logos.
  8. To customize the logo slider, go to the design tab.
  9. Slider Arrow: It allows you to customize the arrow style of the slider. You can choose whether to display arrows, show arrows on hover or not, customize the size, and much more.
  10. Slider Pagination: This gives the option to customize the pagination style of the logo slider. Here you can choose whether or not to display pagination, active, and inactive color.
  11. Slide Styling: This allows you to choose slider alignment from the available options. Change the weight and height of the slider.
  12. Animation: Here, you’d be able to apply a loop on the logo slider, autoplay; can set autoplay delay, transition duration, and pause logo slider on hover.

Form Styler

  1. Insert DP Form Styler module on a page.
  2. Then on the Content Tab, select form type from available options of the Form settings.
  3. Here, you can select either Contact Form 7 or Caldera Form, which you’ve used earlier to create your contact forms.
  4. After choosing the form type, you get the option to select your contact form. Choose the contact form you want to add to the page.
  5. Once selecting the contact form, switch to design tab for appearance customization.
  6. Alignment: Here you can make changes in the placement of the form text. Apply text shadow and other text shadow customizations.
  7. Labels: It gives you the option to apply customizations on input field labels.
  8. Input Fields: Here you can make changes in the appearance of input fields’ elements. Like text, background, placeholder and padding. It allows you to apply different colors for text, input field, and placeholder when entering the text.
  9. Radio Fields: Under this setting, you can apply custom styling on the radio buttons and fields. It allows you to make changes in the size of the radio button, apply background color when selected or not. Use different font styles on the radio fields’ text, and more.
  10. Checkbox Fields: This particular setting provides you with the option to make changes in the appearance of checkboxes and their fields.
  11. Upload Fields: It allows you to make changes in background of upload fields, customize their text style, and apply padding tweaks.
  12. Button Fields: Using this setting, you can make changes in the button background and text style.
  13. Submit Button: Here, you can make your submit button’s background and text customized. Like different text colors on hover, text with shadow and more.
  14. Reset Button: It allows you to customize your contact form’s reset button with background and other text customization.

Modal

  1. Insert DP Modal module on a page.
  2. On the Content Tab, under configuration setting, you get the option to select modal trigger type. Select any from available options that are Element and On Page Load.
  3. If you select On Page Load, you get the option to apply trigger delay, which would set the time for modal when to appear on the page.
  4. If you select Element, then you get further options to select the type of the element. Here you get Button, Image, Icon, Text and Element CSS ID as types for the element. Select any according to your needs.
  5. Once you select the modal trigger, you can further customize its content.
  6. Modal Header: Here you can select whether you want to display header, title, and close button icon on the modal.
  7. Modal Body: It allows you to choose what type of content you want to display in the modal body. It gives you the option to select Text, Image, Video and Divi layouts saved in the library as modal content.
  8. Modal Footer: Here you can select whether or not to display footer on the modal. Plus, under this setting, you can also input text for the close button icon.
  9. Background: This content tab setting allows you to change the background of the Modal, Trigger Element, Modal Header, Body, and Footer. It provides you with the option to customize the background with Color, Gradient, and an Image.
  10. Once you’re done customizing the modal content, move to the design tab for further modal appearance customization.
  11. Alignment: It gives you the option to place your modal trigger at left, right, and center of the page.
  12. Trigger Button: This particular setting provides you with the option to apply custom styling on the modal trigger button.
  13. Trigger Text: Here you can apply customization to the appearance of the trigger text.
  14. Trigger Icon: Using this design setting of the modal module, you can customize size and color of the trigger button.
  15. Modal Title & Body Text: The Module Title Text setting allows you to customize heading level of modal title, font style, color, and other text customizations. Modal Body Text setting provides you with the options to customize body text appearance.
  16. Modal Close Icon & Button: The Modal Close Icon setting allows you to change the size of the close icon and its color. Whereas, Modal Close Button setting allows you to apply custom styling on the close button. Using this setting you can change the font size & color of the close button text. You can also change the background of the close button, and apply other appearance customization.
  17. Box Shadow: Using Box Shadow setting you can apply shadow on the modal, trigger element, header and footer of the modal.
  18. Border: Under this, you can apply border customization on trigger element and modal.
  19. Modal Sizing & Alignment: This particular setting of the modal allows you to place your modal on different locations on the page. Available placement options are Top: Left, Right, Center; Bottom: Left, Right, Center, and Center. Along with these, using this setting, you can also make changes in the modal Width and Height.
  20. Spacing: This setting provides you with the option to apply spacing customization on the Modal, Modal header, Modal Body, and Modal Footer.
  21. Animation: It allows you to apply animation style on modal with all the other animation customizations such as Animation Duration, Starting Opacity, and Speed.

Flip Box

  1. Insert DP Flip Box module on a page.
  2. On the Content tab, go to Flip Box Layout setting and select either Flip or 3D Cube layout.
  3. Upon selecting the Flip layout, you get Flip directions: Top, Bottom, Left, Right, Diagonal Left-Right, and Diagonal Inverted Left-Right. Choose according to your needs.
  4. Upon selecting the 3D Cube layout, you get Entrance directions: Top, Bottom, Left, and Right.
  5. Keep “3D Depth Effect” as “Yes” if you want 3D effects on the flip box.
  6. Check “Shake on Flip” as “Yes” if you want to apply the shake effect on the flip box.
  7. Move slider/input value in the Flip Speed(in ms) field to control flip box flip speed.
  8. Flip Box Content: Here, you can input the Title and Content of the flip box for both front and backside.
  9. Flip Box Elements: Here, you can choose what you want to display on the front and backside of the flip box from the Image and Icon option.
  10. Flip Box Background: Here, you can customize the background of the front and backside of the flip box with color, gradient, and image.
  11. To customize the appearance of the flip box, go to the Design tab.
  12. Front Image/Icon Style: This particular design setting of the flip box module allows you to place the image or icon of the flip box’s front side at Top, Left, and Right. Plus, it also includes other image or icon customizations. Like, Image Rounded Corners, Border styles, Width, and Color.
  13. Back Image/Icon Style: This particular design setting of the flip box module allows you to place the image or icon of the flip box’s backside at Top, Left, and Right. Plus, it also includes other image or icon customizations. Like, Image Rounded Corners, Border styles, Width, and color.
  14. Front Text Style: Here, you can select the alignment of the flip box’s front side text. Plus, it also provides you with the option to customize Title and Content text appearance.
  15. Back Text Style: Here, you can select the alignment of the flip box’s backside text. Plus, it also provides you with the option to customize Title and Content text appearance.
  16. Back Button Style: This allows you to select the alignment of the back button that is Left, Right, and Center.
  17. Front Box Style: It will enable you to adjust the alignment of Front Content, Top, Center, and Bottom.
  18. Back Box Style: It allows you to adjust the alignment of Back Content that is Top, Center, and Bottom.
  19. Sizing: This design setting of the flip box module enables you to adjust Width, and Alignment of Front Image, Back Image, and Content.
  20. Animation: Here, you can add animation to the flip box icon and image. Available animations are Top To Bottom, Left To Right, Right To Left, and Bottom To Top.

    Blog Slider

    1. Insert the DP Blog Slider module on a page. 
    2. On the Content tab, you get the options to customize blog posts content and its appearance.
    3. Content: Here, you can select the layout of the blog slider. The available layouts are Layout 1 and 2. Moreover, you can also input the “Number of Posts” you want to display. And couple more options like “Post Offset Number,” Order posts “Descending” and “Ascending” by “Date,” “Modified Date,” “Title,” “Slug,” “ID,” “Random,” “Relevance,” and “None.”
    4. Content: The same content settings in the Content tab also allows you to choose categories, customize date format, show excerpt with words limit or full content.
    5. Element: This particular setting in the Content tab will enable you to decide whether you want to display Sticky Posts, Featured Image, Author, Date, Categories, Comment Count, and Read More link.
    6. Slider Settings: It allows you to choose how many posts you want to display per slider.
    7. Display Settings: It provides you with an option that enables you to equalize posts height.
    Blog Slider Design Settings
    1. Once you’ve made all the content customization for the blog slider, move to the Design tab to make further blog slider appearance tweaks.
    2. Slider Arrow: This particular design setting of the blog slider allows you to display and customize the slider arrow. Here, you can change the slider arrow size and color. Choose the shape for the slider arrow and apply the Show Arrow On Hover effect.
    3. Show Pagination: Here, you can choose whether or not to display pagination on a blog slider.
    4. Text: It gives you control to change text alignment and apply text-shadow. This would include alignment change of Post Title, Meta Elements, Post Excerpt, and Read More Button.
    5. Post Content: Here, you can apply Post Content Background with adjustment in Content Margin and Padding.
    6. Category: This provides you with the options to change Category Background and Color.
    7. Title Text: Complete text customizations for Post Title Text.
    8. Body Text: Complete text customizations for Post Body Text or Excerpt.
    9. Meta Text: Complete text customizations for Post Meta Elements’ Text like Category, Date, Author name, and more.
    10. Read More Button: You can use this particular setting to apply custom styling on the Read More Button and change their alignments.
    11. Animation: Using this Design tab setting, you can enable slider Loop, Autoplay, slider Pause On Hover, and many entrance effects.

    Price List

    1. Insert DP Price List Module on a page.
    2. On the Content tab, you get the option to “Add New Item.” This would allow you to create price list items.
    3. Upon clicking the “Add New Item,” a new settings window appears with Content, Design, and Advanced tab for Individual Price List Items. 
    Individual Price List Items’ Content Customizations
    1. Content: Here, you can Input Name, Price, Currency Symbol, Thumbnail, Alt Text, and Description of the Price List Items.

     

    Individual Price List Items’ Design Customizations

    1. Once you’ve provided required details for the Price List Items, then move to the Design tab to customize their appearance.
    2. Alignment: It allows you to change text alignment.
    3. Name: The complete text customization options for Price List Items’ Name.
    4. Price: Complete text customization options for Price List Items’ Price.
    5. Currency: Complete text customization options for Price List Items’ Currency.
    6. Description: Complete text customization options for Price List Items’ Description.
    7. Border: It allows you to add rounded corners and borders on items’ thumbnail.
    8. Box Shadow: It will enable you to add Box Shadow on Item Thumbnail and List.

     

    Global Price List Content Customizations

    1. Once you’ve customized the individual price list items’ content and design, click the arrow button at the top left corner to use the module’s parent settings.
    2. Configuration: It allows you to select Price List layout from the available Layout 1 & 2.

     

    Global Price List Design Customizations

    These Design controls will allow you to customize every Price List items’ design together.

    1. Alignment: It allows you to change the text alignment of each Price List Item.
    2. Name: Customize Name Text of every Price List Item together.
    3. Price: Customize Price Text of every Price List Item together.
    4. Currency: Customize Currency Text of every Price List Item together.
    5. Description: Customize Description Text of every Price List Item together.

      FAQPage Schema

      Follow the below instructions to use the FAQPage Schema module effectively.

      1. Insert DP FAQPage Schema module on a page.
      2. On the Content tab, inside the Text settings, you get the option to input the FAQ Schema Title.

      Add FAQs

      1. How to insert a new FAQ: In the module’s Content tab, click the Add New FAQ.
      2. How to input/customize Question & Answer text: Go the Content settings of the specific FAQ’s Content tab, and then input the appropriate text for the Question and Answers field.
      3. How to customize individual FAQ’s background: Go to the Background settings of the FAQ’s Content tab, then choose either color, gradient, or image according to your requirement.
      4. To customize individual FAQ’s appearance further, go to its Design tab.
      5. Go to Question settings to customize text font, heading level, and more of the FAQ’s Question Text.
      6. To customize the answer text, go to Answer Text settings and make changes to the text, including links, numbered lists, bullet lists, and quotes.
      7. To do padding customization for the answer and question field, go to Question Answer Spacing.
      8. To add multiple faqs and customize other FAQPage Schema elements, click the return icon above the content tab.
      9. Once you come out of the individual setting of the setting, you’ll find faqs you’ve created and an option to add more faqs.

      Customize the elements of FAQPage Schema

      Follow the below steps to customize other elements on the FAQPage Schema in the module’s design tab.

      1. Layout Selection: To change the layout of the FAQPage Schema, go to the Design tab >> Layout >> select one from the available layouts >> Accordion/Grid.
      2. FAQPage Schema in Masonry Grid Layout: Go to the Design tab >> Layout >> Select Grid layout >> and check Use Masonry as YES.
      3. Background Customization for Question and Answer field: In the Design tab, go to FAQ Styling >> apply color according to the requirements.
      4. FAQPage Schema’s Main Heading Customization: To Customize the heading level, font, alignment, and other elements of the main FAQPage Schema heading, go to FAQ Heading >> apply tweaks as you required.
      5. Question Text Customizations: To customize the question text’s appearance, go to Question Text >> and apply customization for both the Opened & Closed State of the FAQ. (For all the question text available in the FAQPage Schema).
      6. Answer Text Customizations: Go to the Answer Text settings in the Design tab, and apply answer text customizations for links, numbered list, bullet list, and quote. (For all the answer text available in the FAQPage Schema).
      7. Padding customization for the Answer & Question field: To customize the padding for the answer and question field, go to Question Answer Spacing settings, and input padding values according to your requirement. (For all the answer & question text available in the FAQPage Schema).

      Ajax Search

      Follow the below instructions to use the Ajax Search module effectively.

      1. Insert DP Ajax Search module on a page.
      2. How to input Custom Placeholder Text for Ajax Search: On the Content tab >> Configuration >> input custom placeholder text inside >> Search Field Placeholder.
      3. How to choose Search Results Number: On the Content tab >> Configuration >> input values inside >> Search Result Number.
      4. How to select for what Ajax Search should be performed: Go to Search Area settings >> Post Types >> select any available options >> Posts/Pages/Projects/All of the above.
      5. How to select where to perform ‘Ajax Search in’ for those Post Types: Go to Search Area settings >> Search in >> check any or combination of available options >> Title/Content/Excerpt.
      6. Ajax Search Display Options: To select what to showcase in the Ajax Search result, go to Display settings of the Content tab >> and choose any available option or combination of those >> Title/Excerpt/Featured Image.
      7. How to display Ajax Search Icon: Go to Display >> and check Show Search Icon as YES.
      8. Ajax Search Linking: To open displayed results in a tab, go to Content tab’s Link settings >> Result Item Link Target >> and choose any from the available options >> In The Same Window/In The New Tab.
      9. Ajax Search Background Customizations: To apply background customization for Search Result Box and Search Results’ Item, go to Background settings of the Content tab >> and apply tweaks according to the requirements.

      Design Customization of the Ajax Search Module

      Once you’ve customized the Ajax Search content, move to the Design tab for further appearance tweaks, follow the below steps to know how you can do it.

      1. Search Field’s Background Color Customizations: To customize the search field’s background color for both the focus and non-focus state, go to the Design tab >> Search Field >> and apply color according to the requirements.
      2. Search Field’s Text Color Customizations: To customize the search field’s text color for both the focus and non-focus state, go to the Design tab >> Search Field >> and apply color according to the requirements.
      3. Search Field’s Padding and other Customizations: To customize the search field’s padding, and apply other tweaks, go to the Design tab >> Search Field >> and use padding on the search field, font styles, and rounded corners.
      4. Ajax Search Icon Customizations: To apply custom styling for the search icon, go to the Design tab >> Search Icon >> and perform tweaks for Ajax Search Icon such as Size & Color.
      5. Ajax Search Loader Customizations: To apply custom styling for the search loader, go to the Design tab >> Loader >> and perform for the Ajax Search Loader such as Size & Color.
      6. Text Customizations for the Title & Excerpt: Go to the Design tab >> Search Result Item Text >> and apply complete text customization for the Title and Excerpt of the search results according to the requirement.
      7. How to add padding to the Search Result Box: Go to the Spacing settings >> Search Result Box Padding >> and input values as required.

      Facebook Comments

      Enable Module & Set Global Facebook APP ID

      Before you start using the Facebook Comments module, first, make sure you’ve enabled the module and inserted the Facebook APP ID in the Divi Plus module’s panel. If you haven’t, follow the steps to know how you can do it.

      1. On your WordPress dashboard, hover to the Settings >> and click Divi Plus to access its further settings.
      2. Inside the Divi Plus module panel >> General >> enable Facebook Comments module.
      3. Then, go to the Integration tab, and insert your Facebook accounts’ APP ID. You can generate your Facebook APP ID by visiting the link.
      4. After interesting the Facebook APP ID, click Save Changes.

      Use

      1. Insert DP Facebook Comments module on the page.
      2. Upon insertion of the module, on the Content tab of the module, you get Configuration, Background, and Admin Label settings.
      3. To insert Facebook APP ID other than Global or used in the Integration tab: Go to Configuration of module’s Content tab >> insert the ID in the Facebook APP ID field.
      4. To control how many comments should display in the comment box: Go to the Configuration settings >> and in the Number of Comments field >> enter the required value.
      5. Change comments order: To change the comments order, go to the Configuration settings >> in the Order By field >> choose any from the available orders that Top, Newest, Oldest.
      6. Enable Lazy Loading: Go to the Configuration settings >> then check Enable Lazy Loading as YES.

      Facebook Like

      Enable Module & Set Global Facebook APP ID

      Follow the same steps as in the Facebook Comments module to enable the Facebook Like module and setting the Facebook APP ID.

      Use

      1. Insert DP Facebook Like module on the page.
      2. Upon insertion of the module, on the Content tab of the module, you get Configuration, Background, and Admin Label settings.
      3. To insert Facebook APP ID other than Global or used in the Integration tab: Go to Configuration of module’s Content tab >> insert the ID in the Facebook APP ID field.
      4. Share Button URL: To insert URL which would display on users’ Facebook account when they share the liked page, go to the Configuration settings >> then in the Page URL, insert the URL where you’re using the module. (Only required if the Share Button option is enabled in the Facebook Like module, see Step 8.)
      5. To change Facebook Like button: Go to the Configuration settings >> then in the Action Type >> choose any from Like & Recommended button options.
      6. Change Button Layout: Go to the Display settings in the Content tab >> Layout >> select any layout from available layouts that are Standard, Button, Button Count, and Box.
      7. Change Like/Recommended Button Size: Go to the Display settings >> and from Button Size >> select button size either Small or Large.
      8. Display Share: If you want to display the Share button with your Facebook Like/Recommended button, then go to the Display settings >> and check the Display Share Button as YES.
      9. Enable Lazy Loading: Go to the Configuration settings >> then check Enable Lazy Loading as YES.
      10. To change the Facebook Like/Recommended Button Alignment: Go to the Design tab >> Then, in the Alignment settings >> select the alignment option according to the requirement.

      Facebook Page

      Enable Module & Set Global Facebook APP ID

      Follow the same steps as in the Facebook Comments module to enable the Facebook Page module and setting the Facebook APP ID.

      Use

      1. Insert DP Facebook Page module on the page.
      2. Upon insertion of the module, on the Content tab of the module, you get Configuration, Background, and Admin Label settings.
      3. To insert Facebook APP ID other than Global or used in the Integration tab: Go to Configuration of module’s Content tab >> insert the ID in the Facebook APP ID field.
      4. Add the Facebook page you want to display: To display your Facebook page on the website, go to Configuration settings >> then in the Facebook Page URL field >> insert the URL of the Facebook page, you want to display on your website.
      5. To change Facebook page Height dimension: Go to the Configuration settings >> Frame Height >> and do tweaks as needed.
      6. To change Facebook page Width Dimension: Go to the Configuration settings >> Frame Width >> and do tweaks as needed.
      7. Show Events: To display page events in the Facebook Page module, go to the Display settings >> then, inside the Facebook Tabs field, >> select Events.
      8. Allow Users to Send Messages: Go to the Display settings >> then, inside the Facebook Tabs field, >> select Messages.
      9. Disable Followers Profile Picture: Go to Display settings >> check Show Face Pile as NO.
      10. Hide Cover Picture: Go to Display settings >> and check Hide Cover Picture as YES.
      11. Display Like Button Under Page Title & Next to the Page Like’s Count: If you want to display Facebook Page module’s header small with Like Page button under the page title, then go to the Display settings >> Display Small Header >> YES.
      12. Hide CTA and Display Share Button: Go to the Display settings >> Hide CTA >> YES.
      13. Enable Lazy Loading: Go to the Configuration settings >> then check Enable Lazy Loading as YES.
      14. To change the Facebook Page’s alignment: Go to the Design tab >> Alignment settings >> select the alignment option according to the requirement.

      Facebook Share

      Enable Module & Set Global Facebook APP ID

      Follow the same steps as in the Facebook Comments module to enable the Facebook Share module and setting the Facebook APP ID.

      Use

      1. Insert DP Facebook Share module on the page.
      2. Upon insertion of the module, on the Content tab of the module, you get Configuration, Background, and Admin Label settings.
      3. To insert Facebook APP ID other than Global or used in the Integration tab: Go to Configuration of module’s Content tab >> insert the ID in the Facebook APP ID field.
      4. Share Button URL: To insert URL which would display on users’ Facebook account when they share the liked page, go to the Configuration settings >> then in the Page URL, insert the URL where you’re using the module.
      5. Change Share Button Layout: Go to the Display settings in the Content tab >> Layout >> select any layout from available layouts that are Button, Button Count, and Box Count.
      6. Change Share Button Size: Go to the Display settings >> and from Button Size >> select button size either Small or Large.
      7. Enable Lazy Loading: Go to the Configuration settings >> then check Enable Lazy Loading as YES.
      8. To change the Facebook Share Button Alignment: Go to the Design tab >> Alignment settings >> select the alignment option according to the requirement.

      Facebook Embedded Comment

      Enable Module & Set Global Facebook APP ID

      Follow the same steps mentioned for the Facebook Comments module.

      Use

      1. Insert DP Facebook Embedded Comment module on a page.
      2. Use Custom Facebook APP ID: Go to the Content tab >> Configuration settings >> Facebook APP ID >> insert the value inside the field.
      3. How to Show Comment: Go to Configuration settings >> Comment URL >> and insert the URL.
      4. Display Parent Comment: Go to Configuration settings >> Include Parent Comment >> check as YES.
      5. Adjust Frame Width: Go to the Configuration settings >> Frame Width >> Enter the value or move the slider.
      6. Enable Lazy Loading: Go to Configuration settings >> Enable lazy loading >> check YES.
      7. Change Alignment: Go to the Design tab >> Alignment >> choose a position as required.

      Facebook Embedded Post

      Enable Module & Set Global Facebook APP ID

      Follow the same steps mentioned for the Facebook Comments module.

      Use

      1. Insert DP Facebook Embedded Post module on a page.
      2. Use Custom Facebook APP ID: Go to the Content tab >> Configuration settings >> Facebook APP ID >> insert the value.
      3. How to display Facebook Post: Go to Configuration settings >> URL >> and insert the URL.
      4. Adjust Frame Width: Go to the Configuration settings >> Frame Width >> Enter the value or move the slider.
      5. Enable Lazy Loading: Go to Configuration settings >> Enable lazy loading >> check YES.
      6. How to display Text with Photo Post: Go to Display settings >> Display Text >> check as YES.
      7. Change Alignment: Go to the Design tab >> Alignment >> choose a position as required.

      Facebook Embedded Video

      Enable Module & Set Global Facebook APP ID

      Follow the same steps mentioned for the Facebook Comments module.

      Use

      1. Insert DP Facebook Embedded Video module on a page.
      2. Use Custom Facebook APP ID: Go to the Content tab >> Configuration settings >> Facebook APP ID >> insert the value.
      3. How to display Facebook Video Post: Go to Configuration settings >> URL >> and insert the URL.
      4. Adjust Frame Width: Go to the Configuration settings >> Frame Width >> Enter the value or move the slider.
      5. Enable Lazy Loading: Go to Configuration settings >> Enable lazy loading >> check YES.
      6. How to set Video Autoplay: Go to Configuration settings >> Autoplay >> check as YES.
      7. How to set Video Play in Fullscreen: Go to Configuration settings >> Allow Fullscreen >> check as YES.
      8. How to display Text with the Video Post: Go to Display settings >> Display Text >> check as YES.
      9. How to display Caption with the Video Post: On the Content >> go to Display settings >> Display Caption >> check as YES.
      10. Change Alignment: Go to the Design tab >> Alignment >> choose a position as required.

      Twitter Embedded Tweet

      1. Insert DP Twitter Embedded Tweet module on a page.
      2. How to Show Tweet: Go to the Content tab >> Configuration >> Tweet ID >> insert the value.
      3. Display Content while Tweet Loads: Go to the Configuration >> Fallback Content >> enter the content.
      4. How to Turn on Do not track for Ads and Suggestions: Go to the Configuration >> Do not track >> check as ON.
      5. How to Hide Tweet Media: Go to the Content tab >> Display >> Cards >> check as OFF.
      6. Hide Parent Tweet: Go to the Display >> Conversation >> check as OFF.
      7. How to Change Tweet Theme: Go to the Display settings >> Theme >> choose Light or Dark.
      8. Adjust Tweet Width: Enter the value or move the slider of the Max Width field inside Display settings.
      9. Change Alignment: Go to the Design tab, then Alignment settings, and choose a position as required.

      Twitter Follow Button

      1. Insert DP Twitter Follow module on a page.
      2. How to Add Twitter Follow Button: Go to the Content >> Configuration >> Tweet User >> insert the value. (Not required if already added in the Divi Plus Integration tab.)
      3. How to Turn on Do not track for Ads and Suggestions: Go to the Configuration settings >> Do not track >> check as ON.
      4. Hide Twitter Username: Go to the Content tab >> Display >> Show Username >> check as NO.
      5. Hide Twitter Followers Count: Go to the Display >> Show Count >> check as NO.
      6. How to Change Twitter Follow Button Size: Go to the Display settings >> Size >> choose Large or Small.
      7. How to Change Twitter Follow Button Alignment: Go to the Design tab >> Alignment >> choose a position as required.

      Twitter Tweet Button

      1. Insert DP Twitter Share module on a page.
      2. How to Add Custom Share Text: Go to the Content tab >> Configuration >> Custom Share Text >> input the text.
      3. Insert Page URL to be used on the Tweet: Go the Configuration settings >> URL >> input the link.
      4. Insert Hashtags: Go the Configuration settings >> Hashtags >> input the tags.
      5. Insert Associate Twitter Username to be credited for Via tag: Go to the Configuration >> Via >> input Twitter username.
      6. How to mention related Twitter account in the tweet: Go the Configuration settings >> Related >> input Twitter usernames.
      7. How to turn on Do not track for Ads and Suggestions: Go to the Configuration settings >> Do not track >> check as ON.
      8. How to change Twitter Share button size: Go to the Display settings >> Size >> choose Large or Small.
      9. Change Twitter Share button alignment: Go to the Design tab >> Alignment >> choose a position as required.

      Twitter Timeline

      1. Insert DP Twitter Timeline module on a page.
      2. How to add Twitter Timeline: Go to the Content tab >> Configuration >> Twitter Username >> enter the value.
      3. How to limit Number of Tweets to Display: Go the Configuration settings >> Tweet Limit >> input the value or move the slider.
      4. Do not track for Ads and Suggestions: Go to the Configuration settings >> Do not track >> check as ON.
      5. Hide Replies: Go the Content tab >> Display >> Show Replies >> check as NO.
      6. How to change the Twitter Timeline theme: Go to the Display settings >> Theme >> choose Light or Dark.
      7. How to Hide Header, Footer, Borders, and Background: Go to the Display settings >> Chrome >> tick the checkboxes next to >> No Header, No Footer, No Borders, and No Background.
      8. Adjust Timeline Frame Width: Go to the Display settings >> Frame Width >> input the value or move the slider.
      9. Adjust Timeline Frame Height: Go to the Display settings >> Frame Height >> input the value or move the slider.
      10. Change Alignment: Go to the Design tab >> Alignment >> choose a position as required.

      Star Rating Module

      1. Insert DP Star Rating Module on a page.
      2. Add Star Rating Title: Go to the Content tab >> Configuration settings >> Title >> input the text.
      3. How to Input Actual Rating Number: Go to the Configuration settings >> Rating >> input the value.
      4. How to Input Rating Number Out Of: Go to the Configuration settings >> Rating Out Of >> input the value.
      5. Add Image to the Star Rating: Go to the Configuration settings >> Image >> add the image.
      6. How to Add Alternative Text to the Image: Go to the Configuration settings >> Image Alt Text >> insert the custom text.
      7. Add Description to the Star Rating: Go to the Configuration settings >> Description >> then input the text.
      8. How to Change Rating Position: Go to the Content tab >> Display settings >> Rating Position >> choose Below Title or After Title.
      9. How to Hide Rating Numbers: Go to the Display settings >> Show Rating Number >> check as NO.
      10. How to Change Star Rating Alignment: Go to the Design tab >> Alignment >> choose any position as required.
      11. Style Star Rating Title Text: Go to the Design tab >> Title >> apply text customizations.
      12. Style Description: Go to the Design tab >> Description >> apply customizations.
      13. Style Star Rating Numbers: Go to the Design tab >> Rating Number >> apply customizations as required.
      14. Style Stars: Go to the Design tab >> Stars >> apply customizations.

      Testimonial Grid Module

      Create new testimonials

      The Divi Plus plugin after installation creates a DP Testimonials menu in the WordPress Dashboard with the following options,

      1. All Testimonials
      2. Add New
      3. DP Testimonial Categories

      To add a testimonial grid on a webpage, you have to create testimonials first. The following steps can help you create one,

      1. Go to the DP Testimonials >> Add New.
      2. On the next window, It will open up a text editor similar to the post and page. Here, in the Add Title field input your testimonial title.
      3. After this, input your review in the content field area.
      4. Then, create a new category by tapping the Add New Testimonial Category below the Publish block.
      5. After this, go to the Testimonial Meta Fields under the content area. And input the details in all the fields as required.
      6. For the author’s image, you can set it manually in the Testimonial Author Image block under the DP Testimonial Categories by clicking the Set Testimonial Author Image. Or you can enter the Gravatar Account email. The testimonial module will fetch the author’s image from there.
      7. After completing all the fields, Publish your testimonial.
      8. Likewise, you can easily create multiple testimonials in no time.

      Create testimonial categories

      To display testimonials, it’s not necessary that you create categories. However, it would help you manage your testimonials on a webpage preferentially. You can create testimonial categories when creating a testimonial, as mentioned above in step 4. Alternatively, you can create & manage the testimonial categories as follows,

      1. Go to the DP Testimonials >> DP Testimonial Categories.
      2. Here, you can create a new category by entering the required details under the Add New Testimonial Category label like Name, Slug, Parent Testimonial Category, and Description.
      3. Once done with all the details, click Add New Testimonial Category.

      If you want to edit a previously created category,

      1. Simply click the Edit link under the category name.
      2. And make changes according to your needs.
      3. Update.

      Display Testimonials Using Testimonial Grid Module

      1. Insert DP Testimonial Grid on a page.
      2. How to select Testimonial Grid Layout: Inside the Content tab go to the Content settings >> Testimonial Layout >> select either Layout 1 / Layout 2.
      3. Select Number of Testimonials to display: Go to the same Content settings >> Number of Testimonials >> input your desired number.
      4. How to define Testimonial Order: Go to the Content settings >> Order >> select either DESC or ASC.
      5. Select Order Type: Go to the Content settings >> Order by >> select any from the available options that are Date, Modified Date, Title, Slug, ID, Random, and None.
      6. How to Exclude or Include Testimonials of Specific Category: Go to the Content settings >> Include Categories >> tick the checkboxes next to the categories you want to include. (If you leave all categories unchecked, it will display testimonials from all the categories.)
      7. Select Number of Columns for Testimonial Grid: Go to the Display settings >> Number Of Columns >> select your preferred number of columns up to 3.
      8. How to display Testimonials in Masonry Format: Go to the Display settings >> Enable Masonry >> check as YES.
      9. Hide Rating: Go to the Display settings >> Show Rating >> check as NO.
      10. Hide Author Image: Go to the Display settings >> Show Author Image >> check as NO.
      11. How to display Gravatar Image on Testimonial Grid: Go to the Display settings >> Use Gravatar >> check as YES. (Make sure you’ve used the author email associated with the Gravatar Account.)
      12. Hide Designation: Go to the Display settings >> Show Designation >> check as NO.
      13. Hide Company Name: Go to the Display settings >> Show Company Name >> check as NO.
      14. How to style single testimonial background: Inside the Content tab >> Background >> Single Testimonial Background >> apply customizations as required.

      Design Testimonial Grid’s Testimonials

      1. How to change Text alignment: Go to the Design tab >> Text >> Alignment >> select any available alignment options.
      2. How to apply Text Shadow: Inside the Design tab >> go to the Text settings >> Text Shadow >> apply any one from the available options.
      3. Customize Body Text of the testimonial: Go to the Design >> Body >> apply changes as required.
      4. How to style Author’s Name: Go to the Design tab >> Author >> Name >> apply text customization as required.
      5. Style Author’s Designation: Go to the Design tab >> Author >> Designation >> apply text customization as required.
      6. Style Author’s Company Name: Go to the Design tab >> Author >> Company >> apply text customization as required.
      7. How to change Star Rating size: Go to the Design tab >> Star Rating >> Star Font Size >> move the slider or input the value.
      8. How to change colors for the rated and non-rated stars: Go to the Star Rating >> Filled Star Color / Empty Star Color >> choose any required color.
      9. How to display Opening Quote Icon: Go to the Design tab >> Quote Icon >> Opening Quote Icon >> Show Opening Quote Icon >> check as YES.
      10. Change Opening Quote Icon Size: Go to the Quote Icon >> Opening Quote Icon >> Quote Icon Size >> Move the slider or input the value.
      11. Change Opening Quote Icon Color: Go to the Quote Icon >> Opening Quote Icon >> Quote Icon Color >> Choose any color as required.
      12. How to apply custom positioning for Opening Quote Icon: Go to the Quote Icon >> Opening Quote Icon >> Enable Custom Position For Quote Icon >> check as YES >> any apply customization as required.
      13. How to display Closing Quote Icon: Go to the Design tab >> Quote Icon >> Closing Quote Icon >> Show Closing Quote Icon >> check as YES.
      14. Change Closing Quote Icon Size: Go to the Quote Icon >> Closing Quote Icon >> Quote Icon Size >> Move the slider or input the value.
      15. Change Closing Quote Icon Color: Go to the Quote Icon >> Closing Quote Icon >> Quote Icon Color >> Choose any color as required.
      16. How to apply custom positioning for Closing Quote Icon: Go to the Quote Icon >> Closing Quote Icon >> Enable Custom Position For Quote Icon >> check as YES >> any apply customization as required.
      17. How to change Meta Separator Color: Go to the Design tab >> Meta >> apply color as required.
      18. Testimonial Padding: Go to the Design tab >> Spacing >> Testimonial Padding >> apply padding as required.
      19. Add Rounded Corners to Single Testimonial: Go to the Border settings >> Single Testimonial Rounded Corners >> Make changes as required.
      20. Add Borders to Single Testimonial: Go to the Border settings >> Single Testimonial Border Styles >> Make changes as required.
      21. Add Rounded Corners to Author Image: Go to the Border settings >> Author Image Rounded Corners >> Make change as required.
      22. Add Borders to Author Image: Go to the Border settings >> Author Image Border Styles >> Make change as required.
      23. Add Box Shadow to Single Testimonial: Go to the Box Shadow settings >> Single Testimonial Box Shadow >> select any box shadow from available options.

      Testimonial Slider Module

      Create new testimonials and their categories

      If you’ve already created testimonials and categories following the steps mentioned in the Testimonial Grid module, then there’s no need to create new testimonials for Testimonial Slider. However, if you want to use separate testimonials for the slider, then you’re free to do that.

      Display Testimonials Using Testimonial Slider Module

      1. Insert DP Testimonial Slider on a page.
      2. How to select Testimonial Slider Layout: Inside the Content tab go to the Content settings >> Testimonial Layout >> select either Layout 1 / Layout 2.
      3. Select Number of Testimonials to display: Go to the same Content settings >> Number of Testimonials >> input your desired number.
      4. How to define Testimonial Order: Go to the Content settings >> Order >> select either DESC or ASC.
      5. Select Order Type: Go to the Content settings >> Order by >> select any from the available options that are Date, Modified Date, Title, Slug, ID, Random, and None.
      6. How to Exclude or Include Testimonials of Specific Category: Go to the Content settings >> Include Categories >> tick the checkboxes next to the categories you want to include. (If you leave all categories unchecked, it will display testimonials from all the categories.)
      7. Hide Rating: Go to the Display settings >> Show Rating >> check as NO.
      8. Hide Author Image: Go to the Display settings >> Show Author Image >> check as NO.
      9. How to display Gravatar Image on Testimonial Grid: Go to the Display settings >> Use Gravatar >> check as YES. (Make sure you’ve used the author email associated with the Gravatar Account.)
      10. Hide Designation: Go to the Display settings >> Show Designation >> check as NO.
      11. Hide Company Name: Go to the Display settings >> Show Company Name >> check as NO.
      12. How to select Testimonial Slider effects: Go to the Content tab >> Slider Control >> Slide Effect >> choose slide effect >> Slide / Cube / Coverflow / Flip.
      13. How to define Number of Testimonials Per View: Go to the Slider Control settings >> Number of Testimonials Per View >> 1 / 2 / 3 / 4.
      14. How to Equalize Testimonials Height: Go to the Slider Control settings >> Equalize Testimonials Height >> check as YES.
      15. Enable Testimonial Slider Loop: Go to the Slider Control settings >> Enable Loop >> check as YES.
      16. Stop Slider Autoplay: Go to the Slider Control settings >> Autoplay >> check as NO.
      17. How to set Slider Autoplay Delay Time: Go to the Slider Control >> Autoplay Delay >> input the values.
      18. Disable Slider Pause On Hover: Go to the Slider Control >> Pause On Hover >> check as NO.
      19. How to set Testimonial Slider Complete Transition Duration: Go to the Slider Control >> Transition Duration >> input the values.
      20. How to Show Arrows on the Testimonial Slider: Go to the Slider Control >> Show Arrows >> check as YES. And if you want to display Arrow on hover, then check Show Arrows On Hover as YES.
      21. Display Pagination on the Slider and apply different styles: Go to the Slider Control >> Show Dots Pagination >> check as YES. After activating pagination on the slider, you can select pagination style from the Dots Pagination Style dropdown menu. Available pagination styles are Solid Dot, Transparent Dot, Stretched Dot, Line, Rounded Line and Squared Dot.
      22. How to style single testimonial background: Inside the Content tab >> Background >> Single Testimonial Background >> apply customizations as required.

      Design Testimonial Slider’s Testimonials

      1. How to change Text alignment: Go to the Design tab >> Text >> Alignment >> select any available alignment options.
      2. How to apply Text Shadow: Inside the Design tab >> go to the Text settings >> Text Shadow >> apply any one from the available options.
      3. Customize Body Text of the testimonial: Go to the Design >> Body >> apply changes as required.
      4. How to style Author’s Name: Go to the Design tab >> Author >> Name >> apply text customization as required.
      5. Style Author’s Designation: Go to the Design tab >> Author >> Designation >> apply text customization as required.
      6. Style Author’s Company Name: Go to the Design tab >> Author >> Company >> apply text customization as required.
      7. How to change Star Rating size: Go to the Design tab >> Star Rating >> Star Font Size >> move the slider or input the value.
      8. How to change colors for the rated and non-rated stars: Go to the Star Rating >> Filled Star Color / Empty Star Color >> choose any required color.
      9. How to display Opening Quote Icon: Go to the Design tab >> Quote Icon >> Opening Quote Icon >> Show Opening Quote Icon >> check as YES.
      10. Change Opening Quote Icon Size: Go to the Quote Icon >> Opening Quote Icon >> Quote Icon Size >> Move the slider or input the value.
      11. Change Opening Quote Icon Color: Go to the Quote Icon >> Opening Quote Icon >> Quote Icon Color >> Choose any color as required.
      12. How to apply custom positioning for Opening Quote Icon: Go to the Quote Icon >> Opening Quote Icon >> Enable Custom Position For Quote Icon >> check as YES >> any apply customization as required.
      13. How to display Closing Quote Icon: Go to the Design tab >> Quote Icon >> Closing Quote Icon >> Show Closing Quote Icon >> check as YES.
      14. Change Closing Quote Icon Size: Go to the Quote Icon >> Closing Quote Icon >> Quote Icon Size >> Move the slider or input the value.
      15. Change Closing Quote Icon Color: Go to the Quote Icon >> Closing Quote Icon >> Quote Icon Color >> Choose any color as required.
      16. How to apply custom positioning for Closing Quote Icon: Go to the Quote Icon >> Closing Quote Icon >> Enable Custom Position For Quote Icon >> check as YES >> any apply customization as required.
      17. How to change Slider Arrows size: Go to the Design tab >> Slider >> Arrow Font Size >> Move the slider or input the value.
      18. Apply custom color on Slider Arrows: Go to the Slider settings >> Arrow Color >> choose color as required.
      19. How to change slider pagination color: Go to the Slider settings >> Active / Inactive Dot Pagination Color >> choose colors as required.
      20. How to change Meta Separator Color: Go to the Design tab >> Meta >> apply color as required.
      21. Testimonial Padding: Go to the Design tab >> Spacing >> Testimonial Padding >> apply padding as required.
      22. Add Rounded Corners to Single Testimonial: Go to the Border settings >> Single Testimonial Rounded Corners >> Make changes as required.
      23. Add Borders to Single Testimonial: Go to the Border settings >> Single Testimonial Border Styles >> Make changes as required.
      24. Add Rounded Corners to Author Image: Go to the Border settings >> Author Image Rounded Corners >> Make change as required.
      25. Add Borders to Author Image: Go to the Border settings >> Author Image Border Styles >> Make change as required.

      Lottie Module

      Create Account and Download Lottiefiles

      Before you start creating Lottie Animations on your Divi theme website, first, create an account on LottieFiles.com (recommended). Or any other Lottie files provider website. Once created your account, download the Lottie animation JSON files, or copy the URL. After files have downloaded, you’re good to use the module.

      Add Lottie Animations

      1. Insert DP Lottie on a page.
      2. Upload Lottie JSON File: Go to the Content tab >> DP Lottie >> Lottie JSON File >> Upload >> the file you’ve downloaded. Or copy the URL.
      3. Autoplay Lottie Animation: Go to the DP Lottie settings >> Animation Trigger >> Autoplay.
      4. Play Lottie Animation on Hover and Click: Go to the DP Lottie Settings >> Animation Trigger >> select one from available options >> Hover / Click.
      5. Change Lottie Animation Direction: Go to the DP Lottie >> Direction >> Normal / Reverse.
      6. Apply Loop: DP Lottie >> Loop >> check as YES.
      7. Control Lottie Animation Speed: Go to the DP Lottie settings >> Animation Speed >> Input the value or move the slider.

      Masonry Gallery Module

      Add Masonry Gallery and Content Customizations

      1. Insert DP Masonry Gallery module on a page.
      2. How to add images to the gallery: Go to the Content tab >> Configuration >> Images >> Add Gallery Images. It will open Media Library, select the images you want to display in the Masonry Gallery.
      3. Increase or decrease the number of columns in the gallery: Go to the Configuration >> Number Of Columns >> choose the number of columns up to 10.
      4. Add Space between columns: Go to the Configuration >> Column Spacing >> move the slider or input the values.
      5. How to choose gallery image size: Go to the Image Size >> choose image size either Medium, Large or Full.
      6. How to display gallery images in a Lightbox: Go to the Elements settings in the Content tab >> Enable Lightbox >> check as YES.
      7. How to show Title on images in the Lightbox: Go to the Elements >> Show Title >> check as YES.
      8. How to show Caption on images in the Lightbox: Go to the Elements >> Show Caption >> check as YES.
      9. Apply Overlay effect on Hover: Go to the Elements >> Enable Image Overlay on Hover >> check as YES. And choose any available Overlay Icon.

      Masonry Gallery Design Customizations

      1. How to style Image Title and Caption Text: Go to the Design tab >> Text >> do appropriate changes. (Title and Caption get displayed in the Lightbox.)
      2. Add Lightbox Background Color: Go to the Design tab >> Lightbox >> Lightbox Background Color >> choose color.
      3. Add Lightbox Close Icon Color: Go to the Design tab >> Lightbox >> Close Icon Color >> choose color.
      4. Add Lightbox Arrows Color: Go to the Design tab >> Lightbox >> Arrows Color >> choose color.
      5. How to style Title & Caption Background: Go to the Overlay >> Title & Caption Background Color >> choose color.
      6. How to change Overlay Icon Size: Go to the Overlay >> Icon Size >> move the slider or input the values.
      7. Adjust Overlay Icon Color: Go to the Overlay >> Overlay Icon Color >> choose any appropriate color.
      8. How to add Overlay Background Color: Go to the Overlay settings in the Design tab >> Overlay Background Color >> choose any appropriate color.
      9. How to make gallery images’ Corners Round: Go to the Border settings in the Design tab >> Image Rounded Corners >> input the values.
      10. How to add borders to gallery images: Go to the Border settings >> Image Border Styles >> and choose the appropriate border position. After this, go to the Image Border Width >> input the value. Now, go to the Image Border Color >> and choose a custom color from the option. Then, in the Image Border Style dropdown menu, choose a suitable border style.
      11. How to add shadow to gallery images: Go to the Box Shadow >> Image Box Shadow >> choose any appropriate box-shadow from the options.

      Image Accordion

      Create engaging, interactive, and beautiful image accordions using the following steps.

      How to Add an Image Accordion

      1. Insert DP Image Accordion module on a page.
      2. Then click Add New Image.
      3. It will open Accordion settings in the Content tab of the individual accordion settings.

      Follow the below steps to customize the content of the Individual Image Accordion.

      Content Customizations for Individual Accordion

      1. Add Background for Default Accordion: Go to the Accordion settings >> Accordion >> Accordion Background >> Choose Image, Color or Gradient from the options.
      2. Add Background for Active Accordion: Go to the Accordion settings >> Active Accordion >> Accordion Background >> Choose Image, Color or Gradient from the options.
      3. How to add Title & Description to the Image Accordion: Go to the Content settings >> Title / Description >> Input the text.
      4. Show Icon on the Image Accordion: Content >> Icon >> Choose an icon.
      5. How to display Button on the Image Accordion: Go to the Content >> Show Button >> YES >> Button Text >> Enter your desired text.
      6. Add Button Link & Open in a New Tab: Go to the Link settings >> Button Link URL >> Add the Link >> Button Link Target >> In The New Tab >> To open the button link in a new tab.
      7. To customize accordion’s content on the individual level, move to the design tab.

      Design Customization for Individual Accordion

      1. How to change text alignment: Go to the Text settings >> Text Alignment >> change alignment as required.
      2. How to change text theme: Text >> Text Color >> select Dark / Light.
      3. Style Title: Go to the Title settings >> apply text customizations as needed.
      4. Style Description: Go to the Description settings >> apply text customizations as needed.
      5. How to change icon size, and color: Go to the Icon settings >> use Icon Font Size / Icon Color >> to change size / color.
      6. How to apply icon shape and shape background color: Go to the Icon >> Style Icon >> YES. Use Shape >> to choose shape as Circle / Square / Hexagon. Use Shape Background >> to change shape background with color.
      7. How to change Button alignment: Go to the Button settings >> Button Alignment >> choose alignment as required.
      8. How to apply custom styling (Size, Text Font, and more) to the button: Go to Button >> Use Custom Styles For Button >> YES.
      9. Apply Margin and Padding: Go to the Spacing >> Margin / Padding >> input the values.
      10. Add Rounded Corners: Go to the Border settings >> Rounded Corners >> Input the values.
      11. Add Border Styles to the Image Accordion: Go to the Border >> Border Styles >> Choose Border Styles as the requirement.
      12. Apply a Box Shadow to the individual accordion: Go to the Box Shadow settings >> Choose Box Shadow as required.
      13. How to apply animation effects to the accordion: Go to the Animation settings >> Accordion Content Animation >> Choose an animation effect.
      14. Save the customization and move to the Primary Settings of the Module.

      Configuration settings for each Accordion (Trigger type, Accordion Orientation, Content Alignment, and more)

      Once applied all the customization to the image accordion in the individual settings, tweak the Configuration settings’ option to make the accordion suitable for your design needs.

      1. Choose Accordion Trigger Type: Go to the Configuration settings >> Accordion Trigger >> Select >> Hover / Click.
      2. Select Accordion Orientation: Go to the Configuration settings >> Accordion Orientation >> Select >> Horizontal / Vertical.
      3. Change Content Alignment: Go to the Configuration settings >> Content Alignment >> Select >> Top Left / Top Right / Top Center / Center / Bottom Left / Bottom Right / Bottom Center.
      4. How to change Active Accordion Image Size: Configuration >> Active Accordion Image Size >> Input the value or move the slider.
      5. How to set the number of Default Active Accordion: Configuration >> Default Active Accordion >> Input the value or move the slide
      6. How to set the duration to smoothen the active accordion appearance: Configuration >> Transition Duration >> Input the value or move the slide

      Design Customizations for each Accordion (Only Applicable if not customized at Individual Level)

      1. How to change text alignment: Go to the Text settings >> Text Alignment >> change alignment as required.
      2. How to change text theme: Text >> Text Color >> select Dark / Light.
      3. Style Title: Go to the Title settings >> apply text customizations as needed.
      4. Style Description: Go to the Description settings >> apply text customizations as needed.
      5. How to change icon size, and color: Go to the Icon settings >> use Icon Font Size / Icon Color >> to change size / color.
      6. How to change Button alignment: Go to the Button settings >> Button Alignment >> choose alignment as required.
      7. How to apply custom styling (Size, Text Font, and more) to the button: Go to Button >> Use Custom Styles For Button >> YES.

      Team Slider

      Create team member’s custom posts

      Before you add team sliders on the website, first, you need to create team member’s custom posts. To do that, follow the below steps,

      1. On your WordPress Dashboard, go to the DP Team Members >> click Add New.
      2. Then, under Add New Member >> Add Title >> input team member’s name.
      3. After this, head over to the DP Team Members Categories block >> click Add New Team Member Category >> and create a new one. Or assign a pre-made category.
      4. Now, move to the Team Member Image block >> Set team member image.
      5. After this, go to the Team Member Meta Fields block >> and add information about the team member >> Short Description, Designation, Social Links, and Email.
      6. Then, go to Skill >> input the skill >> then in Skill Value Between 0 to 100 >> give skill value. 
      7. Use plus (+) to add multiple skills. And minus (-) to remove any given skill.
      8. Publish.

      Create team categories

      To display a team slider, it’s not necessary that you create categories. However, it would help you manage your team members’ post type on a webpage preferentially. You can create team members’ categories when creating a team member, as mentioned above in step 3. Alternatively, you can create & manage the team members’ categories as follows,

      1. Go to DP Team Members >> click DP Team Member Categories.
      2. Enter the required details under the Add Team Member New Category.
      3. Once done with all the details, click the Add Team Member New Category.
      4. If you want to edit a previously created category >> click Edit under the category name.
      5. Update.

      Display Team Slider 

      1. Insert the DP Team Slider module on a page.
      2. How to choose the number of team members on the slider: Go to the Content settings >> Number of Members >> input your desired number.
      3. How to define order: Go to the Content settings >> Order >> select either DESC (Descending) / ASC (Ascending.)
      4. Select order type: Go to the Content settings >> Order by >> and select one from the options >> Date / Modified Date / Title / Slug / ID / Random / Relevance / None.
      5. Select category: Go to the Content settings, >> Select Categories >> tick the checkboxes next to the categories you want to include. If you leave all categories unchecked, then it will display team members from all the categories.
      6. Choose Team Layout: Go to the Slider settings >> Layout >> select either Layout 1 / Layout 2.
      7. Choose Team Slider Slide Effect: Go to the Slider >> Slide Effect >> choose Slide or Coverflow.
      8. Choose team members per slide: Go to the Slider >> Number of Post Per View >> choose either 1,2,3, 4, or 5.
      9. How to equalize slide height: Go to the Slide >> Equalize Slide Height >> ON.
      10. Hide Short Description: Go to the Elements settings >> Show Description >> NO.
      11. Hide Designation: Go to the Elements >> Show Designation >> NO.
      12. Hide Social Icon: Go to the Elements >> Show Social Icon >> NO.
      13. Hide Skills: Go to the Elements >> Show Skills >> NO.
      14. Hide Control Dots (Pagination): Go to the Elements >> Show Control Dots >> NO.
      15. How to adjust Slide Background: Go to the Background settings >> Slide Background >> and apply background customization as needed.

      Design Team Slider 

      Move to the Design tab and use the following steps to improve the team slider’s look and feel.

      1. Name Text Settings: Apply Text Customizations for Name.
      2. Designation Text Settings: Apply Text Customizations for Designation.
      3. Description Text: Apply Text Customizations for Description.
      4. Skill Text: Apply Text Customizations for Skill Text.
      5. How to adjust Skills Bar height: Go to the Skills settings >> Bar Height >>  move the slider or input value.
      6. Apply different colors for both the Filled and Empty Bar: Go to the Skills >> Empty Bar Color >> choose any color. Likewise, apply color for the filled bar under the Filled Bar Color option.
      7. Change Social Icon Separator Color: Go to the Social Icons settings >> Icon Separator Color >> choose any color.
      8. Change Social Icon Separator Size: Go to the Social Icons >> Separator Size >> input the value or move the slider.
      9. Change Social Icon Sizer: Go to the Social Icons >> Icon Size >> input the value or move the slide.
      10. How to change Social Icon Color and Background Color: Go to the Social Icons >> Icon Color / Icon Background Color >> choose any color.
      11. Change Social Icon Alignment: Go to the Social Icons >> Social Icon Alignment >> select your preferred alignment position.
      12. How to hide slider arrows: Go to the Slider Arrow >> Show Arrows >> NO.
      13. Choose slider arrow icons: Go to the Slider Arrow >> Previous Arrow / Next Arrow >> choose arrow icon.
      14. How to enable arrows on hover: Go to the Slider Arrow >> Show Arrows Only On Hover >> Yes.
      15. Change slider arrow size: Go to the Slider Arrow >> Arrow Font Size >> move the slider or input the value.
      16. How to change slider arrow’s icon and background color: Go to the Slider Arrow >> Arrow Color / Arrow Background >> choose any color.
      17. How to apply the arrow background border: Go to the Slider Arrow >> Arrow Background Border >> move the slider or input the value.
      18. Change arrow border-color: Go to the Slider Arrow >> Arrow Shape Border Color >> choose any color. 
      19. Apply different colors to slider dots: Go to the Slider Dots >> Active Pagination Color / Inactive Pagination Color >> choose any appropriate color.
      20. Adjust Slide Padding: Go to the Spacing>> Slide Padding >> and input the values.
      21. Apply rounded corners to the image and other customizations: Go to the Border settings >> Member Image Rounded Corners >> input the values. In this same setting, you get other options such as Border Styles, Border width & color.
      22. How to apply Box Shadow on team member’s image: Go to the Box Shadow settings >> Member Image Box Shadow >> choose appropriate shadow.
      23. Apply Team Slider Loop: Go to the Animation >> Enable Loop >> YES.
      24. Disable Autoplay, Adjust Transition Duration, and more: Go to the Animation >> Autoplay >> NO. Under this option, you also get the Autoplay Delay option, which allows you to delay the team slider to work after a complete cycle. Moreover, the Transition Duration allows you to set time for the slider to complete a sliding cycle.
      25. How to disable slider pause on hover: Go to the Animation >> Pause On Hover >> NO.

      Image Card

      To create beautiful Image Cards on your website using the Divi Plus Image Card module, follow the below steps,

      1. Insert DP Image Card module on a page.
      2. Upon inserting the module, it will open the Content settings in the Content tab.
      3. How to set Title & Content for the Image Card: Go to the Content >> Title / Content >> input the text accordingly.
      4. Add image to the Image Card: Go to the Image settings >> Image >> add the image.
      5. How to insert alt text for the image: Go to the Image >> Image Alt Text >> input the image’s Alt Text.
      6. How to display an icon: Go to the Icon settings >> Icon >> select an icon.
      7. How to display a button on the image card:  Go to the Button settings >> Show Button >> YES. It will open further options using which you can add the button text, link.
      8. How to open the button link in a new tab: Go to the Button >> Link Target >> In The New Tab.
      9. Adjust image card content background: Go to the Background settings >> Content Background >> customize the background with Color, Gradient, or Image. 

      Image Card Design Customizations

      Once customized the image card’s content, move to the Design tab to further improve its look.

      1. How to change text alignment: Go to the Text settings >> Text Alignment >> change alignment as required.
      2. How to change text theme: Text >> Text Color >> select Dark / Light.
      3. Style title text and content: Go to the Title & Content settings >> select TItle / Content >> apply text customizations as needed.
      4. How to change icon alignment, size, and color: Go to the Icon settings >> use Icon Alignment / Icon Font Size / Icon Color >> to change alignment / size / color.
      5. How to apply shape and shape background color to the icon: Go to the Icon >> Style Icon >> YES.  Use Shape >> to choose shape as Circle / Square / Hexagon.  Use Shape Background >> to change shape background with color.
      6. How to change Button alignment: Go to the Button settings >> Button Alignment >> choose alignment as required.
      7. How to apply custom styling to the button: Go to Button >> Use Custom Styles For Button >> YES.

      Text Highlighter

      1. Insert DP Text Highlighter Module on a page.
      2. Upon insertion, it will open the Content tab of the module with Content settings.
      3. How to insert Text Highlighter text: In the Content settings, go to the Pre, Content, and Post field >> Input your text.
      4. How to change/select Text Highlighter style:  Go to the Content settings >> Text Highlighter Shape >> choose available shapes >> Zig Zag / Underline / Double  Underline / Circle / Diagonal / Cross / Curly Line.
      5. Display text in stack formation: Go to the Content settings >> Display in Stack >> check as >> YES.
      6. How to assign the heading tag to the Highlighted Text: In the Content settings >> Wrap in Heading Tag >>  check as >> YES.

      Design Customization of the Text Highlighter

      Move to the Design tab to customize the appearance of the Text Highlighter further.

      1. Change highlighter shape color: Go to the Design tab >> Highlighter Shape Settings >> Highlighter Color >> Apply any color. 
      2. How to style highlighted text: Go to the Text Settings >> Global / Pre / Main / Post >> apply text customization as required. 
      3. How to style Heading assigned highlighted text: Go to the Title Settings >> Global / Pre / Main / Post >> apply text customization as required.     

      Image Mask

      1. Insert DP Image Mask module on a page.
      2. How to select masked image content-type: Go to the Content settings >> Mask On >>  select Image / Background.
      3. How to select Mask Type: Go to the Content >> Mask Type >> select your preferred mask type >>  ArrowCircle / Fluid / Heart / Leaf / Music / Shield / Speech Bubble / Splodge / StarSquare.
      4. Select mask style: Go to the Content >> under Mask Type settings >> * Style >> select your preferred mask style associated with the mask type. 

      (*) represents Mask Type’s style name. 

      Image Mask Design Customizations

      1. How to Adjust Mask Width: Go to the Design tab >>  Mask Settings >> Mask Width >> input the value, or move the slider.
      2. Increase or decrease mask size: Go to the Mask Settings >> Scale Mask >>  input the value, or move the slider.
      3. How to Rotate Mask: Go to the Mask Settings >> Rotate Mask >>  input the value, or move the slider.
      4. Adjust Mask Horizontal Position: Go to the Mask Settings >> Horizontal Mask Position >> input the value or move the slider.
      5. Adjust Mask Vertical Position: Go to the Mask Settings >> Vertical Mask Position >>  input the value, or move the slider.

      Add Image Mask Element 

      1. How to insert an element on the image mask: On Content tab >> click Add Element. It opens the Content tab for the element with Content, Link, and Background settings.
      2. How to Select Element type: In the element settings, go to the Content >> Select Element >> select the element type from the available options >> Circle / Fluid / Grid / Line / Plus / Square / Star / Triangle.
      3. Select Element Style: Go to the Content >> Select * >> choose available element style.
      4. How to Link elements: Go to the Link >> insert a URL for the Element.
      5. Customize Background: Go to the Background >> adjust the element’s background with color, gradient, and image.

      (*) represents Element’s Style name. If you select the Circle element in the Content, then the title of the element style field will be Select Circle.

      Design Customizations for Image Mask Element

      1. Change element position from the top: In element’s Design tab >> go to Element Position >> Position From Top >> move the slider or input the value. 
      2. Change element position from the left: Go to Element Position >> Position From Left >> move the slider or input the value. 
      3. Select element placement: Go to Element Position >> Element Placement >> select >> Above Image / Below Image.
      4. How to change Element Size: Go to the Element Size >> Element Sizing >> move the slider or input the value to increase or decrease the element’s size.
      5. Apply Color to the Element: Go to the Element Color >> Element Color >> select any color as required.

      Apply Gradient to the Element: Go to the Element Color >> Enable Gradient >> YES >> apply gradient as required.