Author: David McCan

Author’s summary

Props to Sridhar Katakam for the great idea and to Vitalii Kiiko for setting up the server and installing WordPress for all of the sites. 

I used the Kadence theme and Kadence Blocks Pro to try to recreate the reference site.  My overall conclusion is that Kadence is great for creating content, but somewhat limited when creating advanced layouts and interactive features. 

What Worked out of the box to match the reference site

• I found that the Header was very easy to create using the Kadence theme’s header builder. 
• I was able to use the Kadence Info Box without any CSS for the content boxes in the Features section and in the How it Works section.
• The Logo List worked fine. 

What Would Have Worked out of the box with Kadence if not for multisite issues:

I had a number of problems with the restrictions of multisite.  It stripped out HTML input elements and unfiltered HTML from the page.  It also removed SVG icons, though SVG images would load. 

• In the pricing table there were three lists of features, one for each price point.  This would have been possible with the Kadence Icon List block, it even included the same SVG icon, but no icons would show on the front-end when entered via the Gutenberg editor.  I ended up coding the lists with HTML and CCS and then using the shortcode feature of Scripts Organizer to inject these lists into the page.  
• Kadence Elements gives a lot of control for the layout and I believe I could have exactly matched the layout from the reference site using this method.  However, content created with Kadence Elements would not show up on the page when they were inserted with the Kadence shortocde.  I expected that it would so I don’t know if it was because it was created with Gutenberg and the code when injected was unfiltered HTML, or for some other reason.  Consequently I used the regular Kadence Grid/ Carousel Block to approximate the layout. 
• The middle footer section with the logo, menus, and email signup form. I could get pretty close with the Kadence Footer Builder, but could not add the form.  So I ended up adding much of this content by creating it in HTML and injecting it with the Scripts Organizer shortcode feature. 

What couldn’t be done with Kadence out of the box

• I made the “pill” tags at the top of the section using an HTML block and some CSS.
• It was not possible to overlay the images in the Hero or How It Works sections in the Gutenberg editor with Kadence.
• Kadence has a Testimonial block that can be displayed as a slider, and I used that for the Quotes section.  The layout was not the same as the reference site.
• Kadence has a pricing table, but it doesn’t have a toggle button and a switching of prices.  I heavily modified a pricing table with toggle from online.  I interjected the HTML with Scripts Organizer when I saw that the HTML input element was missing from the page output.  The pricing table toggle required some JavaScript and a bunch of CSS. 
• The footer has a curve divider.  I tried adding that using the Kadence Footer Builder but that did not work.  I ended up adding it with CSS as a background image and then adjusting it for different screen sizes using CSS.  It was much harder than it should have been. 

Kadence is great for creating content, but I wouldn’t recommend it for trying to recreate bespoke layouts and interactions.  

I have a full blog post with screenshots and some of the code here:  https://www.webtng.com/kadence-entry-in-the-page-builder-fight-club-challenge/

Themes/plugins used on the project

• Kadence theme 1.1.43
• Kadence Blocks – PRO Extension 2.0.13
• Kadence Blocks – Gutenberg Blocks for Page Builder Features 3.1.15
• Kadence Pro – Premium addon for the Kadence Theme 1.0.13
• Scripts Organizer 3.3.6

Reasons the project does not meet the build guidelines

• Footer menus are not dynamic

Design accuracy

Unfortunately, the design accuracy is “medium”. Some sections and particular elements are not looking the same as in the original design.

GTMetrix example results

PageSpeed Insights example results

Screenshots of the template

Disclaimer (!) Unfortunately, sometimes elements are not shown with their proper styles on these screenshots. This is a technical issue of the software, not the template!