working-with-pages

Working with Pages

Everything you need to know about creating new pages, working with header regions, adding and removing columns, plus much more.

Tips


Instructions

Creating New Pages

In this tutorial, we’ll demonstrate how to create new pages for your website.

  1. When creating new page all you’re really doing is making a copy or duplicate of an existing page.
  2.  You can create a new page from one of the generic 1-column.htm, 2-column-left.htm or 3-column.htm layouts, or any other page included in your template package.
  3. You’re not limited to the number of pages you can create, or from which pages you create them.

Video Demonstration ( skip the reading, just watch and learn! )

http://youtu.be/BBaCZKcfWq0

We’ve included some ‘generic’ layouts that you can start with, such as the 1-column.htm, 2-column-left.htm or 3-column.htm pages. These layouts provide a good starting point, however, you can also create new pages based off of any existing page such as the ‘about’ page, the ‘services, catalog or news-events’ pages. Each of the included pages in your template package use a unique layout for the content. You may want to use that type of content layout for more than one page in your site, and you can! Just create a copy / duplicate of the page, and give it a new name!

Here’s how I’d typically approach building a new website. Once I’ve opened the template package and tested the installation as mentioned in previous tutorials, I’ll create my storyboard and from there, my new pages BEFORE I do anything else. I always create some type of storyboard then the pages. This at least, gives me the feeling of having accomplished something, quickly.

If you’ve reviewed the ( planning and preparations ) section, you’ll probably have reviewed the different layouts and pages already included in your template package. If not, before you start to build out your web pages, start by previewing each of the pages included in your template package, preview them in your web browser. This will give you a good ‘idea’ of what types of layouts are includes, and what types of content sections, there are.

And now that you are a bit more familiar with the types of pages in your template, you can go about creating your own.

To create a NEW page, you’ll be making a copy or duplicate of an existing page.

Determine the page or layout you want for your ‘new’ page, preview the pages included in your template in your web browser to see what they look like.

  1. Open a page that most closely suits the layout and style for your new page, in this example the ‘about.htm’ page suits our needs the best
  2. with the page open, click on the File Menu
  3. Select Save As…
  4. type a name for your page
  5. Click the ( Change title… ) button, and enter a Page title ( this is used for the “meta title”, important for search engines ).
  6. Click OK, then Save
  7. A new page will be added to your Folder / File list

Removing Pages

In this tutorial, we’ll demonstrate how to remove a page from your website.

Video Demonstration ( skip the reading, just watch and learn! )

http://youtu.be/SXeGiucu6FQ

NOTE: When you delete from your web editor, there is NO ‘UNDO’ option. The page will be removed for good. The only way you can get it back, is if you copy a new page in from your backup, or just create a new page.

Removing a page is pretty straight forward:

  1. Select the page in the Folder/File list
  2. press ‘Delete‘ on your keyboard

Adding/Removing Columns

In this tutorial, we’ll demonstrate how to add or remove columns from an existing page.

As with the more advanced updates, we’ll be providing a video that demonstrates both methods.

Video Demonstration ( skip the reading, just watch and learn! )

http://youtu.be/BdF5T9OVREs

Changing Header Layouts

In this tutorial, we’ll demonstrate how to change the component in the header of your pages. You can change the component  in the header (top) of your page, or remove it altogether.

If you haven’t created any content for your page yet, it may be ‘quicker or easier’ to just create a ‘new’ page using the layout you want to go with.

This is a tutorial that is best explained with a video demonstration, so here’s the 2 options we suggest for changing an existing pages ‘header’.

Video Demonstration ( skip the reading, just watch and learn! )

http://youtu.be/idFSaHeEwjE

Changing Content Layouts

In this tutorial, we’ll demonstrate how to change the content section in your web page. The body or content area of the page is created from a ‘snippet’ a block of code designed to present your content in a specific manner such as 2 columns, 3 columns, or a combination of columns and in page components such as a twitter feed. The wonderful thing about the Bootstrap framework is you can copy other code snippets into an existing page to add more flexibility and content, or completely remove the existing snippet and replace it with something else. We provide a selection of generic code snippets that form the different number of columns in the page. The column snippets are located in the ( Pages ) folder. You’ll find the 1-column, 2-column-left, 2-column-right, 3-column, and 4-column pages.

Video Demonstration ( skip the reading, just watch and learn! )

http://youtu.be/BtDs2kIIv2w

Creating New Pages

