Pages, Rows, Columns, and Widgets

All of the content of the website is organized into 4 main sections or areas: 

  1. Pages are your main level of organization on the website and are in the Pages panel on the left. 
  2. Rows are sections that divide a page into horizontal segments.
  3. Columns subdivide a row and allow content to be side by side (desktop)
  4. Widgets are the actual content on the page. 

All pages by default will display the header and footer of your site, and additionally, will have at least one row and one column for content.

Pages

The Pages Panel allows you to reorder, manage and create new pages in your site. Organize your site's widgets by using multiple pages to improve your visitors' experience and increases the chance that they will find the information they need. By default your website's Navigation is a direct reflection of and controlled by the pages in the Pages Panel (name, order, etc.)

You can create a maximum of 1000 site pages and popups, and 1500 blog pages. Dynamic pages do not count towards the page count.

Be mindful of page names; keep them short and concise. Also, fewer pages makes for a better user experience as it will make things easier to find. You can also create page "anchors" to help navigate to a specific section of a page.

To access pages (and popups), in the left panel, click Pages.

To add new pages to your site:

  1. In the left panel, click Pages.
  2. Click + Add Page
  3. Select a page type: 
    • Page Builder: Allows you to plan out a page layout using "Designed Sections." Starts you out with a empty page with the Designed Sections menu open to add from. This also now allows you to have a section in your Pages Panel for "Pages in Progress."
    • Blank Page: Start from scratch with a blank page that would have a single row and column with no content to start. All pages including blank pages would by default also show the header and footer as well.
    • Designed Page (Page templates) are prepopulated with relevant widgets.
    • Dynamic Page: Selecting a dynamic page template automatically adds a connected Internal Collection. For more information, see Dynamic Pages. This is an advanced feature and only recommended for experienced users.
    • Navigation Folder: An organizational tool, this puts a "Titled Folder" into to your pages menu to help organize pages. If visible to your navigation, it will NOT be a clickable page.  
    • Page URL: The Page URL page type links the page to another URL instead of creating a new page.
  4. Type a title for your new page, and a URL, if necessary.
  5. Click + Add Page and start creating your new page.

It is highly recommended that instead of creating a new blank page, that you "Duplicate" an existing page. This not only saves time it also ensures consistency in your page layouts. Simply open the Pages Panel and click the three dots to access the page settings, and choose Duplicate.

Reorganize Pages

To reorganize the order of pages that display on your site:

  1. In the side panel, click Pages.
  2. In the Pages Panel click and drag a page to move it where you want it to appear in order.
  3. Drag a page slightly to the right to nest the page as a sub-page of the page above. 

Pages and Navigation can only have up to 3 levels of pages.

Page Settings

Access page settings by clicking the settings icon (three dots) next to each page in the Pages Panel. You have the following options:

  • Rename. Renames the page in the editor. Note this does not change the page URL.
  • Show or Hide from Navigation. Make the page hidden on the navigation menu. It will still be visit-able by the direct URL.
  • Duplicate. Creates an exact copy of the page.
  • Publish page. Publish changes on a single page. For more information, see Publish a Single Page.
  • Page URL. Customize the URL for the page.
  • Edit Page SEO. Access all the SEO settings for the page. For more information, see the SEO section.
  • Set as Home Page. Allows the page to be set as the Home page for your site (index). Great for temporary landing pages, or under constructions pages.
  • Set Access. Set a password for the page or configure the page for members only. For more information, see Password Protected Pages.
  • Convert to Dynamic Page. Click to convert the page to a dynamic page. Select a collection, and click Done. For more information, see Create Dynamic Pages.
  • Set as a draft. Set a page as a draft when you do not want it to be searchable or on the live site. It also makes the page inaccessible (the direct page URL will render a 404 error).
  • Delete. Completely deletes a page. Note there is no undo or trashcan, the page is gone. 

Rows

All pages are subdivided into sections known as rows. Rows go horizontally across the page. You can have as many rows on the page as you wish. Rows can be edited by clicking the blue Row tag (hovering over a row it will appear on the upper left corner). Rows help to organize and space out your content. Rows will have a default white space and padding to them (edited under Theme).

There are multiple ways to add rows here is the most common method.

To add a row:

  1. Click on the Row Tag of an existing row 
  2. Choose Add
  3. Then choose Row above or below

Columns

Column are used to subdivide rows. All rows have a single column by default. You can have a maximum 4 columns in a row. Columns allow you to organize content and place widgets side by side.

To add a column:

  1. Click on the Row Tag of an existing row 
  2. Choose Add
  3. Then choose Column

On mobile devices columns collapse and stack on top of one another like rows. 

Widgets

Widgets are what make the magic happen! These are drag and drop elements that place and control the visible content on your page.

To Add Widgets to a page:

  1. First navigate to a page you wish to edit
  2. Open the Widget panel from the left (+)
  3. Drag and Drop the desired widget on to the page

Be sure to drag and drop the widget on to the page. Clicking a widget in the Widgets panel will place the widget onto the current page into the first column of the first row of the active page.

To edit existing widgets on a page:

  1. Navigate to the desired page
  2. In the content area click on the content/widget
  3. The widget editor will pop-up
  4. Use the Content tab of the widget editor to change the content
  5. Use the Design tab of the widget to change visual design setting of the widget

Content Example- On this home page we have multiple rows, in the first content row we have an empty column. in the second content row, we have 2 columns with widgets: a Slider on the left, and Photo Galley on the right.

Notice how the columns stack when on Mobile, the left column will be on top of the right column by default


 

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.