Webnode Website Builder Guide

Introduction

Webnode is a versatile website builder, which takes great strides in the ability to create websites in other languages.  Not only can you build websites in 20 different languages, but you can also receive support in them as well.

Webnode offers a free plan, and then it has three different paid plans.  You can choose your paid plan to be for a personal, business, or online store website, and this will affect the features that come with each plan.  Personal and business websites have the same plan offerings.  Paying more will always result in more storage and more bandwidth.

Figure 1:  Paid plans for personal and business websites

Figure 1:  Paid plans for personal and business websites

The cheapest plan is the “Mini”.  This costs you $5.95 a month.  It adds the benefit of your own domain name, own mailbox, premium support, and website statistics.  You can also now add forms and background videos to your page.   The standard plan is $11.95 a month.  With this plan, you now get more mailboxes, Google analytics, a customisable footer, backup and recovery for your page, and a personal favicon (the image displayed in the tab or browser next to your website name or URL).  You also gain the ability to have your website come in multiple language versions (note that the website will not translate them for you, you must do this on your own).  Finally, the profi plan is $19.95 a month.  The only difference is much more storage, unlimited bandwidth, and 100 mailboxes.

If instead you wish to build an online store, you get a different set of options, and they are priced differently, although they are named the same as in the personal and business website plans.

Figure 2:  Paid plans for online stores

Figure 2:  Paid plans for online stores

As you pay more, you get more storage, more bandwidth, more mailboxes, and the ability to add more products to your page.  The mini plan costs $7.95 a month, and lets you add credit card processing, your own domain name, backup and recovery, premium support, and the ability to have a form builder on your page.  The standard plan is $19.95 a month, and adds the ability to import and export products, a customisable footer, and variations on your products.  You can also now create an export file to add to price comparison websites in order to help with product promotion.  The profi plan is $39.95 a month, and adds the ability to have an offline version of your page that you can download and store, as well as the ability to create password protected pages.

Finally, Webnode also provides a tab that lets you know the price for having different domain names.  For example, a “.com” website will cost you $18.95 a year, whereas a “.info” site will cost you $36.95 a year.  They also provide information on purchasing that domain for multiple years.  For example, “.com” will cost you $18.95 for one year, $36.05 for two years, and $85.25 for five years.  Note that you require premium services to use this domain, and the first year is provided for free.  Without purchasing a domain, your page will appear as MyWebsite.webnode.com.

Once you’ve decided on a plan it’s time to build your page!

Getting Started

First, head on over to webnode.com and choose “Get Started”.  You will then be asked to register with your website name, email address, and password.

You will next be asked if you want to create a personal, business, or store website.  You will then be provided with a variety of template options that fit with that type of website.  For each template, you can hover over it and decide to either preview or choose that option.

You will then be taken to the editor.  Here, they will inform you what your website address is, which is based upon the website name provided earlier.

Since Webnode appears entirely different for store websites, we’re going to cover it in its own section at the very end.  First, let’s cover how personal and business websites get built.

Main Menu

Your main menu will appear in the header of the website editor.

Figure 3:  Website main menu

Figure 3:  Website main menu

Pages (1)

From here, you can change the settings about your current pages, as well as add a new one.  If you drag the pages above or below one another, it will change the order in which they appear on the navigation bar.  You can also drag a page to the right in order to create a subpage.  Each page will let you choose whether or not you want it in the navigation menu, whether or not you want to password protect the page, and choose the SEO (search engine optimization) settings (the page title and page URL).  You can also choose to delete any page that isn’t your home page.

Choosing “+ Add a page” will take you to a menu to choose that page’s template.  Your options are:  blank page, photo gallery, about us, contact, pricelist, products, services, two columns, three columns, and testimonials.  Note that all pages will retain basic features of your template.

Settings (2)

This takes you to your account settings

General

From here, you can choose to change your Webnode plan.  You can also view how much of your storage and bandwidth you’ve currently used.

Domains

