The Blogs Widget is a powerful tool designed to showcase your latest posts in a dynamic, highly customizable carousel or static grid. It integrates perfectly with your existing WordPress content to keep your pages fresh and engaging.

Slider Settings #

The Slider Settings tab allows you to control the movement and interactivity of your blog carousel.

• Space Between Slides: Adjust the horizontal gap (padding) between each blog card.
• Enable Slider: Toggle this on to transform your blog posts into an interactive carousel.
• Loop: When enabled, the slider will return to the first post after reaching the end, providing a continuous scrolling experience.
• Autoplay: Allows the slider to move automatically without user interaction.
• Autoplay Speed (ms): Define how long each slide stays visible (e.g., 3000ms for 3 seconds).
• Pause on Hover: If active, the autoplay will stop when a user moves their mouse over a blog post.
• Show Navigation Arrows: Displays “Next” and “Previous” arrows for manual control.
• Show Pagination Dots: Displays dots at the bottom of the slider to indicate the number of slides.
• Pagination Clickable: When toggled on, users can click specific dots to jump directly to that slide.
• Slides Per View: Use the dropdown to set how many blog posts are visible at once (supports responsive settings for Desktop, Tablet, and Mobile).

Post Settings #

The Post Settings tab allows you to define the grid layout, dimensions, and the specific content elements visible on each blog card.

• Column: Choose the number of columns to display in your grid (responsive settings available for Desktop, Tablet, and Mobile).
• Grid Gap: Adjust the pixel spacing between each individual post card.
• Equal Height: Enable this to ensure all cards in a row maintain a uniform height, regardless of content length.
• Height: Manually set a custom pixel height for the blog post images.
• Image Size: Select the desired WordPress image resolution (e.g., Full, Medium, Thumbnail) to optimize loading speeds.
• Post Date: Toggle this on or off to show the date the article was published.
• Post Category: Choose whether to display the category label above the post title.
• Read More: Show or hide the call-to-action link at the bottom of the card.
• Read More Text: Customize the label for the link (default is “Read More”).
• Open Read More in New Tab: When enabled, clicking the link will open the post in a separate browser tab.
• Read More Icon: Upload or select an icon to appear next to your “Read More” text.
• Icon Size: Adjust the size of the chosen icon in pixels.

Query Settings #

The Query tab gives you full control over what content is pulled into the widget and how those items are organized.

• Source: Select the content type you wish to display. You can choose from Posts, Pages, Service (custom post type), or Portfolio (custom post type).
• Posts Per Page: Set the number of items to display. Enter -1 if you wish to show all available posts.
• Date: Filter your content based on when it was published. Options include:
  • All: Displays content from any time.
  • Past Day / Past Week / Past Month: Shows only recent content from these specific timeframes.
  • Past Quarter / Past Year: Useful for showing seasonal or annual highlights.
  • Custom: Allows for an exact date range selection.
• Order By: Define the criteria for sorting your content. You can sort by:
  • Date: Most recent or oldest first.
  • Title: Alphabetical sorting.
  • Menu Order: Uses the manual order set in the WordPress dashboard.
  • Last Modified: Shows recently updated content first.
  • Comment Count: Ranks posts by their popularity/engagement.
  • Random: Displays a different set of posts on every page refresh.
• Order: Choose between DESC (Descending, e.g., newest to oldest) or ASC (Ascending, e.g., oldest to newest).
• Ignore Sticky Posts: Toggle this On to treat “sticky” posts like regular content rather than forcing them to stay at the front of the list.

Style Tab #

The Style tab allows you to visually customize the blog cards to match your brand’s identity, providing deep control over backgrounds, spacing, and image effects.

Content Settings #

These options control the main container of the blog post information.

• Background Type: Choose between a Classic (solid color/image) or a Gradient background for the content area.
• Margin: Define the spacing around the content area in pixels (px). You can set unique values for Top, Right, Bottom, and Left.
• Content Overlapping (Desktop): Toggle this On to create a modern overlapping effect where the content box partially covers the post thumbnail on desktop screens.

Thumbnail Overlay #

Apply a decorative layer over the post featured images to improve text readability or add brand colors.

• Background Type: Set a Classic or Gradient overlay that appears on top of the post thumbnail. This is ideal for adding a subtle color tint to all blog images for a consistent look.

Title #

The Title section allows you to customize the appearance of post headlines to ensure they match your brand’s typography.

• State (Normal/Hover): Set different colors for standard viewing and mouse-over effects to improve interactivity.
• Color: Choose a specific color or a global theme color for the title text.
• Typography: Access full controls for font family, size, weight, and line-height for desktop, tablet, and mobile devices.

Meta #

The Meta section allows you to style the post information, such as categories and dates, to maintain a clean and professional look.

• State (Normal/Hover): Switch between these tabs to define different colors for standard viewing and interactive mouse-over states.
• Color & Typography: Customize the text color and font properties (family, size, weight) for the general meta information.

Date Specific Styling #

• Typography: Set a unique font style specifically for the date element.
• Background Type: Apply a solid color or gradient background specifically to the date box to make it stand out.
• Color: Adjust the text color of the date.
• Box Shadow: Add a shadow effect to the date container to create depth and a modern “floating” appearance.

Read More #

Customize the appearance and positioning of the “Read More” button to ensure it stands out as a clear call-to-action.

• Typography: Access full controls to set the font family, size, and weight for the “Read More” text.
• Normal/Hover States: Define separate color profiles for standard viewing and mouse-over interactions to enhance user engagement.
• Color & Icon Color: Independently adjust the hues for both the text and the accompanying icon.
• Background Type: Apply a solid color or gradient background behind the button text.
• Border Type & Radius: Choose from various border styles (Solid, Double, etc.) and adjust the corner roundness in pixels.
• Padding: Precisely control the internal spacing (Top, Right, Bottom, Left) of the button for a balanced look.

Navigation #

The Navigation section provides comprehensive controls for styling the carousel’s directional arrows to match your site’s interface.

• Alignment: Set the vertical or horizontal alignment for the navigation arrows.
• Normal/Hover States: Define separate colors and backgrounds for standard viewing and mouse-over effects.
• Color & Background: Customize the icon color and the background shape for the navigation buttons.
• Border Type & Radius: Choose from various border styles and adjust corner roundness (e.g., set to 50% for circular buttons).
• Box Shadow: Add depth to your navigation buttons with customizable shadow effects.
• Size: Use the slider to increase or decrease the overall scale of the navigation arrows.
• Padding: Control the internal spacing within the button container.
• Button Spacing (Previous/Next): Fine-tune the horizontal positioning of each arrow to move them further apart or closer to the content.

Pagination #

The Pagination section allows you to customize the slider’s navigation dots to perfectly match your site’s interface.

• Color & Active Color: Set distinct colors for the standard pagination dots and the dot representing the currently active slide.
• Width & Height: Use the sliders to precisely define the dimensions of the pagination indicators.
• Spacing Between: Control the horizontal gap between each dot.
• Border Radius: Adjust the roundness of the indicators, allowing for styles ranging from sharp squares to perfect circles.
• Opacity & Active Opacity: Define the transparency levels for inactive dots versus the active slide indicator for better visual hierarchy.