Hogyan készíts weboldalt a WebVidrával?
Ez az útmutató végigvezet az első weboldal elkészítésén — a mappakiválasztástól egészen a publikálásig. Nincs szükség programozói tudásra.
🔄 A teljes munkafolyamat – lépésről lépésre
📂 1. lépés – Projekt mappa létrehozása és megnyitása
A WebVidra fájlokban tárolja a weboldaladat. Minden weboldalhoz egy saját, üres mappát érdemes létrehozni a számítógépeden.
- Hozz létre egy üres mappát bárhol a gépeden (pl.
Dokumentumok/sajat-weboldal).
- Kattints a „Projekt Mappa Megnyitása" gombra.
- Tallózd ki a létrehozott mappát és nyisd meg.
- A program automatikusan létrehozza a szükséges fájlrendszert a mappában.
💡 Legutóbbi projektek: Az indítóképernyőn megjelennek a korábban megnyitott projektek — egyetlen kattintással visszatérhetsz bármelyikhez.
⚙️ 2. lépés – Alapadatok és stílus beállítása
Miután megnyílt a szerkesztő, állítsd be a weboldal alapadatait:
- Kattints a bal oldali sáv alján a „⚙ Weboldal Beállítások" gombra.
- A Globális fülön add meg: weboldal neve, URL-je, rövid leírása, nyelve, lábléc szövege.
- A Stílusok fülön válassz egy beépített sablon-témát (egy kattintás, bármikor módosítható).
- Zárd be a beállításokat.
📄 3. lépés – Oldalak megtervezése
A weboldal több oldalból állhat (főoldal, Rólam, Kapcsolat, Portfólió, stb.).
- Az
index főoldal alapból létezik — kezd ezzel.
- Új oldalt a felső eszköztár + gombjával hozhatsz létre.
- Az oldalak sorrendjét a ↑↓ gombokkal változtathatod — ez lesz a navigációs menü sorrendje a weboldalon.
- Az 👁 gombbal egy oldalt elrejthetsz a menüből (a link él, csak nem jelenik meg a navigációban).
💡 Az index oldal mindig a weboldal főoldala. A neve nem változtatható, de a megjelenített cím igen.
🎨 4. lépés – Tartalom szerkesztése (blokkok)
Minden oldal blokkokból épül fel. Blokkokat a jobb oldali panelből adhatsz hozzá.
| Blokk típus | Mire való |
|---|
| Hero / Borító | Nagy, figyelemfelkeltő kép szöveggel — tökéletes a főoldalra |
| Szövegdoboz | Szöveg, bekezdések, formázott tartalom |
| Teljes Kép | Egy képet az oldal teljes szélességére |
| Kép + Szöveg | Kétoszlopos elrendezés: kép és szöveg egymás mellett |
| Képrács (Photo Grid) | Fotók mozaik-galériában, lightbox előnézettel |
| Projekt Galéria | Kattintható csempék, amik részletes aloldalakra visznek |
| Videó | Videó lejátszó (.mp4, .webm fájlhoz) |
| Gomb | Kattintható gomb egyedi szöveggel és URL-lel |
| Egyedi HTML | YouTube beágyazás, Google térkép, bármilyen HTML kód |
Hogyan kell szerkeszteni:
- Hozzáadás: Kattints a jobb oldali blokk-gombra, vagy húzd az előnézetre.
- Kijelölés / szerkesztés: Kattints a blokkra az előnézetben — a bal panelben megjelennek a beállításai.
- Szöveg szerkesztése: Szöveg blokknál duplán kattintva közvetlenül szerkeszthetsz.
- Sorrend változtatása: Fogd meg és húzd fel/le a blokkot az előnézeti vásznon.
- Törlés: Jelöld ki a blokkot, majd a bal panel tetején a piros „Blokk Törlése" gomb.
Visszavonható: Ctrl+Z
💾 5. lépés – Mentés
A Mentés (Ctrl+S) a projekt összes adatát a projekt.json fájlba írja.
⚠️ Fontos: Mentés ≠ weboldal fájlok frissítése. A HTML fájlok csak a GENERÁLÁS gomb hatására jönnek létre/frissülnek.
💡 Mentsd el a munkádat rendszeresen — különösen mielőtt kilépnél vagy nagyobb változást csinálnál.
⚡ 6. lépés – Generálás és helyi előnézet
Nyomd meg a felső sávban a kék GENERÁLÁS gombot.
Ekkor a program a projekt mappájában létrehozza/frissíti az összes weboldal fájlt:
index.html, [oldalnév].html — az összes oldalstyle.css — stíluslapsitemap.xml — keresőoptimalizálás404.html — hibaoldal- Kategória almappák a projekt aloldalakkal
Generálás után a program automatikusan megnyit egy helyi előnézetet a böngésződben — így ellenőrizheted az eredményt mielőtt publikálod.
💡 Ha ismeretlen fájlokat talál a mappában (amit te tettél oda kézzel), megkérdezi mit tegyen velük — törölheted vagy kivételként megtarthatod.
🌐 7. lépés – Publikálás az interneten (Deploy)
Nyomd meg a Deploy gombot a felső sávban. A program feltölti a generált fájlokat közvetlenül az internetre.
Támogatott platformok:
- Netlify – Ingyenes. Regisztrálj a netlify.com-on, szerezz Access Tokent.
- Bunny.net – CDN alapú, villámgyors tárhely. Add meg a Storage Zone nevet és API kulcsot.
A Deploy ablakban a „❓ Hogyan állítsam be?" gombra kattintva részletes lépéseket találsz a hozzáférési adatok megszerzéséhez.
💡 A hozzáférési adataid helybe mentődnek — nem kell minden alkalommal újra megadnod.
🔁 A napi munka ciklusa
Miután egyszer felállítottad a projektet, a folyamatos munkád így néz ki:
✏️
Szerkesztés
blokkok módosítása
→
→
→
→
📁 Mi jön létre a projekt mappában?
A WebVidra az alábbi fájlokat és mappákat hozza létre automatikusan:
| Fájl / Mappa | Tartalom | Fontos? |
|---|
projekt.json | A projekt összes adata (oldalak, blokkok, beállítások) | ⭐ Igen — ez a projekt „agya" |
uploads/ | A feltöltött képek másolatai | ⭐ Igen — ne töröld! |
smal/ | Automatikusan optimalizált (kisebb) képek reszponzív betöltéshez | Kezeli a program |
index.html | A főoldal HTML fájlja (GENERÁLÁS után) | Újragenerálható |
style.css | A weboldal stíluslapja (GENERÁLÁS után) | Újragenerálható |
[oldalnév].html | Minden oldal saját HTML fájlja | Újragenerálható |
[kategória]/ | Projekt aloldalak almappái | Újragenerálható |
💡 Biztonsági mentés: Csak a projekt.json fájlt és az uploads/ mappát kell elmenteni — a weboldal bármikor újragenerálható ezekből.
⚠️ Ne nevezd át és ne töröld kézzel a képfájlokat az uploads/ vagy smal/ mappában — a projekt.json ezekre hivatkozik, és a projekt elromolhat.
🖼️ Portfólió / Projekt aloldalak készítése
Hogyan hozok létre kattintható csempéket projekt aloldalakkal?
- Nyisd meg a „⚙ Weboldal Beállítások" → „Projects" fület.
- Hozz létre egy kategóriát (pl. „munkáim", „fotóim").
- A kategórián belül adj hozzá projekteket: cím, borítókép, leírás, tartalom blokkok (szöveg, képrács, videó).
- A kívánt oldalon adj hozzá egy „Projekt Galéria" blokkot a jobb oldali panelből.
- A blokk tulajdonságainál válaszd ki, melyik kategória projektjeit mutassa.
- Nyomd meg a GENERÁLÁS gombot — a program létrehozza a csempéket és az összes aloldalt.
💡 Minden projekt aloldalán automatikusan megjelenik a cím, borítókép, leírás és az összes tartalom blokk — mindez a projektadatokból generálódik.
⌨️ Hasznos billentyűparancsok
| Billentyű | Funkció |
|---|
| Ctrl+S | Projekt mentése |
| Ctrl+Z | Visszavonás (Undo) |
| Ctrl+Y | Újra (Redo) |
| Ctrl++ | A program felületének nagyítása (GUI zoom in) |
| Ctrl+− | A program felületének kicsinyítése (GUI zoom out) |
| Ctrl+0 | Visszaállítás alapméretbe (100%) |
| Esc | Nyitott ablak/párbeszéd bezárása |
💡 Ha a program felülete túl nagy vagy túl kicsi a képernyődön, a Ctrl+ és Ctrl− billentyűkkel bármikor beállíthatod a kényelmes nézetet. A Ctrl+0 visszaállítja az alapértelmezett méretet.
💻 A projekt áthelyezése másik gépre
Hogyan viszem át a projektet másik számítógépre?
- Másold át a teljes projekt mappát az új gépre (USB, felhő, stb.).
- Nyisd meg a WebVidrát az új gépen.
- Kattints a „Projekt Mappa Megnyitása" gombra és tallózz a másolt mappára.
- A program felismeri a
projekt.json-t és betölti a projektet.
A generált HTML fájlok (index.html, style.css, stb.) nem szükségesek az átvitelhez — ezek bármikor újragenerálhatók.