Getting started
A quick overview of the Setka Editor interface and features, along with all shortcut keys.
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
Please note that to streamline content creation text styles, text and background colors, and styles for links, buttons, dividers, and icons are configured in Setka Content Design System Manager.
You won't be able to change text styles or colors in the Setka Editor interface but you can always do the in the Design System Manager 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 Setka Content Design System Manager.
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.
Setka Content Design System ManagerContent 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:
Options of the Side Toolbar marked with * (below) are available on premium plans, please see our pricing page 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.
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.
Custom CSS tool is available only on Pro plan. Please see our pricing page for more details.
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
Last updated
