• open panel

How to Create Side Bar for Weebly Pages

 

Side bars are a very effective usability feature of a web page. In Weebly, you can create side bars for any page using the ‘Two Column Layout’ element. You can use the side bar to link to social networks, place advertisements and other pointers. Following steps describe how we implemented side bar for TeluguMahal weebly site. This is also a good example of using Two Column element inside another two column element.

Side bar in weebly using two column layout element

Use Two Column Layout element and adjust width of column to size

To incorporate side bar, Drag-and-drop a two column layout element into place. Then adjust the column width to a size that you like the side bar to be by simply dragging the centre divider left or right. Now drag and drop any elements in to the sidebar column. You can rearrange the elements in the side bar simply by moving the elements to the place. Once you have all the elements in the sidebar the way you want, you can copy the entire two column layout element to other pages by clicking the green arrow button at top right corner of the element.

Copy element

Copy the Two Column lay out element to other pages after adding side bar contents

This will copy the two column layout element along with all of the elements added to the side bar. If you need the other pages to display elements in a different order, you can change it without effecting other pages. Changes made to a page remain with that page only. If there are any elements that are not applicable to other pages, you can delete them in the respective pages.

[Update: In the comments below, Bill Montana has a decent description about how to deploy the new sidebar tag. It has details of CSS and changes to html required to create a sidebar that is consistent across all pages. Thanks to Bill for keeping us posted. Example of consistent side bar is at chsmate.weebly.com]

 
Raju Nunna

About Raju Nunna

Raju Nunna is the Founder of "Weebly Forums"

