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.

图片[1]-Kadence Blocks 教程:制作图文分栏与叠加布局

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 教程:制作图文分栏与叠加布局

Insert and set the Split Content block

  • Open the edit page and add Split Content blocs
图片[3]-Kadence Blocks 教程:制作图文分栏与叠加布局
  • Set the main parameters, including the order of graphics, content width, etc.
图片[4]-Kadence Blocks 教程:制作图文分栏与叠加布局
  • Uploading or selecting pictures in the image area
图片[5]-Kadence Blocks 教程:制作图文分栏与叠加布局
  • Adding a title and body to a text area
图片[6]-Kadence Blocks 教程:制作图文分栏与叠加布局
图片[7]-Kadence Blocks 教程:制作图文分栏与叠加布局
  • Setting the background color of images and text sections
图片[8]-Kadence Blocks 教程:制作图文分栏与叠加布局
  • Adjust vertical alignment of content in blocks (top, center, bottom)
图片[9]-Kadence Blocks 教程:制作图文分栏与叠加布局
  • Set the overall alignment of the entire Split Content block (left, center, right)
图片[10]-Kadence Blocks 教程:制作图文分栏与叠加布局
  • Save and preview the front-end page
图片[11]-Kadence Blocks 教程:制作图文分栏与叠加布局

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 教程:制作图文分栏与叠加布局

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 教程:制作图文分栏与叠加布局
  • Set the background color of the Row as desired, or set it to full-width.
图片[14]-Kadence Blocks 教程:制作图文分栏与叠加布局
  • Adjusting Left and Right in Split Content Settings Negative Margins (Negative Margins)The text portion is overlaid with the image.
图片[15]-Kadence Blocks 教程:制作图文分栏与叠加布局
  • Add content shadows if needed to enhance the visual hierarchy
图片[16]-Kadence Blocks 教程:制作图文分栏与叠加布局
  • Adjust the space occupied by the content by reducing the minimum height (Min Height).
图片[17]-Kadence Blocks 教程:制作图文分栏与叠加布局
  • Adjust margins and spacing in different device views to ensure visual balance
图片[18]-Kadence Blocks 教程:制作图文分栏与叠加布局

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 教程:制作图文分栏与叠加布局
  • Switch to flat view to further fine-tune content layout and white space
图片[20]-Kadence Blocks 教程:制作图文分栏与叠加布局
  • 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.


Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!
客服微信
Customer Service
Tel: 020-2206-9892
QQ咨询:1025174874
(iii) E-mail: [email protected]
Working hours: Monday to Friday, 9:30-18:30, holidays off
© Reprint statement
本文作者:托尼屎大颗
THE END
If you like it, support it.
kudos6213 share (joys, benefits, privileges etc) with others
commentaries sofa-buying

Please log in to post a comment

    No comments