Vodič · 6 min čitanja

Od ZIP-a do online u tri koraka.

Bez build alata, bez baze, bez CMS-a. Šablon je folder sa HTML, CSS, JavaScript fajlovima i slikama — ako znaš izmijeniti tekstualni fajl i uploadati folder, možeš ga isporučiti. Isti vodič dobijaš u svakom ZIP-u (UPUTSTVO.md).

01

Preuzmi i raspakuj

Nakon uplate dobiješ link za preuzimanje na mejl. Raspakuj ZIP bilo gdje na računaru.

Šta je unutra

Svaki šablon je u svom folderu, poredano po nišama. Kod pojedinačne kupovine dobiješ samo foldere koje si izabrao.

UPUTSTVO.md       vodič (BHS)
START-HERE.md     vodič (engleski)
LICENCA.txt       šta smiješ raditi
TEMPLATES.csv     spisak šablona
templates/
  restaurants-inns/
    weisses-lamm/
      index.html    naslovna
      zimmer.html   …ostale stranice
      assets/img/   sve fotografije
      CREDITS.md    izvori fotografija

Pogledaj ga

Dupli klik na index.html i sajt se otvori u pregledniku. Za puni doživljaj (video, WebGL efekti) koristi mali lokalni server — besplatnu Live Server ekstenziju u VS Code-u ili jednu komandu:

cd templates/restaurants-inns/weisses-lamm
python3 -m http.server 8000
# otvori http://localhost:8000
02

Promijeni tekst, logo, boje i slike

Otvori folder šablona u editoru koda — Visual Studio Code je besplatan. Find in Files (Ctrl/Cmd + Shift + F) pronađe svako mjesto gdje se pojavljuje naziv, telefon ili e-mail.

Naziv i logo

Pretraži demo naziv firme i zamijeni ga. Za logo kao sliku ubaci fajl u assets/img i u headeru pokaži na njega.

<img src="assets/img/logo.svg"
     alt="Naziv klijenta" height="40">

Boje i fontovi

Boje su CSS varijable na vrhu stylesheeta. Promijeniš ih jednom i cijeli sajt prati. Fontovi su jedan <link> u <head>.

:root {
  --accent: #b23a2e;   /* boja brenda */
  --ink: #1d1a16;
}

Tekst i SEO

Mijenjaš riječi između HTML tagova. Zatim ažuriraš <title>, meta opis, Open Graph tagove i canonical URL sa podacima i domenom klijenta.

<title>Klijent — usluga u gradu</title>
<meta name="description"
      content="Jedna jasna rečenica…">

Fotografije

Najlakše: snimi fotografiju klijenta pod potpuno istim imenom i prepiši staru u assets/img. Sličan format, oko 1600–2000 px širine, JPEG/WebP oko 80% (squoosh.app). Ažuriraj alt tekst.

Kontakt forma

Forme su samo front-end. Povežeš ih za par minuta — npr. Formspree (besplatan plan) ili Netlify Forms — i ukloniš demo handler ako ga šablon ima.

<form action="https://formspree.io/f/TVOJ_ID"
      method="POST">
03

Postavi online

Uploadaj sadržaj foldera šablona tako da index.html bude na vrhu sajta. Radi na svakom statičnom hostingu.

Netlify Drop — bez podešavanja

Otvori app.netlify.com/drop i prevuci folder šablona u prozor preglednika. Za par sekundi dobiješ živi link; domenu klijenta dodaš u postavkama sajta.

Vercel

Jednom instaliraš CLI, pa ga pokreneš u folderu šablona (framework „Other“, bez build komande).

npm i -g vercel
cd weisses-lamm
vercel

cPanel / klasični hosting

Otvori File Manager (ili FileZilla preko FTP-a) i uploadaj sve fajlove i foldere u public_html/ — ili folder domene. Uključi HTTPS.

Radi i na

GitHub Pages, Cloudflare Pages, S3 — bilo koji hosting koji servira statične fajlove.

Weißes Lamm
Rezultat: isti šablon, online na domeni klijenta. Lighthouse mobilno 72 za ovaj šablon, neizmijenjen.

04

Prije nego predaš klijentu

  • Naziv, logo i favicon zamijenjeni svuda (header, footer, naslovi, pravne stranice)
  • Svi demo kontakt podaci zamijenjeni — telefon, WhatsApp, e-mail, adresa, radno vrijeme, mreže, mapa
  • Tekst, cijene i usluge napisani za klijenta — bez izmišljenih recenzija
  • Fotografije zamijenjene gdje je moguće, alt tekstovi ažurirani, CREDITS.md ispoštovan
  • Kontakt / booking forme povezane i testirane pravom porukom
  • Pravne stranice napisane za državu klijenta
  • <title>, meta opis, Open Graph slika, canonical URL, sitemap.xml i robots.txt ažurirani
  • Testirano na telefonu, tabletu i desktopu; HTTPS uključen

Spreman za početak?

Uzmi sve šablone — 250 €Izaberi pojedinačno — 10 € po šablonu