Grid Hover Posts

Before setting up the Grid Hover Posts Widget, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll have access to all paid Elementor widgets, including the Grid Hover Posts Widget. Additionally, you can explore both free and pro widgets by filtering the selection options.

Introduction

The Grid Hover Posts Widget displays posts in a grid with hover effects, allowing easy customization.

Key Use Cases for the Grid Hover Posts Widget:

• Display posts in an interactive grid with hover effects for better engagement.
• The Grid Hover Posts Widget displays posts in a grid with hover effects, offering simple customization.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Grid Hover Posts Widget:

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Grid Hover Posts widget in the list.
• Toggle it on to enable the widget.
• Now, the Grid Hover Posts widget is ready to use!

Here’s how to add the Grid Hover Posts Widget in Elementor:

• Open the page where you want to add the Grid Hover Posts Widget.
  Launch the Elementor editor.
• In the Elementor panel, search for “Grid Hover Posts Widget.”
• Drag the widget to your desired section.
• The Grid Hover Posts Widget is now ready for customization.

How to Configure Grid Hover Posts Widget

• Make sure the Grid Hover Posts Widget is activated in your Elementor settings.
• Open a new page in WordPress.
• Add a page title and choose the Elementor Full Width template.
• Click Publish to save your changes.
• In the Elementor panel, search for “Grid Hover Posts Widget” and drag it onto the page.
• Adjust the grid layout, hover effects, post sources, and style as needed.

Configuring Grid Hover Posts Widget : A Step-by-Step Guide

Once the Grid Hover Posts Widget is added to your page, you can configure its settings under different tabs: Content,Style and Advanced.

Content Settings

In the content section, you’ll find plenty of customization options. I made a slight change by toggling on the filter button, while the rest remained unchanged as they weren’t needed for my design.

• Query: Define which posts to display by setting specific filters such as categories, tags, or post types.
• Layout: Adjust the layout of your posts, such as the number of columns and spacing between posts to suit your design.
• Settings: Fine-tune the overall widget settings, including pagination options, post limit, and more to enhance the user experience.
• Title: Customize the title of your posts, including typography, color, size, and spacing to match your website’s style.

• Excerpt: Style the excerpt text of your posts, controlling font settings, colors, and margins for consistency with your design.
• Taxonomy: Style how categories or tags appear for each post, with options to modify typography, color, and spacing.
• Meta: Adjust the appearance of post metadata, including author name, date, and comment count, to match your site’s look and feel.
• Read More: Customize the “Read More” link or button, including its color, typography, and hover effects for better interaction.

Style Settings

• Layout: Modify the overall layout of your posts, including adjustments to spacing, padding, and alignment to fit your design style.
• Thumbnail: Style the post thumbnails by adjusting their size, border radius, hover effects, and spacing to make them visually appealing.
• Title: Customize the typography, color, size, and spacing of the post titles to match your website’s aesthetic and improve readability.
• Excerpt: Style the post excerpts, allowing you to adjust font settings, colors, margins, and line height to ensure consistency with your design.

• Taxonomy: Customize how categories or tags are displayed, including typography, color, and spacing to match your style preferences.
• Meta: Adjust the appearance of metadata like the author name, publish date, and comment count, controlling their typography and colors.
• Meta Admin: Customize the style of metadata fields specifically for admin use, if needed, to fit the overall look of your design.
• Read More: Style the “Read More” button or link, customizing its typography, color, hover effects, and spacing for better interaction.

These options give you flexibility in designing your widget to suit your style. You can choose to explore and adjust these settings based on your needs.

Advanced Settings

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! You’ve successfully learned how to configure the Grid Hover Posts widget in Elementor to display posts in a grid layout with engaging hover effects.