kadence entry in the page builder fight club challenge

Introduction and Props

In the WordPress ecosystem we are fortunate to have lots of good options for building a site. Sridhar Katakam of the Bricks Labs had a great idea and proposed a WP Builders Fight Club where people pick their favorite site building option and everyone tries to reproduce the same home page. More than a dozen people joined. Vitalii Kiiko of Builderius volunteered to setup and host a copy of WordPress multisite, with a site for each person. That was a large task and he was very accommodating of everyone’s requests. Also, Marko Krstic of dPlugins supplied a copy of Scripts Organizer that we could use for code snippets.

I have been happy using the Kadence theme and Kadence Blocks so volunteered for Kadence. We’ll see how that worked out. Vitalii installed the free and pro versions of both of these and I activated them.

The Challenge

Sridhar picked a page from Shuffle for the challenge.

challenge page

The page had nine sections: header, hero, features, how it works, quotes slider, pricing table with a toggle, logos, and a footer.

The guidelines were to:

  • Use native built-in options and elements of your chosen solution as much as possible.
  • Try to make the hero headline and description dynamic using ACF or Meta Box Options/Settings page. This is optional.
  • Newsletter need not be a working one.
  • We are doing just the home page.
  • Use the images on the reference page as is w/o any optimizations to them using software or plugins.
  • Do not install any caching, minification, optimization plugins etc.
  • The built page should be responsive, needless to say. Use your best judgement as to when elements should begin stacking. It need not exactly match the design.
  • The pricing table should be interactive i.e., with a working switcher.
  • These sections/elements should be dynamic:
    • Quotes (Testimonial Slider)
    • Blog posts
    • Header and Footer nav menus

Multisite Difficulties

I haven’t worked with WordPress multisite before and found that compared to the freedom that we usually have on a self-hosted WordPress site, multisite was very difficult to work with. Everything is locked down and there are many features that we take for granted that are not available.

A site admin cannot install themes or plugins, only the Super Admin. No problem, Vitalii was very helpful and installed anything we gave him and asked for. There were however several issues other issues mentioned below.

Building the Sections

The Site Header

Building the header was quick and simple using the Kadence theme’s header builder.

finished header

The Hero Section

The next section was the hero. Note that the refence site has two design images overlaying the image of people working, the gold “fingerprint” and the blue grid. This proved to be the first challenge.

reference header

This was the first time using the Row Layout block for anything besides simple columns since Kadence introduced Sections. I think Kadence had implicit sections previously, but when they introduced some limited flex options they make them explicit. When you add a Row Layout block, every content area automatically becomes a section.

I’ve experience creating overlapping images like this using Elementor, where it is very easy, and I’ve used jQuery before to set the absolute position and z-index for the same purpose. Nelson Therrien shared a demo with me where he did the desktop version with some CSS. I realized that I could use an HTML block and go that route.

The Kadence Section Block and the Kadence Row Layout Block have it seems like a hundred setting options and in the spirit of experimentation I tried to nest columns and position them with CSS. Here is the block list.

hero experiment

The HTML output results in a page of “DIV and class soup.” It was a bit of a mess and it is not something I’d want. I know that some block addons come with options for absolute positioning and z-index settings, but Kadence does not. This got me thinking along two lines. The first was that while Kadence is great when writing content, and the Kadence Theme Builder using blocks is very easy to use, it is not geared towards this type of advanced layout. The second thought was how far should we go in adding custom code so as to match the reference site. Of course it would be possible with custom code to do everything, but that cancels out the comparison we have using the different builders.

I decided to skip the overlaid images since that wasn’t a built in feature. The limited result was very easy using Kadence Blocks. Here is the block structure in the editor.

hero section in the editor

And here was the finished version.

finished hero 1

Features Section

The features section has a “pill” category-like tag at the top and then some info-box like features. Here is the reference version.

reference features section

I thought a bit how to create the pill. It was clear that I’d need to use custom CSS, so I added an HTML tag with a DIV and a Section. I could have gotten the same look using a Kadence button, but this wasn’t a link. I used this same pill solution for all of the pills in the page.

html pill

Now I ran into one of the limitations of WordPress multisite. It removes the custom CSS panel from the theme Customizer. I had no way to add CSS. Trisha Cupra, who was doing the Beaver Builder version, had requested the Simple Custom CSS plugin, so I activated that. It works the same as the default one. Here is the CSS for the “pill.”

.pill {
	font-size:12px;
	text-transform:uppercase;
	color: #2AD167;
	background-color: #CAF4D9;
	border-radius: 25px;
	padding: 0px 8px;
}
.dcm-centered {
	text-align:center;
}

I was actually able to use the default Kadence Info Box block for the info boxes. The block allows you to supply your own image, including an SVG option. Here is the finished result.

finished features section

How It Works Section

Here is the reference version. Note the overlapping images here also.

reference how it works section

Again, I skipped the overlapping images. I created the four info sub-sections again using the Kadence Info Box block. It is fairly flexible, so the variation was all handled in the block settings.

Quote Slider Section

Then came the slider with user quotes. The reference version.

reference quote slider

For the slider I used the Kadence Testimonial block. It has a built-in option for a carousel. However, it did not have the stylish quotation marks, nor did it have a dynamic data option, you add the content in statically. I went with the Testimonial block rather than code a slider from scratch, because it took all of 5 minutes to add it.

final quote slider

Pricing Table

The reference version of the pricing table has a toggle.

reference pricing table

