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.

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.