This post about transitioning to the WordPress Ollie block theme is part of a series where we share our learnings on managing a hobby website. It’s intended for WordPress hobby website administrators.
BajanThings is built using the Ollie Pro theme. We are huge fans of Mike McAlister and Patrick Posner the team behind Ollie. Ollie Pro works out-of-the-box. It looks great. It has beautifully crafted patterns. What’s even more impressive is how fast sites built using Ollie Pro are right out-of-the-box.
My niece runs Waterland Event Hire and Site Services. Starting out in business in 2014, Waterland used a small agency to build their website. It was built using Avada. Over the last few years I’ve been helping my niece to optimise the Waterland Event Hire and Site Services website so that it ranks highly in their operating locale: East Yorkshire.
In our post: In praise of the WordPress block theme: Ollie Pro we highlighted a test we had done to recreate the homepage of my niece’s website: Waterland Event Hire and Site Services using Ollie Pro.
Waterland Event Hire and Site Services front page
built using Avada Page builder
Mock-up of
Waterland Event Hire and Site Services front page
built using Ollie Pro
We hit a wall optimising the Waterland Event Hire and Site Services website, with PageSpeed Insights scores stuck at around 73.
Waterland Event Hire and Site Services website was built using Avada Website Builder (formerly Fusion Builder). This is a front-end visual page builder for WordPress. Page builders like Avada offer convenience and speed, but their hidden costs is bloated code and sluggish performance. An additional factor was some of the Yoast Pro SEO analysis tools would not work with Avada!
This sluggishness is a result of additional code and scripts these Page builder tools generate. Slow page speed is a critical factor for search engines when ranking websites, as they prioritise fast-loading sites to provide a better user experience. Consequently, websites that rely heavily on Page builders may suffer in search engine rankings, leading to reduced visibility and lower organic traffic. This was our experience with the Avada built version of Waterland Event Hire and Site Services.
We opted to bite the bullet and change the website from using Avada to using the native WordPress block theme Ollie Pro. Having done this our, out-of-the-box PageSpeed Insights scores jumped from around 73 to around 93.
It should be noted:
The conversion of an Avada based website or for that matter, any WordPress website built using a proprietary Page builder, to a native block theme, will be time consuming.
The amount of work will depend on the number of pages/posts. The Waterland Event Hire and Site Services website consisted of 33 webpages and no posts. It took me about a month to complete the conversion.
Converting an Avada based website to a block based website is not a simple port from say a classic theme like Twenty Seventeen or Astra to a block theme like Ollie.
Each page and post has to be rebuilt as Avada Builder, the Avada Page builder generates propriety code that is incompatible with the native WordPress Gutenberg page builder.
The conversion process require setting up a staging site where each page/post need to be systematically overwritten using the Gutenberg block editor, re-creating each page/post and section using native Gutenberg blocks, while closely matching the design and layout of the original Avada website (as we did with the Waterland Event Hire and Site Services front page mock-up).
Critical for SEO is the URLs remain the same. During the conversion process the Avada site remained the Master while each and every page/post on the staging site was converted to the native WordPress format.
When we completed the staging site – the staging site was pushed to being live.
Before pushing the staging site to live we took multiple back-up of the Staging site and the Avada site. This was so is if something went wrong the agency could easily do a roll-back… that’s more down to learning the hard way, some grey hair and wisdom!
The next stage of the process is: over the next week we are moving the Waterland Event Hire and Site Services website from hosting handled by the agency to Waterland managing their own hosting. This will allow Waterland to fine tune the LiteSpeed settings, the version of PHP that is used and to move to using Redis Object caching – which should give us an incremental speed boost!
The hardest part of the conversion was recreating the cover block with a curved top and bottom which uses a built-in Avada feature. We recreated this using a cover block with a SVG top and bottom mask which was inserted via the Icon Block. The icon block allows you to insert Custom SVG code.
Here is the Custom SVG code that created the top and bottom masks:
SVG - Top -> created using https://svgeditoronline.com/editor/ with the output then edited
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1024" height="80" viewBox="0 0 1024 80">
<g transform="matrix(13.29 0 0 -2.46 512 36.06)" >
<path style="fill: #ffffff; fill-rule: opacity: 1;" transform="translate(-48, -48)" d="M 9.113 65.022 C 11.683 45.575 28.302 30.978 48 30.978 c 19.696 0 36.316 14.598 38.887 34.045 H 9.113 z" />
</g>
</svg>
---
SVG - Bottom -> created using https://svgeditoronline.com/editor/ with the output then edited
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1024" height="80" viewBox="0 0 1024 80">
<g transform="matrix(13.29 0 0 2.46 512 44.06)" >
<path style="fill: #ffffff; fill-rule: opacity: 1;" transform="translate(-48, -48)" d="M 9.113 65.022 C 11.683 45.575 28.302 30.978 48 30.978 c 19.696 0 36.316 14.598 38.887 34.045 H 9.113 z" />
</g>
</svg>
Everything else was accomplished using native WordPress blocks.
All in all, we think we absolutely nailed the migration of the Waterland Event Hire & Site Services website from the Avada Page Builder to the native WordPress Ollie Pro block theme.
A Big thank you to Mike McAlister and Patrick Posner the team behind Ollie Pro. Ollie Pro is BajanThings go-to block theme.
