The Row Layout Block in Kadence Blocks just got a handy new feature that adds a new (and powerful!) control for inner blocks within Sections.
In a nutshell, you can now set the inner block direction to horizontal. Previously, all blocks in a section/row were stacked vertically, so this new setting opens up a TON of possibilities for building more complex sections without the use of columns!
Set Inner Block Direction of Blocks to Horizontal = Tons of Possibilities!
For example, now you can build:
- Simple navigation menus
- Buttons with text, side by side
- More complex text layouts, combined with other blocks (like icons) in a single column
This new feature was built as we continue to expand the new Kadence Wireframe Library of blocks and you can see it put to good use in several of the new Wireframe blocks.
See How it Works: Building a Simple Navigation
1. From any new post or page, add a Row Layout Block. For this new row, selecting a single column is fine (you’ll see why in a bit!)
2. Next, we’ll add a few Advanced Heading Blocks into the section within the row.
3. Next up, we’ll add an Advanced Button block.
4. Now, let’s use the built-in List View panel to navigate to the parent Section block to unlock the new controls.
5. Click on the Section block to display the section setting. From the Section block controls, you’ll see a NEW setting for Inner Block Direction. Let’s toggle this to Horizontal to build our quick navigation.
6. The new Horizontal Block Direction setting will align all the blocks in this row (yep, you guessed it!) horizontally instead of vertically.
Additionally, there are a few more settings for horizontal block direction that are incredibly helpful, too!
- Set the Default Horizontal Block Gap – This adds a gap between the blocks in your choice of pixels.
- Justify Content with options for Inherit, Start, Center, End, Space Between, Space Around, and Space Evenly
- Text Alignment – Left, Center, or Right Align the text in the inner blocks.
7. Now, to finish up our simple nav, let’s add a background color. From List View, navigate back up to the Row Layout parent block. From the block settings, select a background color.
And there you have it! Now we have a very simple navigation menu, once we get links added to each of our headings. All built with Kadence Blocks and the new Horizontal Controls for Inner Blocks.
Get Kadence Blocks Today!
Get more power for building WordPress web designs with Kadence Blocks, a truly innovative toolkit of WordPress block plugins that turn the WordPress Block Editor a powerful page builder. Here are a few things you’ll love about Kadence Blocks:
- With Kadence blocks, using the WordPress Block Editor is finally an enjoyable and rewarding experience.
- Kadence Blocks make the Block Editor capable of creating content usually only possible through popular page builder plugins. Use the native WordPress Block Editor to create custom layouts and page elements with all the controls and functionality you need.
- With a design library of 20+ prebuilt designs, you will be impressed with how quickly you can drop content into your page, update text, and tweak styles to get amazing page layouts.
- Each block has responsive controls to give you precision design tweaks for tablet and mobile devices.
- A ground-breaking typography settings framework that allows you to choose from over 800 Google fonts and preview instantly within the editor.