Styleguide

Colors

The active MOI palette uses simple functional names that match the Sass variables, text utility classes, and row background values. Use these exact names in new site content.

Primary link and button color: Blue #5B899F.

Hover and stronger accent color: Teal #508795.

Default body text: Black #000000.

Typeface, Text, and Headings

Typography is controlled globally by the theme. Use heading levels according to the site’s actual hierarchy rather than selecting a level only for visual size.

Paragraph text uses Brown Pro with the responsive base font size and line height.

Paragraph bold text

Paragraph italic text

Paragraph text link

H1 / Eyebrow Page Label

H1 behavior: WordPress H1 blocks use the theme’s eyebrow treatment: Brown Pro, uppercase, blue, and compact. Pair the page H1 with a descriptive H2 title, as shown at the top of this guide.

H2: Primary Page or Section Title

H3: Major Supporting Section

H4: Card or Subsection Heading

H5: Smaller Display Heading

H6: Eyebrow or Small Label

Heading hierarchy: Use one H1 per page. Follow it with H2 sections, then H3 subsections. Avoid skipping levels when the content structure depends on them.

Blockquotes use Instrument Serif for prominent editorial or testimonial copy.

Optional citation

Text Size and Alignment Utilities

These utility classes can be added to paragraphs, headings, and compatible blocks.

Small text example

text-small

Medium text example

text-medium

Large text example

text-large

Extra-large text example

text-xl

Left aligned text

text-left

Centered text

text-center

Right aligned text

text-right

Lists and Separators

Use the native WordPress List block. The theme replaces standard bullets with the MOI wave-style marker and adds subtle dividers between list items.

• Keep each list item concise.
• Use lists for scannable features, amenities, instructions, and recommendations.
• Use separate paragraphs when an item needs a long explanation.

Ordered-list note: The current theme applies the same custom marker treatment to WordPress list blocks. Do not rely on visible numbering for step-by-step instructions unless the list styling is specifically adjusted.

The native WordPress Separator block renders the repeating MOI wave divider shown throughout this guide.

Row Shortcode: Size Options

The

Row Shortcode: Spacing Options

The spacing attribute controls vertical padding. The default value is md.

[row size="wide" spacing="lg"]

Place content here.

[/row]

Row Shortcode: Background Options

The bg attribute accepts the exact values below. Dark rows automatically switch text, links, and supported button treatments for contrast.

Live examples follow. Each is a separate row so the shortcode is never nested.

Combined Row Example

[row size="compact" bg="mist-blue" spacing="xl"]

Size, background, and spacing can be combined.

[/row]

Buttons

Use the native WordPress Buttons block. The theme applies Brown Pro, uppercase labels, pill-shaped corners, and responsive sizing.

Default Filled Button

No additional class is required. The default button uses blue and changes to teal on hover.

Outline Button 1

is-style-outline--1

Outline Button 2

is-style-outline--2

The compiled theme currently styles the two outline variation classes above. The older is-style-outline example is not the current MOI class.

Underline Button

btn-underline

Add btn-underline under Advanced → Additional CSS Class(es).

Keep button labels brief and action-oriented. Use one clear primary action per section whenever possible.

Image Lightbox

The theme loads GLightbox globally for blocks and templates that implement enlarged images or galleries.

• Use the Image Carousel or another custom block’s built-in lightbox behavior when available.
• Do not add a second lightbox library to an individual page.
• The current theme files do not define a universal editor-facing CSS class for turning any link into a lightbox.
• WooCommerce gallery zoom and Photoswipe are intentionally disabled by the theme.

Custom Blocks

The following blocks are registered from the theme’s /blocks/ directory and appear under Crowerks Blocks in the WordPress inserter.

Configure each block through its editor sidebar. Preview the result at desktop and mobile widths, and avoid stacking multiple high-impact blocks without a quieter section between them.

FAQ List Block

Displays selected FAQ posts in an accessible expandable list. FAQ content is managed under the site’s FAQ post type and may be organized with FAQ Categories.

• Use for policies, accessibility information, planning details, and common guest questions.
• Keep each answer focused on one question.
• Use the block controls to select and order FAQs.
• Expand the first item only when immediate visibility is useful.

Add block: Crowerks Blocks → FAQ List, then select and order the FAQs in the sidebar.

Full Width Promo Block

Creates a high-impact edge-to-edge section with a background image, heading, supporting text, and call-to-action button.

• Use for booking calls to action, seasonal messages, special offers, and major site pathways.
• Choose an image with clear space behind the text area.
• Keep the heading and supporting text concise.
• Avoid placing two Full Width Promo blocks back-to-back.

Add block: Crowerks Blocks → Full Width Promo, then choose the image and enter the promotional content.

Guest Room Split Block

Displays guestroom content in a structured split layout that pairs room imagery with room details and a booking pathway.

