WEBEKI

Weboldal-készítés kódolás nélkül, ingyen. Rakd össze az oldalt kész blokkokból, kattints bármelyikre, és írd át.

A WEBEKI a drága, fizetős blokkos szerkesztők (pl. Mobirise) ingyenes, nyílt forráskódú alternatívája. Nem kell telepíteni, nem kell regisztrálni, nincs előfizetés. Az elkészült oldal egyetlen index.html fájl, ami a tiéd, és bármilyen tárhelyre feltölthető.

• 24 kész blokk: menüsor mobil menüvel, nyitó kép (hero), szolgáltatások, kép + szöveg, számok, szöveg, GYIK, galéria, videó (YouTube/MP4), árazás, vélemények, csapat, felhívás (CTA), kapcsolat űrlappal és térképpel, lábléc, elválasztó, egyedi HTML – modern kiegészítők: bento rács, előtte–utána képcsúszka, lebegő kapcsolat gomb (WhatsApp, Messenger, hívás), süti-tájékoztató (GDPR) – és zenészeknek: zenelejátszó, „Hallgasd meg” streaming gombok, videóklipek.
• Kattints és állítsd be: minden blokk szövege, képe, színe, oszlopszáma, igazítása és térköze a jobb oldali panelen. A szöveget közvetlenül az oldalon is átírhatod.
• Asztali, tablet és mobil nézet: a tartalom mindenhol közös, a megjelenés (pl. igazítás, oszlopok, térköz, elrejtés) nézetenként is külön állítható.
• Animáció blokkonként: be/ki kapcsolható, választható típus (beúszás 4 irányból, előtűnés, nagyítás, billenés), időtartam, késleltetés, lépcsőzetes megjelenés.
• Ikonok: emoji vagy rajzolt ikon választóból; közösségi ikonok (Facebook, Instagram, YouTube, TikTok, X, LinkedIn, WhatsApp, Messenger, Telegram, Pinterest, GitHub) a menüben, a kapcsolat blokkban és a láblécben.
• Gombstílusok: teli, körvonalas, halvány, árnyékos vagy színátmenetes; szögletes, lekerekített vagy kapszula forma; 3 méret.
• Export ZIP-be vagy egy HTML fájlba: a ZIP-ben a feltöltött képek külön images mappába kerülnek.
• 🎲 Random téma: egy kattintás, és új, összeillő színek, betűtípusok és elrendezés, a tartalom változatlan.
• Sablonok: termék landing, cégbemutató, portfólió, zenész / zenekar, vagy üres oldal.
• Magyar felület, visszavonás, automatikus mentés a böngészőbe.

Kipróbálás online

👉 ekidio.github.io/webeki – telepítés nélkül, a böngészőben.

A munkád abba a böngészőbe mentődik, amiben szerkesztesz. Másik gépre a Mentés gombbal készített projektfájllal viheted át.

📱 WEBEKI MOBIL – telefonra

👉 ekidio.github.io/webeki/mobil

Ugyanaz a szerkesztő, érintésre tervezve: a vászon kitölti a képernyőt, a blokkok és a beállítások alulról felhúzható panelekben vannak, lent egy hüvelykujjal elérhető gombsor (＋ Blokk · ⚙ Oldal · 🎲 Random · ⇩ Export), a ritkább funkciók a ⋯ menüben. Koppints egy blokkra a beállításaihoz, vagy a szövegre az átírásához; a kijelölt blokk sarkában ↑ ↓ mozgatás, másolás, törlés. A projektfájl (Mentés) a két változat között átvihető. Tipp: a böngésző „Hozzáadás a kezdőképernyőhöz” menüjével appként is elindítható.

Letöltés (offline használat)

1. Töltsd le a legfrissebb WEBEKI-x.y.zip fájlt a Releases oldalról.
2. Csomagold ki (dupla kattintás a ZIP-re).
3. Nyisd meg a mappában az index.html fájlt (dupla kattintás). Bármelyik modern böngészőben működik: Chrome, Safari, Firefox, Edge.

Szerver és internet sem kell hozzá. Kivétel: a Google betűtípusok és a mintaképek az internetről töltődnek be.

Használat

1. Blokk hozzáadása: húzd a bal oldali könyvtárból az oldalra, vagy kattints rá.

2. Beállítás: kattints egy blokkra, és jobb oldalt megjelenik minden beállítása. Üres területre kattintva az oldal beállításait látod: a 3 alapszín (fő szín, szöveg, háttér), betűtípus, lekerekítés, SEO, az oldal szerkezete.

3. Szöveg átírása: kattints közvetlenül a szövegre az oldalon.

