Help Center
  • Welcome
  • Setka Editor
    • Getting started
    • Drag-and-Drop & Multiselect
    • Text editing
    • Grids and Layout
    • Images
      • Image Editor
    • Background images
    • Icons
    • Animations
    • Lists
    • Tables
    • Dividers
    • Footnotes
    • Hotspots
    • Enhance Symbols
    • Post templates
    • Buttons
    • Comments and collaboration
    • Embeds
    • Hyphenation
    • Responsive layout for mobile screens
    • Custom CSS
    • Custom JS plugins
  • Setka Content Design System Manager
    • Creating and editing styles
    • Text formats and fonts
    • Styles display for mobile mevices
    • Text and background colors
    • Dividers
    • Icons
    • Components – reusable design elements
      • Creating Components with HTML and CSS
        • CSS in components
        • Component examples
    • Configuring layout grids
    • Editing default elements with Custom CSS
    • Adding team members
  • Account Settings
    • Account settings basics
    • Access rights
    • Billing and subscription
  • Preserve your Setka Editor content after the service shutdown
  • Integrations
    • Setka and WordPress
      • Installing Setka Editor WordPress plugin
      • Launching Setka Editor on the post creation page
      • Setka Editor and WordPress compatibility
      • Setka Editor compatibility with the most popular WordPress plugins
      • Inserting graphs, charts, or diagrams into a post
      • Setka Editor and Google AMP
      • Inserting adverts into a post
      • srcset — the attribute for image size optimization
      • Page load speed optimization settings
        • Autoptimize plugin configuration
      • WordPress troubleshooting: known Issues and how to fix them
      • Preserve your Setka Editor content after the service shutdown
    • Setka and Drupal
      • Setka for Drupal — compatibility, and features
      • Installing Setka modules for Drupal
      • Setka content on AMP pages in Drupal
    • Setka and Magento
      • Installing Magento 2 extension
        • Setka Editor configuration page
      • Preserve your Setka Editor content after the service shutdown
    • Setka and HubSpot
      • Setka Editor and HubSpot Blogs
      • Setka Editor and HubSpot Landing Pages
      • Semi-gated content with a HubSpot form
      • Preserve your Setka Editor content after the service shutdown
    • Setka and Bitrix
      • Preserve your Setka Editor content after the service shutdown
    • Setka and Ghost
      • Copying and pasting posts from Setka to Ghost
    • Setka and SharePoint Online
      • Installing Setka Editor application into SharePoint Online
    • Setka and Zapier
      • Setka and Webflow
        • Exporting new posts
        • Updating exported posts
      • Setka and Shopify
    • Setka and Integromat
    • Content Cloud
  • API
    • Setka Content Cloud API
    • Webhooks
    • API for Custom CMS Integration
      • Introduction to custom integration
      • Integration with Content Design System Manager (CDSM)
        • Initial sync — receiving Setka Editor files to connect them to your CMS
        • Storing and processing Setka Editor files
        • Connecting Setka Editor files to the pages of your site
        • Receiving style updates from the Style Manager and new editor versions
      • Setka Post Editor initialization (JavaScript)
      • Integration with Style Manager (API v1, previous version)
      • Preserve your Setka Editor content after the service shutdown
    • Custom Components API
  • VIDEO TUTORIALS
    • Setka Editor Video Tutorials
  • Components Library
    • Components Library
    • Guide: Ideas for Using Setka Editor’s Components to Improve Content Design
  • Content Experience Design Best Practices
    • Guide To Designing a Great Content Experience
Powered by GitBook
On this page
  • What is a component?
  • Components and post style
  • How to create components?
  • How to change components?
  • How to delete components?
  • Can I copy a component from one style to another?

Was this helpful?

  1. Setka Content Design System Manager

Components – reusable design elements

How to create, delete and change components

PreviousIconsNextCreating Components with HTML and CSS

Last updated 3 years ago

Was this helpful?

What is a component?

The Component is a template with formatting elements that can be used in posts. Layouts for specific content such as quotes, author’s name, photo, event cards, or numbered lists can be saved for future use. Components speed up the layout process as these design elements are available to you instantly.

Components and post style

Each component is created using elements from a particular Post Style, meaning they are unique to this style and cannot be transferred to others. While Setka’s default styles contain several ready-made components, you cannot create new components in these styles.

How to create components?

To create a component in Setka Editor, select the desired paragraph and any number of elements you would like to save as a component. Then, click the Components button in the right-hand sidebar. Click Add component, give the component a name, and save it.

Saved components will appear in the Components bar to insert into existing or future posts in this style. To upload them, select a paragraph, and click the components icon. The components list will be displayed.

Components can also be , but you will have to write HTML and CSS code from scratch.

Learn more about components and get inspired with multiple ready-to-use examples in .

How to change components?

Components can only be edited in the Content Design System Manager (CDSM). If you want to change a created component, you have to do it in HTML code. Click on Styles > Post Style > Components (left hand bar).

Alternatively, upload the existing component in the Post Editor. Edit the content and save it as a new component, alongside the original. Delete the original if necessary.

How to delete components?

Components can only be deleted and renamed in the Content Design System Manager (CDSM). Remember to save the changes to remove them from the Post Editor list. Deleting a component created in the Post Editor removes it from the component list without affecting the post or previous posts, including this component. However, When you delete components created in CDSM using CSS code, the custom style will disappear from your published posts leaving plain text.

Can I copy a component from one style to another?

As components consist of elements from a particular post style like colors, fonts, dividers, and icons, it is impossible to copy them into a different post style.

added from the Content Design System Manager (CDSM)
Setka Components Library
Adding a Component with HTML and CSS in Setka Content Design System Manager