alogo

MultiPurpose, Multilayout Themes or How PageBuilders Became SiteBuilders

WordPress themes have always had multipurpose capabilities to a degree. One has seen  it with built-in front page sliders, configurable headers,multi-page theme layouts, and even importable complete mult-page Website designs  like the Moody theme seen here. In addition, some Multipurpose themes pack on a frontend PageBuilder like Visual Composer. But these MultiPurpose themes lack key Multilayout  capabilities which can be applied to any post, page or custom post type:

  1. the ability to specify whether sidebars will appear on a page/post and where or not at all;
  2. likewise specify whether a header and/or footer are to appear on a page/post or be replaced by a PageBuilder stand in;
  3. Specify whether key page/post attributes like author, published date, featured image, etc are to appear;
  4. Define the contents width in pixels, whether the content is boxed or contained or side-to-side full width.

MultiLayout Themes take WordPress page design to a new level – the ability to provide a unique look and layout for every page/post on a WordPress website.  So of course MultiLayout themes work best with topend PageBuilders that provide drag and drop UI design and layout. Not just dozens of  pre-built UI elements or widgets but also their layout in multi-column rows and grids.

Multilayout webpage design with no sidebar, tab container, full-width row.

What is even more revolutionary, the PageBuilders are taking on three new roles:

  1. Extensive CSS Styling of the PageBuilder’s UI element is controlled in the PageBuilder property popups;
  2. many PageBuilders are assuming the role of creating  unique layouts for headers with menus, search boxes, titles, logos, bread crumbs, banner ads, top bars and sliders [with sticky and transparency settings] mixed, matched  and set into  positions with  ease;
  3. Ditto for  the layout of sidebars and footers.

Here is the killer result => PageBuilders are now responsible for the layout and look of an entire webpage In the process, the very best PageBuilders are becoming overall SiteBuilders. We have tracked the SiteBuilding trend already here.

But what the new PageBuilders-become-SiteBuilders need is a MultiPurpose theme that allows the developer to control the appearance of the theme’s default header, sidebar, footer and other layout elements. This is what is meant by a MultiPurpose Theme. But such themes could easily be named MultiLayout themes. This is because such MultiLayout themes allow developers to control what UI element will show on a page or post – the default header or the developer designed one. Ditto for sidebars, footers, topbars, popups, etc.

This is the second WordPress UI breakthrough of the past two years => MultiLayout or MultiPurpose themes allows designers and developers  to design a unique look and layout for every page and post.   So that is what this review  is really about – to explore the best  combination of MultiLayout Theme and its associated PageBuilder to do complete WordPress webpage design and delivery.

But first let us examine the implications of MultiPurpose Themes enabling PageBuilders to become SiteBuilders. First, the WordPress Visual Editor has become subservient to and just another widget in most page editing tasks including  the new Gutenberg PageBuilder from Automattic. For the best PageBuilders the direct online editing is replacing the need for using most Visual Editors.

Thus in PageBuilders  are now replacing the WordPress Visual Editor as the primary  tools for content layout and design. So Gutenberg which is targeted to replace the WordPress Visual Editor has much bigger shoes to fill – it must match the capabilities of the best WordPress PageBuilders. And Gutenberg is currently well short of that mark.

Second, the choice of what WordPress theme to use has now become a much more narrow choice for most WordPress Designers and developers. Instead of thousands of themes and hundreds of PageEditors, the choice now comes down to about 10 MultiPurpose/MultiLayout themes  and 6-10 PageBuilders.  Wow what a drastic reduction of choices. Also for WordPress Developers guiding their client to the best choice of Theme and PageBuilder has become as vital as the choice of hosting service used. Again, what a remarkable change in the traditional WordPress workflow.

Nature of WordPress Multipurpose Themes

As noted the notion of Multipurpose WordPress themes has been embraced by the WordPress community for many years. Genesis Theme Framework pioneered the use configurable content layout with choice of right, left , both or no sidebars all in a responsive design. Other developers took advantage of the Genesis Framework API to create child themes which further extended their theme capabilities to add hero images, vertical menus, header sliders etc to the design mix available to developers.

Then a second generation of tools like Headway Themes and Ultimatum brought added responsive layout capabilities in one design tool:

Headway allowed developers to drop blocks anywhere on the design screen or omit them. In addition, every page and post could have a unique design layout. Thus the above design omits any sidebar and later stacked the  Navigator above the Header and removed the Footer for the Home page but had a completely different layout for  Blog Posts. Ultimatum brought templates to the design process so developers could repeat layouts quickly for different pages or websites. Recently Ultimatum has added 12 free premium plugins including Visual Composer, Revolution Slider, and Essential Grid for a packed lineup of Design plugins.

In sum, the trend to Multipurpose themes has a 5-8 year history at WordPress. Here are some of the current features of multipurpose themes often presented in the Appearnce | Customize command:

  1. responsive layout for all pages and posts;
  2. ability to control sidebars [left or right or both side or none] sitewide;
  3. ability to control sitewide content width in pixels;
  4. ability to control appearance of some page/post decorations like title, published date, featured image etc
  5. ability to control contents and layout of headers and footers with varying flexibility;
  6. some ability to provide pre-filled page templates that can be customized for final look and feel;
  7. limited ability to control sitewide typography and styling;
  8. uneven support among multipurpose themes for Pagebuilders, sliders, galleries, calendars, and other UI widgets;
  9. inability to place layout blocks anywhere on canvas like Headway and Ultimatum.

And here is an example of the freemium theme GeneratePress  in action with Thrive Architect as the PageBuilder.
As you can see from the above example and list of capabilities MultiPurpose/MultiLayout Themes are clustering around some key functions:

  1. Site wide mobile responsive layout elements from header through content block to footers;
  2. Sitewide Settings for  layout elements like topbar, header, menus, breadcrumb, sidebar, content section, footer. These settings are  for visibility, width, alignment or position and combination plus sticky and transparency values;
  3. Individual Page/Post settings which override the default Sitewide Settings  for visibility, width, alignment for topbar, header,menus, breadcrumbs, sidebars, footers plus more  content section options for  such items as title, author, comments, categories, tags, visit counts, etc;
  4. Control of specialized popup events like scrolling, visit duration, top of page hovering, etc;
  5. Provision of default Home or Landing Page templates;
  6. Provision of PageBuilder, Slider, Gallery and/or Commerce plugins.

This reviewer regards the provision templates and PageBuilder plugins as superfluous and unnecessary. The developer and user should have the choice of PageBuilder plugins to be used. And part of that choice of PageBuilder will be the strength of the templates portfolio offered by the PageBuilder along with its set of UI elements that meet their design needs.

So in alphabetical order we look at some of the best MultiPurpose/MultiLayout themes currently available for WordPress.

List of Best MultiPurpose/MultiLayout Themes

Astra Free and Pro [$50US/year with unlimited websites and support] are both Multi-layout capable with mobile  responsive designs .Here is the test website’s Home page styled with Astra:
Astra is particularly robust because it works with all the major PageBuilders and provides a rich set of default setting with ample opportunity to change those settings for any particular page or post. Also Astra has the least overlap of features with PageBuilder functionality. This is not to be dismissed because  whenever there is overlap, then it becomes harder to debug a particular layout if one has to check the Customizer, then the PageBuilder and finally the Theme’s Options for a specific layout setting.

Right now the PageBuilders and MultiPurpose Themes are in a delicate dance over who takes charge of color, typography, spacing,  animations and other CSS styling functions. And in the no mans land of header, footer, sidebar and section layout including use of UI elements there is clearly overlap of functionality. This reviewer like the approach that Astra has taken which is to defer much of the time to the PageBuilder in both styling and UI element layout.

Astra Sitewide Settings for Layout Elements
Over the past few months Astra has seen a number of upgrades and these have added strong features to its default settings. Designers can control the pixel container width which is applied to boxed, contained,  full width or full width stretched stylings. These settings can then be assigned to page, posts, and archives but not custom post types.

Like containers there is a control for sidebars width as % of the container width and then a default setting of no sidebar, left sidebar, or right sidebar. Then users get to set sidebars settings for pages, posts, and archives. This alone is a strong set of free Astra features.

But there are more features  especially in the Primary Header layout. It can be turned completely off or users can choose among logo/title+menu or logo/title centered above the menu or menu+logo/title. In addition, users can add to the menu  a search field or HTML/Text or a widget. As well designers can add a color bottom border of their choice in height.

