Technical Documentation

This website is built with custom branded components managed via the WordPress block editor. This grants Mesa Verde Motel content creators flexibility to generate new pages or stories as needed.

Required plugins. These plugins should never be deactivated:

  • Advanced Custom Fields
  • Timber
  • Smash Balloon Instagram Feed
  • Image Hotspot

Page Guidelines

Site Footer. Logo, address, and social networks are managed via the Global Data page.

Default Page Template. Standard content pages are constructed using the default page template. Page templates are the outer shell of the page, combining page layout, site navigation, and site footer. Templates are managed via the right sidebar of each page.

404 Template. This template displays when a url is missing or incorrect.

Image Hotspot. This plugin is used to build a dynamic area map as used on the Things To Do page. Edit this map via Image Hotspot in the right sidebar.

Smash Balloon Instagram Feed. This plugin provides a connection to Instagram and is used to create the photo grid on the home page.

Component Guidelines

Content components are the primary tool to add content to a page. They are added inside the page using the WordPress block editor. The Component List below are the custom branded components created specifically for the Mesa Verde Motel website.

Standard WordPress blocks may also be used. But care should be taken to preview changes before publishing. Only the WordPress blocks listed in the Rich Text component below have been tested for use within this website.

Component List

Component list URL: https://mesaverdemotel.com/website-documentation/


Contact List

This component displays a contact information list. Contact list data is maintained via the Global Data page.

Directory List

This component creates a directory on one side and an image on the other side.

  • Body Text Size - Regular, Large.

Image Grid

This component displays an image set in a 2-wide or 3-wide grid.

  • Grid Width - Two-Wide, Three-Wide.

Image Layout

This component displays an image in normal, wide, and full bleed layouts.

  • Image Alignment - Normal, Wide, Full Bleed.

Jumbo List

This component creates lists with more spacing and larger bullets than standard ul/ol styles.

  • List Type - Ordered, Unordered.

Rich Text

This component is used to display standard page content with custom formatting.

  • Section Width - Default, Wide.
  • Line Height - Normal, Wide.
  • Dual Columns

Room Teaser

This component is used to display a room teaser with image and brief description.

Split Topper

This component displays a large image at left, content at right. Usually used at the top of a page.

  • Body Text Size - Regular, large.
  • Offset Width - Displays body text content in a wider section with the description offset to the right.

Story Leader

This component is used as a section introduction.

  • Body Text Size - Regular, large.

Story Leader - Split

This component is used as to create a dual-column section introduction.

  • Body Text Size - Regular, large.
  • Offset Width - Displays body text content in a wider section with the description offset to the right.

Topper

This component displays a large image. Usually used at the top of a page.

  • Flourish - Add a second image overlaying the main image to the bottom right.
  • Display Settings - Default(Inset), Full Bleed.