Creating an engaging Call to Action (CTA) is crucial for guiding your visitors toward your desired action, and 10Web Website Builder provides two primary methods to achieve this.
For a quick setup, you can utilize the dedicated Call-to-Action premium widget available in the widget panel. Simply drag the widget onto your page and customize its settings according to your preferences.
For those seeking more control and customization options, building your CTA manually with basic widgets is the way to go. This approach offers flexibility in design and functionality, allowing you to tailor every aspect of your CTA to match your site's unique style and needs. This article will guide you through both methods, ensuring you can create a compelling CTA that resonates 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
- Click the + icon to add a new container.
- Choose Boxed width for a defined space or Full Width for edge-to-edge coverage.
- Under the Style tab, apply a background color or style. Utilize global colors for quick styling.
- In the Advanced tab, add padding to your container (e.g., 21PX).
Add your content and align it using flex properties
- Drag a Heading widget into your container to introduce your CTA and customize the text.
- Place a Button widget below the heading. Link it as necessary.
- With the container selected, expand the Items section.
- Set the Direction to Row for horizontal alignment of widgets.
- Use Align Items to center widgets vertically and Justify Content to adjust the spacing between them.
Adjust for responsive design
- Open Responsive mode at the top panel, selecting the desired viewport.
- For tablets, minor adjustments are usually sufficient.
- 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
- Add a child container by dragging another Container widget into the primary one.
- Insert a Heading widget inside the child container for additional messaging.
- In the Layout tab of the child container, set its Width to Full Width and adjust using the slider, respecting parent container properties.
- Utilize Items properties for content alignment and Gap to space out your widgets.