PICK VIZ Vault Theme & Elementor Widgets

Complete Product Documentation · v2.5+

PICK VIZ Vault is a premium WordPress theme built for elite sports picks services. It combines a dark-gold luxury aesthetic with a powerful Elementor widget library and a one-click demo importer — giving you a professionally designed, fully functional picks membership site from day one.

Table of Contents

1. Product Overview
2. Requirements & Installation
3. Theme Architecture
4. One-Click Demo Import
5. Theme Options Panel
   • 5.1 Header & Footer
   • 5.2 Branding & Logos
   • 5.3 Typography
   • 5.4 Colors & Presets
   • 5.5 Layout & Spacing
   • 5.6 Picks Display
   • 5.7 Social Dock
   • 5.8 Effects & Animations
   • 5.9 Notifications
   • 5.10 Live Ticker
   • 5.11 Import / Export / Reset
6. Elementor Widget Library
   • Agency Hero
   • Section Heading
   • Picks Grid
   • Picks Carousel
   • Games Carousel
   • Live Record
   • Tier Plaques
   • Capper Podium
   • Kickoff Countdown
   • Upcoming Game Countdown
   • Upcoming Matchups List
   • Latest Pick Card
   • Winner Pick Card
   • Timeline
   • About Split
   • Bento Trust
   • CTA Banner
   • FAQ
   • News Cards
   • Marquee Stats
   • Login Form
   • Header (Elementor)
   • Footer (Elementor)
   • Contact Hero
7. Home Page Templates
8. Page Templates
9. CSS Design System
10. JavaScript & Animations
11. WooCommerce Styling
12. Plugin Skin Bridge
13. Works With: PICK VIZ Plugin

1. Product Overview

PICK VIZ Vault provides three interconnected products:

All three work in harmony. The theme supplies CSS custom properties (design tokens). The widgets consume those tokens — they have no hardcoded colors or fonts, so they automatically adapt to every theme preset and user accent override.

2. Requirements & Installation

Installation

Theme:

1. Go to Appearance → Themes → Add New → Upload Theme.
2. Upload pickviz-vault.zip.
3. Activate.

Elementor Widgets:

1. Go to Plugins → Add New → Upload Plugin.
2. Upload pickviz-elementor.zip.
3. Activate.

Verify:

• In Elementor editor, open the widget panel. You should see a PICK VIZ category at the top.
• Go to Appearance → Vault to access the theme options panel.

3. Theme Architecture

pickviz-vault/
├── style.css                    ← Theme header (name, version, author)
├── functions.php                ← Bootstrap: requires all inc/ files
├── theme.json                   ← Block editor color palette & typography
├── header.php                   ← WordPress template header hook
├── footer.php                   ← WordPress template footer hook
├── index.php                    ← Fallback template
├── single.php                   ← Blog post singular
├── page.php                     ← Standard page
├── 404.php                      ← 404 error page
├── comments.php                 ← Comments template
├── template-fullwidth.php       ← Full-width page (no sidebar)
│
├── page-templates/
│   └── vault-home.php           ← Home page template (Elementor canvas)
│
├── template-parts/
│   ├── header-fallback.php      ← Built-in sticky header (used when no Elementor header template is set)
│   └── footer-fallback.php      ← Built-in footer with tiers, disclaimer, social links
│
├── inc/
│   ├── setup.php                ← Theme supports, nav menus, image sizes
│   ├── enqueue.php              ← Google Fonts, vault.css, motion.js
│   ├── options.php              ← Options panel definitions, getter vault_opt()
│   ├── admin-menu.php           ← Vault admin sidebar menu
│   ├── elementor.php            ← Elementor Theme Builder locations, widget category
│   ├── demo-import.php          ← One-click demo importer (all three home variants)
│   ├── woocommerce.php          ← WooCommerce template overrides & CSS bridge
│   ├── design.php               ← Design token output (CSS custom properties from options)
│   ├── branding.php             ← Login page branding, admin bar logo
│   ├── login.php                ← Custom login page template
│   ├── access.php               ← wp-admin restriction for non-admins
│   ├── stats.php                ← Live stats helper (shared with Elementor plugin)
│   └── plugin-activation.php   ← Dependency notices
│
└── assets/
    ├── css/
    │   ├── vault.css            ← Full theme stylesheet (10,000+ lines)
    │   ├── tokens.css           ← CSS custom property definitions
    │   ├── woocommerce.css      ← WooCommerce-specific overrides
    │   ├── ambience.css         ← Particle backgrounds, ambient glows
    │   ├── plugin-skin.css      ← PICK VIZ plugin card skin bridge
    │   └── admin-setup.css      ← Options panel admin styles
    ├── js/
    │   └── motion.js            ← Scroll reveal, count-up, card tilt+shine, magnetic buttons
    └── img/                     ← Theme images (logos, avatars, hero assets)

