![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2022\/03\/Services-Container-One.png\")
<\/a><\/figure>\n\n\n\nGetting started <\/h2>\n\n\n\n
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.<\/p>\n\n\n\n
Creating the Container<\/h3>\n\n\n\n
Begin by creating a new container element. Do this by clicking on the + icon in the main editor window.\u00a0 For this example you will only need the single container. Select it in the container layout options shown.<\/p>\n\n\n\n The container<\/strong> is set to boxed at the default 1140 px width, and a viewport height of 55 VH in the editor settings.\u00a0 Additionally the overflow is hidden and the HTML tag set as section.<\/p>\n\n\n\n The Items<\/strong> tab can be skipped for now in this tutorial but we will return to it once the widgets have been added. <\/p>\n\n\n\n At this stage your container should look something like this.<\/p>\n\n\n\n Since there are no items in the container yet, it is now time to add them. Begin by adding the Heading<\/strong> widget. Enter the text you wish for your heading. In this example, \u201cOur Services\u201d 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.<\/p>\n\n\n\n From the Style Tab > Typography<\/em> 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.<\/p>\n\n\n\n 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<\/strong> property. There are other ways to achieve this using more advanced methods, but for this tutorial, this method is the most simple to learn.<\/p>\n\n\n\n You should now see the following design in your container.<\/p>\n\n\n\n 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 \u201cService 1\u201d 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.<\/p>\n\n\n\n For this tutorial, additional styling is not required but you may return to this once completed and add your personal touch.<\/p>\n\n\n\n In this step, a few more flex options are demonstrated. For this tutorial, we will manually define a Custom Width<\/strong> 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.<\/p>\n\n\n\n The container should now appear like the following.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n 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. <\/p>\n\n\n\n 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.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n 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. <\/p>\n\n\n\n Note: Once the Align Content property has been applied, the Align Items setting will be over-ridden. It may be unticked.<\/p>\n\n\n\n Below are the settings for the container you should be using for this design.<\/p>\n\n\n\n Your desktop design is now completed and should appear as below. You should publish your changes, and preview in a new browser tab.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n Your services container is now completed. Preview the responsive settings once again to make sure all display properly.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n Check out some other layouts you can create with containers:<\/p>\n\n\n\n Create an Intro Section<\/a><\/p>\n\n\n\n Create a Hero Section<\/a><\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nContainer settings<\/h4>\n\n\n\n
<\/a><\/figure>\n\n\n\nReview the Container settings<\/h4>\n\n\n\n
\n
Adding the Heading<\/h3>\n\n\n\n
Styling the Heading<\/h4>\n\n\n\n
Advanced Tab options<\/h4>\n\n\n\n
<\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\nAdding an Icon Box<\/h3>\n\n\n\n
Styling the Icon Box<\/h4>\n\n\n\n
Advanced Tab options<\/h4>\n\n\n\n
<\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\nDuplicate the Icon Box x3<\/h4>\n\n\n\n
<\/a><\/figure>\n\n\n\nReview the widget properties<\/h4>\n\n\n\n
\n
Container items flex properties<\/h3>\n\n\n\n
<\/figure>\n\n\n\nDirection<\/h5>\n\n\n\n
Align Items<\/h5>\n\n\n\n
<\/figure>\n\n\n\nElements Gap<\/h5>\n\n\n\n
Wrap<\/h5>\n\n\n\n
<\/figure>\n\n\n\nJustify Content<\/h5>\n\n\n\n
<\/figure>\n\n\n\nAlign Content<\/h5>\n\n\n\n
<\/figure>\n\n\n\nReview the Container settings<\/h5>\n\n\n\n
\n
Take a breather<\/h3>\n\n\n\n
<\/a><\/figure>\n\n\n\nResponsive Settings<\/h3>\n\n\n\n
Tablet Settings<\/h4>\n\n\n\n
<\/a><\/figure>\n\n\n\nMobile Settings<\/h4>\n\n\n\n
<\/a><\/figure>\n\n\n\nCongratulations<\/h3>\n\n\n\n
Next steps<\/h2>\n\n\n\n