Divi Tema i Divi Bulder – kako uraditi podešavanja

Divi je sigurno jedan od najpopularnijih alata (page builder-a) za kreiranje WordPress web sajtova i zbog toga zaslužuje da vam ga detaljnije predstavimo i prikažemo sva podešavanja koja su vam na raspolaganju u okviru ovog alata.

Pored ovog popularnog page builder-a, upoznajte se i sa ostalim page builder-ima o kojima smo pisali na našem blogu: Elementor, Beaver Builder i Brizy.

Podešavanja su važna za sve page builder-e jer vam ona omogućavaju da maksimalno prilagodite i ubrzate rad vašeg web sajta koji ste izradili pomoću tog builder-a i ujedno smanjuju potrebu za instalacijom plugina i drugih ekstenzija.

Šta je Divi?

Divi je tzv. all-in-one alat za izgradnju i dizajniranje WordPress sajtova. Razvijen je od strane kompanije Elegant themes. On je zapravo kombinacija dva glavna proizvoda ove kompanije: Divi Builder-a i Divi teme.

Hajde prvo da vidimo koja je razlika između ova dva proizvoda.

Divi Builder

Divi Builder je alat za izgradnju stranica (page builder) koji omogućava korisnicima da kreiraju prilagođene dizajne stranica bez potrebe da imaju prethodno iskustvo u web programiranju. 

Evo nekoliko najvažnijih funkcionalnosti Divi Builder-a:

• može biti instaliran na bilo kojoj WordPress temi (a ne samo na Divi temi). Ovo znači da možete koristiti njegove funkcionalnosti za kreiranje sadržaja bez obzira na to koju WordPress temu koristite.
• omogućava vizuelno uređivanje preko “drag and drop” interfejsa, što znači da sve promene možete direktno na stranici videti dok ih pravite.
• sadrži veliki broj modula (tekst, slike, galerije, tabele, kontakt forme, itd.) koje možete koristiti za kreiranje kompleksnog dizajna.
• podržava kreiranje responsivnog dizajna, što znači da će stranice izgledati dobro na različitim uređajima (desktop, tablet, mobilni).

Divi tema

Divi tema je klasična WordPress tema koja ujedno dolazi sa integrisanim Divi Builder-om. To znači da kada instalirate Divi Temu, ujedno sa njom dobijate i Divi Builder.

Evo nekoliko najvažnijih funkcionalnosti Divi Teme:

• uključuje i ugrađeni Divi Builder, pružajući sve što vam je potrebno za kreiranje reponsive web sajtova (prilagođenih i mobilnim i desktop uređajima).
• dolazi sa velikim brojem opcija za prilagođavanje sadržaja i stranica (boje, fontovi, raspored, header-i, footer-i, itd.) direktno iz WordPress Customizer-a.
• sadrži veliki broj predefinisanih template-a koji vam mogu pomoći da brzo započnete sa kreiranjem web sajta.
• bolje je optimizovana za performanse u poređenju sa kombinacijom upotrebe različitih tema i builder plugin-a.

Divi template-i (Website Packs)

Divi template-i (ili Website Packs) su unapred definisani dizajnerski šabloni koji se mogu koristiti za brzo kreiranje različitih vrsta stranica na WordPress platformi koristeći Divi temu i Divi Builder. Evo nekoliko ključnih stvari koje treba da znate o Divi template-ima:

Širok Izbor: Divi dolazi sa velikim brojem unapred definisanih template-a za različite vrste stranica, uključujući početne stranice, o nama, kontakt, portfolio, blog, proizvodi, usluge i još mnogo toga. Ovi template-i pokrivaju različite industrije i svrhe, što omogućava korisnicima da brzo započnu sa izradom svojih sajtova.

Responsivni Dizajn: Template-i su dizajnirani tako da budu prilagodljivi i lako se mogu prilagoditi specifičnim potrebama korisnika. Korisnici mogu menjati boje, fontove, raspored elemenata, dodavati ili uklanjati sekcije, i još mnogo toga kako bi template prilagodili svojim potrebama i brendu.

Brzo Kreiranje Stranica: Korišćenje Divi template-a omogućava brzo kreiranje profesionalnih stranica bez potrebe za dugotrajnim dizajniranjem ili kodiranjem. Korisnici jednostavno biraju željeni template, prilagođavaju ga svojim potrebama koristeći Divi Builder, i brzo dobijaju gotovu stranicu.

Globalne Postavke: Divi omogućava korisnicima da postave globalne postavke za svoje sajtove, uključujući boje, fontove, stilove dugmića i još mnogo toga. Ove postavke se automatski primenjuju na sve stranice koje koriste template, što olakšava održavanje konzistentnog dizajna širom sajta.

Mogućnost Kreiranja Sopstvenih Template-a: Pored unapred definisanih template-a, Divi omogućava korisnicima da kreiraju i sačuvaju svoje sopstvene template-e. Ovo je korisno za korisnike koji žele da kreiraju svoje specifične dizajnerske šablone i koriste ih za više stranica ili projekata.

Instalacija Divi-a

Da biste instalirali Divi potrebno je da ga prvo preuzmete sa Elegant Themes web sajta.

Divi ne možete da preuzmete u besplatnoj verziji, već morate da ga kupite da biste uopšte mogli da ga preuzmete.

Na raspolaganju su vam dva osnovna plana: Divi i Divi Pro.

