Introducing PostX Row/Column Block: Show Your Contents Perfectly

If you’re already familiar with the basics of rows and columns, then you know they are essential for creating more complex layouts in WordPress. To get the most out of this, it’s essential to understand how to use rows and columns. 

While PostX row/column block has many features and can be a bit confusing, this guide will provide simple instructions so that even WordPress beginners can understand them.

Video Tutorial: Row/Column Block

We have created a video tutorial for row/column block to help you understand the process better.

Adding the PostX Row/Column Block

Let’s start with adding the row/column block of PostX. 

Well, so let’s get the basics out of the way first. 

1. To create a new page, choose Pages from the WordPress dashboard and click Add New.
2. Find the plus sign (+) in the upper left of the toolbar and click it. The list of available building blocks will appear in a sidebar.
3. Choose the Row Block, or type “Row” into the search bar. This will bring up the Row block.
4. Click it, and the block will be added to your editor.

Basic PostX Row/Column Options

Once you add the Row/Column block, you can choose any of the predefined layouts. Don’t worry; you can customize them later.

Choose the layout according to your preference, but let’s not add much and stick to the 50:50 layout option. Now you can see two rows with a ratio of 50 each. Also, you can select the row-wide or column-wide layout in the layout setting. Also, you can change the column width visually with the container adjuster.

You can easily manage the Row Gap and Column Gap with a slide bar. If your theme has a default width (what most themes usually have), you can enable the toggle bar to Inherit Theme Width. It’ll make your life easier, and you don’t have to manage the width and gaps individually.

Now let’s move to other, in-depth, exciting features and settings PostX Row/column block includes.

Advanced PostX Row/Column Options

In PostX Row/column block, you’ll get your hand on Rows/Columns and their individual settings.

Let’s do a rundown of the settings before discussing them in detail. So, in the block’s Row settings, you will get the following features and customization options:

• Flex Properties
• Background & Wrapper
• Background Overlay 
• Spacing & Border Style
• Shape Divider
• Row Color

And in the block’s column setting, you’ll get the following:

• Background & Wrapper
• Background Overlay 
• Spacing & Border Style
• Column Color
• Sticky Column

Let’s discuss flex properties.

Flex Properties

Flex is a powerful layout component that provides a way to align child elements of a container horizontally or vertically in either direction.

Flex works by defining a container and then setting properties that control how the child elements of that container should be laid out. This includes the spacing, alignment, size, and order. 

Using the PostX Row/column block, users can choose from various flex properties to customize their site.

Flex Properties Settings

Now let’s see what the settings of PostX’s flex properties are.

As we’ve learned, flex properties actually align the contents. In the Column setting, you can use the Flex option both horizontally and vertically. And in the Row settings, you can align your contents vertically.

[N.B: You must have enough content width to make it work.]

Also, in both Column and Row settings, there’s a toggle bar to reverse your contents. In Column, if you enable Reverse, the contents will switch places Vertically. And in Row, it will do the same horizontally.

Background and Wrapper

With this setting, you can change the background colors. But with PostX, you will always get something more. No more playing just with colors; you can add images and even videos. And not just in the background; you can even use images instead of colors when you hover.

Solid Background Color:

Gradient Background Color:

Image Background:

Also, you can set different backgrounds in Row and Column settings, which gives you more freedom to make your site content appealing.

Row Color

You can change typographical setting for the Row section of the Row/Column block. Also, you can adjust the Color, Link Color, Link Hover Color, and Typography of Rows.

Column Color

You can change typographical setting for the Column section of the Row/Column block. Also, you can adjust the Color, Link Color, Link Hover Color, and Typography of Columns.

Background Overlay 

Background overlay is an image or text placed over a background image to create a layered effect. It can be used to add depth and visual interest to a website or graphic design. It can also be used to highlight particular design elements, such as a relevant image or a logo.

This setting lets you use the overlay effect. And PostX lets you add overlay background in the background and even on hover. And you can change the opacity with a slider. Also, you can change the Hue, Saturation, Brightness, Contrast, Invert, and Blur to make your overly more customized.

Spacing and Border Style

It’s a very intuitive thing to understand. The basic spacing and border settings with much more customizability. You can change the default Margin and padding. Also, you can change the Border color and Border Radius for both normal and hover. And PostX also lets you select the color of Box Shadow. You will get these settings for both Rows and Columns.

Shape Divider

Shape dividers are a great way to give your section a unique and professional look. You can place graphic shapes at the top or bottom of your content section.

And PostX, which is known for its unparalleled customizability, not just brought a Shape divider feature in the Row/Column block; you can do a lot of customizations.

Currently, there are 8 shapes to choose from for both the top and bottom. You can change their Color and adjust their Width and Height. You can also enable the Flip option, which inherently makes the 8 premade shapes into 16. Also, by default, the Shape Divider is in the background, but you can enable the option to bring them to the front.

Sticky Column

PostX also lets your column be sticky. It works similarly to the sticky post feature of WordPress. Just here, the column sticks to the front. You can enable the Sticky Column and adjust its Gap from this setting.

Documentation Guide

Find the complete and in-depth documentation for PostX Row/Column block right here!

Conclusion

PostX Row/Column block is invaluable for creating stunning and easy-to-navigate websites. You can easily customize your website to meet your needs with the diverse options available. Now that you know the basics of the Row/Column, it’s time to get creative and create the perfect layout for your website. Unleash your creativity and allow PostX Row/Column to help you create an engaging and efficient website that will capture the attention of your viewers.

You can check out WordPress video tutorials on our YouTube Channel. Also, find us on Facebook and Twitter for regular updates!

Written byRuhul

Ruhul is a technical and SEO-driven content writer, a tech enthusiast, and a pro gamer. He loves exploring new things and has written over 1,500 articles on diverse topics.