How to Build a Website Part 1

Part 1 of your Free Guide to building a website


In this article we’ll be covering how to use the Webeden to build a website, how to add realtime chat, message boards, galleries and more from the file library

You want to build a professional looking website that’s individual without the hassle of learning HTML. Welcome to WebEden.


What do you do if you want a good looking website, but don’t want to have to install and learn complicated new software? Previously the answer was either to pay someone else to create the site for you, which was very expensive, or to choose a wizard driven online site builder. These create generic, drab looking sites that are very restricted in terms of functionality and in terms of how much you can change them. WebEden is a new service that provides the next generation of online website building.

What is excellent about WebEden is the scope of the offering. Starting at only £2.99/month, cheaper than some standard web hosting packages, you get a hosted website together with an online website creator that makes generating a site and updating it, from anywhere in the world, a walk in the park.

Best of all, WebEden grows with you, so you can start out knowing nothing about creating a website and the system is intuitive that you can have your own new website up and running in half an hour. If you just need a site that looks presentable and offers the right information that you need, then simply use the wizard to set up a site. Even in its most simple form though, it’s better than other wizard driven sites, as you can choose the type of site you are after so that the right pages are created, and then a basic template for the design and then the colour scheme you want as well.

These tick box driven decisions by themselves mean that your site will have an individual look about it, but will look better than 90% of the hand created sites you see online. As you get used to the WebEden system though, you can edit the site and change any part of it that you want, all through the online interface. And we don’t just mean changing the colours, fonts or the graphics, the whole layout of pages can be controlled easily through your browser. The system can even password protect parts of your site and add Message Boards for interactivity. If this sounds interesting, then the good news is that you can try WebEden for free as they have a 14 day free trial, so you can play with the system all you like without any risk. Go to and sign up for free now.

Get started with WebEden

How to sign up with WebEden and get your first website ready for visitors in half an hour

Step 1

You can try out WebEden by clicking on the 14 day trial icon on the home page and starting the wizard. The wizard takes only a few steps and you don’t need to enter any credit card or financial data to try out the site, only a valid email address which is used to validate your WebEden account. The first step of the wizard gives you a set of options for the purpose of your website. By selecting the purpose, you decide the number and titles of the pages on your site, so for example you can have a home page with a music page, links, message board and hit counter, or a site for a club you may run with club news, events and photo gallery. You can see the different pages for each purpose by clicking on the relevant button – the list of pages will appear above. If none suit your purpose, you can choose a Blank purpose and add your own pages later. The next step will allow you to combine the pages titles you’ve chosen with a design template.

Step 2

WebEden has many advanced features which we’ll look at in later tutorials, but for now let’s look at one of the key ones, which is the menu editing feature, which is the key to great website building. The menu changes you make in the site organiser are automatically site wide, so you don’t need to worry about making sure changes are replicated across pages. You may also decide that you want a part of your menu to be a category for new pages, rather than a link to an individual page. Create the new pages and then drag them up so they sit under the category link. Click on the arrow next to the page number in the Organiser and it will make the page a sub-page of the one above it.

Now the Website Builder knows what type of site - and therefore what pages - are needed, it will combine these with the design template. Again there are buttons which when you click on one the preview will be shown above. The difference here is that as well as choosing the basic template for your page’s design, you will see there are three colour buttons under the preview. Once you’ve selected a template, click on the colour button you prefer and you will see the colour scheme applied to the template. Note that there are two pages of templates to choose from.

Step 3

Once chosen, you can move on to final step which requires you name the site and enter an email address. You can then create your own website and you will be taken to a view of your new site.

That’s it!

What’s next?

Now you have the site, simply click on any area that you wish to change and you will be able to edit it. Start with the basics, which is entering the text you want on your website.

