Ingyenes websablonok és reszponzív HTML-sablonok letöltése

🛠️ Mi a különbség a "div" és az "r-c" közt?

A hagyományos "div" és a modern "r-c" sablonok közül világhálón jelen lévő weboldalak hány százaléka használja a modern „r-c” (Responsive Columns) struktúrát?

🛠️ Rövid válasz

A rövid válasz az, hogy a mai modern weboldalak több mint 85-90%-a valamilyen "div" reszponzív, oszlop- és rácsalapú (Responsive Columns / Grid) kódolásra épül. Ez a technológia vált a globális iparági szabvánnyá, ami mögött komoly okok állnak:

• Globális dominancia (85-90%): A legnépszerűbb modern CSS keretrendszerek (mint a Bootstrap vagy a Tailwind) és a világ weboldalainak több mint 43%-át kiszolgáló WordPress sablonjai mind rugalmas, oszlopalapú logikát használnak a háttérben.
• Hagyományos DIV struktúrák (10-15%): A klasszikus, fix szélességű DIV elrendezéseket ma már szinte csak a 10-15 éve nem frissített, régebbi weboldalak vagy speciális, belső adminisztrációs rendszerek használják.

Miért éri meg váltani?

Az R-C (Responsive Columns) struktúra használatával a weboldalad nemcsak teljesen mobilbaráttá válik, de lényegesen kevesebb forráskódot igényel, és akár 35%-kal gyorsabb betöltési sebességet produkál a hagyományos megoldásokhoz képest. Mivel a megszokott, hosszú osztálynevekkel telezsúfolt <div> struktúrák helyett tiszta, egyedi HTML-tageket (mint az <r-c> vagy a <c1-2>) használ, ezzel bekerülhetsz a világ azon 1%-ába, akik valóban csúcsminőségű kódot írnak. Bővebb leírást a reszponzív oszlopokról itt találsz, ahol egy letölthető (.ZIP) fájlt is elérhetsz (a weboldal alján) több előre elkészített websablon példával, amelyekből azonnal készíthetsz lenyűgöző elrendezéseket egyéni R-C HTML-címkékkel: Matthew James Taylor webfejlesztő oldala.

🛠️ Útmutató a websablon testreszabásához

Ez a dokumentum lépésről lépésre bemutatja, hogyan szabhatod testre a letöltött ingyenes websablont, hogyan cserélheted ki a képeket, mire valók az egyes oldalak, valamint tartalmazza a letöltésre vonatkozó ingyenes használati szabályzatot is (legalább alapfokú kódolási ismereteket feltételezve).

1. Hogyan módosítsd a kódot?

A sablonfájlok (HTML, CSS, JS) módosításához a számítógépeken gyárilag beépített Jegyzettömb (Notepad) helyett kifejezetten javasolt a teljesen ingyenes Notepad++ szövegszerkesztő program használata.

Miért jobb a Notepad++?

• Színkódolás: Külön színnel emeli ki a tageket, szövegeket és a linkeket, így azonnal átláthatóvá válik a kód, és sokkal nehezebb elrontani.
• Sorozatszámok: Minden sornak mutatja a számát, így könnyű megtalálni a módosítani kívánt részeket.
• Auto-kiegészítés: Segít gépelés közben, így elkerülhetők az elírások.

Mit és hogyan írj át?

1. Nyisd meg a kiválasztott .html fájlt a Notepad++ programmal.
2. A kódok között keresd meg a fekete betűvel írt szövegeket (ezek a tényleges tartalom).
3. Írd át a szövegeket a saját céged vagy projekted adataira.
4. Ha linket szeretnél módosítani, keresd meg a href="#" részeket, és a # jel helyére illeszd be a saját hivatkozásodat (pl. "https sajatoldal .hu").
5. Mentéshez nyomd meg a CTRL + S billentyűkombinációt (vagy: bal felső sarok "Fájl" – "Mentés").

2. Hogyan cserélheted ki a képeket a sajátjaidra?

A sablonban található mintaképeket nagyon egyszerűen lecserélheted a saját fotóidra vagy grafikáidra:

1. Készítsd el a saját képeidet. A gyors betöltődés érdekében használd a modern .webp vagy az általános .jpg és .png formátumokat (egyébként bármilyen formátum lehet).
2. Másold be az új képeket a sablon mappáján belüli img (vagy képeket tartalmazó) mappába.
3. Keresd meg a HTML kódban az <img> taget.
4. Az src="..." attribútumban írd át az elérési utat az új képed nevére. (Például: <img src="img/faq.webp"> helyett <img src="img/sajat-kepem.webp">).

3. A websablon csomagokban található 5 – 10 weboldal rövid leírása és használata

A letölthető csomagok közül némelyik 5 oldalas, 8 oldalas és van 10 oldalas, ami közös bennük, hogy mindegyik weboldal-struktúrát tartalmaz. Íme, melyik oldal mire való:

