UPUTE ZA UREĐIVANJE WEB STRANICA SA DIVI BUILDEROM (za WordPress web stranice izrađene sa temom DIVI) – 1. dio

UPUTE ZA UREĐIVANJE WEB STRANICA SA DIVI BUILDEROM (za WordPress web stranice izrađene sa temom DIVI) – 1. dio

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).

Izrada web stranica sa Divi builderom - 1

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

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

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

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

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

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

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

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

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

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.

Dizajn moderne poslovne web stranice

Dizajn moderne poslovne web stranice

Web stranica promovira vaš posao 24 sata dnevno i to svaki dan u godini. Vaša konkurencija također ne spava i nastoji biti što efikasnija sa svojim web stranicama. Nastojanje da budemo brži i bolji od konkurencije tjera nas da izradimo web stranicu koja će uspješno raditi za nas.

Ukoliko planirate izraditi poslovnu web stranicu ili web shopu, ili imate web stranicu koju je ‘pregazilo vrijeme’, nadamo se da će vam naši savjeti pomoći kod odabira dizajna vaše poslovne web stranice. (više…)

Varijabilni proizvodi u web shopu

Varijabilni proizvodi u web shopu

Dodavanje varijabilnog proizvoda

Varijabilni proizvodi su bez sumnje najsloženija vrsta proizvoda u web shopu. Oni nam omogućavaju formiranje varijacija osnovnog proizvoda na način da svaka varijacija može imati različit SKU, cijenu i zalihe i sliku.

Kao primjer možemo navesti proizvod kao što je majica, koju možemo nuditi u različitim bojama i veličinama. (više…)

Virtualni, vanjski i proizvodi za download u web shopu

Virtualni, vanjski i proizvodi za download u web shopu

Dodavanje virtualnih proizvoda

Na vrhu sekcije Podaci o proizvodu možemo označiti polje Virtualno, ako smo odabrali Jednostavni proizvod. Kod Varijabilnih proizvoda, ova opcija se pojavljuje kod svake varijacije proizvoda.

Ako odaberemo ovu opciju nestat će sva polja koja se odnose na Dostavu, na svim relevantnim stranicama. (više…)