Divi Blurb Extended Documentation

File structure

The name of the plugin file is divi-blurb-extended.zip. It can be downloaded from the link in the order confirmation email. The plugin is also available for download from the My Account area. If the plugin was purchased from any vendor, the download link will be available on their website.

Installation

Divi Blurb Extended can be installed using 2 methods.

  1. From the WordPress Dashboard
    1. Go to >> Plugins >> Add New >> Upload Plugin >> Choose File >> Browse divi-blurb-extended.zip and click Install Now >> Activate Plugin.
  2. Manually uploading via FTP
    1. Extract divi-blurb-extended.zip.
    2. Connect to your server using FTP application.
    3. Navigate to wp-content/plugins/.
    4. Upload the divi-blurb-extended directory in the plugins directory of your server.
    5. Go to WordPress Dashboard >> All Plugins > > Activate Divi Blurb Extended.

How to use Divi Blurb Extended plugin?

This plugin consists of two modules for Divi Builder to create Divi Blurbs.

  1. Divi Blurb Extended: This module has 5 blurbs layouts that are Classic, Flipbox, Easebox, Borderbox, and Image Card.
  2. Advanced Flip Box: In this module, you get 2 blurbs layouts that are Layout 1, and Layout 2.

Creating Blurbs using Divi Blurb Extended module

Common steps to follow for each layout available with the Divi Blurb Extended Module.

  1. Create a new page/edit an existing page where you want to add or display blurbs created using Divi Blurb Extended Module.
  2. Insert Row >> Scroll Divi module library >> Insert Divi Blurb Extended module
  3. Go to Blurb Content Settings >> Set Blurb Title >> Set Blurb Content
  4. Go to Blurb Link settings >> to input Blurb Link if you want to open a blurb related page >> check “Url Opens in s New Window” as “Yes” if you want to open a blurb related page in a new window.
  5. For Read More Button on blurbs go to Button settings >> check “Read More Button” as “Yes.”
  6. Input text in the Read More Button Text Field to be used as custom text for the Read More Button.
  7. If you want to customize the Read More Button, then check “Use Custom Styles For Button” as “Yes.”
  8. Go to Image & Icon settings to add an Image or Icon on the Blurb >> simply upload your image.
  9. If you want to use an Icon rather an Image, then check “Use Icon” as “Yes.” 

Layout Selection

  1. After providing blurb content in the content settings
  2. Go to Design Tab >> Layout setting >> Choose any of the available layouts. 

Content Background settings for Classic, Easebox, Borderbox, and Image Card layout

  1. To change the background color of the blurb content. 
  2. Go to the Design tab >> Content Background settings >> pick a color to be used for content background.

Flipbox layout settings

  1. To customize the frontside content background >> Go to the Design tab >> Flipbox Settings >> Front >> choose color/image >> pick a color/upload an image.
  2. To customize the backside content background >> Go to the Design tab >> Flipbox Settings >> Back >> choose color/image >> pick a color/upload an image.
  3. To adjust height of the Flipbox >> Go to the Design tab >> Flipbox Settings >> Flipbox Height
  4. Move the slider or input the value to increase/decrease Flipbox height.

Borderbox layout settings

  1. To change Border Color of the Borderbox layout
  2. Go to the Design tab >> Borderbox settings >> Border Color >> Pick a color to be used for the border.

Image Card layout settings

  1. To insert Top image in the Image Card layout
  2. Go to the Design tab >> Image Card settings >> Top Image >> Select/Upload an image.
  3. If you want to set alternative text for the image
  4. Then go to the Design tab >> Image Card settings >> Image Alt Text field >> and input your desired text to be used as Image Alt Text.

Image & Icon placement for any layout

  1. To change placement of the image/icon of the blurbs
  2. Go to Design tab >> Image & Icon settings >> Image/Icon Placement >> choose Top/ Left/ Right
  3. If you want to change Icon Color
  4. Then go to  Design tab >> Image & Icon settings >> Icon Color >> and pick a color to be used for the Icon
  5. Check “Use Icon Font Size” as “Yes” if you want to change the size of the icon.
  6. Then move the slider or input the value to increase/decrease icon size

Blurb Title & Content Text settings

  1. To customize blurb Title and Content text
  2. Go to the Design tab >> Blurb Text Settings >> and customize Title & Content text according to your needs.

Blurb Hover effects settings

  1. To apply hover effects on blurb Text, Button and Elements
  2. Go to the Design tab >> Hover State >> choose Text/Button/Elements
  3. And apply customization according to your requirements.

Creating Blurbs using Advanced Flip Box module

Common steps to follow for each layout available with the Advanced Flip Box Module.

  1. Create a new page/edit an existing page where you want to add or display blurbs created using Advanced Flip Box Module.
  2. Insert Row >> Scroll Divi module library >> Insert Advanced Flip Box.