Oba plana su vam dostupna klikom na dugme Pricing.

Pored ova dva osnovna plana, imate opciju da izaberete način na koji ćete platiti za korišćenje Divi-a.

Jedan način je godišnja članarina, a drugi je jednokratno plaćanje, kojim ostvarujete pravo na doživotno korišćenje Divi alata, pratećih usluga iz odabranog paketa i doživotno ažuriranje na nove verzije alata koje se u međuvremenu budu pojavljivale.

Bez obzira na koju od ove dve varijante da se odlučite, imaćete mogućnost da birate i verziju Divi-a (Divi ili Divi Pro).

Svaki plan se odnosi na određene usluge koje Divi nudi, a kojima ostvarujete pristup, u zavisnosti od toga za koji plan se opredelite.

Za početak je dovoljno da odaberete najpovoljniju verziju, pa ukoliko se naknadno ukaže potreba da proširite listu dostupnih usluga, lako možete da nadogradite svoj plan.

Bitno je da napomenemo i to da Divi nudi garanciju za kupovinu bilo kog paketa. Ukoliko u roku od 30 dana zaključite da vam Divi iz bilo kog razloga ne odgovara, možete tražiti povraćaj novca i on će vam biti vraćen.

Da biste pokrenuli kupovinu željenog Divi plana klinite na Sign Up Today dugme unutar željenog plana i otvoriće vam se prozor za registraciju.

Ukoliko ste kao i mi odabrali jeftiniji plan, odmah biti ponuđeno da uz njega kupite i neke dodatne usluge po povoljnijim cenama, ukoliko vam to odgovara. Ukoliko ne želite, kliknite na dugme No, thanks. Proceed to checkout da biste nastavili kupovinu odobranog paketa.

Nakon unosa podataka za plaćanje i završetka transakcije dobićete na email potvrdu o kupovini i svoj Divi nalog za preuzimanje Divi alata.

Preuzimanje Divi-a

Nakon što ste završili kupovinu željenog paketa, moćićete da preuzmete Divi na svoj računar.

Sada je vreme da pripremite i okruženje za instalaciju.

Instalaciju Divi-a, kako smo već rekli, radite u okviru WordPress-a. 

Drugim rečima, potrebno je da prethodno na svom hosting nalogu imate instaliran WordPress, kako biste mogli da instalirate Divi.

U Divi instalaciji koju ste preuzeli nalaze se zajedno Divi Tema i Divi Builder, što znači da instalacijom Divi Teme ujedno instalirate i Divi Builder.

Kako da instalirate WordPress?

U jednom od tekstova na našem blogu smo objasnili Kako da instalirate WordPress.

Samo pratite ovo uputstvo i u nekoliko jednostavnih koraka ćete instalirati WordPress na vašem hosting paketu.

Nakon što instalirate WordPress, možete krenuti sa instalacijom Divi-a.

Kako da instalirate Divi?

Da biste instalirali Divi pre svega će vam biti potreban Divi instalacioni fajl koji ste preuzeli nakon kupovine svog paketa. 

Prvo se ulogujte na admin dashboard svog WordPress sajta i pronađite opciju pod nazivom Appearance – Themes.

Kliknite sada na opciju Themes i u gornjem delu prozora kliknite na dugme Add New Theme. Inače, opcija Themes omogućava da upravljate WordPress temama na svom web sajtu.

Pomoću ove opcije možete instalirati, aktivirati, deaktivirati i deinstalirati WordPress temu.

Sada će vam se otvoriti prozor za odabir fajla sa temom koju želite da upload-ujete na svoj sajt. 

U okviru ovog prozora se nalazi veliki broj raznih WordPress tema, ali mi nećemo instalirati neku od njih, već nam je potrebna Divi tema. Pošto se ona ne nalazi među već ponuđenim temama, nju ćete morati da upload-ujete sa svog računara ili neke druge lokacije na kojoj ste je sačuvali.

Kliknite na dugme Upload Theme.

Sada će vam se otvoriti prozor iz kojeg treba da odaberete fajl.

Kliknite na dugme Choose file, da biste odabrali fajl za upload. Potrebno je da znate lokaciju na kojoj ste sačuvali vašu Divi temu.

Kada ste pronašli zipovan fajl sa Divi instalacijom kliknite na dugme Open u Windows prozoru i fajl će biti spreman za upload.

Ostalo je samo da sada kliknete na dugme Install Now, kako biste započeli sa procesom instalacije Divi teme.

Proces instalacije je veoma brz, tako da će za samo nekoliko minuta Divi biti instaliran na vašem WordPress sajtu.

Ostaje samo da klikom na dugme Activate aktivirate Divi temu, kako bi ona postala glavna tema na vašem sajtu.

Nakon instalacije će biti potrebno da unesete svoj Divi API ključ, kako biste mogli da se povežete sa Divi serverom i na taj način ostvarite sve prednosti paketa koji ste kupili.

Unos Divi API ključa

Divi API ključ ćete pronaći u okviru svog naloga. Ulogujete se na svoj Divi nalog. Logovanje na nalog radite preko opcije Account koja se nalazi u meniju Elegant Themes sajta.

Nakon logovanja opet odaberite istu opciju Account iz menija i sada ćete imati pristup svim sekcijama vašeg naloga..

