Developing 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:

Articles Module Setup Guide

Course Module Setup Guide 

Media Library Module Setup Guide

This document is an overview of how to develop 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. We recommend you begin first with Creating pages on the website. 

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 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 publish/un-publish 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

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:
   1. Section blocks
   2. Container blocks
2. Layout:
   1. Grid
   2. 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