Getting started
As a designer, you would never want to keep yourself attached to a specific type of divi blog layout style. Therefore, Diviflash introduced you to the divi blog carousel module to create a good layout for the blog archive pages. The range of advanced features of the divi blog carousel module makes it reasonable to be the designer’s favorite. For instance, the module’s most prominent features are the child item, post setting, carousel setting, advanced setting, item background, item inner & outer wrapper & spacing. Sounds a bit confusing, right? Today, you will go through an entire guideline to eliminate all your confusion about the module.
Child Item
You will discover a total of 11 different child items under the divi blog carousel module that is generally available on a blog archive page.
Those are-
1. Post Image
2. Post Title
3. Post Content
4. Read More Button
5. Post Author
6. Publish Date
7. Post Categories
8. Post Tags
9. Post Comments
10. Custom Text
11. Divider
However, it would help if you become more careful about these child items’ pro attributes that it carries along with itself. These features allow designers to decorate ingredients implemented in a particular child item. So, before jumping into the deep global attributes, let’s learn how the child features work.
The child item features are isolated into three categories,
+ Content Tab
+ Design Tab
+ Advanced tab
Child Item Content Tab
The Content tab of the child items brings the essential features to start creating designs from scratch. Remember, the structure of the content tab properties varies depending on the item. So, let’s get started to know each item in detail one by one.
First of all, you need to click on the plus icon and select element types from the list of 11. Every element presented here has some unique features, which are described below. Some common parts were told afterward.
Element Type – Image
Here you need to select the post image as a type to pull featured images of your blog post. After selecting the element type as an image, a new feature will show, letting you put the image outside the inner wrapper.
Overlay & Scale
Achieving the overlay & scale hover effect on the content image summons the necessity of the Overlay and Image scale feature. This attribute allows you to provide an overlay effect with two colors, the primary & secondary. Also, the direction of the overlay gradient color can be defined here. Finally, you are authorized to add an icon while making an overlay effect to the image. On the other hand, the image scale allows you to implement several scale animation effects for the post image.
Element Type – Title
First, under the element feature, you need to select the title as a child item. After that, the title element feature helps to fix the heading tag of the post title.
Element Type – Content
The content element feature of the content tab is presented to determine several settings. For example, the element provides the power to demonstrate post excerpt under the Use Post Excerpt setting. Also, the number of excerpt characters can be counted under this setting. Last but not least, never forget that you have an option to define whether a proportion of the main content or the excerpt would initially show for the post.
Element Type – Read More Button
First, you need to select the read more button under the element feature as a child item. Then, the read more button is presented for the designer to provide a custom name of the Read More Button based on the design’s requirement.
Icon Setting
Activating the icon settings of the read more button imports an icon after the button. This feature also has the power to play over the icon size & color.
Element Type – Post Author
The element setting of the post-author child item can bestow an outside inner wrapper for a better showoff. Also, displaying the author image alongside the perfect text size is super easy here. Of course, as a designer, you can hide the author’s text if required. Nevertheless, this setting demonstrates the post-author box in three different ways: the inline-block, inline & block.
Icon Setting
The icon settings are introduced here for the designer to place an icon before the author’s image. And designers can precisely change the icon size and color as well.
Element Type – Publish Date
The element of the publish date is deployed to add the outside inner wrapper. It also alters the post publish date format. Further, you can display the post publish date within three different styles, inline-block, inline & block.
Icon Setting
The icon settings are introduced here for the designer to place an icon before the post date. Lastly, designers can precisely change the icon size and color as well.
Element Type – Post Categories
The element of the post-category child item stands in the designer’s favor to apply the outside inner wrapper effect. Also, it fixes the way of displaying the post category among three different styles.
Icon Setting
The icon settings are dedicated for the designer to place an icon before the post category. Besides that, a designer can precisely change the icon size and color under this setting.
Element Type – Post Tags
The post tag contains the customizing features available for the post categories.
Element Type – Post Comments
The post comments child item has the proposition to add effects like the outside inner wrapper and inline-block, block & inline styles to the content comment section. In addition, depending on the requirement, designers can turn off the visibility of the comment text.
Icon Setting
The icon settings are imported to place an icon before the post comments. In addition, designers can precisely change the icon size and color under this feature.
Element Type – Custom Text
The custom text’s child item element is imported to apply the outside inner wrapper effect around the custom text. Nevertheless, designers can change the custom text to write something different that interacts instantly with the audience. Finally, this attribute helps to display the custom text under three different styles, the inline-block, inline & block.
Element Type – Divider
The divider child item of the divi blog carousel module consists of broad functionalities. These features allow the modification of the divider height, primary & secondary color, and color direction. First, however, the starting & ending point of the divider can be determined here.
Common Feature Of Content Tab
The variation of the content tab based on child items has been demonstrated above. Now, the standard features that are available for every child item have been explained below.
Background
The background of the Content tab possesses multiple features to fabricate a better blog page layout. For instance, the background color, gradient color, image, and video features. On top of these features, there are some settings to make each adjustment as you desire. Note, this background will apply to the entire item.
Admin Label
Admin Label of child item provides the opportunity to modify the item name as you wanted. So, it doesn’t have to be the child item’s actual name that generally shows on the wireframe view.
Child Item Design Tab
Now, it’s time to embellish all the ingredients implemented previously under the content tab. The design tab contains several helpful features like the image setting, text, text style, spacing, sizing, border, box-shadow, etc. The entire liability of these features is to give an enticing look to each child item.
Image Setting
The image setting of the design tab compresses the image into different sizes. Also, you get the favor to turn on the image force full-width attribute. Note down; this feature is only imported for the post image item.
Text
The text feature is presented to fix the text alignment with text-shadow effects. One thing you should remember, this feature only works with an item that contains text ingredients.
Text Styles
Modifying the text font style, width, Alignment & color is the initial responsibility of the text style feature. However, you can change the text size, letter spacing & line-height with this attribute. Note down; this feature only works with an item that contains text ingredients.
Spacing
Under the spacing feature, you will find two standard margins and padding settings that work the same for all the child items.
Sizing
As a designer, you would love to control the child item’s Alignment, width, and height, right? Here, the sizing feature stands in your favor to increase or decrease the item width and height. In addition, you can set a min or max height & width for the item.
Border
The Border feature of the child item design tab provides a border corner rounding effect for the container. Also, you can customize the design by changing the border width, style, and color. However, don’t feel confused by just reading; try once and see if it’s easier than you thought.
Box-shadow
This Box shadow affects the entire child item, and this feature consists of distinct shadow effect styles with all the necessary settings.
Filter
The filter feature is awe-inspiring and supportive, among other Divi default features. Under this unique function, you will achieve numerous color effects for a particular child item. 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. Not down; this feature applies only to the child item that consists of an image.
Transform
The transform feature of the child item gives you five different types of transform facilities. For instance, transform scale, translate, rotate, skew, and origin options. Implementing these functions on your items will give you better control over the design.
Child Item Advanced Tab
All you want to achieve is possible under the Content and Design tab, so take advantage as much as you can. However, the Child Item Advanced tab has an innovative intention to create something extraordinary for items. Here, designers can precisely play with each element added to the item by implementing Custom CSS code. Further, The visibility, transitions, position, and scroll effects settings are included to work fluently.
Note Down: All the features and effects you get here apply individually to each child item of the divi blog carousel module.
Global Features of Divi Blog Carousel Module
Now, this is the moment when you need to utilize the global feature of the divi blog carousel module. One thing about the global features should be in your concern; they impact the entire module simultaneously. like any other divi module, the structure of the Divi blog carousel module global features are separated into three categories,
+ Content Option
+ Design Option
+ Advanced Option
Divi Blog Carousel Module Content Tab
The divi blog carousel’s content tab presents a couple of initial & precious features for designers. The listed features of the content tab allow designers to apply several elements required to represent the module. Among those features, the post settings, carousel settings, advanced settings, item background are primarily notable. So let’s get to know how all these features work?
Post Setting
The post settings are counted as a first-line feature of the content tab. It’s a combination of all the advanced attributes imported to determine various components of the module.
- Post Count
The post count attribute brings the opportunity to play with the number of posts shown on the viewport.
- Display Post & Older By
The Display Post By option allows designers to find the way of displaying posts based on three facts; the recent blog, blog category & blog tag.
- Post Offset Number
The post offset number is a prominent feature considering a few design prospects. Under this attribute, you can give a numeric value of the recent posts left behind from the viewport. To be specific, when you seek to hide the first 2 or 3 posts from the viewport, you can provide that numeric value as a post offset number.
- Use Image As Background
Use Image As Background feature of the post setting lets designers apply the blog post featured image as the background of the blog post.
Carousel Setting
The Carousel setting is considered the backbone of the divi blog carousel module. Under this feature, you will discover a couple of advanced properties dedicated to amplifying the beauty of the divi blog carousel.
- Carousel Type
The “carousel Type” feature of the Carousel Setting lets designers determine the type of carousel provided in the module. There are two types of carousel available for designers; the Slide & Coverflow carousel. Let’s select one as your design requires.
- Max Slide Desktop, Tablet & Mobile
The Max Slide feature for the Desktop, Tablet & Mobile is the extreme beauty of this blog carousel module. Creating a different viewport for these three types of devices is just a matter of clicking under the max slide attribute. You know that the mobile & tablet screens are smaller than desktop. So, you get the chance to define the number of slides displayed on the several devices screen. Therefore, this feature is proven as super supportive in such circumstances. In other words, you measure these features like the responsive power of the divi blog carousel module.
- Spacing (px)
You may already feel the answer to why the Spacing “Px” feature is used for? Yes, you guessed it, this feature lets you fix a compatible distance among the divi blog pages. This property is measured in pixels.
- Speed (ms)
The Speed is a feature used for defining the time it takes for an item to appear in the middle of the blog carousel slides while clicking the arrow navigation. This property is measured in milliseconds.
- Centered Slides & Loop Effect
The Centered slides option allows you to start showing blogs from the center of blog carousel slides. On the other hand, the Loop effect creates an endless spherical blog exhibition of the blog carousel module.
- Autoplay
The Blog Carousel Autoplay feature is responsible for inventing an auto slider for carousel slides. Under this feature, you can specify the time required for the sliders to slide automatically. Also, you are allowed to activate the feature called push on hover. This feature enables slider autoplay to be turned off while hovering.
- Arrow & Dot Navigation
Activating the Arrow Navigation feature of the carousel setting produces the arrow sliders on the left & right sides of the divi blog carousel module. On the other hand, create a dot slider for each item at the bottom of the module by turning on the Dot navigation feature.
- Equal Height Item
The Equal Height item is a super supportive attribute when it comes to using different-sized blog items. This feature is for you to equalize the height of all blog posts.
Advanced Setting
The Advanced setting is considered the most notable feature of the divi blog carousel module. But remember, this feature is only available for the blog Coverflow carousel effect. Nevertheless, a few advanced carousel attributes are available under this setting, so let’s jump to know how these features work?
- Enable Slide Shadow
The enable slide shadow is a splendid way to give a shadow effect to the blog carousel module. This feature consists of two different coloring methods, such as shadow color dark & light.
- Slide Rotate in Degree
In many cases, designers seek to implement a compatible rotate effect on the carousel slider. In such cases, the Slide Rotate feature will be worthy enough to meet designers’ requirements. Therefore, the Slide Rotate property is measured by degree.
- Stretch Space Between Slide
You might already understand what and how this feature of advanced settings works? Yes, the name of this feature represents its task. So, for example, the Stretch Space Between Slides allows you to give an appropriate distance among the carousel sliders.
- Stredepth Offset
The Stredepth Offset feature is used for defining a compatible depth of the coverflow carousel effect. Unless you try and see the difference while changing the value of this feature, it might be hard to understand.
- Effect Multiplier
Here we come to an exciting feature of the advanced carousel setting, the Effect Multiplier. The responsibility of this feature is to multiply the value of all the attributes included in the advanced carousel setting. So let’s make it more clear, if you set the value two here, it will double the normal values of all the features.
Please note down, every feature under this setting is related to each other and requires a proper combination of values of all attributes.
Item Background
The item background feature of the divi blog carousel is presented to embellish each blog item’s background. In addition, you are allowed to implement a new color, gradient & image as the item background.
Background
The background features of the Content tab have multiple attributes to apply for a better layout view. 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 desire. Note, this background will apply to the entire module.
Admin Label
Admin Label of the divi blog carousel module provides the way to adorning the module name. Therefore, it doesn’t have to be the module’s actual name that generally shows on the wireframe view.
Divi Blog Carousel Module Design Tab
The moment you are done with the content tab of the divi blog carousel module, a requirement of the design tab comes forward. Each property is applied in the content tab; it’s time to provide them with a splendid look. The design tab is considered a workhorse in this regard. A list of comprehensive features of the design tab gives your hand relief while embellishing the blog carousel module layout. An explanation about how all these features working procedure has been given downward.
Alignment
The Alignment of the divi blog carousel module is imported to make the Alignment for the entire container. This feature affects the whole module with one click.
Item Outer Wrapper
The item outer wrapper feature provides a border corner rounding effect to the item outside of the container. Also, you can modify the border style, width & color over several shadow effects.
Item Inner Wrapper
Every customizing feature is included in the Item Outer Wrapper, also available for the Item Inner Wrapper setting. But there is a big difference between these two features; the inner wrapper applies to an item placed inside the container, and the outer wrapper does the opposite.
Arrow
The Arrow Setting of the design tab allows designers to make a stylish Arrow by adorning each ingredient bit by bit.
- Arrow Icon Color & Background
The Arrow icon color attribute is imported to apply a new arrow color. Meanwhile, the background feature is to modify the arrow background color.
- Arrow Position, Alignment & Opacity
The Arrow feature of the content carousel has a different attribute to adjust the arrow position between top, middle & bottom placement. Also, the Alignment can be fixed under left, right, center & justified directions. Finally, you can adjust the opacity level based on the design requirement.
- Circle Arrow
The Circle Arrow feature provides an excellent circle shape for the Arrow.
- Arrow Icon
Under Arrow Settings, you will have the opportunity to select your preferred icon for the arrow previous and next icons.
- Arrow Margin & Padding
The Arrow is considered a self-sufficient feature when it comes to the embellishment of an arrow icon. This feature provides two different margin & padding facilities for the previous and next Arrow icon.
Dots
The Dots attribute authorizes you to design the dots icon by changing its Alignment, position & color. Also, you can provide a unique look to the active dot icon by implementing the large active dot & active dot color features. Nevertheless, you can give the wrapper margin & padding around the navigation dots.
Sizing
As a designer, you would love to control the Alignment, width, and height of the divi blog carousel module, right? Here, the sizing feature stands in your favor to increase or decrease the module width and height. You can set a min or max-height & width for the module.
Spacing
Please don’t consider it a divi default spacing system; the Diviflash invented this spacing as an extraordinary feature for the divi blog carousel module. This feature authorizes you to apply margin & padding over the entire container & blog item inner wrapper of the module. Also, this spacing attribute can provide padding over the blog item’s outer wrapper. However, you can implement the general margin and padding for the entire module. So, apply proper margin & padding in all the ingredients’ directions, and fabricate a design that you ever wanted.
Transform
The transform feature of the divi blog carousel module provides you with five different types of transform facilities. For instance, transform scale, translate, rotate, skew, and origin options. Implementing these functions on your blog carousel will give you better control over the section.
Animation
Animation setting exists in all the Divi modules and works as a default feature. It has seven different effects and other options to adjust the beauty of the animated section.
Advanced Divi Tabs Module Advanced Tab
All you seek to achieve in your design is possible under the content and design tab. However, the advanced tab of the diviflash blog carousel module is standing beside designers to provide direct control over the module. As a designer, you 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 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 to 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.
Custom CSS
The Custom CSS section has three distinct CSS implementing areas in the Divi blog carousel module. You have access to all the areas to write down any CSS Code and target any particular location.
Visibility
The visibility option of the advanced setting offers designers to conceal the blog carousel module on particular devices.
Transitions
Under the transition setting, you have features like Transition duration, Delay, and Curve Speed for better customization.
Position
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.
Scroll Effects
If you want to provide a scroll effect to your module, 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 module.
NOTE:
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.
