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

  1. Select the Split Content Block from the blocks selection:
    Select Split Content Block
  2. Set your split content block’s main settings:
    Split Content Main Settings
  3. Add an image to your split contentAdd Image to Split Content
  4. Set the heading of your split content:Set Split Content Heading
  5.  Add content to your split content block:Add Content to Block
  6.  Set the background colors for your blockSet Background Colors
  7.  Set the alignment of the block’s content:
    Set Content Alignment
  8. Set the alignment of the split content block:
    Set Alignment of Block
  9. Save the page and view your spilt content to be sure you’re happy with it:
    View Split Content On Published Page

 

Configure Split Content Overlay


Split Content Overlay Example

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

  1. Add split content to a row layout block with a single column. setup the row as desired:Add Split Content to Row
  2. 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
  3. Configure your split contentConfigure Split Content
  4. Set negative side margin to move the contentSet Margin for Content
  5. If desired, set a content shadowConfigure Content Shadow
  6. If you want, you can also decrease the min-height to adjust the content heightDecrease Content Height
  7. 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

     

  8. View your split content block in all screen sizes and adjust the spacing settings if necessary:View in All Screen Sizes