• index.html (Főoldal): A weboldalad kirakata. Itt kell elhelyezni a legfontosabb üzenetet, a vállalkozásod fő előnyeit és a legfontosabb szolgáltatások összefoglalóját. Minden más előtt ezt az oldalt nyitja meg a böngésző egyből.
• szolgaltatas.html (Szolgáltatások): Ezen az oldalon részletesen bemutathatod, hogy pontosan mivel foglalkozol, milyen csomagjaid vagy áraid vannak.
• referenciak.html (Referenciák / Portfólió): Itt mutathatod be a korábbi munkáidat, sikersztorijaidat vagy az ügyfeleid pozitív visszajelzéseit.
• faq.html (Gyakori Kérdések): Összegyűjtheted a felmerülő leggyakoribb kérdéseket és az azokra adott válaszokat, amivel időt spórolsz a vevőszerzés során.
• web-contact.html (Kapcsolat): Itt található az elérhetőséged (e-mail, telefonszám, cím), egy térkép, valamint az üzenetküldő űrlap.
• cookie.html (Süti tájékoztató): A jogi megfelelőség miatt szükséges oldal, amely leírja, hogy a weboldal milyen sütiket (cookie-kat) használ a látogatók böngészőjében.
• szabalyzat.html (Adatkezelési tájékoztató / ÁSZF): Kötelező jogi nyilatkozat, amely garantálja a látogatók adatainak biztonságos és törvényes kezelését (GDPR).
• impressum.html (Impresszum): A weboldal tulajdonosának hivatalos céges vagy egyéni vállalkozói adatait (székhely, adószám, cégjegyzékszám, tárhelyszolgáltató) tartalmazó kötelező oldal.
• sitemap.html (Oldaltérkép): A weboldal összes aloldalának listája linkekkel. Segíti a látogatók navigációját és javítja a Google keresőoptimalizálást (SEO).
• 404.html (Hibaoldal): Ez az oldal jelenik meg automatikusan, ha a látogató elgépel egy linket, vagy olyan oldalra téved, ami nem létezik. Tartalmaz egy gombot, amivel visszatérhet a főoldalra.

⚖️ 4. Ingyenes Letöltési és Használati Szabályzat

A websablon letöltésével és használatával kifejezetten elfogadod az alábbi feltételeket:

• Szabadon módosítható: A weboldal szöveges tartalmát, színeit, elrendezését, képeit és kódját teljesen szabadon megváltoztathatod, saját vagy ügyfeleid céljára korlátozás nélkül felhasználhatod.
• A készítői link megőrzése kötelező: Mivel a sablon teljesen ingyenesen áll a rendelkezésedre, a weboldal láblécében (footer) található, a regen.hu készítőjére mutató hivatkozást / forrásmegjelölést szigorúan tilos eltávolítani vagy láthatatlanná tenni!
• Nincs technikai segítségnyújtás: A sablon ingyenes jellege miatt a készítő semmilyen technikai támogatást, segítséget, egyedi módosítást vagy garanciát nem vállal a kódhoz. A testreszabás és a beállítás a letöltő feladata és felelőssége.

⚖️ Licenc röviden

Megengedett: A websablonok személyes és üzleti használatra is teljesen ingyenesek, testre szabható a sablon, és ha tetszik, megosztható másokkal a „regen.hu” márkanév alatt.

Nem megengedett: Tilos a láblécből a szerzői jogra hivatkozó linket eltávolítani (regen.hu), a websablont eladni, értékesíteni, bérbe adni haszonszerzés céljából.

Nevezd meg! - Így add tovább! 3.0 Unported (CC BY-SA 3.0): Ezt a websablont ingyen, szabadon, díjmentesen bármely személy letöltheti akár személyes használatra akár üzleti célra korlátozás nélkül, beleértve a korlátozás nélküli használati jogokat.

🛠️ AZONBAN:

Másolni, módosítani, terjeszteni, továbblicencelni az alábbi feltételekkel lehet:

A fenti szerzői jogi nyilatkozatot és az alábbi angol nyelvű értesítést fel kell tüntetni a websablon minden példányában, a HTML <head>...</head> része közé. (A letöltött websablon tartalmazza). Ha csak saját használatra van a websablon, a -html- "head.../head" részből törölhető.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Magyar fordítás: A WEBSABLON „OLYAN-AMILYEN” ALAPON KERÜL FORGALOMBA, MINDEN SZÜKSÉGES VAGY ELŐÍRT GARANCIA NÉLKÜL ÉS KÖTELEZETTSÉGVÁLLALÁS VAGY TÁMOGATÁS NÉLKÜL HASZNÁLHATÓ. A HASZNÁLAT SORÁN BEKÖVETKEZETT KÁROKÉRT A FELHASZNÁLÓ A FELELŐS, SEMMILYEN ESETBEN A SZERZÕ ÉS JOGTULAJDONOS NEM FELELÕS SEMMILYEN KÁRÉRT, SÉRÜLÉSÉRT VAGY EGYÉB ADATVESZTESÉGÉRT, AKÁR JOGOS AKÁR JOGELLENES FELHASZNÁLÁS ESETÉN, ILLETVE HA EGYÉB TEVÉKENYSÉGBÕL KELETKEZETT A KÁR VAGY AZZAL KAPCSOLATOS A WEBSABLON HASZNÁLATA.

Megjegyzés

A websablonok csak saját felelősségre alakíthatók át, és a benne lévő kódok csak saját felelősségre változtathatók meg. Az ebből eredő hibáért vagy a helytelen használatból eredő egyéb kárért a felhasználó vagy a hibát okozó személy a felelős.