Landingspagina met een 3D-kostenberekening voor één avond: ARCON-casestudy

In één avond heb ik een landingspagina gemaakt voor ARCON, een fabrikant van stalen hangars. De pagina is vormgegeven in de kenmerkende zwart-rode stijl van de klant, bevat interactieve 3D-modellen van de constructie, laag per laag, en een calculator die de kosten van de hangar in realtime berekent. De website is ontworpen met betaalde advertenties op Facebook en Google in gedachten, en het eerste scherm beantwoordt direct de vraag "hoeveel gaat het kosten?" – nog voordat je de manager belt. Ik heb de site gebouwd met 1001site AI – ik ben de componenten en de werking van de automatische prijsberekening aan het onderzoeken.

De uitdaging: een website voor betaalde advertenties, gebouwd in één avond.

ARCON bouwt kant-en-klare, frameloze, gebogen en gesloten hangars voor de agrarische sector, havens, logistieke complexen en industrieterreinen in heel Oekraïne. De klant had behoefte aan een tool voor koude acquisitie: iemand klikt op een advertentie, begrijpt binnen enkele seconden dat hij of zij met een betrouwbaar bedrijf te maken heeft en schat direct de prijs in of dient een aanvraag in. Een standaard visitekaartje met een beschrijving van de diensten biedt hiervoor geen oplossing.

Mijn startmateriaal bestond uit een prijslijst van het bedrijf – een kant-en-klaar merkboek met kleuren en een gestructureerde presentatie, maar zonder website voor reclame. Ik heb de toepassingsgebieden van dezelfde prijslijst overgezet naar de landingspagina met behulp van iconen: agrarische sector, havens en terminals, logistieke complexen, graan- en materieelopslag, productie, luchtvaart – het was meteen duidelijk op welke gebieden ik me met teksten moest richten en welke doelgroep ik met advertenties moest bereiken. Ik heb de landingspagina in één avond in elkaar gezet, klaar voor de lancering van de eerste campagne.

Hoe werd de huisstijl van de klant doorvertaald naar de landingspagina?

Ik heb de kleuren, het lettertype en de presentatiestructuur rechtstreeks overgenomen uit de prijslijst van ARCON: een zwarte achtergrond, witte tekst, rode accenten en een boog in het logo. Op deze manier herkennen bezoekers die de brochure of visitekaartjes van het bedrijf al hebben gezien, het merk in één oogopslag.

Ik gebruikte een eenvoudige donkere stijl uit de 1001site -catalogus als basis, en de exacte rode kleur van de klant werd daaroverheen toegepast door de AI-assistent van het account met een commando als "maak een donker thema met mijn rood". Het resultaat is dezelfde prijslijst, alleen nu in de vorm van pagina's, knoppen en een rekenmachine.

Waarom heeft een landingspagina interactieve 3D-modellen van een hangar nodig?

Een 3D-model van een hangar kan worden gedraaid en laag voor laag worden bekeken: de fundering, de dragende constructie, de verlichting en de ventilatie. Een foto van het voltooide gebouw biedt niet zo'n analyse, en dat is precies wat een onverschillige bezoeker zich afvraagt: "Wat koop ik nu eigenlijk, en waar is het van gemaakt?"

Onder elke laag heb ik een echte foto van de bouwplaats toegevoegd: dit bevestigt dat het 3D-diagram gebaseerd is op een echte ARCON-faciliteit.

Boven het lagenblok bevindt zich het hoofdscherm van de landingspagina met schakelaars voor 'Frameloos/Met frame' en '3D/Foto': bezoekers kunnen het ontwerptype kiezen en het model met hun muis roteren. Hiervoor is geen manager nodig.

Op hetzelfde scherm verschijnen vier referentiecijfers naast een 3D-model: meer dan 13 jaar ervaring in metaalconstructies, overspanningen van 12 tot 40 meter zonder kolommen, sneeuwbelasting tot 480 kg/m² en 36 maanden structurele garantie. Dit is dezelfde taal die gebruikt wordt om kopers te overtuigen in de prijslijst op papier, alleen nu in combinatie met een interactief model.

Hoe werkt de 3D-hangar kostenberekening?

De 3D-calculator op de ARCON-landingspagina past het model en de prijsklasse direct aan zodra de schuifregelaars voor breedte en lengte worden aangepast. De bezoeker selecteert het type hangar, de afmetingen en de accessoires, waarna het 3D-model en de geschatte kosten van elk onderdeel (frame, fundering, poorten, verlichting) live worden bijgewerkt, zonder dat de pagina opnieuw hoeft te worden geladen.

Vervolgens kunt u de details bekijken: kies een frameloos, koud of warm frame, voeg een fundering, industriële vloer, verlichting en ventilatie toe en zie wat de uiteindelijke prijsklasse is voor elk onderdeel afzonderlijk.

Het verschil met een gewone landingspagina zonder rekenmachine is direct zichtbaar:

Waarom werkt dit specifiek met Facebook en Google -advertenties?

Interactieve 3D-modellen zorgen ervoor dat bezoekers langer op de pagina blijven, en de prijscalculator lost prijsvraagstukken op voordat ze zich voordoen. Voor het reclamebudget vertaalt dit zich in een concrete meetwaarde: kosten per lead. Bezoekers besteden meer tijd aan het bekijken van de pagina, begrijpen de prijs beter en verlaten de pagina minder snel zonder contact op te nemen.

