Get Flexibility With Modular Websites In WordPress

Being able to manage content with ease and simplicity is a key expectation for every client, especially with the surge in the popularity of WordPress.

With the rise of WordPress page builders and the introduction and ongoing improvements to WordPress’ native page builder Gutenberg, the expectation to have greater control over page layout has increased.

However, there is also the common frustration that comes with having too much control.

WordPress Websites From Yesteryear Had Fixed Layouts

A website from yesteryear would have been planned and built with fixed page layouts or page templates (not to be confused with themes or off the shelf templates).

These page templates controlled the content layout on the page, and every page created in WordPress would have a page template assigned to it. A service page or product page could have multiple content pages that would all appear in the same layout.

Some websites we audit today actually have very few page templates. A large proportion of the website will look very similar, utilising the same template, just with different content and perhaps an alternate layout.

So for example, a service page will follow the same page layout as the company culture page or even the careers portal.

Fewer Templates Meant Less Time and Less Budget

The reason that so many website pages utilise the same layout is usually down to one or more of these 4 factors:

1. Budget
   Ultimately a client may not have allocated enough budget to factor in additional page layouts when having their website built. Each different layout requires wireframing, design, development and testing. So budget needs to be assigned to every page layout that is required.
2. Timeline
   Another big factor here is time. If a client needed a website on a tight deadline, then an agency would likely proceed with fewer layouts in order to meet that deadline.
3. Content growth and no new layouts
   Another factor to consider is no new layouts being introduced as the content for the website grows and expands. The marketing and content team would have just selected the most suitable layout from their existing library to add their new content to.
4. Education
   Last on the list is knowing when new layouts are needed. Not every client will see the need for alternate layouts for their content.

Content Demands Different Layouts & Layouts Should Be Created Around The Content

Regardless of the type of website you visit, every page has a purpose and a message to deliver. That message should be delivered in the right way, and that requires alternate layouts to maximise the effectiveness of each page’s purpose and journeys.

Building layouts around the content provides a better experience for the user, and ultimately higher engagement and conversions for you.

Modular Blocks Create An Infinite Number Of Combinations And Page Layouts

If every page needs an alternate layout, what’s the solution to avoid spending huge amounts on creating hundreds of page templates?

Modular Content Blocks

Taking the positives from WordPress page builders, the ability to add content sections to your page and change their position provides flexibility to the content editor to craft a page that best suits the content. 

Only Plan And Create The Content Blocks You Need

We hear frequently that many page builders such as Elementor have too many options available and provide too much control.

This can cause brand and visual issues. Some of those uploading new content will make padding, font and colour changes because they feel it will look nice. However, they fail to follow brand guidelines or the design style guide or system.

As a countermeasure pre-planning blocks that the website is likely to need based around the content is the approach we recommend and implement.

Whether that’s accordions, media blocks, video content or hero blocks. These blocks are planned and modular so that they can be placed into the editor, repositioned, or even reused throughout the website.

Locking Down Brand Styling Of Blocks

When planning these blocks, we would design each block (see fig.3) and obtain brand sign-off from the marketing team or brand manager. This will lock down the typeface, the font size and weight, the colour and any padding or space around the block. Meaning less risk of those adding or editing content going off-brand.

Lock Down Doesn’t Mean Limitations

When we create these blocks, we discuss what elements are required to be editable. A block might have a coloured background and the client might want more flexibility over that block to be able to use it on various pages (see fig.5).

By inserting an option to change the background colour, we can place in pre-approved colours that meet the brand guidelines and also website accessibility best practice.

Just because there are limitations around brand styling, doesn’t mean there have to be limitations around placing and adding the content blocks.

Are Fixed Page Layouts Still Required? Can Every Page Be Modular?

The big question you might be asking yourself is if fixed page layouts are still required, and the answer is yes.

There are some page layouts that you won’t necessarily want to alter. We call these Skeleton pages. For example, these might be News or Blog landing pages that dynamically pull through posts.

This does mean that not every page on your website can be modular. Some pages require hardcoding and the editing experience might differ from the visual block editing experience. You will still be able to edit the content but will have less flexibility over its position and layout.

Flexible & Hybrid Pages

There are other types of pages that may need to be somewhere in between a Flexible Page (being able to fully create a page from a blank canvas using your pre-defined modular blocks) and a Fixed Layout Page.

A hybrid option is required that will fix the layout of key elements on the page, yet provide an area where modular blocks can be added.

This approach provides the union of flexibility and control within WordPress.

Examples of Flexible Pages

• About Us
• Culture
• Service page
• Landing page*

Example of Hybrid Pages

• News article
• Product page
• Contact Us page
• Landing page*

*Landing pages can be built from scratch using form blocks and call-to-action elements. However, they can also be pre-defined.

Modular Websites Are The Way Forward

Although we have been building websites since 2003, and building websites using WordPress since 2008, our approach to how we use it is always evolving.

We began rolling out our Imblox editing experience in 2022, and are continuously improving it with every website we build. We adapt and improve to create an even greater WordPress editing experience.

If you’re looking for a website with more control and flexibility, but with important brand restraints, then let’s chat. We can show you how Imblox can improve the editing experience for your WordPress website.

Until then, here’s a brief video of Imblox in action.

In Q2 2024 a fully functional demo will be available, where you’ll be able to request a login and explore the possibilities inside our Imblox sandbox.