Add a Calendar
Google Calendar is an easy, robust and free way to add a calendar of events to your site. You manage your events directly through Google's interface and the changes are automatically added to your calendar.
Start by signing up for a Google Calendar account, if you don't already have one. You can do that here.
Once you get up and running with the calendar (adding events and what have you), you can add it to your site with these steps.
In the calendar list on the left, click the down-arrow next to the appropriate calendar (you can create more than one) and select the Calendar Settings option.
Go to the Share this Calendar tab and check the box to "Make this calendar public." Be sure to Save this change after you make it.
Then select the Calendar Details tab and go to the Embed this Calendar section.
Highlight and copy the provided embed code. This is what you'll use to add the calendar to your site. Note that, while you're here, you can also use the "Customize" link above the code to make changes to the look and size of the calendar.
Back in our editor, drag the Custom HTML element to a page.
Paste the calendar embed code into the element
Click out of the element to see your calendar.
Be sure to Publish to push the Calendar to your live site. Now, any time you add or change an event in Google, this will automatically show up on your calendar.
Start by signing up for a Google Calendar account, if you don't already have one. You can do that here.
Once you get up and running with the calendar (adding events and what have you), you can add it to your site with these steps.
In the calendar list on the left, click the down-arrow next to the appropriate calendar (you can create more than one) and select the Calendar Settings option.
Go to the Share this Calendar tab and check the box to "Make this calendar public." Be sure to Save this change after you make it.
Then select the Calendar Details tab and go to the Embed this Calendar section.
Highlight and copy the provided embed code. This is what you'll use to add the calendar to your site. Note that, while you're here, you can also use the "Customize" link above the code to make changes to the look and size of the calendar.
Back in our editor, drag the Custom HTML element to a page.
Paste the calendar embed code into the element
Click out of the element to see your calendar.
Be sure to Publish to push the Calendar to your live site. Now, any time you add or change an event in Google, this will automatically show up on your calendar.
Add a Map to Your Site
If your business or organization has offices that site visitors can visit, it's helpful to include a map to that location to your site. And we have a built-in Google Maps element that helps you do just that.
Start by dragging the Maps element to a page on your site. It's under the Basic category of elements.
Click on your map to open up the toolbox. You can make a number of changes from here.
The most important thing to change is the address. Enter your own address as Street Address, City, Country, like so:
48 Hoxton Square, London, UK
This will update the map to the address you've entered.
If you place a map inside the columns element, it will automatically adjust to the width of the column you place it in. This can be useful for writing directions directly next to the map.
48 Hoxton Square London N1 6PB
Open: 10 – 6pm Tuesday – Saturday
To access the Hoxton Square site via Underground:
Old Street Station (Northern Line)
Hoxton Station (Overground)
To access the gallery via Bus:
The following buses stop near the gallery:
21 35 43 48 55 67 76 141 149 205 214 242 243 271 and 394
And you can adjust the height of the map using the Width & Height option in the toolbox.
If you feel at all limited by our built-in Maps element, you're also more than welcome to embed a map directly from maps.google.com (or a similar mapping tool). Create the map in Google and then click the "Link" option in the upper left of the map.
Copy the code they provide you from the "Paste HTML to embed in website" field.
Then paste this code to your site using our Embed Code Element. Your map will show up as soon as you click out of the element.
Start by dragging the Maps element to a page on your site. It's under the Basic category of elements.
Click on your map to open up the toolbox. You can make a number of changes from here.
The most important thing to change is the address. Enter your own address as Street Address, City, Country, like so:
48 Hoxton Square, London, UK
This will update the map to the address you've entered.
If you place a map inside the columns element, it will automatically adjust to the width of the column you place it in. This can be useful for writing directions directly next to the map.
48 Hoxton Square London N1 6PB
Open: 10 – 6pm Tuesday – Saturday
To access the Hoxton Square site via Underground:
Old Street Station (Northern Line)
Hoxton Station (Overground)
To access the gallery via Bus:
The following buses stop near the gallery:
21 35 43 48 55 67 76 141 149 205 214 242 243 271 and 394
And you can adjust the height of the map using the Width & Height option in the toolbox.
If you feel at all limited by our built-in Maps element, you're also more than welcome to embed a map directly from maps.google.com (or a similar mapping tool). Create the map in Google and then click the "Link" option in the upper left of the map.
Copy the code they provide you from the "Paste HTML to embed in website" field.
Then paste this code to your site using our Embed Code Element. Your map will show up as soon as you click out of the element.
Social Media Icons (Facebook, Twitter, Pinterest, Google+)
Each theme includes social media buttons that are designed specifically for that theme. These buttons appear in the upper right of the theme and can also be added anywhere else on the site by using the Social Icons element found under the More category of elements. They can be used to link to a Facebook fan page or profile, a Twitter feed, Google+, Pinterest, and many other services.
Scroll over the buttons to edit them. Either type or copy / paste a link to the appropriate page on Facebook, Twitter, etc. Delete any icons you don't want to use by clicking the "x" button to the right of the field (deleting an icon removes the button in the editor, but note that leaving the link field blank will make any of the icons disappear on the published site) and drag links up / down using the movement controls on the left to change the order in which the icons appear.
Click the Add More button to access more icons from more providers.
And that's all you need to do. These icons provide an easy way for site visitors to access your social media profiles and pages from any page of your site.
If you want to turn these buttons off completely, go to the Design tab and use the Social Icon On / Off switch to toggle them on or off. If you want access to these buttons but don't see them on your site, the best thing to do is go to this same section and make sure they're turned on.
And you can also drag these buttons to various pages and sections of your site using the Social Icons element under the More category.
Scroll over the buttons to edit them. Either type or copy / paste a link to the appropriate page on Facebook, Twitter, etc. Delete any icons you don't want to use by clicking the "x" button to the right of the field (deleting an icon removes the button in the editor, but note that leaving the link field blank will make any of the icons disappear on the published site) and drag links up / down using the movement controls on the left to change the order in which the icons appear.
Click the Add More button to access more icons from more providers.
And that's all you need to do. These icons provide an easy way for site visitors to access your social media profiles and pages from any page of your site.
If you want to turn these buttons off completely, go to the Design tab and use the Social Icon On / Off switch to toggle them on or off. If you want access to these buttons but don't see them on your site, the best thing to do is go to this same section and make sure they're turned on.
And you can also drag these buttons to various pages and sections of your site using the Social Icons element under the More category.
Add a Facebook Like (Share) Button to Your Site
Adding a Facebook Like button to your site is a great way to let visitors share your site with their friends.
Get started by going here:
http://developers.facebook.com/docs/reference/plugins/like
There is a form on this page that you'll use to setup your like button.
First, enter the address of your site. If you leave this field blank, people who click your like button may end up liking something else entirely.
If you have a Facebook Fan Page and prefer visitors Like that page as opposed to just Liking your site, enter the address of that page instead. The Weebly Facebook Fan page is located at http://www.facebook.com/weebly, so if we wanted visitors to become our Fans, we'd enter that address in the box instead of entering the weebly.com address.
Make sure the Send Button option is turned off / unchecked. This is a new option from Facebook that we don't currently support.
Then select your layout style. This will change the example layout shown to the right of the form.
Decide whether or not you want to show the faces (profile pic thumbnails) of some of the people who've liked your site. The design usually looks cleaner if you uncheck this box.
Set the width of the like button and description. This defaults to 450 with the standard design (which would work just fine with most sites), but you may want to make it narrower if you're placing this in a 2-column layout or sidebar.
Choose a button that says Like or Recommend, which font you want to use and a light or dark color scheme. Then click the Get Code button to see the code you'll be adding to your site.
You may be prompted to "verify your developer account" at this point. If so, the first step to take is just to log in to FB and enter all the above info again. You usually won't have to verify if you're logged in.
If you're still prompted to verify, then you'll need to provide a cell phone number where FB can text you a verification code. See their help site to read their explanation behind requesting this info.
Regardless of whether or not you're prompted to verify, once you're able to click the "Get Code" button, you'll be presented with a dialog box.
Select the iframe code and copy it. This is important as the XFBML code will not work properly.
Open your site in the editor and drag a Custom HTML element to a page.
Click within the element and paste the code there.
Click out of the element and you'll see the like button with what may be a lot of extra white space beneath it. If you do see a lot extra white space, pay this no mind as it will disappear after you publish the site.
You're now ready to Publish this to your live site. Once you do, you'll see your Like Button there waiting for you. As people Like your site, you (and everyone else) will see how many have liked it. And if people have previously liked your site on Facebook through some other Like button, you'll see that reflected in the numbers here.
You can use this same button code on as many pages as you want. That way visitors can like your site no matter which page they're on.
Get started by going here:
http://developers.facebook.com/docs/reference/plugins/like
There is a form on this page that you'll use to setup your like button.
First, enter the address of your site. If you leave this field blank, people who click your like button may end up liking something else entirely.
If you have a Facebook Fan Page and prefer visitors Like that page as opposed to just Liking your site, enter the address of that page instead. The Weebly Facebook Fan page is located at http://www.facebook.com/weebly, so if we wanted visitors to become our Fans, we'd enter that address in the box instead of entering the weebly.com address.
Make sure the Send Button option is turned off / unchecked. This is a new option from Facebook that we don't currently support.
Then select your layout style. This will change the example layout shown to the right of the form.
Decide whether or not you want to show the faces (profile pic thumbnails) of some of the people who've liked your site. The design usually looks cleaner if you uncheck this box.
Set the width of the like button and description. This defaults to 450 with the standard design (which would work just fine with most sites), but you may want to make it narrower if you're placing this in a 2-column layout or sidebar.
Choose a button that says Like or Recommend, which font you want to use and a light or dark color scheme. Then click the Get Code button to see the code you'll be adding to your site.
You may be prompted to "verify your developer account" at this point. If so, the first step to take is just to log in to FB and enter all the above info again. You usually won't have to verify if you're logged in.
If you're still prompted to verify, then you'll need to provide a cell phone number where FB can text you a verification code. See their help site to read their explanation behind requesting this info.
Regardless of whether or not you're prompted to verify, once you're able to click the "Get Code" button, you'll be presented with a dialog box.
Select the iframe code and copy it. This is important as the XFBML code will not work properly.
Open your site in the editor and drag a Custom HTML element to a page.
Click within the element and paste the code there.
Click out of the element and you'll see the like button with what may be a lot of extra white space beneath it. If you do see a lot extra white space, pay this no mind as it will disappear after you publish the site.
You're now ready to Publish this to your live site. Once you do, you'll see your Like Button there waiting for you. As people Like your site, you (and everyone else) will see how many have liked it. And if people have previously liked your site on Facebook through some other Like button, you'll see that reflected in the numbers here.
You can use this same button code on as many pages as you want. That way visitors can like your site no matter which page they're on.
Add Your Twitter Feed / Badge to a Site
Twitter provides an easy to use widget generator so you can share all your recent tweets with visitors to your site. Here's how to use it.
Start by going here:
http://twitter.com/about/resources/widgets
From here, select the Create New button in the upper right. If you're not already logged in to Twitter you'll be prompted to log in before you're able to access this Create New button.
Select the User Timeline tab and fill in all the info requested there.
Make sure the username field matches the username of the Twitter account you're currently using. Twitter will allow you to change the username field (for some mysterious and unknown reason) but if you enter a username other than one you're logged into you'll later see an error stating "Unable to save your widget, please check your inputs." An error apparently written by a robot from a 1950s Scifi Film.
You can change the height of the feed (600 is kind of tall, and switch from the Light theme to a Darker one should it better suit your fancy.
When you're done, click the Save Changes or Create Widget button. Twitter will present you with code to copy & paste to your site. Select all of that code and Copy it.
Then go to Weebly and drag a Custom HTML Element to the section of your site where you'd like the Widget to appear.
The feed should look something like this:
What if you don't see your tweets on your site, but instead see an error or a blank space? Besides sarcastically saying "Thanks Twitter!" to your computer, you should make absolutely sure you copied all of the code that Twitter provided. The feed occasionally won't show up in the Site Creator, so it's also worth Publishing and checking the live site to check if it shows up there.
Start by going here:
http://twitter.com/about/resources/widgets
From here, select the Create New button in the upper right. If you're not already logged in to Twitter you'll be prompted to log in before you're able to access this Create New button.
Select the User Timeline tab and fill in all the info requested there.
Make sure the username field matches the username of the Twitter account you're currently using. Twitter will allow you to change the username field (for some mysterious and unknown reason) but if you enter a username other than one you're logged into you'll later see an error stating "Unable to save your widget, please check your inputs." An error apparently written by a robot from a 1950s Scifi Film.
You can change the height of the feed (600 is kind of tall, and switch from the Light theme to a Darker one should it better suit your fancy.
When you're done, click the Save Changes or Create Widget button. Twitter will present you with code to copy & paste to your site. Select all of that code and Copy it.
Then go to Weebly and drag a Custom HTML Element to the section of your site where you'd like the Widget to appear.
The feed should look something like this:
What if you don't see your tweets on your site, but instead see an error or a blank space? Besides sarcastically saying "Thanks Twitter!" to your computer, you should make absolutely sure you copied all of the code that Twitter provided. The feed occasionally won't show up in the Site Creator, so it's also worth Publishing and checking the live site to check if it shows up there.
Site Search
As a Pro customer you can add Search to your site to enable your visitors to quickly and easily discover whatever they're looking to find. The Search Box can be dragged to multiple pages just like any of the other elements.
Plus you can activate a Search Bar in the Header area of your site via the Design Elements section found under the Design Tab.
A visitor can search your entire site simply by entering a word or phrase in any of the search boxes you've added.
The results are immediately displayed on a search results page that distinguishes between regular pages, blog pages, and blog comments. The layout of the results page cannot be directly edited, but it uses your global font settings (found under Design > Design Options) to determine how the text should look.
If there are no results found for the visitor's search request, then they'll see a simple message indicating that this is the case.
The Search bar uses the text content found in paragraph, title, and ecommerce elements; in page names, descriptions, and keywords; and in picture captions / alt tags to determine which results should be displayed.
If you want to exempt a page from the search results (so that it won't show if someone searches for it), choose that page from the list found under the Pages tab, click the Advanced Settings link, then check the provided "Hide This Page from Search Engines" box.
Plus you can activate a Search Bar in the Header area of your site via the Design Elements section found under the Design Tab.
A visitor can search your entire site simply by entering a word or phrase in any of the search boxes you've added.
The results are immediately displayed on a search results page that distinguishes between regular pages, blog pages, and blog comments. The layout of the results page cannot be directly edited, but it uses your global font settings (found under Design > Design Options) to determine how the text should look.
If there are no results found for the visitor's search request, then they'll see a simple message indicating that this is the case.
The Search bar uses the text content found in paragraph, title, and ecommerce elements; in page names, descriptions, and keywords; and in picture captions / alt tags to determine which results should be displayed.
If you want to exempt a page from the search results (so that it won't show if someone searches for it), choose that page from the list found under the Pages tab, click the Advanced Settings link, then check the provided "Hide This Page from Search Engines" box.
Newsletter Sign-up and Autoresponder Forms
We don't provide email newsletter / sign-up forms or auto-responder forms as part of our service. But that doesn't mean you can't use such forms with your site. Pretty much all major bulk email providers (like MailChimp, Constant Contact, iContact, AWeber and others) provide forms you can use in our editor.
Using one of these forms is a simple matter of copying the code provided by whatever email service you're using to one of our Custom HTML Elements. Let's use MailChimp as an example of how this would work.
When you build a form with MailChimp, they generate code that you can use to add this form to a site. First select to "disable all Javascript" as seen in the image below. Then select to Create the Embed Code. If you're using another provider and they provide the option to disable the Javascript, you should do the same with their form.
Now select all this code and copy it.
Drag a Custom HTML element to a page on your site.
Then click the element to edit it.
And paste in the code you copied earlier.
When you click away from the element, the HTML code will disappear and you'll see the form itself.
After you publish your site, any sign-ups from this form will be added directly to the list you've created at your email provider.
Using one of these forms is a simple matter of copying the code provided by whatever email service you're using to one of our Custom HTML Elements. Let's use MailChimp as an example of how this would work.
When you build a form with MailChimp, they generate code that you can use to add this form to a site. First select to "disable all Javascript" as seen in the image below. Then select to Create the Embed Code. If you're using another provider and they provide the option to disable the Javascript, you should do the same with their form.
Now select all this code and copy it.
Drag a Custom HTML element to a page on your site.
Then click the element to edit it.
And paste in the code you copied earlier.
When you click away from the element, the HTML code will disappear and you'll see the form itself.
After you publish your site, any sign-ups from this form will be added directly to the list you've created at your email provider.
Add a Poll to Your Site
We provide an integrated option for PollDaddy polls in the editor. To add a poll to your site go to the More section of elements and drag the Online Poll option to a page.
Then click the poll and select the Edit Poll option in the Toolbar.
If you have a PollDaddy account, you can log in. Otherwise, click the Get Started button.
Now you can edit the sample poll or click the Create a New Poll button to make a Poll from scratch.
After you create your Poll questions and Save them, Publish your site. If you want to learn more about what PollDaddy is capable of, click here to go to their support page and then scroll down to the Polls section.
Then click the poll and select the Edit Poll option in the Toolbar.
If you have a PollDaddy account, you can log in. Otherwise, click the Get Started button.
Now you can edit the sample poll or click the Create a New Poll button to make a Poll from scratch.
After you create your Poll questions and Save them, Publish your site. If you want to learn more about what PollDaddy is capable of, click here to go to their support page and then scroll down to the Polls section.
Add Widgets and Other Content by Embedding Code
You can add outside content (like embeddable video, audio, advertisements and forms) to your site using our Embed Code element.
Then get the embed code for whatever you're looking to add to the site. This can usually be accessed via an embed or share button found on or near the content you're looking to share.
Here we see an example of embeddable code connected to a video that is hosted on Vimeo.com.
Once you have the embed code, click inside the Embed Code element to paste it in place.
When you click off of the element, your content should show up there. All done!
Note that there are a few situations where the content you've embedded won't show up on your site until you Publish the changes. So if you don't see your video, form or what have you in the editor, try Publishing to see if it shows on the live site.
Then get the embed code for whatever you're looking to add to the site. This can usually be accessed via an embed or share button found on or near the content you're looking to share.
Here we see an example of embeddable code connected to a video that is hosted on Vimeo.com.
Once you have the embed code, click inside the Embed Code element to paste it in place.
When you click off of the element, your content should show up there. All done!
Note that there are a few situations where the content you've embedded won't show up on your site until you Publish the changes. So if you don't see your video, form or what have you in the editor, try Publishing to see if it shows on the live site.
Edit the HTML / CSS of a Theme
As this support site will attest, our editor provides an enormous amount of options for designing and editing a website. But there still may be some situations where you want to make a tweak to the HTML or CSS of the site. So we've written this short guide to show how to make a few basic changes / additions (you are welcome to make more changes if you know your way around HTML).
Due to all the possible variations involved, these kinds of changes are not something for which we are able to provide direct support or guidance -- so if the changes do not work properly with your theme or are not something you feel comfortable doing, you'll need to switch back to a standard theme via the Design tab.
Get other ideas beyond what is shown here from our Widgets and Other Content section and learn more about the basics of HTML / CSS from the W3C Schools excellent (and free) website.
Due to all the possible variations involved, these kinds of changes are not something for which we are able to provide direct support or guidance -- so if the changes do not work properly with your theme or are not something you feel comfortable doing, you'll need to switch back to a standard theme via the Design tab.
Get other ideas beyond what is shown here from our Widgets and Other Content section and learn more about the basics of HTML / CSS from the W3C Schools excellent (and free) website.