yourwebsitecourse Learn to create your own website
Learn to create your own website

WordPress Block Editor “Add Title” headline goes here

Alt text for the 16:9 image
Here’s a caption for that 16:9 image. Easy to add in the WordPress block editor, captions often get read.

An H1 Heading in the WordPress block editor

This is called body copy (or “Paragraph” in the WordPress block editor). Why is it called body copy? The definition of “copy” is text that is intended to be copied – originally on a printing press – and read by many people. The “body” part is because it is copy that appears in the body of the piece, under a headline and/or subhead.

One way to get people to read the first paragraph is to make it a bit bigger than the others. You do that using the tools in the sidebar on the right of the page-editing window. Copy can also be bold, italic and include links like this one that goes to the yourwebsitecourse Homepage.

Here is an H2 Heading (aka subhead)

Body copy is more than grey lines on a page. Although that’s how designers often see it. Body copy is where you get to convince people how good your product or service is.

You have already attracted the reader’s attention with an arresting headline and visual. The body copy is where you get to explain exactly why your product or service is so good. So good, in fact, that they should find out more – and buy whatever it is you are selling.

One unwritten rule of body copy to start each paragraph with a different letter. Bet you didn’t notice. (Not consciously, anyway.)

Common blocks popup window

This is the Common Blocks section in the popup window.

“Common Blocks” in the WordPress block editor (H2)

When you click on the “+” in the new WordPress block editor, a popup window appears. Scroll past “Most Used” and you will find the “Common Blocks” section. The first option is “Paragraph”, which lets you write body copy like this. Paragraphs can be aligned left, centre or right. You can use bold and italic, and add links to other pages or websites. You can even change the size and colour of the text and background, using the tools in the sidebar on the right of the editing window. And use a “Drop Cap” (like with this paragraph – which is too long, by the way).

Don’t get carried away with fancy tricks, though. Simple is best.

Heading is the second Common Block – this is an H3 Heading (centred)

Headings should include keywords or words related to those keywords. Google pays particular attention to HL1 and HL2 headings, so try and stick to these. You can change the Heading size and alignment in the sidebar on the right of the editing window.

Here’s an H4 Heading, aligned left

H5 looks like this in this Theme (Customizr), centred
The designer chose this for H6, aligned right

The fewer heading sizes you use, the cleaner your design and the more professional your page will appear.

A few words on images (H2)

If you have followed the yourwebsitecourse syllabus document, you have a folder called “Images-FINAL” on your computer, containing all your optimised images. Here are the last few steps you need to take before you can use them.

In the black sidebar on the left of the WordPress Dashboard:

  1. Click on “Media”
  2. Then “Add New”
  3. Click on “Select Files”
  4. Select all the optimised images and upload

They are now in your Media Library, ready for use. (The Smush plugin will have further optimised your images.)

Captions, Alt Text and Descriptions (H2)

Google and other search engines will scan the file name, caption, alternative text and description of each image. So it makes sense to include keywords or related words for all of them. If you forget, you will be prompted by the Yoast SEO plugin.

To see how your page looks in real life, click “Update” on the top right of the editing window, then click “Preview” (next to the “Update” button), or “View Page” in the horizontal black bar on the top left. (H5)
Banner image example
Image is the next Common Block. Images can be aligned left, right and centre. And re-sized and linked using the toolbar on the right of the editing window. They can also have text running around them on the left or right. Play around.

Make a List (H2)

Square image example
A square image, aligned right.
  • The next Common Block is “List”
  • They can be numbered
    • And lines can be indented
  • People often read them
    • Writers find this upsetting
  • Bold, italic and links can be used
  • Clean and simple is best

Quotes – the next Common Block – look like this in Customizr. They can be regular, or large (like this), and aligned left, centre or right – like this.

Alex the tutor

“Cover” is a very cool Common Block. The image (or video) is darkened and the headline is reversed out. You can even add a colour filter.

Other Common Blocks (H2)

The “Gallery” Common Block adds a selection of images from your media library and crops them automatically. “Audio”, “File” and “Video” give you the chance to embed that kind of content (from URLs or media in your Media Library, or elsewhere).

Jumping down to Layout Elements (H2)

Under the Common Blocks section in the popup window, you will see “Formatting”. “Classic Block” gives you the option of editing using the “Classic” WordPress editor which was replaced by the new block editor in December 2018. There are other options here that will make sense to those who know about code and coding. Play with all the blocks to see what they do, if you like. You can’t really make a mistake.

Layout elements window in WordPress block editor
The “Layout Elements” popup window

Below “Formatting” is the “Layout Elements” section. The first option here is “Columns”. Select this when you want your text to appear in two columns, like this. You don’t have to fill in both columns. You can even put text in one and a different block in another. It’s cool.

Expanding possibilities (H3)

Two columns can be split further, opening up additional design options.

You can enjoy playing with this. Although bear in mind that different screen sizes will make your finished design behave differently and you may end up with something unexpected. On a mobile phone, two columns may be rearranged into one.

There comes a time when splitting

is no longer a great idea.

16:9 normal format

The next block in “Layout Elements” is “Media & Text”. You can add media on one side and text on the other. You can change the size of the text, and the colour, in the tools sidebar on the right. It’s useful.

There is a “Spacer” above this Bold Italic H1 headline to see what it looks like

Another useful block in Layout Elements is “Button”. You can change the shape and colour of the button and text, in the tool sidebar on the right of the editing window. And link the button to any URL you choose. Ideal for a call to action. By the way, try not to use exclamation marks! Or leader dots… They are unprofessional. (Of course, you can break this rule, but it’s worth knowing you’re breaking.)

Other Layout Elements (H2)

Above the subhead above is the “Separator” option in the Layout Elements. Below this paragraph is a “Page Break”.