Kako da napravim “hero” sekciju na početnoj strani sa pozadinskom slikom?

Hero sekcija sa pozadinskom slikom u WordPress-u (klasični pristup preko Gutenberg blokova)

Hero sekcija na početnoj strani predstavlja prominentan deo sa pozadinskom slikom (background image), tekstom i pozivom na akciju. U klasičnom WordPress pristupu koristite Gutenberg blokove, konkretno Cover blok, koji je deo core WordPress-a. Evo koraka:

  1. Pripremite sliku: Odaberite visokokvalitetnu pozadinsku sliku (preporučena veličina: 1920x1080px ili veća, optimizovana za web – koristite alate poput TinyPNG). Uploadujte je u Media biblioteka.
  2. Uredite početnu stranu: Idite u Stranice > Sve stranice, izaberite početnu stranu i kliknite Uredi (ili Uredi sa Gutenberg-om).
  3. Dodajte Cover blok: Kliknite na + ikonu, potražite Cover blok (u kategoriji Design). Ovaj blok omogućava punu širinu i pozadinsku sliku.
  4. Postavite background image: U podešavanjima bloka (desni panel), pod Background odaberite Image i uploadujte ili izaberite sliku iz biblioteke. Podešavajte pozicioniranje (npr. Center/Center) i fixed background za parallax efekat.
  5. Dodajte sadržaj: Unutar Cover bloka ubacite Heading blok za naslov, Paragraph za tekst i Buttons blok za CTA. Centrirajte sadržaj podešavanjima bloka (Alignment: Center).
  6. Prilagodite stil: U desnom panelu podešavajte boju overlay-a (za čitljivost teksta preko slike), minimalnu visinu (npr. 500px) i responsive opcije za mobilne uređaje.
  7. Sačuvajte i objavite: Kliknite Ažuriraj. Testirajte na frontend-u.

Napomena: Za naprednije opcije preporučujemo premium teme i pluginove dostupne uz WP Host WordPress hosting (preko 350 uključenih, poput Astra Pro, Ocean WP ili Elementor Pro), koji nude gotove hero templejte i vizuelne editore. Ako koristite temu bez podrške, dodajte custom CSS u Izgled > Prilagođavanje > Dodatni CSS:

.hero-section {
    background-image: url('vaša-slika.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

Hosting je ključna karika u performansama – WP Host nudi najbrži WordPress hosting u Srbiji sa LiteSpeed serverima i NVMe SSD za optimalno učitavanje slika.

← Nazad na: Wordpress