10Web Help Center

Hi, how can we help?

Creating a Hero Section with 10Web Website Builder

Copy article URL

in this article

A Hero section is a pivotal element on your webpage, commonly showcasing a large image alongside text in a balanced layout. This section can serve multiple purposes, such as presenting an About Us page, a mission statement, or highlighting a product. This guide will walk you through creating an engaging Hero section using 10Web Website Builder

Getting started

To initiate, open a new or existing page in 10Web Website Builder. Here's how you can craft your Hero section on it:

Add a new container

  1. Click the + icon to add a new container.
  2. Choose the single-column layout.
  3. In the container layout settings, set the Height to 60VH.
  4. Under Item properties, select Row for the Direction.
  5. Center align the items.
  6. In the Advanced tab, apply padding to the container (e.g., 21PX).

Incorporate Image widget

  1. Drag an Image widget into your container from the Editor Panel.
  2. Select an image from your media library.
  3. Use the Width option in the Advanced Tab to adjust the image size to 50%.
  4. Optional: Apply a box shadow from the Style Tab for added effect.

Add a child container

  1. Drag a New Container to the side of your image.
  2. From the Layout tab, select Full Width.
  3. Adjust the Container's Width to 50% and set the Minimum Height to complement your image (e.g., 55VH).
  4. Optional: Add a 2PX border from the Style tab for visual distinction.

Insert content

  1. Add a Heading widget to the child container and customize it.
  2. Follow with a Text Editor widget beneath the Heading for the main body text.
  3. Introduce a Button widget below the Text Editor for a call to action, linking it as needed.
  4. Finalize by adjusting the Justify Content setting to Space Evenly in the container layout for centered alignment.
  5. If using a border, additional padding can be added in the Advanced tab of the child container (e.g., 13PX).

Adjust for responsive design

Use the Responsive Views icon to check tablet and mobile layouts.
Make necessary adjustments to text size and image width for optimal display across devices. For more details read Responsive Editing for Mobile and Tablets with 10Web Website Builder.

By following these steps, you'll create a Hero section that not only captures attention but is also optimized for various devices, enhancing your site's overall appeal and functionality.

in this article