Results 1 to 4 of 4
Like Tree1Likes
  • 1 Post By bonshupp

Thread: Finally! How to Create a Full-Width Page (step-by-step tutorial with screenshots)

  1. #1
    Thread Starter
    Expired Customer bonshupp's Avatar
    Join Date
    Sep 2013
    Location
    United States
    Posts
    219
    Thanks
    2
    Thanked 25 Times in 13 Posts

    Finally! How to Create a Full-Width Page (step-by-step tutorial with screenshots)

    I needed one page to be full width for a custom landing page we are creating.

    I've seen numerous thread throughout Vantage but they've either been abandoned, or don't include ALL the steps I needed to make it work.

    Here was how I did it:

    1. Download page.php

    /----------------------------------------------------------------------------------------------------------------------------------/

    2. Create a copy and rename file to page-full-width.php

    /----------------------------------------------------------------------------------------------------------------------------------/

    3. Add a template name to the top of the file. See attached screenshot titled "A-Add-Template-Name.png" and add what's in blue font.

    /----------------------------------------------------------------------------------------------------------------------------------/

    4. Remove the sidebar from the PHP code. See attached screenshot titled "B-Remove-Sidebar.png" and delete what's in struck out red font.

    /----------------------------------------------------------------------------------------------------------------------------------/

    5. Save your changes to the new PHP file and upload to your child theme (ideally).

    If you are not using a child theme, you can place this file in the parent theme as well.

    Either way, make sure to take note of the steps you've done, so you can have this handy for future needs/changes.

    (TIP: print this post to PDF & save screenshot attachments for a quick reference when needed)

    /----------------------------------------------------------------------------------------------------------------------------------/

    6. Create a new page via Pages > Add New (or use an existing page).

    Then go to WP Dashboard > Pages > All Pages > and hover over the page and click "Quick Edit".

    See attached screenshot titled "C-Quick-Edit.png".

    /----------------------------------------------------------------------------------------------------------------------------------/

    7. Then under 'Template' drop down menu select "Full Width Custom Template".
    See attached screenshot titled "D-Quick-Edit-Select-Template.png".

    /----------------------------------------------------------------------------------------------------------------------------------/

    8. Now take a look at your new page. Yikes! It's pretty ugly with an empty sidebar and large vertical line.
    See attached screenshot titled "E-Issue-With-Line-and-Sidebar.png" to see what I mean.

    Let's fix that with a little CSS...

    First, we need to get the Page ID Number. Go to your page editor and look in the address bar.
    See attached screenshot titled "F-Get-Page-ID.png" so you know what I mean.

    Now that we have your Page ID Number, add the following into your style.css file:
    (you will most likely need to make adjustments to color)

    /* ADJUSTMENTS FOR FULL WIDTH CUSTOM TEMPLATE */
    .page-id-3558 #content-mid {
    top: 15px;
    background: #FAFAFA;
    margin-top: -38px;
    }

    .page-id-3558 #content-inner {
    padding-right: 0;
    background: #FAFAFA;
    }

    Things should be looking better now.

    See attached screenshot title "G-Looking-Much-Better.png" to see the example.

    /----------------------------------------------------------------------------------------------------------------------------------/
    /----------------------------------------------------------------------------------------------------------------------------------/

    BONUS:

    For us, we wanted a custom landing page so we can focus on email opt-ins.

    We wanted to hide the header, footer, page title, WP admin bar and more (to make it a true landing page).

    To see what I mean, see the attached screenshot titled "H-Full-Width-Landing-Page.png"
    (note: the opt-in is not placed on page yet. This is just for example purposes to see how "clean" the layout is.)

    My full CSS is below if you'd like swipe it and create your own page-specific landing page(s) as well:
    (think email opt-ins, sales pages, thank you pages, etc.)

    Enter this in your style.css file.
    (another tip: Make sure save all custom CSS inside of a text file for backup)

    /* ================================================== = */
    /* LANDING PAGE #1 */
    /* ================================================== = */

    .page-id-3558 #masthead {display: none;}
    .page-id-3558 #main-navigation {display: none;}
    .page-id-3558 #breadcrumbs {display: none;}
    .page-id-3558 #footer {display: none;}
    .page-id-3558 #post-footer {display: none;}

    /* HIDE H1 PAGE TITLE - WHICH HIDES ALL H1s... BUT SOLUTION IS BELOW - SEE "H2" */
    .page-id-3558 .page H1 {display: none !important;}

    /* H2 */
    .page-id-3558 H2 {font-size: 40px; line-height: 40px !important;}

    /* ADJUSTMENTS FOR FULL WIDTH CUSTOM TEMPLATE */
    .page-id-3558 #content-mid {
    top: 15px;
    background: #FAFAFA;
    margin-top: -38px;
    }

    .page-id-3558 #content-inner {
    padding-right: 0;
    background: #FAFAFA;
    }

    /* REMOVE CUSTOM BACKGROUND IMAGE AND CHANGE BACKGROUND COLOR SO ALL IS THE SAME */
    .page-id-3558 {background: #FAFAFA !important;}

    /* HIDE WP-ADMINBAR */
    #wpadminbar {display: none;}

    [----------------------------------------------------------------------------------------------------------------------------------]

    I hope this tutorial was helpful for you.

    If you have any questions, let me know, and if I will do my best to help

    -Matt
    Attached Images Attached Images
    guiadelamujer likes this.

  2. The Following 10 Users Say Thank You to bonshupp For This Useful Post:

    blubber (August 11th, 2014), boutwell (July 24th, 2014), deanokimoto (December 31st, 2014), enrique_traun (April 5th, 2015), northampton (October 14th, 2014), simonwhitehead (April 23rd, 2016), tallis1970 (January 26th, 2016), tbase (July 16th, 2014), thesyndicate (July 28th, 2014), xteq (November 13th, 2014)

  3. #2
    Expired Customer guiadelamujer's Avatar
    Join Date
    Aug 2015
    Posts
    110
    Thanks
    10
    Thanked 9 Times in 7 Posts
    You must be an AppThemes customer and logged in to view this response. Join today!

  4. #3
    Thread Starter
    Expired Customer bonshupp's Avatar
    Join Date
    Sep 2013
    Location
    United States
    Posts
    219
    Thanks
    2
    Thanked 25 Times in 13 Posts
    You must be an AppThemes customer and logged in to view this response. Join today!

  5. The Following User Says Thank You to bonshupp For This Useful Post:

    guiadelamujer (January 20th, 2016)

  6. #4
    jogfly's Avatar
    Join Date
    Jun 2010
    Location
    United States
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Improving slightly...

    You must be an AppThemes customer and logged in to view this response. Join today!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. Replies: 1
    Last Post: July 23rd, 2013, 04:07 AM
  2. How to create a full width page template for my jobroller website
    By sol8 in forum JobRoller General Discussion
    Replies: 17
    Last Post: February 18th, 2013, 08:33 PM
  3. Replies: 7
    Last Post: July 31st, 2012, 02:42 PM
  4. Replies: 2
    Last Post: June 7th, 2012, 12:47 AM
  5. [SOLVED] classipress 3.1.4 new ad going from step 1,to step 2 and back to step 1
    By mdcomp in forum Report ClassiPress Bugs
    Replies: 3
    Last Post: September 12th, 2011, 07:54 AM