In this article, you will learn how to craft a Services section using 10Web Builder containers and their properties. This guide focuses on utilizing a basic yet frequently employed design approach, optimizing it through the use of containers rather than traditional sections and columns.
Getting started
You'll need just two widgets alongside a container for this tutorial: the Heading widget and the Icon Box widget.
Creating the container
Start by adding a new container element through the + icon in the main editor window. Select a single container as per the layout options presented.
Configure the container to a boxed width of 1140 px by default, with a viewport height of 55 VH. Ensure the overflow is set to hidden, and set the HTML tag to section. Though we'll skip the Items tab initially, it's crucial for later steps.
Container Settings should be configured as follows:
- Width: Boxed (1140px)
- Minimum Height: 55VH
- Overflow: Hidden
- HTML Tag: Section
Adding and styling the heading
Add the Heading widget. For the text, type in your desired heading, like Our Services, using H2 for the HTML tag. Align the heading center within its wrapper.
Under Style tab > Typography, apply a global font style preset for the font size (e.g., 4.768 REM). Further color and style adjustments can be made later.
In the advanced tab, set the Custom Width property to 100% to ensure the Heading spans the container's width.
Incorporating an Icon Box
Insert an Icon Box widget into the container, choosing an icon from the Font-Awesome selection or an SVG file. Opt for a stacked view to enhance visual appeal. Label it, for instance, Service 1, and provide a succinct description. Adding a link is optional at this stage.
Duplicate the Icon Box three times for a total of four, adjusting each title accordingly. Align these widgets vertically within the container.
Adjusting container items and flex properties
Return to the container's layout editor by clicking the container. In the Items tab, set the Direction to Row for a horizontal layout, ensuring items align and wrap appropriately.
Apply the Wrap property to allow for proper item spacing and alignment. Set the Justify Content to space around for equal horizontal spacing and Align Content to space evenly for vertical alignment.
Responsive settings
Preview the responsive settings to ensure everything displays correctly across devices by clicking on the device icon from the top panel.
- Desktop design: With the settings above, your desktop design is complete. Publish and preview your work in a new browser tab.
- Tablet and mobile adjustments: Adapt your design for responsiveness on tablet and mobile devices by adjusting the icon boxes' width and the container's height. For tablets, a 50% width may be ideal, while for mobile views, a 100% width with adjusted element gaps ensures optimal display.
For more details regarding responsive editing, read Responsive Editing for Mobile and Tablets with 10Web Website Builder.
Congratulations! You've successfully created a services section using the 10Web Builder. Customize further with your styling preferences for colors, backgrounds, and text. Additional adjustments like padding can refine the design to your liking.