Nava University — WordPress · Elementor · Figma by Rania Benotman Nava University — WordPress · Elementor · Figma by Rania Benotman

Nava University — WordPress · Elementor · Figma

Rania Benotman

Rania Benotman

Nava University — Homepage Widget Implementation
Nava University (nava.edu.sa) is a Saudi higher education institution offering undergraduate and postgraduate programmes. The project came through HKS, working in collaboration with MRM — MRM handled the design and provided the Figma files, HKS managed the client relationship and technical delivery.

The Brief

MRM's design team provided a Figma file with a fully specified homepage widget — layout, typography, spacing, component states, and responsive behaviour all defined. My role was clean implementation inside the client's existing WordPress environment using Elementor, without touching or breaking the surrounding theme structure.

What I Built

Translated the MRM Figma designs into a production-ready Elementor widget on the Nava homepage. This involved writing custom CSS to match the design system exactly — fonts, colours, spacing, hover states — since Elementor's default controls couldn't cover the full spec. Built and tested across desktop, tablet, and mobile breakpoints. Coordinated with both the HKS and MRM teams on review cycles and incorporated feedback until sign-off.
The work required reading an existing WordPress theme carefully to avoid conflicts, scoping all custom styles correctly, and delivering something that felt native to the site rather than bolted on.

Stack

WordPress · Elementor · Figma · CSS · PHP

Context

This was part of the same HKS contract engagement where I built Kinder Middle East's "Back to School" and Ramadan campaigns — the same workflow of Figma handoff to pixel-accurate production build, applied to the education sector.

Outcome

Widget shipped to production on nava.edu.sa. Pixel-accurate to MRM's Figma spec, fully responsive, zero theme conflicts, delivered within the sprint timeline.
Like this project

Posted May 8, 2026

Figma-to-WordPress implementation of a custom homepage widget for Nava University (nava.edu.sa), built with Elementor during a contract engagement at HKS.