Creating an Intro Section with 10Web Website Builder

Creating an engaging intro section is essential for making a strong first impression on your website visitors. This section typically includes a welcoming title, tagline, and buttons that guide users to more information or purchases. Using 10Web Website Builder, you can easily craft this key component of your website. Here's how to create an intro section using containers.

Setting up your intro section

1. Start a New Page: Begin by creating a new page on your website or opening an existing one with the editor tool.
2. Add a Container: Click the + icon to add a new container to your page. Choose the single container layout, set it to Full Width from the Container Width dropdown, and adjust the Minimum Height to your preference (e.g., 60VH). For the background, either pick a color or upload an image under the Style Tab. Utilizing a global color can streamline this process.
3. Insert a Welcome Heading: Drag a Heading widget from the Panel into your container. Keep the default H2 HTML tag, center the text, and then customize the style as desired or use a global style. In the Advanced Tab, set the Heading's width to 100% to allow it to utilize the full container width.
4. Add a Tagline Message: Drag another Heading widget into the container for your subheading, selecting H3 for the HTML tag. Center this heading as well and apply your styling or global styles. Adjust the width to 100% in the Advanced Tab.
5. Include Buttons: Place a Button widget into the container. Choose a large size for the button, and link it as needed. You can duplicate the button for additional calls to action.
6. Configure Container Flex Properties: Edit the container and go to the Items section under the Layout Tab. Change the Direction to column, and choose Center for both Justify Content and Justify Items. Adjust the gap between items to your preference (e.g., 34PX).

Finalizing and customizing

Responsive Adjustments

Check your intro section in various responsive modes and make necessary adjustments, especially to the container's height and the gaps between elements.

Get creative

Now that the foundation is set, experiment with different flex property combinations and background images to give your intro section a unique and polished look.

By following these steps, you can create a welcoming and functional intro section that enhances your site's initial user interaction.