• open panel

Weebly Page Layouts Described

 

May 16, 2012   Tags: , ,
Category: Site Management   25 Comments comments

Up until now, every page in Weebly had the same basic structure. That is because there was only one page type (index.html) for a theme and every page you add had the same layout.

With the introduction of new page layouts in Weebly, every Weebly theme comes with Four Standard Page Layouts: “Landing”, “Tall-Header”, “Short-Header” and “No-Header”. You can now choose different look for different pages. The one “index.html” is replaced by four page layouts.

New Page Types in Weebly Themes

Every Theme Comes with Four Standard Page Layouts. Optionally, you can create as many custom page types as you want.

Later in this article, we will discuss the use of Custom Page Layouts and how to create them. But first, take a look at the Live Demos of Standard Page Layouts in Weebly Themes. If your account does not show the new page layout, you may be using a previous version of the theme, or are using your custom theme. You can assign any page style (page type/layout) to any page. To do that, all you need to do is to highlight the page from “Pages” Tab, and then just click the type you want to assign to that page.

Let us take the example of the Justin 20 Theme (which we used for Free Weebly Themes) to illustrate the benefits of new page layouts in Weebly.

 

Landing Page Type in Weebly

Landing Page Type in Weebly

The Landing Page Type is best suited for your Home Page. Good for Branding, Great for SEO and made for Call To Action.

The Headline conveys the most important aspect of your website. The tag line is the lead for Call-To-Action. A Button intuitive enough to take your visitors to the right place.

Make best use of the Headline, Tag line and link in Call To Action Button. This is what the search engines are tracking. As far as possible, do not change this information. So, think ahead of what keywords you would like to rank for. Incorporate those keywords into the Headline and Tagline. Note that the link you place in Call-To-Action Button is given a higher priority by the search engines. This is the prime real estate for your site. Use it judiciously.

 

Tall Header Page Layout

Tall Header Page Type in Weebly

The Tall Header Page Layout in Weebly Themes is a best fit for Main pages (or) prime sections of your site like “Products”, “Services” etc. This Page Type uses a tall banner, giving you plenty of room for graphically representing your products or services page. This page can be used in creating a custom page type for slide headers and rotating banners.

 

Short Header Page Layout

Short Header page type in WeeblyThe Short Header Page Layout can be used for your internal pages or the pages in sub-menu that are part of a parent category. For example, this is a good choice to describe one of your products. The narrow header image can be used for product lead graphic without taking away the attention from the main product description that follows.

 

No Header Page Layout in Weebly

No Header Page Type in WeeblyThis type has no header banner image. It offers the maximum flexibility. If your page has other graphic elements or Video embeds, then a banner image could be distracting and conflicting. The No Header Page Type would be a better choice for those situations.

 

 

Here is How to Create Custom Page Layouts in Weebly

The Four Page Types provided by Weebly in its themes are a good start. But what if you need some of your pages to use the Nivo Slide Header for Rotating Banner ? You can create additional page types in Weebly Theme Editor (Design –> Edit Html/CSS).

Add Page Type in Weebly

Under the “Page Layouts”, you should see the four existing page types. Click “Add New Layout” to create an additional page layout. Choose “Other” page type and give the new page your own page name in the pop-up.

By default you will see a very basic content in this page type. This page has no layout or styling to it. If you want your page type closer to one of the four pre-defined pages, replace the contents of the new page type with your choice page. Now modify the page to suit your need.

As an example, if you would like to create Nivo Slider page, copy contents of tall-header-page.html to your new custom page. Then modify the custom page to use the slider instead of the wsite-header. Save your changes when done and you should see the new page layout automatically added to list of page types under “Pages” tab.

[Update: "Weebly Page Types" is renamed to "Weebly Page Layouts"]

Related posts:

  1. Weebly Flexible Footer – Create Drag & Drop Content Footer
  2. How To Hide Weebly Menu Navigation Bar
  3. Weebly Top Bar: The Hidden Potential
  4. How to Edit Html and CSS Style Sheet in Weebly
  5. Weebly Theme Upgrades
 
→ ←
Raju Nunna

About Raju Nunna

Raju Nunna is the Founder of "Weebly Forums"

25 Responses to “Weebly Page Layouts Described”

  1. Hi!

    Thanks a lot. Good job like always!

    Just a question:

    Is there a way to make 2 separate landing page with different headlines, tag lines and links?

     
    • Daniele
    • May 17, 2012 at 5:34 pm
    • Reply

    • Absolutely. Just add a new page type, say “Landing 2″. Copy all the contents of “Landing Page Type” into it. Now change the Headline to “Headline 2″ etc from the “Banner” part of it.

      [Note: When you switch themes, the Headline 2 etc does not propagate. You can achieve what you are looking for. But you should know its impact. Unless the new theme uses the exact same tags, those fileds do not propagate. Weebly has made the "headline" and "headline-paragraph" consistent across all themes.]

      <div id="banner-right">
        <h2>{headline:text}</h2>
        <p>{headline-paragraph:text}</p>
            {action:button}
