# Add New Service

This section helps you describe the purpose, features, and benefits of each service you offer on your website. Providing clear and detailed service information builds trust and helps customers make informed decisions.

![](https://content.gitbook.com/content/vO76m9boh6U15JnTSDPM/blobs/XDVz0tQZc6coJBD9YjeV/image)

Use this section to add and configure a new service item on your website.

#### **Step 1: Access the Service Features Section**

Go to:\
**WordPress Dashboard → Services → Add New**\
Scroll down to the **Service Features** section.

***

#### **Step 2: Add a New Feature**

Click the **“Add Feature”** button to insert a new feature block.

Each feature includes the following fields:

<table><thead><tr><th width="187">Field</th><th>Description</th></tr></thead><tbody><tr><td><strong>Feature Icon</strong></td><td>Upload or select an icon to visually represent the feature. Recommended: use SVG or PNG format for clarity.</td></tr><tr><td><strong>Feature Image</strong></td><td>(Optional) Upload a feature-specific image if icons are not sufficient.</td></tr><tr><td><strong>Feature Description</strong></td><td>Enter a brief and clear description of the feature. For example: "24/7 Customer Support", "Free Installation", etc.</td></tr></tbody></table>

***

#### **Step 3: Manage Features**

* Click **“Add Feature”** to include more features.
* Click **“Remove”** to delete an existing feature.

There is no limit to the number of features you can add.

***

#### ✅ **Final Step**

Once all features are added and configured:

* Review your entries.
* Click **Publish** or **Update** to save the service with the features displayed.

#### **Edit with Elementor (Visual Editor)**

The **Elementor Visual Editor** allows you to design your service page using a simple drag-and-drop interface. You can customize layouts, add media, and style your service details without coding.

***

#### **Open Elementor**

1. Save the service as a **Draft** or **Publish** it.
2. Click the **“Edit with Elementor”** button located at the top of the page.

***

#### **Design with Widgets**

Use Elementor widgets to customize your service layout.\
You can add:

* Headings and text blocks
* Icons and images
* Service highlights and call-to-action buttons
* Columns and section backgrounds

Each widget can be styled individually for colors, spacing, and typography.

***

#### **Save Changes**

Once you’ve completed the design:

1. Click the **“Update”** button to save your changes.
2. Use **Preview** to review your service layout before publishing.

***

#### 🧩 **Add Service (via Elementor Widget)**

Some themes include a custom **“Add Service”** widget that dynamically displays your created services within any page built using Elementor.

***

#### **Widget Settings**

<table><thead><tr><th width="170">Field</th><th>Description</th></tr></thead><tbody><tr><td><strong>Service Type</strong></td><td>Choose the display style or layout type for the service (e.g., Type 1, Type 2, etc.).</td></tr><tr><td><strong>Show Price</strong></td><td>Toggle ON/OFF to show or hide the price in the layout.</td></tr><tr><td><strong>Button Text</strong></td><td>Enter custom text for the call-to-action button (e.g., “Book Now”, “Learn More”).</td></tr></tbody></table>

***

#### 📋 **Service Listing Settings**

These settings control how services are fetched and displayed on the front end of your website.

<table><thead><tr><th width="190">Field</th><th>Description</th></tr></thead><tbody><tr><td><strong>Query Services By</strong></td><td>Choose how services should be loaded:<br>- <strong>From Category</strong><br>- <strong>By Specific IDs</strong><br>- <strong>All Services</strong></td></tr><tr><td><strong>Service Count</strong></td><td>Define how many services to display (e.g., 3, 6, 9).</td></tr><tr><td><strong>Pagination</strong></td><td>Enable or disable pagination for multi-page service listings.</td></tr></tbody></table>

***

#### ✅ **Saving the Service**

#### **Review Details**

Before publishing, review all service details including features, images, and layout settings.

#### **Publish or Update**

Click the **“Publish”** button to make your service live, or **“Update”** to save modifications made through Elementor or the Service Editor.
