Introduction

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.

What are components

A component in Setka Editor is an HTML template (which sometimes has its own styles) that can be added to the post in the editor’s interface. After the component is added to the post, a designer or editor can change its content. Components consist of components that are created in Setka Editor (see the “Component” section for more). These components can reference CSS classes which must be defined when copying the code from this library.

Style ID (stk-theme) is one of the important classes to change. For example:

`<p class="stk-theme_00000__style_small_header">Jackson Galaxy</p>`

changes to:

`<p class="stk-theme_1465__style_small_header">Jackson Galaxy</p>`.

Learn how to find the style ID here.

Some components have text elements with a given font color. They have classes like `stk-theme_X__color_X_custom_color_Y`, where X is the style ID and Y is the color preset ID. In our code examples, you’ll sometimes see `stk-theme_00000__color_00000_custom_color_...` to help remind you that this is just a sample and you’ll need to fill in your own values.

Learn how to find color preset ID here.

A component’s HTML code becomes a part of the page markup when added to a post. If you change a component’s code in the Style Manager, components will not change in existing posts.

A component’s CSS styles are connected with the post’s CSS; so, if you change the CSS of the component it will affect all posts that were published before. If you create posts using one of our integrations (e.g., through WordPress, Magento, etc), then you will see the changes almost immediately on your website. However, if you use Design Cloud and export code, you’ll need to re-export it again after you make changes in order to see them reflected on your website.