How to Create Good Services Page Design in WordPress

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.

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:

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:

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 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:

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:

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:

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:

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:

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:

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:

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:

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!