Overlapping Columns With Kadence Blocks

There’s always more than one way to do something. In my previous post, we explored how to use the core WordPress Media & Text block for placing text on either side of an image or video. Now, we’ll delve into the Kadence Blocks plugin to build the same dynamic layout with overlapping columns. The plugin has a bunch of custom blocks that extend the editing and design capabilities of WordPress. It has become one of my “go to” plugins.

Install the Plugin

First, we need to add the Kadence Blocks plugin to our site.

Go to the Plugins section: in the left sidebar, hover over “Plugins“, click on “Add Plugin“.
In the Search field (upper right corner), type “Kadence Blocks“.
In the results listing, look for its full name: “Gutenberg Blocks with AI by Kadence WP – Page Builder Features“.
Click on the “Install Now” button.
Click on the “Activate” button.

Defaults

We’ll use a sequence of several custom blocks to construct our layout:

Row Layout > Section > Image (Adv) and Text (Adv)

Click on the Block Inserter plus (+) sign in the page’s top horizontal submenu, to the left of the Document Overview button to display the full list of available blocks. All of the Kadence Blocks (and any other plugin blocks) will appear at the top of this full list. When you know the name of the block you want, you can type a backslash “/” at the start of a new paragraph. If you see the Row Layout block in the short list, select it. Otherwise, type the letter “r” or “row” after the backslash to filter the block list and select “Row Layout“.

Row Layout > Section

The Row Layout block is the foundation for all Kadence layouts. Everything begins with this container block. You’ll have many options for the number of columns. For our layout, we’ll select “Two: Equal“. This automatically creates 2 Section blocks of equal width nested inside the Row Layout block.

Kadence Row Layout block - Select Your Layout

Leave all of the defaults intact for now.

Layout tab > Column Gutter and Row Gutter: MD
Advanced tab > Top and Bottom Padding: SM
Toolbar > Vertical Alignment: Align top

Section > Image (Adv) and Text (Adv)

You can choose the core image and text blocks, if you like. Many of the Kadence blocks have advanced features. So, in our tutorial, we’ll use the Image (Adv) and Text (Adv) blocks to take advantage of their enhanced settings.

Next, let’s place content inside the columns, starting with the image. Click on the Block Inserter plus (+) sign in the left Section block to open an abbreviated list of common blocks. If you don’t see the Image (Adv) block here, type “image” in the search field OR click on “Browse all” to display the full list.

For the right Section block, we’ll use the Text (Adv) block. This is a more robust block than the core WordPress text block. It can be used for both headings and text, as well as Span and Div. Its default is an H2 heading, so be sure to change it to a Paragraph.

Default layout

Paragraph content goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Modifications

1. Add a Heading and Change Its Styling

Add a Text (Adv) block above the paragraph, change the tag to an H4 Heading, then style it.

Style tab

Text Color
30px Font Size
Bottom Border: 1px

Advanced tab

Bottom Padding: .5rem

Kadence Text (Adv) block - Advanced - padding margin

2. Row Layout block

Advanced tab

Top and Bottom Padding: 0
(click the Reset button)

Kadence Row Layout block - Advanced - 0 padding

Toolbar

Vertical Alignment: Align Middle

RESULTS

Here’s Our Nice Heading

3. Negative Margins: Move Head and Text to Overlap Image

Negative margins enable us to move text so that it overlaps the image. This powerful feature is found in the Section block’s Advanced tab.

Select the right Section block that contains the H4 and Text blocks.
Advanced tab > Margin:
- Click on the slider icon to Set custom size.
- Click on the link icon to unlink the sides.
- Left margin: -12rem.
  NOTE: you cannot use the slider for negative margins. Type the minus sign and the number inside the field.
- Right margin: 12rem.
  To maintain the original block width, use the same amount as the left margin, but make sure it’s a positive number!

Play with the dimensions until you get what you want.

Kadence Section block - Advanced - negative margins

Results

Here’s Our Nice Heading

4. Increase Image Width

We’ll look at two ways to make the image wider. Begin by selecting the heading Row Layout block.

OPTION 1 – In the Settings sidebar > Layout, select the “Left Heavy 66/33” option.
This preset will increase the image to 66% of the total content width.

OPTION 2 – Fluid Resizing.
This method can be a bit tricky. With the Row Layout block selected, hover over the content until you see the vertical bar indicating “Fluid Resizing“. Click on the bar, then drag right to increase the size (drag left to decrease the size). Click again when done. In our example, the new size is 70%.

