Pages Overview
Pages is where all of your website pages live.
Your homepage will always be at the top of the list, identified by the house icon.
Each page has a Page bar. Pages can be organized up or down in the list or placed into groups. Page organization does not affect your website navigation flow.
You can create new pages, preview pages and edit pages. You can also suspend a page, activate a suspended page or remove and delete a suspended page.
You can link pages to navigation Flow items.
You can have a stand alone page at a url outside of your navigation.
Pages auto-save unless prompted. During the course of building a page you will be prompted to save to commit specific changes.
Page Bar: (Info, Layout, Edit, Preview, Suspend, Compass)
Each page has a Page Bar.
Use the compass tool to rearrange the order of your pages.
To edit the name, url or metadata of a page CLICK INFO.
To edit the layout of your page CLICK LAYOUT.
To edit the page content CLICK EDIT.
To preview the page CLICK PREVIEW.
To suspend a page CLICK SUSPEND.
To delete a page, suspend the page first, then click REMOVE.
To active a suspended page, click ACTIVATE.
Page States
Your pages will go through several published states while you work on them.
A Published page is the most current version of the page. A Published page will appear on your website and appear live to the web.
A draft page has not been published. It is not live to the web.
A page marked publishing, is scheduled to be published, but is not yet live.
A page marked changed contains page changes that have not been published yet. You will see this designation only if you made an update to an existing published page that’s hasn’t been published again.
A suspended page does not appear on your website, but you can still preview and edit it. A suspended page is not live to the web and will not be crawled by search engines.
Page Organization
Keep your pages organized into groups. Page groups make it easier to find and manage pages. Page organization does not affect your website navigation flow.
Pages not in a group will appear at the bottom of the page.
To reorder pages:
Click and drag the pages page up or down in the list.
To place a page into a group:
Click and drag the page into a group.
Page Groups
To add a new page group:
Click the + NEW PAGE GROUP button.
Your page group will appear at the bottom of the list.
Click the text “Click to change name”.
Enter the new name.
Click anywhere on the screen to save your name.
To rename a page group:
Click on the group name.
Enter the new name.
Click anywhere on the screen to save your name.
To reorder groups:
Click and drag the group up or down in the list.
To color code a group:
Click on the color swatch.
Select a color.
Click set color.
To delete a page group:
Click the trash can icon on the group you want to delete.
On the confirmation box click OK to delete the group or Cancel to keep the group.
Creating a New Page (see Page Info first)
Click the + NEW PAGE button.
Select a Layout.
Your framework will come with a number of predefined page layouts. See Page Layouts for more information.
Enter a Page Title
Be descriptive with your page title. This title will appear in search engines.
Enter a Page URL
The URL is the unique address of this page on the internet. Keep URLS short and do not use spaces or special characters.
Enter a Page Description (now or later)
This should be a brief summary of the page content. This description is used by some older search engines to classify your page. An accurate description can help your search engine rank. Limit your description to 200 characters.
Enter a Page Keyword (now or later)
Keywords are used by some older search engines to classify your page. Accurate keywords can help your search engine rank. Separate individual words with commas.
Enable Scroll Navigation (off by default)
Scroll navigation for a page allows you to assign a flow item to a canvas within the page. When the flow item is clicked, the page will scroll to that canvases position in the page rather than linking to a new page.
Include in Sitemap (on by default)
The XML sitemap is used by search engines to index pages on your site. It is best to only include pages with actual content in the site map. Do not include utility pages like shopping cart or story detail.
Click the CREATE PAGE button, in the upper right hand corner.
See editing a page tutorial for more information.
Anatomy of a Page
Each page has one editable content section, the Page Content. When editing a page your are editing just the page content.
Each page has a Master Page assigned to it. When you preview a page you will see the Page Content inside of the Master Page. A Master page contains all of the global content sections needed to display the page including the page’s header and footer. See the Tutorial on Master Pages for more information.
The Page Content, or Page, is made up of four editable parts, Info, Canvases, Containers and Content. See Editing Pages Overview for more information.
Editing Pages Overview
The Page Content, or Page, is made up of four editable parts, Info, Canvases, Containers and Content. All of these parts are used to design your page.
Page Info is the first step in creating a page and contains the name of the page, the page url, meta data and other options.
Canvases are elements of a page that house containers and content. A page can have more than one canvas and each canvas can be styled to reflect your design.
Containers are elements of a page that make up the page layout. Each container represents an area where content can be placed. Containers can be added to create layout grids with one or more columns. Containers are placed into Canvases and each container can be styled to reflect your design.
Content is added into the page containers. Text, images, video, galleries, stories, and more can be added. Content is editable and can be styled to reflect your design.
Editing a Page
When editing a page you will enter the process in the Content section by default.
The Page, is made up of four editable parts, Info, Canvases, Containers and Content.
Page Info
To edit a page:
Click the INFO link or INFO tab on the page.
Page Title
Be descriptive with your page title. This title will appear in search engines.
Page URL
The URL is the unique address of this page on the internet. Keep URLS short and do not use spaces or special characters.
Page Description (now or later)
This should be a brief summary of the page content. This description is used by some older search engines to classify your page. An accurate description can help your search engine rank. Limit your description to 200 characters.
Page Keywords (now or later)
Keywords are used by some older search engines to classify your page. Accurate keywords can help your search engine rank. Separate individual words with commas.
Enable Scroll Navigation (off by default)
Scroll navigation for a page allows you to assign a flow item to a canvas within the page. When the flow item is clicked, the page will scroll to that canvases position in the page rather than linking to a new page.
Include in Sitemap (on by default)
The XML sitemap is used by search engines to index pages on your site. It is best to only include pages with actual content in the site map. Do not include utility pages like shopping cart or story detail.
Select Master Page
The master page contains all of the global content sections needed to display the page including the page’s header and footer.
Enable User Scalable
User scaling, pinch to zoom the page, is on by default. This should only be disabled if absolutely necessary.
Enable Tablet Break
When turned off, the tablet break automatically inherits the desktop settings by default. When turned on, tablet specific layout and component settings are available.
Click Save Changes (Or Cancel to revert changes).
Page Canvases
Canvases are elements of a page that house containers and content. A page can have more than one canvas and each canvas can be styled to reflect your design.
An article section canvas is a special canvas that will automatically generate navigation that scrolls down the page.
To add a canvas:
Drag the canvas icon into the page, above, below or in between existing canvases.
Click on the Canvas to edit it. The Canvas toolbar will appear with Canvas settings at the top of the page.
Canvas Settings
Canvas Label
Enter a label to identify your canvases. Be as descriptive as possible, for example: Slideshow Top Canvas.
Full Width Canvas (off by default)
Turn on full width canvas on when you want your canvas to stretch all the way to the edge of the website browser. This often is used for background colors or images.
Full Width Content (off by default)
Turn on full width content on when you want your content to stretch all the way to the edge of the website browser. When off, your content will stay fixed within the defined website content width, the details is 1400 pixels.
Hide for Device Options
Click the Mobile, Desktop or Tablet button(s) to hide the canvas for a particular device. This often is used to display different content for devices, for example a slideshow appears on the desktop version, but not the mobile version.
Canvas Toolbar
Reorder/Move a Canvas:
1. Click on the compass tool.
2. Drag the canvas up or down into position.
Delete a Canvas:
1. Click on the trashcan button.
2. When the “Are you sure you want to delete this canvas” prompt appear click OK.
3. Click CANCEL to cancel.
Style a Canvas
1. Click on the paintbrush button.
The Canvas Settings will change to include options for editing the canvas Background, Padding, Borders, Box Shadow, and to apply Style Favorites.
2. Edit your canvas. See documentation below on various ways to edit your canvas.
3. Click Save or Save as Favorite. If you Save as Favorite your style will be saved in your stylesheet and appear in the Style Favorites Tab in canvas settings.
Remove Canvas styles:
1. Click on the paintbrush button.
2. Click on the Clear All Styles link.
3. Edit the CSS source code and/or click Save to commit your changes.
To View Source and update a Canvas:
1. Click on the paintbrush button.
2. Click on the View Source link.
3. Edit the CSS source code.
4. Click Update when done.
5. Click Save to commit your changes.
To edit Canvas Backgrounds:
1. Click on the paintbrush button.
2. Click on the Background tab.
3. Edit the Background Options
Image
1. Click the image icon.
2. Add an image
Either from the media selector or Click Upload files to upload the image.
3. Click Add Selected
4. Select Repeat options
Horizontally, Vertically or Don’t Repeat
5. Select Position for your background image
6. Select Size for your background image
Stretch to Fill
Your image will size so that entire width of the images stretches to fill the entire canvas. This sizing will crop the image based on your positioning. This sizing will also change the crop of your image based on the device width. You will see more or less of your image based on the device width.
Scale to Fit
Your image will size so that the entire image is visible.
Manual Positioning
You can also manually position your image from the Top or Left or Both.
Any CSS valid unit will work: px, %, em, rem, pt, etc.
If you put one number it's from the left. (20px) If you put two numbers the first one is from the left second is from the top. (20px 10px) Positive numbers go right or down (20px), negative numbers go left or up (-20px).
7. Click save.
Padding
1. Click on the Padding tab.
2. Click a Quick Pad option or key in a padding amount in pixels, em, or % units.
3. Click Save
Borders
1. Click on the Border tab.
2. Click a the border type, all sides, left side, top side, right side or bottom side.
3. Select the border color.
4. Select or key in the border width.
5. Select line type: Solid, Dotted, Dashed, Inset, Outset, Double.
6. Click Save.
Box Shadow
1. Click on the Box Shadow tab.
2. Select the position.
3. Select the width.
4. Select the blur distance.
5. Select the color.
6. Click Save.
Favorites
If you have favorites saved they will appear in this tab. See Favorites tutorial for more information.
1. Click on the Favorite icon to apply the favorite. You can apply more than one favorite. Note: certain styles could conflict with one another.
2. Click Save.
Page Containers (Layout)
Containers are elements of a page that make up the page layout. Each container represents an area where content where can be placed. Containers can be added to create layout grids with one or more columns. Containers are placed into Canvases and each container can be styled to reflect your design.
Containers can also be placed inside containers. These child containers are designated by a green dashed line.
Content is added into the page containers. Text, images, video, galleries, stories, and more can be added. Content is editable and can be styled to reflect your design.
To add containers:
Click on the number of columns you want to add to your page and drag it into your canvas. (You can also drag columns into an existing container.)
To add nested Containers (containers inside containers):
Click on the number of columns you want to add to your page and drag it into the existing container.
To Edit a container:
Click on the container you want to edit.
Use the Container Tools and Container Settings tab to edit the container.
To Edit a child container:
Click on the child container button.
Select the container you want to edit.
To Edit the component width:
Click and drag the width button (left or right) to change the grid percentage width or left margin(grid prefix) of the container. You can also use the width pulldown menu to set the width.
To add Margin Top or Bottom:
Click and drag (up or down) to set the top and bottom margins for a container. You can also key in Margin Top or Margin Bottom.
Default Padding
Default padding, found in the Margins and Padding tab, is turned on for a container by default. Each container will have 10px of inside padding on the left and right sides of the container unless this is turned off.
Compass Tool
To move a container up or down:
1. Click on Compass Tool.
2. Then Click on the up or down arrows to move the container.
Style a Container
1. Click on the paintbrush button.
2. Click on the Background tab.
3. Edit the Background Options
Remove Container styles:
1. Click on the paintbrush button.
2. Click on the Clear All Styles link.
3. Edit the CSS source code and/or click Save to commit your changes.
Background Color
Choose a color with the color selector.
Image
1. Click the image icon.
2. Add an image
Either from the media selector or Click Upload files to upload the image.
3. Click Add Selected
4. Select Repeat options
Horizontally, Vertically or Don’t Repeat
5. Select Position for your background image
6. Select Size for your background image
Stretch to Fill
Your image will size so that entire width of the images stretches to fill the entire canvas. This sizing will crop the image based on your positioning. This sizing will also change the crop of your image based on the device width. You will see more or less of your image based on the device width.
Scale to Fit
Your image will size so that the entire image is visible.
Manual Positioning
You can also manually position your image from the Top or Left or Both.
Any CSS valid unit will work: px, %, em, rem, pt, etc.
If you put one number it's from the left. (20px) If you put two numbers the first one is from the left second is from the top. (20px 10px) Positive numbers go right or down (20px), negative numbers go left or up (-20px).
7. Click save.
Padding
1. Click on the Padding tab.
2. Click a Quick Pad option or key in a padding amount in pixels, em, or % units.
3. Click Save
Borders
1. Click on the Border tab.
2. Click a the border type, all sides, left side, top side, right side or bottom side.
3. Select the border color.
4. Select or key in the border width.
5. Select line type: Solid, Dotted, Dashed, Inset, Outset, Double.
6. Click Save.
Box Shadow
1. Click on the Box Shadow tab.
2. Select the position.
3. Select the width.
4. Select the blur distance.
5. Select the color.
6. Click Save.
Favorites
If you have favorites saved they will appear in this tab. See Favorites tutorial for more information
1. Click on the Favorite icon to apply the favorite. You can apply more than one favorite. Note: certain styles could conflict with one another.
2. Click Save.
Container Lock
Lock a container to prevent editing. Only users with administrative or designer roles can unlock a locked container
To lock a container:
Click the lock icon.
Click OK in the dialog box to confirm.
To unlock a container:
Click the unlock icon to allow content to be edited.
Click OK in the dialog box to confirm.
Page Content (Edit)
Content is added into page containers. Text, images, video, galleries, stories, and more can be added. Content is editable and can be styled to reflect your design.
See specific tutorials on Components for more information.
To add content to a page:
Drag and drop the content component into the layout container.
Use the Content Toolbar and Content settings to edit the component.
Note: Toolbar selections may change based on the component.
Page Component Toolbar
Edit Content:
To edit the component’s content or settings, click the content icon.
To resize the component width:
Click and drag the width button (left or right) to component. You can also key in the width.
To add margin above and below a component:
Click and drag the height button (up or down) to change the percentage height of the container. You can also key in a Margin Top and Margin Bottom.
To move or reorder a component:
1. Click on the compass tool.
2. Drag the component into the container you want to move it too.
To duplicate a component:
Click and drag the component to anywhere in the layout. Or drag and release in place to create a copy immediately below the existing component.
To delete a component:
1. Click on the trashcan button.
2. When the “Are you sure you want to delete this component” prompt appears click, OK.
3. Click CANCEL to cancel.
To complete edits, click the Close button or press Escape.
Page Preview
You can preview your design with your header and footers at anytime by clicking on Preview.
Use the device icons to review your design for each device. Use the responsive slider to view how your design looks between breakpoints.
Saving a Draft
To SAVE AS DRAFT click the CLOSE button. The page you were working on will be marked changed.
Pages auto-save unless prompted. During the course of building a page you will be prompted to save to commit specific changes.
The page will be in draft mode until you click PUBLISH. Once you click publish the draft page and the live page will be the same.
Publishing a Page
Preview your page to make sure your content is correct. Proofread. Then hit PUBLISH when you are finished. Please note that preview view may not always reflect the live view. A page must be published in order for your changes to appear live.
Duplicating a Page
To duplicate a page Access SITE FLOW. You can then choose to duplicate the navigation, the page, or duplicate page and the navigation.