How to Create Good Services Page Design in WordPress

This post goes through the whole process: what makes a good services page, how top plan yours, how to put it together in WordPress, which tools to use and how to customize everything so that the page starts sounding like you. Let’s get started!

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. As such, your Services page is a shop window of sorts that almost all visitors will look into.

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.’

You can also take advantage of modern AI tools here and ask your favorite AI chat to help you come up with some main overview and descriptions of your services. However, be careful when using those descriptions on your pages. In many cases, these texts will sound too fake and generic – lacking your specific voice.

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.

At this stage, think of these elements as building blocks to extend on later on. You’re not crafting a polished design yet. You’re basically doing a mockup of where you want things and what things you need in the first place.

Why WordPress is ideal for this

If you want to create quick-loading and good-looking services pages (good for user experience), it’s a great idea to use the native WordPress block editor, AKA Gutenberg. While you will find lots of alternative builders that have been around for a while now, the growth of the native block editor in WordPress has made it on par or in many cases even better than what the third-party solutions bring to the table.

However, even as great as it is, by itself, the block editor is still missing some important elements that you’ll want for your services page. To fix that, you can install the Otter Blocks plugin, which extends the native WordPress editor with a number of new blocks, design elements, and even full page designs.

👉 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 when designing any page in WordPress.
• Lots of pre-designed block patterns that you can use in your design, including lots of sections that will fit your services page well.
• A whole design library that includes complete page designs for different niches and types of websites.
• Comprehensive customization for each block and pattern. For instance, you have custom CSS, advanced visibility options, and more.
• Extra functionality if you upgrade to the pro version of Otter 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 $69.00 per year, and offers WooCommerce Product and Advanced Popup builders, including a greater selection of blocks, patterns, and page designs.

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. After you get that done, you can just go to Pages → Add New and start working on your services page.

1. Check out Otter’s Design Library first

There are two main approaches in which you can build a new page with Otter: you can either start from scratch, putting together a page block by block; or you can start with a pre-made design and customize it to fit your needs.

Both approaches are valid, of course, but I think starting with something pre-made can be easier if it’s your first time doing this and you’re not yet familiar with the tools available and what’s possible.

To get started, click on the Design Library button up top when working on your page:

This will show you the entire Otter design catalog. It has more than 200 elements in total, divided based on type, purpose, element, etc.

To jump-start your work, switch to Pages (top left corner of the UI, below the Otter logo). This will show you all the complete page designs optimized for different niches and types of websites. For example, if it’s photography services that you’re going to be providing, you can switch to Photography Pack:

This will show you a couple of pages to choose from. If you like any of those pages, you can click on it and then import.

And just like that, the design will appear on the canvas of your services page.

At this stage, you can replace the content on that page – texts, images – and make it your own. Just click into any text you see on the page and start typing, erasing, adding your own. It works kinda like Google Docs.

You can also add new blocks and sections to this design. Here’s how to do that:

2. Explore blocks and patterns

In WordPress, blocks are individual building blocks of your page – think things like paragraphs, images, buttons, columns, etc.

Patterns are simply sets of blocks put together to make up one bigger structure – like a whole call to action section, a service list section, site header, etc.

To add a new block to your page, click on the “+” in the top left of the interface:

This will show you what’s available both in WordPress natively and through Otter Blocks. If you like anything you see there on the list and want to use it on your page, just drag and drop the block into place or click on it to have it appear at the end of the page.

For example, I just added a circle counter to my page:

I first grabbed it from the list, dragged it into one of the sections, and then adjusted its settings in the right sidebar.

You can do the same with any other block you see there. Every block has its specific settings (available from the right sidebar) that let you customize it to fit.

Then, scroll to find the Otter Blocks section, this will show a collection of all patterns that Otter provides.

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:

From here, you can pick the sections that you want to add to your page.

3. Pick these patterns for a services page

From Otter’s catalog, the patterns that are likely going to be the most useful for services pages are:

• Feature Cards
• Pricing Tiers
• Testimonial Cards
• Timeline Steps
• CTA Banner

Let’s go through those patterns one by one:

Feature Cards

I like this pattern because it’s a simple presentation of individual features or, in our case, services. You can use it to describe your services one by one in a clear and visually appealing way. You can easily replace any of the texts, graphics, and also reduce or add more cards if you need them.

Pricing Tiers

This is a classic pricing table look that you can modify to include the specific price points of your services. You can also remove any of the lines, or include more. Each card can also send people over to a different page on your site.

Testimonial Cards

Most people will want to see what others say about you before they make the decision to work with you. Testimonials are great at providing social proof, but only as long as the testimonial itself looks good enough. This pattern is very nice because it has space for a star rating, a short testimonial text, and the person’s picture at the bottom. You can also include more testimonials if you want to.

Timeline Steps

I like this pattern specifically for services pages because it allows you to showcase the process of how working with you works step-by-step. This can be important for some types of services. For example, if you’re a photographer, you can make the steps something like: (1) Inquiry & consultation, (2) booking, (3) pre-shoot planning, (4) session day.

CTA Banner

You can never go wrong with a call to action section on any of your sales pages (services pages are kind of sales pages). Put your best copy there, convince the client to reach out and give them an easy path to get to you.

The set of patterns I’ve shown you here is of course not exhaustive – you’re not limited to only those. You can pick whatever you see there on the list, or even go above that and install additional plugins to get even more patterns.

4. Go into the style settings

Every block or pattern that you add to the page can be further styled through the sidebar menu on the right. For example, here are the options available for a standard paragraph:

Quite similarly, you can also adjust styles for images:

You can go through the same process with any other block or pattern available in the catalog. If you need help, you can check out Otter Blocks documentation, which will 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.

👨‍🎓👉 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!