Adjust the Margins

Left margin: -12rem.
REMEMBER: you cannot use the slider for negative margins. Type the minus sign and the number inside the field.

Right margin: 1.5rem.
In our example, I modified the right margin to match the length of the heading.

Results

Here’s Our Nice Heading

5. Put Text Inside a Box

Now we’ll add a background color to the overlapping text.

Select the right Section block that contains the H4 and Text blocks.
Settings sidebar > Style tab: apply a background color.
Settings sidebar > Advanced tab:
- apply some padding on all 4 sides.
- adjust the margins to fit the H4 heading on 1 line (-14rem left, 1.5 rem right).

NOTE: There may be other tweaks you want to make. Styling will vary with the theme.

Results

Here’s Our Nice Heading

6. Switch Media to Right Side

The flexibility of the Row Layout and Section blocks comes into play when you switch the media to the right side.

Select the right Section block that contains the H4 and Text blocks.
Move left via the Toolbar (click the arrow) or the Document Overview list (click and drag block upward)

Advanced tab > Margin: Switch the margin settings so that the right margin is -14rem and the left margin is 1.5rem.
Advanced tab > Structure Settings > Z-Index Control: 2.
This property will move the content up in the stacking order so that it is positioned above the image.

Kadence Section block - Advanced - switch margins, z-index

Select the heading Row Layout block.
Switch the widths of the 2 sections using the Fluid Resizing. The left column should change to 30% and the right column becomes 70%.

Results

Here’s Our Nice Heading

Mobile Responsiveness

Kadence Blocks provides 3 breakpoints for various block options: Desktop, Tablet, and Mobile. These are accessed through the Settings sidebar. Overlapping columns usually work well on Desktop and Tablets. Generally, though, they do not look great on Mobile devices. The width is simply too narrow.

Kadence Default Breakpoints

Desktop: > 1024px
Tablet: 768px – 1024px
Mobile: < 768px

Columns will automatically stack on Mobile. But you will still have to reset the margins to 0 so that the content displays correctly. When you use Kadence Block’s Responsive Controls, the editor preview changes to WordPress’ core built-in screen sizes. Be sure to open a new tab to see a more accurate front-end preview.

Select the right Section block that contains the H4 and Text blocks.
Advanced tab > Margin > Mobile device icon
Click on Custom size slider icon > right and left margins: 0

Kadence Section block - Advanced - mobile margin 0

Custom CSS and Breakpoints

There is no way to change the Kadence default breakpoints. If you want to customize the breakpoints, or if you just prefer to use your own code rather than the Kadence options, you’ll need to write some Media Queries. You can add the code to the Additional CSS section of the Site Editor or to your theme’s Stylesheet.

Let’s use a 600px breakpoint for our example. If you have only 1 or 2 content instances to adjust, you can use the browser’s Inspection Tools to find the specific content on a page and identify its elements and styles. Copy and paste the CSS code into the Site Editor’s Additional CSS area and modify as follows (your specific class will differ from mine):

/* --- MEDIA QUERIES in Additional CSS --- */
/* --- Mobile Device 600 --- */
@media (max-width: 600px) {
.kadence-column13708_a7de7b-fc, .kt-inside-inner-col > .kadence-column13708_a7de7b-fc:not(.specificity) {
    margin-right: 0;
    margin-left: 0;
}
}

However, if there are multiple content areas to adjust, it’s better to create a new class style and apply it to each affected block. This is a really smooth solution. It leaves intact any modifications you made with the Kadence breakpoints.

First, add the code to the Site Editor’s Additional CSS section OR theme’s Stylesheet. Here, we’re adding it to the stylesheet:

/* --- MEDIA QUERIES in Stylesheet --- */
/* --- Mobile Device 600 --- */
@media (max-width: 600px) {
.reset-0-margins {
    margin-right: 0 !important;
    margin-left: 0 !important;
}
}

NOTE: When used in the stylesheet, you’ll need to include the !important rule to override the local styles in the site editor. When used in the Site Editor’s Additional CSS section, there is no need for the !important rule.

Then, go back to the page/post, select the Section block, and add the class to the block’s Additional CSS class(es) field:

Settings Sidebar > Section block > Advanced tab > Advanced section > Additional CSS class(es)

Kadence Section block - Advanced - Additional CSS