What is a modular template?

Many home and landing page designs use multiple full-width sections with different types of content. The standard WordPress editor only provides a single content area, so we build a custom template for you that provides an easy-to-use interface for implementing these pages.

The first step is to identify all the types of modules you would like available. These might include Full Width Content, Content & Image, Recent Posts, Image with Content Overlay, FAQs…. During discovery we’ll identify the types of content you want to feature on all the key pages of your site, and in design we’ll finalize them.

The next step is to identify all the ways you’d like to customize the modules. For instance, we’ll often include an option to select the section’s background color from a selection of brand colors. The Content & Image module might offer different alignment options (Content / Image, Image / Content, Full Width Image followed by Full Width Content…). We want to make sure you have complete flexibility in the areas that matter, while making smart decisions on your behalf to simplify the editing experience and keep the design consistent site-wide.

The final step is to build this page in a way that is fast and future-proof. When you create or edit the page, all of the actual content you enter (but not the style options and unnecessary theme markup) is stored in  post_content. This ensures the content is easily indexed in the site search, and if you change themes in the future the content will still exist on the page. The raw data about each module is stored in metadata about the page, and that is used in the theme to build the sections.

Example

Many pages of my site are modular, including Home, Our Process, and individual case studies.

I have the following modules available: Content, Content Image, Testimonial, Client Logos, Team, Training, Case Studies, Testimonial Carousel, How We Work, and Phases.

When I edit my homepage, the backend looks like this:

When I open a module, I see all the fields that are available for that module type. For instance, the “Content Image” module lets me specify the background, layout (Full Width, Content / Image, Image / Content), section title, content, and image.

Some sections like Case Studies have dynamically generated content areas, so only the title is editable.

Clicking “Add Module” lets me select which type of module I want.

I can drag the modules up and down to re-order, and can use the icons on the right to duplicate or delete a module.

Different than a page builder plugin

There are plugins available that provide similar functionality, like Beaver Builder. These are a good option for a more DIY approach, but there are some key benefits to our approach:

Integrated Design

These plugins tend to override your theme styles, making the landing pages look different from the rest of your site and “off brand”. In contrast, our modules are deeply integrated into your site and are one of the first things we design, ensuring a consistent user experience across the site. For instance, your “Upcoming Events” module will match the look of your event calendar.

Easier to Use

Popular plugins need to provide features to satisfy all their user’s requirements, but you’ll only use a small subset of these features. This means the interface will be overly complicated with features you don’t need. Our backend tools are built specifically for your needs, providing only the features you need and crafted in a way that makes sense to you.

Improved Performance

With all the unnecessary features in the plugin comes the assets required to display them – CSS styles and Javascript. Your page load time will be slower due to assets you don’t need. Our modules are an extension of your current theme’s features and styles, so don’t result in additional assets loading. We can take a holistic approach to optimizing the performance of your entire site, including your module-based landing pages.

Better Internal Searching

Some developers will build a modular backend for you, but keep all that data separate in metadata. We go a step further – every time you create or edit a modular page, we also generate a content-only version and save that in the main content field on the page. This ensures all your page’s content is included in WordPress’ internal site search.

Easy to Upgrade in Future

After you disable some page builder plugins, your content is either lost (hidden in metadata you can’t access) or unusable (in the content field but full of code). You end up stuck with that plugin because its too painful to switch away. With a custom solution built by our team, you have more options.

You can hire us or any other WordPress developer to modify or extend your modular template using the detailed documentation we provide. Or you can remove the modular template and you’ll get clean, usable content. All the dynamic features (ex: recent posts, upcoming events) are included as placeholder shortcodes your future developer can either leave disabled or build out.


See more client resources >