Setka Post Editor Grid Systems and Grid Modules

Grid Systems and Grid Modules

Contents

How do I create a grid?

How do I align text in a grid?

How do I add a column?

How do I delete a column?

How do I add an image to a grid?

How do I add a video to a grid?

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

How do I set the grid background color?

How do I use an image for a grid background?

How do I adjust bottom indentations under grids?

How do I insert a grid into another grid (Nested Grid)?

How do I remove a grid?

How do I control grids in the mobile version?

How do I create an anchor in a grid?

How do I remove margins in the mobile version?

 

 

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 do I create a grid?

Select all paragraphs you want to insert into the grid, then click [add grid] in the right hand toolbar or press Shift + Click. Press Ctrl + Click to insert a grid into an empty paragraph.

 

 

How do I align text in a grid?

To align text within a grid module, click inside the grid and select the column tab. Here you are able to align text both vertically and horizontally.

To see how vertical alignment is applied. Divide your grid into two columns, ensuring there is text in both columns. Make the paragraph of one column larger by holding Shift + Enter. This will lengthen the whole grid but not the paragraph of your neighbouring column. Vertically align the text in this column to either top, central or bottom to see the different between the text position in the two columns.

 

How do I add a column?

Click “+” at the upper edge of the grid.

 

How do I delete a column?
Click “-” at the upper edge of the grid.

 

 

How do I add an image to a grid?

Click inside the grid to create a paragraph. Click [add image] to select previously uploaded images or click upload to browse your computer's image files. Click on an image to upload it to the selected paragraph.

Like images outside of grid modules, you can apply overhang, adjust bottom indent and add links, anchors and animation.

 

 

How do I add a video to a grid?

 

Click inside the grid to create a paragraph. Click </> to create an embed element. Paste a link to your video in the embed box or click {...} next to the box to input HTML code.

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 or link form.

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.

You can also adjust bottom indent, apply overhang and anchors to embeds.  

 

 

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 in its original size.

 

How do I set the grid background color?

Click inside the grid and select the grid tab. Choose a colour under background. You can choose from Post Style colours created in the Style Manager or make the background transparent.

 

How do I use an image for the grid background?

Upload your image by clicking the [add image] icon in the vertical right hand toolbar. Click inside the grid and select the grid tab. Under background select [add image] to add an image.

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

 

 

How do I adjust bottom indentations under grids?

Click inside the grid and select the grid tab. Adjust the bottom indent in pixels (px) or hold Ctrl + up/down arrows.

 

How do I insert a grid into another grid (Nested Grid)?

Click inside the grid to create a paragraph. Click [add grid] in the vertical right hand toolbar. The inner grid will be highlighted. This function can be used when working with infographics or creating complex layouts.

 

______________2017-06-23___14.12.19.png

 

How do I 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 do I control grids in the mobile version?
Grids adapt to mobile devices automatically with columns from left to right displayed vertically. To change this order click inside the grid and in the grid tab click the ellipses to bring up more options. Under Grid Mobile Layout, select reverse to display columns from right to left vertically or matrix to create two columns.

 

______________2017-04-07___18.19.25.png

 

How do I create an anchor in a grid?

Click inside the grid and select the grid tab. Click on the anchor icon in the tab to give the anchor a name.

 

How do I remove margins in the mobile version?

The Overhangs function makes it possible to remove margins. In the mobile version these indents are present by default. To make edges invisible click inside the grid, select the grid tab and choose ‘both’ in the overhangs option.