The Service Widget allows you to showcase your services in a clean, modern, and fully customizable layout with icon support, descriptions, animation, and links.
🚀 How to Enable the Service Widget
To start using the Image Widget, follow these steps:
Navigate to your WordPress dashboard.
Go to Topper Pack → Widgets.
Locate the service widget from the list.
Toggle the switch to “On” to enable it.
The widget is now available in the Elementor editor.
🔍 Step 1: Add the Widget
Search for “Service” in the Elementor widget panel.
Drag the Service widget (TP icon) into your desired section.
🧩 Step 2: Choose a Style
Under the Content → Styles panel, select a prebuilt layout from the grid.
Each style provides different visual arrangements (icon top, side, boxed, overlay, etc.).
Hover on a style to preview it.
✍️ Step 3: Add Service Items
Under Service Content, you can manage each service card using the Repeater List.
✅ For each item:
Show Count: Toggle to show a numeric order (1, 2, 3…).
Icon: Choose an icon from the library or upload an SVG.
Show Subtitle: Optionally enable a subtitle field.
Title: Add your service title (e.g., “Development Services”).
Enable Title Link: Toggle to make the title clickable.
Title Link URL: Add the URL for the service detail page.
Description: Write a short summary or feature of the service.
Enable Button: Toggle to show a “Read More” or CTA button.
Show Icon for Button: Add a small icon next to the button text.
Button Text & URL: Customize the button label and destination link.
🎨 Step 4: Customize Content Appearance
Under Service Content:
Icon Animation: Choose from Bounce, Slide, Zoom, Flip, etc.
Color Shape: Optional shape background on hover.
Image Shape: Enable hover effect shape or custom image.
Layout Options:
Columns on Desktop/iPad Pro/Tablet: Set number of items per row based on device screen size (e.g., 3/3/2).
🛠️ Step 5: Style Options
Switch to the Style Tab to control design details.
🔲 Box Styling
Alignment (left/center/right)
Background Type
Border Type & Radius
Box Shadow
Margin / Padding
💠 Icon
Size, color, background, spacing, and hover effects.
Service
The Service Widget allows you to showcase your services in a clean, modern, and fully customizable layout with icon support, descriptions, animation, and links.
🚀 How to Enable the Service Widget
To start using the Image Widget, follow these steps:
🔍 Step 1: Add the Widget
Service” in the Elementor widget panel.🧩 Step 2: Choose a Style
✍️ Step 3: Add Service Items
Under Service Content, you can manage each service card using the Repeater List.
✅ For each item:
🎨 Step 4: Customize Content Appearance
Under Service Content:
Layout Options:
🛠️ Step 5: Style Options
Switch to the Style Tab to control design details.
🔲 Box Styling
💠 Icon
📝 Card Content
🔢 Count
🔘 Button