By single clicking on an item you will see the bounding box that surrounds any item. This is like the boxes you will find in any design package on your PC, so you will find control boxes at the corners and mid-points of the bounding box. You can use these to stretch or shrink the object. You will also see that the floating Editor dialog changes as you select different objects on a page. This dialog allows you to change the dimensions of an object or the location of it by entering the pixel data. If the object is a text object you can double click on the object and you will now be able to change the text itself. If you already have the text that you want to appear on a web page written in a Word document, then you can copy it into your pages by opening the document and selecting the text and copying it to the clipboard by pressing Ctrl-C. Then go into WebEden and double click on the text box you wish to edit, then select the text by wanding it in, and press Ctrl-V to paste over it. When you have finished entering the text for a page, you can click on the Save icon to save it, or if you click on a different page in the menu, you will move to edit that page, and WebEden will prompt you to save the page automatically. As long as you don’t simply quit the browser, there should little chance of you inadvertently losing any changes you make to pages. Clicking on the pages in your site menu may take you to the individual pages so you can edit those, but how do you edit the menu itself to rename pages or add pages to your site. Website Builder makes this easier than any other method we’ve seen. Simply go to Pages / Organise pages and the dialog there lists the pages currently in your site. To change the order of pages in the menu, click on a page in the Drag column and move it up or down the list. Type over the page’s name in this dialog to change it on all pages, and click on the “Add a new page” to add one to the menu. See below for sub-menus.

Editing objects in WebEden

The beauty of building a website with WebEden is the speed with which you can edit pages or make site wide changes. Here’s 6 Menus to Basic Editing of your website

1. Edit menu

This allows you to operate on the currently selected object. Everything you see on a page is an object and to use it, you simply click on it and drag it around the page, or click here to edit it. You can delete objects from the Edit menu, send them to the back (as you can put objects on top of each other, like using layers in DTP programs), or change some more generic settings. For example, you can change the settings for the current page here, so you can set it as a private page that only registered users can see. The Edit menu also allows you to manage who is registered on your site and send them emails if you have chosen a package that includes this feature. Many of these features are not normally available in low end hosting packages or in normal HTML, but are possible because of the unique delivery system WebEden uses.

2. Pages menu

This menu lists the pages on your site, so you can jump to one to edit it. It also allows you to organise the pages and set which is the home page, etc. a great way to create your own website.

3. Insert menu

This is a very powerful menu as it allows you to add all manner of elements to your pages. As well as text and images, you can choose File, which brings up the File Manager. We’ll look at this in detail in the next part of this series, but you will come to love it because it gives you access to the WebEden library, which includes polls, animations, frames, games and much more.

4. Design menu

You can change the fonts, background, and the “Page Master” which is the template that contains elements that are on every page, like the menus. This menu also allows you to change the overall dimensions of your pages.

5. Active object

The currently selected object on a page will show a bounding box, a real help when you make your own website.

6. Editor dialog

As you select different objects or add ones, this editor changes to offer options.

When you create your own website with WebEden you can have interactive elements like polls added easily, as well as your own images, all added to the existing template.


When you create your WebEden account, you simply step through the wizard as described on the next page and select a subdomain, like tutorial., as your web address. If you want to have a “proper” URL, you can register a web address and simply get it to forward to your WebEden address automatically.

That’s all for now

Check in for part 2 to find out how to carry out advanced editing to make it even easier to build your own website with Webeden

Download our Guide (howtoguide.pdf)

How to Build a Website Part 2

Part 2 of your free guide to building a website


The last tutorial showed how to create your own website in WebEden and how to edit the text on the page. We’ll now look at more advanced editing of objects within a page and making sitewide changes by editing the master page. This is one of the best ways of making your site professional when you’re building a website with Webeden.


The master page is one of the advantages of the Web Eden system, as it uses a basic template for the design which is applied to all the pages. So, if you have something you want to become constant across all pages, like a logo, then you can add it to the master page, rather than trying to place it on each page individually.

How to do it