In this tutorial, we’ll demonstrate how to create new pages for your website.

  1. When creating new page all you’re really doing is making a copy or duplicate of an existing page.
  2.  You can create a new page from one of the generic ( 1-column.htm, 2-column-left.htm or 3-column.htm ) layouts, or any other page included in your template package.
  3. You’re not limited to the number of pages you can create, or from which pages you create them.

Video Demonstration ( skip the reading, just watch and learn! )

http://youtu.be/3xf-DuTEuWA

We’ve included some ‘generic’ layouts that you can start with, such as the ( 1-column.htm, 2-column-left.htm or 3-column.htm ) pages. These layouts provide a good starting point, however, you can also create new pages based off of any existing page such as the ‘about’ page, the ‘services, catalog or news-events’ pages. Each of the included pages in your template package use a unique layout for the content. You may want to use that type of content layout for more than 1 page in your site, and you can! Just create a copy / duplicate of the page, and give it a new name!

Here’s how I typically approach building a new website. Once you’ve opened the template package and tested the installation as mentioned in previous tutorials, I’ll create my storyboard and from there, my new pages BEFORE I do anything else. I always create some type of storyboard then the pages. This at least, gives me the feeling of having accomplished something, quickly.

If you’ve reviewed the ( planning and preparations ) section, you’ll probably have reviewed the different layouts and pages already included in your template package. If not, before you start to build out your web pages, start by previewing each of the pages included in your template package, preview them in your web browser. This will give you a good ‘idea’ of what types of layouts are includes, and what types of content sections, there are.

And now that you are a bit more familiar with the types of pages in your template, you can go about creating your own.

To create a NEW page, you’ll be making a copy or duplicate of an existing page.

Your template package will include a ( Pages ) folder, which includes several additional layouts you can use to create new pages with.

Your template package also includes a ( Sliders ) folder, which includes several additional pages with unique header components, which you can also use to create new pages with.

As you’ll learn in later tutorials, you can exchange both headers and content layouts in your web pages. You can switch it up when you need to.

For the purposes of our demonstration, we’ll just create a copy of one of the pages in the ‘root’ folder. Let’s start.

Determine the page or layout you want for your ‘new’ page. ( preview the pages included in your template in your web browser to see what they look like ).

  1. Open a page that most closely suits the layout and style for your new page, in this example the ‘about.htm’ page suits our needs the best.
  2. Double click on the page to open it.
  3. Cick on the File Menu,
  4. … select Save As…
  5. Type a name for your page in the [ File name: ] field.
  6. Include the ( .htm ) file extensions.
  7. Click Save.
  8. A new page will be added to your Local Files panel.

Removing Pages

In this tutorial, we’ll demonstrate how to remove a page from your website.

Video Demonstration ( skip the reading, just watch and learn! )

http://youtu.be/R67Lds2JAFM

NOTE: When you delete from your web editor, there is NO ‘UNDO’ option. The page will be removed for good. The only way you can get it back, is if you copy a new page in from your backup, or just create a new page.

  1. Select the page in the Local Files panel.
  2. Press ‘Delete’ on your keyboard.

Adding/Removing Columns

In this tutorial, we’ll demonstrate how to add or remove columns from an existing page.

As with the more advanced updates, we’ll be providing a video that demonstrates both methods.

Video Demonstration ( skip the reading, just watch and learn! )

http://youtu.be/TjeIdXyxg5w

Changing Header Layouts

In this tutorial, we’ll demonstrate how to change the component in the header of your pages. You can change the component  in the header (top) of your page, or remove it altogether.

If you haven’t created any content for your page yet, it may be ‘quicker or easier’ to just create a ‘new’ page using the layout you want to go with.

This is a tutorial that is best explained with a video demonstration, so here’s the 2 options we suggest for changing an existing pages ‘header’.

Video Demonstration ( skip the reading, just watch and learn! )

http://youtu.be/GbvyKOK63i8

Changing Content Layouts

In this tutorial, we’ll demonstrate how to change the content section in your web page. The body or content area of the page is created from a ‘snippet’ a block of code designed to present your content in a specific manner such as 2 columns, 3 columns, or a combination of columns and in page components such as a twitter feed. The wonderful thing about the Bootstrap framework is you can copy other code snippets into an existing page to add more flexibility and content, or completely remove the existing snippet and replace it with something else. We provide a selection of generic code snippets that form the different number of columns in the page. The column snippets are located in the ( Layouts >> columns ) folder. Each page inside this folder contains just the code snippet so you can copy and paste into your existing pages to expand or replace the existing content layout.

Video Demonstration ( skip the reading, just watch and learn! )

http://youtu.be/HbaD_cOWt6A

Troubleshooting

  • Photo Slideshow displays a ? / Doesn't work in IE8 Answer