Luis Sandoval
0 %
Loading

Building a flexible, centralized WordPress experience for TiVo advertisers.

WordPress ACF Modules Hotspots
Multilingual Responsive UI
View Live Site Scroll to explore
Client
TiVo
Agency
5ivecanons
Role
WordPress Developer
Development
Custom WordPress Theme & ACF Modules
Focus
UI Development, Responsive Experience & Content Management
The finished hub One long, navigable page, from hero hotspots through specs, resources, and submission.

/ 01 Overview

TiVo needed one branded place where advertisers could find everything required to build and submit compliant ads. With the 5ivecanons team, I developed that hub in WordPress, turning the approved UI/UX into a responsive, modular site backed by reusable ACF components and an editor-friendly admin.

/ My Role

Theme: Custom WordPress theme and section templates

Content: Reusable modules powered by Advanced Custom Fields

Front-end: Approved designs built as responsive components

Interaction: Hero hotspots, media previews, and accordions

Testing: Desktop, tablet, and mobile

/ 02 The Challenge

A lot of detailed information had to live on one page and still be easy to scan, easy to edit, and easy to use on a phone.

  • 01

    Consolidate a large volume of advertiser information into one experience.

  • 02

    Make technical specifications quick to locate.

  • 03

    Cover images, logos, video, ad copy, and templates.

  • 04

    Let visitors preview examples and download resources.

  • 05

    Guide advertisers to submit their media assets.

  • 06

    Keep a long, content-rich page easy to navigate.

  • 07

    Support more than one language.

  • 08

    Stay usable across desktop, tablet, and mobile.

  • 09

    Give TiVo administrators control of the content.

/ 03 One Hub for Advertisers

Everything an advertiser needs, in the order they need it.

/ Advertisers Can

  • Find image specifications
  • Check logo and video requirements
  • Get approved ad-copy guidance
  • Download templates
  • Preview media examples
  • Submit media assets
  • Switch between supported languages
The Home Page Ad Unit section of the hub on desktop and mobile, annotated to show the hotspots slider, the ad specs table, the mobile slider, and the mobile accordion table of ad components.
Component map The Home Page Ad Unit, with its hotspots slider and specs table, and how both adapt for mobile.

/ 04 Interactive Hero Hotspots

The hero shows the ad exactly where it runs, and each hotspot explains one part of it.

Try it: select a marker to see what that part of the ad unit needs. Markers work with a mouse, touch, or keyboard.

The TiVo home screen hero promoting The Lord of the Rings: The Rings of Power, with trending titles and app tiles below.
Try the hotspots A simplified version of the hotspot pattern, placed on a frame from the project recording.
On the live hub Hotspots across rotating slides, each opening a short explanation with a link to its media examples.

/ 05 Custom WordPress Development

A custom theme, built section by section. Each part of the page is its own template, so it can be reused, reordered, and maintained on its own.

/ What I Built

Theme & sections

A custom theme with section templates for the hero, slider, specs tables, media resources, and submission.

Interactive UI

Hero hotspots, tabbed media previews, sliders, and accordion tables.

Resources

Spec tables, template downloads, and example galleries presented consistently.

Cross-device

Responsive layouts tested on desktop, tablet, and mobile.

The tivo-advertising-theme open in a code editor, showing an acf-json folder, a templates/sections folder with files such as global-table-accordion.php and global-media-resources.php, and PHP reading ACF fields, next to the finished specs table and ad-components accordion.
Custom theme development The table-and-accordion section in code, beside the specs table and mobile accordion it renders.

/ 06 Custom ACF Modules

Administrators edit fields, not layouts. Reusable ACF modules let the TiVo team update copy, specs, and media from the WordPress admin while the front end stays consistent.

  • home-hero.phpHero content
  • home-slider.phpRotating slides
  • global-table-accordion.phpSpecs table, accordion on mobile
  • global-media-resources.phpTabbed media examples
  • global-submit-media.phpMedia submission
  • global-text-image-two-columns.phpText and image block
  • common-pageheader.phpPage header
  • home-cta.phpCall to action

File names as they appear in the theme screenshot; field groups sit in the theme's acf-json folder.

The TiVo logo surrounded by the project's stack: WordPress, ACF, PHP, JavaScript, HTML5, CSS3, Node.js, and WP Engine.
Stack WordPress and ACF, with PHP, JavaScript, HTML, CSS, and Node tooling, hosted on WP Engine.

/ 07 Resources & Submissions

The page follows the advertiser’s workflow, from finding a spec to sending finished files.

  1. 1

    Locate

    Find the right specification in the table.

  2. 2

    Review

    Check examples, dimensions, and formats.

  3. 3

    Download

    Get templates and the copy worksheet.

  4. 4

    Prepare

    Build the creative against the spec.

  5. 5

    Submit

    Send media assets from the submission section.

Media resources Tabs preview each ad component with an annotated example and a download link for its template or worksheet.

/ 08 Multilingual

Same layout, different language. Specs, media, and templates are available in each supported language without changing how the page works.

  • Consistent layouts across translations
  • Translatable ACF content, managed in the admin
  • Layouts that hold up with longer German strings

/ Switch the Language

Coming Soon!

TiVo Home Page Ad

The TiVo Home Page Ad is your premier solution for captivating and engaging audiences.

View Media

Headline strings from the live English and German screens.

German and English versions of the hub on mobile, next to the WordPress admin's WPML Translation Management screen listing pages and ACF field groups for translation between English, English (United Kingdom), and German.
Translation management German and English mobile screens, and the WordPress translation dashboard where pages and ACF field groups are translated.

/ 09 Responsive Experience

Dense technical content, readable on a phone. Tables become accordions, sliders get a mobile layout, and every download stays one tap away.

/ On Small Screens

  • Collapsible navigation and a persistent Contact Sales button
  • Spec tables reorganized as accordions
  • Touch-friendly slider controls and hotspots
  • Flexible media and clear download buttons
  • A hierarchy that keeps a long page scannable
Mobile and desktop The same sections on mobile and desktop, side by side.

/ 10 From Blueprint to Build

The TiVo digital style guide: Gotham and Lato text styles, primary and secondary color swatches with class names and CSS variables, button states, dividers, hotspot states, and link styles.
Style guide The design system I implemented, with classes and CSS variables for colors, buttons, hotspots, and links.
The TiVo logo in white on a blue gradient background.
Brand TiVo’s identity, carried through the hub’s blue-to-pink palette.
Two wireframes of the hub: a TV display with numbered hotspots, an ad-component specs table, tabbed media resources with a featured-image slider, a Submit Media Assets section with Hightail and WeTransfer buttons, and legal document tiles.
Wireframes Page structure from the 5ivecanons team, the blueprint I built the section templates from.

/ 11 Outcome

A single, organized home for TiVo’s advertiser resources, built to be updated without a developer.

  • A central destination for advertiser resources
  • Easier access to specs, templates, and examples
  • A responsive experience across devices
  • Reusable WordPress components
  • Flexible content management through ACF
  • Multilingual content support
  • A maintainable foundation for future updates
  • A more organized path from spec to submission

/ 12 Reflection

The hard part was balance: a lot of precise advertiser information, presented through an interface that still feels simple. Building it as a custom theme with reusable ACF modules kept the approved design intact and gave administrators a practical way to manage resources, specs, and translations.

/ 13 Credits

Client: TiVo

Agency: 5ivecanons

My role: WordPress Developer

Development: Custom WordPress Theme and ACF Modules

Live project: advertising.tivo.com