{"id":42811,"date":"2023-03-17T15:00:18","date_gmt":"2023-03-17T14:00:18","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=42811"},"modified":"2023-03-23T12:14:24","modified_gmt":"2023-03-23T11:14:24","slug":"tips-for-perfect-blog-post-layout","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/tips-for-perfect-blog-post-layout\/","title":{"rendered":"Expert Tips for the Perfect Blog Post Layout"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Every marketer will tell you that content is the vital aspect of every digital marketing strategy. <a href=\"https:\/\/qodeinteractive.com\/magazine\/ultimate-guide-to-content-marketing\/\">Content marketing<\/a> increases brand awareness, helps build loyalty, trust and authority, drives traffic, helps you rank on search engine result pages, boosts engagement and much, much more. So, great content, <a href=\"https:\/\/qodeinteractive.com\/magazine\/what-is-evergreen-content\/\">be it evergreen<\/a> or not, is essential. But what\u2019s also important is that it\u2019s presented in a way that complements its quality and message, and builds upon it. In short, it needs a perfect blog post layout.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-choose-content-layout-for-wordpress-blog\/\">Choosing a content layout<\/a> is easy when you have an excellent theme, like the <a href=\"https:\/\/qodeinteractive.com\/qi-theme\/\" target=\"_blank\" rel=\"noopener\">Qi Theme<\/a>, for instance. Such themes pack numerous blog layouts that can be adjusted to your liking, and come with a range of list and gallery options, interactive sections, carousels and whatnot.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you\u2019re working with a not-so-rich theme, you may need to tweak your available layouts a bit, perhaps with the help of a plugin or two, or with custom code, if the theme allows it.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Either way, today we want to share with you a couple of fail-safe tips for a perfect blog post layout:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#apply-proper-heading-structure\">Apply Proper Heading Structure<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#use-multimedia-smartly\">Use Multimedia Smartly<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#use-featured-images\">Use Featured Images<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#follow-the-accessibility-guidelines\">Follow the Accessibility Guidelines<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#experiment-with-columns\">Experiment with Columns<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#consider-passepartout-and-boxed-layouts\">Consider Passepartout and Boxed Layouts<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#avoid-clutter\">Avoid Clutter<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#choose-the-typography-wisely\">Choose the Typography Wisely<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#be-smart-about-navigation\">Be Smart About Navigation<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"apply-proper-heading-structure\"><\/a>Apply Proper Heading Structure<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"970\" height=\"554\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/03\/Apply-Proper-Heading-Structure.jpg\" class=\"attachment-full size-full\" alt=\"Apply Proper Heading Structure\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/03\/Apply-Proper-Heading-Structure.jpg 970w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/03\/Apply-Proper-Heading-Structure-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/03\/Apply-Proper-Heading-Structure-768x439.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/03\/Apply-Proper-Heading-Structure-620x354.jpg 620w\" sizes=\"auto, (max-width: 970px) 100vw, 970px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]There are two main reasons why you want to make sure you have your headings right.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]First is the readability. <strong>Headings and subheadings are one of the elements of text architecture that make it more readable and easier to consume.<\/strong> This is vital for longer posts. You don\u2019t necessarily have to use all available heading types, but it\u2019s recommended you go at least up to H3 or H4. Heading hierarchy helps your readers scan your text better and make sure no vital information, idea or concept is missed or skipped. Check your <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-readability-score\">readability score<\/a> regularly and monitor how headings help your text read better.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The other reason is that <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-use-header-tags-for-seo\/\">headings (or H tags) are very important for SEO<\/a>. With headings, you signal to Google and other search engines what your content is about. This helps with indexing and increases your chances for good ranking. And if you place your keywords in your subheadings, all the better.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The design of the website needs to allow for the use of different subheadings. These days, most WordPress themes allow for the full range of H-tags. Make sure you use them hierarchically and apply common sense. Don\u2019t use big tags for narrower ideas. <strong>Start wide and then narrow it down, from H1 to H3 or H4.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"use-multimedia-smartly\"><\/a>Use Multimedia Smartly<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"970\" height=\"554\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/03\/Use-Multimedia-Smartly.jpg\" class=\"attachment-full size-full\" alt=\"Use Multimedia Smartly\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/03\/Use-Multimedia-Smartly.jpg 970w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/03\/Use-Multimedia-Smartly-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/03\/Use-Multimedia-Smartly-768x439.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/03\/Use-Multimedia-Smartly-620x354.jpg 620w\" sizes=\"auto, (max-width: 970px) 100vw, 970px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Multimedia (images, video, audio) is an important element of a blog post layout. No one uses text alone &#8211; these are not the early days of www when we had little options at our disposal. Text is usually combined with images, sometimes with videos. But how you display these is what separates a good post layout from a not so good one.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Sure, you can simply add an image or two in the middle of your text. But today we have so much more at our disposal. We have innovative ways of displaying multimedia, such as carousels, animated image sliders, interactive galleries and so on. For instance, you can use a <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-add-divided-showcase-carousel\/\">divided showcase carousel<\/a> that combines words and images. Or, you can display your images in an attractive <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-add-cards-slider-in-wordpress\/\">cards slider<\/a> that stacks them up like an interactive deck of cards.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The same goes for videos. Videos add dynamicity to your posts and make them more engaging, plus they can be great for link building and SEO. You can <a href=\"https:\/\/qodeinteractive.com\/magazine\/embed-youtube-video-in-wordpress\/\">embed a video from YouTube<\/a> or, if you have your own channel, you can <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-display-latest-youtube-videos-in-wordpress\/\">display your latest uploads<\/a> right on your page.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]A good rule of thumb is <strong>not to overdo it with multimedia<\/strong>. If you have more images than text, it\u2019s not a good layout. It\u2019s cluttered and hard to parse. Try to find a perfect balance in which the images will complement the text and not overshadow it.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"use-featured-images\"><\/a>Use Featured Images<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"970\" height=\"554\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/03\/Use-Featured-Images.jpg\" class=\"attachment-full size-full\" alt=\"Use Featured Images\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/03\/Use-Featured-Images.jpg 970w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/03\/Use-Featured-Images-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/03\/Use-Featured-Images-768x439.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/03\/Use-Featured-Images-620x354.jpg 620w\" sizes=\"auto, (max-width: 970px) 100vw, 970px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once known as post thumbnails, featured images have been the default feature of WordPress ever since the version 2.9. A featured image is basically <strong>the main image for the post<\/strong>. Its size and precise location are defined by the theme you\u2019re using, but in most cases it\u2019s a big image set on top of the post. The featured image illustrates the post and helps build its tone and atmosphere.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-hide-featured-image-in-wordpress\/\">hide the featured image<\/a> for selected posts, if that makes sense for you. However, it is generally recommended to use them since a blog post without a featured image looks like it\u2019s missing something. It looks incomplete, barren and dry.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Note that the featured image also serves as <strong>a thumbnail for your post in lists and galleries<\/strong>, so keep that in mind when picking one for your post.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"follow-the-accessibility-guidelines\"><\/a>Follow the Accessibility Guidelines<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"970\" height=\"554\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Poor-Accessibility.jpg\" class=\"attachment-full size-full\" alt=\"Poor Accessibility\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Poor-Accessibility.jpg 970w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Poor-Accessibility-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Poor-Accessibility-768x439.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Poor-Accessibility-620x354.jpg 620w\" sizes=\"auto, (max-width: 970px) 100vw, 970px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Accessibility is something that applies to the entire website, not just the individual posts, but it is a factor that greatly influences the success of your post layout, too. Accessibility means <strong>design that makes sure users with disabilities can access the content, too<\/strong>. These can be visual, auditory, cognitive, neurological and other disabilities. One of the main elements of designing for the differently abled is making sure your content can be accessed by electronic readers and other tools that parse your posts and then tell users what they\u2019re about. <strong>Headings are essential here, as well as clearly marked links, alt attributes for images<\/strong>, and so on. Proper contrast is also vital.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you\u2019re unsure how you stand on the issue of accessibility, there are ways you can check it and also ways to <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-improve-accessibility-wordpress\/#basic-in-built-accessibility-features\">improve your website\u2019s overall accessibility<\/a>, so make sure to read up on that.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"experiment-with-columns\"><\/a>Experiment With Columns<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"970\" height=\"554\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/03\/Experiment-With-Columns.jpg\" class=\"attachment-full size-full\" alt=\"Experiment With Columns\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/03\/Experiment-With-Columns.jpg 970w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/03\/Experiment-With-Columns-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/03\/Experiment-With-Columns-768x439.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/03\/Experiment-With-Columns-620x354.jpg 620w\" sizes=\"auto, (max-width: 970px) 100vw, 970px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Most blog posts we see around only use one column for the text. That\u2019s perfectly fine, and it\u2019s probably the best, simplest and cleanest way to display textual content. However, <strong>sometimes a post can benefit from two or even more columns<\/strong>. It can give it a newspaper-like feel and add an interesting visual touch.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This sort of layout is not for just any blog, though. It can be perfect for blogs about literature, film and music reviews, philosophy, science, etc. It is probably not the best idea for food blogs, for instance.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you feel this sort of layout makes sense for your niche, check out our guide on <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-create-wordpress-columns\/\">how to use columns in WordPress<\/a> with all the most popular page builders and editors.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Another thing you can consider is a narrow grid. Instead of having your text near the edges of the screen, <strong>you can add margins or apply a narrow grid to center your content towards the middle of the page<\/strong>, giving the layout an elegant look with a single column.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"consider-passepartout-and-boxed-layouts\"><\/a>Consider Passepartout and Boxed Layouts<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"970\" height=\"554\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/03\/Consider-Passepartout-and-Boxed-Layouts.jpg\" class=\"attachment-full size-full\" alt=\"Consider Passepartout and Boxed Layouts\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/03\/Consider-Passepartout-and-Boxed-Layouts.jpg 970w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/03\/Consider-Passepartout-and-Boxed-Layouts-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/03\/Consider-Passepartout-and-Boxed-Layouts-768x439.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/03\/Consider-Passepartout-and-Boxed-Layouts-620x354.jpg 620w\" sizes=\"auto, (max-width: 970px) 100vw, 970px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]A lot of WordPress themes come with the option of <strong>placing a border, called passepartout, around your content, along the edges of the page<\/strong>. A passepartout is a term used in art and framing &#8211; it\u2019s the border that separates the painting from the frame. In WordPress, you can add texture or color to it, you can adjust the width, and so on. This sort of layout will give your posts an elegant and sophisticated touch. Again, like multi-column layouts, it\u2019s not for just any blog and any niche. It\u2019s perfect for <strong>creative writing, prose, philosophy, psychology, art critique<\/strong> and so on. It can also look great on lifestyle, fashion, interior design and home decor blogs.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]A similar layout you may want to consider is the boxed layout. It basically adds padding around the page so it appears like in a box. This \u201cbox\u201d stays the same regardless of the screen size, unlike the full width layouts that adjust to the screen size and always go from one edge to the other.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"avoid-clutter\"><\/a>Avoid Clutter<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"970\" height=\"554\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/02\/Delete-Unused-Plugins.jpg\" class=\"attachment-full size-full\" alt=\"Delete Unused Plugins\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/02\/Delete-Unused-Plugins.jpg 970w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/02\/Delete-Unused-Plugins-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/02\/Delete-Unused-Plugins-768x439.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/02\/Delete-Unused-Plugins-620x354.jpg 620w\" sizes=\"auto, (max-width: 970px) 100vw, 970px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]A good layout is the one that <strong>doesn\u2019t get in the way of the actual content<\/strong>. Experimenting is fine, but while multiple columns won\u2019t clutter the page, elements like too many ads, sidebars, oversized menus and popups will.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]A sidebar can be a great navigational tool, but only if it\u2019s done right. A sidebar that is too big, has too many widgets in it and is too flashy won\u2019t do any favors to your UX and to the overall look and feel of your posts. <strong>If you\u2019re using the sidebar, place only what\u2019s necessary in it<\/strong>. You can add a post archive to it if you have a lot of posts and if you\u2019re sure you have an audience for that. Related posts are fine, too, and so are social links. However, things like links to the About and Contact page don\u2019t belong there &#8211; they belong in the footer.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, <strong>leverage the power of negative space.<\/strong> Not every single inch of your page needs to be filled with something. Negative or empty space is a designer\u2019s best friend as it makes the layout breathable and light, and gives the visitor short periods of pause.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"choose-the-typography-wisely\"><\/a>Choose the Typography Wisely<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"553\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/What-Are-Google-Fonts.jpg\" class=\"attachment-full size-full\" alt=\"What Are Google Fonts\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/What-Are-Google-Fonts.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/What-Are-Google-Fonts-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/What-Are-Google-Fonts-768x438.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/What-Are-Google-Fonts-620x354.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Every seasoned designer will tell you that <strong>fonts are equally important as the text itself.<\/strong> Typography communicates a lot just by the way it\u2019s designed. Different fonts convey different feelings and create different atmospheres, and therefore cannot be used indiscriminately.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-choose-website-fonts\/\">Choosing the right typography<\/a> deserves as much time and attention as any other aspect of your post layout. Of course, the fonts you\u2019ll use for titles, subtitles, paragraphs and other text will be set in the global options. They can also be set per page or post, but it\u2019s not recommended to use different typography in different posts. Remember, consistency is key. The general rule of thumb says <strong>you shouldn\u2019t use more than two or three different fonts<\/strong>. Also, your typography should be eligible across all devices, from the smallest to the largest.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Experimentation with typography, such as <a href=\"https:\/\/qodeinteractive.com\/magazine\/large-typography-web-design\/\">large or oversized fonts<\/a>, can add value to your website, but it can also harm it, if not applied with good measure. For most blogs, it\u2019s probably best to stick to the classic UX recommendations (moderation, legibility, clean fonts).[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"be-smart-about-navigation\"><\/a>Be Smart About Navigation<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"970\" height=\"554\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/03\/Be-Smart-About-Navigation.jpg\" class=\"attachment-full size-full\" alt=\"Be Smart About Navigation\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/03\/Be-Smart-About-Navigation.jpg 970w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/03\/Be-Smart-About-Navigation-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/03\/Be-Smart-About-Navigation-768x439.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/03\/Be-Smart-About-Navigation-620x354.jpg 620w\" sizes=\"auto, (max-width: 970px) 100vw, 970px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]These days, there\u2019s no lack of creative solutions for navigation. We have <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-mega-menu-tutorial\/\">mega menus<\/a> (note: these are generally not suitable for blogs, but for large eCommerce websites and magazines), <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-create-fullscreen-menu-in-wordpress\/\">fullscreen menus<\/a>, interactive sidebars, <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-create-sticky-sidebar-in-wordpress\/\">sticky sidebars<\/a> and whatnot. The point is to keep navigation sleek and streamlined, and to maintain the intuitive character of the UX. If an element of the navigation interferes with that, if it\u2019s too loud, too obtrusive and steals the attention, it\u2019s not a good element and needs to be avoided.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]On the other hand, you can\u2019t minimize navigation. People need to know where they can find certain pages and certain content. For blogs with lots of posts, it is vital to give them a clear way to access the archive. For that, you need to have your <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-taxonomy\/\">WordPress taxonomies<\/a> in place &#8211; categories, as well as tags. You can sort the archive by categories and then place an archive widget or list in the sidebar.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The archive can also be linked to in the header or in the footer, if you prefer minimalist layouts. A sticky header menu can be a good solution if you have long posts and you want to make sure your most important links are easy to access. Also, if you intend on having longer posts, <strong>consider adding a \u201cBack to top\u201d button to your layout.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you do have a lot of things to put in your menu, instead of creating a big fat header menu that clutters the layout, <strong>you can use a hidden menu<\/strong>, which can be as large as you like, even fullscreen, accessed by clicking on a simple and minimalist icon. Just make sure to use an icon that is associated with hidden menus and that clearly looks like a menu opener, such as a hamburger icon, otherwise your visitors may spend too much time looking for the menu.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Wrapping It Up<\/h2>\n<p>[\/vc_column_text][vc_column_text]So, based on the tips we shared with you today, there are a couple of key takeaways when it comes to the perfect blog post layout:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">Less is more when it comes to page elements<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"> Tight structure and architecture are key<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"> White space is your friend<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">Images and videos &#8211; absolutely yes, but in moderation<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can see that it\u2019s really like with anything else in life. Once you find a good measure, everything falls into its place and your page layout starts working for you, luring in the visitors and keeping them on your pages longer. To achieve that good measure, follow the guidelines we set out in this article, and you should be just fine.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you have your own blog layout tips to share with the world, make sure to leave us a comment!<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>You can have the best written blog in the world, with great insights and exciting ideas, but unless it&#8217;s presented in a way that pleases and engages the reader on the visual level, it&#8217;s really not worth much. Luckily, we have some great tips to share with you and help you create a blog post layout that will make your content even more attractive<\/p>\n","protected":false},"author":3,"featured_media":42872,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[257,207,4,13],"class_list":["post-42811","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-resources","tag-blog","tag-design","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/42811","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=42811"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/42811\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/42872"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=42811"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=42811"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=42811"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}