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.
![图片[1]-Kadence Blocks 教程:制作图文分栏与叠加布局](https://www.361sale.com/wp-content/uploads/2025/03/20250331145116966-image.png)
While the default WordPress The block editor does not support this layout, but using the Kadence Blocks Pro plugin to quickly achieve this effect.
![图片[2]-Kadence Blocks 教程:制作图文分栏与叠加布局](https://www.361sale.com/wp-content/uploads/2025/03/20250331112434496-image.png)
Insert and set the Split Content block
- Open the edit page and add Split Content blocs
![图片[3]-Kadence Blocks 教程:制作图文分栏与叠加布局](https://www.361sale.com/wp-content/uploads/2025/03/20250331112507977-image.png)
- Set the main parameters, including the order of graphics, content width, etc.
![图片[4]-Kadence Blocks 教程:制作图文分栏与叠加布局](https://www.361sale.com/wp-content/uploads/2025/03/20250331112514496-image.png)
- Uploading or selecting pictures in the image area
![图片[5]-Kadence Blocks 教程:制作图文分栏与叠加布局](https://www.361sale.com/wp-content/uploads/2025/03/20250331112538653-image.png)
- Adding a title and body to a text area
![图片[6]-Kadence Blocks 教程:制作图文分栏与叠加布局](https://www.361sale.com/wp-content/uploads/2025/03/20250331112603925-image.png)
![图片[7]-Kadence Blocks 教程:制作图文分栏与叠加布局](https://www.361sale.com/wp-content/uploads/2025/03/20250331112712754-image.png)
- Setting the background color of images and text sections
![图片[8]-Kadence Blocks 教程:制作图文分栏与叠加布局](https://www.361sale.com/wp-content/uploads/2025/03/20250331112721529-image.png)
- Adjust vertical alignment of content in blocks (top, center, bottom)
![图片[9]-Kadence Blocks 教程:制作图文分栏与叠加布局](https://www.361sale.com/wp-content/uploads/2025/03/20250331112744202-image.png)
- Set the overall alignment of the entire Split Content block (left, center, right)
![图片[10]-Kadence Blocks 教程:制作图文分栏与叠加布局](https://www.361sale.com/wp-content/uploads/2025/03/20250331112816563-image.png)
- Save and preview the front-end page
![图片[11]-Kadence Blocks 教程:制作图文分栏与叠加布局](https://www.361sale.com/wp-content/uploads/2025/03/20250331112826526-image.png)
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.
![图片[12]-Kadence Blocks 教程:制作图文分栏与叠加布局](https://www.361sale.com/wp-content/uploads/2025/03/20250331112904580-image.png)
The steps are as follows:
- Insert a Row Layout Container, set to single-column layout
- Adding a Split Content Block to a Row
![图片[13]-Kadence Blocks 教程:制作图文分栏与叠加布局](https://www.361sale.com/wp-content/uploads/2025/03/20250331113000786-image.png)
- Set the background color of the Row as desired, or set it to full-width.
![图片[14]-Kadence Blocks 教程:制作图文分栏与叠加布局](https://www.361sale.com/wp-content/uploads/2025/03/20250331113016447-image.png)
- Adjusting Left and Right in Split Content Settings Negative Margins (Negative Margins)The text portion is overlaid with the image.
![图片[15]-Kadence Blocks 教程:制作图文分栏与叠加布局](https://www.361sale.com/wp-content/uploads/2025/03/20250331113055160-image.png)
- Add content shadows if needed to enhance the visual hierarchy
![图片[16]-Kadence Blocks 教程:制作图文分栏与叠加布局](https://www.361sale.com/wp-content/uploads/2025/03/20250331113104565-image.png)
- Adjust the space occupied by the content by reducing the minimum height (Min Height).
![图片[17]-Kadence Blocks 教程:制作图文分栏与叠加布局](https://www.361sale.com/wp-content/uploads/2025/03/20250331113111132-image.png)
- Adjust margins and spacing in different device views to ensure visual balance
![图片[18]-Kadence Blocks 教程:制作图文分栏与叠加布局](https://www.361sale.com/wp-content/uploads/2025/03/20250331113216657-image.png)
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
![图片[19]-Kadence Blocks 教程:制作图文分栏与叠加布局](https://www.361sale.com/wp-content/uploads/2025/03/20250331113422541-image.png)
- Switch to flat view to further fine-tune content layout and white space
![图片[20]-Kadence Blocks 教程:制作图文分栏与叠加布局](https://www.361sale.com/wp-content/uploads/2025/03/20250331113357494-image.png)
- 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.
Link to this article:https://www.361sale.com/en/48315/The article is copyrighted and must be reproduced with attribution.


















![表情[wozuimei]-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/themes/zibll/img/smilies/wozuimei.gif)
![表情[baoquan]-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/themes/zibll/img/smilies/baoquan.gif)

No comments