DEV3Technologies
All case studies

DEV3 Technologies · own product

DEV3 Vernissage: an art gallery WordPress theme with a live marble sculpture and 3D framed prints

Our WordPress theme for galleries, museums and cultural centres: a scroll-driven three.js gallery with a marble sculpture under a moving light, structured exhibitions, artists, artworks and events, and WooCommerce framed prints previewed in a 3D room.

WordPressPHPtheme.jsonElementorWooCommercethree.jsGLSLpostprocessingLenisContact Form 7JSON-LD
Industry
Art & Culture (WordPress theme)
Services
Web DevelopmentUI/UX Design

Live project preview

Client systems are private — screenshots shown where permitted.

DEV3 Technologies · own product — screenshots
Gallery 3D hero — a twisted marble sculpture on a plinth, lit by a single moving light, beside the current exhibition headline.

Gallery 3D hero — a twisted marble sculpture on a plinth, lit by a single moving light, beside the current exhibition headline.

The challenge

Gallery websites have a hard brief. They must be as restrained as the white cube, yet hold a lot of structured data: exhibitions with dates and curators, artists, artworks with medium and dimensions, events with tickets, visiting hours and admission. Many also sell prints, and a print buyer wants to see the frame and size on a wall, not a flat file. We wanted a theme where light and space carry the brand, rendered live and without licensed imagery. The programme had to be real content with structured data for search, and the print shop had to show each size and frame combination without a photograph of each one.

Our solution

Vernissage is a classic PHP theme with theme.json on DEV3's shared theme core. The DEV3 Theme Toolkit plugin provides the Exhibition, Artist and Event post types and a relabelled Project type for artworks, plus the Elementor widgets and their block twins, WooCommerce extras and the demo importer. The theme owns presentation and the 3D presets.

Key design decisions

  • Light as the subject. The signature preset is a procedural marble sculpture on a plinth with a single raking light. Chapters move the light (sweep), dim the room (dim), turn the sculpture (spin), colour the feature wall (wall) and slide canvases along the walls (slide). Values blend between stops.
  • Ink between chapters. An ink stroke flows across the screen between chapters, and room changes happen under it, so a wall can turn vermilion without a visible jump.
  • Generated art, not stock. A painting shader produces six styles: colour field, hard-edge geometry, marbled ink, contour drawing, horizon and gesture. A palette and a seed make each one repeatable, so the demo's 16 artworks, installation views and prints need no licences.
  • Prints in a room. The framed-print preset hangs the artwork above a bench under a picture light. The Size and Frame variation slugs (a3/a2/a1, black/oak/walnut/white/brass/unframed) stream to the viewer. One variable product with 12 variations needs no photo per variation.
  • Reusing the toolkit. Artworks reuse the toolkit's generic Project type, relabelled: Client holds the artist, Location the medium and Credits the dimensions. Every theme in the suite shares one tested post-type engine.
  • Structured programme. Exhibitions print ExhibitionEvent JSON-LD and artists print Person. Block-editor singles get an automatic wall label with dates, venue and medium.

Results

Vernissage ships with a one-click demo: 6 exhibitions, 6 artists, 16 artworks, 6 events, 13 products (6 framed prints with 12 variations each, plus 7 tickets and memberships), 6 journal posts and 2 forms. The theme adds 28 block patterns.

  • Quality gates passed: php -l on every file, phpcs with WPCS 3 and PHPCompatibilityWP 7.4+ at 0 errors, and the WordPress Theme Check plugin with no required-level failures.
  • Flows tested: the WooCommerce add-to-cart → mini-cart → cart → checkout → order-received flow, and an Elementor editor smoke test where the scene updates live as its controls change.
  • Bug fixed in the shared engine: while integrating the suite we found that the print viewer did not rebuild on a size change. Fixing setParams in the shared engine fixed it for every theme.
  • Weight: the engine stays inside the suite's 220 KB gzip budget including three.js, and the Vernissage scenes add about 9 KB. Pages without a scene load about 10 KB of JavaScript.
  • Frame-rate budget: 60 fps on desktop and 30 fps on mid-range phones, checked in headed Chrome at 1440 px and 390 px.

Vernissage 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), WooCommerce and Contact Form 7. WordPress offers to install them after you activate the theme. 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-vernissage.zip: the theme. Install this one.
  • dev3-vernissage-child.zip: an optional child theme for your own CSS and PHP.
  • dev3-theme-toolkit.zip: the companion plugin. It is also bundled inside the theme and installed through the prompt.
  • dev3-vernissage-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.
  2. Choose dev3-vernissage.zip, click Install Now, then Activate.
  3. A notice asks you to install the DEV3 Theme Toolkit (required) and the recommended plugins. Click Begin installing plugins, then install and activate them. You can also upload dev3-theme-toolkit.zip under Plugins → Add New → Upload Plugin.
  4. Optional: if you plan to change code, upload dev3-vernissage-child.zip the same way and activate DEV3 Vernissage Child. The parent theme must stay installed.

