Headings

Headings break up your post both visually and semantically. They mark the beginning of a new section or subsection. Headings are designed to nest: There is only one H1 tag per page, and it describes the entire page. Within that heading, you may have multiple H2 tags, that describe subsections of the page. H3 tags, are subsections of the H2 before them.

On a typical page like this one, the H1 tag is reserved for the title of the blog or website. It is often similar or identical to the web page’s title (the title of the window or tab). Next is the H2 tag, which is usually the title of the page, or post. This is controlled by what you enter in the Title field of your post or page. The first heading that you will use inside the body of your post is probably an H3 (you could use an h2, but that would mean that you had moved on to a different section of the page from the first part of your post.

Blockquotes

Pullquotes are a great way to highlight a section of your page

Blockquotes are another great way to break up the monotony of a page. You can pull them out to the side, like this, to achieve something like a pullquote you would see in a magazine. To do this, you’ll need to have some CSS classes set up. If your site was designed by Blueprint recently, you’ll be able to use left, right, and column to style your pullquote. If you’re using the default theme, you can use align-left and align-right. I’d recommend the TinyMCE Advanced plugin, if you don’t have it installed already. It makes adding classed much easier:

Highlighting

As much as headings and blockquotes will guide your readers to the sections they’re interested in, you still need to make your sections easy to read. There are a lot of ways to break highlight portions of your text, but the simplest is to make important parts bold or emphasized. There are a lot of similar elements that can be helpful: inline quotes citations, and abbreviations. You’ll notice that I’ve used the code element a lot, for a similar reason. Links can have a similar effect within a paragraph.

It’s also often helpful to use lists, rather than paragraphs, to explain things. The bite sized chunks are often easier for readers to remember. That’s the main goal of all of these elements – to break up a lot of information into understandable and memorable chunks.

Uploading

To put a picture on a page, we first have to upload the picture to the website. So below your editor, look for the Upload section. It’s Important to fill out the Title field, this information will be used by search engines to “understand” your image, and it will show up as a ‘tooltip’ for visitors, when they hover over your image. The description Field will not show up unless the visitors click on your image (more on that in a bit), so it’s not necessary for every image.

Inserting the Image

Once you click Upload, the image is on your server and ready to use. The Upload section will now show you the image you’ve uploaded, along with some options. The most common use will be a thumbnail, linked to a page. Those are the options I used to insert the image at the left. Click on the image for an explanation of the other options. Once you’ve chosen your option, you can click Send to Editor, and the image will be inserted into your page, wherever your cursor was last.

Wrapping Text around the Image

If you’ve inserted a small picture, or a thumbnail, you’ll probably want your content to flow around the image. You’ll need to select the image in the editor (by clicking on it, white ‘handles’ will show up to let you know it’s selected). With the image selected, click the Align Left (or right, see below) button. If you have the TinyMCE Advanced plugin installed, you can use the Style dropdown to give the image some additional padding by choosing the left or right class, accordingly. The special classes available in sites designed by Blueprint Studio are derived from Scott’s list of special classes (the center class will place an image centered on its own line). I will explain the rest of the special classes when we discuss content formatting.