How to Publish Amazing Landing Pages?

It is no secret that landing pages are an important tool for growth. It is a great way to drive traffic and build SEO. Landing pages lead your potential users to your products, offers, or services. And for that reason, they are crucial in building a solid conversion mechanism.

And while landing pages are great for conversion, a poorly built landing page can hurt you. Your users may think your product or service is inferior once they are greeted with a poor landing page. A great landing page is a combination of good visuals, a clear message & CTA, and high page loading performance.

So how can we create these high-quality pages? There are lots of tools and platforms for building and publishing landing pages out there. Some of them are free and some of them are not. Some offer hosting, some don’t. Some load really fast and others not so much. But most importantly, some of the best ones have a really good editor experience. This is often the most overlooked feature of these tools. If the editor experience is poor, it directly results in frustration and poorly built landing pages.

Our Solution 💡

We needed a tool to build landing pages for our website. But before diving into the tool itself, we want to provide a little bit of technical background. Here at Kunduz, we use WordPress for publishing our website. We have a custom-made WordPress theme using our company's UI kit, allowing for visual consistency across all web properties. And while we could have built each landing page from scratch individually, it is a great deal of workload on just a single developer when we consider that each page must be maintained and occasionally needs small changes. 🎨

This means our solution had to be easily used by editors and should fit in our existing toolchain. WordPress has lots of existing page builders and most of them come with their own themes and/or UI components. To achieve the sweet spot between editor experience and additional workload, we decided to develop our own page builder.

Kunduz’s very own Landing Page Builder (great name right? i know)

First, we needed a base to build on top of. Most of the heavyweight editor logic like dragging, dropping, converting UI elements to HTML, etc. is common and has already been solved by a product before us. While searching, we came across the amazing GrapesJS. It’s extensible, it’s robust and it’s open source. You can create your own little HTML blocks for your editor to drag into canvas and edit.

[embed]GrapesJS GrapesJS is an open-source, multi-purpose, Web Builder Framework which combines different tools and features with the…grapesjs.com

After that, we needed to define what building blocks to offer our editors. After a couple of meetings and analyzing common patterns, we created a list of “components”. The list consists of common elements such as the Navbar, Hero, CTA, Feature List, and Footer. While we were hacking away on the editor itself, a very talented UI designer started to work on the components.

One by one, our block designs came to life when they were added to the GrapesJs editor. Everything was running smoothly with the editor but there was still the issue of saving the HTML contents to WordPress database 💾

Back then, we were using another great tool called react-admin as our back-office software. It is a turnkey solution to develop admin UI’s, based on ReactJS. Once we built our editor, we developed a small connector component in React so that the HTML output of the page builder was accessible by our CMS. To save content to WordPress, we leveraged their REST API.

This solution worked out great for a while. There were a few snags here and there, but overall the solution helped our editors build and publish landing pages efficiently and quickly — all without added effort from the single frontend developer.

And once it's time to sunset our back-office in favor of a greater tool, we needed to consider the Landing Page Builders’ fate. Where was it supposed to go? And the answer was pretty obvious. Inside WordPress. 🤯

A landing page builder with a sense of humor?

Overriding the default WordPress TinyMCE editor is no grand feat. Lots of builders have done it before, but surprisingly it’s a pretty poorly documented process. Most of the documentation is over a couple of years old and the fact that WordPress released a new editor experience called Gutenberg didn’t help. Gutenberg was the de-facto editing tool and none of the information out there provided a way to bypass it. That's why we used another plugin to revert to the classic editor first and then override it. 🤓

Overriding the editor is actually simple in practice. You call a couple of jQuery functions to hide TinyMCE editor and show yours. Then, you just need to listen to the save event and inject your editor’s HTML as page content. We packaged this solution as a WordPress plugin and installed it on our website.

We hope this solution will serve us years to come and help our editors build great pages. By switching, some of the withstanding bugs and “gotcha” moments solved themselves automatically. This re-enabled us to use Yoast SEO to analyze the landing page's content and edit elements like the title and description from the page. This was impossible before due to WordPress turning our HTML to gibberish on updating. 🈵

If you made it to this point, we hoped you learned important insights about developing landing pages. If you are also interested in web development and want to be a part of our team, you can **click this link** reach out to us.

[embed]Kunduz wants to meet you! We are looking for Web Developers! If you are all about high-growth products, real-world problems, and an ambitious…www.notion.so