To get started with establishing a website, please see the previous post “Starting a Website with the TurnKey Business Server.” 

Once you’re in the Site Editor, you’re now ready to begin creating a website.  While inside, you can click on the question mark at the top right side of the screen to get instant help while editing your site.

Below we will explore  the simple steps to creating a sample business web site.   If you’d like, you’re welcome to follow these steps exactly to create this sample website to get the feel for it, and then delete it later on once you create your real one.

Step 1: Select a Template
On the left side of the browser, a couple of inches below the top of the page, you’ll see a “Category” dropdown menu.  Click on this to select the category which your business best fits into, and you’ll be presented with thumbnail images of the various starting templates that you can use to base the design of your website on.  For this example, we’re going to use a Cafe & Restaurant template, and build a website for a sample restaurant.  We will therefore select “Cafe & Restaurant” as the category.  The template we will use has ID “av-243”, the second one on the first row of thumbnails, which you will see directly underneath its thumbnail image.  If you click on it, you will see it appear slightly larger in the orange-outlined “Preview” window.  You can then click on that slightly larger image in the window, and it will bring up another browser window containing an actual-size snapshot of the home page.  You will see the preview contains sample text — this is the text we will configure in the next steps of this tutorial.  If you have that enlarged browser window open, it will obstruct the view of the configuration options behind it, so you can close it when you’re ready to continue configuring the site.

Step 2: Select a Color Scheme and/or Banner
There are 3 different color schemes you can choose from when configuring your site.  You’ll see these on the right side of the screen toward the top.  Each of them feature a different background color and main banner image. For this particular Cafe & Restaurant example, there are 3 different photos of plated foods.  We’ll leave the default one for this example, but you can click on any of the 3 that best suits your business.  Alternatively, you can specify a banner image of your own design and upload it in the Banners section just below this Color Schemes section.  To do this, simply use the “browse” button to locate the image you wish to use, and then click the Upload button.  Note: The maximum allowed dimensions of a custom banner are 1024×350 px. The supported file formats are *.jpg, *.bmp, *.gif, *.png.  Once uploaded, be sure to select it in the pull down box, so that it becomes the “active” image.

Step 3: Select Menu Styles
If you click again on the orange-outlined preview box for the website template, you’ll see in the enlarged image a little graphic above (or to the side of) each of the menu options that will be featured at the top of each page of your site.  Here you can pick from 3 different styles of graphic that are used to embellish the look of each menu item.  In this example, we are shown just the “About Us” menu option as a sample to show how all the menu options will look with the same graphical “treatment.”  In our example, we have 2 different arrow embellishments and an “x” embellishment.  Click on the any one that you’d like to use.

Step 4: Upload Your Company Logo
The section just below the “Select Menu Styles” section, titled simply “Logo”, is where you’ll upload your company logo.  When you have a logo image file readied in any of the popular image formats (such as .jpg, .png, or .gif), click on the “Browse” button in that section to locate it on your system, and then click the Upload button.  The logo will be placed in the topmost section of your site, to the side of the main banner image that you’ve selected above.

Step 5: Add optional Site Title, Subtitle, and Footer Message
In the section just under the “Logo” section, you can specify the title of your site.  This would typically be your business name.   This will appear in 3 areas: a) beneath the logo in our example; b) the very top edge-portion of the browser window, and c) if the person creates a bookmark or “favorite” in their web browser for your site, it will be the name of the bookmark or favorite.   The title is also used in search engine indexing.  In addition to the title, you can also specify a subtitle in this section, which will be displayed underneath the title (where it appears next to the banner).  You can also specify a footer message here, which is a convenient place to add a copyright or related message.  Once you’ve specified these items, you can click on the “Preview” button below to see what the site looks like so far.  This will pop up another window with the site in it.  Once viewing the site in this new window, if you click on any of the links across the top portion of your new home page, you can see each respective link’s corresponding sections.  If you click on the “About” link, you’ll see it pop up a menu of sub-links in the middle left portion of the page.  If you click on any of these sub- links, a respective page will load that will contain information you can customize in the next step.  The links at the top of the page and the “About” sub-links will be the pages of your actual site content, the customizing of which is detailed in the next step.

