Weebly PDF Tutorial - User’s Guide to Weebly Website Builder

HOW TO BUILD
A FREE WEBSITE
WITH WEEBLY

Feel free to share this guide.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/
 Introduction

Using Weebly website builder you can create your own website in a few minutes. A simple theme and
a drag and drop editor make this solution incredibly easy to use even for those with little or no
experience.

We aim here to provide you with an introduction to website building using Weebly with no programming
or web design skills required. It’s never been so easy to build and maintain your own website. If you
enjoyed this guide, please share it.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

 Contents

Contents
Introduction ............................................................................................................................................ 1
Getting a Weebly Plan ............................................................................................................................ 4
Title 2
Choosing a Theme................................................................................................................................... 6
Before Selecting a Theme ................................................................................................................... 6
What's the Purpose of the Website? .................................................................................................... 6
What Kind of Style Do You Want? ..................................................................................................... 6
Do You Have a Vision for your Brand? .............................................................................................. 6
Can You Think of a Competitor You Want to Emulate? .................................................................... 6
How Much Time Do You Have?......................................................................................................... 7
Select Your Template .......................................................................................................................... 7
Managing Backgrounds ........................................................................................................................ 10
Adding Text ........................................................................................................................................... 18
Adding Images....................................................................................................................................... 20
Weebly Galleries ................................................................................................................................... 26
Gallery ............................................................................................................................................... 26
Slideshow .......................................................................................................................................... 29
Weebly Elements .................................................................................................................................. 34
Intro to Weebly Elements .................................................................................................................. 34
Working With Columns .................................................................................................................... 37
Call-Out Box ..................................................................................................................................... 39
Documents ............................................................................................................................................ 42
Display Documents on Your Website ............................................................................................... 42
Link to Documents, PDF, Powerpoint Slides, and More .................................................................. 44
Videos .................................................................................................................................................... 48
Embed Video from YouTube, Vimeo, and Others ............................................................................ 48
YouTube element .......................................................................................................................... 48
Embed videos from YouTube, Vimeo, etc. ................................................................................... 49
Upload HD Videos Directly to your Website.................................................................................... 51
How Can You Use a Video Background? ......................................................................................... 52
Audio ..................................................................................................................................................... 58
Navigation ............................................................................................................................................. 60
Limit Access & Un-Publish Website...................................................................................................... 65

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

 Password Protect ............................................................................................................................... 65
Limit Access ...................................................................................................................................... 66
Hide from Search Engines ................................................................................................................. 66
Hide from Your Site's Navigation ..................................................................................................... 68
Un-publish ......................................................................................................................................... 69
Weebly Dashboard ............................................................................................................................... 71
Account ............................................................................................................................................. 71
Sites List ............................................................................................................................................ 72
Stats ................................................................................................................................................... 73
Form Entries ...................................................................................................................................... 73
Blog Comments ................................................................................................................................. 74
Store Orders....................................................................................................................................... 74
Choosing your Weebly Domain Name ................................................................................................. 75
Best Place to Register a Domain Name ............................................................................................. 75
Free Domain Registration with a Paid Weebly plan ......................................................................... 75
Publishing your Website ....................................................................................................................... 76
Final Thought ........................................................................................................................................ 77

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

 Getting a Weebly Plan
Let's get started, and we'll walk through this together. You may get started totally for free with Weebly.
This means that you will be using the free Weebly basic plan and a free subdomain with this format
url.weebly.com. Remember that getting a paid domain such as yourdomain.com is a very recommended
and makes your website look professional.

Well, click Here to sign up for an account, and you should be greeted by this screen, (or something
similar, as the designs change often):

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

Clicking on the create your online store button or build a professional website link will take you to a
Sign In screen. If you haven’t signed up already you will need to register a new account.

This is a straightforward procedure of just completing the form, adding your email address and chosen
password, or if you prefer, Facebook or Google accounts can be used.

You will be then taken straight to a screen that will prompt you to select a category that best describes
the website you are hoping to build.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

 Choosing a Theme
Weebly offers hundreds of themes that you can change to fit your needs. Once you choose your template,
you can easily change the background image and the colors to your liking.

Before Selecting a Theme

Prior to selecting your template, you should know what you want out of the website. Ask yourself a few
basic questions so you can proceed without having to backtrack.

What's the Purpose of the Website?

You should ask yourself what you want out of the website. Do you want to create a blog, or do you want
to sell products or showcase your online portfolio? When you know the purpose of your website, you
can choose the right style that fits your business model or idea.

