Lexivanta: a vocabulary platform for writers and learners

A word library that organises English vocabulary by what the reader is trying to say. Built as a custom WordPress theme with editable Elementor templates and a search-ready structure for every category.

Overview
Lexivanta is a word library for people who write, speak and study English. It organises vocabulary by what the reader is trying to say rather than alphabetically, and gives every word a plain definition and a usable example. The site has seven word categories, a blog of writing guides and a newsletter.

I built the production site on WordPress from Figma designs for five pages: Home, Categories, Single Blog Post, About Us and Contact. The result is a custom theme, a set of Elementor templates that editors can change without code, and a content structure for each category written for search.

Screenshots

The challenge
The brand needed a site that felt premium and calm, with a clear route from "I need a better word" to a useful list. Three problems shaped the work:

Editors needed control. The client wanted to edit pages in Elementor, but shortcodes and plugin-specific layouts make sites fragile over time.
The design had to hold up in detail. The Figma files specified exact widths, card styles, a typographic scale and a sidebar layout that generic themes do not produce.
Each category had to earn search traffic. Seven category pages needed their own URLs, titles, meta descriptions and useful content, not just a list of words.
My role
I was responsible for the full build: converting the Figma designs into a WordPress theme, creating the Elementor templates, building the category content system, adding the animation and slider behaviour, and launching the site.

Process
Translating the designs. I rendered the Figma frames and the theme side by side in a headless browser and compared them at 1440px. The first comparison found three gaps: the content width was too wide, the header and chip styles differed, and the article's table and before/after blocks had no matching styles. I corrected the container width to match the 48px margins in the design, then styled those blocks to match.
Building the theme. Word categories use a custom post type, so each one has its own editable content, example words and order. Shared pieces such as the header, footer, category cards and post cards are PHP functions, so the same markup appears on every page.
Elementor templates without shortcodes. The first version of the templates relied on shortcodes. I rebuilt them with native Elementor widgets (heading, text, button, image, accordion) and added a small set of Lexivanta widgets for the dynamic parts: logo, menus, word categories and blog posts. Editors can now change every heading, paragraph and button in the Elementor panel.
Category pages and SEO. Each of the seven categories has its own page at /words//, with a title of 50 to 60 characters, a meta description of 150 to 160 characters, an article with H2 and H3 sections, examples, common mistakes and a quick-reference table, four FAQ items, and links to other categories and the blog.
Interaction. Bootstrap 5 handles the grid and components, AOS adds scroll animation (skipped for visitors who prefer reduced motion), and Swiper powers the "Keep reading" and related-category sliders. Each library is loaded at a pinned version and can be switched off with a filter.
Key features
Seven word category pages with SEO metadata, FAQ and structured data
Category cards on the homepage and Categories page that link to each category
Single blog post layout with a table of contents, word of the day, newsletter, recent articles and a related-posts slider
Responsive layouts checked at 1440px and 390px, with no horizontal overflow on mobile
Editable Elementor templates for Home, About, Categories and Contact
Technical highlights
Custom theme with a lx_ function prefix and a settings screen for colours, typography and content
A custom post type for word categories, with a meta box for example words
An idempotent setup routine: pages, categories and content are created only when missing, and it runs once per theme version
A token system ({{cat:slug}}, {{categories}}, {{blog}}) resolved to real URLs at render time, so links stay correct if permalinks change
Google Fonts (DM Serif Display and Inter) loaded with display=swap
Third-party assets loaded from jsDelivr at exact versions, each with a filter to disable it
Seeded content goes into empty categories only, so the client's later edits are never overwritten.

Results
Live: the homepage, Categories page, seven category pages, About, Contact and the blog are published at lexivanta.com.
Design match: the Home, Categories and single post layouts follow the Figma files closely at desktop width, with the same header, typography, card styles and sidebar structure.
Editorial control: the client can edit pages and categories in WordPress and Elementor without touching code.
Search readiness: every category page has a unique title, meta description, FAQ and structured data.
Challenges and solutions
Matching Figma exactly. Generic WordPress themes add default margins and typography. I found the mismatches by rendering the theme and the Figma frames side by side, then fixed one difference at a time.
Keeping content editable. Shortcodes break when a site moves or a plugin changes. Native widgets meant more build work, but the result is portable and editable.
Avoiding library conflicts. Elementor ships its own Swiper. I loaded this project's Swiper as an ES module so the two copies cannot interfere.
Writing SEO content at scale. Seven pages of consistent, useful content need a repeatable structure. I used one template for every page (intro, sections, examples, common mistakes, FAQ, conclusion) and checked every title and description length before publishing.
What I learned
A design is easier to match when you measure it. Side-by-side rendering finds differences the eye misses.
Structured content in a custom post type, rather than hard-coded pages, makes a site easier for a client to maintain.
Building content and markup together, with schema generated from the same data, keeps a page and its structured data in step.

Building something similar?
Tell me about your project and I'll reply within a day.