Blog

The Blog widget of Topper Pack helps you display posts dynamically with multiple modern layout styles, powerful query settings, and interactive meta options. Follow these steps to configure and customize it:

🚀 How to Enable the Image Widget

To start using the Image Widget, follow these steps:

1. Navigate to your WordPress dashboard.
2. Go to Topper Pack → Widgets.
3. Locate the Blog widget from the list.
4. Toggle the switch to “On” to enable it.
5. The widget is now available in the Elementor editor.

Step 1: Add Blog Widget

• Search for “Blog” under Elementor widgets.
• Drag and drop the Blog widget (marked with the TP icon) into your section.

Step 2: Choose Style

• Under the Styles panel, choose from multiple blog design styles.
• Click on any layout to preview it live.

Step 3: Configure Post Query

• Expand the Post Query section.
• Set your preferred options:
  • Post Type: Choose from Posts, Pages, or CPT.
  • Filter by Author: Add specific author(s).
  • Display Item: Define how many posts to show.
  • Order Settings: Choose Post Order (e.g., Date) and Order By (ASC/DESC).
  • You can include or exclude posts by ID, use meta filters, or set date ranges.
  • Enable Pagination if required.

Step 4: Customize Post Options

• Go to the Post Options section:
  • HTML Tag: Select HTML heading level (e.g., H3).
  • Title Length: Limit post title characters.
  • Enable Description: Toggle ON to show excerpt.
  • Content Length: Set content excerpt length.
  • Enable Post Meta: Toggle ON to display metadata like Date, Author.
  • Date Format: Choose the desired display format.

Step 5: Post Meta in Image

• Enable Image Meta if you want metadata to appear over the featured image.
• Select which meta info to show (e.g., Date, Author).

Step 6: Enable and Customize Button

• Turn on the Enable Button toggle to show a call-to-action button (e.g., “View All”).
• Choose Button Animation style.
• Add custom Button Text.
• Optionally, toggle Show Icon and select an icon for your button.

Step 7: Add Meta Icons

• Under the Meta Icons tab, you can assign icons for:
  • Date
  • Author
  • Comment Count

Step 8: Configure Image Options and Layout

• In the Options panel:
  • Image Animation: Choose entrance animation for featured images.
  • Color: Apply an overlay color or effect.
  • Columns Control: Set column layout for different devices:
    • Desktop
    • iPad Pro
    • Tablet

Step 9: Style Tab

• Go to the Style tab to customize visual appearance:
  • Box: Adjust spacing and borders.
  • Image: Style the featured image.
  • Meta Content and Image Meta Content: Customize typography, color, spacing.
  • Title: Set typography, color, padding, margin.
  • Description and Button: Fine-tune font styles and spacing.