1. Home
  2. Knowledge Base
  3. Pro Block Tutorials
  4. Split Content Block

Split content is an extremely popular layout in web design. Creating a split content in the default Blocks Editor is not possible though. Luckily, setting it up is simple with Kadence Blocks Premium.

Configure Split Content Block

Select the Split Content Block from the blocks selection:

Select Split Content Block

Set your split content block’s main settings:

Main Split Content Settings

Add an image to your split content

Add Image to Block

Set the heading of your split content:

Set Heading

 Add content to your split content block:

Add Content to Page

 Set the background colors for your block

Set Background Colors

 Set the alignment of the block’s content:

Set Content Alignment

Set the alignment of the split content block:

Align Block

Save the page and view your spilt content to be sure you’re happy with it:

View Front End

Configure Split Content Overlay

Split Content Example

The Split Content block also allows you to set a negative margin for your content in order to create an overlay.

Add split content to a row layout block with a single column. setup the row as desired:

Add To Row

Configure your row settings. If you’d like a background for your split content, you can set it here. You can also set it to be fullwidth if desired:

Row Layout Settings

Configure your split content

Configure Content

Set negative side margin to move the content

Adjust Margin

If desired, set a content shadow

Add Content Shadow

If you want, you can also decrease the min-height to adjust the content height

Adjust Min Height

Be sure to adjust the mobile and tablet padding and margins to optimize your split content on all devices.

Mobile Spacing:

Mobile Spacing

Tablet Spacing:

Tablet Spacing

View your split content block in all screen sizes and adjust the spacing settings if necessary:

View in All Screen Sizes

Was this article helpful?

Related Articles