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
  • Setka Editor Interface
  • Overview
  • Content Editing Area
  • Upper Contextual Toolbar
  • Side Toolbar
  • Context Menu
  • Status bar
  • Adding Content for the first time
  • Custom CSS
  • Post preview
  • Shortcut keys
  • Shortcuts for Mac
  • Shortcuts for PC
  • Grids Panel Shortcuts
  • Images Panel Shortcuts

Was this helpful?

  1. Setka Editor

Getting started

A quick overview of the Setka Editor interface and features, along with all shortcut keys.

PreviousSetka EditorNextDrag-and-Drop & Multiselect

Last updated 2 years ago

Was this helpful?

Setka Editor Interface

Overview

The Setka Editor interface contains several parts:

  • Content Editing Area

  • Upper Contextual Toolbar

  • Side Toolbar

  • Context Menu

  • Status bar

Please see this short narrated video tutorial to get an overview of the Setka Editor interface:

Posts/Pages and Stylepacks

You can always see the style you are using in the Upper Contextual Toolbar by navigating to the Post tab and then to the Style field dropdown.

Users can always create new content styles or change existing styles if they have the necessary permissions. For example, some Setka users manage content styles and create content. In some teams, content style management could be reserved for designers or other members of the team.

Content Editing Area

The content editing area where you work on the content of an article or a page.

Upper Contextual Toolbar

The Upper Contextual Toolbar holds settings for alignment, text styles, indents, animations, and more. If you click on the arrow in the center, you’ll open up a panel with additional settings like custom CSS. In the upper right corner, you can see the full-screen mode button. Also, there is a Mobile options button.

The number of tabs in the upper contextual toolbar changes depending on what post element you have clicked on.

Please see this short narrated video for a quick overview:

At the very top, you’ll see the nesting indicator, also known as “breadcrumbs.” It displays the selected element, as well as the other elements in which it’s located.

For example, if the cursor is on text, the Paragraph tab is available; when adding images – you see the Image tab.

Side Toolbar

The Side Toolbar contains the main tools you’ll be using to set up the layout of your content including grid modules, components, images, image galleries, inline icons, tables, bullet and numbered lists, embeds, buttons and etc.

Side Toolbar also contains the "Preview Post" button that opens a quick preview to display web and mobile views (can also be accessed by pressing the Tab key).

Please see this short narrated tutorial video for a quick overview:

The Side Toolbar contains the following options:

  • Post Preview: a quick preview that displays web and mobile views and can also be accessed by pressing the Tab key. Content created in Setka editor becomes ready for mobile screens automatically, and you can see how it looks in this quick preview.

  • Add Grid: the main tool for managing any content layout

  • Add Component *

  • Add Image

  • Add Image Gallery

  • Add Table *

  • Add Embed * with links or HTML-code

  • Add Divider (dividers are like text separators to visually separate content)

  • Add Comment *

  • Add PDF page break **

  • Smart Design Tools; More: Depending on your screen height, some side toolbar elements would be hidden so that the entire toolbar fits on your screen. Press on the icon with ellipses ("More") for more options

  • Enhanced Symbols Tool: it will help you to beautify symbols like dashes, quotation marks, and non-breakable spaces with the touch of a button

Context Menu

The context menu appears upon a right-click. It is an extended tool for managing paragraphs and grids as well as copying various elements within your post.

The number of options in the context menu changes depending on what post element you are working with.

Status bar

The Status Bar is located at the bottom of the Setka Editor interface.

Please see this short narrated tutorial video to get a quick overview:

In the left corner, you’ll find an Undo button and also the number of characters in your post. To the right, by clicking the Question mark sign you will open up several options:

  • In the left corner, you’ll find an Undo button and also the number of characters in your post.

  • To the right, by clicking the Question mark icon you will open up several options:

    • Support button will open up a live chat window with a real-life tech associate

    • Help button navigates to the Help Center (the one you are reading at this very moment)

    • Keyboard shortcuts will open up a list of all keyboard shortcuts you can use to navigate across the interface even more smoothly and easily

  • In the left corner, you’ll also see an icon displaying the current version of the tool

Adding Content for the first time

You can either copy-paste all the text to the Setka Editor content editing area or add and edit content paragraph by paragraph or section by section.

It's faster to add it all at once as you can apply the same layout structure to all the content of the post/page of several paragraphs at once.

Custom CSS

Even though posts can be created without the use of custom CSS or HTML codes, Setka Editor allows you this flexibility as well.

You can edit HTML code directly (Post > Advanced > Edit HTML) or use custom CSS for texts and elements (open the corresponding tab in the top panel).

For example, if you would like to use custom CSS for a specific paragraph, click inside a paragraph to open the Paragraph > ...> Custom CSS.