Da biste došli do Divi API ključa potrebno je da sada iz padajućeg menija odaberete opciju Username & API key.

Otvoriće vam se prozor kao na slici ispod.

Sada pod sekcijom API Keys pronađite svoj API ključ i kopirajte ga. Možete ga zalepiti u neki dokument i sačuvati, ali i ne morate. Sada taj kopirani API ključ treba da zalepite u admin dashboard svog WordPress web sajta.

Prvo se ulogujte u admin dashboard i pronađite opciju pod nazivom Divi.

Iz podmenija ove opcije odaberite opciju Theme Options. Otvoriće vam se prozor kao na slici ispod.

Sada iz menija ovog prozora kliknite na tab Updates. 

Otvoriće vam se prozor za unos Divi API ključa.

U polje Username unesite korisničko ime svog Divi naloga, a u polje API Key zalepite Divi API ključ koji ste malopre kopirali.

Kliknite na dugme Save changes da bi ste sačuvali izmene.

Dobićete poruku da je API ključ uspešno sačuvan.

Time ste povezali svoj web sajt sa Divi nalogom i omogućili korišćenje svih onih usluga koje se nalaze u vašem Divi paketu. 

Inače registracija API ključa vam omogućava da dobijete sledeće benefite:

• automatska ažuriranja za Divi temu i Divi Builder plugin. Ovo uključuje sigurnosne zakrpe, nove funkcije i poboljšanja performansi.
• pristup premium korisničkoj podršci od strane Elegant Themes tima. To podrazumeva brže odgovore i pomoć u rešavanju problema vezanih za Divi.
• pristup template-ima koje možete koristiti za kreiranje profesionalnih web stranica. Registracija API ključa omogućava pristup ovoj biblioteci, uključujući redovna ažuriranja i nove template.
• najnovije sigurnosne zakrpe, što je ključno za održavanje bezbednosti vašeg web sajta.
• mogućnost integracije sa raznim eksternim alatima i dodacima koji poboljšavaju funkcionalnost i fleksibilnost Divi teme i Divi Builder-a.
• pristup raznim vodičima, tutorijalima, i dokumentaciji koja može pomoći u maksimalnom iskorišćenju Divi tema i alata.

Podešavanje Divi teme

Sada kada ste povezali svoj web sajt sa Divi serverom, možete da pristupite opcijama podešavanja Divi teme.

Divi nudi opciju podešavanja raznih parametara Teme i Builder-a. Sva ova podešavanja radite pod opcijom Divi unutar vašeg WordPress admin dashboard-a.

Ponovo se ulogujte na svoj admin dashboard i pronađite opciju Divi. Sada ponovo odaberite opciju Theme Options.

Pod ovom opcijom ćete pronaći nekoliko tabova, sa velikim brojem opcija za podešavanje. Ovi tab-ovi su General, Navigation, Builder, Layout, Ads, SEO, Integration i Updates.

Da krenemo od taba pod nazivom General.

General tab

Pod ovim tab-om general i pod-tabom pod istim nazivom ćete pronaći opšta podešavanja za elemente poput logotipa, palete boja, linkova ka društvenim medijima, Google fontova, dugmeta za vraćanje na vrh stranice, bloka za unos prilagođenog CSS koda za izmenu teme i još mnogo toga.

• Logo: Omogućava vam da dodate ili promenite logotip vaše stranice. Klikom na “UPLOAD” možete otpremiti novu sliku logotipa.
• Fixed Navigation Bar: Omogućava da navigaciona traka ostane vidljiva na vrhu stranice čak i kada se korisnik skroluje naniže. Možete je uključiti (ENABLED) ili isključiti (DISABLED).
• Enable Divi Gallery: Aktivira ili deaktivira Divi galeriju slika. Kada je omogućena, koristi Divi stil za prikaz galerija.
• Color Pickers Default Palette: Pruža skup osnovnih boja koje možete koristiti u vašem dizajnu. Možete prilagoditi boje prema vašem brendu.
• Grab the first post image: Automatski postavlja prvu sliku iz posta kao istaknutu sliku (featured image). Može biti omogućeno ili onemogućeno.
• Blog Style Mode: Aktivira poseban stil za blog postove. Kada je omogućeno, postovi će se prikazivati u specifičnom blog stilu.
• Sidebar Layout: Podešava poziciju bočne trake (sidebar) za stranice koje koriste bočnu traku. Možete izabrati između desne (Right Sidebar) ili leve (Left Sidebar) strane.
• Shop Page & Category Page Layout for WooCommerce: Postavlja poziciju side bar specifično za prodavnice i kategorije u WooCommerce-u. Možete izabrati desnu (Right Sidebar) ili levu (Left Sidebar) stranu.
• Google API Key: Polje za unos vašeg Google API ključa, neophodnog za korišćenje Google usluga, poput Google Maps.
• Use Google Fonts: Omogućava ili onemogućava korišćenje Google fontova na vašoj stranici.
• Google Fonts Subsets: Omogućava da definišete podskupove Google fontova koji će se koristiti, na primer, latinični, ćirilični, itd.
• Enqueue Google Maps Script: Omogućava učitavanje Google Maps skripte kada koristite mape na vašoj stranici.
• Show Facebook Icon: Prikazuje ikonu za Facebook na vašoj stranici. Kada je omogućeno, korisnici mogu da kliknu na ikonu i odu na vašu Facebook stranicu.
• Show Twitter Icon: Prikazuje ikonu za Twitter na vašoj stranici.
• Show Instagram Icon: Prikazuje ikonu za Instagram na vašoj stranici.
• Show RSS Icon: Prikazuje ikonu za RSS feed na vašoj stranici.
• Facebook Profile Url: Polje za unos URL-a vašeg Facebook profila ili stranice.
• Twitter Profile Url: Polje za unos URL-a vašeg Twitter profila.
• Instagram Profile Url: Polje za unos URL-a vašeg Instagram profila.
• RSS Icon Url: Polje za unos URL-a vašeg RSS feed-a.
• Number of Products displayed on WooCommerce archive pages: Podešava broj proizvoda koji će biti prikazani na arhivskim stranicama WooCommerce-a.
• Number of Posts displayed on Category page: Podešava broj postova koji će biti prikazani na stranicama kategorija.
• Number of Posts displayed on Archive pages: Podešava broj postova koji će biti prikazani na arhivskim stranicama.
• Number of Posts displayed on Search pages: Podešava broj postova koji će biti prikazani na stranicama pretrage.
• Number of Posts displayed on Tag pages: Podešava broj postova koji će biti prikazani na stranicama tagova.
• Date format: Format za prikaz datuma na vašoj stranici. Na primer, `M j, Y` prikazuje datum u formatu `May 20, 2024`.
• Use excerpts when defined: Kada je omogućeno, prikazivaće isečke (excerpts) umesto punog sadržaja posta na arhivskim i kategorijskim stranicama.
• Back To Top Button: Omogućava dugme koje vodi korisnika nazad na vrh stranice kada je pritisnuto.
• Smooth Scrolling: Omogućava glatko skrolovanje stranice.
• Disable Translations: Onemogućava automatski prevod sadržaja stranice na druge jezike.
• Enable Responsive Images: Omogućava prilagođavanje slika različitim veličinama ekrana, što poboljšava performanse stranice na mobilnim uređajima.
• Custom CSS: Polje za unos prilagođenog CSS koda koji će biti primenjen na vašu stranicu.

