Setka Post Editor Grid Systems and Grid Modules

Grid Systems and Grid Modules

Contents

How to create a grid?

How to align text in a grid?

How to apply vertical alignment?

How to add a column?

How to delete a column?

How to add a image to a grid?

How to add a video to a grid?

Does the image size change when I insert it into a grid?

How to set the grid background color?

How to use an image for the grid background?

How to adjust bottom indentations under grids?

How to insert a grid into another grid (Nested Grid)?

How to remove a grid?

How to control grids in the mobile version?

How to install an anchor in a grid?

 

Grid Systems and Grid Modules. What is the difference?


There are two types of grids in Setka Editor:

  1. Post Grid System is a layout system for the whole post and can be created in the Style Manager at editor.setka.io.
  2. Grid Modules 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 chosen Grid System. For example, if the Grid System is 6 base columns, you can insert a grid containing 4+2 columns, 1+5 columns, 2+2+2 columns, etc.

 

Screen_Shot_2017-08-29_at_16.53.59.png

 

How to create a grid?

Select all paragraphs you want to insert into the table, then click [add grid] on the right toolbar 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 Alignment 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 to apply vertical alignment?

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  column and try to apply vertical alignment settings 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.

Learn more about adding background image to the post, grid or a column.

 

 

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. 

 

______________2017-06-23___14.12.19.png

 

How to remove a grid?

In order to remove a grid, right-click it and select Flatten Grid in the context menu.

 

Screen_Shot_2017-08-29_at_11.55.19.png

 

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.

 

______________2017-04-07___18.19.25.png

 

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).