Adding Genesis Blocks layouts to your web pages

If you’ve been following along with the tutorials, you now have a website with the main pages set up.

Now we’re going to remove the content in those pages and replace it with professionally built page layouts specifically designed for each specific page type.

Log in to WordPress

First, we need to log into WordPress and view our site so we can use the navigation bar to find the pages we want to edit.

Toggle between front and back end

Look in the top left corner of your screen for a house icon and your site name. Clicking the house/speed icon or your site name toggles between the WordPress dashboard and the front end of your website.

• The dashboard or back end of your website is where you edit your website.
• The front end of your website is how your site visitors see your website.

First log in to WordPress, then toggle the house icon or your site name until you see the front end of your website.

Use the navigation bar to find pages

Now you can use the navigation bar at the top of your website to navigate to each page you want to edit. We’ll start with the homepage.

Remove old content using the code editor

When you’re viewing the front page of your website…

Click the edit page tab in the admin bar.

In the very top right of your screen, click the three dots.

Select, Code Editor.

Place your cursor in the code and then press Ctrl + A on your keyboard to select all. Then press the delete key on your keyboard to delete all content on that page.

Now look to the top for a text link that says, Exit code editor. This in the top right of your web page, not in the sidebar. Click, Exit code editor.

You now have an empty web page.

Adding new content based on a layout template

Click the layouts tab in the top toolbar. When the layout selector opens you are viewing the Sections tab, but we need the layouts tab. Click the Layouts tab.

Scroll down the layouts to find and then select the Slate Homepage layout (not slate homepage alternative). Remember to click the update button to save your changes.

Your website homepage now has the slate homepage design.

Always remember to click the update button to save your work!

Exit the post editor and go back to the WordPress dashboard.

The layout templates we’ll use

• Homepage: Slate Homepage
• About: Slate About
• Services: Slate Features and Services
• Contact: Slate Contact

A quick recap of how to add these page templates to your website…

• When viewing the front end of your website, navigate to a page using the navigation bar.
• In the admin bar at the top of the screen select Edit Page (pencil icon).
• Top right of your screen click the three dots button.
• Select Code Editor option.
• Place your cursor in the code and select all (Ctrl + A) then press the delete key on your keyboard.
• Exit the code editor using the text link, upper right of your page.
• In the top toolbar, select the Layouts tab.
• You are now viewing page Sections, but you want to see full page layouts. So, click the Layouts tab.
• Use the search box or scroll down to find and select the layout you need. (The search box is a bit unreliable.)
• After adding a layout to your page, click the big blue Update button to save your changes.
• To exit this dialogue and go back to the WordPress dashboard, click the big black W icon in the top left of your screen.

When you’ve added page templates to each page on our list…

• Homepage: Slate Homepage
• About: Slate About
• Services: Slate Features and Services
• Contact: Slate Contact

You’re ready to move on to the next tutorial.