Feature Block

The Feature Block is a flexible component designed to showcase content alongside an image. It can be configured as a single, large feature section or as a series of smaller, two-column feature cards. This makes it ideal for highlighting services, detailing product features, or creating visually engaging content sections.

Example on the current website

-   Example: View live example

-   Preview with image:

-   Editor preview:

Content Editor Fields

General Content

• Title:

  • Description: The main title displayed at the very top of the block, above all feature content.
  • Usage: Enter a concise heading for the entire section.
  • Requirement: Optional.

• Subtitle:

  • Description: A smaller subtitle displayed directly below the main title.
  • Usage: Provide additional context for the section.
  • Requirement: Optional.

Layout & Style Options

• Layout:

  • Description: Determines the overall structure of the block.
  • Options:
    • Full Width: Creates a single, large feature section with one image and one content area.
    • Two Columns: Creates a repeater for adding multiple, smaller feature cards, each with its own image and content.
  • Usage: Select the layout that best fits your content needs.
  • Requirement: Required. Default is Full Width.

• Disposition (for Full Width layout):

  • Description: Controls the horizontal arrangement of the image and text content.
  • Options:
    • Text Left: The content appears on the left, and the image on the right.
    • Text Right: The content appears on the right, and the image on the left.
  • Usage: Choose the desired order for the two columns.
  • Requirement: Required.

• Width Ratio (for Full Width layout):

  • Description: Sets the proportional width of the two columns (image vs. text).
  • Options: Half-Half, One-Third-Two-Thirds, etc.
  • Usage: Select the column ratio that best suits your content and image.
  • Requirement: Required.

Full-Width Layout Fields

These fields are available when Layout is set to Full Width.

• Image:

  • Description: The image for the feature section.
  • Usage: Upload a single image. If left empty, the page's featured image will be used as a fallback.
  • Requirement: Optional.

• Heading:

  • Description: The main title for the content area.
  • Requirement: Optional.

• Subheading:

  • Description: A smaller subtitle displayed below the heading.
  • Requirement: Optional.

• Excerpt:

  • Description: The main body of text for the content area.
  • Requirement: Optional.

• Background Color for Text:

  • Description: Sets the background color of the text content area.
  • Options: A dropdown of predefined colors (e.g., Jelly, Tropic).
  • Requirement: Required. Default is Jelly.

• Button Color:

  • Description: Sets the color style for the call-to-action buttons, when Background Color for Text: is Dark.
  • Options: A dropdown of predefined colors (e.g., mustard and dark).
  • Requirement: Required.

• Feature CTAs (Call-to-Action Buttons):

  • Description: A repeater field to add one or more buttons.
  • Fields (per button):
    • URL: The destination link.
    • Title: The text displayed on the button.

Two-Columns Layout Fields

These fields are available when Layout is set to Two Columns.

• Feature Cards (Repeater):

  • Description: A list of individual feature items that will be displayed.
  • Usage: Click "Add row" under Feature Cards to create a new item.

• Fields (per card):

  • Image: The image for this specific card.
  • Background Color for Text: The background color for this card's text area.
  • Heading: The title for this card.
  • Excerpt: The descriptive text for this card.
  • CTAs: A repeater to add one or more buttons specific to this card.

Example Usage (Two-Columns Layout)

Steps:

1. Add the block: Insert the Feature Block into your page.
2. Set General Content:
   • Title: "Our Main Attractions"
3. Choose Layout:
   • Set Layout to Two Columns.
4. Add Feature Cards:
   • Click "Add row" under Feature Cards for the first item:
     • Image: Upload an image of a shark.
     • Background Color for Text: Dark
     • Heading: "Volunteering"
     • Excerpt: "Diam volutpat pulvinar ullamcorper urna viverra nunc nec dui. Ornare nisi est in in vel sodales morbi. Placerat nec amet."
     • CTAs: Add a button with Title "Find Out More" and a link.
   • Click "Add Feature Card" for a second item:
     • Image: Upload an image of a turtle.
     • Background Color for Text: Dark
     • Heading: "Blog"
     • Excerpt: "Sed gravida at tristique facilisis vulputate turpis amet. Adipiscing integer dolor faucibus dui blandit nisl dapibus quis. Commodo non."
     • CTAs: Add a button with Title "Find Out More" and a link.
5. Save the Page: The block will now display a title followed by two feature cards, each with its own image, text, and button.

Result

The Feature Block renders a highly polished and structured section.

• In Full Width mode, it creates a prominent, single feature with a large image and detailed text content, perfect for primary calls-to-action.
• In Two Columns mode, it generates a series of compact, visually consistent cards, excellent for listing multiple services or points of interest.

Benefits

• Highly Flexible: Can be used for a single, impactful feature or a list of smaller ones.
• Structured Layout: Organizes content and images in a clean, professional manner.
• Customizable: Offers control over layout, colors, and content on a per-card basis in the two-column mode.
• Visually Engaging: Combines strong imagery with text to capture user attention effectively.

Conclusion

The Feature Block is a versatile and powerful component for creating a wide range of promotional and informational content sections. Its dual-mode functionality makes it an essential tool for building dynamic and engaging pages.