help center

Search
Close this search box.
On this page

Create a services section

Last Update: January 10, 2024

Introduction

Here you will learn how to create a “services” container. This is a rather basic design but still used frequently. The traditional method of using sections/inner-sections/columns can be optimized by using containers. While it may seem challenging at first, once you familiarize yourself with the container and its properties, you will be able to create these designs quickly and more efficiently for page performance. 

Services Container One Create a services section 1

Getting started 

For this tutorial you will only need two widgets, and a container. The Heading widget, and the Icon Box widget. These items have been added to the favorites section of the editor panel so they may be easily accessed.

Creating the Container

Begin by creating a new container element. Do this by clicking on the + icon in the main editor window.  For this example you will only need the single container. Select it in the container layout options shown.

Add New Container Create a services section 3

Container settings

The container is set to boxed at the default 1140 px width, and a viewport height of 55 VH in the editor settings.  Additionally the overflow is hidden and the HTML tag set as section.

The Items tab can be skipped for now in this tutorial but we will return to it once the widgets have been added. 

At this stage your container should look something like this.

Container Settings Create a services section 5

Review the Container settings

  1. Container Width: Boxed (1140px default)
  2. Minimum Height: 55VH 
  3. Overflow: Hidden
  4. HTML Tag: Section

Adding the Heading

Since there are no items in the container yet, it is now time to add them. Begin by adding the Heading widget. Enter the text you wish for your heading. In this example, “Our Services” is entered into the value. Since this is a heading of a new section, the value of H2 is left in the HTML tag. You may then choose the center alignment to center the heading within its wrapper.

Styling the Heading

From the Style Tab > Typography a pre-set global font style is used to define the font size (Example used: 4.768 REM). Colors and other styling can be edited as desired once the design layout has been completed.

Advanced Tab options

For the final result, the Heading will occupy 100% of the width of the container. We will define this value now in the Custom Width property. There are other ways to achieve this using more advanced methods, but for this tutorial, this method is the most simple to learn.

image 31 Create a services section 7

You should now see the following design in your container.

Advanced Services Create a services section 9

Adding an Icon Box

You may now add an Icon box to the container. Change the default star icon, to any of the available Font-Awesome icon options, or use an SVG file of your own. The icon will be given a stacked view to make it stand out more visually.  For the title text, a value of “Service 1” is used. The description text may be edited. For this example, it is just shortened to one sentence. You may add a link in this step if desired.

Styling the Icon Box

For this tutorial, additional styling is not required but you may return to this once completed and add your personal touch.

Advanced Tab options

In this step, a few more flex options are demonstrated. For this tutorial, we will manually define a Custom Width value of 20% width. This will result in the four Icon Box widgets taking up 80% of the container width in the completed desktop view.

image 32 Create a services section 11

The container should now appear like the following.

Add Icon Box Create a services section 13

Duplicate the Icon Box x3

In the next step you will be duplicating the Icon Box widget to result in four total. You may do this by right clicking the widget and selecting duplicate. The title of each is edited. At this point you will have all the widgets needed aligned vertically as shown below.

Duplicate The Icons Create a services section 15

Review the widget properties

  1. Heading widget: H2, center aligned, sized at 4.768EM, and with a 100% width defined in the advanced tab
  2. Icon boxes (4): Each with a defined width of 20% in the advanced tab.

Container items flex properties

Since the items are all vertically aligned, you now need to edit the container layout once again. Right click on the container to return to the layout editor. Select the Items tab to open the options. From this section, you will define the container direction, alignment, and wrap properties. Below you will see the final property settings used for this design.

image 34 Create a services section 17
Direction

The direction of the column may be set to row (horizontal), column (vertical), reversed row, or revered column. For this tutorial, you will define the direction as row. The Custom width property of the Heading widget will be overridden until the Wrap property has been applied.

image 26 Create a services section 19
Set to Row
Align Items

If the Align Items property is set to Center it will vertically center the row of widgets in the container. This will be further controlled in the Align Content and may not apply to your final design.

image 27 Create a services section 21
Elements Gap

This may be used to provide a gap between the objects. This will be used more once the responsive viewports are edited. A value of zero is used in this example at this time.

Wrap

You will now need to apply the Wrap property. This will allow the items to use the defined widths, rather than bunching together; and instead wrap to the next line. The heading will now appear above the four icon boxes. However, the icon boxes will still all be bunched together to the left.

image 28 Create a services section 23
Justify Content

When a container is set to row, the justify content property is used to align and space the container objects horizontally. You may set this property to flex-start, center, flex-end space-between, space-around, and space-evenly. In this example a value of space-around is used to create equal spacing between the items and the container.

image 29 Create a services section 25
Align Content

In order to vertically align and space all the items within the container, the Align Content property is used. This option will only appear if the wrap property is enabled. Once again you may select between the flex-start, center, flex-end, space-between, space-around, and space evenly. For this example, you will use the space evenly option.

image 35 Create a services section 27

Note: Once the Align Content property has been applied, the Align Items setting will be over-ridden. It may be unticked.

Review the Container settings

Below are the settings for the container you should be using for this design.

  1. Direction: Row
  2. Justify Content: Space Around
  3. Wrap: Wrap
  4. Align Content: Space Evenly

Take a breather

Your desktop design is now completed and should appear as below. You should publish your changes, and preview in a new browser tab.

Take A Breather 1 Create a services section 29

Responsive Settings

To finish the design process, you now need to make it responsive on tablet and mobile devices. This can be achieved by simply adjusting the width of the icon boxes and container height.

Tablet Settings

For the tablet, you may choose to leave the icon boxes as four across, or you may find that they look better at 50% width each. This is defined once again in the Advanced Tab of each widget. The height of the container is also increased to accommodate the items. A value of 89VH is used in this example.

Tablet Settings Create a services section 31

Mobile Settings

For the mobile view, a width of 100% for each Icon Box is used in the advanced tab.  The Elements Gap option is now used to provide a gap between the widgets. This should result in the following design.

Mobile Settings Create a services section 33

Congratulations

Your services container is now completed. Preview the responsive settings once again to make sure all display properly.

You may now add your own personal styling for colors and backgrounds as well as edit the text of the items. Additional padding and other fine tuning may be done to achieve your desired goals.

Next steps

Check out some other layouts you can create with containers:

Create an Intro Section

Create a Hero Section

Create a Call to Action Section

Create a Hero Image Gallery

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article

Cyber Monday 2024 - Platinum 30% off
Did you know...?
You get a 30 day
money back guarantee

You have nothing to lose – but a great deal!

days
hours
minutes
seconds