Acabado: Creating A Landing Page With Gutenberg

Please Note: This comes with no support from myself or from Income School as it is only a proof that the ability exists to run Acabado while maintaining the speed benefits. Use at your own risk, I don’t have the ability to make updates to this content.

When you want to build a traditional landing page you are looking to build a page without navigation as the page is supposed to lead to the sign-up, purchase or other end point. If you are using Gutenberg there is not a blank canvas option to remove the masthead from your page.

In this case you can use a custom CSS block pointed at removing the masthead from a specific post id, note in this setup a page and post id are the same thing. If you get the post id you can target only that page to remove the masthead and give you a page and sidebar only.

Removing The Masthead

The “masthead” is the entire top of the website, it includes the logo, menu, and search bar. Basically this will limit the page to only the content you have within your Gutenberg editor. This is how you start to assemble a page which is set for you to construct your landing page.

To remove it from a specific page you will need to target your specific page or post id, this will remove it from that id only and not site wide. Given the example below you will need to replace the XXXX with your page id.

.page-id-xxxx #masthead {
    display: none;
}

Finding Your Page or Post ID

Open up your posts or pages to the list of all active entries. In this list when you hover over the “edit” button without clicking at the bottom of the screen you will see a URL, this will include a post id number (which is the part you need)

So if I wanted to remove the masthead from my sitemap html page I would use the change below which targets this specific ID number. You want to make sure you have your landing page saved as a draft which is when a ID is assigned.

.page-id-164 #masthead {
    display: none;
}

Removal Of The Page Title Display

Next after removing the masthead you will want to remove the H1 header from displaying as it will detract from your message. Using the same style custom CSS you can hide the H1 from showing.

.page-id-xxxx .entry-header {
    display: none;
}

Making The Landing Page Full Screen

Now that you have the masthead removed you will see the page still has a sidebar and content area, when you are building a landing page you don’t want distractions from what you are accomplishing (typically pointing users at a specific action).

1. Within WordPress on a page you have the right bar which you will want to select “Document”.
2. Scroll Down to “Page Attributes”
3. Change Template From “Default” to “Full-Width Layout”

This will ensure the page has no sidebar and is a full width area for your Gutenberg content.

Removing the Footer

The last step is similar to the masthead, you want to not show the footer on your landing pages, you don’t want the diversions and this is one more thing they can click on to leave your targeted page.

.page-id-xxxx #colophon {
    display: none;
}

NoIndex The Landing Page

When you create a page like this you don’t want it to appear in Google as a page that is searchable or findable as this can lead to other people cloning it or abusing it. The NoIndex feature in Acabado is below the post area, you need to scroll down and find the section called [ Post/Page Settings ]

You need to check the box to NoIndex the page, example below as to what it looks like. (Right by Pinterest Setup)

I love technology, I have plenty of technical side experience but never really thought of blogging as a way to earn an income. With everything that has gone on in the last couple years and the instability of the job markets I started to learn how to blog and build affiliate niche sites to add more income channels to give me the chance to break free from the financial chains that bind me and find real freedom!