Free Website Builder - Steps to design a website through site builder Asia

We already discussed how to launch a small business website in previous article. Now in this article we will going to see how to use the free website builder tool briefly.

Before designing website through free website builder tool one should know the importance of website for business. Come Let we see,

Why Website Design ?

Designing a website for business is much important today. In this competitive world every one doing sometime seriously to reach their business out. Mostly in order to get huge customers, business people’s selecting internet as a best platform. By publishing the website to online will help you to visible your business service worldwide. If visibility of your business get increased then automatically customers rate also get increased. Also having website for business will increase the strong brand
value and trust-ability among customers.

How easy is website designing ?

Before designing the website for your business at first select the perfect domain name and web hosting plans which is apt for business website. Once domain name and web hosting plans are perfectly matches your website requirements then half of your work get completed. Same like you must careful in selecting the domain and hosting service providers too. Some hosting providers offer free website builder tool for life time along with hosting plans. So there is no need to pay any extra amount for website builder tool separately.

Many people thinks building website is quite complicated and it need’s strong coding knowledge. If you have that kind of mind set please erase it. To complete your complex task easily there are various website builder tools are available. By having little knowledge about website builder tool you can build your dream website quickly. Okay, obviously your next question will be which website builder tool i need to use and how to use that, is there is any free website builder tool to create website. Yes sure, we will discuss further about your questions.

About Free website builder tool ( Site builder Asia )

Among various website builders now we going to discuss about sitebuilder.asia ( Free Website Builder ) tool which is easy to use and design websites. This free website builder consist of more than 190 templates for various business purposes. It allows you to design both multi page and landing page designs. sitebuilder.asia consists of different business templates like arts,eCommerce, small business, education, energy, entertainment, events, food, health, hotels, media, nature, personal page, services, social, sports, technology, transport and travels etc.., And also there are many other options are available in sitebuilder.asia tool to shape your dream website perfectly. Further we will discuss it one by one,

Steps to enter into sitebuilder.asia ( Free Website Builder )

Step 1:

Step 2:

On top of the cPanel dashboard, search for website builder. In display, under software section you can able to view free website builder option.

Step 3:

Once you click the free website builder option it will ask for select a domain. Below list of domain will get displayed which you already added under cPanel. Click the domain name you want. Separate tab will get open, then it will redirect you to site builder asia dashboard.

Step 4:

In left hand side of dashboard, list of categories are displayed for different business. Select the suitable category which matches your business. After selecting the category various templates gets displayed.

Step 5:

Before selecting the template have a preview with each one. To see the preview of templates move your mouse over specific template image. There you can able to see the two buttons, one is preview and another one is select. Click preview now. Then have a look over all the pages of templates, if you feel okay with particular template start the design process or else toggle to next template.

I hope you may selected the best template. Let’s to go for next process,

Step 6:

Same like the first half of the step 5, move your mouse over specific template image. Among two buttons click the select option. Now selected template is ready to design. ( For example, i am selected ‘B1 Global Business Solution’s template under business category )

After selecting the theme, it will be look like this,

Note : Set of margin line will be given in every page of the template. Fix all your website contents and images within that. Its possible to adjust the bottom and top margin of each page based on your need. But both left and right side margins are fixed one.

Top Level Options

1) PUBLISH:

Under this you have three option,
1) Publish
2) Save Draft
3) Backup/Restore

Publish – After completing the website designing click the publish button. It will live your website to this world.
Save Draft – While designing the website, if you like to save the designed part without publishing then use Save Draft option.
Backup/Restore – Once you click this option, it will show two tabs. One is Backup and another one is Restore,

Backup – To take the backup of designed part click Download Backup ( Green color button ) option. Once you click the Download Backup button, file will get download in the extension of .sitebuilder keep it safe for future use.

Restore – If you like to restore the design backup file to the site builder asia tool, go to restore tab and click browse option. Then select the back up file and click restore ( Red color button ). Within 1 to 2 minutes it will get restored. Now you can continue with your old design part.

Note : If you do any small corrections in designing part it will reflect in your website only when you click the publish button otherwise it will not reflect.

2) Preview :

At the time of designing the website, if you like to see the website preview then click the preview button. It will display the website look until you completed.

In preview mode you can find the various screening option like phone, U Phone, Tablet, Desktop, wide, U wide. By default it will set as Desktop Wide, toggle it and find how your website will look in different devices. To come back to website builder click close button.