There are two more page header ontrols available in free Astra – setting for the page header width – full or container width. Second, there are two settings for mobile menus – the label and alignment for the mobile menu.

The free astra Blog Archive and Post settings are extremely rich. Designers have control over the appearance of  feature image , title, categories, tags, author, publish date , comments plus the option to set the content width. For archives users can choose between excerpt or full content.

And the same richness of options applies to the sitewide footer settings which are divided into a footer widgets area and a footer bar immediately below. The Footer widget area is simple – turn it on and there are 4 footer widgets but if disabled there are none. The footer bar also can be enabled or not. But if enabled there are two choices – stacked or side-by-side sections. And each footer bar section can have 4 values: empty, text/html, footer menu, or widget. The footer bar has two more settings: 1)its width and whether a footer topbar will be showing.

The free color and typography features are standard with  basic settings for header, content, archives, and posts. But there is  one notable exception – an ample  set of  the Google Fonts are available. In sum Astra has a very strong set of free sitewide settings.

The Pro version adds to the sitewide bounty with some key new settings. There are more header refinements including Above Header and Below Header sections which now can have menus, social media, breadcrumbs, meta fields and language choice settings. As well the Sticky Header with Transparency can be applied to the header sections. Alternatively a Scrolling to Top link  can be used in place of a Sticky Header.

Meanwhile, Blog Layouts add a grid option, pagination, and custom field hooks and areas. Again, this starts to duplicate some features available in the better PageBuilders. And upcoming are advanced MegaMenus and WooCommerce Template Designer. Finally, the Pro version offers notable improvements in sitewide Color, Typography and Spacing settings. In sum, Astras’s free sitewide settings are top notch and the Pro version adds to that leadership.

Astra Individual Page/Post Layout Settings
In contrast to Astra’s free sitewide settings, the individual page/post settings are more spare as seen in the screenshot at the left. The essentials are here. Designers can turn off the sidebar and disable the primary header, the page/post title, the featured image and the footer bar[but strangely not the Footer widget area].

There are added options for the Sidebar settingsn – use the Customizer sidebar setting, a left sidebar, right sidebar or no sidebar. Likewise the Content Layout has five settings – defer to the Customizer setting, boxed, contained boxed, full width/contained, or full width/stretched.

This reviewer must admit that the difference between Boxed and Content Boxed is hard to distinguish – so it is recommended that users try out the various settings to see how they work.

But the bottom line is that with even this spare set of individual page/post layout control settings, it is possible to create many different and innovatively styled special events or landing pages using just these  settings.

Astra Templates Support
By providing close to 30 page templates, Astra overlaps the templates from most of the best PageBuilders . But Astra has taken the unique approach of providing most of its themes in both BeaverBuilder  and Elementor templates as seen in the screenshot:
The range of template stylings is quite wide.
Astra Specialized Controls
Astra has a Pro Agency package for $212US/year with use on unlimited websites. Two of the plugins are relevant to MultiPurpose Themes. Convert Pro allows users to create popups and slide ins that are triggered by a wide range of events. Convert Pro has its own wizard designer to layout the popups – so, yes, there is potential conflict with PageBuilders. But among the top 7 only one, Divi, has this feature and its a special plugin as well. So maybe the overlap concern is stretched.


Generate Press Free and Pro [$39.95US for unlimited websites and 1 year of updates and support] are both WooCommerce, WPML, BuddyPress and bbPress ready. And as the scrrenshot shows, Generate Pres is capable of generating pages with a unique look.
Every page on this website has a different layout and look because Generate Press even in the free version is loaded with Individual Page/Post  custom settings. Lets examine those in detail below:

Generate Press Sitewide Settings for Layout Elements
In free Generate Press developers make sitewide settings with  extensions to the Customize command. These global extensions  are for color usage, typography,  content width, 7 possible default  sidebar settings including none, 4 default header settings, 5 default primary menu settings, and 4 default footer setting. For many users, the free Customize command options are all they need to give their website a unique design layout. Here is a new look for the website using only the Generate Press Customize command settings:

In Pro Generate Press, these sitewide settings include enhanced color, typography, spacing, body, copyright, footer and background  default settings. The Section and Page Header routines and settings  are a)in conflict with some of the PageBuilder UI elements and b)lack the WYSIWYG layout available from the currently used PageBuilder.

