All case studies

DEV3 Technologies · own product

DEV3 Aurum: a finance WordPress theme with a live 3D gold-and-glass story

Our own WordPress theme for wealth managers, advisors and accountancy firms: a scroll-driven three.js story of gold coins, glass ribbons, a globe and a vault, three in-browser calculators and WooCommerce consultations, all editable in Elementor.

Industry
Financial services (WordPress)

Live project preview

Client systems are private — screenshots shown where permitted.

DEV3 Technologies · own product — screenshots
Gold-and-glass 3D hero — stacks of brushed-gold coins rise into a growth chart on a dark emerald stage beside the Wealth, composed with care headline.

Gold-and-glass 3D hero — stacks of brushed-gold coins rise into a growth chart on a dark emerald stage beside the Wealth, composed with care headline.

The challenge

Finance websites have to look trustworthy before they look exciting. Most finance themes fall back on stock photos of handshakes and city skylines, and the useful parts that clients actually come for, such as a repayment or retirement estimate, are left to third-party embeds. We wanted a theme where motion supports the message instead of distracting from it: a 3D story about growth, planning and protection that stays calm, keeps the text readable and fast on phones, and sits next to real tools, compliance wording and paid consultations that a firm can edit without a developer.

Our solution

We built Aurum as a classic PHP theme with theme.json, on a shared DEV3 theme core and the DEV3 Theme Toolkit plugin that powers all nine DEV3 themes.

Key design decisions

  • Procedural gold and glass. The coins, growth chart, glass ribbons, globe, vault dial and shield are three.js scenes built in code, so there are no licensed renders or stock photos, and the demo images are rendered from the same scenes.
  • A story in five stops. The ledger preset moves through coins and chart, growth, planning, global markets and protection. Each stop is an Elementor container with the 3D chapter setting switched on, and state keys such as grow, draw and lock let editors tune what the scene shows at each stop.
  • Calculators as plain HTML. The loan, compound growth and retirement calculators are markup with a data-aurum-calc attribute that the theme hydrates in the browser. They can be dropped in from a block pattern or an Elementor HTML widget, nothing is stored or sent, and the script loads only where a calculator is on the page.
  • Honest sample content. The market ticker carries a "Sample data" badge, testimonials are badged as samples, and the footer disclaimer and registration line are Customizer settings meant to be replaced with approved wording.
  • Quality tiers. The engine probes the device and picks a tier; phones get a lighter preset, and reduced-motion, Save-Data and no-WebGL visitors get a still poster while the text stays in the HTML.

Results

Aurum ships as a complete theme with a one-click demo: 6 services and 4 case studies with their own Elementor pages, 6 advisors with monogram portraits, 12 WooCommerce products with 3D views, 6 insight posts and 3 forms, plus 28 block patterns and a child theme.

It passes the suite's quality gates: php -l and phpcs (WordPress Coding Standards 3 and PHPCompatibilityWP 7.4+) with zero errors, the Theme Check plugin, the engine size budget (about 217 KB gzip), an automated WooCommerce run from a variation to the order-received page, and an Elementor editor test where changing a control (chart columns from 6 to 4) updates the live scene. In our desktop QA run at 1440 px, all 18 captured pages held 61 fps.

Aurum is available on the DEV3 marketplace.

Setup guide

Requirements

  • WordPress 6.0 or newer and PHP 7.4 or newer
  • Elementor (free), WooCommerce and Contact Form 7 (WordPress offers to install them)
  • Elementor Pro is supported but not required

Install

  1. Download the ZIP from your DEV3 account and unzip it. Do not upload the download itself.
  2. In WordPress go to Appearance → Themes → Add New → Upload Theme, choose dev3-aurum.zip and click Install Now, then Activate.
  3. When the notice appears, click Begin installing plugins and install and activate the DEV3 Theme Toolkit (required) and the recommended plugins: Elementor, WooCommerce and Contact Form 7. You can also upload dev3-theme-toolkit.zip under Plugins → Add New → Upload Plugin.
  4. Optional: upload and activate dev3-aurum-child.zip if you plan to change the theme's code.

