View Categories

Divi Blog Carousel Module Overview

8 min read

Rather than a typical blog grid, using a carousel for displaying your blog posts can enhance the user experience of your website. That’s why DiviGear presents the dynamic and mobile responsive blog carousel module, where you can create multiple types of carousel to show off your blog.

In this guide, we will go through what the DiviGear Blog Carousel module offers you.

Creating a Blog Carousel

To create the blog post carousel, you only have to select the DiviGear Blog Carousel module. A generic blog carousel will be created using your blog posts. All that’s left to do is to customize the blog carousel according to your needs.

Further down this content, we will show you how to customize the blog carousel to maximize its potential.

Customizing the Blog Carousel

Other than a generic blog post carousel, the Divi Blog Carousel Settings panel should appear. There are three tabs in this panel: Content, Design, and Advanced.

Each of these tabs offers distinctive customization options to give your blog carousel a unique look.

Content

The content tab has options to personalize the contents of the blog carousel divided into multiple sections.

Content

  • Blog Posts Count: Define the number of blog posts to display in the carousel.
  • Posts By Type: Choose the type of posts you want to display. You can display recent posts, popular posts, or posts from a certain category. 
  • Order By: If you choose to display the recent posts, you can pick the order you want to display your blog post. You have the option to display from newest to oldest, oldest to newest, or random.
  • Include Categories: If you want to display your posts by category, you can choose the categories you want to include.
  • Posts Offset Number: Pick the number of posts you want to skip in the blog carousel.

Elements

  • Show Featured Image: Toggle this option to “Yes” to show featured images in the blurb.
  • Show Excerpt: Toggle this option to “Yes” to show the post excerpt in the blurb.
  • Excerpt Length: If you choose to show the excerpt, you can also determine the character length of it.
  • Show Categories: Enable this option to display the post category in the blurb.
  • Show Author: Enable this option to show the author in the post blurb.
  • Show Date: Turn this option on to display the post date in the blurb.
  • Meta Date Format: If you choose to show the date, you can also select its format.
  • Show Comment Count: Toggle this option to “Yes” if you want to show the comment count.
  • Read More Button: Enable this to add a “Read More” button to the blurb.

Carousel Settings

  • Show Items xLarge: Define the number of blurbs to display at a time in extra-large devices.
  • Show Items Desktop: Define the number of blurbs to display at a time on desktop devices.
  • Show ItemsTablet: Define the number of blurbs to display at a time in tablets.
  • Show Items Mobile: Define the number of blurbs to display at a time on mobile devices.
  • Multiside: Turn this option on to slide multiple carousel items at once. 
  • Item Spacing: Determine how far apart each carousel item will be. You can also set different spacing for different devices.
  • Transition Duration: Set the time of the transition between slides.
  • Arrow Navigation: Enable arrows to be used for navigation.
  • Dot Navigation: Enable dots to be used for navigation.
  • Center Slide: Activate this to start from the center of the slides.
  • Loop: Select whether to loop between slides.
  • Autoplay: Select this option to have the slides transition automatically. After enabling this, you can also define the speed of the auto-transition and whether it will pause on hover.
  • Equal Height: Make all the blurbs’ heights the same.
  • Vertical Align: If you don’t want the blurbs’ heights to be equal you can set the vertical alignment of the blurbs.
  • Slide Effect: Choose the style of the carousels. You can go for the classic slide option or the more dynamic 3D coverflow option.
  • Rotate: Make the coverflow carousels stay at a certain angle.
  • Slide Shadow: Enable to add a shadow effect to the carousel.

Background

Customize the background of the blog carousel.

Design

The design tab includes features that will let you personalize the look and feel of the carousel. 

Image Style

  • Select Image Size: Select the size of the carousel image.
  • Rounded Corners: Adjust the sharpness of the image corners.
  • Border Styles: Adjust the width, color, or style of each border separately, or change them all at once.

Overlay Styles

  • Image Overlay: Displays an image overlay when hovered.
  • Color: Set the color of the image overlay.
  • Use Custom Icon: Enable to use an icon on the image overlay.
  • Overlay icon Color: Select a different color for the overlay icon.

Title

  • Title Heading Level: Select the HTML tag for the blog title.
  • Title Font: Various font styles are available for the blog titles.
  • Title Font Weight: Increase or decrease the font thickness.
  • Font Style: Blog titles can be italicized, uppercased, underlined, or strikethrough. You can also select the color and style of the underline and the strikethrough. 
  • Title Text Alignment: Determine the position for the blog title.
  • Title Text Color: Pick a different color for the titles.
  • Title Text Size: Select the proper font size for the titles.
  • Title Letter Spacing: Indicate how much space should be between each letter in the blog title.
  • Title Line Height: Specify how far apart the blog title lines should be.

