List Item

The Advanced List Item widget in the Topper Pack plugin allows you to display feature-rich, styled list items with icons, numbers, descriptions, and custom styles. This widget is perfect for service listings, feature highlights, or any informational layout that benefits from organized visual representation.

🌟 Widget Overview

• Widget Name: Advanced List Item
• Category: Topper Widgets
• Use Case: Display services, features, steps, or tech support in a visually appealing layout.
• Drag & Drop Support: ✅
• Global Styling Support: ✅

🧩 How to Enable the Widget

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

➕ How to Use (Drag & Drop)

1. Open a page in Elementor.
2. Search for Advanced List Item.
3. Drag the widget into your section.
4. Begin customizing!

🛠 Widget Settings

🖼️ Choose Style

• Select from multiple ready-made designs with unique layouts.

🔠 Content Settings

• Enable Icon: Toggle to display an icon before the text.
• Icon Upload: Upload SVG or select from icon libraries.
• Title: Add your main title (e.g., “Ultimate Technology Support”).
• Enable Title Link: Option to make the title clickable.
• Title HTML Tag: Choose HTML hierarchy for SEO (H2, H3, etc.).
• Enable Description: Toggle to show a description field.
• Description: Add paragraph-style content below the title.
• Enable Count: Show item numbers like 01, 02, etc.
• Count: Define a manual count or auto-increment.

🎨 Style Tab

• Icon Styling:
  • Width, Height, Min Width
  • Background Type (classic, gradient)
  • Typography & Color
  • Border Type, Radius, Margin, and Padding
• Box Styling:
  • Background type
  • Border radius and shadows
• Title & Description Styling:
  • Typography
  • Color
  • Spacing controls

✅ Best Practices

• Use the Count option for step-based or instructional layouts.
• Combine icons and titles for better user comprehension.
• Keep the description concise for clarity and a clean UI.
• Use global style controls for consistency across your site.