A landing oldal címsora mondja el, kinek és miben segítesz; a CTA-gomb pedig nevezze meg a következő lépést. Az alábbi mintában átírhatod mindkettőt, és megnézheted, hogyan mutatnak együtt. Ez helyi vizuális előnézet: nem bizonyítja, melyik szöveg hoz több ügyfelet.
Mikor hasznos ez a gyakorlat?
Ha a céges oldal tetején csak annyi áll, hogy „Üdvözöljük honlapunkon”, az olvasónak még keresnie kell a szolgáltatást. Egy konkrétabb változat például: „WordPress-weboldal szolgáltató vállalkozásoknak”. A gomb ehhez lehet „Ajánlatot kérek”, amennyiben valóban az ajánlatkérő oldalra vezet. A példák kiindulópontok; a saját szolgáltatásodhoz kell igazítanod őket.
Először egyetlen látogatói célt válassz: ajánlatkérés, időpontfoglalás vagy termék megtekintése. Írj hozzá rövid címsort és egyértelmű gombfeliratot. A bemutatóval a szövegek együtt olvashatóságát ellenőrizheted, mielőtt fejlesztőnek adod a módosítást.
Hogyan kérd ezt a v0-tól?
A v0 hivatalos gyorsindítója bemutatja a felület létrehozását és szerkesztését. Egy konkrét feladatleírás így hangozhat:
Készíts mobilon is olvasható szolgáltatási nyitóblokkot. A célcsoport kisvállalkozó, a cél ajánlatkérés. Legyen egy címsor, egy rövid magyarázat és egy Ajánlatot kérek gomb. A gomb az /ajanlatkeres/ oldalra vezessen. Ne találj ki ügyfélszámot, referenciát vagy konverziós eredményt. A címsor legyen könnyen módosítható.
A v0 full-stack alkalmazásokhoz is kínál lehetőségeket; a jelen feladathoz azonban nincs szükség adatbázisra vagy külső API-ra. Az alábbi önálló példa a böngészős működést mutatja be, nem egy v0-projekt exportja.
Próbáld ki itt a címsort és a gombot
Írd át a két mezőt, majd kattints az Előnézet frissítése gombra. A mintagomb kipróbálható, de nem küld ajánlatkérést. Az Alaphelyzet visszaállítja a példaszövegeket.
A teljes másolható HTML, CSS és JavaScript
Mentsd a következő kódot index.html néven, majd nyisd meg a böngészőben. Nincs szükség csomagtelepítésre. A teljes példa egy kódblokkban van; a CSS és a JavaScript is benne szerepel.
<!DOCTYPE html>
<html lang="hu"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Címsor- és CTA-előnézet</title><style>*{box-sizing:border-box}body{margin:0;padding:20px;background:#202632;color:#e6eef8;font:16px/1.5 system-ui,sans-serif}main{max-width:650px;margin:auto}h1{font-size:1.5rem}label{display:block;margin-top:12px;font-weight:600}input{width:100%;padding:12px;border:1px solid #8a9bb5;border-radius:8px;background:#151b25;color:#e6eef8;font:inherit}button{padding:12px 18px;margin:16px 8px 0 0;background:#39a0ff;color:#082038;border:0;border-radius:8px;font:inherit;font-weight:700;cursor:pointer}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:3px}.preview{margin-top:24px;padding:24px;border:1px solid #8a9bb5;border-radius:12px;background:#2a3441}.preview h2{overflow-wrap:anywhere}.preview a{display:inline-block;padding:12px 18px;border-radius:999px;background:#39a0ff;color:#082038;text-decoration:none;font-weight:700;overflow-wrap:anywhere}.hint{color:#b9c8dc;font-size:14px}#error{color:#ffb5b5;min-height:24px}#feedback{min-height:24px}</style></head><body><main><h1>Címsor és gomb: nézd meg együtt</h1><p class="hint">Helyi szövegelőnézet. Nem mér látogatókat vagy konverziót, és nem küld adatot.</p><form id="previewForm" novalidate><label for="headlineInput">Címsor (legfeljebb 80 karakter)</label><input id="headlineInput" maxlength="80" value="Weboldal, amely érthetően bemutatja a szolgáltatásod"><label for="ctaInput">Gombfelirat (legfeljebb 35 karakter)</label><input id="ctaInput" maxlength="35" value="Ajánlatot kérek"><button id="updatePreview" type="button">Előnézet frissítése</button><button type="reset">Alaphelyzet</button><p id="error" role="alert"></p></form><section class="preview" aria-label="Landing oldal előnézete"><h2 id="headlinePreview">Weboldal, amely érthetően bemutatja a szolgáltatásod</h2><p>Írd le egy mondatban, kinek segítesz és milyen feladatot oldasz meg.</p><a id="ctaPreview" href="#demo">Ajánlatot kérek</a><p id="feedback" role="status" aria-live="polite"></p></section></main><script>const form=document.getElementById('previewForm');const headline=document.getElementById('headlineInput');const cta=document.getElementById('ctaInput');const output=document.getElementById('headlinePreview');const link=document.getElementById('ctaPreview');const error=document.getElementById('error');const feedback=document.getElementById('feedback');function updatePreview(){const heading=headline.value.trim();const label=cta.value.trim();if(!heading||!label){error.textContent='Adj meg címsort és gombfeliratot is.';return false;}error.textContent='';output.textContent=heading;link.textContent=label;feedback.textContent='';return true;}document.getElementById('updatePreview').addEventListener('click',()=>{if(updatePreview())feedback.textContent='Az előnézet frissült.';});form.addEventListener('keydown',event=>{if(event.key==='Enter'){event.preventDefault();if(updatePreview())feedback.textContent='Az előnézet frissült.';}});form.addEventListener('reset',()=>{error.textContent='';feedback.textContent='';output.textContent=headline.defaultValue;link.textContent=cta.defaultValue;});link.addEventListener('click',event=>{event.preventDefault();feedback.textContent='A mintagomb működik. Éles oldalon itt nyílna meg az ajánlatkérés.';});</script></body></html>Három ellenőrzés, amit elvégezhetsz
- Szövegcsere: írd a címsorhoz, hogy „Gyors ajánlatkérés weboldalra”, a gombhoz pedig, hogy „Egyeztessünk”. Frissítés után pontosan ezeknek kell megjelenniük az előnézetben.
- Üres mező: töröld a címsort, majd frissíts. A rendszer magyar hibaüzenetet mutat, és megtartja az utolsó érvényes előnézetet.
- Visszaállítás és kattintás: válaszd az Alaphelyzet gombot, majd kattints az előnézeti ajánlatkérő gombra. A példaszövegek visszaállnak, a mintagomb pedig jelzi a kattintást, navigáció nélkül.
Mit kell még ellenőrizni az éles oldalon?
A hosszabb címsort mobilon is nézd meg. Billentyűzettel érd el a gombot, és ellenőrizd, felismerhető-e a fókusz. A valódi CTA a megfelelő űrlapra vezessen, az űrlap pedig jelezze a sikeres beküldést. Ha az oldaladhoz összetett ajánlatkalkulátor vagy foglalás tartozik, a kapcsolódó feldolgozást is tesztelni kell.
Saját kattintgatásból nem következik, hogy a látogatók melyik változatot választanák. Valódi A/B teszthez külön megtervezett látogatói mérés, következetes változatkiosztás és megfelelő minta szükséges. Ez a demó az elrendezés és a működés ellenőrzését segíti.
Ha a mintából működő céges oldalt szeretnél
A következő lépés egy pontos brief: milyen szolgáltatást mutatsz be, kit szeretnél elérni, és mit tegyen a látogató? Ebből tervezhető meg a weboldal felépítése, a tartalom és az ajánlatkérő folyamat. Ha meglévő WordPress-oldalt alakítanál át, nézd meg a WordPress weboldal készítés szolgáltatásunkat.
Hivatalos dokumentáció
A weboldalon megjelenő szöveges és vizuális tartalmak előállításához mesterséges intelligenciát (AI) használunk.