elementor full width

How to create full width header and full width blank page template with Elementor page builder

Elementor full width tutorial: How to create full width header and full width blank page template with Elementor page builder

In this tutorial you will learn how to create full width page template, full width headers and full width sections with elementor page builder. Also you will learn how to re-use or re-apply them without any extra effort.

To create full width header or page template with elementor, you don’t need any special theme or plug-in. All you need is the blankslate theme, custom css plug-in and the elementor plug-in. i will teach you how to customize blankslate theme and, use it, as full width page template. stay tuned!

Have a look at the page below, it has a full width header, with call to action buttons. then it has service section, then it has full width section again, with rounded button, then it has a about us, section with a video, then finally it has, a footer, with copyright details. now I will teach you how to create the full width page shown below.

elementor full width

Now lets begin to learn how to create full width headers and full width page templates for Elementor plugin.

Step 1:
Install Blankslate Theme

elementor full width header

To install Blankslate – Go to Apperance – Then click on themes – Then click on add new – In the search box type Blankslate and press the enter key – then click on install button – once installed click on the activate button.

Now after the installation of Blankslate, let us check how the site looks like.

elementor full width page

Ok lets proceed to Step 2:
Lets install Elementor plug-in, from the dashboard, go to plug-ins, click on add new, type elementor and click on install – then activate.

elementor full width page template

Now lets us try creating a page say the home page. form the dashboard go to pages and click on add new, type a name for the page, click on edit with elementor to start using elementor page builder.

elementor full width page header

Ok, now let us try to create a full width section. Once you go to the editing mode with elementor, click on add new section, then select full width layout as shown below:

elementor full width sectionfull width page template for elementor

Drag the heading element to the section as shown below:

create full width section with elementor

It would be better to watch the video for complete instructions for using various elements of elementor plugin. Also in the tutorial video you could learn how to set section widths, column widths, changing background color and applying custom css etc.

Since its difficult showing all steps and sequences as pictures and words, I would strongly recomend you to watch the video.

Lets proceed to Step 3:
Install and activate custom css plugin.

blank page template for elementor

Step 4:
We have to customize blankslate theme in order to have a complete blank page or template.

After this step you will get a blank template or page with very minimal settings which will enable us to create full width sections, full width page or full width header. We need to hide unwanted elements such as title, search, posts comments etc. using css.

Just add this piece of css as shown below. this hides the elements we don’t need.

fullwidth page template for elementor

Copy the code below:

body {
margin: 0px;
padding: 0px;
}
#header {
display: none;
}
#sidebar {
display: none;
}
.header {
display: none;
}
#primary {
display: none;
}

#copyright {
display: none;
}

 

Now lets have a look at the css code we just added.

This css code will set zero for the margin & padding properties of the body element and hide the default elements such as header, sidebar, primary and copyright section that comes with blankslate theme

Lets have a look at the page. wow! you can see that the css code has hidden the elements we don’t need.

fullwidth elementor

Step 5: Stretching the section to full width
Although we have hidden the elements in step 4, we still see the margins. nothing to worry, we will fix it in a moment.

Just click on section, then click on layout, then select full width.

Now lets test it. Great! we got a blank page with full width. you may use this for full width section or full width header.

fullwidth section elementor

Please watch the video to know how to create the page layout as shown at the beginning of this tutorial. Also you could learn how to save the sections and page as template for re-use. please watch my video carefully

Step 6: Saving the sections and page as template for re-use (I am extremely sorry, I could not put all the actions into to words and pictures. So I insist you to watch the video. If I would try then it would become not less than 20 to 25 page with approximately 15000 words )

At almost at the end of the tutorial video you will learn how to save this as template for use with other pages. Also you will learn how to save the individual sections or the entire page as template.

Watch the video carefully to know how its done.

Subscribe my youtube channel If you like to support and encourage me make more such tutorials. See you all with another useful tutorial

himaghiri

himaghiri

Himaghiri Thanayan.N is the founder of HBN Infotech. He has great dreams and passion for Graphic Design, Web Design, CAD Design, Arts & Crafts, Science & Information Technology and Article Writing.

8 Comments

  1. hai mr Himaghiri.

    i use your code but a few litle thing can’t remove!!!

    how to remove all this page so this my site was blankpage (benayastore.com and my blankpage is benayastore.com/gallery)

    could you help me??

    best regards
    benaya

    1. Hi please add the below css code

      .entry-title {
      display: none;
      }
      .entry-meta {
      display: none;
      }
      .entry-footer {
      display: none;
      }

      Hope this solves the issue

  2. Hi,

    I also used the code and nothing has changed. I do have full width page, but all the other elements such as title, search, posts comments etc are still appearing on the webpage. Can you please help?

    1. Hi could you let me know when you are online. I could help you out with teamviewer. Mail your skype details to hbninfotech@gmail.com

      Thanks

  3. Hi could you let me know when you are online. I could help you out with teamviewer. Mail your skype details to hbninfotech@gmail.com

    Thanks

  4. Hi… is only on blankslate the css can be used. Is possible to use it in other theme

    1. HI, You may also use Generate Press Theme comes with a blank template. Watch this video tutorial for more details https://www.youtube.com/watch?v=BqpQhS8-chQ&t=47s

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.