Help Center
  • Welcome
  • Setka Editor
    • Getting started
    • Drag-and-Drop & Multiselect
    • Text editing
    • Grids and Layout
    • Images
      • Image Editor
    • Background images
    • Icons
    • Animations
    • Lists
    • Tables
    • Dividers
    • Footnotes
    • Hotspots
    • Enhance Symbols
    • Post templates
    • Buttons
    • Comments and collaboration
    • Embeds
    • Hyphenation
    • Responsive layout for mobile screens
    • Custom CSS
    • Custom JS plugins
  • Setka Content Design System Manager
    • Creating and editing styles
    • Text formats and fonts
    • Styles display for mobile mevices
    • Text and background colors
    • Dividers
    • Icons
    • Components – reusable design elements
      • Creating Components with HTML and CSS
        • CSS in components
        • Component examples
    • Configuring layout grids
    • Editing default elements with Custom CSS
    • Adding team members
  • Account Settings
    • Account settings basics
    • Access rights
    • Billing and subscription
  • Preserve your Setka Editor content after the service shutdown
  • Integrations
    • Setka and WordPress
      • Installing Setka Editor WordPress plugin
      • Launching Setka Editor on the post creation page
      • Setka Editor and WordPress compatibility
      • Setka Editor compatibility with the most popular WordPress plugins
      • Inserting graphs, charts, or diagrams into a post
      • Setka Editor and Google AMP
      • Inserting adverts into a post
      • srcset — the attribute for image size optimization
      • Page load speed optimization settings
        • Autoptimize plugin configuration
      • WordPress troubleshooting: known Issues and how to fix them
      • Preserve your Setka Editor content after the service shutdown
    • Setka and Drupal
      • Setka for Drupal — compatibility, and features
      • Installing Setka modules for Drupal
      • Setka content on AMP pages in Drupal
    • Setka and Magento
      • Installing Magento 2 extension
        • Setka Editor configuration page
      • Preserve your Setka Editor content after the service shutdown
    • Setka and HubSpot
      • Setka Editor and HubSpot Blogs
      • Setka Editor and HubSpot Landing Pages
      • Semi-gated content with a HubSpot form
      • Preserve your Setka Editor content after the service shutdown
    • Setka and Bitrix
      • Preserve your Setka Editor content after the service shutdown
    • Setka and Ghost
      • Copying and pasting posts from Setka to Ghost
    • Setka and SharePoint Online
      • Installing Setka Editor application into SharePoint Online
    • Setka and Zapier
      • Setka and Webflow
        • Exporting new posts
        • Updating exported posts
      • Setka and Shopify
    • Setka and Integromat
    • Content Cloud
  • API
    • Setka Content Cloud API
    • Webhooks
    • API for Custom CMS Integration
      • Introduction to custom integration
      • Integration with Content Design System Manager (CDSM)
        • Initial sync — receiving Setka Editor files to connect them to your CMS
        • Storing and processing Setka Editor files
        • Connecting Setka Editor files to the pages of your site
        • Receiving style updates from the Style Manager and new editor versions
      • Setka Post Editor initialization (JavaScript)
      • Integration with Style Manager (API v1, previous version)
      • Preserve your Setka Editor content after the service shutdown
    • Custom Components API
  • VIDEO TUTORIALS
    • Setka Editor Video Tutorials
  • Components Library
    • Components Library
    • Guide: Ideas for Using Setka Editor’s Components to Improve Content Design
  • Content Experience Design Best Practices
    • Guide To Designing a Great Content Experience
Powered by GitBook
On this page
  • Overview
  • Layout Grid and Grid Modules. What is the difference?
  • Creating new grid
  • Aligning text in a grid
  • Adding columns
  • Deleting columns
  • Adding images
  • Adding videos and other embeds
  • Does the image size change when I insert it into a grid?
  • Adding new content before or after a grid
  • Via keyboard shortcuts
  • Via context menu
  • Via Quick add menu
  • Setting backgrounds for a grid
  • Setting the grid's background-color
  • Setting a background image
  • Adjusting grid's bottom indent
  • Inserting a grid into another grid (Nested Grids)
  • Removing a grid
  • Adjusting the grid for mobile
  • Adding an anchor to a grid
  • Removing margins in the mobile version

