50/50 Block

Use the 50/50 Block to display text and image in a classic side-by-side manner.

Quick links

1. Overview

2. Settings

Overview

In the Gutenberg editor, open the block section and click or drag the 50/50 Block to the editor area. Main elements of the block are:

  • Subtitle
  • Title
  • Paragraph
  • List
  • Link
  • Image

Settings

If the settings side panel is not visible while working on your page or post, click on the Settings icon in the top left corner of the editor toolbar. Once opened you will see all the available options of the selected block, organized into collapsible tabs.

General

  • Text Position – Arrange the position of the text in relation to the image
  • Content Align – Align content on the half of the block containing text
  • Padding – Add top and bottom block padding
  • Background – Choose a solid color or a background image

Note: Content Align positions containers within the block, while Text Align positions text within its own container.

Subtitle, Title, Paragraph

  • On/Off toggle – Display or hide the element
  • Text Align – Align text left, center or right within its own container
  • Font Size – Choose from nine preset sizes or add a custom font size
  • Text Color – Select a color for the subtitle, title and paragraph

List

  • On/Off toggle – Display or hide the element
  • Style – Choose one of four bullet styles: Disc, Circle, Decimal, None
  • Indentation – Display the list items indented (in pixels)
  • Text Align – Align text left, center or right within its own container
  • Font Size – Choose from nine preset sizes or add a custom font size

Link

  • On/Off toggle – Display or hide the link/button
  • URL – Set the URL address for your the link/button
  • Style – Show the link as a button or hyperlink with an arrow
  • Font Size – Choose from nine preset sizes or add a custom font size
  • Text Color – Select a color for the link/button label
  • Background Color – If the link style is set to Button, choose a color
  • Border Radius – If the link style is set to Button, edit the corner roundness (px)

Image

  • Style – The image fits in a normal (square), rounded or circular container
  • Ratio – Choose a fixed or flexible ratio (original ratio that fills the container width)
  • Size – Percentage of container width that the image occupies
  • Full Width on Mobile – Image has a 100% width on mobile screens
  • Shadow – Add a background shadow to the image
  • Hide Image on Mobile – Only the text half of the block is visible on mobile
  • Swap Image on Mobile – Reverse the text and image order on mobile

Responsive

  • Hide on Desktop – Block is visible on mobile, but not on desktop screens
  • Hide on Mobile – Block is visible on desktop, but not on mobile screens

Tip: You can create two separate blocks for a section of your page and load each block on a different screen size.

Was this article helpful?
YesNo
Was this article helpful?
YesNo