Skip to content

How to Create Good Services Page Design in WordPress

Stellar Services page design in WordPress uses the same fundamentals and tactics as almost any other website. The idea is to capture a visitor’s attention and give them reason to become a customer. In this respect, the design of your page will follow conventional design practices. However, there are a few specifics that relate to your own page and WordPress that warrant mentioning – especially the plugins you’ll turn to.

For this tutorial, we’ll cover how to create a solid Services page in WordPress using one of the best plugins for the job. We’ll also cover some tricks and tips to make your Services page stand out and discuss some extra elements that are worth putting in place. 🙋

What good Services page design consists of

If a visitor wants to find out more about what you offer, they’ll likely appreciate a dedicated page on your site. In fact, most site visitors want to see the information on your products and services [1]. As such, your Services page is a shop window of sorts that almost all visitors will look into.

An example of services page design in WordPress.

Many businesses won’t just need one Services page either. The details behind each product line or service can be deep, which means you’ll want multiple pages for each specific service. For this post, we’ll look at creating a general-purpose Services page design that you can adapt to any use case.

Regardless, there are a few different elements that go into the core design of a Services page:

  • A heading that includes the core ‘concept’ behind your services. For example, this could be, “Cost-Effective Video Editing for a Low Price.”
  • Social proof that boost the reputation of your business and what you offer.
  • A call to action (CTA) that tells the visitor exactly what to do next.
  • Information on the individual services that you offer.

We’ll talk more about some of these aspects later in greater detail. However, you’ll also want to consider the design of the page, too. We believe a good Services page has a lot in common with a landing page. This is because you want to funnel visitors through your Services page without fuss. This means your Services page design in WordPress will need to be minimal. With good planning, though, you can pack in a lot of information.

Planning your WordPress Services page

Before you crack open an editor and get to work, you should plan out your Services page design. A great place to start is with the services you choose to offer. Here, create a list of everything you provide to your existing customer base.

Think of the more prominent services as pseudo-headings for your page. These will be aspects such as car repairs, general bookkeeping, tailoring, and other broad focuses. They should have individual pages that you’ll link to from your Services ‘hub.’

From there, you can drill down into specifics. For instance, you might specialize in exhaust fitting or engine tuning. As an accountant, you could focus on filing tax returns or balancing ledgers. Garment industries routinely focus on specific occasions, such as wedding or suit alterations.

Once you have a list of services grouped into different focuses, you can begin to work from there. The next step would be to consider a typical structure for a landing page, and adapt it for your Services page. Here’s a great structure to start:

  • A heading that outlines your services in a nutshell.
  • An introductory section that uses persuasive copy, to give more context to your services.
  • Credibility markers, such as client logos.
  • Your list of services.
  • Social proof, such as testimonials or reviews.
  • CTA to help push readers into the next stage of your sales funnel.

You should think about page optimization too, as you’ll want high visibility in search engines. Regardless, you’re almost ready to begin your Services page design in WordPress. Before this, we’re going to introduce you to arguably the best plugin for the job – especially if you use WordPress’ native Block Editor.

Why WordPress and Otter Blocks are ideal to create a Services page

If you want to create quick-loading Services pages (good for user experience), it’s a great idea to use the native WordPress Block Editor, AKA Gutenberg.

However, by itself, the Block Editor is missing some important elements that you’ll want for a Services page. To fix that, you can install the Otter plugin, which extends the native WordPress editor with a number of new blocks, templates, and features.

👉 We have a full review of the plugin on the site, but here’s what it offers in brief:

  • A number of new blocks that you can use for Services page design in WordPress, including a dedicated Services block.
  • Lots of pre-designed block patterns that you can use in your design, including a dedicated Services page block pattern, as well as other designs.
  • Comprehensive customization for each Block and Pattern. For instance, you have custom CSS, advanced visibility options, and more.
  • Extra functionality if you upgrade that includes dedicated Blocks and Patterns for WooCommerce.

Speaking of which, Otter Blocks is free from the WordPress Plugin Directory, but a premium plan gives you even greater functionality. A single-site license is $49 per year, and offers WooCommerce Product and Advanced Popup builders, including a greater selection of Blocks and Patterns.

How to use Otter Blocks to create a Services page in WordPress

Throughout the rest of the article, we’re going to look at how Otter Blocks can help you carry out good Services page design in WordPress. Despite the fact you don’t need any technical knowledge, you’ll still be able to create something that oozes professionalism.

Before you use the plugin, you’ll need to install and activate it. However, from here, you can fire up the Block Editor and get to work! 🧑‍💻

  1. Learn where Otter Blocks’ Pattern templates ‘live’ and how to view them
  2. Build your Services page in WordPress using Patterns
  3. Add further Blocks to match your vision and adjust its design

