1. Knowledge Base
  2. >
  3. Design Tools
  4. >
  5. Weebly Tutorial Walkthrough

Weebly Tutorial Walkthrough

Guide to Adding and Modifying Content

Once you have selected your theme, the next step in creating your unique and extraordinary website with the Weebly Builder is adding content and pages. In the following tutorial, we will show you how to: Add and delete pages Modify page settings Configure the website menu Add key elements like text, title, image, gallery, and contact form to pages


Managing Pages

As you start to build content in your Weebly drag and drop builder, you may find the need to add or delete a page. Based on the Weebly plan associated with your website, you may be limited to 6 pages with the Basic and unlimited with either the Pro or Business plan. For information on how to upgrade to Weebly Pro or Business to get unlimited pages and other premium features, please see the following article:

Add a New Page

To add a new page to your website:

  1. Select the Pages tab on the top menu.
    HostGator Weebly top menu bar with Pages selected screenshot
  2. On the left-hand side, click the + button at the top.
  3. Click Standard Page.
  4. On the left-hand side, you can define the page name, select a header type, page visibility, add SEO Settings, and remove the page from the navigation menu.

  5. Click Done to save the new page.
  6. Click the Build tab in the top menu to begin adding content to the new page.

    HostGator Weebly new page screenshot


Delete a Page

To delete a page from your website:

  1. Select the Pages tab on the top menu.
    HostGator Weebly top menu bar with Pages selected screenshot
  2. In the left-hand sidebar, select the page you wish to delete.
    Page Selection
  3. Click Delete.
    Delete Button
  4. In the pop-up that appears, click Delete.
    Delete Confirm

Modify Page Settings

Once you have created a page, you can make modifications to various elements of the page, including the page title, description, and metadata. To get started:

  1. Select the Pages tab on the top menu.
    HostGator Weebly top menu bar with Pages selected screenshot
  2. In the left-hand sidebar, select the page you wish to modify settings.
    Page Selection
  3. Click on SEO Settings at the bottom of the new page menu.
  4. The page settings dialog box will appear, allowing you to make adjustments to various settings:
    • Set the page title
    • Set the page permalink
    • Create a page description
    • Modify meta keywords to aid in SEO
    • Change the page header code
    • Change the page footer code
    • Remove the page from search engines
  5. Once you are finished making changes, click the back arrow at the top.

Reorder the Pages

To move a page:

  1. Select the Pages tab on the top menu.
    HostGator Weebly top menu bar with Pages selected screenshot
  2. The left-hand sidebar contains the list of pages and the order that they will appear in the menu.
    Page Selection
  3. Select the page you want to move up or down in the menu by clicking on it in the navigation list.
  4. Drag the page to the place in the list where you want it to appear.

Create and Remove Sub-Pages

You can create and remove sub-pages using the same process you would use to move a page in the navigation list. Instead of moving the page up or down in the list, simply drag the page over to the right to indent it under a page. This will make it a sub-page and create a drop-down menu to contain that page. To remove a sub-page, drag the page to the left to remove the indent.

Hide Page from Navigation

In addition to re-ordering your website's menu, you can also completely hide a page from the main menu.

  1. Select the Pages tab on the top menu.
    HostGator Weebly top menu bar with Pages selected screenshot
  2. In the left-hand sidebar, select the page you wish to hide.
    Page Selection
  3. Click the box for Hide in Navigation located under the page name.
    Hid page

Add Key Elements

The elements in the Weebly builder are similar to using blocks. You can structure the blocks to configure your content on the pages. Use the Build tab on the top of the page. Then click and drag the element over to the page to add it. When you drag the element over, a line will appear to indicate where the element will be placed. Click on the links below to expand directions on how to use the following elements:

Adding text to your site is easy. Simply drag any of the text elements to your page. The text elements available are Title and Text.

Editing Your Text

Once you have added a text element, you can edit it using the text toolbar.

To make edits, simply highlight the text you want to change and then click on one of the following:

Bold the selected text

Italicize the selected text

Underline the selected text

Change the color of the text

Increase/decrease font size

Reset the pasted text to the default text options on your site

Turn your highlighted text into a link

Align the text to the left (default), center, right, or justified

Create an ordered list

Create an unordered list

Undo/redo changes

To add images to your website you will want to use the Image element located in the Basic section of the Build sidebar:

The YouTube Element

Add an Image

To add one of these elements to your page, drag and drop the element onto the page wherever you like. This will present you with a placeholder image that you can click to upload a custom image from your computer, select from your favorite images or select from a web address.

Edit the Image