3) Undo/Redo

undo – Click undo option to move one step backward of your design process.

Redo – Click redo option to move one step forward of your design process.

4) New/Reset

Note : Be careful while using this options.

Under this you have three option,
1) Change template
2) Reset
3) Import ( Beta )

Change Template : In case if you don’t like to continue with current template, click Change Template option and select the template whatever you want.

Note : Before changing, it will show warning message like ‘Are you sure you want to change current template?’. If you have strong idea to change the design click Yes,change template option. To turn back to previous design click No,keep current template option and click close button which is present on top most right corner of the web page.

Reset : Click Reset button to restore all the templates contents to default one.

Note : Before Reset, it will show warning message like ‘Are you sure you want to reset current template?’. If you have strong idea to reset the design click Yes,reset template option. To turn back to current design click No,keep current template option.

Import ( Beta ) :

By using this option you can import the design of other website here. Click import ( Beta ) option and type the complete url of the website which you looking for. Click import option, within 2 to 3 minutes expected website will get restored in free website builder tool. After importing you can alter the designs however you want.

5) Screen Settings:

Set the different display size which is most convenient to you. For example you can set wide or desktop while designing in larger screens. Set Tablet or Phone while designing in smaller screens. Auto layout option will automatically adjust the screen based on display size.

6) Menu Settings

In free website builder tool, by default some set of pages will already given in the templates itself. If you want to delete or add any extra pages use menu settings option. Click the menu settings drop down icon, in that list of pages will get displayed. For example, in my theme Home,About ,contacts three pages are displaying. To make changes in menu click Edit menu option you will get separate tab like below,

Let we seen the options in Edit menu one by one,

To set home page: If you like to set the home page, select the page you want and check default menu item.

To hide the page in Menu: If you not like to see the created page in menu, select the page you want and check do not show this item in menu

To open the page in new window: If you want to open any link in new window, select the page you want and check Open in New window.

To add new page:Click New Item option. Then Add Menu Item tab will get display It will looks like below,

In Item Name field, type name of the new page. Click content radio button and select any one page under copy layout from ( It will reflect the same layout of selected page to the new page ) or if you want to create a simple link in menu click link radio button. It will show the choose link type,

1) To make it as a Internal Link, select ‘Internal link to’ option and choose any one page which is already in list.
2) To make it as a external Link, select ‘External link to’ option and past the url. It will point to external link which is not in menu list.
3) To create custom anchor tag select ‘Anchor to’ option.

Once done click the apply button to make it save.

7) Settings Tool:

Under settings tools you have following list of options,

SEO ( Search Engine Optimization ):

General Tab : Toggle to respective page through left side menu. And add Title, Description, Keywords, User friendly URL and specific image for that page. Once process get completed click apply and make it save.

Analytics : This page helps google to track your website.

Google Analytics Tracking ID : Create google analytics account for your website. Pick code from your account and paste it here.

Google Webmaster Tools Code: Create webmaster account for your website and past the tool code here.

After filling the both fields click apply and save it.

Background: Here you can adjust the website background colors and images. Select the respective page on right side menu.

Color : To change the color of website background, click the pencil icon and adjust the color your required then click apply ( If its required make the background color as transparent by clicking transparent button )

Image: To change or set the background image, click the pencil icon and select any picture in gallery. ( if you need any new image click upload new picture in gallery and upload required image from your local computer )

Position: Set the position of image by adjusting the grid layer.

Repeat: If you like to repeat the image more then one times in x directions check the Horizontally option or if you like to repeat the image more then one time in y directions check the vertically option. If you like to repeat the image both in x and y directions check the both options.

Attachment: By default background image is scroll able. Check the Don’t scroll background option to make background image as fixed one.

Size: Fill the background color based on page payout by selecting Auto,Contain and Cover.

Add other background over this?

To add another layer over background click ‘Add other background over this?’ and set however you like by following the same above steps.

Styles:

Select the respective texts like page title, sub title, heading 1, heading 2, heading 3, Normal,Highlight, Special, Footer and some more custom texts on left side menu.

Standard tab,

Font – To set the font type.
Size – To set the font size
Line height – To set the Line height
Letter spacing – To set the Letter spacing
Align – To set the text alignment ( Left, Center and Right alignments )
Style – To set the style of fonts ( Bold, Italic, Underline )
Color – To set the required text color.
Preview – See the preview of each changes in preview area.

