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.
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 18 of our favorite ways to use components 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 components. Think creatively about your regular features and formats to come up with more components you can create to save yourself time while designing an incredible content experience.
for Organizing Content
Make a Large, Eye-Catching Section Heading
Organizing your content into sections is important for helping readers (er, scanners) quickly understand what your content is about and decide which areas (if any) they want to dig more into. 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.
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.
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!
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
Including a summary card at the end of a content piece can be a great way to make your work easier to understand and remind readers how much value you’ve just given them.
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.
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.
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.
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.
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 or Important Fact
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. This could be used throughout a piece to call out tips related to the content at hand, summarize takeaways, highlight helpful definitions, emphasize important facts, and more.
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.
Add Side Information
Sidebars can be a great way to provide additional information, share extra context, or include bonus stories that don’t quite fit into the flow of your content but could be valuable for readers that are particularly interested. For instance, you might create a block of content that goes in the margin to share a profile of the expert you’ve quoted in that section, to provide a list of related facts about the topic at hand, etc.
Components make it easy to design columns like this to use over and over again. You can include custom background colors or images to help them stand out from the rest of the content, add icons to label the type of information you’re providing, use different font styles to organize the information within the sidebar, and more.
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. 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.
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. 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.
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, 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.
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—and 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—and components make it easy to do.
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.