Weebly Tutorials

How To Add A Sidebar On Your Weebly Website

2012-12-02T07:37:00.003-08:00

On this post am gonna teach you how you can easily add a sidebar (my way) using the "multiple column" element. This trick is very elementary but still one of the valuable elements on weebly editor tools. Since weebly doesn't have a built in sidebar / column except for the blog pages which has a fixed sidebar for additional elements. You can always set how many columns you wanted (max 5 columns). In this post i used 3 columns for demo purposes, you may want to read on how you can add a divider shadow within the multiple columns.

To get started,

1st step,

Log in to your weebly dashboard,
Click EDIT (redirect to weebly editor tools),
Locate ELEMENTS tab,
Under the BASIC category, choose MULTIPLE COLUMN,
Simple Drag and Drop it anywhere you desired,
And set the column to 3 or depends on your needs,
Drag the arrows to get your sidebar look,
See screenshot below to visualize,

Now, You can start dragging elements to your new sidebar.

I hope this basic tutorial for newbies helps everyone of you to have an idea to do more tweaking on your weebly websites.

How To Add Social Buttons On Your Weebly Website

2012-11-29T07:15:00.000-08:00

Some may think that installing social plugins might be impossible on weebly websites, but guess no. Actually this can be done by anyone without so much knowledge on techy stuffs. This social buttons contain Facebook Share, Twitter Tweet, Google+ , Pinterest and more...This will allow your audience to easily share what they love most from your website and growing your readership.

To get started,

Step 1

Log In to your weebly dashboard,
Click Edit,
Go to Settings tab,
On the site settings, click the Search Engine Optimization tab
And locate header Code,

And simply inset this code,

<script type="text/javascript">var switchTo5x=true;</script><script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script><script type="text/javascript">stLight.options({publisher: "24f87c4c-9733-4915-a867-eaf2beb176cc"});</script>

Click Save.

Step 2

Go to Elements tab,
Choose Basic >> Custom HTML,
And simply insert this code in it,

<span class='st_facebook_vcount' displayText='Facebook'></span><span class='st_twitter_vcount' displayText='Tweet'></span><span class='st_pinterest_vcount' displayText='Pinterest'></span><span class='st_sharethis_vcount' displayText='ShareThis'></span>

NOTE: Social Buttons may not be visible when you inserted the code.

Final step, Click Publish and see it working perfectly on your website.

How to add a Vertical And Horizontal Divider Shadow On Weebly

2012-11-29T03:03:00.002-08:00

Since weebly has a drag and drop feature it doesn't have a built in divider except on the blog page. But most of us wants to have separation between the content and other stuffs on the sidebar just to make it more precise and clean. Am giving you a very easy trick yet powerful one to achieve a professional look and clean design for your weebly website. This shadow divider can be use Horizontally and Vertically still depends on your needs.

To get started,

Log In to your Weebly Dashboard >> Click EDIT >>
Basic Tab >> Drag "Multiple Column" element >> and Set it to 3 Columns
And simply drag the "Picture" element" and position it in between the three column,
Just drag the column to squeeze the shadow separator To achieve desired size and look.
You can also resize the image by dragging the red spot when you hover the image,
See screenshots below:

Weebly Tutorials

How To Add A Sidebar On Your Weebly Website

How To Add Social Buttons On Your Weebly Website

Step 1

Click Save.

Step 2

How to add a Vertical And Horizontal Divider Shadow On Weebly

Vertical Shadow Divider image url's

Horizontal Shadow Divider image url's