Ove opcije vam omogućavaju prilagođavanje i optimizaciju vaše WordPress stranice pomoću Divi teme, čime se postiže bolja kontrola nad izgledom i funkcionalnošću.

Performance tab

U okviru taba General nalazi se pod-tab pod nazivom Performance. Ovde ćete naći podešavanja koja kontrolišu ponašanje CSS i JavaScript koda, a koja možete da koristite da biste optimizovali performanse svog web sajta.

Podešavanja poput Dynamic Module Framework, Dynamic CSS, Critical CSS, Dynamic JavaScript Libraries i drugih, mogu da pomognu da ubrzate svoj web sajt.

• Dynamic Module Framework: Omogućava učitavanje samo onih Divi modula koji se koriste na stranici, smanjujući ukupnu veličinu stranice i ubrzavajući učitavanje.
• Dynamic CSS: Omogućava učitavanje samo potrebnog CSS koda za elemente koji se koriste na stranici, čime se poboljšavaju performanse stranice.
• Dynamic Icons: Učitava samo ikone koje se koriste na stranici umesto celog seta ikona, čime se smanjuje veličina stranice. Kada je isključeno, sve ikone se učitavaju.
• Load Dynamic Stylesheet In-line: Omogućava učitavanje dinamički generisanog CSS-a direktno u HTML dokument, što može poboljšati inicijalno vreme učitavanja stranice.
• Critical CSS: Omogućava generisanje kritičnog CSS-a koji je neophodan za inicijalno prikazivanje sadržaja stranice. Ovo pomaže u bržem prikazivanju vidljivog dela stranice korisnicima.
• Critical Threshold Height: Podesite visinu pregleda za generisanje kritičnog CSS-a. Opcije su “Small”, “Medium” i “Large”, što određuje koliko CSS-a će biti generisano kao kritičan sadržaj.
• Dynamic JavaScript Libraries: Omogućava učitavanje samo JavaScript biblioteka koje su potrebne za stranicu, umesto učitavanja svih dostupnih biblioteka.
• Disable WordPress Emojis: Onemogućava WordPress-ovu funkciju emodžija, čime se smanjuje broj HTTP zahteva i poboljšava učitavanje stranice.
• Defer Gutenberg Block CSS: Odlaže učitavanje CSS-a za Gutenberg blokove dok ne postanu potrebni, čime se ubrzava inicijalno učitavanje stranice.
• Improve Google Fonts Loading: Poboljšava način na koji se Google fontovi učitavaju kako bi se smanjio uticaj na performanse stranice. Ovo može uključivati opcije kao što su preučitavanje ili učitavanje sa lokalnog servera.
• Defer jQuery and jQuery Migrate: Odlaže učitavanje jQuery i jQuery Migrate skripti dok ne postanu potrebne, što može poboljšati inicijalno vreme učitavanja stranice.
• Enqueue jQuery Compatibility Script: Omogućava učitavanje dodatnog JavaScript koda za kompatibilnost sa jQuery. Ovo može biti korisno ako koristite plugine ili teme koje zahtevaju specifične verzije jQuery-a.
• Defer Additional Third Party Scripts: Odlaže učitavanje dodatnih third-party skripti dok ne postanu potrebne, čime se poboljšavaju performanse stranice.