4. One-Click Demo Import

Appearance → Vault → Demo Import

The demo importer creates a complete Elementor-powered home page in one click. It supports three hero variants and builds all eight sections automatically.

What the Importer Creates

Hero Variants

The home page is assigned the Vault Home page template so it renders without a title banner.

Running the Importer

1. Go to Appearance → Vault → Demo Import.
2. Choose your hero style.
3. Click Import. The importer:
   • Creates a "Home" page with the correct page template
   • Writes the full Elementor JSON (_elementor_data postmeta) for all eight sections
   • Sets the page as the WordPress front page
   • Optionally creates a nav menu with the page

Note: Running the importer again regenerates the page. Save any manual Elementor edits before re-importing.

5. Theme Options Panel

Appearance → Vault (or PICK VIZ Vault in the admin sidebar)

All settings are stored in a single WordPress option: vault_options. The helper function vault_opt( 'key' ) retrieves any value with its default fallback.

Settings can be exported as JSON and imported — useful for migrating settings between sites or staging environments.

5.1 Header & Footer

Footer Content:

5.2 Branding & Logos

Logos are set via the media picker in the options panel. They override the standard WordPress Customizer logo.

5.3 Typography

Available Font Pairs:

5.4 Colors & Presets

Built-in Color Presets:

5.5 Layout & Spacing

5.6 Picks Display

Controls how the PICK VIZ plugin's shortcode output renders when the plugin skin bridge is active (use_plugin_themes = 0).

5.7 Social Dock

A sticky social media icon dock that floats on the side or bottom of every page.

Setting any social URL to # or leaving blank hides that platform from the dock. Setting socials_dock to off hides the entire dock.

5.8 Effects & Animations

Motion.js animations: scroll-reveal (fade + slide up), count-up number animation, card tilt with perspective shine, and magnetic button attraction effect. All respect the animations master switch and the user's prefers-reduced-motion OS setting.

5.9 Notifications

Sticky new-pick notification toast that appears when the plugin publishes a new pick.

The notification stays visible until the visitor manually closes it. Useful for driving members back to the picks page.

5.10 Live Ticker

A scrolling horizontal ticker bar that shows upcoming fixtures and/or recent picks.

Ticker Content Sources:

1. PICK VIZ Plugin picks: upcoming pending picks are automatically inserted.
2. API Fixtures (when ticker_api_enable = 1): live game schedule from the configured score API.
3. Both sources can be active simultaneously; they merge into a single deduplicated ticker stream.

5.11 Import / Export / Reset

Available at the bottom of the Theme Options panel:

• Export Settings — downloads vault-options-YYYYMMDD.json
• Import Settings — paste JSON or upload a file to overwrite all options
• Restore Defaults — resets all options to their factory defaults (irreversible without a prior export)

6. Elementor Widget Library

All widgets appear under the PICK VIZ category in the Elementor panel. Every widget is server-side rendered (SSR) — data is always live and correct in the editor and on the front end. No widget relies on JavaScript-only rendering.

Agency Hero

Widget name: pickviz_agency_hero | Icon: eicon-slides

The primary hero section widget. Three visual variants, configurable background, and an optional animated pick card carousel.

Controls:

The "Hybrid Pick Card" in Auto mode pulls the most recent win pick from the database and renders it as a real pick card inside the hero.

Section Heading

Widget name: pickviz_section_heading | Icon: eicon-t-letter

Styled section heading with kicker, headline, and subtext. Used at the top of every major content section to maintain visual consistency.

Controls: Kicker text, Headline, Subtext, Alignment (left / center / right), Headline size.

Picks Grid

Widget name: pickviz_picks_grid | Icon: eicon-posts-grid

Embeds the [predictions_picks] shortcode inside a styled Elementor widget context. Supports all shortcode parameters via Elementor controls.

Controls: Limit, Sport filter, Result filter, Layout (compact / grid-2 / grid-3 / list), Theme override, Show filters toggle, Show notes toggle, Sort order.

Picks Carousel

Widget name: pickviz_picks_carousel | Icon: eicon-carousel

A horizontally scrollable carousel of pick cards. Draggable with mouse. Auto-scrolls optionally.

