Getting Set Up

Layouts vs. Pages

Convergence sites are set up in two areas: 1. HTML layouts, and 2. "Pages" in your site's admin bar.

They are both necessary, but very different. If you are used to setting sites up in Deamweaver and working in pure HTML and CSS, you'll be thrilled that "Pages" automates a lot of things for you. So, as we've read in the previous sections, once you set up your HTML layouts and include files, you'll have your base structure. But in the past, you might have added "about.html" and "news.html", etc, or if you worked in php, you may have set up an htaccess file.

For Convergence, all you need to do to add pages is login, and go to "Pages" in the admin bar at the top of your page. This opens your sitemap, and from here you can add pages and sub-pages, and have them automatically show up via the navigation tokens.


sitemap


Another great feature of Pages is the ability to put different meta information on each page, and also re-assign page names. Here you can see that in "edit view" of this page, there is a "title" a "path" and then advanced options where you can put the meta info.






The PAGE TITLE is what will show up as the browser title (next your site name if you have that token in the title section as well). The path directly under it will be the name of the path, and under "advanced options" you can rename the page to be something simpler in the navigation.

For example, you have the flexibilty on an about page to have:

"About Us" be the menu name
"/about" be the path
and "About Convergence - the flexible CMS" as the page title

For more info on using Pages, visit the Using Convergence section of the Help site.

 

Include files

Because our system is database-driven, we can create shortcuts such as include files. Include files are HTML files that are linked to other HTML files to create library items without all the fuss. Here's how it works: create a folder in your main site folder called "include". Then take whatever info you have repeating on every page, such as info, headers or footers, and create HTML files for them. Link them using the "include" token.

Here's an example of the head info for a site inside of an include HTML file:

include-file
You'll see that is a token that generates the site's name inside the title tag. You could also do something like:



which would return:

"Convergence CMS | Getting Started" as your page title.

But, we digress. Getting back to the include files, once you link up the include file into your template, all you have to do is make the change in the include HTML, and it will change across the site. This is especially good for headers and footers, or navigation if you choose to do it manually.

In the next section "Layouts vs. Pages" we'll cover some SEO stuff you can do via Pages, as opposed to HTML files.



 

Setting up a layout

To begin building your site in Convergence, you'll need to set up your index.html file and your inside.html file. These are the two files your site will be based on. There are more layout files, and essentially any HTML file you upload into your folder can be used as a layout. You can learn more about that in the Layout Files section.

For now, just remember that "index.html" is your home page, and "inside.html" will be for every other page in the site.

Build your html as you normally would, but wherever you would have the content, say for instance a jQuery rotating slideshow, you'll put a token instead. Here's a mockup of an index.html layout. You'll see these nifty code snippets called "include files", which we'll explain in the next section. They are effectively library items.


home-page-html_426

So, you'll see the tokens in the file, and you can name them anything you want. There is one special token for your inside page, which you'll see in the next illustration. These tokens fit right inside of your html, and will run text, photos, news, events, etc. Learn a little about what they are capable of before you plan your site. It may change the way you structure your html. Also, please note that we have default style for things like blogs, but everything is customizable via CSS.

Here now is an illustration of the inside page layout for comparison:


internal-page-html_407


Notice the "BodyContent" token. That token runs all of your inside content, so don't forget it.

Now that you have some basic knowledge of how the layouts work, you can get more information about types of layout files, and tokens in the siections in the sidebar. As for include files and more tips and tricks, keep reading on in the next article.

 

Your site folder

When you sign up for a Convergence site, you'll immediately have access to an FTP login. Right off the bat, you have a couple files in your site's "templates" folder. The templates folder is essentially your root folder.

new-folder_137

The index and inside HTML files are templates, but they are not set up yet. They contain some place holder information that you'll see if you go to "yoursite.convergencecms.co". The photos folder is a folder that will be used by the system later, once you add photos through the site.

Typically we set up our sites like this:

folder-setup_194

We have a css folder with as few css files as possible, an images folder, an include folder (we'll talk about this in a bit) our template HTML files, and a js or scripts folder for javascript or jQuery. Other folders may be added later on by the system, such as "photos" or "users".

 

Creating a Coming Soon Page for your Site [VIDEO]

While your site is being built, it may be nice to show your visitors a Coming Soon page. Here are the steps to build one in Convergence. Also, there's a quick video below to take you through the steps.

  1. Create a layout file for your Coming Soon page, and call it coming-soon.html
  2. Login to your site
  3. Click PAGES and add a new page called Coming Soon.
  4. Make sure under WHAT WILL THIS PAGE LOOK LIKE? you choose your new Coming Soon layout.
  5. Click SAVE CHANGES
  6. Now click to edit your Home page (the black page under PAGES).
  7. Choose REDIRECT TO A DIFFERENT PAGE/SITE and type in coming-soon (use the link for the page you created in step 3).
  8. Click SAVE CHANGES
  9. Finally go to your /coming-soon page and add any content modules, etc.

Now - you can still work on your Home page when you are logged in to your site, but logged-out visitors will be taken to Coming Soon.  Remember that this behavior only works with the Home page.  You can click LOGOUT in the admin bar and test it out.