To edit the master page, go to Design / Page Master and you’ll see what looks like a blank page of your site. If there are any elements on here that you don’t like, simply left click to select the object and then click on the Delete button in the top menu. Adding elements is just as easy. Click on the Insert button and then choose what it is that you want to add. If it is a logo, then the image is likely to be on your PC, so use Insert / Image / Upload an image. You then click on Start Upload and then use the browse button to select an image from your hard drive. You can get Website Builder to optimise the graphic for the web automatically as it uploads, but you may wish to disable this feature if you have already optimised the image on your PC. Once uploaded, click on the My Files tab on the dialog and then double click on the Images folder and you’ll see the image there. Click on it and you can see a preview, and if you click on Use this, the image will be added to the page.

Close the File Manager dialog and click on the image on the page and you can drag it around, or move it with the arrow keys on your keyboard to position the image on the page. Click on Save in the Page Master dialog and the image will now appear in the same position on every page on your website.

You can also add special objects to the master page, such as a clock, to go along with the date. Move the date to the left, and then click on Insert / Object / Clock (or More, if you want to choose a style of clock from the File Manager). Then click on the clock object and place it to the right of the date. Click on Save and Exit to quit the master page view.

6 ways to use the WebEden Editor dialog when you make your own website

Start by clicking on an object to select it in the Edit my site view

1. Info

This will show a drop down menu with the names of any objects placed on this page. It does not include objects from the master page which can only be edited as described on the left. Select an object from the drop down menu or by clicking on it on the page. You can also change the dimensions of an object here by entering them in, or you can do this by using the resizing handles on the objects themselves. Some objects will show a rotation button on this tab. Click on this and you can enter a degree to rotate the object. This a great tool to help you build a website.

2. Font

This tab is only shown when a text box is selected. Select a font from the drop down list and it will change the font for the whole text box. If you want to mix fonts on a page (though we don’t advise it from a design point of view as it rarely looks good), then simply add a new text box - see (6). On this tab you can also choose point size for the text and justification and text style.

3. Font Picker

As well as the drop down menu, there is a Font Picker. Click on the Plus sign, and as well as using the standard fonts, you can use some special graphic ones - another unique feature of Web Eden. This will marginally increase the download time for users, a factor you should take into account when you create your own website.

4. Style

This tab changes according to the object, so for text objects it will allow you to choose a background colour for the text box, and a border colour. Text colour is chosen on the Font tab – see (2). For graphics, it allows you to select a degree of transparency, so you can make images see-through.

5. Link

This will make an entire object into a link, or if you want to just make a part of some text into a link, then drag a selection of the text when it is being edited and you can turn that into a link here too. You can choose the type of link you want, from a straight URL, to a PayPal link, a file for download, or a login page. If you want to link to an page within the site, you can do that here, but the page must already exist to do this (see next page).

6. More

Click on this little arrow icon and a new flyout menu will appear with more options. You can save the page, open the File Manager, or duplicate objects, delete them, send them to the back, etc. This also allows you to add new text boxes or title text boxes to a page. The master page makes it easy to add or remove elements that are consistent across the site, an important point when website building to the highest standards.


As you become more at home making a website with WebEden, you can switch to the Advanced View which gives you quick access to all the features, including the advanced site optimisation ones that we look at in the next tutorial. To switch views, just click on the Basic View text at the top left within the Edit view.

If you haven’t tried website building with WebEden, then the good news is that you can try WebEden for free as they have a 14 day free trial, so you can play with the system all you like without any risk. Go to and sign up for free.

That’s all for now

Check in for part 3 to find out how to add interactivity and content to your pages, including a fully functional Chat page.

Download our Guide (howtoguide.pdf)

How to Build a Website Part 3

Part 3 of your free guide to building a website


In the last article we showed you how make site-wide changes when building a website by editing the master page. In this article we’ll let you know how to add useful content to your pages, to make sure you’re building a website with the best functionality. You can also get your site ready for users by quickly adding interactivity and content to your pages, including a fully functional Chat page


By now you should have the hang of adding pictures and editing text in the existing text boxes. You should also know how to add new pages to the site by adding them to the menu (see previous tutorial). Now let’s look at adding extra elements to a page and adding pages without them appearing in the menu – it’s the next step to help you create your own website using Webeden