Ove opcije su dizajnirane da optimizuju performanse vaše stranice tako što smanjuju vreme učitavanja, minimizuju nepotrebne resurse i poboljšavaju ukupno korisničko iskustvo.

Navigation

Pod tabom Navigation ćete pronaći tri pod-taba pod nazivom Pages, Categories i General Settings.

Pod ovim pod-tabom možete da vršite podešavanja poput isključivanja određenih stranica iz navigacionog menija, prikazivanja ili sakrivanja padajućeg menija, prikazivanja linka do naslovne stranice i ostalo.

Pages

U okviru pod-taba Pages postoji veliki broj podesavanja:

• Exclude pages from the navigation bar: Ova opcija vam omogućava da izuzmete određene stranice iz navigacionog bar-a. To znači da možete odabrati koje stranice neće biti prikazane u glavnom meniju vaše stranice.
• Show dropdown menus: Omogućava ili onemogućava prikazivanje padajućih menija u navigacionom bar-u. Kada je omogućeno, podstranice će se prikazivati kao padajući meni ispod glavnih stranica.
• Display Home link: Kada je omogućeno, dodaje link do početne stranice (Home) u navigacionom bar-u. Ovo je korisno za omogućavanje jednostavnog povratka na početnu stranicu iz bilo kog dela sajta.
• Sort Pages Links: Omogućava sortiranje linkova stranica u navigacionom bar-u. Ova opcija vam omogućava da postavite redosled stranica u meniju na osnovu vaših preferencija.
• Order Pages Links by Ascending/Descending: Podešava redosled sortiranja stranica u navigacionom bar-u. Možete birati između rastućeg (Ascending) ili opadajućeg (Descending) redosleda.
• Number of dropdown tiers shown: Podešava broj nivoa padajućih menija koji će biti prikazani. Na primer, ako postavite ovu opciju na 1, samo će prvi nivo pod-stranica biti prikazan kao padajući meni. Ako postavite na više, biće prikazani dodatni nivoi pod-stranica kao dodatni padajući meniji

Categories

U pod-tabu Categories možete da vršite podešavanja poput isključivanja određenih kategorija iz navigacionog bar-a, sakrivanja praznih kategorija, određivanja redosleda kategorija i ostalo.

Ovaj pod-tab sadrži sledeća podešavanja:

• Exclude categories from the navigation bar: Ova opcija vam omogućava da izuzmete određene kategorije iz navigacionog bar-a. To znači da možete odabrati koje kategorije neće biti prikazane u glavnom meniju vaše stranice.
• Show dropdown menus: Omogućava ili onemogućava prikazivanje padajućih menija za kategorije u navigacionom bar-u. Kada je omogućeno, podkategorije će se prikazivati kao padajući meni ispod glavnih kategorija.
• Hide empty categories: Kada je omogućeno, sakriva kategorije koje nemaju nijedan post. Ovo pomaže da navigacioni bar bude uredniji i prikazuje samo relevantne kategorije sa sadržajem.
• Number of dropdown tiers shown: Podešava broj nivoa padajućih menija koji će biti prikazani za kategorije. Na primer, ako postavite ovu opciju na 1, samo će prvi nivo pod-kategorija biti prikazan kao padajući meni. Ako postavite na više, biće prikazani dodatni nivoi pod-kategorija kao dodatni padajući meniji.
• Sort Categories Links by Name/ID/Slug/Count/Term Group: Omogućava sortiranje linkova kategorija u navigacionom bar-u po različitim kriterijumima:
• Name: Sortira kategorije po imenu.
• ID: Sortira kategorije po ID broju.
• Slug: Sortira kategorije po slug-u (deo URL-a).
• Count: Sortira kategorije po broju postova u svakoj kategoriji.
• Term Group: Sortira kategorije po grupi pojmova.
• Order Category Links by Ascending/Descending: Podešava redosled sortiranja kategorija u navigacionom bar-u. Možete birati između rastućeg (Ascending) ili opadajućeg (Descending) redosleda.

General Settings

Od podešavanja dospupnih u pod-tabu General Setings tu je samo Disable top tier dropdown menu links. Ova opcija vam omogućava da deaktivirate klikabilnost linkova na gornjem nivou padajućih menija u navigacionom bar-u.

Kada je omogućena, ova opcija onemogućava korisnicima da kliknu na glavne stavke menija koje imaju pod-menije. Umesto da ih vode na novu stranicu, ovi linkovi samo otvaraju padajući meni sa pod-stavkama.

Zašto biste koristili ovu opciju?

1. Bolja navigacija: Ako imate glavne kategorije koje služe samo kao zaglavlja za grupisanje pod-kategorija, možete sprečiti korisnike da slučajno kliknu na njih i odu na praznu ili nepostojeću stranicu.
2. Poboljšano korisničko iskustvo: Korisnicima može biti lakše da pregledaju dostupne pod-kategorije bez rizika da budu preusmereni na neželjenu stranicu.
3. Konzistentnost u navigaciji: Može doprineti doslednom iskustvu navigacije na sajtu, posebno ako imate složeniji meni sa više nivoa pod-kategorija.

Primer upotrebe

Pretpostavimo da imate e-commerce sajt sa glavnim kategorijama kao što su “Muška odeća”, “Ženska odeća” i “Dečija odeća”. Svaka od ovih kategorija ima nekoliko pod-kategorija kao što su “Majice”, “Pantalone”, “Jakne”.

