Search The Hostwinds Guides Knowledge Base

How To Learn The Basics Of Building a Weebly Website

Hostwinds has many options available when it comes to building a website within our Shared or Business Hosting services. In addition to our Softaculous Apps Installer, (which can install services like WordPressMagentoDrupalJoomla, and more), we also offer Weebly.  Weebly is a drag-and-drop website builder that lets you pick a starting theme and modify it with little or no coding experience required.

Weebly’s Settings are also very flexible and can be set up the way you desire. In this article, we’ll go over the Basic column within Weebly’s Build selection, discussing what every option is, and how it affects your site.

First you will need to log into your Weebly area and select Build from the top choice of tabs

 

Weebly Build Tab Location Image

 

Now scroll down on the left hand side and find the Basic Column

 

Weebly Build Basic Column Image

 

Creating A Title

To create a title in Weebly, just click and hold on the title button on the left-side and drag to where you want the title to be presented on

 

Weebly Title Icon Image

 

Now a title will appear that you can select and edit

 

Add a title to Weebly

 

Creating Text

To create and add text to your Weebly page, just click and hold on the text box and drag to where you want this located.  Typically, by default, this will include text within a paragraph form.

 

Weebly Text Icon Image

 

Then insert the text into your Weebly page and enter or edit the displayed text.

 

display text

 

Creating Images

Adding images to your website with Weebly is easy.  All you have to do is click and hold on the image icon, and then drag and drop in the weebly page area.

 

Weebly Image Icon Image

 

An upload image box will appear where you drag the Image Icon similar to below

 

Upload an image

 

Select anywhere in the upload image box and a drop box will appear.  You can now attach an image from your computer a URL provided from the internet.

 

Weebly Image

Creating A Gallery

To create and add a Gallery to your Weebly page, just click and hold on the Gallery icon and drag to where you want it located on your website.

 

Weebly Gallery Icon Image

 

After you have dragged and dropped the gallery box this should appear and is similar to adding a single Image.

 

Gallery ad

 

This drop box will appear allowing you to add photos into your Gallery to be displayed on your website

 

gallery box

 

Creating A Slideshow

To create and add a slideshow, drag and hold the Slideshow icon to where you want.

 

Weebly Slideshow Image Icon

 

After you have dragged and dropped the slideshow box, available options similar to below should appear.

 

Slideshow

 

Once you select the Slideshow display, a upload pop-up (similar to Image and Gallery) will appear for you to upload your images to

 

 

Creating a Map

Weeblys Map Icon is great for adding a pin-point location to your website

 

Weebly Map Icon Image

 

Drag and drop the map icon where you want it placed on your page and a map will appear.

 

map

 

Click within the box of the map and a editor will be presented.  Choose between editing the pinpoint location, Zoom, Width and Height, and much more.

 

Weebly Map Editor Image

 

Creating a Contact Form

To create and add a contact form click and hold the icon to the left, and then drag and drop.

 

Weebly Contact Form Image

 

Drag and drop the contact form where you want it placed on your page.

 

Contact Form

 

Clicking within the Contact Form will provide several options to edit the current description and form.  Select Form Options in the top right, or the Submit button, to edit where the information is mailed to along with other customizable features within this option.

 

Weebly Contact Form Options Image

 

Creating a Newsletter Form

To create and add a newsletter form click and hold the icon to the left, and then drag and drop.

 

Weebly NewsLetter Form Icon Image

 

Drag and drop the newsletter form where you want it placed on your page.

 

newsletter form

 

Same as the Contact Form, you will be able to edit where the News Letter is sent, along with the layout of the form itself.

 

Creating a Button

To create a button its simple, just left click and hold on the icon below.

 

Weebly Button Icon Image

 

Drag and drop the button where you want it placed on your page.

 

Adding a Button

 

Selecting within the button box will display editor features similar to all Weebly options.  Its worth pointing out the Link option among the Button edits, as you will use this feature to direct what happens when someone clicks on your button.

 

Weebly Button Link Option

 

Adding Embed Code (HTML)

To add an embed HTML Code, just left click and hold on the Embed Code icon to where you want on your website.

 

Weebly Embeded Code Image

 

After dragging this, select the area to begin adding your own customizable html code within your Weebly Website.

 

Embed Code Example Image

 

Helpful Related Articles