Layout 1 selection & settings

  1. After inserting the Advanced Flip Box module
  2. Go to Content Tab >> Flip Box Layout >> Select Layout >> choose Layout 1
  3. Then move to Flip Direction setting >> and choose Top/Bottom/Right/Left as flip direction of the Flip Box
  4. Keep “3D Depth Effect” as “Yes” if you want 3D effects on the Flip box.
  5. Check “Shake on Flip” as “Yes” if you want to apply shake effects when blurb flips.
  6. Move slider/input value in the Flip Speed(in ms) field to control Flip Box flip speed.

Layout 2 selection & settings

  1. After inserting the Advanced Flip Box module
  2. Go to Content tab >> Flip Box Layout >> Select Layout >> choose Layout 2
  3. Then move to the Flip Style setting >> and choose Fade/Zoom In/Zoom Out as flip style of the Flip Box
  4. Move slider/input the value in the Flip Speed(in ms) field to control Flip Box flip style speed.

Common Content settings for both Layout 1 & Layout 2 of the Advanced Flip Box Module

Flip Box Front & Back Content Settings

  1. To customize Flip Box Title and Content
  2. Go to the Content tab >> Flip Box Content settings >> choose Front Content/ Back Content
  3. Then for Flip Box Front /Back Title >> input your custom text in Title field
  4. For Front/Back Content >> input your custom text in Content field

Flip Box Image/Icon Selection

  1. To use Image/Icon on Flip Box
  2. Go to the Content tab >> Flip Box Elements setting >> click Front/Back Elements
  3. Then check “Use Icon on Front/Back” as “Yes”, If you want to use Icon on the Flip Box.
  4. Else, upload an image in the Front/Back Image field.
  5. If you want to set alternative text for the image
  6. Then go to the Content tab >> Flip Box Elements setting >> click Front/Back Elements >> Image Alt Text field >> and input your desired text to be used as Image Alt Text.

Apply Background effects 

  1. If you want to apply background effects on the Flip Box
  2. Then go to the Content tab >> Flip Box Background settings >> choose Front/Back
  3. Then apply Color/Gradient/ an Image to the Front Background/Back Background field.

Common Design settings for both Layout 1 & Layout 2 of the Advanced Flip Box Module

Flip Box Image/Icon Placement Customizations

  1. To customize Front Image/Icon placement of the Flip Box.
  2. Go to Design tab >> Front Image/Icon Style settings >> Image/icon placement >> choose Top/Left/Right
  3. This will set the front image/icon to the chosen area.
  4. For Back Image/Icon placement
  5. Go to Design tab >> Back Image/Icon Style settings >> Image/Icon placement >> choose Top/Left/Right.
  6. This will set the Back image/icon to the chosen area.

Flip Box Text Customizations

  1. To customize Flip Box Front Title and Content text
  2. Go to the Design tab >> Front Text Style Settings >> and customize Title & Content text according to your needs.
  3. To customize Flip Box Back Title and Content text
  4. Go to the Design tab >> Back Text Style Settings >> and customize Title & Content text according to your needs.

Flip Box Back Button Alignment settings

  1. To customize the Back Button Alignment.
  2. Go to Design tab >> Back Button Style settings >> Button Alignment >> align the button as per requirement either Left, Right or Center

Flip Box Box Alignment settings & other customizations

  1. To customize the Front Box alignment of the Flip Box.
  2. Go to the Design tab >>  Front Box Style Settings  >> Front Content Alignment >> choose Top/Center/Bottom.
  3. For rounded Front Box >> go to Design tab >> Front Box Style Settings >> Front Rounded Corners >> input value or move the slider to make Front Box rounded.
  4. To customize the Back Box alignment of the Flip Box.
  5. Go to the Design tab >>  Back Box Style Settings  >> Back Content Alignment >> choose Top/Center/Bottom.
  6. For rounded Back Box >> go to Design tab >> Back Box Style Settings >> Back Rounded Corners >> input value or move the slider to make Front Box rounded.

Using Divi Blurb Extended with Custom Post Types

To use Divi Blurb Extended on pages, posts and custom post types with added support from Divi builder follow the steps below-

  1. On your WordPress Dashboard >> Go to Divi Menu >> Divi Theme Options >> Builder
  2. Enable the Custom Post Types where you want to use Divi Blurb Extended using Divi Builder.

Frequently asked questions

Q: What is Divi Blurb Extended?
A: Divi Blurb Extended is a plugin by Divi Extended, which work upon Divi and Extra WordPress Theme. It also works on Divi Builder Plugin, which allows users to create enhanced Blurbs.

It has two modules, Divi Blurb Extended and Advanced Flip Box with multiple blurb layouts in each.