Links,

Link Text – Set the link color and its style to Bold, Italic, Underline.
Link Hover – Set the link color on hover and its style to Bold, Italic, Underline.

Advanced,

Text Transform – To Transform the text to Capitalize,Upper Case and Lower case
Margin / Padding – To Adjust the text position on website.
List options – To set the list style as per your need.

Font scale for different device:

You can set the font scale for different devices like desktop, tablet and phone.

Favicon:

Set the favicon for your website here. ( Part of SEO )

Note : Supported image formats are PNG, JPEG, GIF and ICO. Internet Explorer browsers only support ICO format. When you are using ICO format, to see changes you might need to clear browser cache and even restart browser.

Settings:

General Tab

Check ‘Publish Site with forced HTTPS’ – to load your website over https.
Check ‘Publish Site with forced redirection’ – Here you can redirect your website url ‘www to non-www’ or ‘non-www to www’

Meta Information – You can add the meta tag here.

robots.txt – Enter your robots.txt code here.

Landing – To convert your website as landing page ( One or Single page website ).
Grid – To set the grid in website.
Layout – To set the top and bottom margins.
Full screen – To edit your website with Full Screen screen.

8) Language:

Site builder asia supports more than 40 languages. Select the languages you want and start to customize your website.

We fully covered the top level menus of free website builder tool and now we going to see the secondary menu areas. Secondary menu consists of various features let we discuss it further,

1) Text

Its helps to add different texts in website. Place the cursor over Text option and just drag and drop into website layout.

To edit double click over the text, Text editor will be appear over the text or else simply move the cursor over the text block, edit icon will be appear on upper right corner of the text block. Click edit
icon and then click Edit text option. Edit the text however you want here. Move the text wherever you want by simply drag and drop at any time.

2) Picture

Its helps to add different pictures in website. Place the cursor over Picture option and just drag and drop into website layout.

To edit or change the picture double click the over the image, change picture pop up menu will be appear. You can select image from Template Gallery, Free Gallery, Picture URL and Font Awesome Icon.

Template Gallery – Select default Template Image from Template Gallery. If you want to add any new image upload it from local computer by using Upload New Picture option

Free Gallery – Some free images are available in Free Gallery ,select the image whatever you want from here.

Picture URL – Just paste the picture url and click Insert, respective image will be appear on your website.

Font Awesome Icon – Here you can insert icon as a image. Just search for respective icon and select it then click select button.

3) Gallery

Its helps to add gallery in website. Place the cursor over gallery option and just drag and drop into website layout.

To add pictures in gallery double click over it and select the multiple image you want from Add picture pop up. You can also upload it from local computer by using Upload New Picture option. Once you selected the images click Apply button then it will be added in your gallery.

If you like to remove the image from gallery double click the gallery block and un select the select images then click Apply. Selected image only visible to you.

4) YouTube

Its helps to add video in website. Place the cursor over YouTube option and just drag and drop into website layout.

Double click over the YouTube video option, properties popup will be appear. In General Tab Enter your YouTube video ID under YouTube URL or ID field. Also set the start at time of video ( It load the video from mentioned time ).

Enable it to “Show suggested videos when the video finishes”
Enable it to “Show player controls”
Enable it to “Show video title and player actions”

If the given URL or ID is a valid one then preview of the video will be visible at the bottom of popup. After the process completion click Apply button to save it.

5) Google Maps

Free Website Buider helps to add Google Maps in your website. Place the cursor over Map option and just drag and drop into website layout.

Double click over the google maps then properties pop up will get appear. Get API key from google and paste it over API key field. Mention the address of your location in Address field.

Set the Zoom level depend your requirements. Max zoom level – 22, Min Zoom Level – 1.

If you not get the proper location in map, drag and drop the marker and set the address. Once done, click Apply button to save it.

6) Shape

Its helps to add shape or box of required size in your website. Place the cursor over shape option and just drag and drop into website layout.

To edit double click over shape and properties popup will get appear. Under General tab you can change the properties of shape.

Shape Opacity – Adjust the visibility of shapes by entering the respective values here.
Border – Under border you can adjust Weight, Style, Color
Weight – Adjust the weight of border by pixel.
Style – Select any one among four ( Solid, Dashed, Dotted and Double )
Color – Adjust the color of shape whatever you need here.

Note : if you want different style borders for four different sides check use different borders option and adjust however you like. Once done the adjustment click Apply to make changes.

