Switcher Block

The Switcher Block is an interactive component designed to showcase a series of related items, such as different animals or products. It allows users to select an item from a menu, which then dynamically updates the displayed content (image, title, description, and a call-to-action button).

-   Preview with image:

-   Editor preview:

Content Editor Fields

General Content

• Title:
  • Description: The main heading displayed above the switcher component.
  • Usage: Enter a title for the entire section, for example, "Meet Our Animals".
  • Requirement: Optional.

Switcher (Repeater)

• Description: A list of individual items that will populate both the selection menu and the content areas.

• Usage: Click "Add Switcher" to create a new item. The first item added will be the one displayed by default when the page loads. -- Requirement: At least one item is required for the block to render.

• Fields (per item):

  • Switcher Title:
    • Description: The name of the item. This text is used in the selection menu (both desktop and mobile) and as the main heading for the content when selected.
    • Usage: Enter a short, descriptive name (e.g., "Siberian Sturgeon").
    • Requirement: Required.
  • Switcher Images:
    • Description: The image associated with this item.
    • Usage: Upload a single, high-quality image.
    • Requirement: Required for visual representation.
  • Switcher Excerpt:
    • Description: The detailed descriptive text for the item. This content appears when the item is selected.
    • Usage: Write a paragraph or two describing the item.
    • Requirement: Optional.
  • Switcher CTA (Call-to-Action):
    • Description: A link button that appears with the content.
    • Usage: Add a URL and Link Text to direct users to a relevant page (e.g., an adoption page or a detailed article).
    • Requirement: Optional.

Example Usage:

Steps:

1. Add the block: Insert the Switcher Block into your page.
2. Add a Title:
   • Title: "Featured Creatures"
3. Add Switcher Items:
   • Click "Add Switcher" to create the first item:
     • Switcher Title: "Siberian Sturgeon"
     • Switcher Images: Upload a photo of a sea turtle.
     • Switcher Excerpt: "The Siberian sturgeon (Acipenser baerii) is typically found in northern Russia, living in virtually every river system in Siberia. They can grow up to around 2 metres in length, and are long and slender with an elongated snout. You can recognise a Siberian sturgeon thanks to its scutes, which are horn-like bones that cover their bodies.."
     • Switcher CTA: Add a link with the title "Adopt Me" and a URL.
   • Click "Add Switcher" again for a second item:
     • Switcher Title: "Russian Sturgeon"
     • Switcher Images: Upload a photo of a clownfish.
     • Switcher Excerpt: "Famous for their vibrant colors, these small fish live in symbiosis with sea anemones. Find them in our coral reef exhibit."
     • Switcher CTA: Add a link with the title "Learn More" and a URL.
4. Save the Page: The block will now display the "Green Sea Turtle" content by default, with a menu to switch to the "Clownfish" content.

Result:

The Switcher Block renders a two-part interactive section.

• On the left (for desktop) or top (for mobile), it displays a menu of all the "Switcher Titles" you've added. On desktop, this is a list; on mobile, it's a dropdown select menu.
• The main content area displays the image, title, excerpt, and CTA of the currently selected item.
• When a user clicks a different name in the menu, the content area instantly updates to show the information for the newly selected item without reloading the page.

Benefits:

• Interactive Content: Engages users by allowing them to explore different items.
• Space-Efficient: Presents a large amount of information in a compact and organized way.
• Great for Comparisons: Ideal for showcasing a collection of products, services, or features side-by-side.
• Responsive Design: Automatically adapts its menu from a list on desktop to a user-friendly dropdown on mobile devices.

Conclusion:

The Switcher Block is a highly effective tool for creating dynamic, user-driven content sections. It's perfect for pages that need to present a catalog of items in an engaging and interactive format, encouraging user exploration and discovery.