Initial Setup and Editing

In this tutorial, we begin building a new web site, AllAboutPets.com. We'll see how to reorder pages in the menu and change the home page text.

Create the empty site.

Fill in the free trial form at www.webvanta.com/trial, click the link in the email confirmation, and set your password.

Here's what a brand-new site looks like.

The black bar at the top allows you to switch between the site view and control panel view whenever you are logged in. Click Control Panel to switch views.

Managing Pages from the Control Panel

Click Structure > Pages in the control panel to see the admin view of the pages. This shows all the pages in the site, including some that you won't need yet but are good to have around for later. You can add a page to your site by clicking the Add Page button above the list.

When you hover over an item in the list you will see icons appear on the right for adding a sub-page, editing the page, making a copy of the page and deleting the page. Click any of the arrows to the left of the page name to expand a page group and see it's sub-pages.

Managing Menus from the Control Panel

Click Structure > Menus to see the menu admin page. To re-order the items in the menu, just drag and drop the page icons in the Menu section.

When you drag the menu item, a yellow line shows where it will land if you release the mouse. You can drag to the right a little to make an item a sub-page (which may appear in a drop-down menu or in local navigation).

In-place editing of HTML code

Click the View Site link in the black toolbar at the top of the page to return to viewing the site, and then click the Enable Editing button to allow us to do a little in-place editing.

When you hover over the region that you want to edit, you'll see a blue outline around the entire area, and an edit icon in the upper left corner. Click the edit icon.

A dialog will open that shows the content for the selected region. You can edit the site's content directly from this dialog. By default the dialog opens as an editor which looks similar to a word processor application.

Replacing the home page content

The home page starts out with some placeholder content. We will first click the Code button to view our content as HTML.

We'll delete the placeholder HTML and replace it with a few lines to begin customizing our site's content. Click Submit. We will repeat the process for the right side bar.

New home page text

The home page now shows the new text we entered.

This tutorial continues with Part 2: Styling