Kadence Tutorial: Using Kadence Blocks Pro to Quickly Create Graphic Column Layouts

Split Content is a very common type of web pagetypographicalForm, usually on one side of the display pictures, the other side of the display text content, page structure is clear, visual focus.

While the default WordPress The block editor does not support this layout, but using the Kadence Blocks Pro plugin to quickly achieve this effect.

Insert and set the Split Content block

• Open the edit page and add Split Content blocs

• Set the main parameters, including the order of graphics, content width, etc.

• Uploading or selecting pictures in the image area

• Adding a title and body to a text area

• Setting the background color of images and text sections

• Adjust vertical alignment of content in blocks (top, center, bottom)

• Set the overall alignment of the entire Split Content block (left, center, right)

• Save and preview the front-end page

Setting the Overlay effect (graphic overlay)

The Split Content block supports the overlapping of graphic and text sections to create a more dynamic look and feel.typographicalForm.

The steps are as follows:

• Insert a Row Layout Container, set to single-column layout
• Adding a Split Content Block to a Row

• Set the background color of the Row as desired, or set it to full-width.

• Adjusting Left and Right in Split Content Settings Negative Margins (Negative Margins)The text portion is overlaid with the image.

• Add content shadows if needed to enhance the visual hierarchy

• Adjust the space occupied by the content by reducing the minimum height (Min Height).

• Adjust margins and spacing in different device views to ensure visual balance

responsiveOptimized settings

The Split Content block supports independent styling for mobile and tablet:

• Switch to mobile at the bottom of the editorviewSetting the proper inside and outside margins

• Switch to flat view to further fine-tune content layout and white space

• Check presentation at all device sizes and make necessary adjustments

summarize

The Split Content block allows you to quickly create common graphic column layouts without the need for complexity.opening (chess jargon)Operation. It's perfect for showcasing products, introducing teams, and publishing promotional content. Combined with Row Layout and Negative Margins, you can also easily realize graphic overlapping effects, adding layers and variations to the page.