What Kind of Style Do You Want?

Some websites are meant to be professional looking, and others are supposed to be more fun. You should
think of what kind of message you want to convey before you proceed. If you find a designer-made
template, you are going to save time, but you must remember to think about customizing your site so
you can stand out.

Do You Have a Vision for your Brand?

It helps if you know about your brand and your vision as you can create the ideal Weebly site. But if
you don't, you can keep it simple and build it up over time. However, it's wise to choose a template that
complements your company and its identity as you want your customers to perceive you in a positive
manner

Can You Think of a Competitor You Want to Emulate?

When you are setting up your Weebly website, you should first check out your competition. That way,
you can find out what you like and don't like about other sites. Then, once you are ready to start building,
you can emulate the good things and make an even better site.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

How Much Time Do You Have?

Finally, you will want to think of your schedule when you make a site. If you have a lot of free time and
aren't launching your business or product soon, you can dedicate tens of hours to making your Weebly
site. On the other hand, if you want to make a site overnight or in a couple of days, you should select a
template that includes features and a layout that you want to include, saving you time from having to
organize these yourself.

Select Your Template

Once you know what you want out of your website, you should check out the vast template collection
that Weebly provides. To get started, browse the gallery for inspiration.

On the top left corner of the templates page, you can search and then browse the results to find the
perfect solution. You can easily find the latest templates by clicking the new button on the upper side of
your Weebly site editor. Or, if you prefer, you can check out the Most Popular Templates button, which
is just below the New templates. However, if nothing suits you or you want to look more, you can select
a category to browse such as Music, Blog, Hotel & Travel and many more.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

As mentioned above, The Theme Gallery has many options to choose from, all of which are responsive
and customizable so you can add your own personal touches. Themes are organized by category, but
you can choose any theme you like no matter which category it happens to be in.

Click on a theme image to read a description, view a list of features, and see a preview at full size or
apply it directly to your site. You can also preview or choose to apply the theme by moussing over it
and using the links that appear below.

Note: Changing themes will not change any of the content on your pages. For example, if you've
previously used the Modus Operandi theme (highlighted above), you'll still see the pictures of plants on
your page when you change to a new theme (see below for an example). The same is true if you've
replaced the default images with your own - they'll still be there when you switch to a new theme.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

Once you’ve chosen a theme you like, you can customize colors and fonts by clicking on Change Fonts
in the Themes tab. Many themes also have different color options and additional features that can be
toggled on and off in the Theme Options section.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

 Managing Backgrounds
Customizing the backgrounds on your pages is a simple way to add personal flair and make your site
stand out. You can add a different background to each section and header on your site, so your creative
options are practically unlimited.

Backgrounds fill the entire width of the page and can be an image, a video (for Pro subscribers and up),
or a solid color. You can use your own files or choose from our galleries of optimized, high-quality
media. Image and video backgrounds can be further customized with scrolling effects.

We’ll look at how to use each type of background and provide some tips to help you make the most of
your images and videos.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

A video background will add dynamic visual appeal and make your site more engaging for visitors.
We’ve provided a gallery of videos that are optimized and ready to use on your site, but you can use
your own as well.

If you’re uploading your own video, be sure that it’s less than 1 GB in size and one of the following
formats: MOV, MP4, M4V, WMV. You’ll want to use a good quality video that’s large enough to fill
the width of your page without distortion or pixilation. Most smartphones are capable of recording
videos that will work well as backgrounds, so you may already have what you need to create a great-
looking video.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

Click on the section you want to add a video to, and then on Edit Background. Click on Video and then
Add Video. To use a video from the gallery, simply click it to set it as your background instantly. To
upload your own, click Upload Video and then choose the file to upload. Your video may take some
time to finish uploading and display on the page, but you can go ahead and work on other things in the
editor while you wait.

Click on Edit Background again to use a different video, see a preview of how it will play, or toggle the
Loop setting on or off. Scroll down to toggle the Reveal scroll effect on and off and set the vertical
alignment for content in the Advanced menu.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

To use an image background, click Edit Background for the section you’re working with. Select Image,
and click add image. You can choose one from our gallery by clicking on the image thumbnail and then
on the select button. The images in the gallery can be filtered by theme using the menu at the upper
right.

To add your own image, click Upload Image and choose the file you want from your computer.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

Click on the section and then on Edit Background to bring up the settings. Here you can edit or replace
the current image and choose a scrolling effect for the background.

Like videos, images will also look the best when they’re high-quality and large enough to fit comfortably
across the width of your page. Again, most phones have a good built-in camera capable of taking photos
that will look great on your site. Wondering exactly what size the image needs to be? There really aren’t
specific dimensions for a background image, but a good rule of thumb is to choose an image roughly
2,000 pixels wide and at least 1,000 pixels high - that’s large enough to ensure your background will
look good on all screen sizes and devices.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

A solid colored background is a great solution if you want to make a bold statement or showcase special
content on your page. Click the section you want to add a color to and then click Edit Background, then
select Color.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

Click the Change Color button to open the Color Picker. Drag the circle in the spectrum bar to the color
you want, and then drag the circle in the color gradient field below to fine tune the lightness and
saturation of the color. If you already know what color you want to use, you can simply type the hex
code in the field below.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

What if the font colors you’ve chosen don’t stand out well against your new background color? You can
select the text and change the color using the A button on the text editing tool bar. You can pick one of
the preset color swatches or click the arrow below to open the color picker and customize it.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

 Adding Text
Text may be the most important aspect to any website. Describing you, and your enterprises, expressing
information and extending contact details and questions to your visitors. Before getting started with your
content plan, remember that search engines value considers text content above all else, and if you have
high quality and unique content, you may find yourself more visible on major search engines. Many
people prefer to draft their text in another document like Microsoft Word, this allows more revision,
spellchecking, grammar and possibly the most important feature if you are writing a lot of content-
autosaving, in case you have a connection problem. Text can then be copied into the Weebly editor.

Adding written content to your site is as easy as dragging any of our text elements to a page. The primary
text elements are Text and Title:

• Title: For adding an H2 headline before a paragraph, or anywhere on the page when you want
some text to stand out. This text is larger and more eye catching than paragraph text.
• Text: This is your paragraph text, which you'll want to use for the majority of the written content
on your site in order to provide a consistent look.

Drag one of these elements to your page and click on it to start typing.

While you can type multiple paragraphs within a single text element, your site will be easier to read and
look cleaner if you use a separate text element for each new paragraph. This also gives you a lot

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

more flexibility when designing your pages, and allows you to choose the alignment for each paragraph
individually, position different elements between or next to paragraphs, or add an image to each text
element if you like.

When typing in a text element, you'll see a bar across the top with various icons. This is the text toolbar
and you can use it to do some basic formatting, similar to what you may be familiar with from word
processing apps. Simply select the text you want to modify and click the appropriate button to make that
change.

From left to right, the icons allow you to bold your text, italicize it, underline it, make it bigger, make it
smaller, change the color, create a link, adjust the alignment of all text within the element, create bulleted
and numbered lists, and remove any formatting you previously applied. The left arrow will undo the last
change you made, and the right arrow will re-do the last change you undid. Note that these options will
only function while you're actively typing inside the element - once you've clicked outside the element,
your changes will be saved, and you'll need to undo/redo manually.

You may notice that one thing you can't do from the toolbar is change the font family for your text. Font
changes are handled from the Theme tab.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

 Adding Images
Images are an important component of your website, being the most visible aspect, and it’s important to
choose the right ones to convey your idea and brand. Weebly makes it easy for you to upload, add and
delete images.

There are four ways to add pictures to your pages: Image Elements, Slideshow Elements, Gallery
Elements. We'll look at using the basic image element in this article.

From the Build tab, drag the image element to a page. Then click on the element to open the image
selection dialog box.

Here you can upload an image from your computer by dragging the file from a folder directly onto this
window or by clicking the green upload button and locating the file on your computer.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

The size of the picture as it appears on your website may be a bit different than you expected, but you
can change the size easily. Mouse over the image and a small blue box in the lower right corner will
appear. Click and drag on this to resize the image

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

Clicking on a photo will bring up the element settings.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

In addition to the Edit and Replace image buttons, the following options are available:

• Link: This option allows you to add a link to the image.

• Lightbox: Enabling the lightbox feature will display the full sized image in an overlay when
someone clicks the image on the page.
• Spacing: Click on this to adjust the amount of white space around the picture.
• Caption: Click here to enter caption text that will display beneath the image.
• Advanced: This menu includes options to choose a border style and color and enter Alt Text for
the image.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

The Edit Image button will open an image editor with several more options. From left to right in the
above image:

• Crop: Crop or rotate the image

• Filters: Add one of several filters, similar to what you may be familiar with from popular photo
apps
• Adjust: Make adjustments to the image brightness, saturation, and contrast
• Text: Add text in a layer on top of the image
• Focus: Add a linear or radial blur effect to the image
• Use the undo button to remove any change you don't like, and don't forget to click save when
you're done editing.

