22 Ideas for Using Setka Editor’s Components to Improve Your Content Design
These micro-templates allow you to create stand-out design pieces that you can use again and again throughout your content.
Snippets 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.
This is a feature that’s pretty unique to the Setka Editor, so sometimes folks aren’t quite sure how to best use it to elevate their content. To help you out, we’ve gathered 22 of our favorite ways to use snippets throughout your site. Think of it as a jumping off point—many of these may apply to your work, but the sky is really the limit when it comes to using snippets. Think creatively about your regular features and formats to come up with more snippets you can create to save yourself time while designing an incredible content experience.
For organizing content
For data & information
For visuals & imagery
Make a Large, Eye-Catching Section Heading
Organizing your content into sections is important for helping readers quickly understand what your content is about and decide which areas (if any) they want to dig more into. Given that 79% of website visitors scan each new page to see what’s relevant to them, dividing your content into obvious sections can really support your readers in finding what they need. Most people do this using header fonts—but your section dividers don’t have to be limited to just bigger fonts! You can use components to stylize section dividers, creating almost a mini cover image for different sections of the piece.
of website visitors scan each new page to see what’s relevant to them — NN/g Report
These should probably still include a larger header font, but can also integrate photos, backgrounds, and even a bit of content, like a short summary of what will be covered in the section or a brief list of key points.
Add a Table of Contents
Including a table of contents at the beginning of your piece is a must when it’s over 3,000 words or is a guide-style piece. This feature gives users a quick snapshot of what they’ll get out of reading the piece (which is helpful for making scanners want to stay on your page), helps them navigate what otherwise would be an overwhelming amount of content, and makes it easy for folks looking for specific information to find it. Given that readers only engage an average of 2 minutes with longer documents like ebooks and whitepapers, you want to do anything you can to allow them to make the most of that time!
Using components, you can design various table of contents styles to work with your brand and content. Some might be better as a full-width block with a contrasting background at the top of an article page, whereas others would be better in the sidebar—you can even anchor it so it stays readily available no matter how far down the page your user has scrolled. You may want to have multiple tiers of headers to break up sections and subsections, or keep it as a simple list. Whatever you do, make sure to use anchor links to allow users to click directly to the section they want to read!
Improve Your Author Profiles
Your standard author bio or byline can so easily get lost in the midst of splashy content filling your page, but you want to make sure to highlight the talented people creating your content! According to Chris Gunnars of Search Facts, doing so can help improve how trustworthy your page looks, and NN/g explains that this is especially true if you’re working with an author who is well known among your audience.
Use components to design author bios that stand out. You might design a small element that goes in the sidebar with the author’s photo, name, short description, or links to their social—or create a full-width element to place at the bottom of your content with a background that stands out and more in-depth information about the person behind this piece of writing.
Add a Summary Card
Summary cards can be used either at the beginning or end of a piece of content to quickly round up key points. Given that readers take as little as 50 milliseconds to judge whether they want to stay on your page, a summary card at the beginning can make it more likely they’ll read on if you’re covering what they’re looking for. Including a summary card at the end of a content piece can be a great way to remind readers how much value you’ve just given them, building trust with them and helping make conversion more likely.
to make a good first impression. — Behaviour & Information Technology vol.25
These could include a custom background to help them stand out from the rest of the content for scanners, a header to explain what this section is all about, illustrated bullets for even more visual interest (more on that in a minute), and more.
Want to learn more about the best ways to organize your content?Read eBook
Create a Parallel Narrative
Sometimes you want to include a section of content that doesn’t quite fit within the rest of the flow. Maybe it’s an interview with valuable, relevant info that didn’t fit anywhere else, or a section digging in even deeper to a particular topic in the article.
You can use components to design these so they stand apart, making it easy for readers to understand that you’re straying a bit from the regular content so they can choose whether to dive in or easily skip the section and read on. Using a different background can be a great way to differentiate these, and you can design them to be full content width or as a card that runs beside your main content. Include images, different headers, icons, or whatever else you need to tell the story.
Make an Easy-to-Insert List
We all know how list-based articles, sometimes referred to as “listicles, ” took the web by storm several years ago, and their influence still lives on. There’s a good reason for that: Providing your readers with a predictable, logical structure improves content comprehension and makes it easier for a reader to scan and quickly understand the high-level information, choosing where they’d like to dig in deeper. Research has backed this up, showing that people more easily digest information when it’s broken into smaller pieces.
With components, you can make organizing your content into a list as easy as reading it. You can either create a separate block for each section of the list down the page—making it easy to ensure they are all uniform in structure and design for optimal scannability—or create a component for smaller lists within your content, which are a great way to break up the flow and call out important information.
Sharing Data & Additional Information
Highlight Important Data Points
Studies have shown that a reader’s eye is drawn to numerals within content pages because their unique shape provides some variety amongst a sea of text, so when designing your pages it can help engagement if you make important data points bolder than ever.
2,000,000 is better than two million
Components can be used to design templates to help show off all your data. These could be created to highlight a single data point in the sidebar or to share multiple data points horizontally across the width of the content page. Use varying font sizes, colors, and styles to really make the number pop, add smaller supporting text to give more information about the data, or include elements like a colorful background or icon to help users quickly identify different data points all the way down the page.
Learn more about using data as a visual element in our eBook.Read eBook
Build Tables That Actually Look Good
Why are simple tables still so hard to build into content pages?! Too often publishers resort to creating a table in a spreadsheet or word processor then including a screenshot of that in their post—which creates a poor user experience because the text isn’t searchable, a poor design because the table isn’t responsive, and a poor publishing experience because it’s not easy to update the information in the table.
Instead, easily build styled tables directly into your article with the help of Setka Editor, which includes a table-building tool that makes these easy to create. Then, you can use components to save tables of the same style to use again and again without having to build them from scratch. These can be created as the most simple, streamlined table or designed with colorful backgrounds, custom fonts, and other elements to highlight your brand and make them feel integrated into the content. Include as many columns and rows as you need to share the information at hand.
Highlight a Tip
Have a piece of information you really want to make sure the reader doesn’t miss? Creating a component to highlight that information in a separate, stylized box can be a great way to be sure it catches the eye, drawing their eye to the most relevant information and giving the reader maximum value for the minimum amount of work. Tips can also be used to provide additive information to help the reader take their learnings to the next level, without breaking the flow of your main text.
These can be designed to go in the side column or go between the text as a content-width box, and can be accentuated with icons, backgrounds, frames, and more. As a bonus, by designing these to provide some visual interest, they can break up the text as a reader scrolls down the page, ultimately improving engagement.
Add an Important Fact
Similarly, sometimes it can be helpful to call out facts related to your story in a separate section. For instance, maybe it’s basic information that people should know before reading your article, but that can be skipped for people who are already knowledgeable on the subject. Or maybe the facts provide additional information that isn’t critical to the core of the piece, but could be interesting for someone who wants to dig in a little further.
You can create components to include this information in the sidebar or in another format that makes the information obvious without disrupting the flow of the main content.
Create Expert Profiles
According to a study from The Center for Media Engagement, 40% of readers say having an author bio on the page builds more trust, and we’d imagine this is true for experts included in your content as well. By creating short profiles of the experts you’re citing in your content, you not only help the reader understand their credibility, but you build a stronger relationship with your sources by showing them off.
of readers say having an author bio on the page builds more trust. — The Center for Media Engagement
components can make this easy by having all the fields in place for you to quickly fill this in. Include content like a photo of the expert, a short bio of their relevant experience, and links to learn more about them, designed to stand out without getting in the way.
Include Company Information
Similar to expert profiles, providing a quick rundown of information about your company or a company mentioned in your article can be a great way to show credibility and build trust with readers, prevent the reader from having to search for the information themselves (and therefore leave your site), and make the company you’re featuring feel extra special. If you’re talking about your own company, this can even serve as a subtle CTA to help folks get even more excited about working with you.
Design these components to be as visual and scannable as possible, including numerical information about the company since readers’ eyes are drawn towards numbers, or using icons to create visual interest if there is no data to use.
Subtly Include Spoilers
Spoilers allow you to hide specific information within sentences, only showing it if the reader clicks a certain button requesting to see. If your information contains actual spoilers, hiding them like this can build trust with your reader because you aren’t ruining any information for them. But this feature can also be used to improve the reading experience by including bonus information for readers who want to dig deeper without cluttering up the page.
Unlike many components that are designed to stand out, these should be designed to subtly integrate into the text in a way that readers can easily find it but that doesn’t interrupt the flow of reading. Consider pop-up footnotes as an alternative for adding bonus information, especially when the information is long or doesn’t fit naturally within the main body text.
Improving Your Visuals & Imagery
Build Immersive Article Covers
You already know a strong header image is important for luring readers in and making them want to keep scrolling. Researchers D Lagun and M Lalmas at the ACM International Conference on Web Search and Data Mining shared that users tend to stay almost twice as long on the first screen when the article starts with an image, compared to articles without an image on top. And, in one case study from Crazy Egg, redesigning a homepage using full-width imagery increased leads by 18%. Using components, you can design full-width immersive headers that stand out from the pack of standard images and really wow a user when they land on your page. Think of this as the splashy magazine cover of the digital world.
Redesigning a homepage using full-width imagery increased leads by
These can be designed with multiple images, custom backgrounds, fonts in various styles to convey different information, author pictures and profiles, a short summary of the article to come, or anything else that you think will make a user want to keep reading.
Create Branded Frames or Overlays for Images
Especially when you’re using stock imagery or imagery from a variety of sources throughout your content, it can be hard to make it feel unified and on-brand. But, according to Lucidpress, maintaining brand consistency across your channels can lead to an average 33% growth in revenue—and 50% of companies say that customers expect consistent branding across the board. You can use the power of components to help bring everything together by designing some standard frames or overlays that you can quickly pop any image into and make it yours.
If your brand as always presented consistently, how much do you estimate that your organisations revenue would increase?
Average of 33%
Think of this as an image “filter” but specifically for publishing. These can be designed for fun—like illustrative overlay designs that make images stand out—or for utility—like creating frames that look like a phone or computer interface to drop screenshots into. Make them whatever size and shape you need, and make a lot so you always have options to grab for whatever your need is.
Build a Photo Collage
Hopefully you already know that including imagery throughout your articles is critical for creating an engaging piece—after all, stories with an image every 75-100 words get twice as many shares across social media—and sometimes one image at a time just isn’t enough! components can be used to create small photo collages to break up the monotony of single, content-width images.
These can be designed into various types of compositions—be it two images side by side or multiple layered on top of each other—and you can choose to include a caption, or not.
Want to learn more about the importance of imagery?Read eBook
Get Creative With Your Photo Captions
A small bit of text below a splashy photo can so easily get lost—but you can use components to stylize photo captions so your reader is actually drawn to what they have to say. With components, you have the power to place your caption anywhere you want in relation to the photo, and include so much more than plain text. Doing this can also allow you to integrate your brand fonts, colors, or even illustrative elements to create small moments of reinforcing who you are.
Maybe this means layering the caption over the photo slightly in a stylized box, or placing it beneath the photo but with a background that stands out. Maybe your caption includes a small icon at the start to remind people that there’s text there. You might design different components for different use cases—for instance, one where the text is more obvious for when the information is critical to the flow of content, and one where it’s a little more subtle to use when the information is a sidebar.
Stylize Pull Quotes in New Ways
Pull quotes have been standard in the publishing industry since print days, and for good reason—they’re such a good way to make your page more visually appealing while also highlighting some of the most compelling information in your article.
You can use components to make pull quotes you can quickly pop in wherever you want on your content pages, designing templates in various widths, fonts, sizes, color schemes, etc. Take your pull quotes to the next level design-wise with colorful backgrounds or eye-catching illustrations. You can even create quotes with additional context to up the credibility of the quote, adding the speaker’s photo, for instance, or including additional links or information to help give additional context.
Improve Your Bulleted Lists With Images
Bulleted lists are a great way to break up blocks of text and draw the reader’s attention—according to eye tracking studies done by NN/g, one of the things that can pop out in a block of text and draw the eye of someone scanning the content of your page is bulleted lists. As a bonus, you can use components to make them even more powerful with the addition of icons or other imagery instead of plain old bullets.
These can be designed using images, custom illustrations, icons, or even just colorful shapes, you can make your visual element as small or large as you like, and you can set up the list to horizontal or vertical.
Improving Engagement & Sales
Create CTAs That Really Stand Out
If you’re doing content marketing right, you should be inserting CTAs regularly—but in an article full of eye-catching images, animations, pull-quotes, data visualizations, and more, a subtle CTA is going to get overlooked. components make it easy to make these in a way that will seriously stand out.
Create as many different styles of CTAs as you tend to use. They can be designed to go in the side column, set up horizontally to place between content sections, or even stylized as immersive CTAs that span the full width of the page. Include text of different sizes, buttons, images, background colors, and more.
Add Related Links
Including related links in the sidebar or towards the bottom of your article page can be a great way to up engagement, encourage further exploration on your site, and continue building a trusting relationship with a reader—but sometimes adding these to every article can feel like a chore.
Using components can make this a much easier task, allowing you to create templates for linking to multiple related articles or for highlighting one stand-out piece of additional content the reader might be interested in (like an ebook). You can put this element over a background to help it stand out, include images or buttons to make it more eye-catching, or even include a sample of the content to pique the reader’s interest.
Share Relevant Products
Working on content marketing for an ecommerce business? You can use components to help you increase your sales by creating templates for sharing products related to the story right within the content.
These could be designed to go in the sidebar, to span the full width of the content to place between sections, or even to spotlight a single product. You might include product imagery, the price, a small description, and a button to learn more or buy now. These can even be taken to the next level and designed using an API from your store database so that any product details that change, like price, automatically update across content pieces.
How to use Setka’s Design System ManagerRead Guide