Grid Gallery

The Grid Gallery widget in Topper Pack allows you to display beautiful image grids in various layouts. You can showcase images manually or dynamically from post types with flexible animation and layout control.

🧩 How to Enable the Widget

1. Go to your WordPress dashboard.
2. Navigate to Topper Pack > Widgets.
3. Toggle the switch to enable the Grid Gallery widget.
4. Once enabled, it will be available inside the Elementor editor under the Topper Pack section.

1. Add the Widget

• Go to the Elementor panel.
• Search for “Grid Gallery”.
• Drag and drop the widget into your section.

2. Gallery Styles

• Under the Gallery Styles panel:
  • Select a layout from the available grid styles.
  • The layout affects how the images are displayed visually in columns and rows.

3. Gallery Content Options

a. Gallery Source:

You can choose how images are loaded:

• Manual – Add images manually one by one.
• Dynamic – Load images automatically from a selected post type.

b. Manual Gallery:

• Select Gallery Source → Manual.
• Add multiple image fields using the “Add Item” button.
• Set Columns and Row Height for spacing control.

c. Dynamic Gallery:

• Select Gallery Source → Dynamic.
• Choose:
  • Post Type (e.g., posts, custom post types).
  • Number of Items to display.
• This will automatically load featured images from your selected post type.

4. Gallery Option Settings

• Image Size – Choose from thumbnail, medium, large, or full.
• Image Animation – Choose a hover animation (e.g., fade, zoom, move).
• Animation Color – Set the overlay hover color.
• Enable Icon – Show an icon (e.g., eye icon) on hover.
  • Select your icon from the icon library.

5. Styling & Responsiveness

• Go to the Style Tab:
  • Adjust spacing (margin, padding).
  • Customize icon color, size, and hover effects.
  • Ensure the layout is mobile and tablet responsive.