Themeisle Docs

Appearance

Raft - Settings Reference ​

Raft is a lightweight, minimalist WordPress Full-Site Editing block theme suitable for blogs, small businesses, startups, agencies, portfolios, e-commerce shops, and personal sites, with fifteen style variations and a large library of block patterns. All settings are managed through the WordPress Site Editor (Appearance > Editor), where you can customize Global Styles, edit templates and template parts, insert block patterns, and configure navigation.

Site Editor — Global Styles ​

Global Styles controls the overall visual appearance of the site. Open it by clicking the Styles icon (half-filled circle) in the Site Editor sidebar. Changes here apply site-wide unless overridden at the block level.

Colors ​

The theme defines seven palette colors used consistently across all templates, patterns, and style variations.

  • Background: The main site background color. Default is a warm gray (#EBE8E6).
  • Text: The primary text and content color. Default is a dark charcoal (#1D1F25).
  • Accent: The primary highlight color used for buttons, interactive elements, and call-to-action areas. Default is a warm terracotta (#C26148).
  • Accent Secondary: A secondary accent color for hover states and supporting elements. Default is a deeper terracotta (#AC5039).
  • Dark Background: A dark color used for inverted sections, footer areas, and cover block overlays. Default is near-black (#1E1E1E).
  • Light Background: A subtle alternative background for cards, highlighted sections, and content containers. Default is a semi-transparent white (60% opacity).
  • Inverted Text: A light text color used on dark backgrounds. Default is near-white (#FDFDFD).

The theme enables link color controls. Links default to the Text color with no underline. Gradients are disabled by default.

Typography ​

The theme provides nine font families, all served locally from the theme's own files:

  • Readex Pro (sans-serif) — The default body font. A clean, geometric variable font with weights 160-700.
  • Source Serif Pro (serif) — A traditional serif with regular and italic styles, weights 200-900. Used in the Garden Flow and Light Serif variations.
  • Figtree (sans-serif) — A friendly, rounded sans-serif with regular and italic styles, weights 300-900. Used in Blue Cream and Purple Dawn.
  • Outfit (sans-serif) — A geometric sans-serif, weights 100-900. Used in Dark Fit and Night Owl.
  • Spline Sans (sans-serif) — A clean, technical sans-serif, weights 300-900. Used in Violet Grain.
  • Geologica (sans-serif) — A modern sans-serif with optical size variation, weights 300-900. Used in the Washed variation.
  • Gloock (serif) — A distinctive display serif at 400 weight only. Used for headings in Green Retro.
  • Spline Sans Mono (monospace) — A monospace font with regular and italic styles, weights 400-800. Used in the Mono variation.
  • Lora (serif) — An elegant serif with regular and italic styles, weights 400-700. Used in Green Retro and Wooden.

Six font size presets are available:

  • Small: 14px
  • Normal: 18px (the default body text size)
  • Medium: 24px
  • Large: 28px
  • Extra Large: 32px
  • Huge: 56px

Custom font sizes are enabled. Line height controls are available on all text blocks.

The theme sets default heading styles:

  • H1 uses the Huge size (56px) with 600 weight and 1.25 line height
  • H2 uses Extra Large (32px) with 600 weight and 1.35 line height
  • H3 uses Large (28px) with 600 weight and 1.35 line height
  • H4 uses Medium (24px) with 600 weight and 1.4 line height
  • H5 uses Normal (18px) with 600 weight and 1.55 line height
  • H6 uses Small (14px) with 600 weight and 1.6 line height

Captions default to Small font size in the Text color.

Layout ​

  • Content width: 740px — controls the maximum width of content in constrained layouts.
  • Wide width: 960px — controls the maximum width of wide-aligned blocks.

Spacing ​

Seven responsive spacing presets are available, each using clamp() for smooth scaling across screen sizes:

  • XXS: 0.4rem to 0.5rem
  • XS: 0.6rem to 1rem
  • S: 1rem to 1.5rem
  • M: 1.5rem to 2rem
  • L: 2rem to 3rem
  • XL: 3rem to 4rem
  • XXL: 3rem to 5rem

Available spacing units are px, em, rem, vh, vw, and %.

Borders ​

Full border controls are enabled: color, radius, style, and width can be customized on supported blocks.

Per-Block Style Overrides ​

The following blocks have theme-level default styles:

  • Button: Accent background with a 2px solid transparent border, inverted text, 3px border radius, responsive padding (XS vertical / M horizontal), Normal font size with 600 weight. The outline button variation uses a transparent background with a 2px solid inherited-color border.
  • Comment Author Name: Normal font size.
  • Comment Date: Uppercase, 12px font.
  • Comment Edit Link: Uppercase, 12px font.
  • Comment Reply Link: Uppercase, Small font, accent color.
  • Search: 5px border radius.
  • Quote: Large font size.
  • WooCommerce Mini Cart Contents: Uses the theme's Text and Background colors, with links in the Accent color. This styling only takes effect when WooCommerce is active.

The theme also registers one custom block style:

  • Categories block — Pills: Applies a pill-shaped (rounded) visual style to the post categories block.

Site Editor — Style Variations ​

Style variations change the color palette and typography in one click. The theme ships with fifteen variations in addition to the default warm-toned style. Each is available in the Styles panel under "Browse styles."

Light variations:

  • Apple Clean: A warm neutral palette with a sandy background (#E7DED0), dark green-gray text (#292E29), and a muted red accent (#C25252). Keeps the default Readex Pro font.
  • Blue Cream: A soft peach background (#FFF0E9) with dark text and a deep blue accent (#2A359E). Switches the body font to Figtree.
  • Clean Cut: A pure white background with black text and a monochrome accent (text color matches accent). Creates a stark, no-color design.
  • Garden Flow: A cool off-white background (#F5F4F1) with a forest green accent (#4D6E50). Switches the body font to Source Serif Pro for an editorial feel.
  • Green Retro: A light gray background (#E8E3E3) with a rich green accent (#3F703B). Switches the body to Lora (serif) and headings to Gloock (display serif) for a vintage, retro look.
  • Light Serif: A blue-gray background (#DFE2ED) with black text and a monochrome accent. Switches the body font to Source Serif Pro.
  • Violet Grain: A warm cream background (#FEFAF7) with a vivid purple accent (#6C0AEA) and a peachy Light Background. Switches both body and heading fonts to Spline Sans.
  • Washed: A warm cream background (#FEFAF7) with a warm orange accent (#EA7847) and a peachy Light Background. Switches both body and heading fonts to Geologica.
  • Wooden: A pale beige background (#EFECE7) with a brown accent (#544636). Switches the body font to Lora for an organic, earthy feel.

Dark variations:

  • Blue Retro: A bold blue background (#334FAE) with light text and a golden yellow accent (#F9C33E). Creates a vibrant, retro-inspired design.
  • Dark Fit: A dark charcoal background (#1B1818) with white text and a green accent (#417E61). Switches the body font to Outfit.
  • Green Corn: A deep green background (#2C4A27) with light text and a warm orange accent (#FAAF58). Creates an earthy, natural palette.
  • Mono: A deep navy background (#191B47) with white text and a bright blue accent (#0B33C1). Switches both body and heading fonts to Spline Sans Mono for a developer/tech aesthetic.
  • Night Owl: A dark gray background (#232323) with white text and a purple accent (#5C40CA). Switches the body font to Outfit.
  • Purple Dawn: A deep purple background (#3A3767) with white text and a coral accent (#DB7358). Switches the body font to Figtree.

Site Editor — Templates ​

Templates control the layout of specific page types. You can edit any template in the Site Editor. Changes are saved as user customizations and can be reverted to the theme default at any time.

  • Front Page: The homepage when a static front page is configured. Includes the header, a Hero Section pattern, a post content area for the static page, a Three Columns of Features pattern, a Call to Action pattern, and the footer.

  • Index: The default blog listing page. Displays an alt-background banner with the heading "Our awesome blog," followed by a grid of posts (3 per page) showing featured images, dates, titles, and categories. Includes pagination and a bottom banner promoting Otter Blocks with a "Learn More" button.

  • Single Post: The layout for individual blog posts. Shows the post title, date, and featured image on an alt-background header, then the post content, followed by a comments section with threaded comments (avatar, author name, date, content, reply link) and a comment form.

  • Page: The layout for static pages. Displays the page title on an alt-background header, then the page content below.

  • Archive: Used for category, tag, author, and date archives. Shows the archive title on an alt-background header, then posts displayed as a list (each showing title, date, and categories) with pagination.

  • Search: The search results page. Displays the heading "Search results" and a search input field on an alt-background header, then matching posts in a list (title, date, categories) with pagination.

  • 404: The page shown when a URL is not found. Displays a large "404" text, an error message, and a centered search box to help users find content.

  • Blank Page - Only Content: A minimal template that outputs only the post content with no header, footer, or wrapper. Use this for landing pages or layouts built entirely with blocks.

  • Page with Header & Footer: A template that includes the header and footer but renders the page content in a simple full-width layout without a page title banner. Use this for pages where you want standard chrome but full-width content.

The theme also registers three WooCommerce-specific custom templates. These only appear when WooCommerce is active:

  • WooCommerce Single Product: The layout for individual product pages.
  • WooCommerce Checkout: The layout for the checkout page.
  • WooCommerce Cart: The layout for the cart page.

Site Editor — Template Parts ​

Template parts are reusable sections shared across multiple templates. You can edit them in the Site Editor, and changes propagate everywhere the part is used.

  • Header: The default header. A row with the site title (uppercase, Large font) on the left, and a horizontal Navigation block with social media icons (Facebook, Instagram, Twitter) on the right. Uses the Light Background color with compact 20px vertical padding.

  • Header Centered: An alternative two-row header. The top row is a thin accent-colored bar showing a phone number on the left and a "Log in" navigation link on the right. The main row uses a three-column layout: social media icons (Twitter, Facebook, Instagram, Dribbble) on the left, the site title centered in the middle, and a Navigation block on the right. Use this when you want a more structured header with contact information and social links.

  • Footer: The default footer. A simple bar on the Light Background color with copyright text on the left and a "Privacy Policy" navigation link on the right.

  • Footer with Columns: An alternative footer with a three-column layout on the Light Background. The first column has a "Welcome to Raft" heading, description text, and a button. The second column displays a "Browse" heading with the two most recent blog post titles and dates. The third column has a "Connect with us" heading, description, and social media links (Twitter, Instagram, Dribbble). A bottom bar shows the copyright text on the left and a Privacy Policy link on the right.

Site Editor — Patterns ​

Patterns are pre-designed block layouts you can insert into any page or template. The theme ships with approximately 55 patterns organized into the following categories.

Heroes / Page Titles ​

  • Hero Section: A full-width hero with a heading, description, button, and background image.
  • Hero with Columns: A hero section with text on one side and feature columns on the other.
  • Hero Columns: A two-column hero layout with text and image side by side.
  • Hero Cover with boxed title: A cover image hero with the title inside a boxed overlay.
  • Cover with Background: A full-width cover block with a background image and overlaid text.
  • Centered Title: A simple centered page title section.
  • Page title with button: A page title area with a call-to-action button.
  • Page title on background: A page title section with a background image.

Features ​

  • Two Columns of Features: A two-column layout with feature items, each having an icon, title, and description.
  • Three Columns of Features: A three-column feature grid.
  • Feature Block: A centered feature section with icon, title, and description.
  • Feature Cards: Feature items displayed as cards with background styling.
  • Features on Background: Features displayed on a contrasting background.
  • Single Feature with Button: A single feature highlight with a call-to-action button.
  • Alternating Feature Columns: Features alternating between left-image/right-text and right-image/left-text.
  • Portfolio Columns: A grid of portfolio items displayed as feature-style columns.

Content ​

  • Content Columns with Hero: A hero section paired with content columns below.
  • Horizontal content cards: Content items displayed in horizontal card layouts.
  • Image Gallery with Title: A gallery of images with a section title.
  • Inverted Background: A content section on a dark background.
  • Inverted Gallery with Title: An image gallery on a dark background with a title.
  • Frequently Asked Questions: A FAQ section with questions and expandable answers.
  • Text Columns: Content organized into multiple text columns.
  • Centered Text on Background: Centered text content on a contrasting background.
  • Contact Details: A contact information section with address, phone, and social links.

Testimonials ​

  • Testimonial Columns with Rating: Multi-column testimonials with star ratings.
  • Testimonial on Background: A testimonial displayed on a contrasting background.
  • Testimonial Fullwidth: A single full-width testimonial.
  • Testimonial Cards: Testimonials displayed as individual cards.

Team ​

  • Team: A team section with member photos, names, and roles in a grid.
  • Team Member Rows: Team members displayed in horizontal rows.

Pricing ​

  • Pricing Plans: A multi-column pricing table with plan names, prices, features, and buttons.
  • Pricing Plans 2: An alternative pricing layout with inline titles.
  • Pricing Plans 3: A third pricing variation.
  • Pricing Plans 4: A fourth pricing variation.
  • Pricing Plans 5: A fifth pricing variation.

Call to Action ​

  • Call to Action: A call-to-action section with a heading, description, and button.
  • Call to Action 2: An alternative CTA layout.
  • Call to Action 3: A third CTA variation.
  • Call to Action with Image: A CTA section paired with an image.

Post Loops ​

  • Post Query Loop: A blog post listing with featured images, titles, and excerpts in a grid.
  • Post Query Loop 2: An alternative post listing layout.
  • Posts Query Loop 3: A third post listing variation.
  • Posts Loop Cards: Posts displayed as cards with images and titles.
  • Posts Loop Card Centered: Post cards with centered text.
  • Posts Loop Rows: Posts displayed in horizontal rows.

Pages ​

Complete page layouts that can be applied to new pages as a starting point:

  • Homepage 2: An alternative homepage design with a different arrangement of hero, features, testimonials, and CTA sections.
  • Homepage 3: A third homepage variation.
  • About Page: A complete about page with team section, company story, and values.
  • Contact Page: A contact page with contact details, a map placeholder, and social links.
  • Portfolio Page: A portfolio showcase page with project grid and descriptions.
  • Services Page: A services page with feature sections and pricing.

Site Editor — Navigation ​

Menus in Raft are managed as Navigation blocks inside the Site Editor, not through the classic Menus screen. The theme's templates include navigation in the header.

  • Header navigation: A horizontal menu in the header template part, aligned to the right of the site logo and title. To edit, open the header template part in the Site Editor and click the Navigation block to add, remove, or reorder menu items. On mobile devices, this menu collapses into a responsive overlay.

  • Header Centered navigation: When using the Header Centered template part, the navigation appears centered below the site title.

  • Footer links: The default footer does not include a Navigation block. You can add one by editing the footer template part in the Site Editor.

The theme also registers a Primary Menu menu location for backwards compatibility, though the Navigation blocks in the Site Editor are the primary way to manage menus.

Otter Onboarding Integration ​

The theme includes built-in support for the Otter Blocks plugin's onboarding wizard. When Otter Blocks is active, an onboarding experience offers alternative template designs that can be applied in one click:

  • Archive templates: Archive Boxed, Archive Cards, and Archive Row layouts.
  • Single post templates: Single Post Centered, Single Post Columns, and Single Post Cover layouts.
  • Front page templates: Homepage 2 and Homepage 3 alternatives.
  • Page templates: About Page, Contact Page, Portfolio Page, and Services Page starter content.

These onboarding options provide additional template variations beyond the theme's built-in templates without requiring manual pattern assembly.