Services Block

The Services block helps you present a brief and succinct overview of the services you deliver. Before leading visitors into the details of each of your services, this block helps give them a top-level view of what you do and the unique value you offer. Let’s make the most use of this “elevator pitch” block! Here’s how to add the Services block:

1. Choose a location where you want to add a Services area and click on the Add Block + button.
2. In the Block Library, navigate to Services section and click on the block which style and design suit your website needs. The block is inserted into the page.

Customizing block settings

You can show or remove any element of your Services block. To modify block settings, hover over any area of the block and click the “gear” Settings icon. The Block settings menu will appear.

You can check or uncheck any of the following options: 

• Block secondary title: show or remove the text block on the very top of the block.
• Block title: show or remove the main block title.
• Block subtitle: show or remove the line of text below the main title.
• Service secondary title: you have an option to show or remove the line of text above the main block title.
• Service title: display or remove the title of the individual Services block. 
• Service description: you can show or remove brief service descriptions under the service image.
• Service price: show or remove prices in the individual service block.
• Primary and Secondary buttons: these options allow you to control how many buttons to show on the Services block.
• Appearance: choose the color of the block background. For example, you can choose to make it black:

Once you are done modifying the settings, click Save to apply changes.

Editing images

You can replace demo images with your own service-related photographs. Here’s how you can do it. 

1. To replace the image, hover over the block element and the dialog box will appear. 

2. Click on “picture frame” Edit Image icon and choose the new service-related image from your computer.

3. Using the cropping grid, choose the area of the image that you want to show on the Services page. The grid is automatically choosing the optimal shape of the image for this particular block layout.

4. Once done cropping, click Save and the image will appear in the individual service block.

5. Repeat these steps with other service-focused images that you want to appear in this block.

Editing service descriptions

You can add short service descriptions in the block with multiple services in it. To edit the demo content, simply click on the text block and start typing your new text. Alternatively, you can paste your existing content from the text editor you are using.

Editing service links

Individual elements of the Services block layouts allow you to have links to separate service pages, where you will be able to describe the service in more detail. Here’s how to edit these links: 

1. Hover over the link to bring up the dialog box. Click on the “chain link” Link icon and either choose the page of your website to link to or insert an external URL. 

2. Click on the “check” icon to confirm the link destination.

Duplicating block elements

If you would like to showcase more services in this block, you can easily duplicate any of the existing elements. To do that, hover over any block element you want to duplicate and click on the Duplicate icon. The identical block element will be inserted to the right of the original element. 

Moving block elements

You can move block elements in any way that meets your website goals. To move the block element, hover over it to bring up the dialog box, and click on the Move icon. Drag the element and drop it on another spot inside the block.

Note: you cannot move elements from one block to a different block. 

Deleting block elements

You can delete any block element if you have fewer services to display. To do this, hover over the unwanted element to bring up the dialog box, and click on the “trash can” Delete icon. You can reverse this action by clicking Undo or pressing Ctrl-Z on your keyboard.