What is the difference between Grid Systems and Grid Modules?
There are two types of grids in Setka Editor:
The first type is the post Grid System. This is a layout system for the whole post and can be created in the Style Manager at editor.setka.io.
The second type consists of Grid Modules that are embedded into the post. You can insert multiple grids in one post.
The number and dimensions of columns in the grid are determined by the Grid System chosen. For example, if the Grid System is 4 base columns, you can insert a grid containing 4 columns, 1+3 columns, 2+2 columns.
How to create a grid?
Select all paragraphs you want to insert into the table, then click [add grid] on the toolbar on the right or press Shift + Click. Press Ctril + Click to insert an empty grid into a new paragraph.
How to align text in a grid?
Open the Grid tab, then in the Vertical Align menu select the required type of alignment on the top toolbar. You can align text at the center, on the left, on the top or on the bottom.
How does vertical alignment work?
To see how vertical alignment works you need to create a two nearby columns with different height and one of them must be a little bit smaller. To see the difference with alignments you just need to select the smaller (not large) column and try to change the setting of vertical alignment in toolbar.
How to add a column?
Click “+” at the upper edge of the grid.
How to delete a column?
Click “-” at the upper edge of the grid.
How to add a image to a grid?
Click [add image], select a file, place the cursor in the required cell, then click the image. It will appear in the selected cell.
Inside a column, you can also configure indents, overhangs, links – in other words, all the styles applicable to a regular image can be applied to an image in a column.
How to add a video to a grid?
Place the cursor in the column where you want to insert an embed, then click </> on the right. You can input HTML code in the window that appears.
To see how the video will be displayed in the grid, open the Embed tab and click Render. Click Unrender to display it in code form again.
Click Embed > Responsive embed > off to display the embed with the size specified in the code. Click Embed > Responsive embed > on to stretch the video to the grid width.
Does the image size change when I insert it into a grid?
The image is automatically reduced to the width of the column it is inserted into. If the column width is larger than the original width of the image, it will be inserted at its original size.
How to set the grid background color?
Open the Grid tab, then the Background window. You can make the background transparent or select one of the colors that you specified in the Theme Editor.
How to use an image for the grid background?
Click [add image] on the toolbar on the right, select and upload the required file. Then open the Grid or Column tabs (depending on what you want to modify) and select the uploaded image in the Background menu.
How to adjust bottom indentations under grids?
Open the Grid tab, then the Bottom Indent menu or press Ctrl + up/down arrows. You can specify the indent size in pixels (px).
How to insert a grid into another grid (Nested Grid)?
Place the cursor in a grid cell and click [add grid] on the toolbar on the right. The inner grid will be highlighted. This function can be used, for example, if you work with infographics or do complex layouts.
How to remove a grid?
In order to remove a grid, right-click it and select Flatten Grid in the context menu.
How to control grids in the mobile version?
Grids adapt to mobile devices by default: cells are displayed as a column, but you can make them look different. In order to place the right column before the left one, click Grid > Grid layout (mobile) > reverse. In order to make cells appear in two columns, click Grid > Grid layout (mobile) > matrix.
How to install an anchor in a grid?
Give the anchor a name by clicking Grid > Anchor Name. In order to return to the anchor from another part of the text, click Selection > Anchor.
How to add a grid field in the mobile version?
The Overhangs function makes it possible to remove margins. Click Grid > Overhangs > Both to make grid edges invisible (the mobile version will have an indent by default).