Ako omogućite opciju Disable top tier dropdown menu links, korisnici neće moći da kliknu na “Muška odeća” da bi otvorili novu stranicu, već će samo otvoriti padajući meni sa pod-kategorijama “Majice”, “Pantalone” i “Jakne”.

Builder

Tab Builder sadrži dva pod-taba pod nazivima: Post Type Integration i Advanced.

Post Type Integration

Ovaj pod-tab sadrži sledeća podešavanja:

• Enable Divi Builder On Post Types: Ova opcija omogućava ili onemogućava Divi Builder na određenim tipovima objava. Na primer, ako želite da koristite Divi Builder za uređivanje standardnih WordPress postova, stranica ili prilagođenih postova, možete ovde omogućiti odgovarajuće tipove objava.
• Product Layout: Ovo podešavanje vam omogućava da izaberete kako će se Divi Builder prikazivati na stranicama proizvoda ako koristite WooCommerce ili drugi plugin za e-trgovinu. Možete odabrati da li želite da Divi Builder bude prikazan iznad ili ispod osnovnog sadržaja proizvoda.
• Product Content: Ovo podešavanje vam omogućava da izaberete kako će se Divi Builder ponašati u odnosu na sadržaj proizvoda. Možete odabrati da li želite da Divi Builder zameni osnovni sadržaj proizvoda ili da bude prikazan iznad ili ispod njega.

Advanced

Pod-tab Advanced sadrži sledeća podešavanja:

• Static CSS File Generation: Ova opcija omogućava generisanje statičkog CSS fajla umesto dinamički generisanog CSS-a. Statički CSS fajl može poboljšati performanse vašeg sajta jer se može keširati i brže učitati.
• Output Styles Inline: Ovo podešavanje omogućava ili onemogućava ugrađivanje CSS stilova direktno unutar HTML-a umesto da se koriste eksterni CSS fajlovi. Ovo može biti korisno za optimizaciju performansi i smanjenje broja HTTP zahteva.
• Product Tour: Ova opcija omogućava ili onemogućava turu proizvoda koja se prikazuje prilikom prvog korišćenja Divi Builder-a. Tura proizvoda pruža korisne informacije o funkcijama i mogućnostima Divi teme.
• Enable The Latest Divi Builder Experience: Ovo podešavanje omogućava korišćenje najnovijeg iskustva sa Divi Builder-om, uključujući sve nove funkcije i poboljšanja.
• Enable Classic Editor: Ova opcija omogućava ili onemogućava korišćenje klasičnog WordPress editora umesto Divi Builder-a. To može biti korisno ako želite da koristite stariji način uređivanja sadržaja ili ako imate kompatibilne plugine koji se oslanjaju na klasični editor.

Layout

Ovaj tab sadrži tri pod-taba: Single Post Layout, Single Page Layout, and General Settings.

Single Post Layout

Ovaj pod-tab sadrži sledeća podešavanja:

• Choose which items to display in the post info section: Ova opcija vam omogućava da izaberete koje informacije želite prikazati u sekciji informacija o postu. To može uključivati stavke poput datuma objavljivanja, autora, kategorije, broja komentara itd. Možete izabrati koje od ovih informacija želite prikazati ili sakriti na pojedinačnim postovima.
• Show comments on posts: Ova opcija omogućava ili onemogućava prikazivanje komentara na pojedinačnim postovima. Ako omogućite ovu opciju, komentari će biti vidljivi ispod sadržaja posta, omogućavajući čitaocima da ostave svoje komentare i povratne informacije
• Place Thumbs on Posts: Ova opcija vam omogućava da postavite sličice ili ikone na pojedinačne postove. Ove sličice obično predstavljaju vrstu sadržaja posta ili ga vizuelno identifikuju na stranici ili blogu. Na primer, možete postaviti sličicu za video post, galerijski post, audio post itd.

Single Page Layout

Ovaj pod-tab sadrži sledeća dva podešavanja:

• Place Thumbs on Pages: Ova opcija vam omogućava da postavite sličice ili ikone na pojedinačne stranice. Sličice mogu biti korisne za vizuelno identifikovanje ili kategorizaciju stranica na vašem sajtu. Na primer, možete postaviti sličicu za kontakt stranicu, o nama stranicu, usluge stranicu itd.
• Show comments on pages: Ova opcija omogućava ili onemogućava prikazivanje komentara na pojedinačnim stranicama. Ako omogućite ovu opciju, čitaoci će imati mogućnost da ostave komentare ispod sadržaja stranice, što može biti korisno ako želite interakciju sa vašom publikom i povratne informacije na stranicama sa dugim sadržajem ili sa informacijama koje zahtevaju dodatna objašnjenja ili diskusije.

General Settings

Ovaj pod-tab sadrži sledeća podešavanja:

• Post info section: Ovo podešavanje omogućava prilagođavanje informacija koje se prikazuju zajedno sa svakim postom na stranicama indeksa. Informacije o postu mogu obuhvatiti stvari poput datuma objavljivanja, autora, kategorije, broja komentara itd.
• Show Thumbs on Index pages: Ova opcija omogućava prikazivanje sličica ili ikona zajedno sa svakim postom na stranicama indeksa. Sličice mogu biti korisne za vizuelno identifikovanje ili kategorizaciju postova na stranicama kao što su stranice sa arhivom ili listom postova.

