Creating Components with HTML and CSS
Components for Setka Editor are made two ways:
- In the Editor itself. To do this, build up the element and save it using the Component button in the right-hand panel. More on it in this article.
- In the CDSM. It can be used to turn any HTML code into a component. This is useful if the standard features of the Editor are not enough. E.g. additional decoration or some specific structure is needed.
Any valid HTML code can be used as a component. The code also utilizes the standard Setka Editor elements: grids, columns, paragraphs, galleries, and images. They must contain the appropriate CSS classes. You can use your own classes in addition to the standard ones.
Follow the guidelines below to create valid components that will be accepted by the Editor.
A component can consist of the following elements:
The main container of any Setka Editor publication.
<div class="stk-post">
<!-- post content -->
</div>
<div class="stk-post">
<p>First paragraph</p>
<p>Second paragraph</p>
</div>
Post can contain | Post cannot contain |
| Columns |
The post cannot contain pure columns. Each column must be wrapped in a grid.
A paragraph is a basic content unit in Setka Editor. Any text should be placed inside a paragraph. Along with the paragraphs, there are also headings. Heading tags are:
<h1> – <h6>.<p><!-- paragraph content --></p>
<h2 class="stk-theme_XXXX__style_large_header">
<!-- heading H2 -->
</h2>
<h4 class="stk-theme_XXXX__style_small_header">
<!-- heading H4 -->
</h4>
Replace
stk-theme_XXXX__style_large_header and stk-theme_XXXX__style_small_header with header classes from your style.A paragraph can be inside | A paragraph can contain |
|
|
A paragraph cannot be placed inside | A paragraph cannot contain |
Grid | Anything besides text, decoration, and images. |
A paragraph cannot be placed inside a grid. Before placing a paragraph into a grid, you need to divide this grid into columns or create one column for the entire width of this grid.
<p>Text</p>
<p>Text with <a href="https://setka.io">link</a> to the website</p>
<p>Text with <strong>strong</strong> weight<br> with line break</p>
<p><img src="icon.png" alt="icon"> text</p>
<h2 class="stk-theme_XXXX__style_small_header">
Large header
</h2>
Layout Grid is used as a framework for a multi-column layout. Each grid consists of a container (
stk-grid) and column (stk-grid-col). Images, paragraphs, and all other content types are placed within the columns.<div class="stk-grid" data-ce-tag="grid">
<!-- column 1 -->
<!-- column 2 -->
<!-- column N -->
</div>
A grid can be placed inside | A grid can contain |
| Column |
A grid cannot be placed inside | A grid cannot contain |
Paragraph | Nothing but columns. All grid content must be arranged in columns. |
<div class="stk-grid" data-ce-tag="grid">
<div class="stk-grid-col" data-ce-tag="grid-col" data-col-width="3">
<p>Text in the left column</p>
</div>
<div class="stk-grid-col" data-ce-tag="grid-col" data-col-width="3">
<p>Text in the right column</p>
</div>
</div>
<div class="stk-grid-col" data-ce-tag="grid-col" data-col-width=”{N}”>
<!-- column content -->
</div>
You need to set the
data-col-width attribute for a column that determines its width. This attribute can be an integer from 1 to the maximum number of columns in a given grid. For example, in a 6-column grid, the data-col-width attribute can take values from 1 to 6.A column can be placed inside | A column can contain |
Grid |
|
<div class="stk-grid" data-ce-tag="grid">
<div class="stk-grid-col" data-ce-tag="grid-col" data-col-width="1">
<p>narrow left column</p>
</div>
<div class="stk-grid-col" data-ce-tag="grid-col" data-col-width="1">
<p>central column content</p>
</div>
<div class="stk-grid-col" data-ce-tag="grid-col" data-col-width="1">
<p>narrow right column</p>
</div>
</div>
An image consists of:
- An image container —
image-figure. - A mask —
mask. - The image itself —
<img>. - An image caption —
<figcaption>.
All these elements are mandatory except for the caption.
<figure class="stk-image-figure" data-ce-tag="image-figure">
<div class="stk-mask" data-ce-tag="mask">
<img src="path/to/image.jpg" alt="">
</div>
<figcaption class="stk-description" data-ce-tag="description">
<!-- Image caption -->
</figcaption>
</figure>
An image placeholder can also contain a link:
<figure class="stk-image-figure" data-ce-tag="image-figure">
<div class="stk-mask" data-ce-tag="mask">
<a class="stk-link" href="https://setka.io">
<img src="path/to/image.jpg" alt="">
</a>
</div>
<figcaption class="stk-description" data-ce-tag="description">
<!-- Image caption -->
</figcaption>
</figure>
An image can be placed inside | An image can contain |
| The image cannot contain any additional elements. |
Image placeholder — a place to insert an image into a post. When clicked, it opens the image selection menu on the right toolbar.
An image placeholder consists of:
- An image container —
image-figure. - A mask —
mask. - An image caption —
<figcaption>.
All these elements are mandatory except for the caption. The placeholder should not contain the image itself (the
<img> tag).<figure class="stk-image-figure" data-ce-tag="image-figure">
<div class="stk-mask" data-ce-tag="mask">
</div>
<figcaption class="stk-description" data-ce-tag="description">
<!-- Image caption -->
</figcaption>
</figure>
An image placeholder can be placed inside | An image placeholder can contain |
| The placeholder cannot contain any additional elements. |
An embed code structure is similar to an image and can contain any HTML code inside the
<code> element, including <style> or <script>.<figure class="stk-embed-figure" data-ce-tag="embed-figure">
<code class="stk-code">
<!-- HTML-code -->
</div>
<figcaption class="stk-description" data-ce-tag="description">
<!-- Embed code caption -->
</figcaption>
</figure>
An embed can be placed inside | An embed can contain |
| Some HTML code. |
<hr class="{Divider CSS-class}">
A divider can be placed inside | A divider can contain |
| The divider is an independent element. It cannot contain other elements within itself. |
<hr class="stk-theme_XXXX__separator_basic_divider">
A gallery is a container for images. Gallery's JavaScript makes an animated slideshow in the preview mode and on the page where a post is published. The images are placed inside the gallery.
<div class="stk-gallery" data-ce-tag="gallery">
<figure class="stk-reset stk-image-figure" data-ce-tag="image-figure">
<!-- Image 1 -->
</figure>
<figure class="stk-reset stk-image-figure" data-ce-tag="image-figure">
<!-- Image 2 -->
</figure>
<figure class="stk-reset stk-image-figure" data-ce-tag="image-figure">
<!-- Image 3 -->
</figure>
</div>
A gallery can be placed inside | A gallery can contain |
| Images |
A container is a universal entity for any block type that can not be formed through the standard Setka Editor elements. Any class or attribute can be assigned for a container, ad for any other elements.
<div class="stk-container" data-ce-tag="container">
<!-- Content -->
</div>
Containers can also be used to form block links:
<a class="stk-container stk-container-link"
data-ce-tag="container"
href="https://setka.io">
<!-- Content -->
</a>
A container can be placed inside | A container can contain |
|
|
The component in an article is presented as static HTML code. In most cases, deleting a component from the style wouldn't affect the pages it was used on.
Delete components with custom CSS carefully. Make sure other components and style elements do not rely on this component's CSS rules defined in the Custom CSS for component field.
If you need to delete the component that contains custom CSS, copy the content of the Custom CSS for component field and add it into your style's custom CSS.
Last modified 2yr ago