You can also add an image directly to a text element and have the text wrap around the image. To do
this, drag an image element into an existing text element.

Then upload an image as described above. You'll likely want to adjust the size of larger images using
the blue drag control in the corner of the image. You can access the same settings that are available for
a standalone image element, like caption and spacing, and switch the alignment from left to right.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/
 Weebly Galleries
If you want to add multiple images to your site, there are two easy ways to do that, with our Gallery and
Slideshow elements. Choosing which one depends on how you want it to look. For reference:

• Gallery: Displays photos in a grid, clicking on an image opens it in a large “lightbox” display.
Manual control for scrolling through photos.
• Slideshow: Displays one large photo at a time within the page, with sequential thumbnails.
Autoplay or manual control for scrolling through photos.

Gallery

Our gallery element enables you to display as many images as you’d like, in a click-to-see-a-larger-
version (lightbox) grid format that you control.

Drag the Gallery element to a page to get started.

Then click the Upload Images button that appears in the element.

And either drag images into the box or click the big green Upload Photos button.

This will let you select images from your computer to upload. You can select multiple images by holding
the CTRL key on a PC or the Command key on a Mac. If you have trouble uploading images, we'd

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

recommend limiting the number you upload to no more than 50 or so at a time. You can always add
more later.

Give the photos a few minutes to upload and then you'll see your gallery on the page.

Each image in the gallery automatically links to a larger version of the image. You can also link an
image elsewhere (another site or page) if you like or add a caption that will appear on the enlarged
version of an image. Click on the gallery to see these options.

Click on thumbnails and drag them around to rearrange images within the gallery.

The gallery's toolbox enables you to make additional changes.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

 • Add Images: There's no limit, but we recommend uploading no more than 200 images to any
one gallery so as to not overwhelm your visitors.
• Determine the number of Columns you want. The default is 3, but you can use from 2 to 6.
• Select the amount of Spacing to place between each image.
• Adjust Caption settings and placement.

And with Advanced, choose if you want a border around each thumbnail or not. And select if you want
to crop the thumbnails to either squares or rectangles. This cropping has no impact on the enlarged
images, it only changes the look of the thumbnails to make the gallery look more uniform.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

Slideshow

To add a slideshow of images, drag the element to a page on your site.

This will open the "Choose a Slideshow Style" dialog box where you can select which style of slideshow
you want. This can always be changed later, so don't spend too much time worrying about which one
you want.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

You'll now be prompted to upload photos. Hit the big Upload Photos button or just drag some photos
into the box to get started.

Then select the photos you want to upload. You're to both delete unwanted photos and more photos to
the slideshow at any time, so you don't have to be too selective at this point.

Depending on how many photos you've chosen, it may take them a few minutes to upload. Once they're
done uploading, you'll see them all on the photo management screen.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

You can drag photos to re-order them, click the "x" next to each to delete them and click the "bubble"
icon to add a caption that'll appear along with the photo in the slideshow.

When you're ready to move on, click Save and you'll see the slideshow as part of the page.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

Click on the slideshow to open its toolbox and make changes (scroll to view more options within the
toolbox).

• Use the Add / Edit Photos button to bring up the Manage Photos dialog box we saw earlier.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

 • Use Transition Style to switch between five different photo transitions.