Ads

Pod ovim tabom se nalaze podešavanja vezano za banere koje možete postaviti na svoj web sajt:

• Input 468×60 advertisement banner image: Ovde možete postaviti sliku koja će se koristiti kao reklamni banner veličine 468×60 piksela. Ova slika će biti prikazana kao reklama na vašem sajtu.
• Input 468×60 advertisement destination URL: Ovde možete uneti URL adresu na koju će posetioci biti preusmereni kada kliknu na reklamni banner veličine 468×60 piksela. To obično vodi do stranice ili sajta koji su povezani sa reklamom.
• Input 468×60 AdSense code: Ovde možete uneti AdSense kod koji će se koristiti za prikazivanje AdSense reklama veličine 468×60 piksela na vašem sajtu. AdSense je Google-ova platforma za prikazivanje kontekstualnih reklama na sajtovima i blogovima.

SEO

Ovaj tab u sebi sadrži tri pod-taba: Homepage SEO, Single Post SEO, and Index Page SEO.

Homepage SEO

Ovaj pod-tab sadrži sledeća podešavanja:

• Enable custom title: Ova opcija omogućava vam da kreirate prilagođeni naslov za naslovnu stranicu. To je korisno ako želite da imate kontrolu nad naslovom koji se prikazuje u rezultatima pretrage ili na društvenim mrežama.
• Enable meta description: Ova opcija omogućava vam da dodate meta opis za naslovnu stranicu. Meta opis je kratak opis sadržaja stranice koji se prikazuje u rezultatima pretrage. To može poboljšati relevantnost i klikabilnost vaše stranice u rezultatima pretrage.
• Enable meta keywords: Ova opcija omogućava vam da dodate meta ključne reči za naslovnu stranicu. Meta ključne reči su reči ili fraze koje opisuju sadržaj stranice i pomažu search engine-ima da bolje razumeju o čemu se radi na stranici.
• Enable canonical URLs: Ova opcija omogućava vam da koristite kanonske URL adrese za naslovnu stranicu. Kanonske URL adrese pomažu search engine-ima da identifikuju glavnu verziju stranice i izbegnu dupliranje sadržaja.
• Homepage custom title (if enabled): Ovde možete uneti prilagođeni naslov za naslovnu stranicu, ako je omogućeno prethodno podešavanje.
• Homepage meta keywords (if enabled): Ovde možete uneti meta ključne reči za naslovnu stranicu, ako je omogućeno prethodno podešavanje.
• Define a character to separate BlogName and Post title: Ovde možete odabrati karakter koji će se koristiti za razdvajanje naziva bloga i naslova posta u meta naslovu. Ovo može biti korisno za estetsko prilagođavanje prikaza naslova na rezultatima pretrage.

Single Post Page SEO

Ovaj pod-tab sadrži sledeća podešavanja:

• Enable custom titles: Ova opcija omogućava vam da kreirate prilagođene naslove za pojedinačne postove i stranice. Prilagođeni naslovi mogu poboljšati SEO optimizaciju i klikabilnost vaših sadržaja u rezultatima pretrage.
• Enable meta description: Ova opcija omogućava vam da dodate meta opise za pojedinačne postove i stranice. Meta opis je kratak pregled sadržaja stranice koji se prikazuje u rezultatima pretrage, što može poboljšati relevantnost i privlačnost vaših stranica.
• Enable custom keywords: Ova opcija omogućava vam da dodate prilagođene ključne reči za pojedinačne postove i stranice. Meta ključne reči pomažu search engine-ima da bolje razumeju sadržaj vaše stranice.
• Enable canonical URL’s: Ova opcija omogućava vam da koristite kanonske URL adrese za pojedinačne postove i stranice. Kanonske URL adrese pomažu search engine-ima da identifikuju glavnu verziju stranice i izbegnu dupliranje sadržaja.
• Custom field Name to be used for title: Ovde možete uneti ime prilagođenog polja koje će se koristiti za unos naslova. Ovo omogućava preciznu kontrolu nad naslovima pomoću prilagođenih polja.
• Custom field Name to be used for description: Ovde možete uneti ime prilagođenog polja koje će se koristiti za unos meta opisa. Ovo omogućava preciznu kontrolu nad opisima pomoću prilagođenih polja.
• Custom field Name to be used for keywords: Ovde možete uneti ime prilagođenog polja koje će se koristiti za unos meta ključnih reči. Ovo omogućava preciznu kontrolu nad ključnim rečima pomoću prilagođenih polja.
• If custom titles are disabled, choose autogeneration method: Ako ne koristite prilagođene naslove, ovde možete izabrati metod automatskog generisanja naslova. Na primer, možete izabrati da se naslov sastoji od naslova posta i naziva sajta.
• Define a character to separate BlogName and Post title: Ovde možete uneti karakter koji će se koristiti za razdvajanje naziva bloga i naslova posta u meta naslovu. Ovo može biti korisno za estetsko prilagođavanje prikaza naslova na rezultatima pretrage, kao što je crtica (-) ili vertikalna linija (|).

Index Page SEO

Ovaj pod-tab sadrži sledeća podešavanja:

