Setka Onboarding for Engineering Teams
The deep dive into how Setka Editor works, from the inside.
- 1.Platform Overview
- 2.Setka Architecture
- 6.Analytics and Ad-Tech
- 7.Components and Templating
- 8.Step-by-step guide
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
Graphic scheme of Setka Editor integration structure
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
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).
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.
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 to the user’s domain.
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:
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 posts utilize these files to function properly:
- The post's HTML code.
- CSS files of Setka styles and grids.
- JS files of interactive elements, such as galleries and animations.
- JS file of the editor itself, in case of CMS plugins or custom integrations.
The file storage location depends on the integration type.
The official Setka plugins for CMS and e-commerce platforms can be configured to your liking. All the files are stored on your server by default, but it can be changed in plugin settings.
No. Setka Editor uses unique CSS class names that won't interfere with your site's styles.
Setka Editor is compatible with headless CMS and static site generators. Here are the examples:
Setka integrates with many different content management systems (CMS) or eCommerce platforms. See the options below and learn how to set up Setka with your preferred CMS.
Want to customize things further? Learn how to use the Setka APIs to integrate with a different CMS, create custom components, or build for API-first platforms.
- 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 generated content is following all web best practices and scores high in Google Lighthouse.
Setka Editor is only responsible for the post content itself. The content is placed inside the
METApart of the code is organized on the CMS side.
Setka content is optimized based on best practices advised by Google Lighthouse. Hence, it loads faster and gains more points in benchmarks than other popular page builders.
Setka Editor content is compatible with the majority of SEO plugins. Our clients successfully use the editor in conjunction with Yoast SEO, All in One SEO Pack, Google XML Sitemaps, Seo Ultimate, and other popular SEO solutions.
Setka posts are HTML code that is not placed into
<iframe>. Thus, the code is compatible with in-read ads. These ads are tied to paragraphs. Ad blocks successfully run in between text blocks. You can count paragraphs based on a combination of
<p>tag and the
data-ce-tag="paragraph"attribute. Here is an example of a typical paragraph in a Setka post:
<p class="stk-reset" data-ce-tag="paragraph">
Setka Editor does not come with its' own analytics tool. However, Setka posts are fully compatible with third-party analytics, such as Google Analytics, Google Tag Manager, IO, Yandex Metrica, etc.
Setka takes an approach whereby the tool should not measure its own performance. Measurements should be taken by independent agents — other analytics tools and benchmarks.
Setka provides flexible tools for templating and customizing the editor itself.
Components are what we call our customizable micro-templates that you can create and use over and over again for smaller bits of content throughout your posts and pages—things like CTA boxes, pull quotes, side notes, dividers, captions, and more. Not only can you create reusable layouts for these small elements, but you can make sure each one is branded using your fonts, colors, brand imagery, and styles.
Post templates could save you time if you are regularly creating content with similar structure and design elements. Like components, post templates save time when creating new content.
The editor itself is also customizable. You can add custom buttons to the right-hand toolbar if needed. This is done via the Custom Components API:
Setka Editor can optimize images automatically if Setka Cloud is used. It also supports source sets for any desired CMS or custom integration.
All Setka Cloud posts come with source sets for different screen sizes. Resized images are also converted to next-gen formats such as .webp.
Setka automatically generates source sets (
srcsetattribute) for different screen sizes in official WordPress and Drupal plugins. You can also generate
srcsetin your custom CMS — Setka posts will work with it just fine.