Lets do it – here’s 10 steps to adding extra elements to your pages

Step 1

Click on Files to open the File Manager and then select the Library tab and click on Animations / Handwritten. Click on “Circle it” and select Use this. The animation will be added to the page. By default, the line drawn is white. Select the animation object and in the Editor dialog click on the Style tab and change the colour to black. You can also resize and rotate the animation on the Info tab (see previous page). Position the circle over the top of an area of the page that you want to draw attention to, like a picture.

Step 2

Now add the arrow from the Handwritten section in the same way. Use the Rotate feature on the Info tab to enable freehand rotation using the object’s handles. When you add a page to your site, you can choose from a list of different page types. There are different templates readily available so you don’t have to design a complicated page from the ground up, which makes for a handy shortcut when you’re website building. For example, the blog/news page will create a ready made weblog for you, together with an integrated editor to allow you to add items.

Step 3

You can also add links only, so a button appears in the menu, but no page is created (the opposite of adding a page, but not having it visible). There’s even an image gallery – one tip with images you upload is to ensure the dimensions aren’t larger than you need to keep download times down, somthing you should take not of when you create your own website

Step 4

Now click on Insert and select Button Link. This will add a bevelled image to the page. Move it to within the left column. Click on the Link tab in the Editor dialog and enter the URL you want to link to, like Click on Apply and you’ll see that the text on the button changes also. Click on the Style tab and you can now change the text on the button. Do it in this order, as changing the link will overwrite the text.

Step 5

The next step on your website building fast track is to click on the More arrow in the Editor dialog (top right) and select Body Text Box (you can hover over each icon to get a tooltip). Drag the text box to the left column, underneath the button we just inserted. Use the handles at the corners and bottom of the text frame to resize it to fit within the column. Now select the Style tab and click on the Background button to enable a background for the text frame, and select a colour from the drop down menu to the right, and do the same for the border.

Step 6

An alterative when you make your own website to using the text frame’s background and border is to add a background frame, such as a shape with bevelled edges from the Library, and then add a text box on top, which will show the frame beneath it through it.

Step 7

Now go to Insert / New page and click on the Add new page button; just make it a blank page. Label the page “Chat” and then disable the radio button in the Page visible column. This will add the page to the site without it being added into your automatically generated menu. We will add a link to this new page within the master page, but to do this, you must create the page first as you cannot add a link to a non-existent page, even if you know what you are going to call it. You can still access the page to edit it from the Pages menu – a perfect website building tip.

Step 8

On the new page, double click in the title text box to edit the text and change it to “Chat to other user online” and then single click on the main text box and click on the Delete icon.

Step 9

Now click on the Files button to bring up the File Manager and from the library, select Functional and add the Chat object to the page. Close the File Manager and then resize the chat object to fill the content element of the page underneath the headline. Click on Design / Page master and remember to save the page when it asks you. Always remember this if you want to quickly build your own website!

Step 10

Add a new button link and drag it to the top right of the page, above the date. With the button selected, choose the Link tab in the Editor and select the Pages icon (it looks like horizontal lines). This allows you to link to a page on your site. Select Chat from the drop down menu and click Apply. As before the button’s text will change.

Step 11

In the Style tab change the button text to “Chat to other users”. Click on Save and Exit.

Step 12

Change to the View my site, so you can see the site as a user, rather than editing it, and you will see that we have added a fully featured chat feature to our site, all within the space of a few clicks. What an amazing what to create a website that looks professional and advanced.

Expert tip

When you add a page to WebEden, you can choose from a list of different page types. There are different templates readily available so you don’t have to design a complicated page from the ground up. For example, the blog/news page will create a ready made weblog for you, together with an integrated editor to allow you to add items. You can also add links only, so a button appears in the menu, but no page is created (the opposite of adding a pgae, but not having it visible, as we did in Step 3). There’s even an image gallery – one tip with images you upload is to ensure the dimensions aren’t larger than you need to keep download times down.

That’s all for now

