DEV3Technologies
All case studies

DEV3 Technologies · own product

DEV3 Solace: a hotel and resort WordPress theme with booking requests and a 3D room key

Our own WordPress theme for hotels, resorts and spas: a glass booking bar with a live rate × nights estimate, rooms and suites with a sticky booking card, dining, spa and experiences, a gift-voucher shop, rich scroll motion and one small 3D glass room key.

WordPressPHPtheme.jsonElementorWooCommercethree.jsLenisJSON-LD
Industry
Hospitality (WordPress theme)
Services
Web DevelopmentUI/UX Design

Live project preview

Client systems are private — screenshots shown where permitted.

DEV3 Technologies · own product — screenshots
Immersive hero — a full-bleed resort scene, a split serif headline, a glass booking bar for dates, guests and room, and a 3D glass room key that glows like a pool light.

Immersive hero — a full-bleed resort scene, a split serif headline, a glass booking bar for dates, guests and room, and a 3D glass room key that glows like a pool light.

The challenge

A hotel website has one job above all others: turn a visitor into a booking enquiry, ideally a direct one. Yet hotel themes tend to fall into two camps. Some are a slider and a link to a booking engine, so the site does little selling. Others bundle a full reservation system the hotel does not want to run beside its channel manager. Independent hotels and resorts needed something in between: rooms that sell themselves with facts, amenities and a price, a request form that shows an estimate before the guest commits, and an atmosphere that feels like the property. The motion had to feel slow and calm, not busy, and the 3D had to be a small, optional detail that never delays the booking bar.

Our solution

Solace is a classic PHP theme with theme.json, built on DEV3's shared theme core and the DEV3 Theme Toolkit plugin. The theme owns presentation, the room templates and its 3D preset. The toolkit owns functionality: the room, experience and event post types, booking requests, Elementor widgets with block twins, the DEV3 Motion controls, WooCommerce extras and the demo importer.

Key design decisions

  • Requests, not reservations. The Request Form collects check-in, check-out, adults, children and room, shows a live rate × nights estimate, then stores the request in the dashboard and emails it. No payment is taken and no availability calendar has to be kept in sync; the hotel confirms by email. Rooms can still link out to a booking engine.
  • One form, two shapes. The same widget renders as a glass bar in the hero (dates, guests and room in one row) or as a full card on the rooms page and inside each room, where the room is preselected.
  • Rooms as data. Rate, period, guests, beds, size, view, amenities and gallery are plain fields that feed the cards, the room hero, the facts strip, the estimate and the HotelRoom structured data.
  • Day to dusk. A second image inside a hero cross-fades as the visitor scrolls, and the 3D room key follows the same light, so the page moves from daylight to evening without a video.
  • Motion with restraint. Split headings, mask reveals, stacked experience cards and a horizontal rooms rail come from the DEV3 Motion panel. Each one has a reduced-motion state, and the rail becomes a native swipe row on phones.
  • A small, late 3D accent. The glass key is a procedural three.js object on a transparent canvas. It loads only near the viewport, pauses offscreen and shows a poster without WebGL or with reduced motion.

Results

Solace ships as a complete theme with a one-click demo of a fictional resort: 10 rooms and suites, 8 experiences, 4 events, 4 hosts, 6 sample guest reviews, 6 journal posts and 9 shop products, plus 24 block patterns.

  • Theme Check: 0 required-level failures and 0 warnings in the WordPress Theme Check plugin.
  • Coding standards: phpcs with WPCS 3 and PHPCompatibilityWP 7.4+ at 0 errors and 0 warnings.
  • Flows tested: the WooCommerce add-to-cart to order-received flow, and an Elementor editor test where the room key's controls update the 3D accent live.
  • Frame rate: about 60 fps on every demo page in browser QA at 1440 px and 390 px.
  • Weight: the 3D engine is about 207 KB gzip and loads only on pages that use it; the motion module is a 6 KB chunk loaded on demand.

Solace is on the DEV3 marketplace. Watch its video tour there.

Setup guide

Requirements

  • WordPress 6.0 or newer and PHP 7.4 or newer
  • The DEV3 Theme Toolkit plugin (included and required)
  • Recommended: Elementor (free) and WooCommerce. Contact Form 7 is optional; the theme's own booking request form works without it. Elementor Pro is supported but not required.

What's in the download

Unzip the download from your DEV3 account first. Do not upload the download itself to WordPress.

  • dev3-solace.zip: the theme. Install this one.
  • dev3-solace-child.zip: an optional child theme for your own CSS and PHP.
  • dev3-theme-toolkit.zip: the companion plugin (rooms, experiences, events, booking requests, Elementor widgets and blocks, motion controls, WooCommerce extras, demo importer).
  • dev3-solace-demo-content.zip: the demo package for reference. The importer already has a copy inside the theme.
  • Documentation/index.html: the full guide. Open it in a browser.

Install the theme

  1. Go to Appearance → Themes → Add New → Upload Theme, choose dev3-solace.zip, click Install Now, then Activate.
  2. The theme asks for the DEV3 Theme Toolkit (required). Go to Plugins → Add New → Upload Plugin, choose dev3-theme-toolkit.zip and activate it.
  3. Install and activate Elementor, WooCommerce and Contact Form 7 from the same prompt.
  4. Optional: if you plan to change code, upload dev3-solace-child.zip the same way and activate DEV3 Solace Child. The parent theme must stay installed.

