Free Drag and Drop Website Builder

Published by Gifty Antony on

Free Drag and Drop Website Builder

Webby is our free Drag and Drop website builder tool built with Bootstrap 4 framework.

The site builder will generate a fully responsive static website with the pre-built sections and templates.

So, to get a modern, trendy and mobile-friendly website, you only have to do is play within our builder tool.

Here, we are explaining about a few major and frequently asked features of webby.

Menu Structure

Website Builder Menu
Website Builder Menu Structure

Here we are explaining the Left Panel of the Webby; the free responsive website builder powered by Bootstrap.

1. Section Management Menu

Section Management Menu is the first navigation where you wanted to add new sections to an empty project. Under the Section Management Menu, you will have options to Add a Section and manage it.

Free Website Builder Menu Structure
Free Website Builder Menu Structure

After adding a section, you can move the Section Up or Down using the Upward or Downward arrows. With the third icon, you can manage properties like the background image, section margin and padding etc.

The Fourth icon is to adjust the settings.

You can edit the HTML code directly using the Fifth icon.

The Sixth icon will let you make a copy of the existing section.

The last icon is to delete any sections as per your choice.

2. Global Style Menu

By accessing the Global Style Menu, you can modify any properties and styles globally sitewide or for a specific section that you would like.

Free Website Builder Menu Structure
Free Website Builder Menu Structure

You can modify Heading tags like H1, H2, H3, H4 here.

In Settings, you can toggle the Skin tone between Light and Dark, control the visibility of any elements in various views like Mobile, Tablet and Desktop. You can align your text lines here, add effects like Shadow, 3D etc.

The Sixth icon with a drop symbol will take you to the editor where you can adjust every style of the elements which you selected. You can change the Margin, Padding, Colour, Font Family and a much more options here.

With the Seventh icon, you can have animations to your objects.

3. Project and Pages Management

Under this Menu, you can add and modify individual pages, and it’s settings like Title, favicon, SEO tags, Preloader animations etc. You can start a New Project, Save your current Project or Load Projects under this Menu.

The final FTP Publish Menu is also available here.

4. Responsive View

By clicking on the Mobile, Tablet and Desktop icons, you will see each view respectively.

5. Undo and Redo

The Undo and Redo feature will come in handy when you want to revert your changes quickly.

6. Preview

Make sure you click the Preview button to see your website design instantly. Once you are satisfied with the design, you can then go ahead and use the FTP Publish Menu to make your current website design live on your domain.

FTP Publish Settings

Once you have designed your website using our Free HTML5 website builder, you can directly upload them to your cPanel server using FTP Publish option under webby builder tool. Also, you have an alternative to Download from webby and manually upload back to your cPanel server.

To access FTP Publish, You need to click the Third Menu with the hamburger icon, at the Left Panel of the website builder software.

In FTP settings popup, please input the following values.

Type

FTP/FTPS. Please prefer FTPSecure here.

Host

Input your domain name here. You don’t need to add https or www here.

Username

Your cPanel username is your default FTP username. To know your cPanel username and password, please check your web hosting account welcome email. The subject line would be, Your New Hosting Account is here. Please see the Login Details to see your free cPanel username and password.

Password

Your cPanel Password.

Directory

Please input /public_html here if you want to see the design when you are accessing your website directly. You can add additional directories here if you are going to use this design in a subdomain or subdirectory. For example /public_html/sub-domain or /public_html/sub-directory.

Click on the Apply button after you input the FTP credentials. The files should be added within a few seconds, and you will get a confirmation message.

Download from webby

From webby, you can upload your designs via FTP Publish or Download them manually and upload back to your cPanel server.

In this video, we are showing you how to Download your website designs once you finished that. After download, let’s upload the website to your Free cPanel account and make the changes live.

Page Management

With webby, you can have multiple page website easily. To manage your web pages, please access the third menu in the side panel.

Here you can Add a page, Make a copy of the existing page and Delete any unwanted pages.

Using the Page Settings popup, you can change the page name, page title, add a favicon, and choose suitable Skin for your page.

You can add basic SEO tags like Meta Descriptions, Meta Keywords. You can add your Google Analytics JavaScript snippet here if you wish to track your website’s visitors.

You will have an option to choose a Preloader animation by accessing the last tab from the Page Settings popup box.

Page Names

Please note, your main page’s Name SHOULD BE index. Please DO NOT RENAME IT.

If your page Name contains more than one words, you should have an “-” added in between.

The whole Linux based web servers work this way. Not specific to the webby builder.

Section Linking

With webby, our free responsive website builder you can link sections in a page with a few clicks.

In this video, we will show you how to link sections within the same page and create the main navigation structure.

Drag and Drop

Within webby, you can easily drag any elements even if it is too small and drop to another place smoothly.

Watch our powerful drag and drop in action.

Categories: webby

Gifty Antony

Gifty Antony

Gifty works at Host My Website Online as a Contents Specialist. She is passionate about the Web Developer community and loves WordPress.

3 Comments

HABID PK · 12/02/2018 at 5:36 PM

Dear
how to link another page in webby and how to add youtube links

    Trisha K · 12/03/2018 at 8:38 AM

    Hello HABID,

    Please watch the Section Linking video. That video will help you understand how to link between internal sections or pages.

    Use Link Type = External to create a link which goes to external like your Facebook page.

    There are a couple of ways to add or link YouTube videos.

    Use Link Type = Video popup and enter your YouTube video link in below text field called Video link. This will play YouTube inside a pop-up.

    You can also link your YouTube videos to any objects by using the standard HTML linking method.

    For further personalised support, please create a support ticket and we will happily help you.

Leave a Reply

Your email address will not be published. Required fields are marked *