This lets you register a domain you have purchased, or choose a new domain provided by Webnode.  This requires a premium plan to implement.

Email Accounts

Here, you can manage your own email address for your website.  This is only available with premium plans.

Website Editors

This allows you to invite collaborators to get privileges that allow them to edit your webpage.

Website Settings

From here, you can choose your website name, turn on search engine indexing (so that Google can locate your page), change your favicon (if you have a premium plan), connect a Google Analytics account (only available with a premium plan), modify the header and footer HTML code (which is often used for SEO), and choose whether or not to show the cookie consent bar (required for use in the European Union).

Backup and Recovery

This allows you to manage the backup and recovery options of your page.  This is only available with a premium plan.

Languages

From here, you can choose to launch your website in another language.  This feature is only available for premium users.

Publish (3)

This lets you publish any changes you’ve made in the editor to your live website.

My account (4)

This lets you view your account details and switch between different projects you’re currently working on.

Now that you know the basics of your page, it’s time to add some content!

Editing Your Page

The first thing you should know is that anything already on your page is customisable.  If you hover over an area, a box will appear over it so you know what you will be editing once you click on it.  You can also modify how various sections on your page appear by clicking on the gear.  To add a section, hover between two sections and click on the plus sign to get an “add section” menu.  To add content to a section, hover over any dotted lines and you should get a plus sign that allows you to “add content”.  Note that, on blank pages, you need to have a section before you can add content.

Adding and Editing Sections

Choose add a section, and you’ll be provided with a variety of options for the layout of that section.

Blank

This section inserts a text element and title.

Text and image

This section gives you a title, an image on the left, and text on the right.

Two text Columns

This section gives you a title, headings for each column, and text under those headings.

Heading

This gives you a picture background with text over it.

Services

This gives you a title, and then three subsections for different service options.  Each service section had an image, a heading, and a text area.

Pricelist

This section is similar to services, but gives you prices to go with each service section instead of an image.

Testimonials

This will give you two sections, each with a photo location, a space for name, a space for title, and a space to insert a quote by that person.

Heading with Button

This section is the same as heading, but also provides you with a button element.

Two Columns

This gives you a title, two side by side images, and two side by side text columns.

Three Columns

This is the same as above but with three columns instead of two.

Photo Gallery

This gives you a title and a grid of images to change as you please.

Contact

This provides you with a title, and at left a Google map area where you can input your business’s address.  At right, it give you sections for your company name, phone number, email address, Facebook, and twitter.

Products

This provides you with a title, as well as three images and an overlaid caption on the image.

Newsletter Registration

This provides you with at tile, an email form section, and a subscribe button.

Order Form

This provides the user with a title, and sections for their name, email, a dropdown box for requested service, radio buttons for what they are interested in, a message area, and an “order now” button.

Reservation

This provides the user with a title, and sections for their name, email, phone number, date, and a note they would like to enter.

To modify any section, hover over it and select the gear.

Figure 4:  Section menu

Figure 4:  Section menu

You can change the section’s background with the images displayed, or choose “add an image” to customize the background.  Items with a play button (the last two in this area) let you choose a background that plays a video.  If you choose an image or video instead of a solid background, you will be presented with an “Effects” option to the right of “Add Image”.  Here, you can choose between a variety of filters and cover overlays.  For images only, you can also reposition the image and decide if there is an animation associated with your image.  You can also delete your section and everything in it at any time using the “Delete” button.

Adding and Editing Elements

Each section provides you with a variety of preset elements.  You can click between any of them to choose your own.  Each element has its own editing menu, which is presented when you click on the element after placement.

Text

This allows you to add text to your page.

Figure 5:  Text editing menu

Figure 5:  Text editing menu

  1. Bold
  2. Italicize
  3. Choose the overall text type and layout. You can choose between title, subtitle, heading, normal, and block quote.  How each one appears is dependent upon your theme choice.
  4. Choose the alignment of your text (left, center, right, or justify).
  5. Turn the text into a link. You can either type in a URL, or use the dropdown box to choose one of the pages on your website.  You can also choose if the link opens in a new window.
  6. Create a numbered list.
  7. Create a bulleted list.
  8. Undo last change.
  9. Redo last change.
  10. Delete this element.
  11. Increase indent.
  12. Decrease indent.
  13. Increase font size.
  14. Decrease font size.
  15. Change font color.