Rounded Corners – Edit the corner edges of four different sides of shapes by adjusting values over here.
Background – Set the background color or Image for the shape over here.
Size – Select Auto, Contain and Cover whatever you need. By default width and height will be auto, to change it un check the width & height and set the required size in terms of percent or PX.
URL – If you like to set the URL click the edit icon under URL and go to Link properties. From there you can set the Web Address, Page on your website, Email Address and File from your Website as a Links. If you need, set Link title under Link Title Field. To open Link in new tab check the “Open in New Window” option.

7) Line

Its helps to add Lines in your website. Place the cursor over Line option and just drag and drop into website layout.

To make changes in Line double click over it, properties popup will get appear. Under General tab you can change the options like Orientation, Style and Size.

Orientation – You can change line for both vertical and horizontal orientation.

Style – You can change line style based on your need. Four line styles are available Solid, Dashed, Dotted and Double.

Size – Change the size of line what you need.

Color – Change the color of line whatever you need by clicking pencil icon.

Click apply once process get completed.

8) Button

Free website builder helps to add different buttons in your website. Place the cursor over button option and just drag and drop into website layout.

To make changes double click over it , properties popup will get appear. Under General tab,

Text – To change button name type the name under text field.
URL – If you like to set the URL click the edit icon under URL and go to Link properties. From there you can set the Web Address, Page on your website, Email Address and File from your Website as a Links.
If you need, set Link title under Link Title Field. To open Link in new tab check the “Open in New Window” option.

Under States tab,You can change the fonts type, size of font,font alignment and button border styles here. Change the button look while it is in default,hover and active. Once done click the apply button to make it save.

9) Form

Free website builder have option to add form in your website. Place the cursor over form option and just drag and drop into website layout.Form – Its helps to add form in your website. Place the cursor over form option and just drag and drop into website layout. To make changes double click over the form. Properties popup will get appear.

Field Tab :

By default Name, Email and Message field get enabled. If want more you can enable Country, City, Address, Attachments and options fields. You can also add custom fields by enabling your field.

Email Settings :

Form will be sent to this E-mail : Any Domain Email Id

Form will be sent from this Email : Domain Email Id (Same as “Form will be sent to this E-mail”)

With Subject : Add the subject as per your need.

Form sent Message : Set the message for “if mail send successfully”.

Maximum size of attachments : Set the file attachment max size from customer end, By default it will be 2 MB. ( Note : If you enabled attachments in fields tab you can adjust it )

SMTP Enable : Enable it and if you select None use the below settings,( For example )

SMTP Host : mail.domainname.com

SMTP Port : 587

Username : xyz@domainname.com

Password : Use the email account’s password.

If “TLS or SSL” use the below settings, ( For example )

SMTP Host : mail.domainname.com

SMTP Port : 465

Username : xyz@domainname.com

Password : Use the email account’s password.

Settings Tab :

Under Settings tab you can add Google reCAPTCHA in forms( its very important to add in form to prevent spam mails ) . Get site key and secret key from form google and paste it over here. Mention label style if you need. And by default, Label column width is adjusted based on Google reCAPTCHA. If you need to adjust it manually mention the width by your own. Click Apply once corrections done.

10) Menu

Free Website Builder help you to add menu in your website. Place the cursor over menu option and just drag and drop into website layout.

To make changes double click over it. Properties pop up will get appear. In that three tabs will get appear Menu Style, Menu ItemStyle and Options.

Menu Style Tab :

Align : To Align text in menu ( Left,right,center and Justify )
Border : You can change menu border weight, style and color here. For more border corrections enable use different borders option here and make changes however you like.
Type : Make its type as Horizontal or Vertical here.
Collapse on mobile : If you don’t like to auto change the menu style in mobile enable “Do not collapse” or else menu style will get alter based on devices.

Background : Under Background option you can change background color, Image, Position and Repeat.
Sub menu background : Under Sub menu Background you can change background color,Image,Position and Repeat.
As well as you can change the menu background for mobile also,
Mobile menu background : Under Mobile menu background you can change background color,Image,Position and Repeat. Once all the corrections get completed click apply to save it.

Menu Item Style :