Post preview

Click the preview post icon (eye), in the Side Toolbar

or press the Tab key to see what the post looks like on desktop and mobile devices. In Setka Cloud you can also see the preview for PDFs (this feature is available on the Pro plan).

Content created in Setka editor becomes ready for mobile screens automatically, and you can see how it looks in this quick preview.

To close the preview either click on the "X" in the top right corner or press Esc/Tab.

Shortcut keys

You can also use shortcuts for each of these tools to navigate across the interface even more smoothly and easily.

You can always access the list of all shortcut keys in the Setka Editor interface. Click the "?" (question mark) sign in the bottom right corner of the Setka Editor interface and select the Keyboard shortcuts option.

Shortcuts for Mac

  • Tab – show/hide the post preview

  • Ctrl + 1...9 — specify styles for the paragraph

  • Ctrl + (up-down arrow) — specify the bottom indentation of the element

  • Сmd+Alt+Сlick — select the grid

  • Ctrl/Cmd + Click — select several elements

  • Ctrl + Shift + A — select all elements

  • Delete — delete the selected elements (except embeds and paragraphs)

  • Shift + Delete — delete the selected paragraph or embed

  • Ctrl + Z — UNDO, the same as a right-click

  • Cmd + Enter — a new paragraph within one grid

  • Cmd + Alt + Enter — new paragraph before a current grid

  • Enter — new paragraph after grid

  • Alt + Enter — new paragraph inside one grid

Shortcuts for PC

  • Tab — show/hide post preview

  • Ctrl + 1...9 — set paragraph styles

  • Ctrl + (up-down arrow) — set the bottom indent of the element

  • Cmd + Alt + Click — select several elements

  • Ctrl + Shift + A — select all elements

  • Delete — delete selected elements (except embeds and paragraphs)

  • Shift + Delete — delete selected paragraph and embed

  • Ctrl + Z — the same as UNDO when you click on the right mouse button

  • Ctrl+ Alt + Enter —a new paragraph before a current grid

  • Ctrl+ Enter — a new paragraph within one grid

  • Enter — new paragraph after grid

  • Alt + Enter — new paragraph inside one grid

Grids Panel Shortcuts

  • Click (on the grid icon) — transform each selected element into a single grid

  • Shift + Click element — transform each selected element into a single grid

  • Ctrl + Click element — insert an empty grid after the selected element

Images Panel Shortcuts

  • Click (on the image) — insert an image after the selected text

  • Shift + Click — insert an image into the line

Please note that to streamline content creation text styles, text and background colors, and styles for links, buttons, dividers, and icons are configured in

You won't be able to change text styles or colors in the Setka Editor interface but you can always do the in the if you have the necessary permissions in your team.

When working with content in Setka Editor, creators operate with styles that were pre-defined in .

Options of the Side Toolbar marked with * (below) are available on premium plans, please see for more details. Option marked with ** is available in the Cloud version of Setka Editor and isn't currently available within Setka Editor plugins for CMS platforms.

Custom CSS tool is available only on Pro plan. Please see for more details.

Setka Content Design System Manager.
Design System Manager
Setka Content Design System Manager
Setka Content Design System Manager
our pricing page
Add Inline Icons
Add List
Add Button
Text editing
our pricing page
Custom CSS
Setka Editor Interface video tutorial
Dropdown menu with various content styles in Setka Editor Upper Contextual Toolbar
Setka Editor content editing area
Setka Editor Upper Contextual Toolbar
Setka Editor Upper Contextual Toolbar interface when expanded
Breadcrumbs tabs in the Upper Contextual Menu in Setka Editor with the Paragraph tab
"Breadcrumbs" in Upper Contextual Toolbar in Setka Editor with Image tab selected
Setka Editor Side Toolbar
Setka Editor Context Menu Interface when working with the entire post/page content and settings
Setka Editor Context Menu when working with a Paragraph without grids
Setka Editor Context menu when working with a grid or a paragraph within a grid
Setka Editor Status bar interface with "Undo" button
Custom CSS Field in Setka Editor Upper Contextual toolbar
Preview Post Icon (Button) in Side Toolbar in Setka Editor
Post Preview mode with the Mobile option selected
Setka Editor intreface with arrow poining at the "Support" button with a question mark sign
Setka Editor interface with close-up on options when pressing "Support" button showing the following options: Language, Keyboard shortcuts, Help Center, Support
Pop-up window with keyboard shortcuts in Setka Editor interface
Video tutorial about Upper Contextual Toolbar in Setka Editor
Video tutorial about Setka Editor Side Toolbar
Video tutorial about copy-pasting content from source document
Video tutorial about Setka Editor Status Bar interface