Divi Blurb Extended adds up some special features to the traditional Divi Blurb Module. One of the most common features is the Read More button. If you were looking for a solution on how to add a read more button in Divi Blurb, this plugin is the answer to your question.

Apart from the read more button in blurbs, the plugin comes with some really nice ready to use layouts that can be selected from within the Divi Blurb Extended module setting. The includes Flip Box, Blurb Position on Right, Add square and hexagon along with default circle in Divi blurb and more.

Advanced Flip Box, allows a blurb to flip in multiple directions and animate with multiple effects. It also includes all other features of the Divi Blurb Extended plugin like read more button, icon position on the right, and multiple shapes.

Q: What are the unique features of Divi Blurb Extended compared to default Divi Blurb Module?
A: Classic
1. Classic layout has option to show icon on right in blurb. It is available in other layouts as well.
2. Square and hexagon shape around the icons instead of round in default divi blurb.
3. Read more button which you can use to create a link right from the blurb without adding a button module.

Flipbox effect which shows blurb heading by default and then show the content on mouse hover.

Easebox layout offers special animation.

Border box layout offers creating a border around blurb.

Image card offers using images along with blurb and create layout like the demo.

Advanced Flip Box Module and its layout

Layout 1 allows a blurb to flip in multiple directions: Top, Bottom, Right, and Left.

Layout 2 of Advanced Flip Box module gives a blurb to animate with different effects:Fade, Zoom In, and Zoom Out.

Q: How to update Divi Blurb Extended?
A: The plugin comes with a one-click update. There will be a notification for the plugin update like other WordPress updates.

Q: How many Blurb layouts are there in Divi Blurb Extended?
A: There are 7 Blurb Layouts in Divi Blurb Extended plugin. Classic, Extended, Flipbox, Easebox, Borderbox and Image Card in Divi Extended Module. And Layout 1 and Layout 2 in Advanced Flip Box module.

Q: Can I still use the default Divi Blurb?
A: Yes, the Divi Default blurb remains same. The plugin Divi Blurb Extended adds a new module for in Divi Library for it’s functionality.

Q: Will it work with DIVI Builder plugin installed on any theme other than DIVI?
A: Divi Blurb Extended is a module that works with Divi Theme, Extra Theme and Divi Builder Plugin.

Q: I purchased the plugin and want to know how can I download it again in future?
A: Users can visit “My Accounts” page and log-in to download the plugin anytime. In case if users does not remember the login details, they could re-set the password using lost password link. They need to provide the same email which they used to purchase the product.

Q: Will it work on both post and pages?
A: Yes, Divi Blurb Extended will work on both Post and Pages.

Q: Can I use other modules on the same page where I use Divi Blurb Extended module?
A: Yes, it can be used like any other modules without any issue.

Q: Will it work with Custom Post Types?
A: Yes, Divi Blurb Extended can be used on pages, posts and custom post types with added support for Divi builder. (click here on how to do it)

Q: I have purchased Regular License. Can I convert it to Extended License?
A: Yes you can convert regular license to extended license by paying the difference. Contact us and we will send you details on how you can upgrade.

Q: Can I use Divi Blurb Extended in my Divi child themes which I sell Further?
A: Divi Blurb Extended can be used by Divi child theme developers who want to ship the plugin in their products. The child theme license cannot be used to resale the Divi Blurb Extended module separately and must be advertised and included within the Divi Child Theme. The license for single child theme is $249.

Q: How to update from 1.0.0 to 1.0.1 or above?
A: In order to update from 1.0.0 to 1.0.1 or above, there is a manual process required.

1. Deactivate and delete the existing version (1.0.0) of the plugin.
2. Download the updated version from DiviExtended.com Downloads page.
3. Upload the plugin and activate it.
4. The update is complete. The settings won’t be deleted when you deactivate and delete the plugin in step 1.

If you are using 1.0.1 or above, the update can be done like any other plugin by clicking on update links in the dashboard.

Q: I am not able to see Icons in Visual Editor Mode.
A: Add this CSS

.admin-bar .et_pb_blurb_extended .et-pb-icon {
opacity: 1 !important;
}

Q: How to move icon in middle in Divi Blurb Extended Border Box Layout?
A: In Border Box Layout, the icons are attached at a distance of 22 pixels. If you want to move the top icon to the center, you can override that area using the following CSS snippet

.et_pb_main_blurb_image {
left: calc(50% – (68px/2));
}

Here, 68 is manually obtained width of the icon area which will need to replace with your own icon box size.

The CSS can go to your page for moving all icons to the center with the specified size or can be added to Divi Blurb Extended module’s setting under Advanced >> Blurb Image

Q: Where can I download the demo layouts from the demo site for Divi Blurb Extended?
A: Download Divi Blurb Extended Layouts here.

Divi 4 header footer pack

Fill up your details to download the file

Please check your email for the download link.