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:

Setka Editor Interface video tutorial

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.

Dropdown menu with various content styles in Setka Editor Upper Contextual Toolbar

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.

pageSetka Content Design System Manager

Content Editing Area

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

Setka Editor content editing area

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.

Setka Editor Upper Contextual Toolbar

Setka Editor Upper Contextual Toolbar interface when expanded

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:

Video tutorial about Upper Contextual Toolbar in Setka Editor

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.

Paragraph tab

Breadcrumbs tabs in the Upper Contextual Menu in Setka Editor with the Paragraph tab

Image tab

"Breadcrumbs" in Upper Contextual Toolbar in Setka Editor with Image tab selected

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

Setka Editor Side Toolbar

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

Video tutorial about Setka Editor Side Toolbar

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 Inline Icons

• Add Table *

• Add List

• Add Embed * with links or HTML-code

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

• Add Button

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

Context Menu for Post Tab

Setka Editor Context Menu Interface when working with the entire post/page content and settings

Context Menu with a Paragraph

Setka Editor Context Menu when working with a Paragraph without grids

Context Menu within a Grid

Setka Editor Context menu when working with a grid or a paragraph within a grid

Status bar

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

Setka Editor Status bar interface with "Undo" button

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

Video tutorial about Setka Editor Status Bar interface

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.

Video tutorial about copy-pasting content from source document

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.

pageText editing

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 Field in Setka Editor Upper Contextual toolbar

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

pageCustom CSS

Post preview

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

Preview Post Icon (Button) in Side Toolbar in Setka Editor

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.

Post Preview mode with the Mobile option selected

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.

Support Options Button

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

Keyboard Shortcuts Window

Pop-up window with keyboard shortcuts in Setka Editor interface

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