Once you have uploaded the image you wish to use, you can manipulate the image using the popup that appears upon clicking the image. From this popup, you can,

  • Use Edit to bring up the Image Editor.
  • Use Replace to change the image to a different one.
  • The Lightbox toggle will display a full-sized version of the image when it is clicked.
  • Directly Link the image to a Website URL, Standard Page, Product Page, Blog Post, Phone Number, File, or an Email Address.
  • Use the Align option to change the image positioning.
  • Use Spacing to add top, bottom, left, and right margins to the image.
  • Use Caption to display text to the bottom of the image.
  • Use Advanced to change the following:
    • Set Border Size.
    • Set Border Color.
    • Add Alternative Text. For visitors whose browsers may not support images or visitors who are visually impaired.

The gallery element enables you to upload photos in bulk. The uploaded photos are then arranged in a grid, and each image is configured to expand, showing a larger version when clicked.

Create a Gallery

To get started, drag the Photo Gallery element from the Multimedia section of the Build sidebar to your page.

Once the element is in place:

  1. Click the Upload Images button that appears in the element.
  2. Select images from your computer to upload.
    • You can select multiple images by holding the CTRL key as you select items (Command key on a Mac).
    • If you experience issues uploading your images, it is recommended that you limit your bulk uploads to around 25 images at a time. You can always add more later.
  3. Give the photos a few minutes to upload.
  4. Once the images are uploaded, you'll see your gallery on the page. You can make changes to each image using the mini-toolbar that appears when an image is clicked.
    • Each image in the gallery automatically links to a larger version of the image
    • You can also link an image elsewhere (to another site or page) if you like, or add a caption that will appear on the enlarged version of an image.

Customize Your Gallery

You can use the gallery popup to make changes to the gallery:

  • Add Picture(s) - allows you to upload more images
    While there is no real limit to the number of images you upload, It is possible for memory errors to occur if you have more than 300 images in a single gallery
  • Columns - allows you to determine the number of columns you want. The default is 3, but you can have 2 to 6.
  • Spacing - allows you to set the amount of space at the top and bottom of the gallery to allow some separation from the rest of your content
  • Caption - allows you to set how the captions are displayed on the images

Advanced Configuration

In addition to the options presented in the popup, you also have some Advanced options:

  • Image Spacing - allows you to set the amount of space between each image
  • Border - allows you to choose if you want a border around each thumbnail or not
  • Image Ratio - allows you to crop the thumbnails to either squares or rectangles to make the layout more uniform.

The slideshow element, which is available under the Multimedia category of the Build sidebar, allows you to display your photos in style. It's easy to create and configure your slideshow, and there are even some advanced options that will help you customize your slideshow to fit your web page.

Creating a Slideshow

You can add a slideshow to your page by dragging the Slideshow element to the location on your page where you would like it to appear.

  1. Choose a slideshow style and click Continue. You can always change your decision later, so don't spend too much time on this step. There will be more slideshow styles to choose from later.
  2. Once you select the slideshow type, you will be prompted to upload photos. You can either drag and drop your photos from your computer to the dialog box, or you can click the Upload Photos button.
    • You can always manage your photos later if you wish to delete or upload more. Depending on how many photos you've selected, it may take them a few minutes to upload.
  3. Once your photos are done uploading you'll see them all on the slideshow photo management screen.
  4. You have several options for configuring your slideshow:
    • Reorder the frames by dragging and dropping them into place
    • Edit captions by clicking on the speech bubble icon on the picture
    • Add/edit links by clicking on the chain link icon on the picture
    • Remove the image by clicking on the trash can icon on the picture
  5. Once you're satisfied with your selections, click Save. You'll see the new slideshow on the page.

Customizing Your Slideshow

Once you have created your slideshow, click on the slideshow to use the popup to make the following changes:

  • Use the Add / Edit Photos button to bring up the Manage Slideshow Photos dialog box.
  • Select Fade or Slide for the Transition Style. This determines how the slideshow moves from one image to the next.
  • Use Navigation to select whether you want to use thumbnails, double thumbnails, numbers or none. You can set the Nav Location to place the navigation bar at the bottom, top, left, or right of the slideshow.
  • UseSpeed to set the speed of the show (how long each image is shown).
  • Spacing will let you set the padding above and below slideshow.
  • Use Caption Location to set where the caption text will be displayed at the top or bottom of the images (if you have any).
Note: The slideshow will automatically expand to the width of the page or column in which you've placed it.

Advanced Options

There are also several advanced options which will allow you to:

  • Toggle Autoplay on or off
  • Toggle Slideshow Controls either on or off
  • Define where the slideshow begins
  • Set the aspect ratio (16:9, 4:3, or 3:2) (though the system is very good about determining this automatically)

A contact form provides your visitors with an easy way to reach out to you. You can ask your visitors for simple information, such as their name and email address; or you can set up a more complex form, such as a survey, to ask them any number of questions.

