The advanced divi blurb module by diviflash is invented with an elegant combination of title, subtitle, description, badge, image & icon. When the requisition comes to highlight specific topics on the website for immediate attention, the Divi blurb stands in the designer’s favor. Divi Advanced Blurb module is the extended version of the regular Divi module. It is built to eliminate all the limitations and create substantial design possibilities. The most notable features of this module are the content, badge, image & icon, button, Z-index, badge style, content style & custom spacing. However, designing an enticing blurb needs many secondary attributes that are already in this module. Let’s reveal what a designer can achieve with the Divi advanced blurb module.
Unlike any other Divi module, the features are split into three categories,
Divi Advanced Blurb Module Content Tab
The very first customization procedure takes place under the Advanced Blurb Module Content Tab. This tab serves as an essential requirement for further designing process. The most appealing features of the content tab are the content, badge, button, image & icon, and Item order. Nevertheless, a couple of Divi default attributes are added downside of the content tab. The Divi flash makes the journey super easy and faster for you to design with a unique look. So, let’s learn how these features can make you satisfied.
The content attribute of the content tab has the purpose of providing a title, subtitle & short description for a featured topic, product, or service.
One of the super attractive and extraordinary features of the Divi advanced blurb module is the Badge for Blurb. This setting has two different ways to add a badge to the design section, the Use badge line & Use badge icon. So, you are not limited as a designer; use icons or text whatever you desire. With the help of a badge icon, you can use an image and icon on a blurb module simultaneously.
To eliminate limitations, the Advanced Divi blurb module comes with a button which is missing in the regular blurb module. An alluring button helps accelerate the visitor’s curiosity and convinces them to click for further information. The Divi flash advanced blurb button setting is a super faster technique to add a button on the module alongside button custom text & URL features. However, you can define the opening of the button URL in a new tab mode or the same tab.
Image & Icon
The image & icon attribute lets you add an image or icon to the module according to the design requirements. Also, you are allowed to fix the image alignment & ALT text to accomplish the SEO needs. Playing with the icon alignment is also possible here. However, the image or icon container placement is the most premium attribute of this setting. The Image or Icon container placement allows the image or icon to be moved out of the content area and placed to the left, right, top or bottom side.
The “Item Order” is a great feature to define module ingredients position one by one from top to bottom. Let me make it more straightforward for you to understand; there is a moment when you seek to display the badge above the title, right? Here, you got the solution “the Item Order setting” to change to order values. Now, the process is the same for all components like the subtitle, content order & button. You will not get this option on the regular blurb module.
The link feature has been presented considering taking visitors from the blurb module to another page. The content tab link feature allows a designer to provide a custom link to the module.
The background features of the Content tab have multiple attributes to apply for a better layout. Such as background color, gradient color, image, and video features. And on top of these features, there are some settings to make each adjustment as you ever desired. Note, this background is applied to the entire module as the Divi default feature.
Admin Label of Divi Module provides the opportunity to modify the module name as you wanted. So, it doesn’t have to be the module’s actual name that generally shows on the wireframe view.
Advanced Divi Blurb Module Design Tab
The previous tab of the Divi advanced blurb has taken care of all the necessary parts to add elements to the module. Now, it’s time to adorn each of those ingredients over various stylish looks, and the design tab is considered the root of the beautification. Here, this tab of the Diviflash advanced blurb module stands in your favor, along with multiple pro features. Such as the Z-index, image, icon, content area, title, subtitle, content, content style, custom spacing & badge features are the most precious among others. Let’s discover the beauty of it.
According to w3schools- “The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.”
The Advanced Divi blurb module has a Z-index option for its ingredients. The image, title, subtitle, content, badge & button Z-index values are controlled from this feature. Also, under this feature, you get the option to define the Z-index value for each component based on desktop, tablet & mobile viewport individually.
The Blurb module imported the image attribute along with multiple purposes. Changing the image background color, border style, border width & color alongside the border corner rounding effect is completely effortless under the image feature. Not only that, the image setting of the Design tab lets you put box-shadow & image filter effects. Such as the hue, saturation, brightness, contrast, opacity, invert, sepia & blur effects, etc. The image filter blend mode gives a list of predefine image filer effects to save your time.
The Icon feature increases the icon beauty by implementing the attractive rounded corner effect, border style, width & color. Also, you have the authorization to provide various icon box shadow effects.
The Content Area attribute of the Divi advanced blurb module indicates modifying the entire content area alignment, background including gradient and image, border style, width & color. The content area feature also has the responsibility to provide corner rounding & box-shadow effects to the module.
The Title feature is an excellent combination of pro features to embellish the module title. This feature stands to modify the title background, heading level, font style & weight over a fantastic look. Moreover, you are allowed to decorate the title text alignment, color & size, letter spacing & line-height, along with text-shadow & corner rounded effects. Nevertheless, the title border style, width & color can be updated under this feature.
Each feature you will find under the title attribute is available for the Subtitle feature.
The Content attribute brings along a fantastic way to decorate the body font style & weight with an engaging look. Even the body text alignment, color, size, letter spacing & line-height get modified with a few stylish text-shadow effects under this setting.
Here, the Content Style Setting is working collaboratively with the Content Feature. After you are done decorating the content body text, the requisition comes forward to design the content body background & border. The Content Style lets you design the body background by implementing attractive color, gradient & image. Also, you are allowed to embellish the content body border style, width & color alongside the corner rounding effect.
The badge is a new feature introduced by Divi flash to the user. Suppose you are using a badge as an icon or text. You will find all the customization under this setting. You can have the background, alignment, color, and size for icons for your badge margin padding for the badge also available under this setting, including border & shadow settings.
Here, the Badge Font Setting is working collaboratively with the Badges text feature only. Here, you get every possibility to decorate the badge font over several styles. This attribute helps you to design the badge font style, weight, alignment & color. Moreover, you also can change the font size, letter spacing & line height alongside text shadow. Be aware that you get yourself an option to design the badge line 1 & 2 separately or together.
The Button attribute of the design tab is the most attractive feature for the Diviflash advanced blurb module. This option authorizes you to modify the button alignment, background color, font color, width & style. Furthermore, the text alignment, color, size, letter spacing & line-height can get adorned by various text-shadow effects under the button setting. This setting is well organized to design the button border style, width & color alongside corner rounded & box-shadow effects. Nevertheless, you can change the button layout by enabling the full-width button option.
The Divi advanced blurb module’s Spacing feature is not limited like the Divi default modules. It is considered the most prominent and crucial setting for defining a compatible distance between module ingredients. Let’s go into the deeper of this setting, and here you discover two different types of spacing attributes.
- Wrapper spacing
The wrapper spacing attribute lets you provide the wrapper margin & padding on the image, icon & button. Moreover, here, you have the standard wrapper margin & padding that hit the entire module.
- Content spacing
On the other hand, the Content spacing allows designers to put margin and padding in all the directions for the title, subtitle & content separately. Also, you are authorized to apply the margin & padding on the button.
As a designer, you would love to control the Diviflash advanced blurb module’s alignment, width, and height. Here, the sizing feature stands in your favor to increase or decrease your container’s width and height. You can set a min or max-height & width of the blurb.
Divi makes the spacing setting a default feature for the whole module. You will find two standard margins and padding settings that work the same for all Divi modules in this function.
The Border feature of the Advanced Blurb module can provide you a border corner rounding effect for the container. Also, you can customize the design by changing the border width, style, and color under it. However, don’t feel confused by just reading; try once and see if it’s easier than you thought.
This Box shadow affects the entire Divi Advanced Blurb module and has six distinct shadow effect styles with all the necessary settings.
The filter feature is awe-inspiring and supportive, among other Divi default features. Under this unique function, you will achieve numerous color effects for the entire Divi advanced blurb module. The filter setting is responsible for adding effects like hue, saturation, brightness, contrast, opacity, blur, and suchlike to your module. So, increase or decrease the value of these effects as you want them to your design.
The transform feature of the Divi Advanced Blurb module provides you five different types of transform facilities. For instance, transform scale, translate, rotate, skew, and origin options. Implementing these functions on your blurb module will give you better control over the section.
Animation effect setting exists in all the Divi default modules. It has seven different effects and other options to adjust the beauty of the animated section.
Divi Advanced Blurb Module Advanced Tab
All you want to achieve is possible under the Content and Design tab, so take the convenience as much as you can. However, Divi Advanced Blurb Module Advanced Tab intends to quench the developer’s thirst to have direct control over the module. Developers can precisely play with each element of this module by implementing CSS ID & Classes and other Custom CSS code. Further, The visibility, transitions, position, and scroll effects settings are included here to work fluently.
CSS ID & Classes
- CSS ID: The only purpose of the CSS ID section is to identify the ingredient separately while linking, scripting, or style the module.
- CSS Class: Assign any CSS classes to the element, separated by spaces, which can be used to assign custom CSS style from within your child’s theme or from Divi’s custom CSS inputs.
The Custom CSS section has three distinct CSS implementing areas in the Divi advanced blurb module. You have access to all the area to write down any CSS Code and target any particular area.
The visibility option of the advanced setting offers designers to conceal the advanced blurb module on particular devices.
Under the transition setting, you have features like Transition duration, Delay, and Curve Speed for better customization.
Here you can take complete control over the relative, absolute, and fixed position. This option is also available in every Divi module and works almost the same for all.
If you want to provide a scroll effect to your module, here you have the opportunity with the scroll effect setting. Under this setting, you get a Sticky position, scroll transform effects, vertical motion, and motion effect trigger functions like any other Divi modules.
Mobile: Any setting that has a mobile icon will allow you to customize according to devices. You can select different settings for desktop, tablet & Mobile.
Mouse: A mouse pointer in the setting will allow you to set a hover effect on this element.