The MIC
We built this office leasing website for The MIC, a Class A office and mixed-use development in Mansfield, Texas, that the site calls the Mansfield Innovation Community. The building, now under construction, has 5 floors with a floor plate of about 30,000 SF. On-site amenities include a fitness center with locker rooms, a coworking space and conference facility, outdoor green spaces, tenant balconies and a cafe. The MIC sits next to the New City Hall and The Canals at Mansfield, steps from over 40 restaurants and retail destinations.
- CMS: WordPress
- Builder: Elementor Pro, built from a Figma design
- Integrations: JetEngine content types, Gravity Forms contact form, a custom plugin with two Elementor widgets
- Live site: mic.bigddev.com
The MIC came to us as a Figma design for a one-page leasing website that markets the office building to prospective tenants. The page runs from the hero and overview through building features, amenities, floor plans, location, gallery and news to a contact form.
Two parts of the design had no ready-made answer. One was a building section drawing where each floor lights up on hover and opens its own plan. The other was a dark map with nearby places grouped by category beside a clickable list. Both had to match the design and stay editable by the client. The design also listed the places by name only, with no addresses.
What we did:
One page carries the whole office leasing website for a Mansfield, Texas, innovation campus, from an interactive floor plan to an area map of 51 places.
Fitting the office leasing website onto one page
We built the page in Elementor Pro from the design: the hero, the overview, building features, on-site amenities, location, a gallery with a lightbox, a news carousel and a footer with a Gravity Forms contact form. Places, news and gallery pictures sit in three JetEngine custom content types. The client adds a store or an article from a form and does not touch the page. On phones, the floors switch to a row of buttons and the map categories sit in one line that swipes sideways.
Two custom widgets for floors and the map
No stock widget does a clickable building section with a plan for each floor, or a category map with a linked list. So we wrote a small plugin with two Elementor widgets, Floor Plans and Area Map. Every colour, size and label sits in the Elementor panel, across 33 settings sections between the two widgets. In the Floor Plans widget, visitors hover or click a floor band on the section drawing and a detail card for that floor opens, with a gallery pager.
Researching the places on the map
The design gave place names and nothing else, so we researched each one. We set up 51 places in 4 categories: Dining, Retail, Lifestyle and Entertainment. Of these, 47 are on the map, each placed from a real business or street address, and 4 are waiting on the client.
Each feature of the office leasing website ships with a short guide showing where it is edited, with screenshots. There are 6 guides with 31 screenshots in all.
We white labeled this build for our partner BigDCreative. JetEngine and Elementor Pro also run the Google Maps branch locator on our National Wholesale Supply website built from a Figma design, another BigDCreative project.
- 2 custom Elementor widgets with 33 settings sections between them
- 51 places in 4 categories, 47 placed from a real business or address
- 3 JetEngine content types for places, news and the gallery
- On phones, floor plans become buttons and map categories swipe sideways
- 6 feature guides with 31 screenshots handed to the client
Need a similar solution or something custom-built? Share your requirements, and we’ll craft a tailored quote just for you. Let’s create a solution that drives real, measurable growth for your business.