Highlight Block

The Highlight Block is a visually impactful component designed to draw user attention to a key message or call-to-action. It features a large background image with text and buttons overlaid on top, making it perfect for promotional banners or featured content sections.

Content Editor Fields

• Heading:

  • Description: The main title for the highlight section. This text is typically large and prominent.
  • Usage: Enter a short, compelling headline.
  • Requirement: Optional.

• Excerpt:

  • Description: A short paragraph of text that appears below the heading to provide more context or information.
  • Usage: Add a brief description to support the main heading.
  • Requirement: Optional.

• Image:

  • Description: The background image for the entire block.
  • Usage: Upload a high-quality, landscape-oriented image. If this field is left empty, the block will automatically use the page's "Featured Image" as a fallback.
  • Requirement: Optional, but highly recommended for the intended visual effect.

• CTAs (Call-to-Action Buttons):

  • Description: A repeater field to add one or more buttons to the block.
  • Usage: Add buttons to direct users to other pages or actions.
  • Fields (per button):
    • URL: The destination link for the button.
    • Title: The text displayed on the button.
  • Requirement: Optional.

Example Usage:

Steps:

1. Add the block: Insert the Highlight Block into your page.
2. Add Content:
   • Heading: "Become a member"
   • Excerpt: "Fancy visiting Europe’s largest collection of sharks as many times as you want for a whole year? Try our Annual Membership for unlimited aquatic fun and many perks!"
3. Upload an Image:
   • Image: Upload a stunning, wide-angle photo of an underwater aquarium tunnel.
4. Add a CTA:
   • Click "Add CTA".
     • Title: "Join today"
     • URL: "/membership"
5. Save the Page: The block will now display the text and button overlaid on the background image.

Result:

The Highlight Block renders as a full-width section with the selected image serving as a dramatic background. The heading, excerpt, and call-to-action buttons are centered on top, creating a strong visual focal point that is designed to capture attention and drive user engagement.

Preview with image:

Editor preview:

Benefits:

• Visually Striking: Creates a powerful, full-width visual element on the page.
• Clear Focal Point: Effectively draws the user's eye to a specific message or promotion.
• Drives Action: The prominent placement of CTAs encourages users to click through.
• Simple to Configure: Requires only a few fields to create a professional-looking section.

Conclusion:

The Highlight Block is a simple yet highly effective tool for creating eye-catching promotional sections. It is ideal for homepages, landing pages, or any page where you need to present a key piece of information in a visually compelling way.