Advanced Accordion Image

The Advanced Image Accordion widget from the Topper Pack plugin is a dynamic and interactive way to showcase content with image and title transitions. This widget allows you to create engaging accordion layouts with images, hover/click interactions, icons, and more.

🚀 How to Enable the Advanced Image Accordion 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 Advanced Image Accordion 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 the Widget

• Search for “Advanced Accordion Image” in the Elementor widget panel.
• Drag and drop it onto your desired section.

Step 2: Content Settings

1. Button Styles:

• Choose the predefined visual style from the dropdown (e.g., Style One, Style Two).

2. Interaction Type:

• Select how the accordion interacts:
  • Hover: Changes on mouseover.
  • Click: Changes on user click.

3. Accordion Items:

• Use the repeater field to add multiple accordion tabs.
• Each item has the following fields:
  • Active by Default: Toggle to make this tab open by default.
  • Enable Icon: If you want an icon shown alongside the title.
  • Image: Upload an image to display for that tab.
  • Title: Provide the main headline for the item.
  • Short Description: Add a description or supporting text.
  • Enable Button: Add a CTA (Call to Action) button if required.

4. HTML Tag:

• Set the HTML heading tag (H1 to H6) for SEO and structure.

Step 3: Style Tab

Image Box Style:

• Flex Direction: Choose horizontal (Row) or vertical (Column) layout.
• Item Flex: Adjust how much space each item should take.
• Item Gap: Control spacing between each accordion tab.
• Height: Set the total height for the accordion box.

Background, Border, and Shadow Options:

• Set a background color or image.
• Define border type, radius, and box shadow to enhance styling.

Content Box Style:

• Modify typography, padding, margin, and alignment for the content inside.

Content Style:

• Set typography styles for Title and Description.
• Adjust spacing and font weights to match your design.

TPP Button Style:

• Customize button colors, typography, background, border, and padding.

Icon Style:

• Configure icon size, color, background color, padding, and margins.