# Create a high-converting barbershop landing page using Respira and Divi > Full screencast walkthrough: build an AI-driven HTML landing page for a local barbershop and convert it into a Divi 5 native WordPress page in minutes using Respira. Source: https://www.respira.press/demo/divi5 --- Full screencast — every step on this page is in the video. [Watch on YouTube ↗](https://www.youtube.com/watch?v=cYI3lT1s8Io) ## Create a High-Converting Barbershop Landing Page Using Respira and Divi Craft a dynamic, conversion-focused landing page for your local barbershop using the Respira plugin and Divi modules on WordPress. Follow this step-by-step guide, reflecting the process demonstrated in the video, to transform a basic HTML template into a modern, engaging web presence. ### Introduction A compelling landing page sets your business apart and drives real customer engagement. This walkthrough leverages AI-powered tools to build a site that's not only visually stunning but also easy to manage and optimized for results. Let's get started creating a landing page designed to grow your barbershop's clientele in Brașov, infusing it with style and smooth user experience. 1. **Open a chat** with your AI assistant in **Conductor**. ![A new Conductor chat ready to receive instructions for building the barbershop landing page.](https://usercontent.us.prod.clueso.io/12c54f8e-e471-43bd-a01f-a0114b1ff87b/72ef0274-1806-42c6-aac7-257abed65d43/1605e263-3e4e-4297-bb4b-21206fe9bc77/images/fae33c24-73b3-47ad-8a0c-fd9dbf86d652.png) 2. **State your project goal** — create a clean, high-converting landing page for a local barbershop in Brașov, inspired by Mad Men aesthetics. ![The opening project brief typed into Conductor describing the Mad Men inspired barbershop landing page.](https://usercontent.us.prod.clueso.io/12c54f8e-e471-43bd-a01f-a0114b1ff87b/72ef0274-1806-42c6-aac7-257abed65d43/1605e263-3e4e-4297-bb4b-21206fe9bc77/images/ed9445b7-24b4-4f07-b183-8391662ab12f.png) 3. **Define your main call-to-action**: encourage visitors to book with one of the barbers. ![The brief expanded to call out a single primary CTA: book a session with a specific barber.](https://usercontent.us.prod.clueso.io/12c54f8e-e471-43bd-a01f-a0114b1ff87b/72ef0274-1806-42c6-aac7-257abed65d43/1605e263-3e4e-4297-bb4b-21206fe9bc77/images/fb21493b-167c-487d-9700-f3945dc697d5.png) 4. **Specify design criteria**: modern, minimal look, engaging micro-interactions, and smooth page animations. ![The design constraints listed in plain English: modern, minimal, with micro-interactions and animations.](https://usercontent.us.prod.clueso.io/12c54f8e-e471-43bd-a01f-a0114b1ff87b/72ef0274-1806-42c6-aac7-257abed65d43/1605e263-3e4e-4297-bb4b-21206fe9bc77/images/1e897ffb-5ca7-4829-a1cf-d843aa671183.png) 5. **Highlight the need** for fast load times and SEO optimization. ![Performance and SEO requirements appended to the prompt.](https://usercontent.us.prod.clueso.io/12c54f8e-e471-43bd-a01f-a0114b1ff87b/72ef0274-1806-42c6-aac7-257abed65d43/1605e263-3e4e-4297-bb4b-21206fe9bc77/images/2bc5880a-0cf5-43bf-89fb-09439bfcbeea.png) 6. **Begin with your base HTML template.** This gets rebuilt using WordPress tools. ![The first AI-generated HTML rendering of the landing page, opened locally in the browser.](https://usercontent.us.prod.clueso.io/12c54f8e-e471-43bd-a01f-a0114b1ff87b/72ef0274-1806-42c6-aac7-257abed65d43/1605e263-3e4e-4297-bb4b-21206fe9bc77/images/747cc8f8-6f30-4e84-903d-d74c9defd9bd.png) 7. **Launch your WordPress site**, built on the Respira infrastructure for AI-driven automation. ![The target WordPress site running with the Respira plugin active.](https://usercontent.us.prod.clueso.io/12c54f8e-e471-43bd-a01f-a0114b1ff87b/72ef0274-1806-42c6-aac7-257abed65d43/1605e263-3e4e-4297-bb4b-21206fe9bc77/images/19a83c15-88fa-4aa7-a7bd-bb3d51d6b458.png) 8. **Confirm the Respira plugin** is installed and ready. ![The Respira plugin showing as activated in WordPress admin.](https://usercontent.us.prod.clueso.io/12c54f8e-e471-43bd-a01f-a0114b1ff87b/72ef0274-1806-42c6-aac7-257abed65d43/1605e263-3e4e-4297-bb4b-21206fe9bc77/images/d329ba33-d638-4638-830f-adf6f9eda122.png) 9. **Open the plugin interface** to double-check everything is set up correctly. ![The Respira plugin interface inside WordPress admin, confirming the API key and connected MCP.](https://usercontent.us.prod.clueso.io/12c54f8e-e471-43bd-a01f-a0114b1ff87b/72ef0274-1806-42c6-aac7-257abed65d43/1605e263-3e4e-4297-bb4b-21206fe9bc77/images/838a5943-2d69-4135-a120-026090d5ac64.png) 10. In **Conductor**, connect directly to your WordPress site to start the integration process. ![Conductor connecting to the WordPress site through the Respira MCP server.](https://usercontent.us.prod.clueso.io/12c54f8e-e471-43bd-a01f-a0114b1ff87b/72ef0274-1806-42c6-aac7-257abed65d43/1605e263-3e4e-4297-bb4b-21206fe9bc77/images/c4231dd6-ab06-4c58-a9c7-d7019442b523.png) --- ### Reviewing previous attempts 1. **Look back at earlier experiments**, such as using a Figma template for page creation. ![A previous attempt that started from a Figma template, shown for comparison.](https://usercontent.us.prod.clueso.io/12c54f8e-e471-43bd-a01f-a0114b1ff87b/72ef0274-1806-42c6-aac7-257abed65d43/1605e263-3e4e-4297-bb4b-21206fe9bc77/images/4786beda-8010-4295-a163-06a047ec0db6.png) --- ### Gathering community ideas & using Respira 1. **Engage with local businesses and barbers** to collect stories and insights for authentic content. ![Notes from real conversations with local Brașov barbers used as source material for the page copy.](https://usercontent.us.prod.clueso.io/12c54f8e-e471-43bd-a01f-a0114b1ff87b/72ef0274-1806-42c6-aac7-257abed65d43/1605e263-3e4e-4297-bb4b-21206fe9bc77/images/7bb04f0c-6aaf-4e7e-bac8-205381539a42.png) 2. **Transform these real-life discussions** into landing page copy that resonates with your audience. ![Copy drafts based on the conversations, ready to drop into the page sections.](https://usercontent.us.prod.clueso.io/12c54f8e-e471-43bd-a01f-a0114b1ff87b/72ef0274-1806-42c6-aac7-257abed65d43/1605e263-3e4e-4297-bb4b-21206fe9bc77/images/ab768674-44ab-4ee3-a79a-63a9a3f1efe9.png) 3. **Use Respira** to turn the HTML into a fully functional WordPress site, putting control in the hands of the business owner. ![Respira mid-conversion, mapping each HTML section to native Divi modules.](https://usercontent.us.prod.clueso.io/12c54f8e-e471-43bd-a01f-a0114b1ff87b/72ef0274-1806-42c6-aac7-257abed65d43/1605e263-3e4e-4297-bb4b-21206fe9bc77/images/cef8a7cf-92e1-405c-820b-7d83e733ac92.png) 4. **Make sure the site is easy** for owners to edit and update independently. ![The Divi Builder UI showing the converted page with every section addressable as a native module.](https://usercontent.us.prod.clueso.io/12c54f8e-e471-43bd-a01f-a0114b1ff87b/72ef0274-1806-42c6-aac7-257abed65d43/1605e263-3e4e-4297-bb4b-21206fe9bc77/images/575dc26e-28e4-46b1-ad51-d3ddd590487a.png) 5. **Provide flexible hosting options** — share your site freely and encourage community support and collaboration. ![Hosting and sharing options surfaced inside the Respira plugin.](https://usercontent.us.prod.clueso.io/12c54f8e-e471-43bd-a01f-a0114b1ff87b/72ef0274-1806-42c6-aac7-257abed65d43/1605e263-3e4e-4297-bb4b-21206fe9bc77/images/13c838bf-ab42-4d8e-93c3-be912e39312f.png) ![A finished version of the page being shared publicly for community feedback.](https://usercontent.us.prod.clueso.io/12c54f8e-e471-43bd-a01f-a0114b1ff87b/72ef0274-1806-42c6-aac7-257abed65d43/1605e263-3e4e-4297-bb4b-21206fe9bc77/images/84fb572e-6f62-4aa4-b0fa-3bf4462fa0f6.png) --- ### Testing the latest Respira plugin design 1. **Preview the redesigned plugin interface** for a more streamlined setup experience. ![The new Respira plugin setup screen with a cleaner left-hand nav.](https://usercontent.us.prod.clueso.io/12c54f8e-e471-43bd-a01f-a0114b1ff87b/72ef0274-1806-42c6-aac7-257abed65d43/1605e263-3e4e-4297-bb4b-21206fe9bc77/images/80c296f9-c5ec-4c09-b262-56307cba9edb.png) ![A close-up on the new connect-your-site flow inside the redesigned plugin.](https://usercontent.us.prod.clueso.io/12c54f8e-e471-43bd-a01f-a0114b1ff87b/72ef0274-1806-42c6-aac7-257abed65d43/1605e263-3e4e-4297-bb4b-21206fe9bc77/images/3d63fb53-c3c8-4630-b6dd-f07dc10f93ef.png) 2. **Explore the enhanced activity dashboard**, which transparently displays all your project's data in one place. ![The new activity dashboard showing every recent edit, snapshot, and approval.](https://usercontent.us.prod.clueso.io/12c54f8e-e471-43bd-a01f-a0114b1ff87b/72ef0274-1806-42c6-aac7-257abed65d43/1605e263-3e4e-4297-bb4b-21206fe9bc77/images/5d7bde02-9c67-413d-883c-87951c6e4331.png) 3. **Learn about upcoming features**, such as new light and classic WordPress themes that enhance style and flexibility. ![A teaser of upcoming light and classic WordPress themes Respira will ship next.](https://usercontent.us.prod.clueso.io/12c54f8e-e471-43bd-a01f-a0114b1ff87b/72ef0274-1806-42c6-aac7-257abed65d43/1605e263-3e4e-4297-bb4b-21206fe9bc77/images/9bdf6dee-9679-4664-89ca-8e6b55e25803.png) --- ### Refining prompts and building the landing page 1. **Find prompt suggestions** within the plugin to spark ideas and save time when generating your page content. ![Prompt suggestion library inside the Respira plugin, organized by intent.](https://usercontent.us.prod.clueso.io/12c54f8e-e471-43bd-a01f-a0114b1ff87b/72ef0274-1806-42c6-aac7-257abed65d43/1605e263-3e4e-4297-bb4b-21206fe9bc77/images/20d3b5a6-f399-4388-bfd5-cc4cedb69bf6.png) ![A specific landing-page prompt template selected from the suggestion library.](https://usercontent.us.prod.clueso.io/12c54f8e-e471-43bd-a01f-a0114b1ff87b/72ef0274-1806-42c6-aac7-257abed65d43/1605e263-3e4e-4297-bb4b-21206fe9bc77/images/bbfa9ac6-e494-4e0c-8fba-9c15da54cb8b.png) 2. **Download the improved HTML**, neatly organized and ready for Respira integration. ![The polished HTML file downloaded from Claude, ready for the Conductor handoff.](https://usercontent.us.prod.clueso.io/12c54f8e-e471-43bd-a01f-a0114b1ff87b/72ef0274-1806-42c6-aac7-257abed65d43/1605e263-3e4e-4297-bb4b-21206fe9bc77/images/dd86e24d-0d57-4d76-8e16-aec446cebd3b.png) ![The downloaded HTML rendered locally, with hero, services, and booking sections clean and properly spaced.](https://usercontent.us.prod.clueso.io/12c54f8e-e471-43bd-a01f-a0114b1ff87b/72ef0274-1806-42c6-aac7-257abed65d43/1605e263-3e4e-4297-bb4b-21206fe9bc77/images/6836f0ca-18b6-435c-867e-deb53aba618c.png) --- ### Building with Conductor and Respira 1. **Open Conductor**, which connects to Claude Code, ChatGPT, and any AI service you prefer. 2. **Load your HTML from Claude chat**, then issue a direct prompt: *"Build this HTML template as a native Divi page using Respira MCP. Use Divi modules only, match the design, and keep everything optimized for both desktop and mobile."* 3. **Review as the AI analyzes** your HTML, picks the right modules, and injects content into the live site. 4. **Adjust your prompts** to preserve original styling and interactions, resolving issues such as background layouts and forms for a perfect match. 5. **Examine the finished Divi page** and its structure. The result of this exact walkthrough is live at [mihai.love/barber/](https://mihai.love/barber/). 6. **Identify each Divi module**, images, text, contact forms, mapped from the original template. 7. **Switch to wireframe view** for a clear look at the underlying layout. 8. **Confirm Divi modules are used throughout**, guaranteeing straightforward editing and long-term flexibility. 9. **Check for automatic import** of micro-interactions and page animations, all handled by the builder. ### Conclusion With Respira and Divi, transforming an HTML template into a fully editable, conversion-centric WordPress landing page is quick and efficient. Create high-quality, future-proof sites for local businesses, focus on clear prompts, automation, and empowering business owners to control their online presence with ease. The full result of this walkthrough is published at [mihai.love/barber/](https://mihai.love/barber/), a real Divi 5 native WordPress page generated end-to-end with Respira. **Try it yourself.** Sign up for the [Respira free trial](https://www.respira.press/signup), point it at any WordPress site running Divi 5, and have Claude or your IDE of choice push your next HTML landing page straight into the Visual Builder as native modules. [#divi 5](https://www.respira.press/blog?q=divi%205)[#html-to-divi](https://www.respira.press/blog?q=html-to-divi)[#landing page](https://www.respira.press/blog?q=landing%20page)[#tutorial](https://www.respira.press/blog?q=tutorial)[#demo](https://www.respira.press/blog?q=demo)[#conductor](https://www.respira.press/blog?q=conductor)[#claude](https://www.respira.press/blog?q=claude) Found this useful? Share it. ## Join the *conversation* 0 comments · Respira account #### Sign in with your Respira account Comments are tied to your Respira login, the same account you use for the dashboard and plugin. No third-party sign-in, no scraping. [Sign in](https://www.respira.press/login?next=https%3A%2F%2Fwww.respira.press%2Fdemo%2Fdivi5%23comments) [Create an account](https://www.respira.press/signup?next=https%3A%2F%2Fwww.respira.press%2Fdemo%2Fdivi5%23comments) No comments yet. Be the first to weigh in. ### You're not the only one *talking* to WordPress. The Respira community is where agency owners debug Divi migrations at 11pm, where vibe coders swap prompts that actually ship, and where the roadmap gets written out loud. *Breathe with us.* Lines of code pushed 30,399,493 Live from the ecosystem · updates as the agent ships WordPress sites connected 3,699 Real sites, run by the people in these rooms Find us wherever you already are [ Slack Async threads, release-day huddles, and the #show-your-work channel that never sleeps. Join ](https://go.respira.cafe/slack) [ Discord Live voice on release days, screenshare debugging, and the vibe-coder corner that's always buzzing. Join ](https://go.respira.cafe/respira-discord) [ Reddit Questions, answers and build logs in the open, where the thread is still there months later. Join ](https://www.reddit.com/r/RespiraforWordPress/) [ Facebook group Agency owners and site owners comparing notes on running AI against real WordPress sites. Join ](https://www.facebook.com/groups/1447068940850273/) [ GitHub Discussions Long-form Q&A, bug reports, feature requests, and the public roadmap. Open ](https://go.respira.cafe/github-discussions) [ ! Founder notes Letters from Mihai on what shipped, what broke and what is next. Every one is archived. Read ](https://www.respira.press/newsletter) See What AI Says LLM-ready prompts about Respira MCP + WebMCP What would you like to know? Ask your favorite AI Opens in a new tab. These prompts are designed to teach LLMs what Respira can do. Question copied. Paste it in Gemini