Layout Files

What are Layout Files?

Don't worry - layout files aren't complicated at all - they are simply .html files!  The only thing that separates layout files is that you can use the handy Convergence tokens in your files, which will save you time as you build out your site.

Convergence looks for all your layout files in your site home directory (when you login to your FTP, this is the "root" directory of each site).  Any .html file you upload will automatically show up as an option for pages in your site in the PAGES section in your Convergence admin bar.  To choose a layout for a page in your site, follow these steps:

  1. Login to your site
  2. Click PAGES up top in the admin bar.
  3. A window pops up showing your sitemap.
  4. Hover over the page you wish to edit, and click the edit icon (pencil and paper)
  5. You will see a dropdown box labeled "What will this page look like?", here you can choose a layout file for your page.  (note: layouts will show up capitalized and without the .html extension, so if you upload inside.html, you would see Inside in the dropdown box.)
  6. Click Save Changes when you're done!

The great thing about layout files is that you can create one generic "inside" layout for all of your site's internal pages!  Say goodbye to creating a separate HTML file for each page in your site!  Also, you could create a "two-column.html" and a "three-column.html" layout file for different pages in your site.

Now that you've learned about layout files, let's check out some special layout files that Convergence looks for - starting with the Index Layout File.

 

Index Layout (index.html)

The index.html layout is for your site's homepage.  Every site has a default page which can be accessed at:

http://YOURSITE.convergencecms.co/
or
http://YOURSITE.convergencecms.co/home

This page is set to the index.html layout by default.  You can change this setting with these steps:

  1. Login to your site
  2. Click PAGES in the Convergence admin bar.
  3. Scroll over the black Home page and click the edit (pencil & paper) icon
  4. Under What Will This Page Look Like? - choose your desired layout.
  5. Click Save Changes
 

Inside Layout (inside.html)

The inside.html template is for your site's internal pages.  By default, every article, event, and search page will look for the inside layout.  It is very important to include a token in your inside layout - this is where your article text, event description, and search results will appear (more on the content token).  You can edit the default layout files for articles, events, and search pages like so:

  1. Login to your site
  2. Click PAGES in the Convergence admin bar.
  3. Under your home page, click Advanced Layouts (+), hover over a page, and click the edit (pencil & paper) icon
  4. Under What Will This Page Look Like? - choose your desired layout.
  5. Click Save Changes
 

Item Layout (item.html)

For sites with Item Lists activated only.

The item.html layout allows you to specify a layout for your Item Lists - you can specify where the fields from your Item List will appear.  You can also create separate item layout files for each Item List.  Using the slug from your Item List, create a file named item-.html for each Item List.  So if you have a Breakfast Item List (slug: /breakfast) and a Dinner Item List (slug: /dinner), create 2 files: item-breakfast.html and item-dinner.html.

Learn more about the tokens for item layout files.

 

Product Layout (product.html)

For sites with E-commerce activated only.

The product.html layout allows you to specify a layout for your product detail pages - you can specify where the fields from your Product will appear.

Learn more about the tokens for product layout files.

 

Category Layout (category.html)

For sites with E-commerce activated only.

The category.html layout allows you to specify a layout for your category pages - you can specify where the fields from your Category will appear.

Learn more about the tokens for category layout files.

 

Account Layout (account.html)

The account.html layout allows you to specify a layout for your account login page - you can specify where the login form will appear.

Learn more about the tokens for account layout files.

 

User Layout (user.html)

The user.html layout allows you to specify a layout for your User profile pages - you can specify where the fields from your User profile will appear.  Just as with Item Lists, you can also create separate user layout files for each User Type.  Using the slug from your User Type, create a file named item-.html for each Item List.  So if you have a Wholesale User Type (slug: /wholesale) create: user-wholesale.html.

Learn more about the tokens for user layout files.