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.

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.
Divi 4 header footer pack

Fill up your details to download the file

Please check your email for the download link.

One Plugin, Many Possibilities

You have Successfully Subscribed!