Design, layouts and shortcodes

Create two columns with an image and text

Use the Split shortcode to place an image and text beside each other on larger screens. The columns automatically stack on smaller screens.

Use the shortcode picker

  1. Place the cursor where the section should appear in the content editor.
  2. Open Shortcode from the editor toolbar.
  3. Choose the split or two-column layout.
  4. Select the column ratio, gap and vertical alignment.
  5. Add an image component to one column and your text to the other.
  6. Choose the image from the Media Library.
  7. Insert the completed shortcode, then save the page.

Working example

[split ratio="equal" gap="large" align="center"]
[column]
[image media_id="42" size="match" align="center" caption="0"]
[/column]
[column]
[heading level="2"]Meet the team[/heading]
[text]Add your introduction here. Explain who the person is and how they help your customers.[/text]
[/column]
[/split]

Replace media ID 42 with your selected image. The shortcode picker does this automatically when you choose from the Media Library.

Useful choices

  • ratio="equal" gives both columns the same width.
  • ratio="wide-left" makes the first column wider.
  • ratio="wide-right" makes the second column wider.
  • gap="none|small|medium|large" controls the space between columns.
  • align="start|center|end|stretch" controls vertical alignment.
  • size="match" crops the image to the height of the adjacent text column on larger screens. It returns to natural proportions when the columns stack on mobile.

To put the image on the right, move the image shortcode into the second [column] and the text into the first.

If it does not work

  • Keep both [column]...[/column] blocks inside [split]...[/split].
  • Check that every opening shortcode has its matching closing shortcode.
  • Do not wrap the split shortcode in HTML paragraph tags when working in HTML view.
  • If the image is missing, choose it again from the Media Library.