Import the demo

  1. Log 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 (five-chapter 3D story), Exhibitions, Artists, Collection, Visit, Events, Journal and Contact pages, all built in Elementor
    • the Shop, Cart, Checkout, My account and Saved works pages
    • 6 exhibitions, 6 artists, 16 artworks and 6 events, each with its own Elementor page
    • 13 products: 6 framed prints with Size and Frame variations, and 7 virtual tickets and memberships
    • 6 journal posts, 4 sample press quotes and 2 Contact Form 7 forms (Contact and Group visit)
    • the menus, footer widgets and theme settings
  4. Open the home page and scroll through the gallery.

Imported items are tagged, so Reset (remove demo content) on the same screen removes only them. On a server with WP-CLI you can run wp --user=admin dev3tk demo import and wp dev3tk demo reset.

After the import

  • Set your opening-hours line in Appearance → Customize → Venue (Vernissage), for example Open Tuesday – Sunday 10:00 – 18:00 · Thursdays until 22:00.
  • Change the recipient of the Contact and Group visit forms in Contact → Contact Forms.
  • Set payments and shipping for prints in WooCommerce → Settings. Tickets and memberships are virtual, so they need no shipping.

Updates

Download the new version from your DEV3 account and upload dev3-vernissage.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

Change the 3D gallery story

  1. Open the home page with Edit with Elementor. The top 3D Scene widget uses the Vernissage: marble in the gallery preset in Fixed background (scroll story) mode. Its panel sets:
    • the sculpture (twisted column, spindle in flight, endless loop, resting ovoid or stacked column)
    • the material (white marble, nero marble, travertine or patinated bronze)
    • the wall, feature-wall and ink colours, and the light intensity
    • whether the ink transitions and side-wall canvases appear
  2. Every container below it with Advanced → DEV3 3D chapter → Use as 3D chapter switched on is a camera stop. Copy side moves the sculpture to the other side of your text.
  3. Set Header tone to "Dark text" for light chapters and add the classes vernissage-chapter vernissage-on-light vernissage-chapter--left. For dark chapters, use "Light text" and vernissage-on-dark.
  4. Optional Scene state JSON, blended between chapters:
    • spin: the sculpture's turn, in radians
    • slide: canvases along the walls
    • dim: 0 for an open gallery, 1 for a single light in the dark
    • wall: 0 for plaster, 1 for the feature colour
    • warm and sweep: evening light and the raking light's position
    • art, artL and hangR: set to 0 to hide a hang

Publish the programme

  • Exhibitions: opens, closes, venue and curator. Categorise each as Current, Upcoming or Past; the Exhibitions page filters by these.
  • Artists: discipline and where they are based.
  • Artworks: artist, year, medium and dimensions or credit. Categories are mediums, and the Collection grid filters by them. Add the class vernissage-collection to a Post Type Grid to hang works on a wall.
  • Events: starts, ends, venue, line-up, price and Ticket product ID.
  • Every single page can be designed in Elementor. Block-editor pages show a wall label under the title automatically.

Sell framed prints

  1. Create a variable product with a Size attribute (slugs a3, a2, a1) and a Frame attribute (unframed, black, oak, white, walnut, brass).
  2. Give each Frame term a swatch colour, for example black ash #1b1a19, oak #b88a58 or white #f1efea.
  3. On the product's 3D view tab, choose Vernissage: framed print on a wall with parameters such as {"style":"field","seed":"3","palette":"vermilion","frame":"black","size":"a2"}. The styles are colour field, hard-edge geometry, marbled ink, contour drawing, horizon and gesture.
  4. Choosing a size or frame on the product page updates the print in the 3D room.

Tickets and group visits

  • Tickets and memberships are simple virtual products. The Pricing Table widget shows admission on the Visit page.
  • The Group visit form asks for group size, type, date and tour language. You can show any CF7 or WPForms form with the Form widget.

Style the site

Appearance → Customize → DEV3 Vernissage Options holds colours, fonts, header style, 3D & Motion, footer, shop and blog settings. Saving also updates Elementor's Global Colors and Fonts.

Useful classes:

  • vernissage-tag: the black "Now showing" label
  • vernissage-label: a wall label
  • vernissage-art: an artwork on plaster
  • vernissage-on-accent: a vermilion band

Without Elementor, use Patterns → DEV3 Vernissage (28 patterns) and the 3D Chapter block.

Related case studies