Call To Action

In this part of the documentation, we will demonstrate how to customize the call-to-action (CTA) section of the SaaSBold boilerplate to prompt users to take specific actions.

The call-to-action (CTA) section is crucial for encouraging users to engage with the product or service, compelling them to take the next step toward conversion.

import CallToAction from "./CallToAction";

Overview

The default CTA section includes a prominent call-to-action button with a gradient background and supporting text that motivates users to act. Showcases the following:

  • Heading: A concise title that directs users towards a specific action or interaction and shows the value proposition of engaging further.

  • Description: Supporting text that elaborates on the benefits or outcomes of clicking the CTA button.

  • CTA Button: The actionable button that prompts users to perform action, such as "Get Started", "Learn More", or "Try Demo".

Steps to Customize

Locate the CallToAction Component File: Open the CallToAction component file located in components/Home/CallToAction/index.tsx

Update the Heading: Modify the heading to reflect the call-to-action message you want to convey.

index.js
...
    <h2> Get Started for Free </h2>
...

Update the Description: Edit the description text to provide compelling reasons for users to click the CTA button.

<p> Lorem ipsum dolor sit amet, consectetur ... </p>

Update the CTA Button Text: Change the button text to match the desired action, such as "Try Live Demo."

<a> Try Live Demo </a>

Review and Save: After making changes, review the updated call-to-action section to ensure it effectively encourages user engagement. Save the file and check the changes.

Tips

  • Clarity and Focus: Ensure the heading and button text are clear and straightforward, guiding users towards the desired action.

  • Compelling Content: Craft a persuasive description that outlines the benefits or solutions users can expect.

  • Visual Appeal: Customize the CTA section to draw attention to the button for enhanced user interaction.

By following these steps and tips, you can create an effective call-to-action section that promotes your website or application to interact with your product or service, ensuring user engagement.

PreviousCounterNextTestimonials

Last updated