Find out how to create a service part in WordPress

Would you like to add a service area to your WordPress website?

Many professionals, small businesses and agencies need a way to showcase their services on their website.

In this article, we are going to show you how to easily create a service section in WordPress. We’ll also tell you how to collect leads from your service area using a contact form.

Why create a services area in WordPress?

Usually WordPress allows you to create custom pages for any service you offer.

You can then add links to these pages in your navigation menu at the top or in the page content.

You can quickly highlight the services for potential customers and customers in a service section on your homepage. This is usually a compact area on the layout of your home page or landing pages.

Here is an example of what a typical service section might look like:

Completed service section with blue symbols and blue links

This gives you a quick overview of different services with a call to action where users can get more details or fill out a form.

Let’s take a look at how to easily create a service section in WordPress and then add it to any page on your website.

Create a custom homepage with page builders

If you’re looking for the most customizable way to add a service area to your homepage, consider using a custom landing page.

You can use one of the many drag and drop WordPress page builders to create a custom page with the Services section without writing any code.

For custom landing pages, we recommend SeedProd. It is used by over 1 million websites and comes with tons of pre-made section templates and landing page templates.

SeedProd Page Builder

If you’re looking for a SeedProd alternative, you can check out Beaver Builder, Divi, or Elementor as you can all customize your homepage to add a fully custom service area to your homepage.

If you don’t want to use a page builder, don’t worry. There are other WordPress plugins that you can use to add a service section with the help of Gutenberg.

Creating a Services Section in WordPress with the Block Editor

First you need to install and activate the free Service Box Showcase plugin. For more information, see our step-by-step guide on installing a WordPress plugin.

After activation, go to Service Box »Add a new service box Page in your WordPress administrator to create a service box.

Creating a new set of service boxes in WordPress

Here you have to enter a title for your service area and select a design option. In the free version there are 2 different designs to choose from.

Once you do, just scroll down a little. Here you can see two sample services with title, description and icon.

Two service boxes with standard text have already been created for you

Enter a title and description for your services. Then click on the current icon and select the icon you want.

Select an icon for each service you want to list

It is also recommended to add a link to a page for more information about the service. This gives you the opportunity to let people know how to book and pay for your service.

For each service box, add a link that leads to a page with further information

You can also add further service boxes using the “Add new service box” button. Just click on it to create as many fields as you need.

Add new boxes to your service boxes by clicking the button

When you’ve created your service boxes, click the Publish button at the top of the page to save your changes. Don’t worry, this won’t add the service area to your website immediately.

Click the Publish button to publish your service boxes

You can now add this service section to your homepage or to a post or page. You can even add it to sidebar or footer widget area.

Adding your service area to a WordPress site

To add the service section to a page, you need to copy the shortcode generated by the plugin. You can find them under the service boxes.

Get the shortcode that you can use to add your service boxes to a page, post or widget area

After copying the shortcode, you can add it to any WordPress post or site. Just edit the page you want to view the service section or create a new one.

On the post-processing screen, click the (+) Button to add a new block. You need to look for the shortcode block and then click on it to paste it into the content area.

Adding a Shortcode Block Using the Gutenberg Editor (WordPress Block)

Next, all you need to do is paste your shortcode into the block settings.

Insert the shortcode of the service boxes in the shortcode block

After that, you can save or publish your page and preview it. This is how the service area looks live on our demo website:

A completed service page with a service section

Styling your services section

The plugin gives you some basic options to easily change the look and feel of your service area.

Just go to Service Box »All Service Box In your WordPress administration area, click on the previously created service area.

The page with your service boxes

This will bring up the Services edit screen where you can find the style options in the right column. From here you can change fonts, colors, show or hide symbols, the link “Read more” and much more.

Change the options for your service boxes

Don’t forget to click the “Update” button at the top of the page to save your changes.

Create a quote form for your services

After you’ve added a service section, the next step is to convert these users. Many companies add a request for quotation to this.

It’s basically like any contact form, but with a few differences to suit your business needs. That way, customers can send you a message and then sell your service to them.

The easiest way to do this is by using WPForms which is the best plugin for WordPress forms. You can easily add any forms to your website with a simple drag and drop tool.

First you need to install and activate the WPForms plugin. For more information, see our step-by-step guide on installing a WordPress plugin.

After activation you have to visit the WPForms »Settings Page to enter your license key. You can find this information under your account on the WPForms website.

Enter your license key for WPForms

Next you need to visit them WPForms »Addons Click the Install button next to the form template package add-on.

Adding the form template package add-on to WPForms

This addon contains several additional templates, including one for creating a quote form for an inquiry.

You are now ready to create your form.

Just go to the WPForms »Add new to start the WPForms Form Builder. First you need to enter a name for your form and then select the “Get a Quote” template.

Select the form template

WPForms now loads the form editor with all the entries that you normally need in a “request for quotation” form. This includes name, company / organization, email, telephone and a field in which the customer can enter their request:

The standard template for requesting a quote in the WPForms Form Builder

You can easily add new fields from the left column or edit existing fields by simply clicking on them. You can also move the fields up and down to rearrange them.

Modify the quote form

When you’re happy with the form, click the Save button above to save your changes.

You can now add this form to any WordPress post or site. Just edit the page where you want to add the form and WPForms block to the content area.

Add a WPForms block to your page in WordPress

In the block settings you need to select the form you created earlier from the drop down menu. WPForms loads a preview of the form on the screen.

You can now save your page or publish it to see your form live on your WordPress site.

The request for quotation form live on the website

Would you like more help creating your form, setting up notifications, and adding your form to your website? Just check out our step-by-step tutorial on creating a contact form.

Tip: You can also use WPForms to take bookings and even accept credit card payments.

We hope this article has helped you learn how to create a service section in WordPress. You may also want to check out our article on Best Live Chat Software and Business Phone Services for Small Businesses.

If you enjoyed this article, please subscribe to our YouTube channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Comments are closed.