Setka Onboarding

How to learn all Setka basics in less than 35 min. and all about Content Design System Manager in 13 min.

Agenda

  1. Platform Overview (1:57)

  2. Setka Editor Interface (4:10)

  3. Grids (5:48)

  4. Backgrounds (5:06)

  5. Images (3:47)

  6. Animations (8:21)

  7. Content Design System Manager (13:20)

  8. Mobile options (4:59)

  9. Q&A: How to Get Support or Ask a Question

  10. Exploring Setka: next steps and links

  11. For Engineers

1. Platform Overview

Setka Editor is a smart tool for distributed teams to design better content experiences that convert without having to code. We help companies upgrade their content design experiences by delivering:

  • Best-in-class software: An easy-to-use flexible editor with powerful design capabilities and outstanding page load performance optimization.

  • Open content ecosystem mentality: We provide seamless integrations with any content management systems or eCommerce platforms and the ability to build on top of Setka Editor.

  • Collaborative design: we enable cross-team collaboration for designers and non-designers alike.

Before you start learning how to use the specific tools in Setka Editor, check out this high-level explanation of what Setka allows you to do—and how it can help you create more beautiful content designs.

Video with an overview of Setka platform

2. Setka Editor Interface

Next, get comfortable with the Setka Editor workspace with this walkthrough that explains all the options available to you on the platform and shows you precisely where you can find the tools you need to create beautiful content layouts.

Video tutorial with an overview of Setka Editor interface

2.1. Drag &Drop

Setka Editor’s multi-select and drag-and-drop tools make adjusting and perfecting your layouts a breeze. This video will show you precisely how to use them.

Short video showcasing drag&drop editing experience in Setka Editor

3. Grids

Grids are one of the unique features of Setka Editor, pulled from traditional print design to give you ultimate control over the layout of your articles. There can be a bit of a learning curve but worry not—the videos below will get you up to speed in no time!

Video about grids and nested grids in Setka Editor

4. Backgrounds

Images or solid colors can also be used as backgrounds for your posts' individual elements or entire swaths of your post. This video will walk you through how to add and configure different types of backgrounds.

Video tutorial video about working with background in Setka Editor

5. Images

Since images are so critical to good editorial design, Setka Editor has a wealth of tools to help you integrate them into your posts.

Learn more about how to use them in this video, including uploading images to the image library, editing images directly within the Editor, inserting individual images or image galleries into your posts, adding captions or Alt Text, and using grids to adjust the layouts of your images.

Video tutorial showing how to work with images and image galleries in Setka Editor

6. Animations

Adding animation to various elements in your post can be a great way to make it more dynamic.

This video will not only walk you through how to add animations to text, images, and more in Setka Editor—including the different animation presets that are available to you and how to use manual animation options to create a specific look—but will also share some best practices for integrating animations into your designs.

Video tutorial showing how to create animations in Setka Editor

7. Content Design System Manager

Setka’s Content Design System Manager lets you easily set up content styles that reflect your brand, manage re-usable design components and create custom layout grids that you can use over and over again. This video will walk you through how to get started, and all the options you have in the Setka CDSM.

Video tutorial about Setka Content Design System Manager

Also, check out this visual step-by-step guide "How to use Setka’s Design System Manager".

8. Mobile options

To save you time, Setka Editor helps generate the mobile version of any post automatically based on the desktop version. If needed, you can tweak the layout for mobile screens without changing the desktop one. To do that, use the feature called Mobile options. This video will walk you through how to do this.

Video tutorial about mobile options in Setka editor

9. Q&A: How To Get Support or Ask a Question

Feel free to reach out to our support team if you need more help, either by emailing [email protected] or by using the chat icon in the bottom right-hand corner (right here or in the Setka Editor interface).

Intercom chat icon

10. Exploring Setka Further

11. For Engineers

Setka Editor files launch both on the post editing page (for the editor tool operation) and on the post preview page (to connect Setka Editor styles to user’s content).

Setka Editor files on the post-editing page:

  • content_editor_files — JS и CSS editor files (WYSIWYG interface of Setka Editor).

  • theme_files — JSON config file and a concatenated CSS file of user’s styles.

Setka Editor files on a post preview page

  • pulbic.js — scripts to launch interactive post elements (animations, footnotes, galleries, etc.)

  • style files — there are several ways to turn post styles on the post preview page

All the changes in styles and layout grids are automatically sent via webhook push events to the user’s domain.

To get these changes reflected in your CMS, the user needs to receive updates from editor.setka.io.

Setka Editor will address a URL specified in the Editor Webhooks Endpoint field on the CMS Integration page (e.g., yourdomain.com/setka_editor_config) with the following request: POST yourdomain.com/setka_editor_config.

Once a Style Manager style is updated, the posts where these styles were used change to reflect the changes made to the style. However, the changes cannot be applied instantly. The delay depends on the cache update settings on the client-server. Adding new elements does not cause changes to old posts.

Setka Editor Integration Chart

Clean, SEO-friendly code:

  • Setka Editor is focused on proper code structure in line with HTML5 standards. Unlike many page builders, working within post content allows for a lower level of nesting (which means faster loading times).

  • Setka Editor properly uses header tags and supports input of alt text for all your images.

  • Setka generated content is following all web best practices and scores high in Google LightHouse.

Setka Components Library:

API-s