Image

Insert an image element.  First, it will ask you to upload an image from your files or choose one from your image gallery.  Image gallery lets you choose from “My images”, which are images you have previously uploaded to your account, “Images”, which are stock images provided by Webnode, or “icons”, which are stock images of certain logos or simplified images.

When you click on an image, you can either edit or delete it.  Editing the image lets you replace the image you’ve chosen from another option in your image gallery, provide an image of the description which will then be overlaid on top of the image, and decide if clicking on the image links to nothing, the original image, or a URL of your choosing.  If only part of the image is being displayed, a slider will appear at right and/or at the bottom that will allow you to change which part of the image is in the display window.  Nodes are also present around the photo to change the size of the photo element.

Photo Gallery

This will allow you to insert a photo gallery of multiple images.  You will be prompted to upload images for your photo gallery first.  You can drag the photos to rearrange them, or you can provide a description for an image or delete an image by hovering over it.  You can do any of these things, as well as add additional photos, at any time by clicking on the gallery and choosing “edit”.  You can also delete the gallery by clicking on it and choosing the trashcan.

Video

This allows you to upload a video to your page.  It will prompt you to enter the URL for a YouTube or Vimeo video.  At any time, you can change the displayed video by clicking on it and choosing “Edit”, which will prompt you to enter a new URL.

Line

This inserts a line at the location of your choosing.  This can be used to divide different sections.  The line’s appearance is determined by your template choice.

Map

This lets you insert a Google map view of any location you choose.  When choosing to insert a map, you will be prompted to enter your address.  Clicking on it and choosing “Edit” will let you modify the address displayed at any time.

Button

This lets you enter a button that links to a different webpage.  You can choose to enter a URL or to choose a page from your website with the dropdown menu.  You can also choose whether or not it opens in a new window.  Clicking on the button will bring up the button editing menu.

Figure 6:  Button editing menu

Figure 6:  Button editing menu

  1. This brings you to the page that the button links to.
  2. This lets you edit what the button links to.
  3. This lets you change the button’s style. Your options are determined by the template you have chosen.  You are only offered a certain number of styles based on this.
  4. Delete this element.

Contact Form

This adds a contact form to your page.  Once you’ve inserted a form element, you can click on it and choose “Properties” to determine whether or not this field is required, or delete it with the trashcan.  Clicking between different form elements let you choose to add a new form item.  You can choose between:

Short Text

This provides a one line entry form where the user can insert text.  You can change the label for this area of the form by clicking on “Text”, deleting it, and typing in whatever you want.

Long Text

This works the same as above, but provides the user with multiple lines in which to enter text.

Single Choice

This provides the user with radio buttons where they can select one of several options.  You can hover over an option to bring up a trash can to delete it.  At the bottom, you can choose “+ Add Option” to insert a new option.  You can change the text of any of the options by clicking on the text, deleting it, and typing in whatever you want.

Multiple Choice

This provides the user with radio buttons where they can select any of a number of choices that they wish to select.  Other than that, modifications work the same as above.

Dropdown List

This provides the user with a dropdown list where they can select one of a series of choices.  To change the options, click on the area and choose “Edit Options”.  Each line will appear as its own choice, so to enter a new option, go to the end and use the “Enter” key.  You can change the text of any of the options as well.

Email

This is very similar to the “Short Text” option, but if this area is a required field, it will not submit the form unless this area is in the form of an email address.  Also, an “@” symbol appears in the text box to remind the user what the area is for.

File Upload

This allows the user to upload a file to their form.  This option is only available for premium members.

Date

This appears the same as “Short Text”, but will bring up a calendar when clicked on for the user to input a date of their choosing.

Phone

