While the Heading and Introduction are optional and you may well not end up using them for every (or any, as the case may be) section of your final post, they are very useful during the planning phase of post creation.

Start building a basic working outline of your post by adding a handful of Sections, giving each a descriptive heading and adding a few notes in the Section Introduction box. This is just for you, so don’t worry too much about what you put here, this is just an outline and It’s all going to change as you work anyway. Add, delete and move sections around until you’re happy with your outline.

Now it’s time to start adding Content Blocks. This is the fun part.

With just two fields, an optional heading field and a text field, the Text Block allows you to add as many uninterrupted lines of perfectly formatted prose as your heart desires.

While you can technically add as many paragraphs as you want, you should, depending on the length of each paragraph, probably limit yourself to somewhere between two and five. However many paragraphs you have in each block, under no circumstances should any single Text Block take up the entire visible screen height. That’s too much text with too little white space for most website visitors.

Every once in a while you need to break your writing up with something a bit more visual, which brings us to the second of the three core content blocks.

If you find that you have a particularly long section of text, try breaking it up into two Text Blocks and tucking an Image Block between them like I’ve done here. This adds some visual pop to your content, and it gives visitors’ eyes a break from reading.

While the image in an image block will always be the full width of the content area, you can set the height to anywhere between 500px to 1250px in order to get close to the aspect ratio of you original photograph.  That being said, I would recommended a maximum height of between 800px and 900px so that the entire image is visible in the viewport. In case you’re curious, the image below is set to 600px.

You also have the option of giving it a caption. Let’s add one to this image just to see how it looks.

The caption looks great!  The spacing between it, the image, and the text below is perfect from a clarity standpoint, and the color and size of the font ensure that it’s not distracting or confusing.  I thought about making it italic, but that doesn’t seem necessary so I think I’m just going to leave it like it is.

Now that we’ve covered the basis of the Text Block and seen the Image Block in action, let’s check out the last of the Core Content Blocks, the Combo Block, which is by far the most versatile of the three.

The Combo Block allows you to add an image to the left or right of text.  Unlike the previous two blocks, The Combo Block requires a little bit of finessing.  As you’ll see, while this can be a bit time-consuming, it, thankfully, isn’t difficult.  Besides, Combo Blocks are far too handy to worry about a little extra fiddling about and they look pretty awesome.

One thing worth mentioning here is that, unlike the Image Block, you can’t add captions to the images in a Combo Block. The simple reason for this is that they just don’t work.  I’ve tried, they look awful.

Captions require a certain amount of both vertical and horizontal space.  While the Image Block provides plenty of both, the Combo Block really doesn’t. Even when set to the full 470px there isn’t enough space for a caption while still maintaining the proper flow of content.  Things get ugly and the narrower the image, the uglier it gets.

Let’s get to know each of these blocks a little bit better, starting with one of my favorites, the List Block.

For all its simplicity, the List Block is incredibly flexible with several features that make creating the perfect list a breeze.

Depending on your list needs, you can create a checklist, a numbered list, or a bullet list.  You can put list items into up to 4 columns to make longer lists more compact, resulting in less scrolling.  You can even give your list a heading and an introduction if you want to.

While the List Block is already pretty flexible, we’re currently working on adding more features to extend it’s usefulness, including:

Keep you eye out as these new features, and possibly a few others, should be rolling out over the next few months.

While adding a map to your post does require some forethought and preparation, once you have the map, actually adding it to the post is pretty straight-forward and only take a couple of minutes.

The first thing you need to do is go to Google My Maps and either create a new map or select one of the maps that have already been created. If you are creating a new map, click on “Share” in the map creation box and then turn on “Anyone with this link can view” before saving it.

Once you’re happy with your new map, return to Google My Maps and locate your new map. Click on the “Share Map” button and choose “Embed on my site” from the options.

A modal will open with HTML code highlighted.  We don’t want to copy all of it, just the link, so click anywhere inside the modal to un-highlight the code.  Now, find the part of the code that begins with src= and highlight and copy ONLY what is between the quotation marks.  This is the link to your map.

Return to your post form and paste the link into the “Google Map Link” field. Once you save your post, the map will show up on the frontend just like the one below.

Just in case you couldn’t guess, the Video Block lets you embed a YouTube video in your post.  All you have to do is hop on over to YouTube,  find the video you want to add to the post, open it like you’re going to watch it, copy the link from the address bar, and then pop back over here and paste the link into the input field at the top of the Video Block. That’s it, you’re done!

