Lori Ballen is a member of the Amazon Associates Program and earns money from qualifying purchases. Posts contain affiliate links that benefit Lori as well.
This WordPress Tutorial will teach you how to design a blog page (or post) in WordPress. Here, we will cover WordPress Gutenberg Blocks, Overall page design, and how to add SEO elements to help your page rank on Google.
Page vs. Post
First, you must understand the difference between a page and a post on WordPress. Technically a page and a post are both “web pages”.
In my case, I like to keep pages for my evergreen content (non time-sensitive information) such as the About Page, Contact Me, Location Info, Home Page, etc.
I use blog posts for my every day writing.
I suggest activating your content blocks.
If you have the latest version of WordPress, Find Settings, and then choose ‘Writing’. You’ll notice an area that displays the options ‘Classic Editor’ and ‘Block Editor’. Toggle Block Editor on.
You’ll now that content blocks are activated when you see the + sign appearing on your editor.
In this guide, we will use the elements offered in the content blocks to design our blog posts and pages.
This Layout should help you better understand the flow of the page design. Keep in mind, when I say “Page”, I’m talking about a blog post or page type.
The slug is the word that comes after your top level domain name and the slash. thisismywebsite.com/slug. It’s best to use Keywords in the slug and dashes between words. 3-4 words maximum is ideal.
Intro, Excerpt, Metadescription
Your Intro should be about the size of a tweet. Around 120 characters, the intro can be used as your excerpt and Meta description and is a quick, appealing explanation of what your page is about.
Video or Other Rich Media
Wherever possible, I like to start my article with a video. Including a video on your blog is easy using the simple embed codes from Youtube, Vimeo, and even social channels such as Facebook.
From Youtube, simply click share, then embed, and then copy and paste the code into an HTML block.
If the Youtube embed option is available on any video on Youtube, then the user has given permission for you to use the video.
This does not mean you have the license to modify the video. You can embed it.
Of course, if you have your own videos, that’s even better.
Including videos on your blog plage can help increase the visitors time spent on your website. This is referred to as ‘Dwell Time’.
It can be a positive signal to the search engines that your page is high quality.
Table of Contents
This can help improve the user experience and therefore the quality of the page itself.
Choose one that is currently supported.
Longform content (1000 words +) is best designed using several paragraphs with a unique topical heading. These headings can be Gutenberg blocks and are usually set at H2 or H3.
Each paragraph could be 300-500 words long with seperation between sentences. I like to add a space after 1 or 2 sentences so it’s easier on the readers eyes.
Each paragraph can have elements from the blocks.
You can add an image, video, list, related post or any other element to create a better user experience.
It’s a good idea to break up paragraphs with the separator widget in blocks or another element such as the divider from shortcodes ultimate like I use.
I like to include the Related Posts block. It allows me to include posts from a particular category and include images, post content, and offers various sorting options. You can view the sample here:
- Blossom Themes
- Elegance ProIf you’re looking for refinement and a polished presentation, your search is over. Elegance is a graceful theme for smart, sophisticated businesses. You’ll love the large images and stately typography in Elegance. It’s feature-rich and easily customizable as well.
- 15 Crucial Things To Do After Installing WordPress
- Slush Pro ThemeThis Genesis-powered third party theme was created for the well-rounded brand: Slush Pro is stacked with choices for customization and makes it simple for you to communicate your story in both words and images.This Genesis-powered third party theme was created for the well-rounded brand: Slush Pro is stacked with choices for customization and makes it simple for you to communicate your story in both words and images.
- Metro Pro Theme