1. Learn where Otter Blocks’ Pattern templates ‘live’ and how to view them 💡

While you could take a blank page and begin to drag Block onto the canvas, there’s a quicker way with Otter Blocks. It includes a host of pre-built template Patterns for common use cases. You can find all of the relevant Patterns and Blocks from the left-hand Block Inserter menu:

Services Page Design in WordPress: The WordPress Block Editor showing both the left-hand Block Inserter and the right-hand options sidebars.

If you select the Patterns tab, then scroll to find the Otter Blocks menu, this will show a pop-up with every Pattern the plugin provides:

Services Page Design in WordPress: Selecting the Otter Blocks > Patterns menu from the Block Inserter sidebar.

However, there’s a better way to see all of Otter Blocks’ Patterns at a glance. At the bottom of the Patterns menu, you’ll spot the Explore all patterns button. This opens up a maximized version of the Patterns menu, so you can see more on screen and get some brief descriptions, too:

Services Page Design in WordPress: The fuller Otter Blocks Patterns modal popup screen.

From here, you can begin to create your Services page in WordPress using Otter Blocks and patterns. Next, we’ll look at how you can add some of the key elements in a snap.

2. Build your Services page in WordPress using Patterns 🖱️

You’ll be able to piece together a Services page design in WordPress using suitable Patterns that take no time to use. For a quick way to set things up, you can use the Service Boxes on a Dark Background pattern:

Services Page Design in WordPress: The WordPress Block Editor showing the Service Boxes on Dark Background pattern.

This uses a bunch of Blocks to build a whole Services section for you, including headings, three service boxes with CTA buttons, and more. Each Pattern will also give you some context-specific Block settings. For example, here, you can change columns, layout, and structure of the section as a whole. Also, you can alter the alignment, the heading tag, and more. This is in addition to options for each individual Block within the section.

The Style tab gives you ways to change margins and padding, borders, and even add a shaped divider between sections – all without code:

A portion of the Block Editor showing the Services pattern section and the full Shape Divider options.

The Pro version of Otter Blocks also includes a dedicated Services Block. This is great way to add your services to your site, and gives you much deeper customization:

Services Page Design in WordPress: The Otter Blocks Pro Services Block on the front-end of a website.

From here, you can add more Patterns to your page. Our example adds a Hero Area with Button pattern, some columns with flip boxes, and a CTA section at the end:

Choosing a Call to Action Pattern from Otter Blocks.

This might be all you need, especially as Otter Blocks Pro includes even more Patterns.

However, you can also turn to dedicated Blocks to further refine your Services page design in WordPress.

3. Add further Blocks to match your vision and adjust its design ⚙️

While all of Otter Blocks’ Patterns uses its bundled Blocks, not every Block finds its way into a Pattern. As such, you can add different Blocks to sections as a way to develop the functionality you’d like. For instance, the Accordion Block will help you create a Frequently Asked Questions (FAQ) section, to help persuade your potential customers even further:

Adding an Accordion Block to the page layout.

It could be that you forgo testimonials as your form of social proof, and instead use the Product Review Block to showcase what current customers think about your wares:

Adding a Product Review Block to the layout.

Regardless, once you finish with your layout, you can use the individual Block settings to refine your Services page design in WordPress. Most of the Blocks will have dedicated options within the right-hand Block > Style menu. What you see will depend on the Block in question. However, most will offer robust tools within the Settings > Block Tools pop-up:

The Block Tools options within the right-hand sidebar.

Once you click on one of the options, it will add to the list of Settings. Both Animations and Visibility Conditions give you powerful ways to customize your layout further:

Settings for animations and section visibility in the right-hand sidebar.

Using these is beyond the scope of this post, but the Otter Blocks documentation can walk you through each and every option the plugin offers. 🔌

Create your WordPress Services page today ✈️

One of the key pages on any business website is that which outlines your service offerings. With the right layout and content choices, you can turn a potential customer into an actual one. To do that, you need to master creating excellent Services page designs in WordPress.

However, you don’t need wads of technical knowledge to do this – you can simply use Otter Blocks. It includes dedicated Patterns to help you create a Services page. And if you want even more functionality, the premium version offers a dedicated Services Block that you can use in your designs.

👨‍🎓👉 To learn more about Otter, you can check out our full Otter Blocks review.

Do you have any questions about how to create fantastic Services page design in WordPress using Otter Blocks? Ask us in the comments section below!

Don’t forget to join our crash course on speeding up your WordPress site. Learn more below:

 
Yay! 🎉 You made it to the end of the article!
Tom Rankin
Share:

0 Comments
Inline Feedbacks
View all comments

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!