Import the demo

  1. Log in as an administrator. On a multisite network, use a super admin account: WordPress strips the calculator and ticker form fields from HTML saved by users without the unfiltered_html capability.
  2. Go to Appearance → DEV3 Demo and click Import demo.
  3. Wait for the import to finish. It adds the pages (Home, Services, Calculators, Case studies, Advisors, Pricing, Insights, About, Book a consultation, Important information and the shop pages), 6 services, 4 case studies, 6 advisors, 4 sample testimonials, 6 insight posts, 12 WooCommerce products, 3 Contact Form 7 forms, menus, footer widgets and theme settings.
  4. Visit the home page and scroll through the 3D story.

From WP-CLI you can run wp dev3tk demo import --user=admin. Reset on the same screen removes only the items the importer created.

After importing

  • Replace the footer disclaimer and registration line in Appearance → Customize → DEV3 Aurum Options → Compliance & disclaimer with wording approved by your compliance team.
  • Every firm, person, instrument and figure in the demo is fictional. Replace them before you go live.

Updates

Download the new version from Account → Downloads on dev3.tech and upload dev3-aurum.zip again. Your changes in the child theme are kept.

How to use

Change the 3D story

Open the home page with Edit with Elementor. The first widget is a 3D Scene with the preset Aurum: gold & glass ledger in Fixed background (scroll story) mode. Each section below it has Advanced → DEV3 3D chapter switched on; one chapter is one camera stop.

  • Reorder, duplicate or remove chapter sections to change the story. The five default stops are coins and chart, growth, planning, global markets and protection.
  • Set Copy side to the side your text is on, so the 3D subject moves to the other side.
  • Fine-tune a stop with Scene state JSON, for example {"grow":0.6,"draw":0.5}. The keys are grow (coins land), draw (ribbons), gIn (globe), vIn (vault), lock (vault seals) and warm.
  • In the 3D Scene widget, change the gold tone, ribbon tint, room and halo colours, chart columns (3 to 9), light intensity and the trade-route arcs.

Add a calculator

Insert the loan, compound growth or retirement calculator from Patterns → DEV3 Aurum, or copy one of the demo's Elementor HTML widgets. Set the currency and number format with data-currency="GBP" and data-locale="en-GB". Calculators run in the visitor's browser and store nothing. Save pages that contain them as an administrator.

Manage services, case studies and advisors

Use Services, Case Studies and Advisors in the dashboard. Each item can be edited with Elementor. Show them anywhere with the Post Type Grid widget or block, and use the Team Grid widget for advisors.

Customizer settings

Go to Appearance → Customize → DEV3 Aurum Options for colours and fonts, the header, 3D & Motion (quality auto, high, low or off, loader, cursor), the footer, shop and blog options, and Compliance & disclaimer (footer disclaimer on or off, disclaimer text, registration line).

Sell consultations and reports

Consultations, packages and reports are WooCommerce products. Mark them Virtual so checkout skips shipping, and tick Downloadable to attach a PDF report. In the product's 3D view tab, choose the Aurum: product studio preset with parameters such as {"object":"report","color":"#0f4b3e","title":"Annual Outlook"}, or paste a GLB URL.

Take consultation requests

The Book a consultation page uses the Contact Form 7 consultation form (topic, date, meeting type and a consent checkbox). Place any CF7 or WPForms form with the Form widget or block. Do not ask clients to send account numbers through the form.

Related case studies

DEV3 Technologies · own product · Gyms, fitness and yoga studios (WordPress theme)

DEV3 Pulse: a gym, fitness and yoga WordPress theme with a self-building class timetable and a 3D kettlebell

Our own energetic WordPress theme for gyms, fitness and yoga studios: classes with intensity, a weekly timetable built from class schedules, trainers, memberships with a yearly toggle and comparison, calculators with a health note, workshops and free-trial booking.

DEV3 Technologies · own product · Creative agencies and portfolios (WordPress theme)

DEV3 Kinetic: a type-led creative agency WordPress theme with a work scroller, case studies and a 3D blob

Our own dark, type-led WordPress theme for creative agencies and portfolios: kinetic variable-font type, cursor labels, a pinned horizontal work scroller, self-building case studies, work filters with a list view, a showreel player and a project brief, with one small 3D accent.