Effective Layout Fundamentals

In this course, we’re going to cover one of the most important topics in Nectarblocks — layout fundamentals. Layout is what gives your site structure. With Nectarblocks, you don’t need to write any CSS to take advantage of modern layout techniques. We provide core building blocks — rows, columns, and containers — that let you visually design with the same flexibility you’d get from flexbox and a 12-column grid framework. Once you understand how these work, you’ll be able to build just about any section or arrangement of content you can imagine.

Let’s start with container elements. These are the blocks that house other blocks — think of them as the scaffolding of your page.

The foundation of your layout is the Row block. Rows are used to house columns, which then contain all your content blocks — like text, images, buttons, or anything else you add. In practice, most sections on your site will be built inside rows. There’s one common exception: text-heavy content like blog posts. In that case, you can use text blocks directly in the editor without a row.

Next, we have Columns. The Nectar Column block is what allows you to structure content side by side. Columns always live directly inside rows — that’s their home; you can’t drop a column anywhere else.

When you first add a row, you’ll be presented with a set of common column setups — like one full-width column, two even halves, or a three-column layout. This makes it easy to start with a structure that matches the design you have in mind. From there, you can always adjust or refine it.

You can drag the column handle left or right directly on the canvas, or use the column width slider in the sidebar settings. By default, columns follow a 12-column grid system, so widths are based on twelfths. If you want to break out of that and create custom widths, switch the parent row’s Constraint setting to Freeflow. With that option active, columns are no longer bound to the grid, and you can drag them to any custom size you like.

Inside each column, you also have flexbox controls for aligning and distributing the blocks it contains. You can center content vertically, space elements evenly, or align everything to the top or bottom — all without writing CSS.

One of the most powerful features of columns is that they can be adjusted responsively. You can resize and reorder them separately for desktop, tablet, and mobile. For example, here I have four columns on desktop, and I can quickly rearrange them into a 2 by 2 grid for tablet.

The third container option is the Flexbox block. Like columns, it uses CSS flexbox under the hood — the difference is where and how you can use it. Columns are only available as direct children of rows, but the Flexbox block can be added anywhere: inside rows, inside columns, or even nested inside other flexboxes.

Use Flexbox for micro-layouts: a horizontal row of user avatars inside a column, a vertical stack of features with even spacing, or a quick alignment wrapper to control how a group of blocks sits together. You get intuitive controls for direction, alignment, justification, wrapping, and gaps — no code required.

As your layouts get more advanced, you’ll often find blocks nested inside one another — for example, a button inside a column inside a row. To keep things manageable, there are two main ways to quickly select the block you want to edit.

The first is the Document Overview panel. This gives you a tree view of all the blocks on your page, so you can see exactly how everything is structured and jump straight to the one you want.

The second is the Select Parent Block button in the block toolbar. Whenever you click on a block in the editor, you’ll see this button on the left side of the toolbar. Clicking it moves your selection up one level, letting you easily traverse to the parent element.

Between these two methods, you’ll always have a quick way to reach the exact block you need, no matter how deeply nested your layout becomes.

Now let’s talk about backgrounds. All container elements in Nectarblocks — rows, columns, and flexboxes — have access to the same background layer controls.

Image backgrounds allow an image to fill the container area. They can either be stretched to cover the full area or repeated as a pattern to create textures.

Video backgrounds are ideal for dynamic hero sections. For video backgrounds below the first viewport, enable lazy loading to save bandwidth and improve page performance.

Color backgrounds are simple but effective for brand consistency. This layer can also be stacked above an image or video to act as a color overlay by adjusting opacity or z-index.

Shape backgrounds add SVG shapes into the background. These are useful for creating section edges such as waves, angles, or curves.

Finally, Nectarblocks also includes built-in Unsplash integration. This gives you direct access to a large library of free, high-quality stock photos right inside the editor. You can search by keyword, preview images, and insert them directly into your rows, columns, or backgrounds without leaving WordPress.

That’s the foundation of layout in Nectarblocks: rows and columns for structure, flexbox — both in columns and as its own block — for alignment and distribution, navigation tools for managing nested blocks, background layers for style, and media sourcing through Unsplash integration. These blocks are your designer-friendly gateway into flexbox and a 12-column system — no CSS required.