Generate Press Individual Page/Post Layout Settings
For individual pages and posts Generate Press free version  allows controlling 4 layout options

  1. Sidebar layout choices are default sitewide, none, right, 2 right, left, 2 left and content between left and right sidebars;
  2. Footer widget  layouts are default sitewide, none, 1, 2, 3, 4, 5 widgets;
  3. Disable Elements only controls one, page title;
  4. Page Builder Container controls full width or contained settings for the page/post.

These are a good set of free options; but it would be useful  to control the appearance of the default  header, footer, featured image, etc. And  the Pro version does that  adding topbar, content title, header, footer, primary navigation, and featured image to the items that can be disabled and thus matching the flexibility of Total.

Generate Press Templates Support
Generate Press has no templates and this reviewer thinks that is good because to be open and fair  to all the popular  and best PageBuilders [currently in alphabetical order – BeaverBuilder, Divi, Elementor, Site Origin, Themify Builder, Thrive Architect and Visual Composer] a template would have to be built using each PageBuilder. So to have ten different templates , 70 would have to be built. This a lot of work for ten different template designs. Astra does provide Beaver Builder and Elementor templates. Both of these PageBuilders when abandoned for design work on a page or post still leave behind on the image and text content without any embedded shortcodes making it easier to switch to a different PageBuilder.
Generate Press Specialized Controls
The Pro version of Generate Press allows users to export all the current Generate Press settings and then Import them on a new website or restore settings on the existing website. Very useful capability just like page templates.

The7 [$39US/website with unlimited updates and 6 months support ]The7 theme is like the Xtheme but with a lot fewer plugins but more templates. The7 also has more multi-layout features. So as seen in our screenshot below there are many options for creating a unique layout using The7 theme:

The7 has a mega-menu for all the the theme options available to users. This replaces the Customize command. Then The7 trips up because it takes a Save Options to see the changes made in the many theme option settings rather then display the changes like in the WordPress standard Customize. But The7 has embraced multipurpose theme designs with many sitewide options with attention to header, footer and sidebar designs. As well the individual page and post settings for layout elements are rich. See the details in the descriptions below.

The7 Sitewide Settings for Layout Elements
The theme options menu starts with Wizard which brings General, Branding, TopBar & Header, Footer & Sidebar  options into view. Start with Branding  in order to replace the Circle-7 logo in the website’s header while updating the copyright and favicon settings.

Skins allow users to set the font and background color to be used on text in the header and sidebar. General Appearance controls the content  width in pixels and layout- boxed or full width. Also there is control of both the in-box and out-of-box  backgrounds which can be a pattern+color or image.

The Typography sitewide settings are actually sparse in comparison to other Multipurpose themes. The7 provides for text color for heading, primary and secondary text. Then it provides font type, font-size, and line height [ but not font weight or line-spacing] for a a large font group [content and shortcode text], medium font group [sidebar and bottom bar text] and small font group [breadcrumbs, meta info, and some special shortcodes].  This why CSS Styling IDEs like Microthemer or Yellow Pencil are popular  – they help resolve font and spacing issues like these.

The7 lavishes a lot of functionality on the creation of distinctive header and topbar combinations. Side header layout has been used to create the new look for our test website. In a clever staging, The7 brings all the key settings together; lets look at each. Topbar settings are for the text font, size, color, spacing and capitalization

The7 Individual Page/Post Layout Settings
Hidden content
The7 Plugins and Templates Support
Hidden content
The7 Specialized Controls
Hidden content

Total []

Total Sitewide Settings for Layout Elements
Hidden content
Total Individual Page/Post Layout Settings
Hidden content
Total Templates Support
Hidden content
Total Specialized Controls
Hidden content

Xtheme [$45US/website, unlimited updates and 1/2 year of support]is probably best known for its gargantuan list of top rank plugins and large demo template library. It is also a multipurpose/multi-layout theme as seen in this screenshot of our Toronto for the Holidays website:
For WordPress developers this is a low cost way  to test out use of page templates plus experiment with 28 top ranked plugins and services made available through XTheme. For broader website design, Xtheme defaults to the Cornerstone PageBuilder but developers will want to fire up  Visual Composer  because of the wealth of free and pro Visual Composer PageBuilder add-ons.

