Divi’s blurb module is likely one of the hottest modules I’ve noticed in use. It’s nice for appearing pictures or icons with a identify and brief textual content in one module. They’re ceaselessly used with button modules to amplify their use. I every so often see symbol, textual content, and button modules used rather than blurb modules if extra options are wanted. Another choice is to make use of a third-party plugin known as Divi Blurb Extended.
Divi Blurb Prolonged is a blurb module with new options that can be utilized rather than more than one modules. Added options come with more than one icon positions, new icon shapes, a learn extra button, and colour adjustments on hover.
It really works with Further and the Divi Builder plugin. I’m the usage of Divi Blurb Prolonged model 1.1.0, Divi model 3.3.1, and WordPress model 4.9.6.
Putting in Divi Blurb Prolonged
Prior to uploaded the plugin you will have to first unzip the obtain report. Throughout the report are two extra folders:
- Divi Blurb Prolonged (that is the plugin report)
- Divi Blurb Prolonged Layouts JSON (that is an not obligatory structure report that may be uploaded into the Divi Library)
Add and turn on the plugin throughout the folder. No different setup is wanted.
Divi Blurb Prolonged Module
A brand new module known as Divi Blurb Prolonged is added to the Divi Builder. It’s inexperienced, so it sticks out.
The Content material tab comprises the acquainted blurb settings for the identify and content material textual content, URL, symbol and icon, and background. It provides a characteristic for the button, whole with textual content and styling choices.
The Design tab comprises settings for the structure (make a choice from vintage, flipbox, easbox, borderbox, and symbol card), symbol and icon placement (make a choice from best, proper, or left), hover state, textual content, identify textual content, frame textual content, sizing, border, field shadow, and animation.
The Complex tab comprises CSS fields for all the blurb components. You could have get right of entry to to the blurb symbol, identify, content material, learn extra button, and browse extra button hover.
Divi Blurb Prolonged Examples
I changed the blurbs within the Physician’s Administrative center structure pack with Divi Blurb Prolonged modules. The one adjustments I made with the colours and dimension of the icon. The default icon dimension was once 96 pixels. I set it to 16. If I went smaller the circle remained the similar dimension whilst the icon inside it changed into smaller. It will be simple to make the blurb glance as regards to the unique. I’ll make some customized adjustments which might be extra unique to this module.
Word – it labored nice with the Frontend Builder to start with, however I needed to revert to the backend builder for the reason that module wasn’t visual when I created the primary one. You’ll be able to position the modules throughout the Frontend Builder, however you’ll have to make use of the backend builder to make your changes.
Exchange the form of the icon by means of settling on your selection from a dropdown field. Choose between circle, sq., or hexagon. Right here’s the similar structure with sq. icons.
Right here’s the icons with the hexagon form. I’ve modified the dimensions of the icon to 66 and added a hover impact to modify the colour of the icon and background on hover. I’ve additionally added a field shadow and a few padding to transport the textual content clear of the border.
Right here’s a have a look at the usual blurbs within the Structure structure pack. They use a button module to be able to hyperlink to additional info. With Divi Blurb Prolonged we will be able to take away the additional button module. One those blurbs isn’t just like the others.
I’ve recreated one of the most modules and left the originals to match. You’ll be able to inform which is mine. I’m the usage of the similar fonts and types, symbol, and many others. Mine simplest makes use of one module, so I didn’t have so as to add the button module. I did have so as to add padding in CSS to create the correct quantity of house between the textual content and the button. The only factor I didn’t do regardless that was once take away the margin of the button, so mine isn’t aligned with the left facet of the textual content just like the others are.
I’ve now recreated all the blurbs with Divi Blurb Prolonged modules. For those I’ve selected structure choices that come with animation. The left makes use of Flipbox and the proper makes use of Easebox.
For the Flipbox you’ll have other colours or pictures for the back and front of the cardboard if you wish to have. For this one I’ve added a picture for the entrance. I modified the colour of the header textual content and added a textual content impact so it’s simple to learn.
On hover, the cardboard flips to show the colour that I set as its background.
I added a border impact for the interior of the cardboard, which may also be noticed as the cardboard rotates.
The opposite two layouts aren’t animated. The left is Borderbox and the proper is Imagecard. I’ve styled the border at the left to check the button textual content. I got rid of the icon for each, however you’ll taste the icon too. With out including CSS for padding it located the photographs in awkward places.
Divi Blurb Prolonged Layouts
The obtain report features a zipped JSON report. Unzip the report named Divi Blurb Prolonged Layouts JSON and import the JSON report into the Divi Library.
Looking for Divi Blurb Prolonged within the Divi Library displays 3 layouts: Vintage, Symbol Card, and Easebox. Those are whole pages with pre-styled modules. A few of them come with just a little little bit of CSS for padding.
This can be a screenshot of the Vintage structure. It comprises all the modules at the writer’s demo web page and displays what the module can do. On this instance I’m soaring over the blurb within the higher proper. It makes use of a hover impact to modify the icon background to blue and the icon to white.
This one makes use of a pleasant hover impact for the learn extra button. I particularly just like the hexagons for the icons. It presentations the modules over a parallax background.
Right here’s any other phase of the Vintage structure. The set of modules at the best come with a parallax background. The modules at the backside display a excellent instance of coloured backgrounds.
The Imagecard structure is fascinating. It presentations 3 playing cards without a house between them. The icons overlap the picture and display all 3 placement choices. The cardboard resembles a weblog card. This is able to paintings smartly for hyperlinks to articles, pages, products and services, and many others.
The Easebox structure comprises quite a lot of examples. The blurbs on the best use the icons as hyperlinks whilst the blurbs on the backside use hover animation to turn the learn extra button and alter the colour of the background and textual content.
Right here’s any other phase of the Easebox structure, which additionally makes use of hover animation. The learn extra button is published on hover.
Divi Blurb Prolonged with Further
Divi Blurb Prolonged labored simply as smartly with Further. That is the Easebox structure.
This one is the Imagebox structure. No styling adjustments had been essential to make it paintings with Further.
Divi Blurb Prolonged License, Documentation, and Improve
You’ll be able to acquire Divi Blurb Prolonged from the publisher’s website. There are two licenses to be had:
- Unmarried Website – $19
- Prolonged – $49
Documentation is equipped by means of an FAQ at the writer’s web page. Improve is equipped by way of electronic mail.
Finishing Ideas
Divi Blurb Prolonged works very a lot the similar manner as the usual Divi blurb module, however provides a number of new options together with icon shapes, a learn extra button, and a few layouts with animation. The added layouts supply a excellent start line and display you one of the most issues the module can do.
If you understand how to make use of the usual blurb module you gained’t have any hassle the usage of this one. I discovered the settings intuitive to make use of and if you understand CSS you’ll customise the weather even additional. If you wish to have extra options in your blurbs, Divi Blurb Prolonged is price a glance.
We wish to listen from you. Have you ever attempted Divi Blurb Prolonged? Tell us what you take into consideration it within the feedback.
Featured Symbol by way of SilviaC / shutterstock.com
The publish Divi Plugin Highlight: Divi Blurb Extended seemed first on Elegant Themes Blog.
WordPress Web Design