BANC

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.

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.

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.

Example Usage:

Steps:

  1. Add the block: Insert the Dual Section Block into your page or post.

  2. Choose settings:

    • Elements disposition: Image on the left, text on the right

  3. Set the content:

    • Heading: "The Family"
    • Excerpt: "The Jevons family founded JTAPE in 2003 and remain at the heart of the business today. Their hands-on leadership, strong values, and commitment to innovation continue to drive JTAPE’s growth and success in global markets."

  4. Set the image:

    • Image: Upload an image

  5. 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:

dual-section with image

Editor preview:

dual-section acf

Customization:

You can further personalize the Dual Section Block by:

  • Experimenting with the Disposition (Image Left or Image Right) to see what works best for your design and content flow.

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.

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.