Blog Like A Pro! Create and Manage Your Blog Post – Video Tutorial

Whether it’s for driving traffic to your website or creating relevant content for your customers, a blog is an essential part of any website. Let’s find out how you can create a blog post when you’ve taken up a web design service with Dream Fox Design!

Table of Contents

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

How To Blog Like A Pro Dream Fox Design Add New Post 2 - Dream Fox Design
Add New Post

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.

How To Blog Like A Pro Dream Fox Design All Posts 3 - Dream Fox Design
A summary of all my blog posts in the “All Posts” page

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”.

How To Blog Like A Pro Dream Fox Design Edit A Post 4 - Dream Fox Design
Editing A Specific Post

Categories and Tags

How To Blog Like A Pro Dream Fox Design Categories 5 - Dream Fox Design
Categories Screen

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.

How To Blog Like A Pro Dream Fox Design Post Tags 6 - Dream Fox Design
Post Counts on Tags Page

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”.

How To Blog Like A Pro Dream Fox Design Frontend 7 - Dream Fox Design
Category Meta on Actual Blog Post

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.

How To Blog Like A Pro Dream Fox Design Categories backend 8 - Dream Fox Design
Category Meta on Actual Blog Post

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

How To Blog Like A Pro Dream Fox Design Blog Top Menu 9 - Dream Fox Design
Top Menu - Add New Post
  1. 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.
  2. Undo – Made a mistake? Undo it by clicking on the undo button. You can also press (ctrl+z) on your keyboard.
  3. Redo
  4. Preview Post – See how your post looks like on the front-end before you post it.
  5. 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

How To Blog Like A Pro Dream Fox Design Blogging Content Area 10 - Dream Fox Design
Adding a block between other blocks using the (+) icon

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

How To Blog Like A Pro Dream Fox Design Block Settings 11 - Dream Fox Design
Block Settings - Making the Header Text Green in Colour

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.

How To Blog Like A Pro Dream Fox Design Heading 12 - Dream Fox Design
Table of Contents - Titles and Subtitles

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.

How To Blog Like A Pro Dream Fox Design Dashboard 13 - Dream Fox Design
Your Website’s 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

How To Blog Like A Pro Dream Fox Design Add New Post 2 - Dream Fox Design
Adding a New Post via the Left Menu Panel

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

How To Blog Like A Pro Post Dream Fox Design Status and Visibility 15 - Dream Fox Design
Adding a New Post via the Left Menu Panel

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

How To Blog Like A Pro Dream Fox Design Post Categories 16 - Dream Fox Design
Categories & Tags Tab from the "Add New Post" Page

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

How To Blog Like A Pro Dream Fox Design Featured Image 17 - Dream Fox Design
Featured Image Tab from the "Add New Post" Page

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.

How To Blog Like A Pro Dream Fox Design Featured Image Share 18 - Dream Fox Design
Post Sharing on Facebook

Step 7: Set Your Excerpt

How To Blog Like A Pro Dream Fox Design Excerpt section 19 - Dream Fox Design
Excerpt Configuration

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.

How To Blog Like A Pro Dream Fox Design 20 - Dream Fox Design
Excerpt shown in the Featured Post Section of the Blog

Step 8: Add Blocks

How To Blog Like A Pro Dream Fox Design Add a block 21 - Dream Fox Design
Adding a block using Gutenberg

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

How To Blog Like A Pro Dream Fox Design Gallery Settings 22 - Dream Fox Design
Gallery Block Settings on top of the block and on the right

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.

How To Blog Like A Pro Dream Fox Design Lightbox 23 - Dream Fox Design
On-click lightbox

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

How To Blog Like A Pro Dream Fox Design paragraph drop cap 24 - Dream Fox Design
Paragraph Block with Drop Cap enabled

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

How To Blog Like A Pro Dream Fox Design Instagram Embed 25 - Dream Fox Design
Embedding an Instagram post

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.

How To Blog Like A Pro Dream Fox Design - Without SpacingHow To Blog Like A Pro Dream Fox Design - With Spacing

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!

How To Blog Like A Pro Dream Fox Design Spacer Block 26 - Dream Fox Design
Spacer block visual guide - Spacer blocks are in red

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

How To Blog Like A Pro Dream Fox Design Popular Stories 27 - Dream Fox Design
Automated Entry in the "Most Popular Stories" section of the blog

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:

  1. 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)

  2. This is the Title of the post.

  3. 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.
How To Blog Like A Pro Dream Fox Design Removed Featured Image 28 - Dream Fox Design
Featured image not set

Video Tutorial

29 - Dream Fox Design

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!

  1. 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.

  2. 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!

  3. 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.
Like This Article?

Subscribe to our newsletter to get the latest insider updates, news and insights from the digital industry. No spams. We promise.

We want to make your digital presence pop too! Contact us for a free assessment and quote!

Scroll to Top