Controls: Limit, Sport filter, Result filter, Card theme, Auto-play toggle, Auto-play speed, Pause on hover.

Games Carousel

Widget name: pickviz_games_carousel | Icon: eicon-slider-push

A thin horizontal scroller showing upcoming game tiles (team logos, matchup, countdown). Pulls from the PICK VIZ plugin's pending picks.

Controls: Limit, Sport filter, Show countdown toggle.

Live Record

Widget name: pickviz_live_record | Icon: eicon-counter

Displays the service's live Win Rate, Profit (units), and Total Picks in animated count-up number blocks.

Controls: Show Win Rate toggle, Show Profit toggle, Show Picks toggle, Label overrides.

Stats are sourced from the same cached stats function used across the theme and plugin.

VIP Tier Plaques

Widget name: pickviz_tier_plaques | Icon: eicon-price-table

Premium pricing cards for membership tiers. Pulls from PICK VIZ Package data or falls back to configurable manual tiers.

Controls: Source (auto from packages / manual), up to 3 manual tier configs (name, price, period, features, CTA label/URL), highlighted tier (e.g. "Most Popular"), plaque style (metallic gold / silver / platinum).

Capper Podium

Widget name: pickviz_capper_podium | Icon: eicon-person

A ranked display of the top 3 cappers by win rate. Shows avatar, name, record, and win percentage.

Controls: Limit (1–5), Sort by (win rate / profit / picks), Show profit toggle, Show record toggle, Time period (all / 30 days / 7 days).

Kickoff Countdown

Widget name: pickviz_kickoff_countdown | Icon: eicon-countdown

A large-format digital countdown timer to a specific game or event.

Controls: Target date/time (manual), Label, Style (digital / blocks / minimal), Show days toggle, Show seconds toggle.

Upcoming Game Countdown

Widget name: pickviz_upcoming_game | Icon: eicon-countdown

A sophisticated countdown card for the next game in the database. Features a flip-clock animation — split-flap digits that flip as time changes, styled to match the Vault gold aesthetic.

Data Source Modes:

Controls:

Flip Clock: The countdown digits use CSS split-flap animation (@keyframes pvz-flip-top / pvz-flip-bottom) — the top half flips down and the bottom half reveals in sequence, emulating a classic split-flap display. Driven by a JavaScript setInterval that updates digit elements every second.

CSS Classes: .pvz-pcard--upcoming, .pvz-fc-digit, .pvz-fc-half, .pvz-fc-flap

Shortcode equivalent: No shortcode — Elementor widget only.

Upcoming Matchups List

Widget name: pickviz_upcoming_list | Icon: eicon-bullet-list

A vertical list of upcoming fixtures with sport badge, time-until label, matchup, and a CTA button per row. Ideal for showing "what's on the slate today."

Data Source Modes: Same as Upcoming Game Countdown — auto (from DB) or falls back to four hardcoded demo games (NBA, NFL, MLB, UFC).

Controls:

Time Labels: Shows LIVE NOW for games in progress, Xh left for same-day games, X days for future games.

CSS Classes: .pvz-pcard--list, .pvz-pcard-rows, .pvz-pcard-row, .pvz-pcard-row-sport, .pvz-pcard-row-time.is-live

Shortcode: [pickviz_upcoming_list source="auto" limit="4" sport="" btn_text="Unlock Picks"]

Latest Pick Card

Widget name: pickviz_latest_pick | Icon: eicon-post-list

Displays the most recent pick as a styled premium card. Shows sport, matchup, pick selection, odds, units, confidence, and a CTA button.

Controls: Source (auto / manual), Sport filter (auto mode), manual override fields for all pick data, Button text, Button URL.

CSS Classes: .pvz-pcard, .pvz-pcard-header, .pvz-pcard-matchup, .pvz-pcard-pick, .pvz-pcard-btn

Winner Pick Card

Widget name: pickviz_winner_pick | Icon: eicon-trophy

Like Latest Pick, but filters for the most recent winning pick specifically. Shown with a winner ribbon accent and gold border treatment.

Controls: Same as Latest Pick Card.

CSS Classes: .pvz-pcard--winner

Timeline

Widget name: pickviz_timeline | Icon: eicon-time-line

A vertical "How It Works" step-by-step timeline. Used for the Process / How It Works section.

Controls: Steps (repeater): Step number, Title, Description, Icon. Style: numbered / icon / dot.

About Split

Widget name: pickviz_about_split | Icon: eicon-image-box

A two-column about section: image on one side, headline + copy + stats on the other.

