Completely blank page

Hi - I need to create landing pages with no headers or footers (ie start point totally blank). There is no blank template in the theme, and no way I can find to eliminate the header and footer in the plugin. Help!
Thanks

Hi Andrew,

Thanks for getting in touch! Re. hiding the header and footer using the Beaver Builder theme, we actually just released a massive theme update tonight that adds the option to remove both! Feel free to check out our change logs and blog for more details. The update is now available in your dashboard if you want to check it out! Thanks again and let us know if you have any trouble.

Best,
Billy

One extra question - can this be done per page (so that I can create landing pages only with no header/footer, while all other pages have header footer). Thanks

Hi Andrew,

No, hiding the header/footer would only be available site wide. Sorry about that!

Best,
Billy

Hi Guys,

I think hiding the header and footer site-wide defeats the object of creating landing pages without header and footer. Normally you’d want to do this to specific pages not your whole site. I therefore can’t see it being used often in its current incarnation.

Is there any way you can tie it in with the beaver theme and create a specific Landing page template.

  1. No header and footer
  2. No header only

Previously I had seen that you suggested the following CSS

// Hide Header (for Landing Pages)

.fl-page-nav-wrap {
display: none;
}

Is there anyway that this can be applied or a new CSS class that enabled Landing Page Templates.

Cheers

Hey Dennis,

Great suggestions, I totally see how this could be useful and it is something we plan on looking at soon. At the moment, every page has a page ID that you could target with custom CSS and hide the header/footer or both. Hope that helps in the interim!

Best,
Billy

Great news, can you tell me how to do the pageid css to hide? Thanks i really need this

Sorry - my last question was ambiguous. Billy said:
“every page has a page ID that you could target with custom CSS and hide the header/footer or both”

Can someone tell me how to do this? I have tried and couldnt work out how.
Many thanks!

Hi Andrew, this is how I did it - I hid the menu bar, header and footer:

/CREATE LANDING PAGE/
body.page-id-6903 .fl-page-bar {
display: none;
}

body.page-id-6903 .fl-page-header-container {
display: none;
}

body.page-id-6903 .fl-page-footer-container {
display: none;
}

If you go to the page you want to create as a landing page, then inspect element (if you use firefox/chrome, right click and select inspect element) - then you’ll see something like this at the top:

class="page page-id-6903

Hope this helps.

I added this CSS in the Customizer.

Dennis

I am trying to do exactly this right now.

Will the landing page just be a normal page?

STEP 1
If you create a page in WordPress (for example sake: ‘My Landing Page’) and publish it.
Then visit the page.

STEP 2
You then right click in the browser window as select ‘Inspect Element’

A new box should appear at the bottom of the page. Look for something like:
class=”page page-id-6903

This is your page ID.

STEP 3
You now add your page id to the following (replace 6903 with your page ID).

body.page-id-6903 .fl-page-bar {
display: none;
}

body.page-id-6903 .fl-page-header-container {
display: none;
}

body.page-id-6903 .fl-page-footer-container {
display: none;
}

STEP 4
In your WP dashboard go to Appearance > Customize . The Customizer will open.

STEP 5
With the customizer open on the left hand side, in the main window navigate to the page you want to change. (I suggest you add it to the menu before step 4 so you can get to it easily. Once you’ve added the CSS code you can remove it from the menu)

STEP 6
Click on CODE > CSS CODE and paste the following in the box (remember to use your page ID)

/MY LANDING PAGE/
body.page-id-6903 .fl-page-bar {
display: none;
}

body.page-id-6903 .fl-page-header-container {
display: none;
}

body.page-id-6903 .fl-page-footer-container {
display: none;
}

STEP 7
You should now see that all of the above have disappeared. Click save and Publish. You’re all done.

Note: only add CSS below if you have the top bar visible, if not just remove)
body.page-id-6903 .fl-page-bar {
display: none;
}

Hope this helps.

I have tried to do this and does not seem to work for me.

I have chosen a random page to test this.

I input the CSS into the CSS code section in the customizer.

I found the element of this page http://www.nothankyou.org.uk/GeneratePress/elections/ which should be class="page page-id-288

so i exchanged the “6903” with my page id “288” and nothing happened.

Am i missing or not doing something?

Sorry does this part also need to be changed to something? /MY LANDING PAGE/

Looks like you’ve got nav bar below: Try adding this to remove it.

body.page-id-6903 .fl-page-nav-wrap {
display: none;
}

/ANY DESCRIPTION/ = This is just a description so you know what it is at a later date

I also did a test using inspect element to see what it looks like on your site.
https://www.dropbox.com/s/18z5v7vot35cy61/Elections-Everyone-Party.png?dl=0
(best view image in Firefox as Chrome is not showing it)

Try this link:
http://i.imgur.com/d97Facq.png

Here is the link to delete image:
http://imgur.com/delete/R685ZN3vmNx2exW

Thanks Dennis thats really good of you to give me all this information.

I cant see the dropbox image in Chrome or Firefox so maybe this is where im having the problem.

Im still not getting the effect i need, Im certain i have copied the CSS correct and i still no change!

Any more suggestions would be grateful…

I really appreciate all the help. Using the css provided i eliminated the header but not the footer. Following the patterm i even tried all the tags i could see in the footer of the page but the best i could get was just the footer background only, any ideas?

Ok success, i have managed to take out the top menu and the nav bar but not the header of the footer?

http://www.nothankyou.org.uk/GeneratePress/landing-page/

Brian, try the following to see if it works for you.

body.page-id-507 .fl-page-header-wrap {
display:none;
}

body.page-id-507 .fl-page-footer-container {
display:none;
}