This tutorial will show you the basics of the PrestoWebsite builder. By the end you'll have created and published the first page of your website. To edit your website we reccomend using the Google Chrome browser, this will provide you with the fastest and most relaible editing experience, but the PrestoWebsite builder will work with all modern browsers.
##Creating your Homepage
Your homepage is the first page a user visits on your website when going to your domain name. Creating a page in PrestoWebsite is very easy and once you know how to create one you know how to create them all.
We'll start with your homepage. To start editing, select the Site icon in the top left, if it's not selected already. The site section is where you manage and edit all of the pages of your site, and their content.
###Editing Page Settings
Page settings allow you to set things such as the page name, and the browser title. To edit the page settings select the cog icon next to the Home Page.
The page settings window appears. To begin with we'll change the Title In Navigation and the Title In Browser. The 'Title in Navigation' is the text that appears in your sites navigation menus. As an example we'll change this from 'Home Page' to 'Home'.
The 'Title in Browser' is the text that appears in the users browser tab. We'll change this to 'Home - John's Recruitment'. It's always a good idea to include your company name in the page title so people can easily identify which site they're looking at via the browser tab.
As an optional step you may want to add some search engine keywords and description to this page. 'Keywords' are how search engines such as Google know how to match your site to what people are searching for. 'Description' is the short bit of text that appears under your domain name in the search engine results.
Once you've entered your settings click Save. You will notice that the main navigation of your site has changed to 'Home'.
###Editing Page Content
The main part of the editor shows your page, virtually any item on the page is editable, or movable just by clicking it. To start, lets set the company name at the top.
Each page has a main title, to edit this, click on the title (in this case it's 'Company Name'), the edit panel will opens on the left. Edit it to your choice and click Save.
####Editing Page Text
Now, you can do the same for the other page text, simply click it, and edit it in the window that opens. Now lets edit the homepage text. Click on the large text area that you want to edit, and enter the text for your website's homepage. This is a great place to give people an intro to your company and what it does.
Note that as well as editing text, you can also change the style, such as add bold, change justification or insert links to other sites. Once you've made the change click Save.
The PrestoWebsite builder keeps a library of the images you upload so you can easily browse and reuse them. It also has a powerful image editor, where you can do all sorts of effects and modifications to images you have in your library (read more about this in the Editing Images tutorial).
Lets add a new image and make the mini image on the homepage. To start, click on the image you want to edit, the 'Image' panel will open on the left. On this panel click the Select Image button.
If you have images in your library already you'll be able to use one of them, or upload a new image. In this case we're going to upload a new image. To do this select the Add Images button
On the next screen select Choose Files and navigate to the image on your computer. You can select multiple images by holding the CTRL key while clicking. Once you've chosen them select Open.
After a few seconds for the image(s) to upload, they'll be added to your library:
Simply click an image to apply it to your page, the end result will look something like this:
####Editing the Feature Section
A feature section is the most prominent section on a page, it's the place the user's eyes will focus on when they first open your site. We're going to add a image to this section and edit the button.
To begin, click on the feature section and the 'Feature' panel opens on the left. To begin we're going to customise the background image. If you have your own image you can upload it, or you may prefer to leave it as the default image for now.
If you wish to add your own background photo, select Use your own image in the feature panel and then click Choose Image. Your image library will open up and you can choose an existing image or upload a new one using the steps above. In this case we've used an existing image, and the result is below:
You can also drag the image to reposition it (click and drag the preview image in the feature panel).
Now that we've added an image, lets add some captivating title text. In the Header Text option enter a few words or a short sentence, it should summarise what you do. You can also use the Strapline Text which will add smaller text under your main title if you need more room for more words.
Lastly we need to make the button do something, and change it's text. In our example, this button is going to link to a contact page, as we don't have a contact page built yet, we'll just point the button back to Home, we can then build a contact page and change the button's link when ready.
To do this, drop down the Button Link menu, select Internal and then click Save to set the link to 'Home' for now.
We're also going to change the button's text to 'Get In Touch':
Once complete click Save and your feature area will update - it should look something like this:
Now we've covered the basics to building a page in PrestoWebsite you should be able to take this knowledge and build more pages. For now though we want to preview our page, and then publish it to the web.
To preview the page click on Preview in the top menu bar.
You can now see your site in full page preview mode, this is how it will look to the user when visiting. Give it a quick check over, and change back to the Edit mode by clicking Edit again.
To publish your site it's as simple as a couple of click, click the publish button in the top menu bar.
Then confirm the publishing:
After a few seconds your site will be live on the internet! You can click on Go to Site to view it on the internet, and then give this link to your friends!
##Changing your Theme
You may have already chosen a theme you like for your website during the signup process. If so you may wish to skip this step, but remember - you can change the theme of your site at any time and all of your content will stay intact. This is handy if you decide you don't like the theme you've chosen and you've already built most of your site, or perhaps if you just fancy a change.
Themes are made up of a template, you can then customise items of the template such as font and background colour (read more about this in the the Customising your Theme tutorial). For now we'll just choose a Template.
To choose a new template select the Theme option on the left menu, and then select Browse Templates.
You can then browse the available templates and choose the one that suits your site best. The template choices available to you depend on the PrestoWebsite package you have, you may wish to upgrade to use a specific template.
You can click on the templates to preview them, when you find one you like select the Use Template option in the top right.
After a moment the template will load and you can begin editing.
This concludes the getting started tutorial of PrestoWebsite, you should now be able to carry on and add new pages, more photos and content. Don't forget to checkout our other tutorials on advanced topics, or just have a play!
Truth be told, it’s difficult for a web application that doesn’t have some kind of identification, even if you don’t see it as a security measure in and of itself. The Internet is a kind of lawless land, and even on free services like Google’s, authentication ensures that abuses will...
Although data persistence is almost always a fundamental element of applications, Node.js has no native integration with databases. Everything is delegated to third-party libraries to be included manually, in addition to the standard APIs. Although MongoDB and other non-relational databases are the most common choice with Node because if you...