The instructions for the challenge explicitly said that this should be working, and while Kadence blocks came with a pricing table block, there was no toggle. So, if I was going to code anything, this was it. I found a few code examples on line and the two I tried had code missing from their download or code pens, so that the toggle wouldn’t function. So I ended up using one of these as the basis and then heavily customized it.

The way these “toggles” work is that you use a checkbox or radio button, which is hidden, and over top of it you overlay the toggle created with CSS. Then when the user “thinks” they are clicking or tapping the toggle, it is really the checkbox or radio button underneath that is getting triggered.

This was another place with the multisite restrictions kicked in. Adding an “input” element using HTML for the pricing table toggle was stripped out, as was all non-escaped HTML. I solved this by using the Script Organizers shortcode creation feature to inject the HTML into the page.

Here is the HTML for the toggle in Scripts Organizer. One very cool feature of Scripts Organizer is that it will generate a shortcode for you from your code block. All you need to do is click the Shortcode option.

toggle button in scripts organizer

So at the top of the pricing table I had a shortcode. Below that I had a Kadence Row Layout block with three columns. I added two rows / versions of the prices, one for each toggle position. Note that in the reference version the price is a large font and the time period is a smaller font. I skipped that refinement. I gave the rows classes and used some JavaScript to toggle between the rows when the toggle button changed. Here is the JavaScript.

pricing table js

Below the prices were the lists of features. I started out using the Kadence Icon List block for this. We were given the SVG icon for the green circle with check, but the Kadence block came with this exact same SVG icon, from Font Awesome. Another problem here with these SVG icons in the list is that they showed in the editor, but not on the front. This is the result of another weird multisite security feature and some of the XML in the SVG is stripped out.

Another surprise here is that the Kadence blocks showed a rendering error in the editor after saving them and later reopening the page in the editor. Everything still worked fine and the icons show in the editor again after clicking Attempt Block Recover. I think on save, some of the SVG code was removed and this caused the issue. Here was the pricing table in the editor. I recovered the block on the left.

pricing table in the editor one block recovered

And here was the pricing table on the front. Notice the icons are missing.

pricing table on the front

We were getting to deadline for completing the project and I learned that every entry into the challenge was going to have screen shots made at the deadline and the challenge closed. Yikes, that felt more like a competition than a challenge. Sigh, I knew that I could insert the SVG icons using shortcodes, so I created a code block for each of the three sections in the pricing table. Here is one for example.

code block for pricing list items

And here are the shortcodes in the editor.

pricing table list shorcodes in editor

In real life I wouldn’t feel comfortable using or shipping a solution like this. The hoops you have to jump through to deal with the multisite limitations result in something that is convoluted and would be difficult to maintain. Here is the final pricing table.

pricing table final

Blog Posts

There are some blog posts in the next section. Here is the reference version.

reference blog posts

I think that I could exactly recreate the reference layout for the blog section using Kadence Elements, but I did some testing and found that Kadence Elements don’t render on the front-end when added to the page using the supplied Kadence shortcode for some reason. So, I created some blog post with the supplied featured images and used the Kadence Post Grid/Carousel block. It is pretty flexible, but it was not possible to match the reference layout exactly. Here is the final version on the front.

blog final

Company Logo Section

The next to last section on the page is a list of logos presumably showing customers using the platform. Here is the reference version.

reference logo row

And here is my version.

final logo section

Footer

The reference footer has a curve divider and several sections.

reference footer

Another difficulty arose with the footer divider. I created the footer using the Kadence Footer builder in the Customizer which has three rows. I added the curved SVG using CSS as a background image on the top row. The middle and bottom section were pretty straightforward, but the curve had a space between it and the middle section. To fix this required several media queries to set the height of the section at different screen sizes. I suspect this could be solved more eloquently.

Update 8/2/2022 – I forgot the footer items were supposed to be live links. I learned I can still update them.

Discussion and Conclusions

The challenge ended up taking more time than I expected for a few reasons. First, I rather naively offered to use Kadence Blocks. I did that before looking at the reference version and considering how the various sections would be created. In retrospect, I learned that while Kadence Blocks are great when writing content, they really are not designed for advanced layout and customizations. Probably any page builder would have been better suited, and there are a few Gutenberg plugins that may have also provided more control, like Cwicly or even GenerateBlocks. I love you Kadence Blocks, but just not for everything.

Second, the issues with WordPress multisite limitations consumed lots of time. I hadn’t used multisite before and had no idea what was going on. After lots of Googling it became clear. Other participants had issues and loaded the SVG icons remotly, hosting them on another site to overcome the obstructions. In my case the shortcode generator in the Scripts Organizer plugin came to the rescue.

Finally, the curve divider on the footer should have only taken a few minutes, but required custom CSS.

I wasn’t totally clear on the purpose of the challenge. For me it would have made more sense to see how close you could get to the reference site with the options each builder provides, instead of hand coding to fill in the gaps. A pricing table without a toggle would have been what Kadence Blocks provides out of the box. In real life I would have been fine coding one or using a component, but not using shortcodes for parts of it.

Here is the GTMetrix result. The Largest Contentful Paint is due to lazy loading images. We aren’t supposed to do any performance tweaks. An OK score, not fantastic.

gtmetrix challenge

This is the finished page. I’m not sure how long it will remain available.

This was an interesting exercise. I’m looking forward to hearing how the other participants fared and the strengths and weaknesses of their builder of choice.

Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. You will still pay the same amount so there is no extra cost to you. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.”

Similar Posts