• Enable canonical URL’s: Ova opcija omogućava kanonske URL adrese za vaše postove i stranice. Kanonske URL adrese pomažu pretraživačima da identifikuju glavnu verziju stranice, što je korisno kada imate duplirani sadržaj na različitim URL-ovima. To pomaže u izbegavanju problema sa dupliranim sadržajem i poboljšava SEO performanse vašeg sajta.
• Enable meta descriptions: Ova opcija omogućava dodavanje meta opisa za vaše postove i stranice. Meta opis je kratak pregled sadržaja stranice koji se prikazuje u rezultatima pretrage ispod naslova. Dobro napisan meta opis može poboljšati relevantnost i privlačnost vaših stranica, povećavajući verovatnoću da će korisnici kliknuti na vaš link.
• Choose title autogeneration method: Ova opcija vam omogućava da izaberete kako će se automatski generisati naslovi za vaše postove i stranice ako ne koristite prilagođene naslove. Možete izabrati da se naslov sastoji od naslova posta i naziva sajta ili neke druge kombinacije. Na primer, naslov posta može biti kombinovan sa kategorijom ili datumom objave.
• Define a character to separate BlogName and Post title: Ovde možete definisati karakter koji će se koristiti za razdvajanje naziva bloga i naslova posta u meta naslovu. Uobičajeni karakteri za ovo su crtica (-), vertikalna linija (|) ili dvotačka (:). Ovo pomaže u poboljšanju čitljivosti i estetike naslova u rezultatima pretrage.

Integration

U ovom tabu imate sledeća podešavanja:

• Enable header code: Ova opcija omogućava dodavanje prilagođenog koda u <head> sekciju vašeg sajta. Kod koji ovde dodate će biti uključen na svim stranicama sajta.
• Enable body code: Ova opcija omogućava dodavanje prilagođenog koda u <body> sekciju vašeg sajta. Ovo je često korisno za praćenje koda kao što su Google Analytics ili Facebook Pixel.
• Enable single top code: Ova opcija omogućava dodavanje prilagođenog koda na vrh svakog pojedinačnog posta, odmah ispod naslova posta.
• Enable single bottom code: Ova opcija omogućava dodavanje prilagođenog koda na dno svakog pojedinačnog posta, neposredno pre sekcije za komentare. Ovo može biti korisno za dodavanje poziva na akciju, srodnih postova ili drugih interaktivnih elemenata.
• Add code to the <head> of your blog: Ovde možete uneti prilagođeni kod koji će biti dodan u <head> sekciju. Ovo je korisno za dodavanje meta oznaka, prilagođenih stilova (CSS), ili skripti koje treba da se učitaju pre nego što se prikaže sadržaj stranice.
• Add code to the <body> (good for tracking codes such as google analytics): Ovde možete uneti prilagođeni kod koji će biti dodan unutar <body> tag-a. Ovo je korisno za dodavanje skripti za praćenje, reklama, ili drugih funkcionalnosti koje treba da se učitaju zajedno sa sadržajem stranice.
• Add code to the top of your posts: Ovde možete uneti prilagođeni kod koji će biti dodan na vrh svakog posta. Ovo može biti korisno za prikazivanje banera, obaveštenja, ili drugih elemenata koje želite da posetioci vide odmah nakon otvaranja posta.
• Add code to the bottom of your posts, before the comments: Ovde možete uneti prilagođeni kod koji će biti dodan na dno svakog posta, neposredno pre sekcije za komentare. Ovo može biti korisno za prikazivanje poziva na akciju (CTA), srodnih postova, dodatnih informacija, ili reklama.

Updates

Ovaj tab smo već ranije pomenuli u ovom tekstu, kada smo objasnili kako da aktivirate svoj Divi API ključ. Ipak, ne smeta da ovde malo detaljnije objasnimo šta koje polje znači i za šta ga možete koristiti.

Ovaj tab ima sledeća podešavanja:

• Username: Ovde unosite korisničko ime koje ste koristili prilikom kupovine Divi teme. Ovo korisničko ime se koristi za autentifikaciju i omogućava vam da dobijate ažuriranja direktno od Elegant Themes.
• API Key: API ključ dobijate od Elegant Themes prilikom kupovine Divi teme. Unosom API ključa omogućavate automatsko preuzimanje ažuriranja za Divi temu i druge proizvode koje ste kupili od Elegant Themes. API ključ potvrđuje da imate legitimnu licencu za korišćenje teme.
• Version Rollback: Ova opcija omogućava vraćanje na prethodnu verziju Divi teme. Ako ste ažurirali Divi i naišli na probleme ili greške, možete koristiti ovu opciju da se vratite na prethodnu verziju koja je bila stabilna. Ovo vam pomaže da brzo rešite probleme koji su se pojavili nakon ažuriranja.

Zaključak

Bez sumnje, Divi je jedan od najpopularnijih alata za izradu WordPress sajtova.

Odlikuje ga jednostavnost, brzina i veliki broj raspoloživih funkcionalnosti.

Pored toga, Divi ima i veliku zajednicu korisnika i programera koji neprestano kreiraju proširenja i unapređuju rad osnovnog alata. Ovi dodatni plugini i ekstenzije su dostupne direktno preko Elegant Themes web sajta, ali i putem web sajtova drugih izdavača (developera).

U ovom tekstu smo objasnili kako da preuzmete i instalirate Divi, kao i koje su vam sve opcije i funkcionalnosti na raspolaganju za podešavanje.

Nenad Mihajlović