Step 6: Specify names of Navigator Bar  and Menu Links
Now that the basic site design has been established, you can click the “Next” button in the below right corner, and move on to the Pages area of Site Builder (after closing the window containing your website).   You can see the current area of Site Editor you’re in at the progress bar located at the top of the screen.  Once in the Pages area, you can see the page divided up again into several sections.  The section on the left is the “Page sets” section, where you can select a category your website falls into.  Each category has its own predefined navigator bar link names that will link to your respective website pages, all based on the type of website you’re creating.   (As a side note: the term “link” can refer to any web page itself, but also a clickable button, graphic, or line of text that takes you to a web page). In this case, we’re building a business website, so we’ll choose the Business page set, with link names that have a business theme — e.g., “Products,” “Services,” etc.   The current link names being used in your site are located in the section at the right side of the screen called “Your site structure.”  Each one of the items in that box is one of the links that were located at the top of the web site when you previewed it, in what is typically called the “navigator bar” or “navbar” for short.  The navbar is located on every page of your site.  The names of each of these links can be easily changed by clicking on any one of them.  For example, if you click on “About”, you’ll see that it highlights, and you can change it to read “About <insert your company name>”, or something else entirely.  If you click on the plus sign to the left of About, you’ll see it display several “sub”-links.  These sub-links are the links that are displayed as a menu on the left side of only the About page, and lead to “sub”-pages within the About main link to offer more specific information, such as “Overview,” “Our Clients,” and “The Team”, etc.  (You can click on “Preview” again, and at any time during this tutorial,  if you want to click on the About page and see the menu of sub-links that appears.)  In the middle section of this page,  you’ll see the “Standard pages” section, which is used in case you decide to delete one or more of the default pages and want to reinstate them later on.  The “Your site structure” section at the right already contains all of the links listed in the “Standard pages” section by default.  Below “Standard pages” is the “Special pages” section.  This section gives you the option of adding additional pages to your site that are not included in the “Standard pages”.   For example, you might want to add a blog to your site.   To add this link/page to your site, simply click on the checkbox to the left of the “Blog” item in “Special pages”.  You’ll see a button light up near the middle of the page.  Click that arrow and it will add the Blog link to the “Your site structure” section.”  It will now be included as a link on the site’s navbar.  You can also change the order of how the links appear within the navbar by clicking on any of the link’s checkboxes within the “Your site structure” section, and using the Up/Down buttons to the right.  The left/right buttons can be used on sub-links (the only sub-links we have are in the “About” link — click on the plus sign to the left of About, and you’ll see the sub-links with associated checkboxes appear) to make them main links on the navbar.  You can click the “Preview” button below again to see how it looks.  Click the “Next” button on the bottom right of the page when ready to move to the next step.

Step 7: Add content to your pages
The Edit area of the Site Editor is where you will insert your actual site information (generally text and images).  This editing area is not unlike a standard word processor, such as Microsoft Word.  You’ll see standard editing tools to change font type, color, style, size, and a various other formatting buttons.  To get more help on all of the individual options, click on the Help button in the upper right corner of the Site Editor.   You’ll see an area in the middle of the current page that says “Type content here.”  Replace that text with whatever text you’d like to display on the main home page.  This might typically include a welcome message and same basics on what your site offers.   Feel free to experiment with fonts and formatting, and inserting pictures.  If you look at the left side of your screen, a couple inches down from the top of the web page, you’ll see “Site Map” with a small window underneath it.  This is where you can select the current page to edit.  Use the arrows to navigate up and down to see all of the pages available for editing.  Right now it’s highlighted on “Home”, which is the page we’re currently editing.  You’ll want to go one-by-one through each page to add the content you wish to add.  Note underneath the Site Map window you’ll see Page title, Page file name, Page keywords, and Page description.  The Title is what is used to identify the respective page at the very top of the web browser, and also when a user bookmarks that specific page.  The Page file name is what you can call the individual file the page is stored in.  This is typically identical or similar to what the page’s content is about — for example, “about” might simply just be called “about” (the system will add a .php extension to all files).  The main or home page you should name “index” (without quotes), as this is standard practice for naming a site’s home page.  “Page keywords”  are where you can add individual words that describe the current page, such as words a person might use to search with in a search engine such as Google.  “Page description” is another area used by search engines.  Keywords and descriptions are not necessary, but recommended for better search engine results when people search for your site.

Step 8: Publish your site!
When ready, click the “Next” button again (bottom right), and you’re now at the Publish stage.  Click the Publish button, and your site is ready to go!  You can always come back to the Site Editor at any time to make changes or additions to your site.