This appears the same as “Short Text”, but if the area is a required field, the user will have to input the entry in the form of a phone number.

Number

This will either have the user type in a number, or use the counter presented at right to select a number of their choosing.

Submit Button

This appears at the bottom of your form.  If you click on it, you can choose “Action After Submitting”, which will let you either show a message that you enter below, or go to a page on your site of your choosing.  You can choose “Contact Email” to determine where the form gets sent to once someone completes it.  And you can choose “Style” to decide how the button appears.

Blank Form

This is the same as above, but will not provide you with any default fields for your form.  You can still add the same fields to the same location.

HTML

This provides you with a box to insert HTML code for your page.

File

This allows you to upload a file to your page.  It appears as a button that any website visitors can use to download that file.  The file will retain the same name, and the button will display as “DOWNLOAD FileName.FileType”.

Managing your website’s logo, header, and footer

Your website’s logo will appear at the top left of your page.  If you click on it, it will bring up your logo options.

Figure 7:  Logo Options

Figure 7:  Logo Options

To change the text associated with the logo, simply click in this box, erase the text, and type in whatever you want.

  1. Go to will bring you to the home page of your site for editing.
  2. Add logo will let you place an image in front of the text. After that, this will change to “Logo”, which you can use to either change or remove the logo.
  3. Format lets you change various aspects of the logo. You can bold, italicise, increase, or decrease the font.  You can also change the font type with “Font”.  Finally, you can change how it appears with “Style”.  Style options are:  basic text, basic text inverted, white background, black background, coloured background, coloured text with background, coloured text, transparent colour background, transparent grey background, or with borders.

Changing the header works the same as changing the background of your sections.  If you hover over it, a gear appears, which you can use to change the image as well as the effects of the image.  You can also change it to a plain coloured background or video here.

The same is possible with the footer.  You can also change your website’s copyright.  The default copyright is the website’s theme name.  If you have a premium plan, you can also delete “Powered by Webnode” and the Webnode banner at the bottom.

Online Store

If you initially choose to create an online store instead, you will not be asked to choose a template.  Instead, you will be asked to provide your contact details.

Figure 8:  Online Store Contact Details

Figure 8:  Online Store Contact Details

What you get next is the old version of Webnode.  Your web store will have several features.

Store Menu

Figure 9:  Store Menu

Figure 9:  Store Menu

New (1)

Create a new product, category, page, or article.

Product

Here, you can input a new product.

Figure 10:  New product menu

Figure 10:  New product menu

  1. Change the product name.
  2. Change the product’s price.
  3. Change the list price. This is the original price of the product before your discount (only to be used if you’re offering a discount).
  4. Choose a category for your product. You can only choose from categories you have already created.
  5. Upload an image for your product. You can also delete a product image you have already chosen by hovering over that box and selecting “delete the image”.
  6. Text options for your product description. You can change the standard text things, as well as add links, images, and files.
  7. Insert your product description here.
  8. Add tags for your products.
  9. Publish the changes you’ve made to this product.
  10. Save the changes you’ve made without actually publishing them.
  11. Cancel all changes.

You can also change “advanced” options for your product.

Figure 11:  Advanced products menu

Figure 11:  Advanced products menu

  1. Is this item currently on special offer?
  2. Who is the manufacturer of this product?
  3. Create a personal catalog number for your product.
  4. Input the manufacturer product number.
  5. Choose the item’s availability. You can choose from: one day, three days, one week, or by request.
  6. Input the number of items currently in stock.
  7. Input the warranty time for the product, if any.
  8. Input the weight of the item.
  9. Input variants on the product here. This feature is only available with premium plans.

Store Category

Here, you can input the page name for your new category, and determine if it is a subcategory by selecting previous categories as the parent.

Page

Here, you can create a new page for your store.  You can decide what the parent page is, and then you can choose from a template.  Templates are:  blank, articles, FAQ, Photo Gallery, and Feedback.

Article

This functions similar to a blog post would.

Figure 12:  Article menu

