Kadence Sticky Sections

Kadence Sticky Sections - Fix sections on top

Wow, I wasn’t expecting Sticky Sections. The Kadence team has released a series of product updates in the last week that include new features for the Kadence Theme, Kadence Blocks, and the Kadence Blocks Pro plugin. Let’s take a look at that now.

In addition to a number of minor bug fixes and improvements, there are new features that I’d like to show you.

Make sections sticky

With Kadence blocks you now have the possibility to make a section or paragraph within a row sticky for the height of an outer block. There are a number of uses for this, for example if you want to fix a heading before a long text.

The offset for the sticky section can be set individually for desktop, mobile or tablet.

In my example, I have two sections per column, with the top two sections having sticky settings enabled. This allows me to fix these sections when scrolling the page.

Step 1: Create Row Layout

Das Kadence Blocks Row Layout.
The Kadence Blocks Row Layout.

First, I create a Row Layout with two columns. These columns are the “Sections”.

Step 2: Add Section

Add a new Section.
Add a new Section.

From now on, it’s best to open the list view with the icon with the three dashes on top of each other, right next to the icon with the exclamation mark. This way you have an overview of all blocks and how they are nested on the left side. Now unfold the Row Layout and the two sections.

Positioned in the left section, I now insert another section at the top. In this section I place a heading. I do the same in the right column.

Step 3: Fix the section

Make the section with the heading sticky.
Make the section with the heading sticky.

Now you have to make sure that the section with the heading is selected.

Now you can switch on the “Make sticky” slider in the Block > Sticky Settings menu on the right. Do the same with the second column.

If you did everything right, you will see in the Block Editor how the two headings stay fixed at the top when you scroll down.

It looks like this:

Sticky heading in layout
Sticky heading in layout

This is really strong. With such features, you can stand out from other websites.

Sticky Section Troubleshooting

If you are using a fixed header for your theme, your fixed section may not be visible because it is hidden under the header.

Fixed Header Offset
Fixed Header Offset

This is what the Sticky Header Offset setting is for. If the height of your fixed header is 100px, you must also enter an offset of at least 100px here.

It’s best to play around with several heights to find the optimal balance.

Other updates

Besides the fixed sections within a row, there were some other cool improvements.

Background Overlay for Sections

The new Kadence Background Overlay feature.
The new Kadence Background Overlay feature.

Kadence Blocks only comes with background overlays in the Section Block. This overlay can be enabled for both normal and hover states, and can even be invoked with dynamic content when using Kadence Blocks Pro.

With this you can make another overlay with an image or color over the background of a section.

Easier change of fonts and colors in the Customizer

Colors and fonts are now first in the Kadence optimizer.
Colors and fonts are now first in the Kadence optimizer.

In the Kadence theme, fonts and colors can now be changed more easily in the Customizer. Previously, site owners had to access the site’s color schemes and typography under the General tab. Since this is a frequently used area of website management, the Kadence theme now displays these options at the top level of the Customizer to make settings easier to find and changes easier to implement.

All Google Fonts Available

The Kadence theme now allows you to use all available Google Fonts on your WordPress website.

Load the Google Fonts locally from your webspace.
Load the Google Fonts locally from your webspace.

As a reminder, if you are using the Kadence Theme Pro plugin, you can set your site to load Google Fonts locally. Go to General > Performance and turn this option on if you want to.

Conclusion

I guess I bet on the right horse with KadenceWP. For years, they bring out one innovation after the other. This makes web design with WordPress really fun again!

Leave a Reply

Your email address will not be published.