UPUTE ZA UREĐIVANJE WEB STRANICA SA DIVI BUILDEROM
Divi builder je alat koji nam olakšava uređivanje web stranica koje koriste jednu od najpoznatijih premium (komercijalnih) WordPress tema – DIVI.
Divi builder se može koristiti na dva načina: Standardni uređivač ( Back-end Builder ) koji se koristi u administraciji WordPressa te kao Vizualni uređivač ( Visual Builder ). Oba uređivača omogućavaju uređivanje istih elemenata web stranica. Jedina razlika je u izgledu sučelja. Standardni uređivač se nalazi u administraciji i najčešće se koristi za sitnije promjene od strane profesionalaca, zbog toga ćemo se u ovim uputama fokusirati na korištenje Vizualnog uređivača (Visual Builder).
Slika 1: Izgled Standardnog uređivača (Back-end Builder)
Vizualni uređivač nam omogućava da uređujemo sadržaj u korisničkom sučelju (front-end) web stranice. Ovo nam omogućava mnogo brže dizajniranje i promjene web stranice. Kada dodamo sadržaj ili promijenimo postavke dizajna, unutar vizualnog uređivača, sve promjene su odmah vidljive. Možemo jednostavno kliknuti na željeni sadržaj i početi dodavati ili mijenjati sadržaj. Možemo označiti željeni tekst i promijeniti font ili stil. Svaka unijeta promjena odmah je vidljiva na web stranici.
Slika 2: Uređivanje web stranice sa Vizualnim uređivačem
Uključivanje Vizualnog uređivača
Da bi mogli koristiti Vizualni uređivač moramo pristupiti web stranici kao administrator i u nadzornoj ploči administracije kliknuti na gumb Use Visual Builder, ili kliknuti na Posjeti web stranicu i kada dođemo na stranicu koju želimo mijenjati kliknemo na Enable Visual Builder u gornjoj alatnoj traci.
Ukoliko ne vidimo gumb Enable Visual Builder znači da isti moramo najprije uključiti unutar Divi > Theme options > Builder.
Slika 3: Uključivanje Vizualnog uređivača
Rad sa Vizualnim uređivačem
Izuzetna popularnost Divi teme leži upravo u njezinom Vizualnom uređivaču (Visual Builder) koji omogućava jednostavno kreiranje i uređivanje web stranica kombiniranjem različitih elemenata.
Vizualni uređivač koristi tri glavna elementa: Sekcije (Sections), Redove (Rows) i Module (Modules). Njihovim kombiniranjem možemo napravite nebrojene kombinacije izgleda web stranica. Sekcije su najveće i one obuhvaćaju jedan ili više redova. Unutar redova se nalaze moduli. Ovakvu strukturu slijede sve stranice izrađene sa Divi vizualnim uređivačem.
Sekcije (Sections)
Sekcije su najveći gradivni blokovi koji se koriste za dizajniranje izgleda web stranica. One se koriste za kreiranje velikih grupa sadržaja i sekcije su prva stvar koja se dodaje na našu web stranicu koju izrađujemo sa Divi temom.
Postoje tri vrste sekcija: Standardne (Regular), Specijalne (Specialty) i Pune širine (Full Width). Standardne sekcije sastoje se od redova i kolona, dok se Sekcije pune širine sastoje od Modula koji zauzimaju cijelu širinu ekrana. Specijalne sekcije omogućavaju kreiranje dizajna koji obuhvaćaju različite oblike bočnih traka (Sidebar).
Redovi (Rows)
Redovi se postavljaju unutar sekcija i u svaku sekciju možemo postaviti bilo koji broj redova. Svaki red može imati različit broj stupaca i pojedini stupci mogu biti širi od drugih. Kada odaberemo željenu strukturu stupaca unutar Reda, u svaki stupac možemo umetati Module.
Moduli (Modules)
Moduli su elementi sadržaja od kojih se sastoji pojedina web stranica. Svaki od raspoloživih modula u Divi temi može se uklopiti u stupac bilo koje širine i svi moduli su prilagodljivi različitim širinama zaslona (responsive).
Izrada nove stranice sa Divi Builderom
Za izradu stranice koriste se tri vrste prethodno objašnjenih gradivnih blokova – sekcije, redovi i moduli.
Slika 4: Gradivni elementi Divi uređivača – Sekcije, Redovi i Moduli
Dodavanje sekcije
Prije nego što možemo dodati bilo kakav sadržaj na našu novu stranicu, moramo dodati sekciju. Sekcije se dodaju tako da kliknemo na plavi (+) kružić. Kada sa pokazivačem miša prijeđemo preko već postojeće sekcije na stranici, ispod te sekcije pojavit će se plavi (+) kružić. Kada kliknemo na na njega dodat ćemo novu sekciju ispod sekcije koju smo označili pokazivačem miša.
Ako smo započeli sa izradom potpuno nove stranice prva sekcija će se dodati automatski.
Slika 5: dodavanje nove sekcije
Dodavanje reda
After you have added your first section you can start adding rows of columns inside of it. A section can house any number of rows, and you can mix and match rows of varying column types to create a variety of layouts.
To add a row, click the green (+) button inside of any empty section, or click the green (+) button that appears when hovering over any current row to add a new row below it. Once you have clicked the green (+) button you will be greeted with a list of column types. Choose your desired column and then you are ready to add your first module.
Kada smo dodali prvu sekciju na našu novu stranicu, možemo unutar nje početi dodavati redove sa stupcima. Sekcija može sadržavati različit broj redova i unutar nje možemo dodati redove sa različitim brojem i strukturom stupaca.
Redovi se dodaju tako da kliknemo na zeleni (+) kružić unutar bilo koje prazne sekcije, ili kliknemo na zeleni (+) kružić koji se pojavljuje kada pokazivačem miša prelazimo preko postojeć reda. Novi red će se dodati ispod postojećeg reda.
Kada smo kliknuli na zeleni (+) kružić pojavit će se prozor sa raspoloživim strukturama redova. Odaberemo željenu strukturu kolona unutar reda i možemo početi dodavati module.
Slika 6: Odabir strukture novog reda za unos u sekciju
Dodavanje modula
Moduli se mogu dodavati unutar redova i svaki red može sadržavati bilo koji broj modula. Moduli se elementi sa sadržajem unutar naše stranice i Divi dolazi sa preko 40 različitih elemenata koje možemo koristiti u izradi web stranica.
Možemo koristiti osnovne module kao što su tekst (Text), slike (Images) i gumbi (Buttons), ili naprednije module kao što su slideri (Sliders), galerije portfelja (Portfolio Galleries) i elemenata web shopa (Shops).
Moduli se dodaju tako da kliknemo crni (+) kružić koji se nalazi unutar svakog praznog stupca ili na crni (+) kružić koji se pojavi kada pokazivačem miša prijeđemo preko već postojećeg modula. Modul se dodaje ispod postojećeg modula.
Kada kliknemo na crni (+) kružić pojavit će se prozor sa raspoloživim modulima. Odabirom željenog modula isti će biti dodan na stranicu i pojavit će se okvir sa postavkama. Unutar okvira sa postavkama uređujemo sadržaj i izgled odabranog modula.
Slika 7: Odabir i dodavanje Modula u željeni stupac
Konfiguriranje i prilagodba sekcija, redova i modula
Svaka sekcija, red i modul se mogu prilagoditi na različite načine. Postavkama svakog elementa (sekcije, reda ili modula) može se pristupiti na način da se klikne na ikonu kotačića (pogledajte na slici ispod) koja se pojavi kada pokazivačem miša prolazimo preko određenog elementa na stranici.
Slika 8: Uređivanje Modula
Klikom na ikonu kotačića odabranog elementa otvorit će se panel za uređivanje tog elementa. Svaki okvir za uređivanje ima tri izborničke stavke: Sadržaj (Content), Dizajn (Design) i Napredno (Advanced). Unutar svake izborničke stavke lako i brzo se dodaje ili mijenja veći broj postavki odabranog elementa.
Stavka Sadržaj (Content) omogućava dodavanje sadržaja kao što su tekst, slike, video, linkovi i administrativne oznake.
Stavka Dizajn (Design) omogućava nam uređivanje mogućih postavki dizajna za odabrani element. U zavisnosti od toga koji element uređujemo možemo jednostavno odabrati vrstu, boju i veličinu fontova, razmake, stilove gumba i puno drugih postavki.
Stavka Napredno (Advanced) omogućava nam između ostalog i postavljanje vidljivosti pojedinog elementa na različitim veličinama ekrana (npr. možemo odabrati da se neki element vidi na računalu i tabletu a da se ne prikazuje na mobitelu).
Nakon završetka uređivanja bilo kojeg elementa (sekcije, reda ili modula) potrebno je spremiti napravljene promjene.
Spremanje stranice i pristup postavkama stranice
Za pristup općim postavkama stranice moramo kliknuti na ljubičastu ikonu sa tri točkice na dnu ekrana. Tako ćemo otvoriti alatnu traku sa različitim opcijama.
Postavke stranice ćemo otvoriti tako da kliknemo na ikonu kotačića. Ovdje možemo prilagoditi postavke stranice kao što su boza pozadine ili boja teksta. Na desnoj strani se nalazi gumb za spremanje unijetih promjena na stranici, a na lijevoj stranici možemo vidjeti izgled stranice na različitim veličinama ekrana.
Slika 9: Postavke web stranice u Visual Builderu
Kreiranje stranice korištenjem unaprijed pripremljenih predložaka
Kod izrade nove stranice možemo se koristiti i prethodno izrađenim stranicama, tako da kod izrade nove stranice koristimo izgled i sadržaj prethodno izrađene stranice.
U gornjem izborniku odaberemo Novo > Stranica (ako smo u admininstraciji odaberemo Stranice > Dodaj novu) i dodamo naslov web stranice.
U administraciji web stranice kliknemo na gumb Use The Divi Builder > Load From Library > Load Layout > Your Existing Pages i odaberemo stranicu čiju strukturu i sadržaj želimo iskoristiti za kreiranje nove stranice. Klikom na odabranu stranicu njezin sadržaj će se unijeti u novu stranicu i sada nam predstoji njezino uređivanje i objavljivanje.
Nepotredne module, redove ili sekcije jednostavno izbrišemo tako da kliknemo na oznaku X ako uređujemo u administraciji, ili na ikonicu koša za smeće ako koristimo Vizualni uređivač (Visual Builder).
Slika 10: Korištenje predloška prethodno izrađene stranice za izradu nove stranice
Kod svakog koristenja Vizualnog uređivača da bi zapamtili unijete promjene potrebno je kliknuti na zeleni gumb Save (u desnom donjem kutu ekrana) i kliknuti na Exit Visual Builder u gornjoj izborničkoj traci. Ako slučajno zaboravimo prethodno spremiti promjene, kada kliknemo na Exit Visual Builder pojavit će nam se okvir koji će nas obavijestiti o tome. Ako želimo spremiti promjene kliknemo na Save & Exit, a ukoliko ne želimo spremiti kliknemo na Discard & Exit.