• Use Navigation to select whether you want to use Thumbnails, Numbers or no navigation at all.
• Use Speed to determine how fast the slideshow should play.
• Use Spacing the tweak the amount of space around the image.
• Use Caption to determine if any text captions should appear at the top or bottom of each image.
• And with the Advanced option, set Autoplay to On or Off (it's on by default) and determine if
you want the slideshow to always play in order or start from a random point every time the show
is loaded.

Note that the slideshow will automatically expand to the width of the page or column in which you've
placed it. So, if you want to shrink a slideshow, you simply need to place it in a column by dragging a
Spacer element too either side of it.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

 Weebly Elements
This section of our guide walks you through the process of customizing your Weebly website.

Intro to Weebly Elements

Weebly Elements are the essential building blocks of your site. Nearly all the content you add to your
pages will be built with Elements.

Adding text, images, and more is as simple as going to the Build tab and dragging an element onto your
page.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

As you add more elements to your page, the page section will expand to accommodate them. You can
also choose to add multiple sections for content using the Sections element.

When adding a new section to your page, you can choose a pre-made layout and modify its content or
you can start from scratch and add any elements you like. In the example shown above you can see one
of the pre-made “Contact Us” layouts - this adds a map, contact form, and text that you can customize.

You can place elements side by side or stack them vertically. You’ll see a blue line indicating where the
element will be positioned when you drop it. A vertical line will appear when placing elements side by
side, and a horizontal line will be shown when stacking elements on top of one another.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

Placing elements side by side will automatically create columns across the page, and you can stack
additional elements inside each column. You can adjust the space between these columns by dragging
the vertical bar between them to the left or right.

All elements have a blue border that appears on mouseover; this shows you the boundary of the element
and allows you to perform basic functions using the 3 top buttons.

The "X" in the upper right allows you to delete the element. Deleted elements can’t be restored, so be
cautious when using this option.

The arrow in the upper left allows you to copy an element to the same (or another) page or move it to a
different page.

And clicking on the button between the "X" and arrow buttons allows you to grab and drag the element
to move it to a new spot.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

Working With Columns

Arranging your content in columns is a quick way to give your pages a well-organized look, and it’s as
simple as dragging things where you want them to be.

When you mouse over an element, you’ll notice a blue border around the outside along with some
buttons at the top. The border represents the boundaries of the element, and the buttons allow you to
perform various actions. The center button is what you’ll use to drag the element to a new spot on the
page.

Click and hold on the white rectangular button at the top of the element and then drag it to the new
position. A vertical line will show up next to different elements as you drag near them to illustrate where
the element will land when you release it. Once you’ve dragged it to the right spot, simply unclick to
release it and drop it into place. If this sounds tricky, take a look at the animation above to get a better
sense of how it works.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

You can position several items next to each other across the page, but keep in mind that the columns
will get narrower as you add more in order to fit on the page in a single row.
You can drag the blue vertical lines between each column left or right to adjust the size and it will snap
into place and automatically adjust the columns. Hold down the Shift button on your keyboard while
you drag to get more precise control over the width. You can also adjust the spacing between columns
using the options panel to increase or decrease the amount of space. If you don’t see the column options,
mouse over the columns and click on one of the blue vertical lines to bring it up.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

Just like individual elements on a page, columns can be copied or moved to different pages using the
arrow on the upper left. Click on either Move or Copy and then choose which page to move or copy the
columns to. You can also delete a column and everything inside it using the x button in the upper right.
Be careful with this option - it can’t be undone!

Call-Out Box

Looking for a way to draw attention to important information or specific content on your website?
Weebly’s Call-Out Box app allows you to highlight anything you want quickly and easily.

Once you have Call-Out Box installed, scroll to the bottom of the Build tab and drag it to your page like
any other element. Next, decide what you want to showcase with the Call-Out Box and add other
elements accordingly. We’re using the app to alert customers to a special discount in the example above,
but there are many possible uses for the app - go ahead and get creative with it.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

Once you’ve arranged your elements in the Call-Out Box, you can adjust settings like spacing,
background and border color, and choose from two different looks for the app itself. Click on the element
to activate the Settings pop up and make any changes you want. Want to change the color of any text in
your Call-Out Box? Those settings are actually managed in the Themes tab. If you don’t want to change
your font colors for the rest of your site, you can select the text within the Call-Out Box and change the
color with the tool bar.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/
 Documents
This section is all about documents in Weebly.

Display Documents on Your Website

The Document element, powered by our partner Scribd, allows you to upload and display documents on
your site for easy online viewing.

Drag the Document element from the Build tab over to your page and drop it where you'd like it to
display. You'll see a sample document asking you to click on it to upload a new file.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

Click Upload File to locate a document on your computer or drag one to the upload window. The
Document element supports PDF and DOC/DOCX file types, so your computer may show other files as
greyed out to indicate they can't be uploaded.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

You may need to wait a moment for the document to display while it finishes uploading and
converting, but you can move on to other things or exit the editor if need be - it'll keep working in the
background and will display normally when finished.

When your file is finished uploading, you can adjust the size of the element by clicking on it and
choosing the height option that best fits your document.

Link to Documents, PDF, Powerpoint Slides, and More

You have the option to upload and link to pretty much any kind of document, allowing a visitor to
download it to their computer.

You can link to a file by highlighting the text you want to link or clicking on an image and choosing the
link option. If you're linking text, it'll look like this:

If you're linking an image, it will look like this:

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/
Both image and text links will open a dialog box like the one shown below.

Click on File and select the file you want to link to. You can upload a new file or use one that you've
uploaded in the past. If you scroll up in the dialog box you'll see a search field you can use to locate a
previously uploaded file by name. Note that this search works only with files you've uploaded using the
link setting and won't be able to search files or media added directly to an element on your site.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

You can choose to have your linked file open in a new window, but keep in mind that not all file types
can be opened in a browser. If the visitor's browser doesn't have the ability to display the file, it will
attempt to download the file instead.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

 Videos
This section is all about videos in Weebly.

Embed Video from YouTube, Vimeo, and Others

YouTube element

Our YouTube Video element allows you to share videos from, er, what's that place called? Oh yeah,
YouTube! This element can be found under the Media section of Elements.

This element is one of two ways you can add a YouTube video to your site. The second (and more
flexible) way is to use our Embed Code element, which we'll tackle next.

Drag the element to a page and click on it to bring up the toolbox. You need to enter the direct link to
the YouTube video in the provided field.

To find the direct link, click the Share button beneath the YouTube video. And copy / paste from
there. No other link will work, so be sure to use the one found here.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

Once you add the link, the video should show up on your page in less than a minute. If it does not show
up then you are not using the direct link—please double check that you are copying the proper link using
the option noted above.
Once the link is in place, you can determine the size of the video player using the Advanced option in
the YouTube element's toolbox.

If you feel at all limited by this element, you're also welcome to embed videos from YouTube using our
Embed Code element. How so?

Embed videos from YouTube, Vimeo, etc.

Our Pro elements are not the only way to add Video and Audio to your site. You can add multimedia
content from Vimeo.com, Blip.tv, Ustream.com (and many other providers) using our Embed Code
element.

Start by dragging the element to the page.

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. In Vimeo this share
button appears on the right side of the video.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

Once you have the embed code, click inside the Embed Code element, then select Edit Custom HTML
to paste it in place. When you click outside of the element, your content should show up there.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

Upload HD Videos Directly to your Website

If you're on the Pro plan or higher, you can use the HD Video element to upload video directly to your
website and display it in an unbranded video player. This looks more professional and can be less
distracting for your visitors than embedding video from a branded website.

The HD Video element is in the Media section of the Build tab. Drag it over to your page to get started.

Click on the element to open the options and start an upload. Most standard video file formats are
supported (MP4, MPG, MOV, WMV), and you can upload videos up to 1GB in size.

Depending on the size of your video and your internet connection, it may take some time for the upload
to complete. You'll see a status bar showing the upload progress, and you can go ahead and work on
other parts of your site while you wait.

When your video is uploaded, we'll automatically encode it for optimal playback. This can also take
some time to complete, but you can keep working on the rest of your site while you wait.

Once the encoding completes, you're all set! You can also adjust the alignment, display size, and spacing
for your video, or allow visitors to download a copy of the file if you wish.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

How Can You Use a Video Background?

Customizing the backgrounds on your pages is a simple way to add personal flair and make your site
stand out. You can add a different background to each section and header on your site, so your creative
options are practically unlimited.

Backgrounds fill the entire width of the page and can be an image, a video (for Pro subscribers and up),
or a solid color. You can use your own files or choose from our galleries of optimized, high-quality
media. Image and video backgrounds can be further customized with scrolling effects.

We’ll look at how to use each type of background and provide some tips to help you make the most of
your images and videos.

A video background will add dynamic visual appeal and make your site more engaging for visitors.
We’ve provided a gallery of videos that are optimized and ready to use on your site, but you can use
your own as well.

If you’re uploading your own video, be sure that it’s less than 1 GB in size and one of the following
formats: MOV, MP4, M4V, WMV. You’ll want to use a good quality video that’s large enough to fill
the width of your page without distortion or pixilation. Most smartphones are capable of recording
videos that will work well as backgrounds, so you may already have what you need to create a great-
looking video.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

Click on the section you want to add a video to, and then on Edit Background. Click on Video and then
Add Video. To use a video from the gallery, simply click it to set it as your background instantly. To
upload your own, click Upload Video and then choose the file to upload. Your video may take some
time to finish uploading and display on the page, but you can go ahead and work on other things in the
editor while you wait.

Click on Edit Background again to use a different video, see a preview of how it will play, or toggle the
Loop setting on or off. Scroll down to toggle the Reveal scroll effect on and off and set the vertical
alignment for content in the Advanced menu.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

To use an image background, click Edit Background for the section you’re working with. Select Image
and click add image. You can choose one from our gallery by clicking on the image thumbnail and then
on the select button. The images in the gallery can be filtered by theme using the menu at the upper
right.

To add your own image, click Upload Image and choose the file you want from your computer.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

Click on the section and then on Edit Background to bring up the settings. Here you can edit or replace
the current image and choose a scrolling effect for the background.

Like videos, images will also look the best when they’re high-quality and large enough to fit comfortably
across the width of your page. Again, most phones have a good built-in camera capable of taking photos
that will look great on your site. Wondering exactly what size the image needs to be? There really aren’t
specific dimensions for a background image, but a good rule of thumb is to choose an image roughly
2,000 pixels wide and at least 1,000 pixels high - that’s large enough to ensure your background will
look good on all screen sizes and devices.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

A solid colored background is a great solution if you want to make a bold statement or showcase special
content on your page. Click the section you want to add a color to and then click Edit Background, then
select Color.

Click the Change Color button to open the Color Picker. Drag the circle in the spectrum bar to the color
you want, and then drag the circle in the color gradient field below to fine tune the lightness and

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

saturation of the color. If you already know what color you want to use, you can simply type the hex
code in the field below.

What if the font colors you’ve chosen don’t stand out well against your new background color? You can
select the text and change the color using the A button on the text editing tool bar. You can pick one of
the preset color swatches or click the arrow below to open the color picker and customize it.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

 Audio
The audio player element allows you to easily add an MP3 file directly to your website. Using this
element requires Weebly Pro or better.

You'll find the element in the Media section of the Build tab. Drag it onto a page to get started.

Click anywhere on the element to open the settings panel, then click Upload File to choose an MP3 file
from your computer.

The upload may take a few minutes to complete depending on the file size and your connection speed,
but you can close the upload window and monitor the status via the upload progress bar.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

Once the upload is complete, the player will expand to display the artist and track info if this information
is embedded in the file. Click again on the element to open the settings panel and adjust the position and
color of the player (light or dark). You can also enter the Artist and Track info here if it's missing from
your file.

The audio player currently only allows for a single MP3 file. If you're looking to add a full playlist, you
may want to search the Weebly App Center - there are several different audio apps that have playlist
functionality.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

 Navigation
Pages are one of the most important parts of a website - they provide structure and organization, and
they give your content a nice place to live. You can easily add and manage your pages from the Pages
tab, and this article will get you off to a great start.

Click the + button at the top of the Pages sidebar to open the add page menu.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

There are several different page options, but Standard Page is the one you'll probably use the most, so
it’s the one we’ll focus on here. You can learn more about Product and Category pages here and
about blog pages here.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

Selecting the Standard Page option will create a new page and prompt you to give it a name. You can
also change the Header type, configure who can view the page and how, and set up SEO for the page.
When you’re finished, click done to save everything and return to the list of pages - you’ll see your
new page at the bottom of the list.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

You can rearrange the order of the pages by clicking and dragging them up and down the Pages list.
Dragging a page to the very top of the list will make that page your Home page, as indicated by the
house icon next to the page name. Changing the order of pages in the list will also change the order in
which they're displayed in the navigation.

You can also create subpages by dragging a page underneath and to the right of another page. Add
more by following the same process - you can even create sub-subpages by dragging pages under and
to the right of an existing subpage.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

The navigation menu will show your main pages, and when you hover over them, your sub-pages will
appear in a drop-down menu below them. Your main menu item can be either a functional link leading
to a page, or a non-clickable navigational menu. To make it non-clickable, click the + icon to add a
page and select Nonlockable Menu. Give the new menu item a name, and then go back to the main
Pages tab so you can arrange your subpages.

If you want to edit a page you've already created, just go to the Pages tab and click on the page you
want to work on. The page will automatically load in the editor allowing you to make any changes you
want.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

 Limit Access & Un-Publish Website
The default visibility for your website is public, meaning people can search for and view all pages and
content on the site. You can limit access to your entire website or specific pages in a few different ways.

Password Protect

If your site is upgraded to Pro or better, you can lock pages or your whole site with a password.

Under the Settings tab > General > Site Password, you can enter the password you'd like to use to protect
your pages, then click Save.

Entering a site password here will automatically lock all the pages on your site. If you only want to
password protect certain pages, you can go to the Pages tab and selectively enable or disable the
password protection using the visibility menu. If you want to turn off password protection for all pages
at once, delete the password from the Settings, then save and re-publish your website.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

Limit Access

If you're a Pro or Business customer, you have all our Membership features available to you, including
restricting access to individual pages, based on specific members and groups.

Hide from Search Engines

If you'd like to hide your site from search engines like Google, Bing and Yahoo, you can do so under
the Settings tab > SEO, then scroll down below the Header field and select Hide site from search engines.
Click Save and Publish your site.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

If you want to hide individual pages from search, click the Pages tab, select the page you want to hide,
then SEO Settings, and check the box Hide this page from search engines.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

Hide from Your Site's Navigation

If you want a page to be public, but not appear in your navigation menu, click the Pages tab, the
individual page, then check the Hide in Navigation box.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

Un-publish

If you'd like to completely un-publish your site, so no one can access it,

Under Settings, then General, at the bottom of the page we show you the last time you published, as
well as giving you the option to Un-Publish your site. When you decide you’re ready for people to view
your site again, just click Publish. It’s that simple.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/
 Weebly Dashboard
Whenever you log in to your account, you’ll see your activity all in one place with your Site Dashboard.

Here you’ll find site stats, form entries and blog comments at a glance, as well as store sales, tips and
any third-party dashboard apps you’ve installed via the App Center.

Account

The menu next to your name in the upper right contains all the data for your profile and account, a link
to our support center, and a link to log out.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

On the Account page, you can view and make edits to your Profile, Services, Payment Methods, and
Order History. You can also view the login history for your account and check the status of any referrals
you've made. To change your login email or password, click Edit Profile under your name on the left.

To go back to the main dashboard, click Sites in the upper left corner.

Sites List

Every site you own or have access to has its own dashboard with information specific to that site.

At the top you'll see the name of the currently selected site, its address and plan level.

Clicking on the arrow beside the site name will bring up a list of all your sites and sites shared with you.

Selecting a different site from this list will update the dashboard information to reflect that site.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

To the right of the site name is the Edit Site button, which does exactly what it sounds like, and a more
menu (. . .) where you can choose to Copy or Delete this site.

Stats

Here you’ll find a quick overview of the number of Unique Visitors and Pages Views for the past
week. Click Stats to get an even more detailed look at visitors and page views by day.

Form Entries

Information submitted through any form is accessible in two ways:

• We send you an email when a visitor fills out one of your forms.
• We store the same information in your account.

Recent contact form submissions are displayed on the Dashboard and clicking on these will show all the
submissions you’ve ever received through the form, with the most recent contacts right up top.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

Blog Comments

Recent comments on any of your blog posts will appear here, unless you turn off comments (or choose
to use Facebook or Disqus to manage them). Click on a comment to reply to or delete it if the comment
isn’t something you want to see on your blog.

Store Orders

Have a store? As soon as a shopper pays for their order, it’ll appear on the Dashboard where you can
get all their shipping information and contact them with updates to their order.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

 Choosing your Weebly Domain Name
If you are setting up your Weebly website, you can use a Weebly subdomain. Alternatively, you can
buy your own domain. This option allows you to personalize your website and name further, and, since
domain registration is inexpensive, it’s a wise investment in your brand. If you decide to buy your own
domain, just click Setup with registrar and enter the information required.

Best Place to Register a Domain Name

For the domain names, we’ve mostly used www.Bluehost.com (one of the oldest brand names when it
comes to web hosting & domain registration) as our main domain registrar for almost all our
projects. For sure, you can try any other domain registrar, we just recommend BlueHost as we have used
it for years and everything so far has been going great. We’ve also gone out of our way to negotiate
exclusive offers with them for our users. So, save yourself some money and go with a recommended
domain registrar.

Getting your own top-level domain will also get you a personalized email address:
[email protected] – way more professional than any other standard free email provider.

Free Domain Registration with a Paid Weebly plan

If you’re launching a new Weebly website, then it’s a smart move to take advantage of this offer and
get your domain name for free. Otherwise, you may always connect your domain name that you’ve
purchased from any registrar to your Weebly.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

 Publishing your Website

Now that you've added some basic content to your site, this is a pretty good time Publish it. To do so,
just use the Publish button in the upper right corner of the editor. What happens when you publish? All
of the pages, text, images, and other content on your website will be visible on the internet for anyone
who visits your website. If you want to publish but restrict access to certain pages, refer to our previous
chapter.

This will bring up a verification box, letting you know your site has been Published.

Congrats! Your website is now live.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/

Final Thought

You may want to check out our Weebly deals page to find the best discounts on your new domain and
other web services.

If you liked this guide, then please subscribe to our WeeblyTutorials YouTube Channel for Weebly
video tutorials. You can also find us on Twitter and Facebook.

Updated version: https://weeblytutorials.com/weebly-pdf-tutorial/