Resources

Side-by-Side Blocks

Side-by-Side blocks are built with a dual object DOM that allows the objects to be displayed beside one another, or over/under one another. Then for responsivity they take an over/under position in mobile mode (viewports 900px width or less) allowing the objects to fill the viewport width for better for visibility on smaller devices.

One of these objects is of a specific type (image, embed, HTML), the other one is a content object with text fields and a nested content area.

• Call to Action Box (CTA) – Pre-designed HTML call-to-action box with style settings, 3 text fields and a button. The content object contains a title, subtitle, and nested content area, each with their own style settings.
• Image Inset : Inset image with overlapping content object with a Title and Nested content area.
• Media Split – Image, video or social media embed object. The content object uses the same construct as the CTA block.
• Table of Contents : Automated table of links to heading blocks found in page content beside a content object witha Nested content area.
• Testimonial – Image box with square to circle formatting (equal sides). The content object contains a title, subtitle and nested content area… but the nested content is wrapped with quotation mark icons and has a number of options for formatting the content area layout.

Tutorial

We will reference specific block settings and interface objects within the block editor. If you wish to follow along in the block editor, insert a Media Split block onto a page or post, then choose an image and enter some text in the content fields.

NOTE: In our examples on this page we use red (block) and green (content) dotted borders to help you visualize what is happening to the objects. They are not meant to look good, and they are not necessary to include in your blocks.

In this example we will setup a simple Media Split block and cover the side-by-side options. The first example uses all default settings. An image has been chosen and some text entered in each content object. You see the image on the left and content object on the right. If you size your browser width down to 900px or less you will see the image move above the content. By default the image respects the Media Width setting up to the viewport width and centers the image.

In the next example we adjust the alignment and allow the image to fill the viewport width (up to it’s true width).

• With the block selected, you will see a toolbar above the block. Click the Align Media Right button in the Object Align section. This will align the image on the right side.
• Open the Media Settings panel in the block editor sidebar. Scroll down to the Layout section and turn on the Fill Width in Mobile setting. This will override the Media Width setting and fill the available area (100% width).
• Update the page/post and view it from the front end. Then adjust the browser width again to view it in mobile mode. You will see the image above the content again despite the alignment shift, but the image will be much larger.

In the next example we retain the side-by-side nature in mobile mode.

• Open the Media Settings panel in the block editor sidebar. Scroll down to the Layout section and turn on the Side-by-Side in Mobile setting. This will ignore the normal mobile rules and keep sizing the objects to fit the viewport width. This may work fine with some images and text, but the smaller the viewport gets the more likely the content will look bad or be unreadable.
• Update the page/post and view it from the front end. Then adjust the browser width again to view it in mobile mode to see the changes.

In the next example we’ll center the image below the content.

• Turn off the Side-by-Side in Mobile setting.
• Click the Center Media Over Content button in the Object Align section of the block toolbar. This will remove the side-by-side nature of the block and center the image above the content in all browser sizes.
• You can Update and view it now if you wish, we have combined both steps into the next example.
• Open the Media Settings panel in the block editor sidebar. Scroll down to the Layout section and turn on the Media Below Content setting.
• Update and view it from the front end.