Greenshift has different types of blocks, some of them are made to solve specific tasks and some of them are Core blocks that you will use all the time. In this chapter, let’s talk about Layout blocks that you will use to structure your content.
Row and Section blocks
Row block is a central block for making custom pages. This block allows you to center the content area and at the same time you can have full-width background and columns
Once you click to add Row, you will see column selector and some fast toolbar options. To add row block on page, you need to click on number of columns
Row has variation “Section”. It’s identical to Full width Row with One column
Row has wrapper and inner content area, both can have different width. If you use one of better integrated themes, then Content width will be automatically inherited. In this case, content area width will be controlled by theme width.
If you use Greenshift theme, Content area width will be controlled in Site Editor – Style Editor – Layout. Check video in learning center. Highly likely you should keep default values
In Inspector you will find several other important options: Gutter, column preset selector, aligns, height.
In most cases, you will use Presets and Gutter to control width of inner columns. But if you want to make custom width, then, try our updated Visual Builder. it has two modes: linked columns (when total width of columns is 100%) and unlinked (when you are not limited in width of each column)
Container block
Container block is analog of group block. A container block is your choice when you want to add some kind of wrapper around another block or group of blocks. For example, imagine that you want to draw a circle shape around the text. You can do this by clicking on block (or group of blocks), convert them to Container (this will wrap them inside Container), then use Flexible align and other options
I see that many users make a common mistake – they use Container as a Section block. The row block must be the most parent block on the page. The container is for grouping other blocks.
Flexbox option
Column block (part of Row block) and Container block has special Flexbox option which you can use to control align of inner blocks. You can do this from Inspector section and from Toolbar
You can also move child items when you click on them (you will see arrow in toolbar)
CSS Grid
Css grid is another way to structure your content. Some of you may want to use CSS grid instead Row because it’s more flexible. But I recommend to use CSS grid when you need to build equal height blocks or complex grid structure. For regular columns, better to use Row
Css grid has also some unique features – Resizer and Grid Builder. Resizer can help you to make custom width and gap for items. Grid builder can help in building complex structure. One big benefit for CSS grid over Row and flexbox is that you can use Overlapping grid cells
Issues with Full width Content
Many users have a problem with Full width. This is because there are widths that you set in Greenshift, but there is also container width which is set in theme and in other plugins. My advice, if you have such a problem, use Row. Even if you need CSS grid, placing the grid inside Full align Row can help to fight with the theme’s container limitations.