How to Build a Services Section in Gutenberg


I’m the SEO specialist at Webcodebuilder and ZEMEZ, companies that create templates powered by Gutenberg WordPress editor and Elementor page builder . We also have ZeGuten multipurpose plugin, which expands Gutenberg's possibilities.

How to add About block in Gutenberg
Prew post
  • Mar 10, 2020
  • 3 min read
  • 843

How to Build a Services Section in Gutenberg

Wondering how to create a services section for your landing website, design it, and promote your services? Then you came to the right place. Not every business is aimed to sell some products. However, it still may need a special place on the page to showcase offered services with prices.

By default, the services section on the landing page is located under the About us section. But it might be positioned in any other place you find suitable in the design.

The services section is more than just a listing of what your website is going to provide. It is both a friendly message and a piece of information about your pricing policy. To build a services section in Gutenberg, we will use the Columns block as a parent element.

NOTE: in case you expect to use your project or business to get donators or to gain partners, your services section requires to display the quality and advantages of what you can offer.

Styling up services section in the website

Let’s begin styling the services section up. Primarily, we will divide a block into three parts for three services. You can set the number of columns in the right sidebar.

services section in website

As a next step, we will add an Image block inside the column. Each image will represent the service you provide. You can change its site and set the alignment.

The services section also requires some text blocks to describe what you are offering. We will use a Heading and Paragraph blocks for that purpose. Choose among H2-H6 tags for the Heading block. Add a paragraph and set its alignment.

Customization process

When you’ve added the content you wanted, it’s time to customize options for the service section. Here are some pieces of advice that might help you with doing customization yourself:

  • don’t try to catch the visitors’ eye only with images – better pay attention to the text;
  • make the headings stand out among the other text;
  • shake up your paragraphs with listings, if necessary;
  • use negative space to emphasize the most meaningful information.

Also, don’t forget to customize your text by applying color and typography settings.

What is more, you can change the importance of your heading tags with no necessity to change code.

Here is some more advice on the section content:

  • you should give your visitors a clear message;
  • the services section of your business has to describe your assistance, why it’s needed and why you are better than your competitors;
  • keep a simple and straightforward structure to increase the clients’ trust.

Let’s move further to the pricing buttons creation. There is usually a button with a price under each service, while the service itself describes what the price is for.

Add a pricing button below each paragraph, fill it with text, and set the alignment.

services section in website

You can also choose between two button styles, change its background and text color, and set the border-radius.

services section in website

Summing up

Besides the pricing of your services, you need to follow a few simple rules.

  1. Write any text as if you are going to talk to your client personally.
  2. Emphasize your headings (e.x. – with another text color) to claim them as important elements.
  3. Don’t talk like a book worm, but a friendly expert.
  4. Focus on the benefits, which customers and partners can get from your offers.

As you can see, it’s an effortless and enjoyable process. Subscribe to our newsletter and stay in touch for more useful tutorials and instructions!

WordPress Contact Form Example and Building a Get in Touch Block
Next post
How to add About block in Gutenberg
Prew post
WordPress Contact Form Example and Building a Get in Touch Block
Next post

Get Gutenix Subscription

Create unlimited Gutenberg, Brizy and Elementor websites with dozens of templates, premium blocks and a lightweight theme — all in one toolkit!

Meet Gutenix, the devoted team of developers that stands behind many projects created with Elementor & Gutenberg. We're inspired by WordPress, and are always looking for an opportunity to make WordPress easier for everyone.
Subscribe to get the news from Gutenix! Be the first to know of updates & discounts!
Enter a valid email!
Server error. Please, try again later!
Form was successfuly submited!
Follow Us:
Copyright © 2021 Gutenix. All Rights Reserved.