CTA Block (Lofty AOS)

Introduction

A CTA Block (Call to Action) is a section of your page designed to prompt visitors to take a specific next step — search listings, request a home valuation, contact you, or register on your site. It typically features a headline, a brief description, and a button that links to a specific page or triggers an action.

The CTA Block comes in multiple styles, and the available settings vary depending on the style you choose.

Adding the CTA Block

1. Open the Website CMS (from Lofty top nav: Content > Websites, then click your site).
2. Select the page you want to edit from the Pages panel.
3. Click Blocks in the left navigation to open the block library.
4. Find the CTA block type and choose your preferred style.
5. Drag the block to the position you want on the page canvas.
6. Double-click the block or click the Edit icon in the top-right to configure it.
7. Click Publish when ready.

Configuring the CTA Block

Settings vary by the style you choose. Across all CTA styles, you will find a combination of the following options:

Background

• Desktop Image — The background image shown on desktop.
• Mobile Image — A separate image optimized for mobile screens.
• Background Type — Choose between a solid Color or an Image background.
• Border Color — Set the border color around the block.

Block Size

• Desktop Size Type — Sets the height behavior on desktop (aspect ratio, full screen, or exact height).
• Height — The specific height value when using "Exact Height."
• Mobile Size Type / Mobile Height — Same controls for mobile view.

Style

• Spacing — Add spacing before or after the block to control its position on the page.

Opacity Layer

• Show Opacity Layer — Adds a translucent overlay on top of the background image, which makes text more readable.
• Vertical Margin / Horizontal Margin — Controls the padding of the opacity layer.

Heading and Description

• Heading — The main title displayed on the CTA section.
• Description — Supporting text beneath the heading.

Button

Action Type — Choose how the button behaves when clicked:

URL — Redirects the visitor to a specific page. - For pages on your Lofty site, use a relative URL (for example, /evaluation for your home evaluation page, /listings for listings). - For external pages (outside your Lofty site), enter the full URL including https:// (for example, https://www.google.com). - Open Mode — Choose whether the link opens in the current window or a new tab.

Trigger Registration — Clicking the button opens your site's global registration pop-up. - Use the Lead Type Settings dropdown to set the lead type that is captured when a visitor registers through this button. - See [Registration Pop-up Style & Settings] to configure your global pop-up.

Additional button settings: - Text — The label on the button (for example, "Search Homes," "Get My Value," "Contact Us"). - Color — The button's color. - Button Position — Where the button sits within the CTA block layout.

Tips

• Use relative URLs for internal pages. Linking to /evaluation instead of the full URL keeps your links clean and avoids broken links if your domain changes.
• Test your CTA in the visual builder before publishing. The preview panel shows exactly how the block looks — try different styles and settings before committing.
• Use "Trigger Registration" for lead capture CTAs. If your goal is to collect contact information, the Trigger Registration button type is more effective than a URL redirect — it captures the lead immediately.
• Add an opacity layer when using image backgrounds. A semi-transparent overlay makes your heading and button text much more readable against a photo background.
• Keep button text action-oriented. "Search Homes," "See What's Available," or "Get Your Value" outperform generic labels like "Click Here" or "Submit."

Troubleshooting

The button click isn't going anywhere. Check the Action Type and the URL field. If using a relative URL, make sure it starts with /. If using an external URL, make sure it starts with https://.

The background image looks cropped differently on mobile. Set a separate Mobile Image sized specifically for mobile screens. The desktop image is not automatically adapted for mobile viewports.

The "Trigger Registration" pop-up isn't appearing. Make sure your global registration pop-up is configured and enabled. See [Registration Pop-up Style & Settings] to check the pop-up settings.

Settings I expect to see aren't showing. Available settings depend on the CTA style you selected. Try a different style — some styles have more configuration options than others.

Frequently Asked Questions

Can I have more than one button on a CTA Block?

Can I change the CTA block style after I've already configured it? Yes, you can switch styles in the edit panel. Note that some settings are style-specific — switching styles may reset or hide certain configuration options.

What's the difference between a CTA Block and a Banner Block? Both can have background images and call-to-action text, but they serve different purposes. The Banner Block is primarily a visual header/hero element. The CTA Block is specifically designed for conversion-focused sections with button actions. Use Banner for visual impact at the top of a page; use CTA for mid-page or bottom-of-page prompts to act.

Questions?

If you have any questions regarding this topic or any others, please reach out to our Support Team via email at support@lofty.com, by phone at 1 (855) 981-7557, or by chat with us through your Lofty CRM.