Here you can change the,
Fonts – By default more than 20 fonts are there, if you need any other fonts kindly upload by clicking edit font option
Size – Edit font size by varying the numbers.
Letter spacing – Edit Letter spacing by varying the numbers.
Text Transform – Transform your text to Capitalize, Upper Case and Lower Case.
Spacing – Adjust the menu spacing by just clicking in padding and margin areas. To adjust the top margin area, click at top and set the value for it. Same like you can adjust it for all the four sides.

Also customize the menu item while it is in normal, hover and active. Change the style ,color and background if need.

11) Language

Free website builder have option to add Language switcher in your website. Place the cursor over Language option and just drag and drop into website layout. It help your customer to view the website in different languages. To make changes double click over it. Properties pop up will get appear.

General Tab :

Language – Here you can select the language by clicking Add language option. After selecting the language click Add. Same like select multiple languages you want.
Language switcher – It helps to alter the view of languages switcher option. You can select,
Flags – It show Language switcher in terms of flag.
Drop down select – It shows Language switcher in terms of drop down select.

To make changes click the apply button.

12) Blocks

Free website builder tool have some default blocks. Place the cursor over block option and just drag and drop into website layout.

While drag into website layout, it will ask for which blocks you need to add. By default you will have About, Products, Teams, Media and Contacts blocks. Select whatever you need and click Add.
Then automatically respected block will add in your site. Drag and drop to wherever you want in website. Then start to alter the contents and pictures based on your need.

13) Social

Free Website Builder have option to add social media buttons or links in your website. Place your cursor over social option, select the icons what you like and just drag and drop into website layout.

To add social media URL double click over the icon and Properties pop up will get appear. In General tab Paste the social media link in Profile URL field. Then click apply to save it. To change the size of icon adjust the settings in option tab.

14) Advanced

Free website builder tool includes some extra features like,

Skype – It will link your customer with yours through Skype. Go to properties and add the Skype name then click apply to make it save.
Music – To add music files in your website, drag and drop the music icon and double click over it. In general add the mp3 file under MP3 file field. Enable ”Start playing when page is loaded” to play music automatically when page get loaded.
Banner – To add banners in website, drag and drop the banner icon and double click over it.
To add static banner – Select the image or add the image url. Then click apply to save it.
To add dynamic banner – Write the script as per your wish and make active your dynamic banner.
Flash – You can add the flash file through this option. Double click over flash icon then add the flash file from template gallery or from your local computer. Click apply to save the changes.
Ad sense – To add google Ad sense code in your website drag and drop the icon and double click over it. Under general tab add the google ad sense code and click the apply button to make it save.
HTML – If you feel some options are missing in website builder tool, just drag and drop the html icon then start to write your code manually and click save. Once save completed see the preview option to see the changes.
Table – To add table in your website just drop and drop the table icon into website layout. Then under edit option you can see the insert row, column above or below or right or left wherever you need.
And to change the contents in table double click over particular cell and add or edit the contents as you need.
Youku,vimeo – To add youku video drag and drop the youku icon into website layout. Double click over it and then paste the video url under Youku video url field. Click apply to make it save. Adjust the video setting by using given options.
Calendar – Drag and drop the calendar in website layout and display your event plan to your customer. To synchronize website calendar with google calendar go to properties and add the Google calendar ID under Google calendar ID filed. You can also adjust some of the settings like Calendar name, Language, Time zone and First day. Click apply to make save changes.

Live chat – To add live chat option in your website just drag and drop the zopium, olark or tawk icon into the website layout. Under proprieties general tab add the respective id and click apply to save.

15) Ecommerce

To include shopping cart in your website use the ecommerce tool available in free website builder. More than 25 options are there.Add store, products , payment gateway and whatever required option you need. Add the required options and go to properties to make the configurations or changes.

16) Maps

Apart from google maps you can add yandex, bing and baidu maps in website by using free website builder.

Yandex – drag an drop the yandex map from maps and double click over it then properties pop up will get open. Enter the Coordinates or address in field and click apply to make it save.
Bing – drag an drop the Bing map from maps and double click over it then properties pop up will get open. Enter the Coordinates or address as well as enter bing API key in respective field and click apply to make it save.
Baidu – drag an drop the Baidu map from maps and double click over it then properties pop up will get open. Enter the Coordinates as well as enter bing API key in respective field and click apply
to make it save.

Maximum we discussed all the features in free website builder tool. Further if you have any doubt kindly go to website builder tool and in bottom right corner you will find help option (Green color icon), click it and clarify your doubts there. Apart from this, for more help contact our support team we will ready to help you.

0 0 votes

Article Rating