I am guessing the need is for scalability and rapid prototyping/testing and A/B campaigns.
A solution that we implemented is to sit with the AI (you can use any of them) and create a cache of "sections". This includes header, footer variations, full hero, half hero, testimonials and, content blocks with and without images, testimonial blocks and CTAs.
For us, this was a mix of AI tools, manual extraction and some figma fuckery. Getting rid of unnecessary CSS (extracting only the code for that particular section and maintaining responsiveness was the biggest challenge
We harnessed about 100 readymade templates we got from around the internet that we liked to achieve this.
We then extracted sections and gave them name/numbers viz. Hero 001, Text Block 15 etc.
It took us a week of dev time (about 8 hours per day) but the final output so far has been absolutely worth it for us and the client.
Now the client has achieved a lot of autonomy when it comes to building/deploying new landing pages. Building a page in a matter of a few minutes to a couple hours. You just give them the section names and it assembles everything for them. (Client uses OpenAI codex).
Changing colors and fonts is another line of text. And so is content.
Then you can either deploy it as plane HTML or part of a NextJS/Astro build or even WordPress
To integrate with WordPress, you just ask it to build a page template with editable Gutenberg blocks. It works for some time and spits out a page template + custom JSON for the reusable/editable block code to register the blocks.
We skip the theme's header/footer entirely to avoid CSS bloat. This way, the page is 100% clean code. However, we also ensure that PPC tracking still works perfectly through the standard
Essentially, what we're doing it creating a new landing-page-template.php using only
Roughly this
The autonomy achieved for a non-technical client is pretty decent.
A solution that we implemented is to sit with the AI (you can use any of them) and create a cache of "sections". This includes header, footer variations, full hero, half hero, testimonials and, content blocks with and without images, testimonial blocks and CTAs.
For us, this was a mix of AI tools, manual extraction and some figma fuckery. Getting rid of unnecessary CSS (extracting only the code for that particular section and maintaining responsiveness was the biggest challenge
We harnessed about 100 readymade templates we got from around the internet that we liked to achieve this.
We then extracted sections and gave them name/numbers viz. Hero 001, Text Block 15 etc.
It took us a week of dev time (about 8 hours per day) but the final output so far has been absolutely worth it for us and the client.
Now the client has achieved a lot of autonomy when it comes to building/deploying new landing pages. Building a page in a matter of a few minutes to a couple hours. You just give them the section names and it assembles everything for them. (Client uses OpenAI codex).
Changing colors and fonts is another line of text. And so is content.
Then you can either deploy it as plane HTML or part of a NextJS/Astro build or even WordPress
To integrate with WordPress, you just ask it to build a page template with editable Gutenberg blocks. It works for some time and spits out a page template + custom JSON for the reusable/editable block code to register the blocks.
We skip the theme's header/footer entirely to avoid CSS bloat. This way, the page is 100% clean code. However, we also ensure that PPC tracking still works perfectly through the standard
wp_head() hookEssentially, what we're doing it creating a new landing-page-template.php using only
wp_head() and wp_footer() - these are both invisible adds that load header and footer script (so your sitewide tracking scripts etc.) without loading the WordPress theme header or footer. These two get bypassed completely and only the header and footer from our blocks get rendered.Roughly this
Code:
/* Template Name: AI Landing Page */
wp_head(); // This loads the scripts required in header
// No get_header();
the_content(); // This loads all our Gutenberg blocks
// No get_footer();
wp_footer(); // This loads GTM/PixelsThe autonomy achieved for a non-technical client is pretty decent.