Figure 12:  Article menu

  1. Article name.
  2. Category (where it will be posted to).
  3. Date it will be posted.
  4. Undo last change.
  5. Redo last change.
  6. Change paragraph format (based on your template choice). You can choose normal, or headings 1-5.
  7. Bold the text.
  8. Italicise the text.
  9. Underline the text.
  10. Align left.
  11. Align centre.
  12. Align right.
  13. Create a numbered list.
  14. Create a bulleted list.
  15. Insert a link. You can link to a page, article or files and images.  You can also choose whether or not it opens in a new window.
  16. Insert an image. You can choose from images you’ve already uploaded, or upload new images.
  17. Insert an image, file, link, flash file, or table.
  18. Cut text.
  19. Paste text.
  20. Finder (search through the text you’ve already inserted for a given word or phrase).
  21. Replace one word or phrase with another of your choosing throughout the text.
  22. Change the font.
  23. Change the size of the font.
  24. Change the text color.
  25. Change the background color.
  26. Justify the text.
  27. Decrease indent.
  28. Increase indent.
  29. Create a subscript.
  30. Create a superscript.
  31. Remove formatting from selected text.
  32. Insert a block quote.
  33. Modify the HTML for your article.
  34. Change the article tags.
  35. Publish your article.
  36. Save your article’s changes without publication.
  37. Cancel all changes you’ve made to the article.

Go To Page (2)

This lets you view your webpage hierarchy, and switch between different pages on your store.  There is also a search bar for looking for different pages if you have so many they aren’t easily visible.

Publish (3)

This lets you publish any changes you’ve made to your store.

Preview (4)

Here, you can choose to preview your published page, or preview your page with any changes you’ve made pre-publication.

Page Layout (5)

Here, you can change the layout of the page you are currently on.

Delete (6)

Delete this page.

Properties (7)

Change page properties.  This includes page name, web address, parent page, and title.  You can also modify the meta tags for SEO.  Finally, you can decide if the page appears in the menu, in the site map, and the tags of the page.

Security (8)

Secure the page with password protection.  This is only available with premium plans.

9 through 15 are “Create Content” options.  For these, you drag and drop the elements to where you’d like to insert them, and then click on that area to modify it with “Edit Content”.

Text and Images (9)

Here, you can insert text or images into the page using the same tools discussed in the “Article” section.

Poll (10)

This allows you to insert a poll for your page.  You can ask a question, as well as add or delete answers.  The results will be displayed as bar graphs, with a counter displaying the number of people who have chosen that particular option.  At the bottom, the total number of votes will be displayed.

Photo Gallery (11)

This requires you to upload several photos simultaneously.  Then, you will see all the photos displayed in the gallery.  Clicking on the image will let the visitor view it full-sized.  You can also change the settings to modify the photo gallery name, display type, number of photos, and enable paging.  You can choose to display total number of photos, the photo description, and the thumbnail size.

Form (12)                   

From here, you can choose which type of form you wish to create.  You can make a new form, a content form, a newsletter subscription form, or an event registration form.  Although the layout for adding the form is different, it functions the exact same as the forms we described earlier, with the exact same options for what you can to your form.

Articles (13)

This will prompt you to choose a previous category, or to create a new one.  Then, the article will appear under that subheading.  It will then link to all articles in that category.

Store (14)

Here, you can choose to display a series of items in your store.  You can choose between special offer products, best-selling products, and latest added products.  When entering the products block, you can choose if you only want to show products from specific categories.  Clicking on the wrench of any of the products will take you to the management page for that product.  If you click on settings, you can change the block name, number of products per page, and whether or not images are displayed.

More (15)

From here, you can add various widgets, social networking tools, business tools, or embed HTML.  Widgets include FAQS, forums, a tag cloud, a Google Maps area, or a YouTube video.  Social networking tools include Facebook page, like, and comment buttons, a Google + share button, and social icons of your choosing (for Facebook, twitter, email, and google plus).  Business options let you enter a Survio survey code or a Reservio online booking code.  Finally, embed code lets you paste in any HTML you want for formatting your page.

