Dual Section Block

The Dual Section Block allows you to create a visually appealing section with content and an image side-by-side. It provides flexibility in both layout and styling, making it suitable for a variety of use cases, such as highlighting products, showcasing features, or drawing attention to important information.


Content Editor Fields

Heading

  • Description: The main heading of the section, which should grab the user's attention.
  • Usage: This is the most prominent text in the block and should be used to introduce the section's content.

Excerpt

  • Description: The main content of the section, displayed below the headings.
  • Usage: This is where you place the description, explanation, or key information. It can be formatted as plain text, a list, grids depending on the layout you choose.

Image

  • Description: An image that will be displayed alongside the content.
  • Usage: Upload an image relevant to the content, such as a product image, service graphic, or a visual related to the text.

Call-to-Action Buttons

  • Description: Add multiple buttons with links and custom titles to encourage user interaction.
  • Usage: You can add one or more buttons, linking to relevant pages such as product details, contact forms, or external resources.

Examples include: - Button Text: Learn More, Buy Now, Contact Us - URL: Provide the link to the relevant page or action.


Disposition (Layout Options):

The Dual Section Block offers two layout options for arranging the image and content columns.

Image Left

  • Description: The image appears on the left side, and the content (heading, excerpt, and buttons) appears on the right.
  • Usage: Best used when you want the visual element to be the first thing users see when they enter the section.

Image Right

  • Description: The image appears on the right side, and the content appears on the left.
  • Usage: Useful when the written content is more important to be seen first before the image.

List Style (Excerpt Styling):

You can choose between two different styles for the excerpt content.

List

  • Description: Displays the bulleted list in excerpt with a small square list style .
  • Usage: Use this if you are highlighting features or benefits, or listing multiple points, and list them as normal stack up list format.

Gird

  • Description: Displays the bulleted list in excerpt as grid.
  • Usage: Use this if you are highlighting features or benefits, or listing multiple points, and list them as 2 * 2 grid on desktop and normal list format on mobile.

Example Usage:

Steps:

  1. Add the block: Insert the Dual Section Block into your page or post.
  2. Choose settings:
    • List Style: List
    • Elements disposition: Image on the left, text on th right
  3. Set the content:
    • Heading: "Why we aim for sustainability"
    • Excerpt: "Climate change and consumer demands mean sustainability is more important than ever. With Tyler you’ll have access to greener products that’ll improve your eco efforts."
  4. Set the image:
    • Image: Upload an image
  5. Add a Call-to-Action Button:
    • Link: "Learn More"
    • URL: Provide a link to the landing page.
  6. Save the Block: Your Dual Section block is now ready for display!

Result:

When properly configured, the Dual Section Block will render a visually appealing section on your webpage. For example, the product image will be on the left, with a heading, description, and a "Learn More" button on the right. The image and content create a balanced and professional layout, drawing users' attention to both visual and textual information.

Preview with image (following with List = Grid type):

dual-section with image

Editor preview:

dual-section acf

Customization:

You can further personalize the Dual Section Block by:

  • Adding multiple Call-to-Action Buttons to guide users to different actions or pages.
  • Experimenting with the Disposition (Image Left or Image Right) to see what works best for your design and content flow.
  • Using different List Styles for the excerpt content, such as bulleted lists or grids for feature highlights or plain text for descriptions.

Benefits:

  • Visual Appeal: The block creates a clean and engaging layout by combining content and images side-by-side.
  • Flexibility: You can easily switch between different layouts, adjust the image placement, and format the excerpt.
  • User Engagement: By adding Call-to-Action buttons, you provide clear paths for users to take action, such as learning more, purchasing a product, or signing up.

Conclusion:

The Dual Section Block is a powerful and versatile tool for building engaging sections on your website. It provides flexibility in terms of layout, styling, and user interaction, making it an excellent choice for any content that combines text and images in a structured, visually appealing way.