Check in for part 4 to find out how to add some really cool stuff to make sure that you can build a website, and it’s the best one possible!

Download our Guide (howtoguide.pdf)

How to Build a Website Part 4

Part 1 | Part 2 | Part 3 | Part 4 | Part 5

Part 4 of your free guide to building a website


In the last article we showed you how to add useful content to your pages, to make sure you’re building a website with the best functionality. In this article we’ll let you know how to add some really cool stuff to your site, such as multimedia visual and audio tools.


Even the more advanced coder would blanch at the thought of having to create a music player to embed in a website, and adding a payment solution for a small business or club isn’t exactly a breeze either. So, you’d be right to be wondering how we managed to do both together in a little under five minutes.

The answer of course lies in the library of cool multimedia enhancements that resides within the WebEden Website Builder. Previous online site construction tools you may have seen might have been limited to some sort of online wizard that allowed you to control the text and maybe images, but WebEden is different. As it uses a complete WYSIWYG interface allowing you to place elements as you might do in a word processor, they have managed to extend its features with all manner of extras that can be embedded in your site and will play on your visitor’s PC without them needing to install any new plugins or software.

Here we go, lets get advanced…

All of the items for your site can be accessed from the same dialog, the File Manager. Go into your website and edit it, and then click on the Files button (or click on the Insert menu and choose File). The file dialog that opens up looks very much like a standard Windows file dialog so you should feel at home.

The first tab is called Library and there is a list of folders down the left. These split the multimedia elements available to you down into categories. The animation category gives you lots of animated sprites that you can place on your page. The list appears in the middle column and there are two sub-folders – double click on these to see the contents. You’ll find that these animations can be placed on top of images or text boxes on your page, so that you can see the image, etc.  through it. This is a really useful feature and can really help you to create a website that looks the business!

Audio contains music players and Clipart has a huge number of scalable cartoons – for photos, look in the images folder. Clocks and dates allow you to add realtime, erm, time to your site, while Countdown timers are useful for events pages. There are Functional Tools (see right) and Galleries (see right) as well as Games, Site Counters and Text Effects. The latter allows you to create all manner of animated logos or headings, and by combining a selection of the above elements anyone can create a very impressive site. Careful though, when you make your own website don’t use too many of these, otherwise it can look quite amateurish.

Pick of the extras

Here’s how to use some of the more interactive features WebEden offers.


There are different types of players: ones that can play single tracks, multiple tracks or ones that are hard coded to play a built-in track. For the latter, simply drag the chosen player onto the page. For either of the first two, choose a player you like the look of and add it to your page. Next click on the Upload tab and upload the MP3 files you want to use in your jukebox. Now, while editing your site, click on the Stop button in the player on your page. Click on the Plus icon to add a track from your files, then click on the Save icon to save the playlist. Go on, have a go – this is a great feature of website builder.

Chat (from Functional)

See last tutorial

Clocks and dates

These are easy; you simply choose a style you like – multimedia elements show previews in the very right of the File Manage dialog box – then drag it onto your page.


Simply drag one of the games onto a page

Poll (from Functional)

Add the Poll, then select it. In the Editor dialog, choose the Setup tab and select a number of answer options. Then click on the pencil icon to enter the question and again to enter each answer. Click on Finish in the Editor.

Pop-up gallery (from Galleries)

See next tutorial

Seller Tools

See next tutorial

Site Counters

Again, you just need to add one of these to the page for it to work automatically.

Text effects

Simply add one, then edit the text and its colour in the Editor dialog’s Style tab.

That’s all for now

Check in for part 5 to find out how you to add a payment system – ideal if you’re a start up or established business and want to build a website to sell products!

Download our Guide (howtoguide.pdf)

How to Build a Website Part 5

Part 5 of your free guide to building a website with


In the last article we showed you how some really cool stuff to your site, such as mutltmedia visual and audio tools.  In this article on how to create your own website, we’ll show you to add a payment system – ideal for a start up or established business.