Unless, of course, you want to add a caption, in which case you should probably do that… and then you’re done.

There is one important thing I should probably mention before we move on. Don’t add other people’s videos to your posts without their express (preferably written) permission like I did up there with that one. Generally speaking, that’s a very bad idea.

I did it here for three very specific and valid reasons.  First, I needed a video for the example and don’t currently have any of my own.  Second, and equally important, in all likelihood, only a limited few people, including myself, will ever see this post before I get a chance to change the video, and, like you, they’re all related to me in one way or another. Third, I just really love this video, it makes me happy.

The point is that we only want to share the videos that we make.  We can link to other people’s videos, that, hopefully, gives them traffic and helps us make new friends.

Okay, that’s it, we can move on to the next block now.

As you can see in the example below, the Quote Block let’s you add beautifully formatted quotes that stand out from the rest of your content and grab the reader’s attention without being gaudy or disruptive.

Unlike the stand-alone Quote Posts, which come in a variety of different styles, quotes inside posts are one-size-fits-all.  They need to stand out from the rest of the content without disrupting the cohesion of the overall post.

With the Gallery Block, you can add a small gallery of between two and six photos in any of eleven different layouts.

More layouts will be added as time permits or the need for them arises, so if you think of one that tickles your fancy, just let me know and I’ll add it to the collection for you.

When you choose a Gallery Block in the form, you are first presented with the layout option bar that looks something like the one shown above.  Once you select the layout you want to use, the appropriate fields for that layout will display and you can build your gallery.

Let’s take a look at a couple of layouts now.

Layout 1 and Layout 2 are the only single-row layouts. In a single-row layout, all of the images are the same height (between 250px and 500px) which can be set in the Row Height field.  Don’t worry if you forget to set the row height, it will default to 350px.

Beginning with Layout 3, the majority of layouts have two rows.  The height of each row is set independently, again from 300px to 600px, and all of the images in each row will be that height.  Just like with the Image Block, the maximum height of 600px ensures that the the entire gallery will be visible on most desktop screens.  If you forget to set the row heights, they will default to 450px.

For the best results, I suggest using photos with aspect ratios similar to the chosen layout and then setting the row heights to achieve the desired balance while ensuring that the entire gallery is no taller than 900px or the visible portion of the screen while still maintaining a little white space above and below it.

One last thing that should be mentioned about the Gallery Block is that, no matter what layout you choose, all galleries will be displayed in a single column with square images on cellphone screens.

Screen sizes will be discussed in a later document.

The Product Block allows you to share products in your post in two different ways. The default setting of the Block Style field is set to “Standard”, which has all the fields necessary for adding a single inline product like this one.

Alternatively, by adding multiple Products Blocks, each set to “Advanced” in the Block Style field, you can create a full-fledged gear round-up section or post. I’ve only added one product in the example below, but hopefully that’s enough to give you an idea of what’s possible.

While you can always add basic inline links in Text Block, let’s face it, they’re not sexy or interesting. They blend in with the rest of the text, standing out just enough to be identifiable as something clickable. That’s okay though, that’s exactly how they’re suppose to be, functional, non-intrusive inline links.

But sometimes you want a link, or even a bunch of links, to stand out and grab the reader’s attention which is where Link Boxes comes in pretty handy.

The Block’s default setting is “Single Link”, which let’s you add a call to action style link to an internal post.

If you have three or more posts that you want to link to, you should use the “Multiple Links” setting instead.

With four styling options and the ability to integrate a link, the Notice Block makes it easy to highlight those short but important bits of information that might otherwise get lost in the rest of your content.

If you ever find yourself in a situation where you want or need a different styling option for your Notice Box, please don’t hesitate to let me know and I’ll happily add it for you.

As the name implies, the Info Box allows you provide important details or useful information about something in a box that stands out from the rest of the content so that it’s easy to find while scanning through the post.

This example Info Box uses every available component and option of the Info Box with the exception of the list item labels, which currently can’t be used in combination with icons.

Like the Image Block, you really want the entire Box to be visible in the viewport of a standard desktop computer screen with some white space both above and below it.  With that in mind, the Info Box has a maximum height limit of 850px, which unfortunately does put a limit on exactly how much content you can add, albeit a fairly moderate one that, hopefully, won’t put too much of a cramp in your creativity.