Getting Started with WordPress Part 1 (Building Pages and Posts with Blocks)

Welcome to the tutorial. This article assumes you have already established things like hosting, your domain name and you have installed or set up WordPress. If you have done these things, then congrats! This is the fun part, where you get to start adding content and designing your site.

We are gong to look at building pages with “blocks” in WordPress. Once upon. a time designing layouts in WP posts or pages was not easy. Where once you had to rely on workarounds, now we can implement some design sophistication with a few blocks and simple configurations.

In this tutorial we cover:

• Overview of Blocks and WordPress Editor
• Text blocks and text formatting
• Media and Image blocks, including full width images and galleries
• Design blocks such as columns, rows, sections and buttons
• Blocks for header and footer (site title, menu, social icons)
• Embed blocks to add things like content from 3rd party sites

Overview of Blocks and the WordPress Editor

What are blocks? They are the basic component of the content. Blocks include text items: headings and paragraphs, bullet lists, bold and italic text etc. Most of what should be familiar from software like Word or google docs can be replicated in WordPress.

There are quite a few kinds of blocks in the WordPress editor: text, design, media, embed, widgets and theme blocks. Let’s run through the various categories here.

Text Blocks – Editing Text and Typography

The text block is the basic starting point for content in a WordPress page or post. Alongside images it is the fundamental content container and you can use various headings, paragraph blocks, lists and quotes.

To style the text, or change font color, size or alignment, you’ll need to enter the styles menu on the right or customizer on the left, depending on your theme.

Media Blocks – Adding Images, Galleries and Video

After text the most important items on your pages and posts will probably be images and image galleries, along with video.

Images are either uploaded to the “media gallery” or hosted on another site and inserted via a URL. Most images will be inserted directly on the page, and then styled as normal or wide presentation (such as full width which crosses the entirety of left to right across the page).

Additionally, note that pages and posts can have “featured” images which display automatically at top of the page. You add these images in the right sidebar settings area.

Design Blocks – Creating Layouts in WordPress

The ability to create rich layouts and page designs in WordPress is an example of how far the platform has come in two decades. And the amazing thing is you don’t need to use so-called page builder plugins like Elementor to design your pages.

In fact, the native editor and blocks, known as WordPress blocks or “Gutenberg,” is really all you need. And a number of third parties have plugins to extend WP blocks. Let’s look at how this works.

---

Why use column layouts?

While there is an argument to be made that a single column of content is fine, and often looks good, a website will benefit from creative column use when viewed on desktop mode.

A layout scheme made of alternating column sections will look more balanced. Take the Apple Education site. I’m not referring to the product sales site, but the topic of “education” in the broad sense.

Apple’s education website is beautifully designed. First image, from top of the site, is a one column layout with large heading. This is followed by a three-column layout with coloured boxes. then we have a series of rows with two columns. Photo is on left with text on right, but often Apple alternates the flow, image right, image left, image right etc.

Designing pages like this allows for building a rich story with different kinds of content and the visual breakup is easier on the viewer. Different layouts make engaging with a page easier.

Blocks for header and footer (site title, menu, social media icons) in full site editing

It is important to realize that blocks are also used in the header and footer areas of the templates for full-site editing themes such as Twenty Twenty Three.

I’ll provide some screenshots that show the various blocks that can make up a header, for example.

Warning: Do not confuse the “site editing” feature with “page” or “post” editing. They may look similar but one modifies everything site wide, and the other is for individual pages and posts.

Here’s a view of the site editor open, showing how different elements can be edited, from social icons to placement of the post feature image.

Text formatting

This might be review fo some of you but here’s an overview of the basic terms for text including headings, paragraph or body and bullet lists (also known as an unordered list as opposed to ordered or numbered list.

Images from Full Width to Galleries

You can insert an image in the page and align it left, centre or right, and also widen it so it fills the page width.

Let’s look at that.

WordPress Training Videos

In this section we share some of the most popular training videos by WordPress.com.

Topics covered include:

• Build a WordPress site in 5 steps
• Create a page
• Edit in WordPress (Use the Editor)
• Add images to Pages
• Create a galleryEdit in WordPress

Build a WordPress site in 5 Steps

Create a page

You will add your content to pages and posts. Typically pages contain static content such as that found on your “About” page. You don’t need to change it often. Posts are the articles found in your blog. The are displayed chronologically. Regarding the content, creating a page is similar to creating a post.

Edit in WordPress

Using the WordPress editor is key to adding content and designing your page and post layouts.

Add images to posts and pages

Add an image gallery

Add a button to your site

Buttons are graphic with hyperlinks that you can click. They are often part of Call to Action (CTA) elements. You make a pitch and hopefully the viewer decides to click your button and vie the content.

Add social media icons to your navigation (full site editing themes)

One way to jazz up the header navigation is to make sure you have added a logo (if you have one) and you have added social icons. These are really handy and can direct site visitors to your channels and pages.