Believe it or not, creating an e-payment system can be done in WebEden in only a couple of clicks – ideal for clubs or home businesses

If you run a small business and want to sell items, or if you have a club and want to be able to sell merchandise, or even if you’re a home user with things to flog, you can now do it more easily than ever with WebEden. When you’re using the website builder, create a page that will include the items you want to offer for sale and add some text explaining what your postage policy is, whether you ship abroad, etc. Add a description of each of your products , with a price and upload and use an image of each product if you can. Remember that you can use the built-in “Optimise for the web” feature when you upload images to WebEden so that the page size doesn’t become too large to download. To add a text box for each item, go to Insert / Body Text. As you design your page, make sure you leave room for a button that will allow people to purchase each product. If you are going to ship abroad and charge a different postage rate, add a text box for the price of each, so you easily adjust the layout. We really hope you make use of this great feature of our website building system!

8 steps on how to add a payment system

Step 1

Click on the Files button and in the Library, go to Seller Tools and click on the Add to Cart button.

Step 2

Click on Use this to add a button to the page. You may want to adjust the size of the button, which you can do by dragging the corner handles out.

Step 3

Put the button next to the item you are selling and with it still selected, click on the Style tab on the Editor dialog. You can click on the arrows to scroll through different types of button until you find the one you are happy with.

Step 4

Now click on the Link tab and click on the icon with the two silhouettes of people on it. This is the PayPal link.

Step 5

Click on Edit and then enter your email address, which will ensure that the money is allocated to you according to your PayPal account. If you don’t already have a PayPal account, you need to complete a free registration process that will allow you to receive payments in order to use PayPal. PayPal makes its money by taking a small percentage of the sales amount. Click on the Info tab to create an account.

Step 6

On the PayPal tab make sure you change the option to “Add to cart”. Click on the Setup Item tab and then enter a description of the item. It is also a good idea to give the item an ID as this will allow you to recognise what has been ordered when you get an order confirmation email. If you have used different UK and overseas prices, then put an identifier in the ID. For example, for our candle, we have created an ID of Can1UK and Can1ex for the same item sent to a UK address and an export address. If you are a business and your inventory has stock codes, you can, of course, marry these up here. The ID codes are purely for your use, so enter ones that make sense to you, ones that will make your website creating process easiest. At the bottom of this tab you can then enter a price and choose a currency, so you can accept Euros if you would like to do so.

Step 7

Click Finish to close the PayPal dialog and then, crucially, click Apply in the Editor dialog – if you don’t do this, you will lose all the PayPal information you have entered. The rest of the Seller items work in exactly the same way, so add any more ‘Add to carts’ that you want and process each with a new PayPal link and an unique ID.

Step 8

You can then add a “View cart” button. Add a PayPal link to this button, but instead of selecting the “Add to cart” option on the first tab, simply select the “View cart” option, click on Finish and again, remember to click on Apply in the Editor.

That’s it – you’ve used our website builder to make your own online store! If you only want to sell a single item via your site with no different postage options, then add the Single Item Purchase item from the Library and choose that option from the PayPal dialog. There’s no reason why you can’t use this system to sell unwanted items from your home even instead of using an auction site. Just remember to remove any items you sell from your pages as people buy them so that you don’t end up selling the same item twice. To make people feel comfortable buying from you, put quotations from happy customers on your page.

Expert tip

The WebEden website making system has a Popup Gallery item in the Galleries section of the Library. You can use this for showing off family photos, or any other images you want, but it can also be a great addition to your e-store. If you have an item for sale, you can add a single main image of the item, and then place a popup gallery underneath to show the item from different angles. Simply add the gallery and then double click on the item. Click on Add image to add an image to the gallery. Double click on an image to see it and give it a title. In the Editor Style tab, you can control the number of rows and columns, and have more control by clicking on Advanced.

That’s it. We hope you enjoyed our 5 part guide to website building with Webeden. Click on the ‘build’ tab and start your free trial!

Download our Guide (howtoguide.pdf)


© 2015 Webeden. All rights reserved. Made in the UK