How to Create a Services Section in WordPress

By | January 27, 2021

Do you want to add a services section to your WordPress website?

Many professionals, small companies, and agencies need a way to showcase their services across their website.

In this article, we’ll show you how to easily create a services section in WordPress. We’ll also share how to collect leads from your services section with a contact form.

Creating a services section in WordPress

Why Create a Services Section in WordPress?

Normally, you can create custom pages in WordPress for each service you offer.

After that, you can add links to those pages in your navigation menu at the top or in the page content.

A services section on your homepage lets you quickly highlight the services to potential customers and clients. It is usually a compact area in the layout of your homepage or landing pages.

Here’s an example of how a typical services section could look:

Completed services section, with blue icons and blue links

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

That being said, let’s take a look at how to easily make a services section in WordPress and then add it to any page on your website.

Create Custom Homepage with Page Builders

If you’re looking for the most customizable way to add a services section to your homepage, then you may want to consider using a custom landing page.

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

For custom landing pages, we recommend SeedProd. It’s 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, then you can take a look at Beaver Builder, Divi, or Elementor because they all will let you customize your homepage to add a completely custom services section to your homepage.

If you don’t want to use a page builder, then don’t worry. There are other WordPress plugins that can let you add a services section using Gutenberg.

Creating a Services Section in WordPress using Block Editor

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

Upon activation, go to the Service Box » Add New Service Box page in your WordPress admin to create a services box.

Creating a new set of services boxes in WordPress

Here, you need to enter a title for your services area and choose a design option. There are 2 different designs to choose from in the free version.

Once you’ve done this, simply scroll down the page a little. Here, you will see two sample services, with a title, description, and icon.

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

Go ahead and type in a title and description for your services. After that click on the current icon, and then select the one you want to use.

Choose an icon to use for each service that you want to list

It’s also best practice to add a link to a page for further information about the service. This gives you the space to let people know how to book and pay for your service.

Add a link for each service box that goes to to a page with more information

You can also add more service boxes using the ‘Add New Service Box’ button. Simply click on this to create as many boxes as you need.

Add new boxes to your set of service boxes by clicking the button

Once you’ve created your service boxes, click on the Publish button at the top of the page to save your changes. Don’t worry, this won’t add the service section to your site straight away.

Click the publish button to publish your service boxes

You are now ready to add this services section to your home page or any post or page. You can even add it sidebar or footer widget-area.

Adding Your Service Section to a WordPress Page

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

Get the shortcode that lets you add your service boxes into a page, post, or widget area

After copying the shortcode, you can add it to any WordPress post or page. Simply edit the page where you want to display the services section or create a new one.

On the post edit screen, click on the (+) button to add a new block. You need to look for the shortcode block and then click on it to insert it into the content area.

Adding a shortcode block using the WordPress block (Gutenberg) editor

Next, you just need to paste your shortcode into the block settings.

Pasting the service boxes shortcode into the shortcode block

After that you can save or publish your page and preview it. Here’s how the services section looks live on our demo website:

A completed services page with a service section

Styling Your Services Section

The plugin gives you some basic options to easily change the appearance of your services section.

Simply go to Service Box » All Service Box page in your WordPress admin area and then click on the services section you created earlier.

The page showing your service boxes

This will open the services edit screen where you’ll find the styling options in the right column. From here, you can change fonts, colors, show or hide icons, ‘Read more’ link, and more.

Changing the options for your service boxes

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

Creating Request a Quote Form For your Services

Now that you have added a services section, the next step is to convert those users. Many businesses do this by adding a request for a quote form.

It is basically like any contact form but with a few differences to match your business needs. This allows customers to send you a message, and you can then sell them your service.

The easiest way to do this is by using WPForms, which is the best WordPress forms plugin. It allows you to easily add any type of forms to your website using a simple drag and drop tool.

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

Upon activation, you need to visit the WPForms » Settings page to enter your license key. You can find this information under your account on WPForms website.

Entering your license key for WPForms

Next, you need to visit the WPForms » Addons page and click on the Install button next to the ‘Form Template Pack Addon’.

Adding the form templates pack addon to WPForms

This addon contains several additional templates including one to create a request a quote form.

Now you are ready to create your form.

Simply go to the WPForms » Add New to launch the WPForms form builder. First, you need to type in a name for your form, then select the Request a Quote template.

Selecting the 'Request a Quote' form template in WPForms

WPForms will now load the form editor with all the entries you usually need in a ‘Request for Quote’ form. These include Name, Business/Organization, Email, Phone, and a box where the customer can type their request:

The default Request a Quote template 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.

Modifying the Request a Quote form

Once you are satisfied with the form simply click on the Save button at the top to save your changes.

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

Add a WPForms block to your page in WordPress

From the block settings, you need to select the form you created earlier from the drop-down menu. WPForms will load a preview of the form on screen.

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

The Request a Quote form live on the website

Want more help creating your form, setting up notifications, and putting your form on 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 to accept credit card payments.

We hope this article helped you learn how to create a services section in WordPress. You might also like to check out our article on the best live chat software and best business phone services for small businesses.

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

The post How to Create a Services Section in WordPress appeared first on WPBeginner.


Leave a Reply

Your email address will not be published. Required fields are marked *