Please watch this tutorial video to learn all you need to know about grid modules in Setka Editor:
There are two types of grids in Setka Editor:
Post Layout Grid is a layout system for the whole post and can be created in the Content Design System Manager (CDSM) in Setka Account. Read more about Layout Grids here.
Grid Modules are added to the content of your post or page. You can insert multiple grids in one post.
The chosen Layout Grid determines the number and dimensions of columns in the grid. For example, if the Layout Grid contains 6 columns, you can insert grids containing 4+2 columns, 1+5 columns, 2+2+2 columns, etc.
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.
To align text within a grid module, click inside the grid and select the column tab. Here you can 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 neighboring column. Vertically align the text in this column to either top, central, or bottom to see the difference between the text position in the two columns.
Click + at the upper edge of the grid.
Click " - " at the upper edge of the 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.
Click inside the grid to create a paragraph. Click the Add embed button on the Side Toolbar to add an embed. 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 in the Upper Toolbar, 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 the bottom indent, apply overhang and anchors to embeds.
Setka Editor scales images to the width of the column you are adding them into. If the column width is larger than the image's original width, the image will be inserted into the column in its original size.
Click inside the grid and select the grid tab. Choose a color under the background. You can choose from Post Style colors created in the Content Design System Manager (CDSM) or make the background transparent.
Upload your image by clicking the Add image buton 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 a background image to the post, grid, or column.
Click inside the grid and select the grid tab. Adjust the bottom indent in pixels (px) or hold CTRL+↑/↓ arrow keys.
Click inside the grid to create a paragraph. Click Add grid in the Side toolbar. It will highlight the inner grid. This function would be helpful when working with infographics or creating complex layouts.
To remove a grid, right-click it and select Flatten grid in the context menu. If you want to delete the grid and its content — select Delete grid.
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 Mobile view, select reverse to display columns from right to left vertically or matrix to create two columns.
Click inside the grid and select the grid tab in the Upper Toolbar. Click on the anchor icon in the tab on the Upper Toolbar to give the anchor a name.
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.