ZeGuten — a collection of blocks for Gutenberg Get for $15.00

How to build a services section in Gutenberg

ABOUT THE AUTHOR

SEO copywriter at Gutenix Team

Media and text block overview
Prew post
  • Mar 10, 2020
  • 3 min read
  • 138

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

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.

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.

When you’ve added the content you wanted, it’s time to customization 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 are 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.

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

Summing it 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!

2
Appreciate
Gutentor Review
Next post
Media and text block overview
Prew post
Gutentor Review
Next post