Blogs Widget

The Blogs Widget is a powerful and versatile tool for displaying your blog posts in a customizable grid or slider layout. It provides extensive control over the query, layout, and styling of your post listings.

Content Configuration #

Slider Settings (Optional): #

If you want to display your posts in a slider instead of a static grid, configure these options:

• Double Slider: (Likely a specific slider mode/effect).
• Loop: Enable to allow the slider to loop continuously.
• Autoplay: Enable automatic sliding.
• Autoplay Speed (ms): Set the delay between slides in milliseconds.
• Pause on Hover: Pause autoplay when the user hovers over the slider.
• Show Navigation Arrows: Enable prev/next buttons.
• Show Pagination Dots: Enable navigation dots.
• Pagination Clickable: Allow users to click on dots to navigate.
• Slides Per View: Set the number of posts visible at once.
• Space Between Slides: Set the gap between slides.

Query Settings: #

Control which posts are displayed and in what order.

• Source: Typically set to ‘Posts’.
• Posts Per Page: Define the number of posts to show. Set to -1 to show all posts.
• Date: Filter posts by a date range (e.g., ‘All’, ‘Past Month’).
• Order By: Choose how to order posts (e.g., Date, Title, Random).
• Order: Choose DESC (newest first) or ASC (oldest first).
• Ignore Sticky Posts: Choose whether to exclude posts stuck to the front page.

Post Settings: #

Toggle the visibility of specific post elements.

• Columns: Set the number of posts per row in a grid layout.
• Equal Height: Make all postcards the same height.
• Image Size: Choose the WordPress image size for the post thumbnail (e.g., Full, Original, Large, Medium).
• Post Date: Show or hide the publication date.
• Post Category: Show or hide the assigned categories.
• Read More: Show or hide the “Read More” button/link.
• Read More Text: Customize the text of the “Read More” button (e.g., READ MORE +).

Style Tab #

The Style tab offers deep styling options for every part of the blog post card.

You can style the following parts:

• Content / Card Style: Style the main container for each post.
  • Background Type: Set a solid, gradient, or image background for the entire card.
  • Border Type & Radius: Control borders and round the corners.
  • Box Shadow: Apply a shadow effect.
  • Margin & Padding: Control outer and inner spacing.
  • Content Overlay: Add a color overlay on the card, useful for text readability over images.
• Thumbnail / Image: Style the featured image.
  • Image Fit: Control how the image fills its container (e.g., Cover, Contain).
  • Border Radius: Round the corners of the image.
  • Thumbnail Overlay: Add a color overlay on the image itself.
• Title: Style the post title.
  • Color: Set the color for normal and hover states.
  • Typography: Control font family, size, weight, and line height.
• Meta: Style the post meta information (date, category).
  • Color & Typography: Style the text of the meta data.
  • Background Type: Add a background to the meta container.
• Read More: Style the “Read More” button/link.
  • Typography: Style the button text.
  • Color & Icon Color: Set text/icon colors for normal and hover states.
  • Background Type: Set a background for the button.
  • Border Type & Radius: Add and style a border.
  • Padding: Control the internal spacing of the button.
• Navigation (Arrows): If using a slider, style the navigation arrows.
  • Color & Background: Set colors for normal/hover states.
  • Size: Define the button dimensions.
  • Border & Border Radius: Style the button borders.
  • Padding & Spacing: Adjust internal spacing and the distance of the arrows from the slider.
• Pagination (Dots): If using a slider, style the navigation dots.
  • Color & Active Color: Set colors for inactive and active dots.
  • Width & Height: Control the size of the dots.
  • Spacing Between: Adjust the gap between dots.
  • Border Radius: Make the dots circular.
  • Opacity & Active Opacity: Control transparency.