Was this helpful?

  1. Setka Editor

Grids and Layout

Working with layouts in Setka Editor, using grids and nested grids.

PreviousText editingNextImages

Last updated 2 years ago

Was this helpful?

Overview

Please watch this tutorial video to learn all you need to know about grid modules in Setka Editor:

Video

Learn more about the benefits of a grid for easier navigation and a better reading experience:

  • (by )

Layout Grid and Grid Modules. What is the difference?

There are two types of grids in Setka Editor:

  1. Post Layout Grid is a layout system for the whole post and can be created in the in Setka Account. Read more about Layout Grids here.

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

Creating new 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.

Aligning text in a grid

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.

Adding columns

Click + at the upper edge of the grid.

Deleting columns

Click " - " at the upper edge of the grid.

Adding images

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.

Adding videos and other embeds

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.

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

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.

Adding new content before or after a grid

There are several ways to add elements next to the grid.

Via keyboard shortcuts

To add a new paragraph after the grid, place the caret at the end of the last row in this grid. Then press CMD/CRTL+ENTER.

To add a new paragraph before the grid, place the caret at the end of the last row in this grid. Then press CMD/CRTL+ALT+ENTER.

Via context menu

Right-click inside the grid that you want to add content next to. By pressing the ALT button, you can switch the available sets of options. You can add a paragraph either after or before the grid:

Via Quick add menu

On the right-hand edge of the grid, you will see the Quick add button. It opens the menu that makes you able to quickly add content before or after the grid. The content that can be added is:

  • Grid

The element is added below the grid by default. For other options, hover above the right-hand side of the menu.

Before you add a new element, the editor will indicate where the element would be placed with the purple line. If the nested grid is selected, the element can also be placed above or below the outer grid:

Setting backgrounds for a grid

Setting the grid's background-color

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.

Setting a background image

Upload your image by clicking the Add image button 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.

Adjusting grid's bottom indent

Click inside the grid and select the grid tab. Adjust the bottom indent in pixels (px) or hold CTRL+↑/↓ arrow keys.

Indents are defined by line height. The amount of pixels in each of the available options is calculated depending on the height of the text line (this is the parameter that is responsible for line spacing) in the Paragraph text style. The default value (marked as default) will always be equal to the specified line height parameter set up in the account setting. The remaining values ​​will have coefficients from 0 to 4x (there is detailed information on this in our support center and in a separate video regarding setting up the style manager. Links to these materials are in the description of the video).

Inserting a grid into another grid (Nested Grids)

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.

Removing a grid

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.

Adjusting the grid for mobile

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.

Adding an anchor to a grid

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.

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

Image
Table
List
Embed
Divider
Why You Should Use a Grid for Designing Layouts?
Nielsen Norman Group
Content Design System Manager (CDSM)
Video tutorial on how to put several paragraphs in one grid and how to add a grid after a grid
Video tutorial on how to remove and add a column in a grid using the "+" and "-" signs in Setka Editor
Video showing how to remove and add a column in a grid using the "+" and "-" signs in Setka Editor
Video tutorial on how to insert an image in a grid using Add Image button in Setka Editor
Paragraph
Video tutorial on how to add a video embed to a grid using Add embed button in Setka Editor. Video Also shows how to press Render and Unrender toggle to see the embed as a video or as a box with HTML code or a link.
Video showing how to add an image background to a grid in Setka Editor
Video tutorial on how to add a nested grid and manage it's display on mobile screens
Grids button and various options for grid modules with 6 column layout in Setka Editor
Embed tab in Upper Toolbar in Setka Editor with Resposive Embed option selected
Context menu for the Setka Editor grid. Pess ALT to change the list of options.
Setka Editor Quick add menu
Context Menu in Setka Editor with the Flatten Grid option highlighted
Context Menu in Setka Editor with the Delted Grid option highlighted
Screenshot showing the Mobile Option editing mode activated in Setka Editor with a drop-down menu for mobile view options
Gallery