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:
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.
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 section 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.
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.
Then just scroll down a little. Here you can see two sample services with title, description and icon.
Enter a title and description for your services. Then click on the current icon and select the icon you want.
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.
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.
After creating 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.
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.
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.
Next, all you need to do is paste your shortcode into the block settings.
After that, you can save or publish your page and preview it. This is how the service area looks live on our demo website:
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.
This will bring up the Services edit screen where you can find the style options in the right column. From here you can show or hide fonts, colors, icons, change the "Read More" link, and more.
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.
Next you need to visit them WPForms »Addons Click the "Install" button next to the "Form Template Pack" add-on.
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.
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:
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.
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.
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.
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.