Weebly Top Bar: The Hidden Potential

If I were to suggest one single most important article that every Weebly user must read, then this is it. The Top Bar area gets the maximum amount of attention from your visitors. This is also the area that brings in maximum click through revenue for your Advertisements. Check the Google Heat Map for more information on Ad Placement. Whether for advertisements or for “Call To Action” items, this is the prime area to gather your visitor’s attention. In this article, we will use the SiteShowCase Blog to illustrate how you can add a Persistent Top Bar to Weebly Blog (or) Weebly Pages (or) Both as a drag & drop area.



We will also show you how to restrict the Top Bar to a selected set of pages only. If you have seen our article about creating Flexible Footer, this goes along similar lines. If you are using a theme without a banner, this will actually work as a Drag & Drop Header. Since it expands dynamically depending on the content added, your banner height can be precise to the page need.Before going into the details, notice the following aspects of the top bar of SiteShowCase.Weebly.com/blog :

1. The Top Bar has its own background and stands out from the rest of the content.
2. There are multiple elements: Picture, Text, Social Icons.
3. The Top Bar stays the same for Blog Pages and Blog posts. Click on a Blog post title and the top bar remains as is.
4. Top Bar does not appear for other regular pages.

This can be achieved in three parts:

1) Defining the style in CSS

2) Including the element in the page layout (index.html, or landing.html, tall-header.html, short-header.html or no-header.html)

3) Dragging & Dropping the Elements into the new top bar content area.

• Upload the background image via “Edit HTML/CSS -> Add New Files“. We named this file topbar-bg.jpg
• In main-style.css we add the following style code.

#topbar{ background: url(topbar-bg.jpg); }

#topbar p{ color: red; font-size: 21px; font-family: "Georgia"; font-style: italic; }

Here we are telling the topbar to use the background image “topbar-bg.jpg” and repeat it horizontally and vertically (which is the default when “repeat” is not explicitly stated)

The “topbar p” is where we define how a paragraph within the Top Bar area should look like. Of course, you could always override it by changing the colour of paragraph element. However, if you want precise control over font-size, you better define it here. The size adjustment from paragraph element could be too big or too small.

This is really simple. All you need to do is to add the following line to the page lay out html file just above the div that has {content}

<div id="topbar">{topbar:content global="false"}</div>

The global=”false” is the part that states if the elements that we drag and drop into the top bar area be persistent or not. In case of SiteShowCase.weebly.com, we wanted the top bar to appear only for the blog but not for the rest of the pages. So we chose global=”false”. However, if you want the same top bar content to be persistent across each and every page, simply remove the global=”false” from the above line.

And now you are ready for the cool part, dragging & dropping !!

Note that you do not need to add it to all page layouts. You can add to the ones you like to use.

Go to the Weebly website editor and select your blog page. All you need to do is drag what ever elements you need into this area. In our case, we used the multiple columns elements to create a layout and then used pictures, paragraphs.

Top bar layout for Site Show Case Blog


For the social icons, we just used another multiple columns elements and placed images with links to our facebook page etc. If you would like to add country flags to take your visitors to a language page corresponding to it, you may drop a gallery element at the top of the top bar which makes it intuitive for your visitors.

Note that the top bar itself is available in all the pages but the content in the top bar will stay with just the page it is used in because we used global=”false”. Even though the bar may be slightly visible in the editor window for other pages, its height would be set to zero there upon publishing.

For a little advanced users, following is something you can do for multiple top bars (if you are new, you can skip the rest of the article for now):

What if you want one kind of top bar for Blog but a different persistent top bar for regular pages ? You will need to create a new page type to be used for your regular pages because your blog pages are going to use index.html as its base. You can not change the blog base. However, you have the choice of selecting any page type for your regular pages. So, create a new page type, say non-blog-top-bar.html, and copy all the content from index.html into the new page created. As usual, define a new style for new top bar in main-style.css. Then update your non-blog-top-bar page to include this second top bar without global=”false”. Now, apply the new page type for your regular pages. This will get you one kind of top bar for Blog pages and a different one for your regular pages.

http://weeblyforums.com/2012/04/weebly-top-bar-the-hidden-potential/