4. Áthelyezés, törlés: a blokk jobb felső sarkában: ⠿ húzás, ↑ ↓, ⧉ duplikálás, ✕ törlés.

5. Közzététel: az Export gombbal két lehetőség közül választhatsz:

   • 📦 ZIP – mappa képekkel (ajánlott): index.html + a feltöltött képek külön images mappában. Kisebb, gyorsabban betöltődő oldal.
   • 📄 Egyetlen HTML fájl: minden egy index.html-ben, a képek is beágyazva.

   Töltsd fel bármilyen tárhelyre (saját tárhely, GitHub Pages, Netlify, Cloudflare Pages), és kész a weboldalad.

Asztali, tablet és mobil nézet

Fent válthatsz a három nézet között.

• A tartalom (szövegek, képek, linkek, listaelemek, blokkok hozzáadása, törlése, sorrendje) mindig minden nézetben közös.
• A megjelenés (igazítás, oszlopok, elrendezés, képarány, színek, térközök, magasság, elrejtés) nézetenként is állítható. Erre szolgál a kapcsoló (billentyű: L):
  • 🔗 Minden nézet: a változás mindhárom nézetben megjelenik.
  • 📌 Csak ez a nézet: csak az aktuális nézet változik, ezt narancs szín jelzi. Így lehet például asztalin balra, mobilon középre igazítani az ikonokat.
• A mezők mellett a D / T / M betű mutatja, melyik nézetben tér el az érték. A ↺ visszaállítja a közös értékre.
• Az exportált oldalon: mobil ≤ 600 px, tablet 601–1024 px, asztali 1024 px fölött.

Blokk háttér

Blokk → Megjelenés → Háttér típusa:

• Szín: egyszínű háttér.
• Színátmenet: két szín; az arány csúszkával állítod, hol vált át az egyik a másikba, a forgatással az irányát (0–360°). Lehet egyenes vagy kör alakú (középről kifelé). Üresen hagyott színnél a téma fő színéből számol.
• Kép: méret: kitölti a blokkot (vágással), szélességre illesztve, magasságra illesztve vagy eredeti méret. A vízszintes és függőleges pozíció csúszkával állítható, kérhető ismétlés (csempézés), rögzített kép (parallax) és fedőszín állítható erősséggel, hogy a szöveg olvasható maradjon.

Blokkok összekapcsolása (Apple-stílus)

Blokk → Megjelenés:

• Folytatja az előző blokk hátterét (Háttér rész): a blokk az előzővel egy közös hátteret kap, ami egyben fut végig rajtuk (színátmenet, kép is). Így több blokk egy felületnek látszik, de külön animálódnak, és görgetéskor kiderül, hogy több darabból áll. Több blokk is láncolható; a közös hátteret a csoport első blokkjában állítod.
• Határ a szomszéd blokkokkal:
  • Felső / alsó határvonal: hullám, sűrű hullámok, ferde, domború vagy homorú ív, csúcs, cikcakk. Magassága és tükrözése állítható. A színét magától a szomszéd blokkból veszi (felülírható).
  • Lágy átmenet az előző blokkból: a határ nem éles vonal, hanem az előző blokk színe állítható magasságú sávban olvad át ebbe.
  • Átlógás: a blokk tartalma felcsúszik az előző blokkba (pl. egy kép félig a nyitó képre lóg). Animációval együtt adja a rétegzett, „Apple-es” hatást.

Átlátszó menü a nyitókép fölött

Menüsor → Megjelenés → Átlátszó menü a nyitókép fölött: a következő blokk (pl. a hero) a menü alá csúszik, így a menü a nyitókép hátterén lebeg. Ha a menü „fent marad” (sticky), görgetés közben hátteret kap. Ennek színe, a szövegszín és az üveghatás (elmosott háttér) állítható. Tipp: sötét nyitóképnél a menü szövegszínét állítsd fehérre.

A menüsor hátterét nem lehet a következő blokkhoz kapcsolni („Folytatja az előző blokk hátterét”), erre az átlátszó menü való.

Gombok

Gombszín: Oldal beállítások → Színek → Gomb. Üresen hagyva a fő színt követi, a ↺ ide állítja vissza. Blokkonként is felülírható: blokk → Megjelenés → Gombok színe ebben a blokkban (csak a gombot tartalmazó blokkoknál: menüsor, nyitó kép, kép + szöveg, árazás, felhívás, kapcsolat). A gombfelirat színe (fehér vagy sötét) mindig magától igazodik, hogy olvasható maradjon.

Oldal beállítások → Gombok – az oldal összes gombjára egyszerre:

• Stílus: teli, körvonalas, halvány, árnyékos, színátmenetes
• Forma: az oldal lekerekítése szerint, szögletes, enyhén lekerekített, kapszula
• Méret: kicsi, közepes, nagy
• Nagybetűs felirat

A második („Tudj meg többet”) gombok mindig körvonalasak maradnak, hogy a fő gomb kiemelkedjen. A gombfelirat színe (fehér vagy sötét) mindig a fő színhez igazodik.

Lekerekítés

Oldal beállítások → Lekerekítés (0–30 px): a gombok és űrlapmezők sarka pontosan ennyi. A nagyobb felületek arányosan jobban kerekednek, hogy összhangban maradjanak: ikonhátterek és galériaképek ×1,4, kártyák, csapatfotók, videó és térkép ×1,6, a „Kép + szöveg” képe ×2. 0 = teljesen szögletes. A címkék (pl. „Népszerű”) mindig kapszula alakúak.

Modern blokkok

• Bento rács: az Apple-oldalakról ismert csempe-elrendezés. Csempénként választható méret (kicsi, széles, magas, nagy), kinézet (halvány kártya, fő színű, sötét, kép háttérrel), ikon, cím és szöveg. Tableten 2, mobilon 1 oszlopba rendeződik.
• Előtte–utána: két kép egymáson, húzható elválasztóval (egérrel és ujjal is). Állítható feliratok, kezdő pozíció, képarány.
• Lebegő kapcsolat gomb: a képernyő sarkában lebeg, görgetéskor is. Egy gombnál közvetlenül hív vagy üzenetet nyit, több gombnál egy kis menüt nyit: WhatsApp, Messenger, Telegram, telefonhívás, e-mail vagy bármilyen link. Kérhető buborék-szöveg (pl. „Írj nekünk!”) és lüktető kiemelés.
• Süti-tájékoztató (GDPR): az első látogatáskor alul megjelenő sáv vagy sarokdoboz, elfogadás / „csak a szükségesek” gombbal, az adatkezelési tájékoztató linkjével. A látogató döntését a böngésző megjegyzi, így többször nem jelenik meg. (Tájékoztat és rögzíti a döntést; a beágyazott tartalmakat – pl. YouTube, térkép – nem tiltja le.)

A lebegő gomb és a süti-sáv a szerkesztőben a blokk helyén látszik, a kész oldalon a képernyő sarkában / alján.

🎵 Zenészeknek

• Zenelejátszó: saját dalaid lejátszása az oldalon – borító, előadó, lejátszás/szünet, előző/következő, tekerés, számlista. A hangfájl megadható linkkel (pl. a saját tárhelyedről) vagy feltöltéssel (4 MB-ig; ZIP exportnál az audio mappába kerül).
• Hallgasd meg: nagy gombok a streaming oldalaidra (Spotify, Apple Music, YouTube Music, YouTube, Deezer, TIDAL, SoundCloud, Bandcamp, Amazon Music, Beatport) – a szolgáltatók saját színeivel, az oldal gombszínével vagy körvonalasan; listában vagy egy sorban.
• Videóklipek: YouTube (vagy MP4) klipek rácsban, előnézeti képpel; kattintásra az oldalon indulnak, így az oldal gyorsan betölt.
• Sablon: Új → Zenész / zenekar (átlátszó menü, nyitókép, lejátszó, streaming gombok, klipek, fotók, booking).
• A közösségi ikonok között is van Spotify, Apple Music, SoundCloud, Bandcamp, Deezer és TIDAL.

Animáció

Blokk → Megjelenés → Animáció: válaszd ki a típusát, és állítsd be az időtartamot, a késleltetést, illetve hogy az elemek egymás után (lépcsőzetesen) jelenjenek meg. A ▶ Lejátszás gombbal kipróbálhatod. Minden blokkra egyszerre: Oldal beállítások → Animáció minden blokkra. Az exportált oldalon az animáció akkor indul, amikor a blokk a képernyőre gördül; aki a gépén kikapcsolta az animációkat, annak nem mozog semmi.

Ikonok és közösségi oldalak

• A Szolgáltatások elemeinél a Választás… gombbal emoji vagy rajzolt ikon választható. A rajzolt ikon a fő színt veszi fel. Emojit be is írhatsz a mezőbe.
• A Menüsor, a Kapcsolat és a Lábléc blokkban a Közösségi oldalak listában add meg a profiljaid linkjét; az ikonok stílusa (csak ikon, kör, négyzet) állítható.

🎨 Random színek

