There’s a variety of approaches you can to take for converting an existing site to Webvanta. In this article, we’ll start with the simplest method, and then gradually show how to make additional changes to take more advantage of Webvanta’s unique capabilities.
The basic steps are as follows:
Then come the optional refinements, which enable you to realize the full value of the Webvanta platform:
Other enhancements that are available to you for free as part of the Webvanta platform include:
Note: if you want to set up your site the right way to begin with, skip this section and continue with Basic Site Conversion. This section explains a quick-and-dirty way to get an existing site moved over quickly.
There’s a super-quick way to get started, if you have a complete static web site to begin with: zip up all the files that make up the site and upload the zip file to your Webvanta site (Content > Image & Files and click Add File). Webvanta will automatically generate a matching directory structure, unpack all the files in the zip into it, and register the files in the content management system.
In most cases, this will yield an immediately working site on the Webvanta platform. You’re running your site entirely outside of our CMS and database, so you’re gaining little benefit, but at least all your files are moved over, and you can operate in this mode while you work your way through a more complete conversion.
Note that Webvanta does not support PHP or other server-side scripting in your pages. To maintain security and performance for everyone, we only allow our own back-end code to run on our servers.
One caution: all files you’ve uploaded in this way are always publicly visible. In your Site Admin control panel, you can enable or disable viewing of your site, but this affects only pages produced by the Webvanta CMS and database, not .htm or .html pages that you upload. As you convert your site, you’ll eliminate all of these .htm or .html pages.
See Uploading Files for details.
Assuming you skipped the super-quick import as described in the preceding section, zip up all of the non-HTML files that make up your site, and upload the zip file via Content > Images & Files and click Add File.
If you did the super-quick site import, you’ve already uploaded all your files, including the HTML files. As you convert the site, some of those files will cease to be needed.
If you uploaded your CSS and JS files as part of the zip file, then they should be ok for now. To make them editable in the Webvanta interface, you may want to convert them as described later in this article.
Now you need to create the HTML content for your site. In the Webvanta system, every page has a template. Typically, the head section of the HTML is entirely in the template file (or in a snippet referenced there), as are the site’s visual header, footer, and navigation.
To make the most out of Webvanta, you’ll want to move all page-specific content out of the templates and into snippets, reducing the number of templates to a minimum (which keeps your page designs consistent and simplifies maintenance). But to get started, you can go to the other extreme: create a template for each page. You can use the entire HTML for a page as a template file.
Note that you cannot upload any PHP or other server-side code. If your site includes such code, you may want to start by capturing the HTML for your fully rendered site, using the browser’s “Show Source” feature, to provide the initial code for the template.
All CSS and JS files are at the root of your site, so if you have these stored in folders in your existing design, you’ll need to edit the file paths in the template HTML to eliminate everything except the filename.
Pages in the Webvanta system don’t require any filename extension (e.g., you can use /services instead of /services.html). You can include these extensions when you name your pages, but it is cleaner to eliminate them. If you don’t use the extensions, then be sure to fix any links in your template files to remove the extensions.
If you use HTML pages uploaded as assets, the extension is required. Remember that such pages are outside of the view of the content management system and should be used only temporarily during the process of converting a site.
See Using Templates to Define Page Structure for more information on using templates.
With traditional web site design, you create a file for each page. In Webvanta, you create your pages with the content management system.
Click Structure > Pages, and then click Add Page. Enter the page title (which appears in the browser title bar) and the slug (the final part of the URL, after the last slash). You can enter the keywords and description (for SEO) now, or defer that task until later.
If you created a separate template for each page, taking the minimal conversion approach, then all the content is in the templates and all you need to do to create the page is to choose the corresponding template from the pop-up list.
In general, though, you'll want to use a template that has non page-specific content, so you can use the same template for many pages, and then set the page-specific content either through the page admin screen or using in-place editing on the site itself.
Note that page slugs cannot have slashes in them. If you have pages that have a folder name in their path (e.g., /products/chair), then you’ll need to first create a page for the first level (products), and then create a “chair” page as a subpage of “products” (click the green circle with the plus sign next to the products page in the page list).
See Creating and Managing Pages for more information.
If conventional site designs, you may have relative paths to files, such as 'scr="img/picture.jpg" '. With Webvanta, you should start all file paths with a slash, so this changes to "/img/picture.jpg". And if you uploaded files without creating a matching directory structure, you'll need to update the path to match.
At this point, you should be able to access all the pages you have converted. If you encounter problems, here’s some things to check:
At this point, you should have a functional site running on the Webvanta system. To gain the full benefit of the Webvanta system, however, you’ll need to separate out your editable content and your navigation from the templates.
The first step is to create as many templates as you need to define the different types of pages on your site. Each template should have no page-specific content but everything that repeats for all pages of a type.
See Using Regions for Page-Specific Content for details.
You can create navigation however you'd like. If you use Webvanta's dynamic menu features, you can build menus with any visual design and html structure you'd like, while your (or the content owner) sets up the menu independently of the code, via the Menu admin screen (Structure > Menu).
See Creating Navigation for more information.
Snippets are just named chunks of content, either code or text, that you can use anywhere by name. So the analytics code that you need in every template, you can put in a snippet of that name, and then reference it in each template. Now you have a single place to maintain that code.
See Using Snippets for details.
The real power of Webvanta comes into play when you build your site around structured content stored in the database. It could be news items, events, resources, project profiles, FAQ items, whatever.
See Setting Up Your Database Structure to get started with the database.
If your site’s URLs have changed and you want to redirect them, you can enter a list of translations from old to new. Note that this capability is limited to processing the string after the base URL; for example, in www.webvanta.com/help, only the string “help” is processed.
There are two different ways to set up your CSS files on Webvanta; each has its pros and cons:
To use the second method, which enables you to edit your CSS online, click Structure > CSS Files and click Add CSS File, copy the contents from your first CSS file, paste it into the form, enter the name of the file in the Name field, and click Create. Repeat for each of your CSS files.
Note that all CSS files created in this way reside at the root of your site (not in folders).
You may need to edit image file references if the folder in which images are stored is different on the Webvanta site.
See Styling Pages with CSS for details.
Note that all JS files created in this way reside at the root of your site (not in folders).
At this point, you should have something close to your original site, built with Webvanta. Now it will be much easier to maintain.
And now you can explore the additional features Webvanta makes it easy to add, including: