WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Tutorials» How to Create a Services Section in WordPress

How to Create a Services Section in WordPress

Last updated on January 27th, 2021 by Editorial Staff
178 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
How to Create a Services Section in WordPress

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.

178 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

Comments

  1. Congratulations, you have the opportunity to be the first commenter on this article.
    Have a question or suggestion? Please leave a comment to start the discussion.

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
WP Mail SMTP logo
WP Mail SMTP
Fix WordPress email delivery issues. #1 SMTP plugin. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2021 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2021)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2021)
    • SiteGround Reviews from 4464 Users & Our Experts (2021)
    • Bluehost Review from Real Users + Performance Stats (2021)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2021 – Step by Step Guide
Deals & Coupons (view all)
SendinBlue Coupon Code
Sendinblue Coupon
Get Sendinblue, a powerful marketing automation toolkit for small businesses, for FREE.
InMotion Hosting
InMotion Hosting Coupon
Get an exclusive 50% off InMotion hosting plus a free domain.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
  • Growth Fund
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon
  • AIOSEO

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress Security by Sucuri.