De landingspagina is ontworpen om te voldoen aan de strenge eisen van betaald verkeer: snelle laadtijden en responsiviteit beschermen het budget tegen ongewenste bounces, en een duidelijke structuur met een directe waardepropositie speelt binnen enkele seconden na het klikken in op de belangrijkste vraag van de doelgroep. De mogelijkheid om het 3D-model te roteren verhoogt de tijd die bezoekers op de site doorbrengen – een direct signaal van betrokkenheid voor advertentiealgoritmes. De calculator wekt vertrouwen: bezoekers "bouwen" een hangar op hun eigen afmetingen, begrijpen de prijslogica en zullen eerder hun contactgegevens verstrekken dan wanneer ze te horen krijgen: "Bel me voor de prijs."

Wat ontvangt een manager wanneer een bezoeker een verzoek indient?

Volgens de auteur van het bericht worden aanvragen vanaf de ARCON-landingspagina direct na het invullen van het formulier via Telegram naar managers verzonden. Voor de 1001site landingspagina wordt deze verzending geconfigureerd via het "Contacten"-blok met een messenger-knop of via dezelfde aangepaste integratie die ook de calculator aandrijft. 1001site heeft de verzending van notificaties naar Telegram als een kant-en-klare functie voor bestellingen gedocumenteerd – in dit geval werd deze toegepast op de aanvraag vanaf de landingspagina. De aanvraagstroom is als volgt gestructureerd:

1. De bezoeker configureert de hangar in de 3D-calculator en ziet de prijsrange.
2. Klik op “Commerciële aanbieding afwijzen” of “Rozrahunok voor 30 hvilins”.
3. Vult de contactgegevens in op het formulier op de landingspagina.
4. Een verzoek met hangarparameters wordt direct via Telegram naar de manager verzonden.
5. De manager belt terug met een exacte prijsopgave terwijl de belangstelling nog groot is.

Een gedetailleerde uitleg van de volledige opbouw van de landingspagina is te vinden in de video van de auteur, die hieronder op de pagina is ingesloten.

Waaruit bestaat deze landingspagina technisch gezien?

Dit is de "landingsmodus" 1001site: een homepageblok, aangepaste pagina's en een aanmeldingsformulier, zonder winkelwagen of advertentie-inzending. De 3D-modellen en de rekenmachine zijn widgets van derden die via het "aangepaste HTML"-blok worden ingevoegd: in de "landingsmodus" verschijnen ze in de algemene lijst met blokken, samen met de hero-pagina, de galerij en het formulier. De builder zelf implementeert deze 3D-functionaliteit niet voor u, maar biedt alleen een kant-en-klare plek om ze in te voegen.

De landingspagina wordt gehost op een eigen domein, arcon.in.ua, met een eigen SSL-certificaat dat door 1001site zelf wordt uitgegeven en verlengd. U kunt de tekst, de cijfers in het gedeelte met de voordelen of een nieuw hangartype bewerken met behulp van de AI-assistent van het dashboard, zonder dat u voor elke kleine wijziging contact hoeft op te nemen met de ontwikkelaar.

Wat zijn de kosten en hoe snel wordt zo'n landingspagina gebouwd?

Een standaard landingspagina op 1001site wordt door een AI-agent binnen 2-7 minuten gebouwd na betaling voor het "All Inclusive"-abonnement van €45 per maand. De eerste maand kost €25 met een maandelijkse promotiecode. Er is geen proefperiode. Het integreren van een 3D-calculator van een derde partij met behulp van het "Custom HTML"-blok en het aanpassen van de stijl aan de exacte merkkleur vereist echter handmatig werk bovenop de builder: het kan niet met één klik in een pop-up worden gemaakt.

Het "Turnkey"-pakket is geschikt voor deze mate van maatwerk – een eenmalige vergoeding van € 1.650. De volledige website wordt voor de klant gebouwd, van stijl en tekst tot domein en Telegram integratie, inclusief 12 maanden hosting. Voor wie al een eigen ontwikkelaar in dienst heeft, is het "All Inclusive"-pakket voldoende – de widget wordt dan ingevoegd met hetzelfde "Custom HTML"-blok.

Wie zou er baat hebben bij een landingspagina met een 3D-calculator, behalve iemand die hangars verkoopt?

Dit format lost een specifiek probleem op: de prijs van het product wordt berekend op basis van de parameters van het specifieke object, en de website moet irrelevante aanvragen filteren nog voordat een manager wordt gecontacteerd. Dit is niet alleen relevant voor hangars – kassen, zwembaden, balkonbeglazing, meubels en keukens op maat, poorten en hekken passen allemaal in hetzelfde model.

Als de productprijs voor iedereen hetzelfde is en de selectie gebaseerd is op foto's en beschrijvingen, is een calculator overbodig – een standaard landingspagina met een aanvraagformulier volstaat. Een vergelijkbaar voorbeeld is hoe het merk NordHarvest in één avond een landingspagina voor een nieuw product creëerde: ook zij hadden een deadline en betaald verkeer, maar de productprijs was vast en in plaats van een calculator maakte de landingspagina zelf van de productselectie een commercieel aanbod.

Ik wil hieraan toevoegen dat ik tijdens het project persoonlijk contact heb gehad met het ARCON-team en hen van harte kan aanbevelen als hangarbouwer.

Bronnen

• Bericht van het "Business with AI"-kanaal: https://t.me/promtvibeadd/457
• ARCON-landingspagina: https://arcon.in.ua/
• Video over het maken van een landingspagina: https://youtu.be/uOOGNCFzeyM