WordPress Page Design with the Block Editor
This is our last week on the Gaming with Grandma website. This week we will be diving into more options in the block editor to design the Home, About, and Contact pages, and learn how to use WordPress columns to make professional page designs. We will learn how to use more advanced blocks in order to master page layout.
For the lab, we will:
- Design the Home page with the Cover and Posts Query Block
- Add a Contact form
- Design an About and Contact page with the Columns Block
- Add Additional CSS with the Customizer
- Make final design changes.
This lesson assumes that have already worked through Lesson 4: How to Add Content with the Block Editor. It is Lesson 10 in the WordPress Training Program and the third lesson on the Gaming with Grandma project.
Turn Off Page Title
For the home page only, let’s turn off the page title. When you have a hero image, it looks best if it is right at the top of the page. How to do this varies by theme, but with Astra you simply click the little eye in Edit Page.
1. Navigate to your home page
2. Click Edit Page
3. Click the little eye above the page title to make it invisible.
This is a very handy feature on the Astra theme, and perhaps one of the reasons why it is the most popular WordPress theme.
Note: Not every theme has this option. If your theme doesn’t have this option, you can remove it with CSS using display:none. Here is an article on Adding Custom CSS to WordPress.
Hero Images in the Block Editor
The Block Editor has a hero image option. The name of the block is “Cover”.
You can add a Hero Image with the Cover block.
1. Click the plus sign and search for “cover” in the Block Editor.
2. Click the Cover block to insert it.
3. Move the Cover block to the top of the page.
4. Add an background image with the outside block.
5. Add some text with the inside block.
Text Placement on the Hero
How to use the Cover Block is mostly self-explanatory. However, one thing that may be more difficult to find is how to position the text on the page.
1. Click on the hero image block (not the text block) and look for the 9 dots.
2. Choose the location for the text that keeps the text off of the faces or primary objects in the photo.
For the Cover block, there are settings on both the image and on the text.
Make adjustments so that your cover photo looks great. There are four places to make adjustments:
- The settings above the image
- The settings in the sidebar when the image is selected
- The settings above the text
- The settings in the sidebar when the text is select.
If you want to find another image for your cover, remember that you MUST use royalty-free images if you are working on a live website.
Update and take a look at your home page. It should look something like this:
As you can see, by using a cover image your website looks much more professional.
Posts Layout
The Posts Query
What WordPress does best is display a list of posts. WordPress queries the database to find the posts to display. This is called the Post Query. Being able to organize posts and products gives web developers the ability to manage websites with hundreds of posts or products.
You can set a query to display all posts, or only posts in a certain category.
The example at right is from WebDevStudents. Note that the post list shows a featured image, the post title, author name and date, and an excerpt from the post.
Because posts are a bit like news articles, the default order of posts is to display them chronologically by date in Descending order, with the newest at the top.
Blog Layout Examples
Here is an example of a list of posts, showing an image, a title, some meta data, and some text.
This website only uses the featured image and title for the blog layout. Note that the titles are very long. Long titles can be helpful for SEO.
This layout shows the feature image, title, date, and excerpt.
As you can see, there are several ways to layout posts on the page.
Add the Posts List Block
You can place the posts list wherever you would like on the home page. You may want to place the posts list underneath the hero image.
1. Navigate to the home page and click Edit Post.
2. Click the plus sign to add a block.
3. Search for the Posts List and select that block.
Since we only have 5 posts, we will just display all of them.
Choose a Pattern
There are several built in options for how to display the posts.
1. Click the blue “Choose” button
2. Toggle between the two buttons (see bottom right) to see the choices.
After you make a choice, you will be able to make more customizations.
Choose and Style Post Options
For the posts you can choose to display or not display the following:
- Featured Image: Of course you want a featured image!
- Author name: You may want to leave it off of this blog, since the blog posts will show your name as the author. However, for a real blog, displaying the author name can be important for SEO.
- Post date: This is something important for SEO, but less important on this website since we only have 5 posts.
- Post Excerpt: It can be easier to style the posts without the Excerpt. On my blogs, I like to include it.
You can also add styles for each of the elements you include.
At this point, the best way to try out the post layout options is to click around. If you end up not liking your layout, then delete the block and start over.
Like with the cover block, there are internal layers to the Posts List block.
The block editor is somewhat of a WYSIWYG, but not a strong one. So save intermittently and see how your posts look.
Contact Forms: The Ninja Forms Plugin
In Lesson 8 we installed the Ninja Forms plugin. There are several popular forms plugins for WordPress, and they all work a bit differently. Of the form plugins I have used, Ninja Forms is the easiest to use and has a very generous free level.
Ninja Forms makes it easy to edit forms with a drag and drop interface. In addition, Ninja Forms automatically stores the forms on the websites. With some free form plugins, you have to install a separate plugin to store the forms.
Edit the Contact Me Form
1. Navigate to the dashboard and click on Ninja Forms.
2. There is already a simple Contact Us form already created. Choose that form to edit it.
Add a Form Field
1. Click the blue plus sign at the bottom of the page.
2. Add at least one additional field to your Contact form (perhaps a phone number field).
3. Rearrange the form fields so that the submit button is at the bottom of the form. You can drag and drop the fields.
Form Processing
Click on the middle tab, Emails and Actions.
This tab is for processing the form. There are four actions:
1. Record Submission: This option allows you to store the email forms within WordPress so you can review them later. Of course you want that.
2. Email Confirmation: This is the email that is sent to the person who filled out the form.
3. Email Notification: This is the email that goes to the website owner to let them know a form has been received.
4. Success Message: This is the message displayed on the screen after the form is complete.
Email Notification
Click on the settings wheel for Email Notification. Change the To and Reply to emails to your email address.
If you were working for a client, you would place your email in the field initially for testing, and then change it to the client’s email address when the website was live.
Success Message
Click on the settings wheel for Success Message. Change the message to a friendly message.
Note that the {field:email} is the email address of the person that filled out the form.
Click DONE and PUBLISH
Display Settings
1. Click on the Advanced tab -> Display Settings
2. Change the form title
3. Toggle off the Display Form Title.
These are the only changes we need in this section.
Add Form to Contact Page
Now that you have a form, you need to install it on the Contact Us page.
1. Navigate to your Contact Page
2. Edit Page from the top nav bar
3. Click the blue plus sign to add a block
4. Search for Ninja Forms
5. Select your form
6. Publish your Contact page
You can add the same contact page in more than one place. For example, you can place the contact form on both the Contact page and in the Sidebar.
Test Your Form
1. Fill out your form to test it.
2. Check your email. Make sure you receive both the notification and confirmation.
3. Check your Success message, and change it if necessary.
The form is too wide…we will come back and style this page in a later step.
Captcha
Your client may request a Captcha with your form. Ninja forms makes this easy. To add a Google Captcha, you need a Google Developer Account. It’s free. Here are the instructions:
https://ninjaforms.com/blog/how-to-easily-add-recaptcha-v3-to-your-wordpress-form/
No need to install a Captcha for this lesson.
Columns Layout
Just like the Beaver Builder Page Builder, and just like Bootstrap, the block editor allows you to arrange your content into stackable columns.
Because the columns can stack, this gives Web Designers the ability to use the full width of the screen for desktops.
In my opinion, the Block Columns don’t work as well as the page builders, but they are usable. In fact, your web pages will be faster if you can create the design with the block editor instead of a page builder.
We will add columns to at least two web pages:
- Contact Page
- About Page
You may also want to add columns to your home page.
The Columns Block
1. Navigate to your Contact Page
2. Edit Page
3. Search for the Columns block and select it.
4. Select the 50/50 block
Move your Form into a Column
You can move blocks with the arrows or the six dots.
Click on the Ninja Form to select it.
Move it into a column with by dragging it with the 6 dots.
Add More Blocks
Add more blocks to your contact page to fill it out. The contact page is a good place to put Social Media icons. (Yes, there is a block for that.)
More Practice with the About Page
Now that we have covered a lot of skills to design a home page, I recommend that you try it again on the About Page. Move some text from your home page to give it some content. Use columns to fill out the page. Use a mix of text and images.
In Lesson 8-10 we learned how to make a website from scratch with WordPress, using cPanel and Softaculous, learned how to install a theme and plugins, learned how to setup and design a website with Customize, and in this lesson we learned more advanced design skills to make the website appearance professional. At this stage you are ready to peruse the the Advanced Section of the WordPress Training Program. If you are interested in going through a similar exercise to make an e-commerce website, Check out Lesson 11.