</div>
       
      • Raju Nunna
      • Raju Nunna
      • May 18, 2012 at 1:50 am

  2. Hi, I dont know how to create a Landing page that have a sign up Button. can show me a step by step procedure?
    BTW! I successfully Install my NivoSlider
    http://messyblog.weebly.com
    Thanks again!

     
    • Adminmessyblog
    • May 20, 2012 at 1:12 am
    • Reply

  3. Hi! I’m working on a website for my organization and I cannot access the new themes with different page options. You mentioned that it may be that I didn’t active Beta. How do I go about doing this?

     

    • I’m working on the Designer platform so is there any chance that this could be affecting my experience as well? I feel as though I am severely limited in what I can “quickly” do versus what I need to do with custom html or CSS. I found that I can add page types only if I create “my own theme” even if I’m using a current theme which you are saying has been updated with the different page options. Please help.

       

    • To activate the beta, you need to login and visit

      http://weebly.com/theme-beta

      Beta is not available for Designer Paltform.

      I did not understand the other part of your question. Can you please post it with specifics in the Forums ?

       
      • Raju Nunna
      • Raju Nunna
      • May 25, 2012 at 2:49 am

  4. Do you know when/if this will be made available for the Designer platform?

     
    • Tiffany
    • May 25, 2012 at 9:28 am
    • Reply

    • My guess: As soon as Beta is complete.

       
      • Raju Nunna
      • Raju Nunna
      • May 25, 2012 at 10:09 am

  5. I’m so confused. I’m trying to add custom page with no header and photo as background and menus or at least text layered over it. No other content. I am able to add to index but I am not seeing anything other than my Home page (minus elements) in preview (even tho I have assigned page layout to “New Page” in Pages. Am I missing something here. Exactly how do I assign this? Why does it seem to be effecting all of my other pages and lastly I’m not seeing updated code.
    I have customized CSS on this site.
    Thank you-
    Callie

     
    • Callie
    • May 31, 2012 at 3:33 pm
    • Reply

    • Hi Callie,

      This is a loaded question. Can you please use the forums so each of your queries can be addressed separately. If possible, please provide the URL of the site you are referring to.

       
      • Raju Nunna
      • Raju Nunna
      • June 1, 2012 at 2:32 am

  6. Can you please tell me how can I customize a SPLASH PAGE in WEEBLY??

     
    • saloni
    • June 5, 2012 at 11:26 am
    • Reply

    • Creating a Splash page is no different from any other page. It requires CSS/Html skills to create one. Except for the tags like {menu} {footer} etc, it is like designing websites for static pages.

       
      • Raju Nunna
      • Raju Nunna
      • June 6, 2012 at 11:03 am

  7. I want to have a completely different look and layout for each page on my website including a different body background. I’ve tried creating a custom page type but the body background is retained from the original theme css. Is there a way to create a second css and assign it to my new custom pages?

     
    • Alastair
    • June 12, 2012 at 10:22 pm
    • Reply

  8. what is designer platform? btw i dont see any option for me to put the facebook, twitter etc thingy for the top of my page and also theres no option for me to choose which layout i want at the “pages” tab! please help! i choose another theme it has it but my main theme doesnt!

     

    • Designer Platform is a white label reseller program. Read more about it here.

      If you do not see the social icons, or not see different page types, you must be using a custom theme or might have edited the original theme using Edit HTML/CSS.

      The new weebly features do not automatically apply to custom themes or third party themes. They apply only to standard weebly themes. If you have purchased your theme for a third party provider, please check with them for any updates.

       
      • Raju Nunna
      • Raju Nunna
      • June 17, 2012 at 11:21 pm

  9. Is there any way to apply a certain page layout for all pages? I have a Weebly site that has many pages and I want them all to be no-header except for the homepage. Any ideas?

    Frostee,

     
    • Frostee
    • August 4, 2012 at 7:18 am
    • Reply

  10. Is there any way to hide the page types list (on the manage pages screen) (not permanantly) because on my (small) screen I cant see the buttons below it, and cant scroll because the position is fixed (so page list scrolls)?

     

    • Haven’t hit it yet. Had about 10 page types and no issues. Try a different browser and see. How many page types do you have.

       
      • Raju Nunna
      • Raju Nunna
      • August 8, 2012 at 6:55 pm

  11. My weebly chosen theme does not show on the published website.
    Why and what can I do?
    It’s a standard one, the first of the themes, and all I changed is the picture.
    Help!

     
    • bluebottle
    • September 4, 2012 at 4:10 pm
    • Reply

  12. How can I get the images I use on landing pages and headers to show up on Facebook when I share the pages? Whenever I reference my weebly pages, the only image FB lets me choose is a botched version of the logo. This is starting to create a bigger problem for me – for example when trying to use a FB comments box on a page which only has 1 image in the landing template. e.g. http://www.graciasfoundation.org/gratitude-journal.html

     
    • Amy
    • October 23, 2012 at 10:39 am
    • Reply

  13. hmm, how to add different background on the layers?

     

  14. Hi,

    I’m looking to increase the width of all of my page headers (landing, splash, tall header, short header, no header) to align with the rest of my site, but haven’t been successful.

    Can you let me know how I can do this?

    Thanks in advance for your help!

     

Leave a Comment

CAPTCHA Image
*

Weeblyforums.com is neither affiliated with nor endorsed by Weebly
© 2013 Weebly Forums, a CrossWeb.ca venture