Controls: Image, Headline, Body text, Stats (repeater: number, label), Button label + URL, Image position (left / right).

Bento Trust

Widget name: pickviz_bento_trust | Icon: eicon-info-box

A bento-box grid of trust/credibility cards. Used for testimonials, stats, and support highlights.

Controls: Cards (repeater): Type (stat / testimonial / support), Icon, Headline, Body, Stat value + label. Grid columns (2 / 3 / auto).

CTA Banner

Widget name: pickviz_cta_banner | Icon: eicon-call-to-action

A full-width promotional banner with headline, subtext, and one or two buttons. Supports gradient and dark background styles.

Controls: Headline, Subtext, Primary button (label + URL), Secondary button (label + URL), Background style (gradient / dark / gold).

FAQ

Widget name: pickviz_faq | Icon: eicon-accordion

An accordion-style FAQ section.

Controls: Items (repeater): Question, Answer. Initial open item, Animation style (slide / fade).

News Cards

Widget name: pickviz_news_cards | Icon: eicon-posts-group

A grid of blog post cards. Pulls from the latest WordPress posts.

Controls: Number of posts, Category filter, Show excerpt toggle, Show date toggle, Show author toggle, Layout (grid-2 / grid-3 / list).

Marquee Stats

Widget name: pickviz_marquee_stats | Icon: eicon-slider-push

A continuously scrolling horizontal stats ticker bar. Used to showcase KPIs in a dynamic way.

Controls: Stats (repeater): Label, Value, Icon. Speed, Direction (left / right), Pause on hover.

Login Form

Widget name: pickviz_login_form | Icon: eicon-lock-user

Renders a styled WordPress login form that matches the Vault dark aesthetic.

Controls: Redirect URL after login, Show/hide register link, Show/hide forgot password link, Form heading text.

Header (Elementor)

Widget name: pickviz_header | Icon: eicon-header

An all-in-one header widget for use in an Elementor Theme Builder header template. Includes logo, navigation, dark/light toggle, CTA button, and member dashboard link.

Controls: Logo source (custom image / site logo), CTA button label + URL, Dashboard label + URL, Show dark mode toggle, Sticky behavior.

Footer (Elementor)

Widget name: pickviz_footer | Icon: eicon-footer

All-in-one footer widget for Elementor Theme Builder footer templates. Includes logo, tagline, social links, trust chips, payment logos, disclaimer, and copyright.

Controls: All content pulled from theme options by default. Controls allow per-instance overrides for tagline, disclaimer, trust chips, newsletter form ID.

Contact Hero

Widget name: pickviz_contact_hero | Icon: eicon-form

A contact-page hero with headline, subtext, and an embedded contact form (via shortcode from WPForms or CF7).

Controls: Headline, Subtext, Form shortcode, Background style.

7. Home Page Templates

The theme includes three fully built home page layouts, all based on the same eight-section structure.

Layout Selection

Select the hero variant in the demo importer, or switch hero variants in the Agency Hero widget's Layout control.

The three pages share identical sections 02–08; only the hero (section 01) differs.

Section CSS Classes

Game Day Section Layout

The Game Day section uses a CSS Grid layout applied via the .pvz-gameday class:

/* 2-column layout: picks column 1.4fr left, list/winner right 1fr */
.pvz-gameday .elementor-widget-wrap {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  align-items: stretch;
}

/* Widget placement */
.pvz-gameday .elementor-widget-pickviz_section_heading { grid-column: 1 / -1; }
.pvz-gameday .elementor-widget-pickviz_upcoming_game   { grid-column: 1; grid-row: 2; }
.pvz-gameday .elementor-widget-pickviz_upcoming_list   { grid-column: 1; grid-row: 3; }
.pvz-gameday .elementor-widget-pickviz_latest_pick     { grid-column: 2; grid-row: 2; }
.pvz-gameday .elementor-widget-pickviz_winner_pick     { grid-column: 2; grid-row: 3; }

8. Page Templates

Elementor Theme Builder locations (registered by the theme):

• header — full site header
• footer — full site footer
• single — blog post template
• archive — archive/category template
• 404 — error page

9. CSS Design System

The Vault design system is built entirely on CSS custom properties. Every color, spacing value, and radius used in both the theme and the Elementor widgets resolves to a token. This means:

• Switching from dark to light mode is a single class change on <html>.
• Switching accent color presets updates the entire site instantly.
• Third-party plugins that use these tokens automatically adapt.

Core Tokens

/* Accent colors */
--vt-accent:         /* Primary accent (gold / emerald / crimson / royal) */
--vt-accent-2:       /* Gradient second stop */
--vt-accent-text:    /* Text on accent backgrounds (#fff or #000) */

