How to smartly adapt a framework and still make it your own

When concepting the new we searched for a sustainable web solution, one that allowed us the flexibility of adding content seamlessly and efficiently while still providing a cohesive user experience. We knew we wanted to use WordPress, our favorite content management system and discovered Divi, a modular theme that allows users to create content without forcing a specific layout with visual building blocks.

Before committing we needed to ensure that we could bend Divi to meet our custom design needs while maintaining the robust tools that made us love the theme in the first place. First let’s look at the pros:

Divi is already equipped to be responsive no matter which layout you build. You can create a new row, choose your columns and then the module you need with a user-friendly drag and drop interface. There is also the ability to save page layouts for speedy content creation. Each and every building block will conform to the viewport, creating a fluid experience.

Working on a site with multiple developers can be dangerous if there are no global styles instituted, meaning that you would see styles in the same stylesheet called:

.pinktxt { color:#FFE28b; font-size:22px; }

and a few lines later you would see:

.pinkforrealthistimeok { color:#ffe289!important; font-size:20px; }

and lose your mind trying to figure out which one is the correct style.

Every company needs a set of branding guidelines to maintain their identity. This holds the entire team accountable for maintaining the brand and ensures that a group of individuals create content with the voice and tone of a singular entity.

With the new, we constructed a visual styleguide that would allow content creators and developers alike to have the same point of reference. This guide encompasses everything from typography, links, lists, buttons, iconography, functionality of the modules and more.

While Divi comes with a wide variety of modules, they didn’t cover all the options we required. Mimicking their code structure to remain consistent, we modified the existing modules to meet our needs as well as built several new modules including our interactive hero module, device module and crew spotlight module.

Since the theme already provided the page builder and a set of modules, it was easy to get up and running without being concerned about redundancies or conflicting code. This also makes developing new modules and maintaining code more straightforward.

There are some drawbacks to working with a theme you didn’t create unfortunately. Let’s dig into what those are.

It is every developers responsibility to make sure that the products we produce are usable and the content is easy to digest. I start every project focused on keeping my code DRY, not only because its easier to scan and maintain, but it decreases page load time and reduces conflicting scripts.

Divi does not require users to have any coding experience if used out of the box. It comes pre-installed with a theme customizer as well as several theme-specific modules that would suffice the needs of most use cases. These features were not required for our site so it was necessary to filter through the code and eliminate any unused styles and scripts to maintain a clean code base.

Divi leverages the use of shortcodes to build its pages. When a shortcode is inserted in a post or page, it is replaced with the appropriate module code snippet, which is produced by a PHP function. Without shortcodes, it would be difficult to have the flexibility of a modular framework. The disadvantage of relying on shortcodes is that if the site switched to another theme, the content would be riddled with shortcodes and hard to migrate without stripping out the bracketed code. The good news is an SQL query can be generated that will clean this up, but its not as simple as it would have been.

After weighing these pros and cons we held fast in our decision to use Divi and create a modular website. In the end we created a custom, fluid site that our content creators find easy to update on a regular basis.

[Originally posted on]




Senior Developer by day, Fun Professional by night

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Heidi Olsen

Heidi Olsen

Senior Developer by day, Fun Professional by night

More from Medium

How To Fix ANY Error On Your WordPress Website — Ryan Cassidy

How To Change WordPress Login URL Without A Plugin

The Best 5 Node.js Frameworks for Web Apps in 2022

Check Weather Application by Vanilla JS [Full Source Code] — MyWebDiary |