Creating Pages on the website

Note: This document provides an overview for creating individual pages on a website. If you are looking to create pages for a specific type of website, you may want to see another document first:

• Website Creation Guide
• Articles Module Setup Guide
• Course Module Setup Guide
• Media Library Module Setup Guide

This document is an overview of how to create pages on the website. This topic can be very detailed and deep depending on the context of the website and the pages being worked on. So for instructional purposes this is a general guide on how to create pages on the website.

Page creation

To create a page on the website:

• Click on the title of the website (website page tree appears on the right side.)
• Use the "Add page" button at the top of the page tree to add a new page
• The list of Page Preset templates will appear. Review the list, see if what you need is listed
• Choose the preset by clicking on it. The preset is applied to the page.

  • Note: for websites using the ALPS design, use a page preset with "ALPS" in the header. This ensures the page preset is configured for the ALPS design.

• There are preset pages that will almost completely build the page for you. They only need a little configuration in their content blocks.
• There are other preset pages which allow you to build the content from scratch.
• If a team builds a page and there's interest in sharing that with others, please let us know so we can create a page preset of it.

Page menu

Options for working with the individual page:

• Page menu can be accessed by clicking the 3 vertical dots to the right of page title in the page tree
  • Menu options:
  • Edit content: Access the page content to work on the page and the content layout on the page.
  • Page Settings: Access the configuration settings of the individual of the page. (see Page settings below)
  • Translations: Translate the content elements on the page.
  • Duplicate page: Make a copy of the current page.
  • Add a subpage: create a child page below the selected page.
  • Set as homepage: ! use with caution. This sets the selected page as the homepage of the website.
  • View online: View the page content in the frontend.
  • Change preset: Swap out the current preset page. !!! This removes any content on the page!
  • Hide page: Disable the page, it will no longer appear in the frontend.
  • Delete: Delete the page.

Page settings:

Various configuration settings for the page:

• General tab

  • Title: short description displayed on browser tab or window
  • Breadcrumb title: title to display in breadcrumbs. Use to override Title.
  • Slug: becomes the URL path for the page
  • Description: Meta-Description for the page
  • Language: use only if necessary to override website language for the page
  • Icon: used in places (e.g. menus) to graphically represent this page
  • Layout: select only if the page layout is to be changed
  • Image: Main image for this page.
  • Visibility of the page:
    • Hide in Menus: don't display the page as a menu element
    • Hide in sitemap: don't display the page in sitemap
    • Hide in Breadcrumbs: don't display the page in Breadcrumbs
    • Chromeless: Hide standard design of the website this page

• SEO tab

  • configuration of the page for SEO, and Facebook & Twitter sharing

• Design (Hope Design only)

  • Adjust design of the page for preconfigured settings

• Advanced tab

  • Publish dates: schedule page publishing/unpublish date
  • Page access: use the Authentication functionality to protect pages (website authentication activated)
  • Password protected page: use a password to lightly secure a page
  • Dynamic content: use this field with certain frontend blocks to dynamically provide data to the blocks used on the page
  • XML Content: mainly used to setup an RSS feed for shows or articles
  • JSON: used if page output is JSON. Example: to use for app deep linking.
  • Text: used if page output is plain text. Example: to use for robots.txt file
  • HTML: used if page output is HTML. Note: a dangerous option, exposes site to security vulnerabilities.

• Danger Zone tab

  • Delete page

Website page tree structure

• Multiple levels of pages can be created to develop the structure of the website
  • Menu is usually manually created, so the page tree structure does not have to mirror menu
• Drag and drop pages, or use subpages, to create the structure of the website
• Depending on the functionality of the website, different structure or branches may be required. A common example of this is the Article List page which displays a list of the current articles. The Article List page has a subpage "Details" for displaying the actual article.

Developing website pages

After the page is created, there are a few things for the designer or website editor to consider. Depending on the page preset selected, there may be a few or more things to setup for the page.

• If the page preset is a fully functional page:
  • Adjust images, texts, etc. as needed
  • Does the page have dynamic content from a Web Engine module?
    • add configuration here: Page Settings > Advanced tab > Dynamic content
  • Check blocks for translation elements (update texts to website language)
  • Check blocks as one may need to adjust the block configuration
• If the preset page is empty of content
  • See sections below

Page device widths

Along the top of the page are icons representing device widths. The layout of the content of the page can be seen by clicking the icons, to adjust the page width to the represented device widths. The icons correspond to the px dimensions as follows:

• Mobile: up to 639px
• Phablet: 640px
• Tablet: 768px
• Laptop: 1024px
• Desktop: 1280px
• Wide: 1536px (Adventist design)

Basic Page layout

There are two types of blocks for page content layout:

1. Wrappers:
   • Section blocks
   • Container blocks
2. Layout:
   • Grid
   • Box

View the Settings tab of the above blocks to see what Spacing, Padding, etc. can be configured to assist laying out content on the page for the design you are building

Here are some pointers on how to layout a page:

• The page itself is the outermost "container".
• A page can contain one or more "Section" (Wrapper) blocks.
  • The page content should be broken into Section blocks as the content focus changes.
  • Each Section on the page can have a different layout.
• Each Section block can contain one or more Container (Wrapper) blocks.
  • Organize the content logically by using the Container blocks.
  • Each Container in the Section can have a different layout.
• In the Container block, use Grid & Box blocks to layout the content
  • Think of Grid like a "CSS Grid" element on the page
  • Think of Box like a "CSS Flexbox" element on the page

Content blocks

The Web module has a wide variety of blocks to use for displaying content. Text, images, video and audio can be added to a webpage depending on blocks used and the modules activated in the Web Engine backend.