This guide is designed exclusively for our customers. At Dream Fox Design, we pre-configure the blog pages to ensure that our customers have the best blogging experience, without compromising on the professional layout of the blog.
No need to waste time manually adding essentials like Share buttons, Related Posts, Table of Contents, etc., as it is now done automatically for you!
P.S. Your website may behave a little differently from what is described in the guide if you’re using the default WordPress editor or if you haven’t had your blog pages designed and configured by us.
Before we begin the guide proper, here’s a brief overview of what to know when you make a blog post.
The Post Interface
To add a new post, click on “Posts > Add New”. This is what you’ll see after selecting that. Let’s go through the interface to introduce you to the important elements under the “Posts” tab.
All Posts
Clicking on “All Posts” on the left menu panel brings you to the All Posts page. Here, you have an overview of all the posts you’ve created on your website, including the author, categories and publish date. By default, unless you’ve created a blog post, the page should be empty.
On the “All Posts” page, you can also edit a specific post. Just hover your mouse over the post you’d like to edit and click on “Edit”.
Categories and Tags
Categories and Tags are the 2 primary ways to organise/group your content. In general, categories are the go-to method of grouping posts, and tags are meant to describe that post using keywords.
For example, a blog post about web design trends can be categorised under “Web Design”, but tagged under several tags like “2020”, “web design”, “trends”, “colours”, “motion effects” and “fonts”. This allows you to easily categorise and filter them out if needed.
The “Count” filter shows you the number of posts with the specific tag. For example, in the image above, it shows that 2 posts have the “2020” tag. Clicking on the number “2” will allow you to view all the posts that are tagged under “2020”.
By default, categories are shown in the front-end to the user while tags are used in the back-end for your own book-keeping.
The Blogging Interface
Let’s have a walkthrough through the blogging interface where we’ll introduce you to the important menu items/sections you’ll see when you create a new post.
The Top Menu
- Add a block – This is just one of the ways to add a block. Wherever you see the (+) icon, you’ll be able to add a block.
- Undo – Made a mistake? Undo it by clicking on the undo button. You can also press (ctrl+z) on your keyboard.
- Redo
- Preview Post – See how your post looks like on the front-end before you post it.
- Publish Post – Publish your post for all to see. If you would like your post private, set your post to ‘private’ under the Status and Visibility Section then publish it.
The Blogging Content Area
This is the content area. As described earlier, the Gutenberg editor works in blocks. Choose a “Heading“ block to insert a header, or choose an “Image” block to insert an image. It’s that simple!
Block Settings
Every block has a unique set of settings. For example, as I’ve selected the header block in the image above, the block settings for the heading block will be displayed on the right side of the screen. This will allow you to change the font size, the hierarchy of heading and colour you would like it to be.
Let’s talk a little more about the hierarchy of the headings. What’s h1, h2, h3, h4, h5 and h6? Think of them as titles and sub-titles in a story, h1 being the highest ranked title and h6 the lowest sub-title. This lets your users (and Google) know how your content is structured.
So how do you decide when to use a H2 heading, and when to use a H3 heading? The above image shows the Table of Contents which is automatically generated once you publish your post. If you look at point 3 in the table of contents,
The Heading block “ 3D Illustrations” is set to h2
The Heading block “3D Images for Facebook” is set to h3
The Heading block “The Advantages of 3D Images on Facebook” is set to h4
Basically, the broader the title, the higher on the hierarchy it goes, which means that the title of your blog is set by default to h1, which goes without saying. The more specific the title or sub-title, the lower on the hierarchy it is.
Let’s Start Creating A Blog Post!
Let’s now start creating a blog post for real.
Step 1: Log Into Your Website
If you haven’t already done so, login to your website’s editor account. This should take you into your Dashboard.
Depending on how we’ve configured the website to your needs, your Dashboard may look a bit different to the one shown in the image. Don’t worry. This is perfectly normal.
Step 2: Add New Post
Add a new post via the menu panel on the left side of your screen. Click on “Posts > Add New”.
Please note that for blogs, you should add a new Post instead of a new Page. If you’re interested, you can find out the difference between posts and pages here.
Alternatively, to add a new post, you can click on “+New” located at the Top Menu on your Dashboard and select “Post”.
Step 3: Input A Title
Input a Title where it says, “Add Title”. This will be the title of your post which will be shown throughout your website.
Step 4: Set Your Visibility Settings
The status and visibility section lets you control the visibility settings of your post. There are 3 visibility settings: Public, Private and Password Protected.
Public: All site users can see your post as soon as it’s published, whether they are logged in or not.
Private: Only admins and editors who are logged in can view your post, before the post is made public. This is great for drafting out a post and continuing it later.
Password Protected: The post is made public to all users, whether they are logged in or not. However, to view the post, a password needs to be entered.
Within the “Publish” tab, by clicking on “Immediately”, you can also backdate or schedule your posts to be published in the future.
Step 5: Set Your Categories and Tags
The Categories and Tags section lets you categorise and tag your content in the “Add New Post” page. Select from a pre-created category or add a new category right on the page by selecting the “Add New Category” button.
The categories let you set a hierarchical relationship between your posts. Parent categories (1) act as main categories, while child categories (2) act as sub-categories. For example, if you’re writing a blog post about Roses, you’d select “Flowers” as your parent category and “Roses” as your child category.
If you want to Add a New Category (3) altogether, simply enter your “New Category Name”. If you select the “Parent Category” dropdown, you’ll be able to park your new category under a parent one.
Classifying your posts by categories allows your readers to filter and find your blog posts easily on based on the categories.
Step 6: Set your Featured Image
The Featured Image section lets you set a Featured Image for this post. This image is used for as your blog thumbnail, which will be shown on the blog archive page and featured sections like “Recent Posts”. Additionally, it will also be the default image used when you share the post on social media.
Step 7: Set Your Excerpt
The excerpt section lets you set the excerpt for your post. An excerpt is basically a short description or summary of your post, which is automatically displayed in several locations like the blog archive page and the “Featured Post” Section.
Step 8: Add Blocks
All the websites we design use the Gutenberg editor, the default content editor on WordPress sites. Gutenberg editor uses blocks. Imagine them like Lego pieces. Need a title? Use a title block. A gallery? Use a gallery block. A video? Use a video block. You get the idea.
Add a block using the (+) icon and select the block you need. Use a paragraph block for your main content, a heading block for your headers and an image block for images, etc.
The blocks are grouped into different sections. Your most used blocks will be displayed on top, followed by “Common Blocks”, “Formatting”, “Widgets”, etc. Play around with the different blocks to see what each does!
We recommend you check out the blocks under the following sections (bolded are the most commonly used blocks in our experience):
Common blocks: Paragraph. Heading, Image, Gallery, List, Video, Quote
Formatting: Table
Layout Elements: Spacer, Button, Columns, Media and text
Embeds: Facebook, YouTube, Twitter, Instagram
Step 9: Set-Up Your Blocks
Every block contains settings unique to the block. The block settings are found on the right of the page and the top of the block when you select the specific block by clicking on it. They’re both different and unique sets of settings. We give 3 examples:
Gallery/Image Block
Both the Gallery and Image blocks let you insert images. The difference? The Gallery block lets you insert multiple images while the Image block lets you insert a single image.
As always, the block settings are on the top of the block and the right side of the page. In both the Gallery block and Image block, there is an option for enabling lightbox. To enable it on the Gallery block, on the “Link To” section on the right setting panel, select Media File.
On the Image block, however, the Link To Media File setting is found on the setting panel on top of the Image block.
Paragraph Block
Paragraph blocks are used for the main content in your blog post. In the image above, there are 2 paragraph blocks stacked on top of each other. The top one does not have Drop Cap enabled, while the bottom paragraph block has Drop Cap enabled. Drop Cap is when the first letter of a paragraph is enlarged.
Embedding Social Media
The Embed block is found in the Embeds Section. Select the (+) icon and scroll down until you see “Embeds”. All you have to do is copy and paste the URL of your Instagram/ Facebook / YouTube post and click on “Embed”.
Step 10: Polish Up Your Post
To preview your post before posting it, click on the “Preview” button found on the top right corner of the screen. Now, compare these 2 images.
Comparison: Left image without spacer blocks. Right image with spacer blocks.
Use the “Spacer” block, found in “(+) > Layout Elements > Spacer”. Using spaces between your content gives focus and breathing space to different sections of your post, making your content professional and easy to read.
These are the settings of the Spacer widget we recommend using. Of course, it’s all up to you to customise it to your own style!
20px spacing after every heading (h2, h3, h4, etc.)
80px spacing after every h2 section
30px spacing after every h3-h6 section
Step 11: Publish Your Post
Finish writing your blog post? It’s time to post it! Click on the big blue “Publish” button found on the top right corner of the page. If your post is meant for everyone to see, make sure to change the visibility setting of your post to PUBLIC before posting!
Step 12: Check Your Post
After your post is published, and if you’ve done everything correctly to this point, your work is done. We’ve set up your website to automatically update your Blog Archive, Popular Stories, Featured Blogs, Social Media Sharing, etc., with your post!
Depending on how the website is configured, your blog archive/recent blog section should automatically show these 3 sections as per the image above:
- This is the Featured Image you’ve set in the post. If you did not set a Featured Image, this field will be empty. (See image below)
- This is the Title of the post.
- This is the Excerpt of the post. If you did not manually type in the excerpt, the website will automatically generate one based on the content of your post.
Video Tutorial
In Summary
Now you have all the skills you need to create a professional looking blog! In my personal opinion, the blog interface is pretty easy to get used to after you’ve done it once or twice. For you readers who have spent the time reading until this part of the post, I’m going to reward you with a bonus tip! Hell, make that 3 tips!
- It’s a lot easier to plan out your blog on Microsoft Word or Google Docs before you blog, then copying and pasting the content onto your blog post.
- In need of images for your blog? Do not just use any random images from Google. Most of them are copyrighted and you’ll get in trouble if you use those images without the proper permissions.
Use images that you’ve photographed yourself, images from popular image repositories like Shutterstock, provided you paid for their license.
Alternatively, check out Pixabay! They have more than 1 million images you can download and use for your blogs. Oh, and did I mention that it’s free? No need for attributions either!
- Generally, the size of the images in your blogs should not exceed 1200px in width. Huge images will slow down the loading speed of your blog post.