• Use on room overview and guestroom category pages.
• Select the intended room posts and confirm their order.
• Make sure every room post has a featured image and complete details.
• Avoid duplicating the same room in multiple blocks on one page.

Add block: Crowerks Blocks → Guest Room Split, then select and order the room content.

Image Carousel Block

Displays a curated gallery using the MOI carousel system. The theme registers a cropped 1800 × 1100 pixel carousel image size for consistent presentation.

• Use for property photography, guestrooms, amenities, and visual storytelling.
• Choose images with a consistent orientation and visual quality.
• Write unique and useful alt text for every image.
• Use optimized web images instead of oversized originals.

Add block: Crowerks Blocks → Image Carousel, then select and order the images.

Post Grid Block

Displays a responsive grid of selected posts, pages, or categorized content.

• Use for room categories, amenities, local guides, offers, and related content.
• Keep card image quality and aspect ratios consistent.
• Use a clear section heading when the grid needs context.
• Limit the card count so the section stays scannable.

Add block: Crowerks Blocks → Post Grid, then choose the content source, item count, and order.

Post Split Block

Highlights one or more selected posts in an alternating image-and-content layout.

• Use for featured amenities, room categories, dining, local experiences, and editorial sections.
• Keep excerpts concise so paired items remain visually balanced.
• Check image focal points on desktop and mobile.

Add block: Crowerks Blocks → Post Split, then select the posts and confirm their order.

Showcase Carousel Block

Displays a horizontally scrollable collection of content cards when a section should present more items than a standard grid without creating an overly long page.

• Use for amenities, attractions, experiences, seasonal highlights, and events.
• Add a heading and optional supporting text that explain the collection.
• Use manual ordering when editorial order matters.
• Confirm that each selected item has a strong featured image.

Add block: Crowerks Blocks → Showcase Carousel, then configure the heading, selected content, and order.

Spotlight Card Block

Creates an image-led feature card with a title, short description, and optional button.

• Use inside WordPress Columns when presenting two to four related pathways.
• Keep card copy similar in length across a row.
• Choose images that remain readable beneath the overlay.
• Do not use the block for long-form copy.

Add block: Add a WordPress Columns block, then place one Spotlight Card inside each column.

Room Photos Shortcode

The shortcode renders a guestroom slider from an ACF repeater field on a room post.

The required type value must match the exact ACF field name that stores the room-photo repeater.

Current Post

[roomphotos type="room_field_name"]

Specific Post

[roomphotos type="room_field_name" post="988"]

Replace room_field_name with the exact ACF repeater field name and replace 988 with the intended WordPress post ID.

Do not place the placeholder shortcode on a live page. It will output nothing until a valid field name and post are supplied.

Scroll Animations

The theme loads AOS with a 150-pixel offset, 750-millisecond duration, 120-millisecond delay, and once: true.

The current compiled theme does not define an aos-fade-up utility class. AOS animations require a data-aos attribute in a template or Custom HTML block.

Custom HTML Example

<div data-aos="fade-up">
  Content to animate
</div>

PHP Template Example

<div <?php echo aos_attrs('fade-up'); ?>>
  Template content
</div>

Custom MOI animation values: fade-slide-right, fade-slide-left, fade-slide-up, fade-slide-down, fade-scale, fade-scale-up, and fade-in. Standard AOS values such as fade-up are also available from the library.

Use animation selectively. It should support hierarchy and pacing rather than animate every small element.

Instagram Feed

Displays recent images from the Manzanita Oceanfront Inn Instagram account. Results are cached for two hours.

The account value should be moi. The count value controls the maximum number of images requested.

[instagram_feed account="moi" count="6"]

Contact Map

Displays the preconfigured Mapbox contact map for Manzanita Oceanfront Inn at 248 Ocean Road in Manzanita, Oregon. The marker links visitors to Google Maps.

[moi_contact_map]

OpenTable Minibooker

Loads the custom OpenTable booking interface from the theme template part. Use it only where the dining reservation widget is intended.

[moi_opentable]

Events View

Renders the active Events Calendar view inside the MOI events wrapper. Event content and display settings are managed through The Events Calendar plugin.

[moi_events_view]

Add the shortcode only where a full events view is intended. It can generate a large section and is not rendered live in this guide.

Page-Building Standards

• Use one H1 page label per page and pair it with a descriptive H2 title.
• Build major sections with the row shortcode system.
• Never nest a
  shortcode inside another
  shortcode.
• Use compact rows for long text and wide or full rows for visual layouts.
• Use the exact current color names: white, light-gray, charcoal, slate-gray, black, mist-blue, light-blue, teal, and blue.
• Use native WordPress Buttons and the documented MOI button classes.
• Use custom Crowerks blocks for repeated layouts instead of recreating them with custom HTML.
• Write unique alt text that describes the actual image.
• Preview every page at desktop, tablet, and mobile widths.
• Check links, button destinations, image crops, heading hierarchy, and spacing before publishing.

End of site builder guide. Last updated: July 23, 2026.