Your Showit blog design is more powerful than most users realize. Because Showit controls the visual layer of your WordPress blog through its custom theme, you have far more design flexibility than you would get with a standard WordPress theme.
The key is understanding where each design decision lives: some are made in the Showit editor, some in WordPress, and some in the intersection between the two. This guide separates those clearly so you can customize your blog confidently without second-guessing where to look.
How Showit Blog Design Works
When a visitor reads one of your blog posts, they see a page that is visually designed in Showit but content-powered by WordPress. The layout, typography, colors, header, footer, and any decorative elements surrounding the post content come from templates you built in the Showit editor. The actual post text, headings, images, and embedded content come from WordPress.
This dual-source structure is what gives Showit blogs their design advantage. You are not constrained by a WordPress theme’s predefined layout. You design your blog templates exactly as you would design any other page in Showit.
For a foundational understanding of how Showit’s canvas system works, the Showit design and canvas customization guide covers the building blocks you will be working with throughout this process.
The Four Blog Templates You Will Design in Showit
Every Showit blog setup involves four primary templates. Understanding what each one does before you start designing saves you from having to rebuild later.
1. Blog Index Template
This is the page visitors land on when they navigate to your blog section. It displays a list or grid of your published posts, typically showing featured images, post titles, excerpt text, and publication dates.
In Showit, you build this page using the blog feed widget. The widget pulls posts from WordPress and displays them in whatever layout you design around it. You control the number of posts per page, the card or row design, the typography, and the surrounding page design.
2. Single Post Template
This template wraps every individual blog post. It is the most important template to design carefully because it is what readers spend the most time looking at.
In Showit, you design the frame around the WordPress content area. This includes the post header area (where the title, author, date, and featured image appear), the content column width, the sidebar if you choose to include one, and any elements below the post such as a bio box, related posts section, or newsletter signup.
3. Category Archive Template
When a visitor clicks a category on your blog, they see a filtered list of posts within that category. This template typically mirrors your blog index template with the addition of the category name and description at the top.
4. Search Results Template
When a visitor uses your blog’s search function, they land on a results page. This template displays matching posts in a layout similar to your blog index. If you do not customize this template, WordPress falls back to a default layout that may not match your design.
Designing the Blog Index Page in Showit
Open your Showit editor and navigate to the page you have designated as your blog index. If you do not have one yet, create a new page and set its page type to Blog Index in the page settings.
Setting Up the Blog Feed Widget
Add a blog feed widget to your canvas. In the widget settings, you will find controls for the number of posts to show, the layout style (grid, list, or masonry), the excerpt length, the image aspect ratio, and which post metadata to display (date, category, author, reading time).
Choose an image aspect ratio that fits your brand. Landscape ratios such as 16:9 or 3:2 work well for text-heavy blogs. Square (1:1) and portrait (4:5) ratios suit photography blogs where the images themselves are the primary visual draw.
Set your excerpt length to a number of words that gives readers enough context to decide whether to click through without giving away so much that they feel no need to. Between 20 and 40 words is typically effective.
Designing the Post Cards
Around the blog feed widget, design the card layout that each post will appear in. In Showit, you can customize the typography for post titles, excerpt text, dates, and category labels independently. Match these to your brand’s typographic system.
Consider the hierarchy of information on each card. The post title should be the most visually prominent element. The featured image should be large enough to attract attention. The excerpt and metadata should be readable but clearly secondary to the title.
For photography blogs, leading with the image is often more effective than leading with the title. For coaching or service-based blogs, the title often deserves more visual weight than the image.
Pagination and Load More
Decide whether your blog index will use numbered pagination or a Load More button. Showit’s blog feed widget supports both. Numbered pagination is generally better for SEO because it creates crawlable archive pages that search engines can index. A Load More button keeps users on one page and can improve time-on-page metrics, but it reduces the crawlability of older posts.
Designing the Single Post Template
This is where you will invest the most design time. A well-designed post template makes your content more readable, keeps readers engaged longer, and reflects your brand quality at every level.
Post Header Design
The post header area typically includes the featured image, the post title, the publication date, the author name, and the post categories. Design this section to create an immediate sense of authority and visual appeal.
Consider using a full-width featured image that spans the entire top of the post, with the title overlaid or positioned just below. This approach creates a strong visual anchor and draws readers into the content.
Alternatively, a text-first post header with the title large and centered, followed by metadata in a smaller weight, works well for text-focused blogs where the writing is the primary draw.
Content Column Width
The width of your post content area directly affects readability. Research on typography and reading comfort, including guidance from the Nielsen Norman Group, consistently shows that line lengths between 50 and 75 characters are optimal for sustained reading.
In practical terms, this means your content column should typically be no wider than about 700 to 750 pixels on desktop screens. Centering a narrower content column on a wider page, with empty or decorative side space, is a common and effective approach.
Do not make your content column full-width on desktop. Long line lengths force readers to track across large horizontal distances, which increases reading fatigue and abandonment.
Typography Choices
Your blog post content typography should prioritize readability over brand expression. The body text font should be a highly legible typeface set at a comfortable size, typically 17 to 20 pixels on desktop, with a line height of 1.6 to 1.8.
Headings within posts (H2, H3, H4) should be visually distinct from body text but not so large that they overwhelm the content flow. A modest size increase combined with a heavier font weight is usually sufficient.
Showit lets you set custom fonts for your blog post template. For information on using custom typefaces in your Showit setup, the custom fonts in Showit guide covers the process.
Sidebar Design
Decide whether your single post template will include a sidebar. A sidebar is a secondary column typically placed to the right of the main content column that can contain a newsletter signup form, a list of popular posts, a bio summary, or category links.
Sidebars are less common in modern blog design than they were five years ago, but they remain effective for blogs that want to maximize email list growth directly from post pages. If you include a sidebar, keep it focused on one or two purposeful elements rather than filling it with every available widget.
Post Footer Elements
Below the main post content, consider adding elements that extend engagement and guide readers to a next step.
A short author bio with a photo and a one-sentence description of your work builds credibility and gives first-time readers context about who you are.
A related posts section showing two or three other posts by topic keeps readers engaged longer and increases the average number of pages viewed per session.
A newsletter signup form or a content upgrade offer positioned just after the final paragraph catches readers at the moment of maximum engagement.
Customizing WordPress Post Content Appearance
While your Showit template controls the design frame around your posts, the appearance of elements within the post content itself, such as blockquote styling, image captions, table styling, and code blocks, is controlled by the WordPress stylesheet that the Showit theme applies.
You can customize these styles by adding CSS to the Additional CSS section in your WordPress Customizer (Appearance and then Customize and then Additional CSS). Even small improvements here, such as a styled blockquote with a left border and italic text, significantly enhance the reading experience for long-form posts.
If you are not comfortable writing CSS, many of these styles can be set through a CSS customization plugin, or you can work with a Showit designer who can implement these specifics as part of a broader design engagement.
Mobile Blog Design
Every blog template you design in Showit has a separate mobile canvas. Do not assume that your desktop design will translate well to mobile automatically.
Switch to the mobile view in the Showit editor and adjust your blog templates for small screens. The most common mobile design issues on Showit blogs include text that is too small, content columns that are too wide for the screen, featured images that crop awkwardly in their aspect ratio, and sidebar elements that stack below the post content in a confusing order.
For a comprehensive approach to mobile layout design on Showit, the Showit mobile layout design guide is an essential read.
Google uses mobile-first indexing, which means the mobile version of your blog is the version Google primarily evaluates for ranking. A poorly designed mobile blog template is a direct SEO disadvantage.
Color and Visual Consistency Across Your Blog
Your blog should feel like an extension of the rest of your Showit site, not a separate design system. Use the same color palette, typography choices, and spacing conventions that appear throughout your other Showit pages.
Check that the colors in your blog post template match the exact hex values used elsewhere on your site. Small inconsistencies, like slightly different shades of your brand’s primary color, create a subtle but real sense of fragmentation that visitors notice even if they cannot articulate why.
Consistency applies to hover states, button styles, link colors, and any decorative elements you use. The blog should be immediately recognizable as part of your brand.
Testing Your Blog Design
After completing your blog template designs, test them thoroughly before publishing content publicly.
Create several test posts in WordPress with different content types: a text-heavy post, an image-heavy post, a post with embedded video, a post with a table, and a post with a bulleted list. Confirm that each content type renders attractively within your single post template.
View each template on desktop and mobile screens. Use Showit’s built-in preview and test on actual devices when possible. For guidance on testing across different screen sizes, the Showit screen size testing guide provides a practical methodology.
FAQ
Can I have different blog post template designs for different categories?
Showit currently uses a single single post template that applies to all posts regardless of category. If you need category-specific design variations, this typically requires custom development work.
How do I change the font size inside WordPress blog post content?
Font sizes within the post content area can be adjusted through CSS in your WordPress Customizer or via a CSS plugin. You can also set default font sizes within the WordPress block editor settings.
Can I add custom elements to individual blog posts rather than the template?
Yes. Within the WordPress block editor, you can add custom HTML blocks containing embed codes or custom content that appears only in specific posts. This is how many bloggers add course enrollment blocks, affiliate product displays, or custom calls to action within individual posts.
How do I make my blog posts wider or narrower?
The content column width is set in your Showit single post template. Adjust the width of the content area canvas in the Showit editor to change how wide your post text appears.
What should I put in the sidebar?
The most effective sidebar elements are a newsletter signup form, a short author bio, and links to your most popular or recent posts. Avoid filling your sidebar with too many elements, as this competes with the post content for attention.
