Back to top

Affiliate Link: Looking to Monetize With Ads?? We Personally Use:

Ezoic

Creating A Landing Page In Gutenberg on Acabado

Featured Tiles
As an Amazon Associate we earn from qualifying purchases made on our website. If you make a purchase through links from this website, we may get a small share of the sale from Amazon and other similar affiliate programs. You can read our complete legal information for more details.

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.

YouTube

By loading the video, you agree to YouTube’s privacy policy.
Learn more

Load video

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.

AcabadoTheme.com Masthead - Creating A Landing Page In Gutenberg on Acabado
AcabadoTheme.com Masthead

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)

showing how to see the post id for a page or post
The ID for my Sitemap is 164

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)

Example Page To Show Clean Look and Feel

If you find a post helpful and feel like rewarding my effort with the price of a beer, please donate here

About Josh Koop

Hey Everyone! I hope that the short article you read today has taken you from a place of frustration to a place of excited anticipation for your visitors! Please let me know of anything you need for Acabado that can help you achieve your goals!
Read More About Me...

My Posts | Website

Josh Koop

Hey Everyone! I hope that the short article you read today has taken you from a place of frustration to a place of excited anticipation for your visitors! Please let me know of anything you need for Acabado that can help you achieve your goals!
Read More About Me...

2 thoughts on “Creating A Landing Page In Gutenberg on Acabado

  1. Great Josh. Nice and clean canvas. Couple questions. Removing the title leaves a big gap (space) from first block of the content to top of page. Any way to close the space?

    Secondly I thought each specific page/post had a custom css entry area on the right as we are in editor mode of the page/post. Maybe that was from another theme. I was using Thrive Architect but now straight Gutenberg. That would shorten my custom css codes string in Acabado Settings custom css.

    Thanks for your support. Congrats on your site here. I see you’ve got some ads going. Cool.

    1. Yeah Custom CSS is only for the site, not a per post/page. Another software could adjust without you knowing and they append on the page id or post id. Below is code to remove the padding which is the only thing left before content starts.

      .site-content {
      margin-top: 0px;
      margin-bottom: 0px;
      }

      Ezoic Ads came from Ezoic assisting P24 members to get on their system. You can be lower than the 10k required by the website which allows me to run a test on my own system to see what we can get for speeds on an Acabado driven site.

Leave a Reply

Your email address will not be published. Required fields are marked *

Recent Content