The Row Section or Row block from the Stashio Blocks plugin is a content divider and structuring element mostly. With this block you’ll be able to easily create responsive layouts for your pages and posts (and supported custom posts as well).
How to add this element
In order to add a new Row block you need to open your post/page which has Gutenberg active/available along with the Stashio Blocks plugin installed and activated. You can see a screenshot about it just below:
How to create columns
Once you click on the row block button a new row will be added in the editor area, and you will be prompted with the columns list. Depending on the layout you wish to achieve click to on the colums layout button to create the new row with columns. You can see an example of this in the image below:
Once you click on any column layout you can start to create your own desired layout. A newly created layout with columns looks similar to the image below:
Once you click on any block (you can add any block inside the columns, you’re not restricted to Stashio Blocks only). Once you click inside the column you want to add content into – click on the Plus button and choose the element/block you want to add and will automatically appear in the column where you added it into.
Row Section/Row Settings
The row element is a very powerful element to use and provides you with tons of options for your content. In order to access the Row settings you need to click on row block element and make sure you have the Block tab selected on right sidebar. You can find a visual enterpretation here:
As you can see in the image above and probably inside your editor settings you will have the number of columns selector, column arrangement and a gutter option. Gutter represents the amout of space between the columns.
Padding/Margin
The rows allow you to create spaces inside and outside the element. Paddings are used to create spacing inside the element, margins are used to create spacing outside the element. For example, if you add a background to the row, you probably don’t want the content inside the row to start exactly from the same point from where the background starts. To add spacing between the top of the padding and the content inside it you need to add paddings. If you need to add space between your row and the elements above/below – use margins.
To add/edit the paddings and margins inside the row element you need to open the specific panel from the options list in the right sidebar. By default the options are hidden and you can show them blick clicking on the head/text for Padding/Margins like shown in the screenshot below:
Row background options
Row also offer background settings to make your content more interactive and appealing. You can find the row background options in the blocks settings in the right sidebar (just like for Padding/Margin, see image above). From there you have the option to set a background color, image, set background positioning for a image background and starting from version 1.0.1 we have the option for a YouTube video background. Inside the Row background tab you will find an option stating to add your YouTube video URL. Simply paste it there and it will automatically create an embed and autoplay it for you. Note that in order to play video backgrounds videos must be muted (Stashio does this automatically).
Row background overlay options
This is an background extension, mostly interesting if you want to add an overlay layer for to make the text more visible or even create a nice effect for your row background. It is also recommended to use a black overlay (example) for image background with opacity of 40% to make white text more visible on the page.
Row dividers
This is probably known to you, but we’ll provide some examples on how row dividers actually work. Most probably you’ve seen website with slant lines, clouds, fade effects for some website rows/sections. Well, they are achieved using row dividers. Below you have a demonstration how video dividers work.
This is some content for testing this out.
So, as you can guess – this is a row in a rectangular shape, but we added dividers to the top and the bottom of the row to give them a special appeal. Here is a video on how this works actually.
Shape dividers can be different sizes, different shapes and be positioned in different ways. Along with the shape layout selectors and size option you will find 2 other options: Bring to front and Flip divider.
The Bring to front divider option can be used when you want your shape divider to go over content as well. Usually it goes under the content of the row, just above the row background. There are cases when you want the Shape divider to go over the content and this is when this option is useful.
The Flip divider option is used to flip the dividers vertically. For example if you like a divider but you need it in an upside-down version – toggle and enable this option.
Row text settings
As you can understand from the title – this tab contains the row text settings. At the moment there are only row text and link color settings. Note that these settings can be overwritten by the theme or the block settings itself.
Row parallax items
A game-changer which makes creating really cool animations for elements inside a row. The parallax items can be used if you want to add a bit of something to your rows and an example of these can be found on the Stashio page. An example of how these work can be found in the video below:
To add a new parallax item open the Parallax Items tab from the Row settings in the sidebar and click on the Add new item button. Once clicked, you will be able to add/choose an image from the Media Library and then below you can choose the positioning for the element. You can use any units you want (px, em, %). Below that you have the option to choose the movement speed. If you add a negative value it will move backward to the axis you choose for the movement. The last option available is to choose your movement direction on scroll – element can move vertically or horizontaly.
Responsive/Mobile Settings
You will find tabs with Desktop/Tablet/Mobile icons at the top of the settings, there are options like padding and margin which can be changed for resposiveness. This will make your mobile and tablet layouts look a lot better and the website look optimized.