Creating a Call to Action Section with 10Web Website Builder

An effective Call to Action (CTA) is essential for encouraging visitors to take the desired action on your site. With 10Web Website Builder, you can create a CTA using two approaches.

For a quick and straightforward setup, the Call-to-Action widget provides an easy way to design and customize your CTA with minimal effort. Alternatively, if you need more control over the design and functionality, you can manually create a CTA using basic widgets. This method gives you the flexibility to tailor every detail to align with your site’s style and goals.

This guide explores both methods to help you design an engaging CTA that connects with your audience.

Getting started

Start by Accessing Your Page: Either create a new page or click on the Edit button next to an existing one on the AI Builder panel of your 10Web dashboard.

Insert a container

1. Click the + icon to add a new container.
2. Choose Boxed width for a defined space or Full Width for edge-to-edge coverage.
3. Under the Style tab, apply a background color or style. Utilize global colors for quick styling.
4. In the Advanced tab, add padding to your container (e.g., 21PX).

Add your content and align it using flex properties

1. Drag a Heading widget into your container to introduce your CTA and customize the text.
2. Place a Button widget below the heading. Link it as necessary.
3. With the container selected, expand the Items section.
4. Set the Direction to Row for horizontal alignment of widgets.
5. Use Align Items to center widgets vertically and Justify Content to adjust the spacing between them.

Adjust for responsive design

1. Open Responsive mode at the top panel, selecting the desired viewport.
2. For tablets, minor adjustments are usually sufficient.
3. On mobile, changing the container direction to a Column and adjusting Align Items might be necessary for optimal design fit.

For more details regarding responsive editing, read Responsive Editing for Mobile and Tablets with 10Web Website Builder.

Incorporate additional content

1. Add a child container by dragging another Container widget into the primary one.
2. Insert a Heading widget inside the child container for additional messaging.
3. In the Layout tab of the child container, set its Width to Full Width and adjust using the slider, respecting parent container properties.
4. Utilize Items properties for content alignment and Gap to space out your widgets.