35 Responses to “How to Create Side Bar for Weebly Pages”

  1. Hi Raju Nunna,
    I have been searching endless for ways to modify my weebly website. Then I found your useful website. Thanks!

    I tried your way of adding a sidebar on all my webpages, and it worked.

    But it will be clear that in the future I will have to change some elements in the sidebar (made via the 2 column way you described above). Then I'll have to change them for every page again.

    Could you please help me out in providing a CSS code so that I only have to modify the content of the sidebar once, and that it get's modified on every page?

    I know a bit of CSS and have been trying, but no results so far. I believe it will work a bit like the footer CSS code, as that one gets shown on every page as well.

    Raju, thanks for looking into it for me!

    Regards,
    Rene

     
    • Hi Rene, Weebly is expecting to release some new features and templates in a week or so. The new themes should have the sidebar functionality built in which will make the sidebar consistent across all pages. That should take care of updating elements in sidebars automatically for all pages.

      We will wait and see if the sidebar functionality provided by Weebly is adequate. If we think it falls short in some ways, we will address it and publish the css for people to use.

       
      • Raju Nunna
      • Raju Nunna
  2. Rather than wait, this is how I did it…

    The #content id needs to be floated left. An id for the sidebar needs to be added and has to be called #sidebar-content. It should also be floated. I floated it left so it would butt up against #content. The footer will also want to float unless you add clear:both to it. A div for sidebar-content needs to be added within the content-wrapper div in the HTML for the page.

    Here are the steps.

    In CSS:
    1. Change width (reduced by sum of width of sidebar and amount of padding-right) and add float and padding-right to #content:

    #content {
    padding-top:10px;
    padding-bottom:30px;
    min-height:200px;
    width:740px;
    float:left;
    padding-right:10px;

    2. Create #sidebar-content:

    #sidebar-content {
    background-color:#fff;
    width:210px;
    min-height:200px;
    margin: 0pt auto;
    float:left;
    padding-top:10px;
    padding-bottom:30px;
    }

    3. Added clear:both to #footer since both #content and #sidebar-content are floated:

    #footer {
    background: transparent url(footer_background.gif) repeat-x center top;
    background-color:#ececec;
    margin-top:30px;
    padding-top:20px;
    clear:both;
    }

    In HTML:
    Added sidebar-content div within content div:

    <div id="content-wrapper">
    <div id="content">{content}</div>
    <div id="sidebar-content">{sidebar:content}</div>
    <div id="content-bottom"></div>
    </div>

    And that's it! There may be differences from one theme to the next. However, the concept should still apply.

    Please forgive me if I have used incorrect terminology in places. I'm new to CSS, but learned quite a bit in the hours I played with this.

     
    • Nice post Bill. Very nice description as well. Haven't yet played with the new tags.

       
      • Raju Nunna
      • Raju Nunna
    • Used the instructions at the top of the page, thank you! However this disrupts the footer (I’ve also tried other footer formats), as anything I add to the footer ends up in the sidebar. I’ve used clear:both.
      Any help with this would be appreciated!

       
      • Nicole
  3. how can I use bill's code to have the sidebar on the left side? Or does it go on the left. I know it floats left, but both content and sidebar float left. which is on the far left side?

     
    • Ben
    • Reply
    • I think you would just reverse their divs in the HTML, listing the sidebar-content dive before the content div.

       
    • I just confirmed my hunch and it is correct. Just reverse the divs. The one called first executes first, etc.

       
  4. I have been searching best hosting online websit my weebly website. Then I found your useful website. Thanks!

    I tried your way of adding in go to next page link, i don't know how to find any my webpage link to i put in my webpage next button,

    example :
    any time any user click next page button than transfer
    next page how can i put this type of link to go the next page how pls help me…

     
    • ravi shida
    • Reply
    • Hello Ravi, Can you please post it in Forums ? Your question is not related to the article above. It is going to get deleted when we do the clean up.

       
      • Raju Nunna
      • Raju Nunna
  5. Can anyone help with making a sidebar for all of my categories. Customers are telling me that it is hard to find what is on the site. The Categories do appear for a few seconds on top of the pages but then disappears to the other categories.

    Some buyers tell me that it is hard to get to the other pages.

    Please email me if you have a solution.

    Your Time Is Valued!
    Cassandra

     
  6. where to place the
    {content}
    {sidebar:content}

    ??????????????

     
  7. i use this method but it leaves behind the border or somekind of box .how to remove that??

    you can see here http://mastiallover.weebly.com/indian.html

    plz reply if you have solution

     
  8. I like this code much better than using the column builder. I entered it and it worked okay, then I entered the HTML and things when south. Where exactly do I put the HTML? and is there anything that I need to delete in the html for the code to work properly? Seems to me like there should be.

     
    • JXL
    • Reply
  9. Would it be possible for you to come up with a separate footer area where element features could be dropped into?

     
  10. Hey, I’m trying to create a sidebar using bill’s code. No matter what I’ve tried, the sidebar either ends up above, below, or underneath (i think) the content of the site. I’ve followed the steps exactly and can’t seem to get it.

    Any help? Thanks.

     
    • chelsea
    • Reply
  11. Hi Folks, can anyone help me out here – I want to create a vertical divider to seperate the sidebar, I have seen the video on here, but when I add the line, rotate it, and try to drag it down. It expands outwards and looks messy. What file type does the line need to be and can I just grab the line from google images? Any help would be much appreciated.

     
    • AronPaul
    • Reply
  12. where to place this ?????????
    {content}
    {sidebar:content}

     
    • ADKitz
    • Reply
  13. Thanks Bill for the post, I simplified your code, and it totally works for me, this is what I did:
    Under CSS, I find my #content ID, so I edited it:

    content {

    min-height: 400px;
    padding: 25px 0;
    width: 700px;

    then follow by the #sidebar-content id, and change a few things:

    sidebar-content {

    background-color:#fff;
    width:210px;
    min-height:200px;
    margin: 0pt auto;
    float:right;
    padding-top:25px;
    padding-bottom:30px;
    }

    In html:
    I add this div right above content div

    {sidebar:content}

    I hope this post will help some of you! :)

     
    • the div doesn’t show when I typed it here, so please add “<” in the beginning of both “div”

      div id=”sidebar-content”>{sidebar:content} /div>

       
      • Daphne
  14. I want the sidebar to appear on all pages except one.Please tell me how to do this.

     
    • Rajat
    • Reply
    • You need edit the theme to create a Flexible Content Area for the side bar. Check the Flexible Footer topic for some ideas on how to include flexible content area.

       
      • Raju Nunna
      • Raju Nunna
  15. good thanku

     
    • santhosh kerala
    • Reply
  16. i dnt understand can u please upload video of it plz

     
    • vishrajv
    • Reply
  17. Does this work if I’m already using a custom theme? Basically all I want to do is to add the twitter badge and facebook (on my home page) and put it on the sidebar so that it will appear in all of my pages.

    I tried using the code, but once I entered #content and #sidebar-content, the photo at the top disappeared. Then…the html code, put it under content (I think) and all my formatting got messed up….

     
    • You can certainly do it with any custom theme. The difficulty is that sidebar setup varies a lot depending on how the theme layout is defined. Width, floats, footers etc all come into play.

       
      • Raju Nunna
      • Raju Nunna
  18. I am trying to create a static sidebar on a site that I’m currently working on using the info Bill provided. I’ve added the CSS, but I’m not sure where to put the HTML. When I go to ‘Edit HTML/CSS’, I only see CSS…no HTML. Am I missing something?? I see that by adding the CSS, the space for the sidebar has been created, but I seemingly have no way to add content to it. I’m guessing this is because I’m missing the HTML piece of it. Can anyone help me out here?

     
    • Shannon
    • Reply
    • Sidebars depend a lot on the theme. As per the html, you will find four files ending in .html once in theme editor (Design -> Edit Html/CSS) You can pick a page layout to add a side bar. If you need side bar on all four layouts, you will need to edit all four .html files there.

       
      • Raju Nunna
      • Raju Nunna
  19. Hi,can anyone tell me where to put html code?

     
    • gamer.tone
    • Reply
  20. I would like to use multple “contents” to have different backgrounds in only one page. Is it possible? To simulate parallax effect. Please help me.

     
    • Cristian
    • Reply
  21. Howdy all,
    For those on this thread struggling with CSS & HTML, I’d recommend checking out http://www.fiverr.com. There you can find freelancers who do “gigs” for FIVE BUCKS. They have a few who specialize in Weebly, and tons who specialize in HTML/CSS. They could probably tweek what ya need for mega cheap. I’ve used FIVERR twice for Photoshop edits and to clean up my Nav. bar in Weebly, and both times was totally satisfied and saved lots of my time.

     
    • canuckted
    • Reply
  22. I would like to delete a category. How do I do that?
    Thank you!

     

Leave a Comment

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

Facebook

Follow WeeblyForums on Facebook
%d bloggers like this: