Greenshift has different types of blocks; some are made to solve specific tasks, and some 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. There are several layout blocks. All of them can be used for similar purposes but differ by workflow or structure.
Before you select your layouts blocks, you need to select workflow.
Beginner Workflow’s Layout blocks
Section Advanced
This block is for Centering Content while having Full width background. It has auto-detection of Content width. Use it if you need to place simple non-clumned content on the page that is matching width of theme content container
Row/Group Advanced
Row block is a central block for making custom pages. This block also allows you to center the content area, but at the same time you can have full-width background and columns.
Once you click to add a Row, you will see a column number selector and some fast toolbar options. To add a row block on the page, click on the number of columns.
The width of the content area will also be inherited from the theme.
If you use a block theme, the content area’s width will be controlled in Site Editor – Style Editor – Layout. Check the video in the learning center. You should likely keep default values. You can also overwrite the Content area default width value in Greenshift Settings – CSS Management
In Inspector, you will find several other important options: Gutter, column preset selector, aligns, and height.
In most cases, you will use Presets and Gutter to control the width of inner columns. But if you want to make a custom width, then try 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)
Grid Container
CSS grid is another way to structure your content. Some of you may want to use a CSS grid instead of a Row because it’s more flexible. However, I recommend using a CSS grid when building equal-height blocks or complex grid structures. For regular columns, it is better to use Row
CSS grid also has some unique features – Resizer and Grid Builder. Resizer can help you to make custom widths and gaps for items. Grid builders can help in building complex structures. One significant benefit for CSS grid over Row and flexbox is that you can use Overlapping grid cells
Box Container
Box Container block is analog of group block. A container block is your choice when you want to add some 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 a block (or group of blocks), converting them to a Container (this will wrap them inside a Container), and then using Flexible align and other options.
Please do not put Row or Section blocks in the Box Container (do this only if you understand the purpose of this)
Professional workflow’s layout blocks
Section Element
Section Element is your all in one block for adding any layout. By default, it will add Section tag and centered Content area with width inherited from theme. You can also, Enable columns and unlimited content areas. Everything is based on regular flexbox or CSS grid options
DIV Element
The DIV block is similar to the Box Container. It’s equal to DIV tag and you can use it to wrap other blocks. Also, there is DIV Element with text that is equal to using
<div>Some text</div>Extra Layout blocks
There are some extra blocks that you may want to use for layout
Marquee Block and Scrollable Block
There blocks allow to make scrollable areas. You can put any other blocks inside.
If you select draggable block – user must scroll it (drag event is also enabled for phones). Also, you can attach buttons to make it work as simple carousel.
Marquee block does similar but it will enable infinite autoscrolling
Issues with Full width Content
Many users have a problem with Full width understanding in Gutenberg. This is because there are widths that you set in Greenshift, but there is also container width, which is set in the theme and in other plugins. My advice – if you build posts (content only), you don’t need to wrap your elements and blocks with Layout blocks. Gutenberg will center all blocks by default. If you build landing, template, then, always use Section/Columns as your main starter block and put everything inside.
Which type to use and when
As you can see, we have different layout blocks, so when should we use each of them?
If you don’t plan to give access to editing layouts to your end users – it is better to use Element block and Professional workflow. It has 100% clean output without WordPress wrappers, and you have 100% control over it.
If you plan to give access – it is better to use Row/Sections because they are more transparent for users without code skills and have some visual helpers.
Of course you can use both workflows simultaneously and on the same site