Project

The Project Widget allows you to add, style, and control images anywhere on your Elementor-powered pThe Project Widget allows you to add, style, and manage project showcases anywhere on your Elementor-powered page. It’s ideal for displaying project details like titles, images, and categories with customizable styling options and responsive settings.

Whether you’re designing a portfolio, service page, team section, or case study showcase, the Project Widget makes it easy to present projects with precision and style.

Key Features:

• Add up to three responsive project items
• Choose from multiple layout styles
• Control visibility for different devices
• Customize box styling, spacing, border, and shadows
• Fully responsive and optimized

🚀 How to Enable the Project Widget

To start using the Project Widget, follow these steps:

The widget is now available in the Elementor editor.

Navigate to your WordPress dashboard.

Go to Topper Pack → Widgets.

Locate the Project widget from the list.

Toggle the switch to “On” to enable it.

🧩 How to Use the Project Widget in Elementor

Step 1: Add the Widget to Your Page

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

Step 2: Select Project Style

• After inserting the widget, scroll to the Style → Styles panel.
• Choose a layout style from the predefined style library. This controls how your projects are visually arranged and displayed.

Step 3: Upload and Configure Projects

• Under the Style → Project section:
  • Use the Enable Project toggle to activate each project slot (Project One, Two, Three).
  • Set visibility settings:
    • Use the Project Visibility dropdown to control where the project appears (Desktop, Tablet, Mobile).
    • Adjust the Gap and Direction (left/right alignment) for spacing and layout flow.
  • Add project titles and categories under the Content → Project Details section.

Step 4: Style the Project Box

• Go to the Style → Box section:
  • Choose Box Direction (row, column).
  • Set Alignment, Gap, and Background Type.
  • Adjust Border Type, Border Radius, and add Box Shadow.
  • Manage Margin and Padding for each side (top, bottom, left, right).

✅ Final Preview and Save

Once your project settings and style options are applied:

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