Item Box

The Item Box Widget allows you to add, style, and manage customizable item boxes anywhere on your Elementor-powered page. It’s perfect for showcasing products, features, services, or other content in a visually appealing box layout, with options for icons, images, titles, descriptions, and buttons, all with customizable styling and responsive settings.

Whether you’re designing a product showcase, feature list, or content section, the Item Box Widget makes it easy to present items with precision and style.

Key Features:

• Display items in a customizable box layout
• Add icons, images, titles, descriptions, and buttons
• Customize box styling, typography, and colors
• Arrange boxes in grid or list layouts
• Fully responsive and optimized

🚀 How to Enable the Item Box Widget

To start using the Item Box Widget, follow these steps:

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

🧩 How to Use the Item Box Widget in Elementor

Step 1: Add the Widget to Your Page

• Open your desired page in the Elementor Editor.
• Search for “Item Box” in the Elementor widget panel.
• Drag and drop the Item Box Widget TP widget onto your page canvas.
• 🔄 Tip: It includes the TP badge, indicating it’s from the Topper Pack.

🖼️ Choose Style

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

Step 2: Configure Item Box Settings

• Under the Content → Items section:
  • Add items by clicking “Add Item” to create multiple boxes.
  • For each item:
    • Upload an Image or select an Icon to display at the top of the box.
    • Set Title (e.g., “Product Name”) and Description (e.g., “Product details”).
    • Add a Button Text (e.g., “Learn More”) and Button Link (e.g., a URL).
• Under the Content → Layout section:
  • Set Layout Type (e.g., Grid or List) to arrange the boxes.
  • Adjust Columns (e.g., 3 columns for a grid layout) for grid layouts.

Step 3: Style the Box Content

• Under the Style → Content section:
  • Adjust Typography for the Title and Description to set font size, weight, and style.
  • Set Color for the title, description, and button text.
  • Adjust Margin and Padding to control spacing within each box (e.g., top, right, bottom, left).

Step 4: Style the Button

• Under the Style → Button section:
  • Set Button Background Color, Text Color, and Hover Color for interactive effects.
  • Customize Typography for the button text.
  • Adjust Button Border Type, Border Radius, and Padding for better presentation.

Step 5: Style the Box Container

• Under the Style → Box section:
  • Set Background Type (e.g., Classic) and customize Background Color.
  • Adjust Border Type, Border Radius, and Box Shadow for each box.
  • Set Padding and Margin to control the overall spacing of the boxes.

✅ Final Preview and Save

Once your Item Box Widget settings and style options are applied:

• Click Preview Changes to see how it looks.
• Hit Publish or Update to save your page.