Editor Snippets
Overview
This theme also has a set of pre-defined CSS classes which, if used with the <HTML> Ghost Editor Element, can turn into functional blocks. These include:
- Two-column layout like you are seeing right now and at the top of this very page
- A fully-functioning nested toggle like the one you can see below
Open Me!
And a code block!Live example
This is how the Ghost Page looks for the first segment of the page you've just read:
The content of the HTML blocks is not visible unless it's expanded, which benefits readability.
In order to easily add snippets to your page you can use the /sn command in the Editor:
Two-column layout
The two-column layout consists of three snippets:
- Opening snippet
ch-layout-2col--start - Breaker snippet (between the content of two columns)
ch-layout-Ncol--break - Closing snippet
ch-layout-Ncol--end
Naming of the snippets is up to you, but my thinking is that between column layouts, which I can then create more of, the only difference will be in the --start snippet, the other two would apply to any number of columns layout, hence Ncol instead of 2col.
Opening Snippet ch-layout-2col--start
The snippet contains the following HTML:
<div class="ch-layout-2-columns">
<div class="ch-layout-column ch-nested-content">ch-layout-2col--start snippet
Notice the ch-nested-content class. It's used to apply default Ghost styling to elements, ensuring consistent margins.
Breaker snippet ch-layout-Ncol--break
Similarly, just one line to close off the nested-content div and another to open a new one:
</div>
<div class="ch-layout-column ch-nested-content">
ch-layout-Ncol--break snippet
Closing snippet ch-layout-Ncol--end
And finally, closing off both the second column and the overall element:
</div>
</div>ch-layout-Ncol--end snippet
Usage
Now, in order to apply this snippet you would use the HTML Element, edit it, then create a snippet and name it:
Once all three are created, you would structure your content like so:
- Opening snippet
- Content for your first column
- Breaker snippet
- Content for your second column
- Closing snippet
Rich Toggle
By default, the Toggle Editor Block only allows us to enter text. That's often inadequate, as you might want to hide away certain details or explanations for a segment of the audience without impeding the flow of the article.
That's where the Rich Toggle with Chapter Theme comes in. It has two snippets:
- Opening snippet
ch-toggle--start - Closing snippet
ch-toggle--end
Everything encased between the two will be collapsed and you're free to use any of the available Editor Blocks.
Opening snippet ch-toggle--start
This one is a bit more complex, and there is one element of it that you'll need to modify to change the title of the snippet:
<div class="kg-card kg-toggle-card" data-kg-toggle-state="close">
<div class="kg-toggle-heading">
<h4 class="kg-toggle-heading-text js-toc-ignore">
<span style="white-space: pre-wrap;">Open Me!</span>
</h4>
<button class="kg-toggle-card-icon" aria-label="Expand toggle to read content">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path class="cls-1" d="M23.25,7.311,12.53,18.03a.749.749,0,0,1-1.06,0L.75,7.311"></path>
</svg>
</button>
</div>
<div class="kg-toggle-content ch-nested-content">To dive a bit deeper, the line saying <span style="white-space: pre-wrap;">Open Me!</span> is the one you'd need to change, replacing Open Me! with the text of your choosing.
<span></span>, otherwise it can mess up your formattingClosing snippet ch-toggle--end
Much more straightforward, we're just closing off the two div elements we created:
</div>
</div>Usage
Similarly to the Two-Column layout, you would need to first create the snippets, and then it can be used as such:
- Opening snippet
- Content of your toggle
- Closing snippet
Settings for this Post
To help you with your Chapters journey I have attached this post's settings below so you could troubleshoot your configuration.
Member discussion