Highlight your services using Service block – AitThemes Custom block

The Service block is our very first block we released in our Citadela Pro plugin. Thanks to this block you can perfectly present your services or product features, key points, vision or scope of work. By adding Service block to WordPress page or post you can highlight certain element, add icon, description and CTA. It’s up to you if you wish to get visitors attention to just one specific service or to multiple services via several service blocks. But let’s start from the beginning.

In this article we will explain:

• Purpose of service block and what it can be used for
• Compatibility with WordPress themes
• How to add Service block to website
• Block customization using Inspector
• How to create dedicated Services page with multiple services

Main purpose of Service block – show services in attractive way

Main purpose why you should use Service block is that it helps you present information in attractive way. It can clearly divide specific groups from other text and highlight it to get everybody’s attention. Service blocks look nice within layout because:

• Structuralize content
• Refresh it with icons
• Separate services with graphics and spacing

Thanks to above can Service block quickly get visitors attention.

Better navigation across website

Because the service is highlighted, it will make eye scanning of the website much easier. Even if customer will only scroll through your website, they won’t miss services you offer.

If you add URL to your service, it can be used as navigation box with CTA. It will make customers click on the box to learn more or order a service.

Service block used to present features

Service block can be also used to highlight features of product or service you offer. That means each individual service block will present one particular feature. This graphical representation can bring out key qualities of given product. Bearing in mind that visitors do not want to read a lot of text.

Where can be Service block used

Service block can be used inside posts and pages – in fact everywhere that you need it. It’s good to use it on the homepage that is usually a first contact with website visitors. Because service block can easily capture visitors attention we recommend using services on the most visited pages.

Service blocks can be used on dedicated services page, that has similarly to homepage high number of visitors. You can present all the services you offer in one place.

We will talk about how to create Services page later on.

Compatibility with WordPress themes

Main advantage of Service block is that it’s available to all WordPress themes that support WordPress block editor (Gutenberg). That means you can use it on our theme or any 3rd party theme such as Avada or Divi. The one thing you need is to install Citadela Pro plugin.

How to add Service block to your website

As we have already mentioned to add Service block to the editor you need to Citadela Blocks plugin. After plugin activation, block will be automatically added to WordPress editor.

Service block can be added by clicking on “+” symbol in the top bar or anywhere inside editor. After that just search for given block using term “Service”.

Second option to add Service block is to use “/“ and write the word “service”.

Done. This is how Service block looks like with it’s available options.

Service block settings

As a first thing you can choose service layout that will be better suited to your website design. By default there is Box layout, that will center icon, title and description. You can change it to List layout in the top toolbar. Icon will be moved to next to the title and everything will be aligned to the left.

Inside Service block there is a placeholder, that also works as a hint. You’ll know exactly what to write in that individual box. Title usually means name of service of feature. Text underneath usually describe the service further or explains why should customer order it.

Text can be formatted as usual, you can set it bold, italic or add a link.

Block customization using Inspector

Advanced settings in Inspector allows you to modify service block to your needs. You can change:

1. Block colors

• Background color
• Title color
• Text color

2. Icon or image in service block

Service block by default displays icons. You can choose different icon from the picker, using search bar. You can also change icon color. Instead of icon you can also use any image. It can be set to match icon size or to fit service box width.

If you do not want to display icon or image inside service box, you can turn this feature off completely (Show icon or image –> None).

3. Link

To navigate visitors to another page, you can add link into service box. Correctly chosen CTA increase number of clicks and conversion rate. You can simply write “Read more” and insert URL. You can also choose to open this link in a new browser tab.

4. Custom CSS class

For advanced WordPress users is like in other blocks available option to add own CSS code. It allows you to make bigger changes to service block design.

How to create Services page with multiple services

As we mentioned at the beginning of this article, Services page can be used to present all services in one place. Create a new page and insert several Service blocks side-by-side or one after another. Blocks with services can be placed anywhere based on your requirements. It’s simply up to you, how you use it.

How to add Service page in WordPress block editor using Service block?

• As a first thing you need to add Columns block
• Set number of columns. If you want to present 3 services, you need 3 columns
• After that add one Service block into each column

Because each service is an individual block, administration is simple and clear. You can duplicate selected block and use it somewhere else on your page. The best thing is that service blocks will look good also in responsive version on mobile devices.

Have you already tried our Service block? How do you find it? We look forward to see your first reactions in the comments below.