Oldal beállítások → Színek → 🎨 Random színek: csak a színeket keveri újra (fő szín, szöveg, háttér, gomb, és a téma által adott szekció-árnyalatok). A betűtípus, a méretek, a gombstílus, az elrendezés és az animáció marad, a világos vagy sötét jelleg is. Tipp: nyomogasd a 🎲 Random témát, amíg egy stílus megtetszik, aztán a 🎨 Random színekkel keress hozzá színeket.

🎲 Random téma

A felső sávban (vagy az Oldal beállításokban) a Random téma gomb véletlen, de összeillő színeket, betűtípus-párt, lekerekítést, térközöket, váltakozó szekció hátteret, elrendezést és animációt választ. A szövegek és képek nem változnak. Nyomd meg többször, amíg tetszik; a Ctrl/⌘ + Z visszahozza az előzőt. A gombok szövegszíne (fehér vagy sötét) mindig a fő színhez igazodik, hogy olvasható maradjon.

Menüből ugrás egy szakaszra (horgony)

1. A cél blokk Horgony (ID) mezőjébe írd: rolunk (# nélkül; ha mégis beírod, a program kijavítja).
2. A menüpont Link mezőjébe: #rolunk. Legördülő listából is választhatod.

Ha egy ID kétszer szerepel, vagy a link nem létező ID-ra mutat, figyelmeztetés jelenik meg. A szerkesztőben a linkek szándékosan nem ugranak el, hogy a feliratot átírhasd. Kipróbálni Ctrl/⌘ + kattintással vagy az Előnézet gombbal lehet.

Mentés

• A munkád automatikusan mentődik a böngészőbe.
• A Mentés gomb egy .webeki.json projektfájlt ad, ezt a Megnyitás gombbal később (akár másik gépen is) visszatöltheted.

Billentyűk

Billentyű	Művelet
Ctrl/⌘ + Z	visszavonás
Ctrl/⌘ + Shift + Z	újra
Ctrl/⌘ + D	blokk duplikálása
Del	blokk törlése
Alt + ↑ / ↓	blokk mozgatása
Ctrl/⌘ + S	projekt mentése fájlba
L	megjelenés: minden nézet / csak ez a nézet
Esc	kijelölés megszüntetése

Fejlesztőknek

Sima HTML, CSS és JavaScript. Nincs build lépés, nincs függőség.

Fájl	Tartalom
index.html	a szerkesztő váza
css/editor.css	a szerkesztő felület stílusa
js/brand.js	a WEBEKI logó (az EKIDIO család stílusában: STEMEKI, VIDEKI, CHORDEKI) és az indító animáció
js/icons.js	rajzolt ikonok, közösségi ikonok, emoji készlet
js/blocks.js	blokk könyvtár: minden modul mezői, alapértékei, HTML-je, a generált oldal CSS-e (PAGE_CSS) és a sablonok
js/app.js	szerkesztő logika: húzás, kijelölés, paraméter panel, nézetek, visszavonás, mentés, export
mobil/	WEBEKI MOBIL: telefonos felület (saját HTML, mobile.css, mobile.js), a fenti közös motorral
make-release.sh	kiadás ZIP készítése

Új blokk készítése

A js/blocks.js-ben a BLOCKS objektumba vegyél fel egy új bejegyzést:

myBlock: {
  name: 'Saját blokk', cat: 'Tartalom', icon: '★', desc: 'Rövid leírás',
  fields: [ { k: 'title', t: 'text', l: 'Cím' } ],   // mezőtípusok: text, textarea, html, range, select, check, color, image, list
  defaults: { title: 'Helló' },
  render: (p, E) => `<div class="wk-in"><h2 class="wk-h2"${E('title')}>${esc(p.title)}</h2></div>`,
},

Az E('mezo') teszi a szöveget helyben szerkeszthetővé. A stílust a PAGE_CSS-be írd, .wk-myBlock osztállyal. A select, range és color típusú mezők (és az a: 1 jelölésűek) számítanak megjelenésnek, ezek nézetenként is állíthatók; minden más tartalom.

Kiadás

./make-release.sh

Elkészíti a dist/WEBEKI-<verzió>.zip fájlt (a verzió a js/app.js VERSION értéke), ezt kell a GitHub kiadáshoz csatolni. Az online verzió (GitHub Pages) minden main ágra feltöltés után magától frissül.

Licenc

A WEBEKI szerkesztő GNU GPL v3 licenc alatt áll.

Kiegészítő engedély (GPLv3 7. pont): a WEBEKI-vel készített, exportált weboldalak, a beléjük ágyazott HTML-lel és CSS-sel együtt, a készítőjük tulajdonát képezik, és bármilyen licenc alatt, korlátozás nélkül felhasználhatók. A GPL csak magára a szerkesztő programra vonatkozik.