Import the demo

  1. Make sure you are logged in as an administrator. Elementor keeps every widget setting only when an administrator runs the import.
  2. Go to Appearance → DEV3 Demo and click Import demo.
  3. The import adds:
    • the Home, Rooms & Suites, Dining, Spa & Wellness, Experiences, Offers, Gallery, Our Story, Location, Reviews, Contact and Journal pages
    • 10 rooms and suites, 8 experiences, 4 events, 4 hosts, 6 sample guest reviews and 6 journal posts
    • 9 shop products (gift vouchers, spa packages and "Solace at home"), the WooCommerce pages, menus and widgets, with Cash on delivery enabled for testing
  4. Open the home page and scroll through it.

Imported items are tagged, so Reset on the same screen removes only them. With WP-CLI you can run wp dev3tk demo import --user=admin.

After the import

  • Replace the demo rooms' rates, and check each room's rate period: the booking estimate multiplies it by the number of nights.
  • Booking requests are emailed to the site admin address in Settings → General and stored under Requests.
  • Set up real payment methods in WooCommerce → Settings → Payments and turn off Cash on delivery.

Updates

Download the new version from your DEV3 account and upload dev3-solace.zip again. WordPress offers to replace the installed version. Changes you made in the child theme, the Customizer and your pages are kept.

How to use

Add a room or suite

  1. Go to Rooms & Suites → Add New. Add a title, text, an excerpt, a featured image and a category (Rooms, Suites or Villas).
  2. Fill the room fields:
    • Rate from, Rate period, Currency: for example €320, / night, EUR. Shown on cards, the room hero and the booking estimate.
    • Guests (max), Beds, Size, View: shown on cards and in the facts strip.
    • Amenities: one per line, shown as a ticked list.
    • Gallery: attachment IDs, comma separated.
    • External booking link: optional, shown as a fallback button.
  3. Publish. The room page is built automatically: image hero, facts strip, text, amenities, gallery, a sticky booking card with the room preselected and three other rooms. Build the room with Elementor instead and the theme renders your layout.

Take booking requests

  1. Add the Request Form widget (or block) and choose the type Stay / booking request. Choose the Bar layout for a one-row booking bar in a hero, or Card for the full form.
  2. Guests choose check-in, check-out, adults, children and a room, and see a live estimate (nights × rate) before sending.
  3. Requests are stored under Requests in the dashboard and emailed to the site admin. No payment is taken.
  4. Using a booking engine? Fill each room's External booking link, or paste a Contact Form 7 or WPForms shortcode into the widget.

Change the 3D room key

  1. Open the home page with Edit with Elementor and select the 3D Scene widget in the hero.
  2. It uses the preset Solace · glass room key in Accent object mode, with an aspect ratio of 4 / 5 or 1 / 1.
  3. Set the Light (day to dusk while scrolling, day or dusk), Room number, Engraving, Ring & key metal, idle spin and scroll turn.
  4. To remove the 3D, delete the widget. Nothing else depends on it, and the 3D engine is then not loaded.

Heroes and motion

  • Give the first container of a page the CSS class solace-hero and a background image: the header turns light over it automatically.
  • Add an Image widget with the class solace-hero__dusk inside a hero to cross-fade to a second (dusk) picture while the visitor scrolls.
  • Select any widget or container and open Advanced → DEV3 Motion, or type a class: dev3-m-split-chars or dev3-m-split-words (split heading), dev3-m-reveal, dev3-m-stagger, dev3-m-mask-up / -left / -circle, dev3-m-hscroll (pinned horizontal rail), dev3-m-stack (stacked cards), dev3-m-tilt, dev3-m-parallax-12 and dev3-m-progress.
  • Visitors who prefer reduced motion see the final state; the rail becomes a swipe row.

Sell gift vouchers

  • The demo's gift voucher is a variable WooCommerce product by amount. Stay and dinner vouchers and spa packages are simple products.
  • Vouchers are virtual, so checkout skips shipping. Configure payments under WooCommerce → Settings → Payments.

Style the site

  • Appearance → Customize → DEV3 Solace Options: header style (transparent over heroes, solid or centred), sticky header, the header button, 3D quality, smooth scrolling, custom cursor, footer text and newsletter, shop columns, mini-cart drawer, quick view and blog layout.
  • Colours and fonts (Playfair Display and Plus Jakarta Sans) sync to Elementor's global colours and fonts.
  • Without Elementor, insert patterns from Patterns → DEV3 Solace (24 of them).

Related case studies

DEV3 Technologies · own product · Legal services (WordPress theme)

DEV3 Lexora: a law firm WordPress theme with an attorney directory, case results and brass 3D scales

Our own WordPress theme for law firms and attorneys: practice-area pages that build themselves from short fields, a filterable attorney directory with vCards, case results that always carry their disclaimer, and consultation booking, with rich motion and one small 3D accent of brass scales.

WordPressPHPtheme.jsonElementorWooCommercethree.js

DEV3 Technologies · own product · News and publishing (WordPress theme)

DEV3 Gazette: a magazine and news WordPress theme with live blogs, dark mode and a 3D globe

Our own WordPress theme for newspapers, magazines and news blogs: a classic masthead, breaking-news ticker, lead-story mosaics and section blocks, most read by real views, live blogs, reading tools, true dark mode, subscriptions, newsletters and ad slots, with reading-first motion and one small 3D globe.

WordPressPHPtheme.jsonElementorWooCommercethree.js