Files and Images (16)

This takes you to your file upload page.  You can look at files you’ve previously uploaded, or upload new files.  You can also create a new folder to hold a certain category of images or documents.  The default two files are documents or images.  At the top right, you can also use a search bar to find a specific item you’re looking for that you’ve already uploaded.

Manage Template (17)

From here, your options are to change your website template, change your mobile template, or change your advanced template settings.

Changing your website template takes you to the “select your template” menu.  My templates lets you import a template you’ve created, or download the template you currently have.  All templates lets you view all possible store templates.  Premium templates let you only view templates that are available to those with premium services.  Finally, business categories let you view templates by various categories, labelled A through L.

Change your mobile template lets you view all possible templates for mobile devices.  There are no premium mobile templates.  If you preview these templates, it will take you to a mock mobile device so you can see how your template will display on a smaller screen.

Advanced template settings let you manage a variety of aspects of your page.

Figure 13:  Advanced template settings

Figure 13:  Advanced template settings

  1. Header lets you change the appearance of the header by choosing whether or not to display your website name, what the website name is, if there is a slogan (which will appear below your website name), and if there is a logo.
  2. Footer lets you change the footer text, and (if you have a premium plan) lets you remove the Webnode footer.
  3. Contacts lets you choose whether or not to display your contact information, including the store name, email address, phone number, address, and any other information you wish to add here.
  4. Change the layout of your template.
  5. Change the font for your page.
  6. Edit the CSS for your page. This is only recommended for users advanced in HTML.
  7. Input text and images to your page. This works the same as described above.
  8. Input polls to your page. This works the same as described above.
  9. Input forms to your page. This works the same as described above.
  10. Input articles to your page. This works the same as described above.
  11. Input store listings to your page. This works the same as described above.
  12. Input widgets, social networking tools, business tools, or HTML code to your page. This works the same as described above.
  13. Change the favicon for your page. This is only available for premium users.
  14. Input a meta tag for authentication for Google.
  15. Insert your Google analytics tracking code.

Text and Languages (18)

At the top, you can change the language for your store.  You can also change various codes associated with certain aspects of your website.  It is not recommended to change these unless you are an expert at HTML.

Settings (19)

From here, you can change your header, footer, or contacts.  These work the same as described in advanced template options.

Edit Menu

If you head over to your site menu, you can edit this information.  You can view all of your pages, and their publication status.  If you click on the dropdown menu associated with each page, you get a series of options.  You can go to a new menu to display subpages.  You can publish this page.  You can choose “move to” to make it a subpage of another page.  You can choose properties to change that page’s properties, as described earlier when we learned how to create a new page.  You can change the security of the page to be password protected if you are a premium user.  You can delete the page.  Finally, you can move the page up or down on the menu using the up or down arrows (so it appears before or after certain pages in the menu bar).

Edit Categories

If you head over to your sites categories, you can edit them.  When you click on each category, you get a menu page identical to the one for the pages mentioned above.  This allows you to rearrange and modify your categories as you see fit.

Finally, note that you can change any content that you have added to your page by visiting that area and either changing the settings or selecting “edit content”.

User Menu

When you leave Webnode and then return, you’ll need to login again.  Then, you are taken a page where you can view all of your “Projects”, aka all of the websites you have created under this email address.  When you view one of these projects, you can either choose to edit it, register a new domain, or upgrade to premium.  You can also view website traffic stats, which will tell you either the number of visitors or page views in the last 30 days, 12 months, or for the lifetime of your website.  Finally, you can view the entries to any of the forms you have placed on your website.  Lastly, you can use the trashcan to delete this website.

Conclusions

Overall, Webnode makes it very simple to create a very beautiful personal or business webpage.  However, their online store plans are a bit on the pricey side, and use the “old version” of Webnode, which tend to make your store look very outdated.  In addition, the tools used to modify the online store also from the old version, and feel quite a bit outdated.