The free basic version of Weebly has a limit of five fields per form, while the premium version allows an unlimited number of fields; however, you can create as many forms as you like regardless of whether or not you have premium.

Creating a Contact Form

You can get started by dragging the form element from the main section of the Build sidebar onto your page.

The form starts with three fields which are set as required by default, meaning a visitor must enter something in the fields before the form can be submitted:

  • Name
  • Email address
  • Comment

Form Settings

A number of settings can be modified for each field, but the most commonly adjusted settings are:
  • Field Title - the name of the field
  • Required - whether or not the field is required before submission
  • Instructions - will allow you to specify instructions on how to fill out the field
  • Spacing - allows you to set the top and bottom margins for the element

To change any of these settings, all you need to do is click on a field and use the toolbar to make adjustments.

Adding Fields to Your Form

You can add new fields to the form by dragging them from the Elements tab to the form on your page, just like any other element.

There are several types of preset fields that you can create in your form:
  • Name
  • Email address
  • Postal address
  • Phone number

There are also several generic input fields:

  • Short Text Box
  • Large Text Box
  • Options Buttons
  • Dropdown Box
  • Checkboxes
  • File Upload

Completing Your Form & Getting Results

Form Name & Submissions

Before you complete your form and publish your site, you'll want to give your form a name (for your own reference) and determine which email address (or addresses) you would like to receive the form submissions at.

If you have more than one email address, make sure you separate them with commas. You can also view the submissions directly in Weebly by clicking the View Entries button at the top of the form.

Confirmation Text

You'll also want to decide whether you want to display confirmation text directly on the page where the form is submitted or if you'd rather redirect your visitors to another page on your site when the form is submitted.

Note: You can access and modify these settings by using the Form Options button at the top of the form.

The YouTube Video element in Weebly allows you to embed YouTube videos on your web page. This element can be found in the Multimedia section of the Build sidebar.

The YouTube Element

Adding a YouTube Video

To add a YouTube video to your page:

  1. Drag and drop the YouTube Video element anywhere on your page.
  2. Click anywhere in the element to bring up the popup.
  3. From YouTube, click the Share button beneath the YouTube video, and copy the direct link for the video. No other link will work, so be sure to use the one found here.
  4. Paste the direct link into the Video URL field of the popup, and your video should show up on your page in less than a minute.
    If your video does not show, please ensure that you are copying the correct link. Do not copy the embed code.

Once your video appears, you can determine the padding of the video player and how you want to position it on the page.

Advanced Options

There are a few advanced options available for YouTube videos.

  • Configure the size of the video
  • Alternatively, specify the YouTube ID directly rather than using the URL

The Custom HTML element is the most versatile element in Weebly, though it can be somewhat complicated as it requires you to either know HTML code or have code provided by another service, such as YouTube.

This element can be found under Basic (left-hand menu) section of the Build sidebar. Drag the element to a page to get started.

 
How to Use Custom HTML

The best way to learn how to use the Custom HTML element is to see it in action. In this case, we'll demonstrate the usage of the element by showing you how to embed a YouTube video.

  1. Click on the Custom HTML element to bring up the popup.
  2. Obtain the embed code for your content from the site where it is hosted. The embed code button can usually be found on or near the content you would like to share.
  3. Then click Edit Custom HTML in the popup.
  4. Paste the embed code into the element.
  5. Click outside of the element, and your content should appear!
Note: In some instances, the content you've embedded may not appear on your site until the changes have been published. So if your video, form or other content does not appear in the editor, try publishing to see if it shows on the live site.
Common Uses for Custom HTML

There are a number of possibilities for custom HTML on your page, though typically, you will want to use the Custom HTML element for embedding third-party content such as:

  • Videos from a service such as Vimeo or YouTube
  • Google Maps when the Maps element doesn't meet your needs
  • A Twitter feed
  • Custom social media buttons from your favorite social site
Writing Custom HTML (Advanced)

If you have the technical knowledge, it is also possible to write your own HTML code in the Custom HTML element. It will appear on the page with the rest of your content; however, it should be noted that Custom HTML does not preserve any of the CSS styles applied to the rest of your page.

Note: The use of third-party scripts or applications that have improperly coded parameters or outdated syntax can cause Weebly to stop responding or can cause your site to stop functioning completely. This could potentially cause data loss and/or file corruption.
HostGator does not support third-party scripting, nor do we provide any services regarding script development. It is not recommended that you attempt custom coding if you are not familiar with HTML and CSS. If you need assistance with coding on your website, it is recommended that you seek the help of a professional developer. Alternatively, you can also visit W3 Schools as a reference to assist in coding.