What is a Full-Width Call-to-Action?
A call to action (CTA) is a prompt on a website that encourages users to take a specific desired action. This CTA component features an impactful full-width design that incorporates a large image and prominent buttons to enhance user engagement.
Purpose
The primary purpose of a call to action is to guide website visitors toward a specific goal. CTAs clearly indicate the next step, turning passive browsing into meaningful engagement and helping users navigate their website journey.
Where and How to Use Full-Width CTAs
Where to Use Them
Full-Width CTAs are specifically designed for full-width pages—those without a left-column menu. They work best on homepages, landing pages, or any page where a strategic call to action needs to be highly visible and draw immediate attention.
Avoid using Full-Width CTAs on pages that have a left sidebar menu. These pages restrict the CTA's ability to extend across the full width of the screen, reducing its visual impact and undermining its effectiveness.
How to Use Them
Full-Width CTAs are best utilized for high-priority actions that you want users to focus on. Because of their ability to provide context and description, a Full-width CTA can act as a standalone content section or as the culminating component to a related section of the page.
Display Options
The Full-width CTA offers light or dark text box options to suit the contrast needs of your background image.
Image Selection Guidelines
When selecting a background image for this component, remember that the text box and buttons will occupy the central area. Users will mainly see the outer edges of the photo, so avoid images where the middle contains crucial visual elements. Additionally, consider these important factors:
- Simplicity and focus: Avoid overly busy or complex images that might distract from the main content of the page. The image should complement, not overwhelm, the surrounding content.
- Relevance: Select images that are related to the content or message of the sections they are dividing. Images should enhance or support the content rather than distract from it.
- Consider illustrations and patterns: Illustrations or subtle patterns can work well, offering a creative alternative to photography.
- High quality and high resolution: Ensure images are high-quality and large enough to maintain clarity on different screen sizes without pixelation.
Availability in Drupal Cloud
In Drupal Cloud, this component is labeled "Call to Action - Full Width” to group it alphabetically with other CTA types in the component list. Adding this component to Drupal Cloud pages initially requires assistance from the Office of University Communications (OUC) by emailing web@brown.edu. Our team can help ensure you have the appropriate page type, content strategy, and images for adding this component effectively. Once the component is placed, web content editors can freely edit or remove it from their page.
See a Sample Page Using a Full-Width CTA
Pitfalls to Avoid
- Avoid starting a page with a Full-Width CTA when the page also has a banner image. Users should typically first encounter introductory or contextual content that sets the stage for the action you want them to take.
- Do not use a Full-Width CTA as the only element on a page—a Full-Width CTA should complement surrounding content, not stand alone.
- Never use multiple Full-Width CTAs back-to-back or too close together on the same page.
- Avoid using Full-Width CTAs on pages that are not full-width (i.e., pages with a left sidebar menu).