Xtheme Sitewide Settings for Layout Elements
Xtheme key sitewide settings are for site and content width. Users can control site width in pixels and percentage. In addition, site layout can be full width or boxed. The content area layout can also be either full width or left sidebar  + content or content + right sidebar. The Blog sitewide settings let developers control the portfolio layout and width, the archive layout and width. The layout can be standard stacked or masonry. The  width can be the sitewide content layout setting or full width.

Background color or image can be set sitewide – and it is important because backgrounds can be changed for individual page and posts. Typography using a user chosen subset of Google Fonts can be  set for Body & Content, H1 etc headings, and Links including color.

Buttons styling can be set for 3 styles,  3 shapes,  and 6 sizes. In addition button color and hover color can be set for for the text and border. One has to be careful of conflict  because button styling is also done by PageBuilders.

Header settings are a little clumsy. But developers can stack or inline  the logo/title and menus. If the title is used, users can set the title’s color, font-type and size. Likewise for the menuitems,  the font color for both standard and hover states can be set. Also users can set the font style, font weight and size.

Footer site wide settings provide for 0 to 4 widget areas plus  a bottom footer bar with a footer menu,  social media icons and/or user set footer content. These footer items are stacked and their order is fixed.

Xtheme supports user supplied favicon and scroll to the top moving button including its postionsing. In sum, the Site wide settings are mixed incapability and as we shall see below, very few are controllable in the Individual Page/Post Layout Settings.

Xtheme Individual Page/Post Layout Settings
Xtheme Individual Page/Post Layout Settings are some of the strangest among the multipurpose themes. Posts are limited in comparison to Pages.

For Pages, users can add specific CSS classes [but no help creating or editing those classes], change the background, change the index titling, disable the page title including all meta. The screenshot on the left shows the choices. Developers can choose to disable the header and/or footer and/or the content which can be contained or not contained [if contained the content can have separate background color or image].

For Posts, users can again add specific CSS classes [but no help creating or editing those classes], change the background, change the index titling, disable the page title including all meta. Finally the post can be made full width which will override any sitewide settings on sidebars.

A word about the background changes allowed. This background does not apply to the Page or Post content but rather to a bottom of the page separator region. This appears to be a way of setting up a divider which  can be a slider.

What is missing in Xtheme is the ability to urn off in the Post headers, footers, and meta elements of the post like title, author, publish date, etc. And these test have been done on the latest version of Xtheme

Xtheme Templates and Plugins Support
Xtheme has 46 templates[or demos in the Xtheme vernacular] they cover a broad set of  website categories including App, Auto, Agency, Church,
Xtheme also has a formidable list of plugins/extensions:
2 PageBuilders including Cornerstone and Visual Composer
3 Sliders including Slider Revolution, Layer Slider, and Soliloquy
3 Gallery plugins including Envira Gallery, Essential Grid and The Grid
3 Scrolling tools including Content Dock, ConvertPlug, and Smooth Scroll
2 Advanced Coding routines including ACF-Advanced Custom Fields and Snippets,
5 SaaS plugins Modern Events, FaceBook Comments,  Disqus for Comments, Video Lock, and Woo Checkout Editor
2 Menu creation tools including Superfly and Uber Menu
4 Specialized  Condition tools/services like Custom 404, Olark SEO, Terms of Use, White Label and UnderConstruction
2 Forms tools including E&P Forms Builder and Email Forms
This is a huge head start in free plugins needed for Website creation and functions. But there is a fair amount of duplication among the plugins and its left as an exercise for the developer to work out the best combination of tools and plugins to meet their clients needs. What is missing is backend administration plugins for security, performance tuning, SEO/promotion[though Olark SEO advisory service is avialable], backup/recovery, and statistical website tracking [there is a Google Analytics tap in].  In sum, like  the Uncode theme, Xtheme has a large learning curving to get the most out of all the good tools available with this theme.
Xtheme Specialized Controls
Xthemes scrolling plugins afford developers an opportunity to control popups with very fine control. Likewise the two addon menu plugins, also afford developers an opportunity to try several advanced menuing options not avialable in most of the other multi-purpose plugins.

 

Pin It on Pinterest