Meta

  • Use Meta Icon: Enable the use of icons for author, date, categories, etc.
  • Meta Position at Bottom: Enable to put the author, date, categories, etc on the the bottom.
  • Meta Font: You can select the font for the meta items.
  • Meta Font Weight: Adjust the thickness of the font for the meta items.
  • Meta Font Style: You can italicize, uppercase, underline, or strikethrough meta item fonts. You can also select the color and style for the underline and strikethrough. 
  • Meta Text Alignment: Select the positioning for the meta items.
  • Meta Text Color: Change the color of the meta item fonts.
  • Meta Text Size: Choose the appropriate font size for the meta.
  • Meta Letter Spacing: Specify how much space should be left between each letter for the meta items.
  • Meta Line Height: Indicate how far apart the meta item lines should be.
  • Author on Top: Enable to display the author name over the carousel image. 
  • Author Background Color: Choose a different background color for the author.
  • Author Top Font: Choose a different font when you choose to display the author on top.
  • Author Top Font Weight: Adjust the thickness of the font for the author’s name when displayed on top.
  • Author Top Font Style: The author’s name (when on top) can be italicized, uppercased, underlined, or struck through. Underlines and strikethroughs can also be styled and colored. 
  • Author Top Text Alignment: Select the positioning for the author name on top.
  • Author Top Text Color: Change the color of the fonts for the author’s name on top.
  • Author Top Text Size: Choose the appropriate font size for the author’s name when it’s shown on top.
  • Author Top Letter Spacing: Indicate how much space should be left between each letter for the author’s name when it’s shown on top.
  • Author Top Line Height: Set the distance between the lines of the author’s name at the top.
  • Date on Top: Enable to show the post date over the carousel image.
  • Author Background Color: Choose a different background color for the author.
  • Date Separator Color: Choose a different color for the date separator.
  • Date  Font: Choose a different font when you choose to display the author on top.
  • Date Font Weight: Adjust the thickness of the font for the date when displayed on top.
  • Date Font Style: The date (when on top) can be italicized, uppercased, underlined, or struck through. Underlines and strikethroughs can also be styled and colored. 
  • Date Text Alignment: Select the positioning for the date on top.
  • Date Text Color: Change the color of the fonts for the date on top.
  • Date Text Size: Choose the appropriate font size for the date when it’s shown on top.
  • Date Letter Spacing: Indicate how much space should be left between each letter for the date when it’s shown on top.
  • Date Line Height: Set the distance between the lines of the date at the top.

Content

The same options as the Title.

Read More

  • Alignment: Position the “Read More” button.
  • Fullwidth Button: Enable to use a fullwidth button.
  • Button at the Bottom: Enable to put the button at the bottom.
  • Use Icon: Enable to use an icon with the button.  
  • Background: Choose a different background for the button.
  • Read More Font: Choose a different font for the “Read More” button text. 
  • Read More Font Weight: Adjust the thickness of the “Read More” button text..
  • Read More Font Style: The button text can be italicized, uppercased, underlined, or struck through. Underlines and strikethroughs can also be styled and colored. 
  • Read More Text Alignment: Select the positioning for the button text.
  • Read More Text Color: Change the color of the fonts for the button text.
  • Read More Text Size: Choose the appropriate font size for the button text.
  • Read More Letter Spacing: Indicate how much space should be left between each letter of the button text.
  • Read More Line Height: Set the distance between the lines of the button text.
  • Read More Rounded Corners: Adjust the sharpness of the “Read More” button corners.
  • Read More Border Styles: Change the width, color, and style of each of the borders separately or altogether.  

Next & Prev Button

  • Use Custom Prev Icon: Enable to use of a custom icon for the previous arrow button.
  • Use Custom Next Icon: Enable to use of a custom icon for the next arrow button. 
  • Next & Previous Color: Change the color for the next and previous button icons.
  • Next & Previous Background Color: Change the background color of both buttons.
  • Show on Hover: Enable this option to show the buttons only appear on hover.
  • Position: Choose the appropriate position for the buttons.
  • Button Size: Adjust the size of the background of the button.

Dots

  • Alignment: Reposition the dots.
  • Size: Adjust the size of the dots.
  • Color: Define the color of all the dots.
  • Active Color: Use a different color to indicate the active carousel dot.

Border

Adjust the sharpness of the corners as well as the width, color, and style of the border of all the carousel items.

Custom Spacing

Add custom padding and margins for each component of the carousel separately. You can also set different spacing for different devices.

Sizing

The blog carousel can be adjusted in terms of width, height, and alignment.

Spacing

Add custom padding and margin to the entire blog carousel.

Box Shadow

This feature allows you to add a box shadow to the entire heading module and customize it.

Advanced

This tab is the default in every Divi module that lets you add custom CSS codes, scroll effects, and more.  

Is There Anything Else You Need To Know?

Please contact support@divigear.com if you need any additional assistance with the DiviGear Blog Carousel module.

Submit a Comment

Your email address will not be published. Required fields are marked *