Highlight your services using Service block – AitThemes Custom block

Author: Categories: WP Tutorials
Updated: October 3, 2019
Highlight your services using Service block – AitThemes Custom block

Today we would like to introduce you our first of the available blocks in our Citadela Blocks plugin. We will talk about Service block, thanks to which you can perfectly present your services or product features. By adding Service block to WordPress page or post you can highlight certain service, 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:

 

Main purpose of Service block – show services in attractive way

Main purpose why you should use Service block is that it will help you present services in attractive way. It can clearly divide specific service 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.

 Highlight services via Service block

Content looks much better if there are Service blocks for presenting company services or products

 

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.

Service block used as Feature box

Use Service block as Feature box to emphasize product features

 

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 Blocks plugin.

Join to Lifetime Membership and download Citadela Blocks plugin to get Service block and much more!

Purchase Lifetime Membership

 

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

Add Service block to WordPress editor by clicking on “+”

Adding service box by clicking on “+”

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

Insert Service block with slash “/”

Insert Service block using slash “/”

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

Created Service block

This is how Service block looks like

 

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.

 

Changing Box layout to List layout

Configure layout for your Service block in one simple click

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
Service block color change

Customize your block by changing its 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.

Icon and Image options in Service block Inspector

Choose what you’d like to display inside the block – Icon or an Image?

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.

Insert URL link to Service block

Insert URL to create call-to-action message

 

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.

To download Citadela Blocks plugin with Service block you need active membership. Get the Lifetime Membership with lifetime updates.

Buy Lifetime Membership

 

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
Services page created by more Service blocks

3 Service blocks nested in Columns block

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.