Search The Hostwinds Guides Knowledge Base

How To Learn The Basics Of Building a Weebly Website

Share This Article

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.

It is important to note that the information provided in this guide is for informational purposes only. The premium features and changes that are made after the time writing this guide may be different and will be displayed to you in your Weebly account when editing your site through Weebly. Please open a ticket with our Support Team if you do have any questions so that we can help.

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