/* Backgrounds */
--vt-bg:             /* Page background */
--vt-bg-card:        /* Card background */
--vt-bg-elevated:    /* Elevated surfaces (modals, dropdowns) */
--vt-bg-input:       /* Form input background */

/* Text */
--vt-text:           /* Primary text */
--vt-text-muted:     /* Secondary / muted text */
--vt-text-faint:     /* Tertiary / placeholder text */

/* Structure */
--vt-border:         /* Border color */
--vt-shadow:         /* Box shadow */
--vt-radius:         /* Border radius (controlled by `radius` setting) */
--vt-radius-sm:      /* Smaller radius variant */
--vt-radius-lg:      /* Larger radius variant */

/* Results */
--vt-win:            /* Win result color (green) */
--vt-loss:           /* Loss result color (red) */
--vt-push:           /* Push result color (yellow) */

Plugin Skin Tokens

The PICK VIZ plugin uses its own token set (--pp-*). The theme's plugin-skin.css maps plugin tokens to vault tokens, so plugin cards look identical to the theme:

.predictions-plugin-wrap {
  --pp-bg:           var(--vt-bg);
  --pp-bg-card:      var(--vt-bg-card);
  --pp-text:         var(--vt-text);
  --pp-accent:       var(--vt-accent);
  --pp-border:       var(--vt-border);
  --pp-radius:       var(--vt-radius);
  --pp-shadow:       var(--vt-shadow);
  /* ... */
}

10. JavaScript & Animations

/assets/js/motion.js — The theme's animation engine. Loads after Elementor's front-end scripts.

Features

All features check window.matchMedia('(prefers-reduced-motion: reduce)') and skip animations accordingly.

Flip Clock (Countdown Widget)

The flip-clock animation lives in pickviz-el.css (Elementor plugin assets):

// Simplified timer driver
setInterval(() => {
  const diff = targetTime - Date.now();
  updateDigit('.pvz-fc-days',    Math.floor(diff / 86400000));
  updateDigit('.pvz-fc-hours',   Math.floor((diff % 86400000) / 3600000));
  updateDigit('.pvz-fc-minutes', Math.floor((diff % 3600000) / 60000));
  updateDigit('.pvz-fc-seconds', Math.floor((diff % 60000) / 1000));
}, 1000);

Each updateDigit() call sets the digit value, triggers pvz-fc-flap-top keyframe (current digit folds away), then reveals the new digit below.

11. WooCommerce Styling

When WooCommerce is active, the theme applies custom styling via woocommerce.css and inc/woocommerce.php.

Checkout Page

The theme styles the WooCommerce block checkout to match the Vault dark aesthetic:

• Two-column layout: .wc-block-components-sidebar-layout gets a display: grid; grid-template-columns: 1fr 360px on desktop.
• Sticky order summary: The sidebar scrolls independently while the form is filled.
• Input fields: Vault-styled dark inputs with --vt-bg-input background, --vt-border border.
• Payment section: Background and select element overrides.
• Full-width on narrow layouts: @media (max-width: 780px) stacks to single column.

Product Pages

• Product title uses Saira heading styles.
• Add-to-cart button inherits the Vault button style (controlled by button_style option).
• Product price uses accent color token.

12. Plugin Skin Bridge

When Override Plugin Skin is enabled (use_plugin_themes = 0), the theme takes control of all PICK VIZ plugin output:

1. plugin-skin.css is loaded on the front end.
2. It maps all --pp-* plugin tokens to --vt-* vault tokens.
3. It overrides plugin layout defaults with the settings from picks_layout and picks_card_theme.
4. The picks grid appears identical to the Vault's own card styling, with full dark/light mode and accent color support.

To revert to the plugin's own themes and let users switch themes using the dot-switcher, set Override Plugin Skin to 1 (Use plugin's own themes).

13. Works With: PICK VIZ Plugin

The Vault theme and Elementor widgets are designed to work alongside the PICK VIZ Plugin (sold separately or bundled). When both are active:

Without the plugin: All widgets that pull live data gracefully fall back to styled demo content. The theme and Elementor widgets remain fully functional for layout, design, and static content purposes.

→ See the PICK VIZ Plugin Documentation for installation, shortcodes, and configuration of the picks platform.

Elementor Widget Quick Reference

PICK VIZ Vault Theme & Elementor Widgets · v2.5+ · Documentation generated July 2026

For support, feature requests, or bug reports please contact the development team.