Side By Side Standard

Overview

Introduction: The Side By Side Standard component displays content and images in a side-by-side layout, with each section alternating the position of the text and image. This layout is perfect for showcasing information in a visually balanced, easy-to-read format, with customizable options to adjust the order and appearance.

Key Features:

  • Alternating Layout: Text and image sections alternate left and right, providing a visually engaging experience and breaking up the page layout.
  • Flexible Content: Each section includes customizable headings, descriptions, buttons, and images, allowing for a variety of content types and formats.
  • Full-Width Option: Choose between a full-width layout or standard-width container for different presentation styles.
  • Image Positioning: Customize the starting position of images to align with your design preferences.

Best use cases

Examples of Effective Use:

  • Ideal for feature highlights on product pages, showcasing different aspects with supporting visuals.
  • Effective for storytelling, where each section represents a new part of a process, concept, or journey.
  • Suitable for “About” or informational pages where multiple topics or points need individual focus.

How NOT to use this

Common Missteps:

  • Avoid using excessive text in each section, as it may reduce readability and detract from the overall visual flow.
  • Do not use low-resolution images, as they will be prominent in the layout and may impact the professional appearance.
  • Ensure that the images and text content are cohesive to avoid confusing the viewer.

FAQ, pro tips, and troubleshooting

  • Pro Tip: Use concise, impactful text to complement each image for a clean, professional look.
  • Troubleshooting: If the layout does not alternate as expected, ensure that the start image position setting is properly configured.