Divi vam omogućuje stvaranje neograničenog broja područja spremnih za korištenje u hodu. Bočne trake tada se mogu dodati bilo kojoj stranici, omogućujući vam stvaranje jedinstvenih bočnih traka za različite odjeljke vaše stranice web stranica.

Kako dodati modul Zonde widget iz Divi

Prije nego što svojoj stranici možete dodati modul bočne trake, prvo morate uskočiti u Divi Builder. Jednom Divi tema instaliran na vašem web stranica, primijetit ćete gumb Koristite Divi Builder iznad uređivača postova kad god izradite novu stranicu. Pritisnite ovaj gumb da biste aktivirali Divi Builder i pristupili svim modulima Divi Builder. Zatim kliknite na gumb Koristite Visual Builder za pokretanje generatora u vizualnom načinu. Također možete kliknuti gumb Koristite Visual Builder kada pregledavate svoje web stranica u prvom planu ako ste prijavljeni na nadzornu ploču WordPressa.

divi graditelj

Nakon što koristite Visual Builder, možete kliknuti sivi gumb (+) da biste dodali novi modul na svoju stranicu. Novi moduli mogu se dodavati samo unutar redaka. Ako započinjete novu stranicu, ne zaboravite prvo dodati redak na svoju stranicu.

sidebar divi plugin wordpress.png

Pronađite modul bočne trake na popisu modula i kliknite ga da biste ga dodali na svoju stranicu. Popis modula je pretraživ, što znači da možete upisati i riječ "bočna traka", a zatim kliknuti "Enter" da biste automatski pronašli i dodali modul bočne trake! Nakon dodavanja modula, dočekat će vas popis opcija modula. Te su opcije podijeljene u tri glavne skupine: Sadržaj , Začeće et napredan .

Primjer upotrebe: Dodavanje bočne trake na stranicu vašeg bloga

Modul bočne trake omogućuje vam umetanje bočne trake (i svih njenih ugrađenih dodataka) bilo gdje na vašoj stranici. Zapravo, možete dodati bilo koje područje widgeta pomoću modula bočne trake. U ovom primjeru pokazat ću vam kako umetnuti prilagođenu bočnu traku na stranicu bloga pomoću specijaliziranog odjeljka za prikaz widgeta Search and Recent Posts na WordPressu.

sidebar za članak na WordPress.jpg

Ova stranica bloga ima zaglavlje pune širine za prikaz naslova bloga na vrhu stranice. Ispod modula zaglavlja pune širine nalazi se specijalni izgled s modulom bloga s lijeve strane i desnom okomitom bočnom trakom s desne strane.

Korištenje specijaliziranog odjeljka omogućuje vam dodavanje složenih varijacija stupaca pored vertikalnih bočnih traka, bez dodavanja neželjenih prekida na stranicu. Ovo je savršeno za blog s bočnom trakom.

Prvo morate osigurati da su widgeti postavljeni na stranici Widgeti na vašoj WordPress nadzornoj ploči. U ovom primjeru dodajem widget Pretraživanje i widget Nedavni članci u widget Bočne trake.

bočna traka widget wordpress.png

Zatim postavite Visual Builder za uređivanje stranice bloga. Dodajte specijalizirani odjeljak na svoju stranicu (odmah ispod zaglavlja) sa sljedećim izgledom:

stvorite prilagođeni odjeljak divi.png

umetnite stupce divi.png

Nakon što na stranicu dodate specijalizirani odjeljak, primijetit ćete da područje (s lijeve strane) ima gumb "Dodaj modul". U ovom je primjeru ovdje dodan modul Blog s rasporedom mreže za prikaz postova na blogu.
primjer članak blog raspored grid.png

Drugi (s desne strane) ima gumb "Umetni red". Područje "Umetni modul" predstavlja vašu vertikalnu bočnu traku. Ovdje ćete ući u modul bočne trake. Ovdje možete dodati što više modula, u jedan redak, a oni će se prostirati okomitom širinom odjeljka, uz strukturu stupaca koju gradite pored njega. Zapravo, za ovaj primjer, stranica bloga već ima modul Optin Email i Person modul u tom području vertikalne bočne trake izgleda Specialty.

Sada dodajte modul bočne trake na vrh ostalih modula u vašem okomitom području bočne trake.

dodajte module na bočnu traku.jpg

U postavci modula bočne trake ažurirajte sljedeće:

Kartica Sadržaj

Područje widgeta: odaberite bočnu traku

Kartica Dizajn

Orijentacija: desno (jer je bočna traka zdesna)
Izbrišite separator granice: DA
Boja teksta:
Veličina slova tamnog zaglavlja: 26 piksela
Razmjena slova
zaglavlje: 3px Visina reda zaglavlja: 1.1em

Kartica Napredno

U odjeljku Prilagođeni CSS dodajte sljedeći CSS u tekstualni okvir Widgeta. To će učiniti da dizajn widgeta bočne trake odgovara dizajnu web stranice:

pozadina: #fff; padding: 20px; -webkit-box-sjene: 0 1px 5px RGBA (0, 0, 0, 0.1); -moz-box-sjene: 0 1px 5px RGBA (0, 0, 0, 0.1); okvirna sjena: 0 1px 5px rgba (0, 0, 0, 0.1);

stvorite bočnu traku divi.jpg

Spremite postavke

Sada možete vidjeti da modul bočne trake prikazuje elemente widgeta bočne trake (Pretraživanje i nedavni članci) i prikazuje ih u okomitom području bočne trake vašeg odjeljka specijalnosti.

primjer bočne trake divi.jpg

Opcije sadržaja za bočnu traku

Na kartici Sadržaj pronaći ćete sve elemente sadržaja modula, kao što su tekst, slike i ikone. Sve što kontrolira ono što se pojavljuje u vašem modulu uvijek će se naći na ovoj kartici.

postavke sidebar.png

Područje widgeta

Modul Bočna traka koristi okvire za stvaranje widgeta koje možete stvoriti na kartici Appearances> Widgets. Na ovom padajućem izborniku možete odabrati jedno od svojih prilagođenih područja widgeta.

Administratorska oznaka

Ovo će promijeniti oznaku modula u konstruktoru radi lakše identifikacije. Kada koristite prikaz WireFrame u Visual Builderu, ove se oznake pojavljuju u modulnom bloku sučelja Divi Builder.

Opcije dizajna bočne trake

Na kartici Dizajn pronaći ćete sve mogućnosti oblikovanja modula, poput fontova, boja, veličine i razmaka. Ovo je kartica koju ćete koristiti za promjenu izgleda vašeg modula. Svaki Divi modul ima dugački popis postavki dizajna pomoću kojih možete bilo što promijeniti.

mogućnosti dizajna divi.png

orijentacija

Ovdje možete odabrati na kojoj će strani stranice biti prikazana vaša bočna traka. Ovaj parametar kontrolira orijentaciju teksta i položaj obruba.

Izbrišite razdjelnik obruba

Ovdje možete ukloniti tanku sivu obrub koji odvaja vašu bočnu traku od sadržaja vaše stranice.

Boja teksta

Ovdje možete odabrati hoće li vaš tekst biti svijetli ili tamni. Ako radite na tamnoj pozadini, vaš bi tekst trebao biti svijetli. Ako je vaša pozadina svijetla, tekst bi trebao biti taman.

Font zaglavlja

Font teksta zaglavlja možete promijeniti odabirom željenog fonta s padajućeg izbornika. Divi dolazi s desecima izvrsnih fontova koje pokreće Google Fonts. Prema zadanim postavkama Divi koristi font Open Sans za sav tekst na vašoj stranici. Također možete prilagoditi stil teksta koristeći podebljano, kurziv, velika slova i opcije podcrtavanja.

Veličina fonta zaglavlja

Ovdje možete prilagoditi veličinu teksta zaglavlja. Možete povući klizač raspona da biste povećali ili smanjili veličinu teksta ili izravno unijeli željenu vrijednost veličine teksta u polje za unos s desne strane klizača. Polja za unos podržavaju različite jedinice mjere, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em", ovisno o vrijednosti vaše veličine.

Boja teksta zaglavlja

Prema zadanim postavkama, sve boje teksta u Diviju pojavljuju se u bijeloj ili tamno sivoj boji. Ako želite promijeniti boju teksta zaglavlja, odaberite željenu boju iz alata za odabir boja pomoću ove opcije.

Razmak zaglavlja u slovima

Razmak između slova utječe na razmak između svakog slova. Ako želite povećati razmak između svakog slova u tekstu zaglavlja, pomoću klizača raspona prilagodite razmak ili unesite željenu veličinu razmaka u polje za unos s desne strane klizača. Polja za unos podržavaju različite mjerne jedinice, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em", ovisno o vrijednosti vaše veličine.

Visina reda zaglavlja

Visina retka utječe na razmak između svakog retka teksta zaglavlja. Ako želite povećati razmak između svakog retka, pomoću klizača prilagodite razmak ili u polje unesite željenu veličinu razmaka. unos smješten s desne strane klizača. Polja za unos podržavaju različite mjerne jedinice, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em", ovisno o vrijednosti vaše veličine.

Font tijela

Font vašeg tijela možete promijeniti odabirom željenog fonta s padajućeg izbornika. Divi dolazi s desecima izvrsnih fontova koje pokreće Google Fonts. Prema zadanim postavkama Divi koristi font Open Sans za sav tekst na vašoj stranici. Također možete prilagoditi stil teksta koristeći podebljano, kurziv, velika slova i opcije podcrtavanja.

Veličina fonta tijela

Ovdje možete prilagoditi veličinu teksta tijela. Možete povući klizač da biste povećali ili smanjili veličinu teksta ili izravno unijeli vrijednost željene veličine teksta u polje za unos s desne strane klizača. Polja za unos podržavaju različite mjerne jedinice, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em", ovisno o vrijednosti vaše veličine.

Boja teksta tijela

Prema zadanim postavkama, sve boje teksta u Diviju pojavljuju se u bijeloj ili tamno sivoj boji. Ako želite promijeniti boju teksta, odaberite željenu boju iz alata za odabir boja pomoću ove opcije.

Prostor tijela slova

Razmak između slova utječe na razmak između svakog slova. Ako želite povećati razmak između svakog slova u tekstu, pomoću klizača raspona prilagodite razmak ili unesite željenu veličinu razmaka u polje za unos s desne strane klizača. Polja za unos podržavaju različite jedinice mjere, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em", ovisno o vrijednosti vaše veličine.

Visina tijela linije

Visina retka utječe na razmak između svakog retka teksta u vašem tijelu. Ako želite povećati razmak između svakog retka, pomoću klizača raspona prilagodite razmak ili unesite željenu veličinu razmaka u polje za unos smješteno desno od kursora. Polja za unos podržavaju različite jedinice mjere, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em", ovisno o vrijednosti vaše veličine.

Napredne opcije bočne trake

Na naprednoj kartici pronaći ćete opcije koje bi iskusnijim web dizajnerima mogle biti korisne, poput prilagođenih CSS i HTML atributa. Ovdje možete primijeniti prilagođeni CSS na bilo koji od mnogih elemenata modula. Na modul također možete primijeniti prilagođene CSS klase i ID-ove koji se mogu koristiti za prilagodbu modula u datoteci style.css vaše dječje teme.

unaprijed bočna traka divi.png

CSS ID

Unesite neobavezni CSS ID koji ćete koristiti za ovaj modul. ID se može koristiti za stvaranje prilagođenog CSS stila ili za povezivanje na određene odjeljke vaše stranice.

CSS klasa

Unesite neobavezne CSS klase koje ćete koristiti za ovaj modul. CSS klasa može se koristiti za izradu prilagođenog CSS stila. Možete dodati više klasa odvojenih razmakom. Te se klase mogu koristiti u vašoj podređenoj temi Divi ili u prilagođenom CSS listu stilova koji dodate na svoju stranicu ili na svoje web mjesto pomoću opcija teme Divi ili postavki stranice Divi Builder.

Prilagođeni CSS

Prilagođeni CSS također se može primijeniti na modul i bilo koji od unutarnjih dijelova modula. U odjeljku Prilagođeni CSS pronaći ćete tekstualno polje u koje možete dodati prilagođene CSS stilske tablice izravno u svaki element. CSS unosi u ovim postavkama već su omotani stilskim oznakama. Dakle, samo unesite CSS pravila odvojena zarezom.

vidljivost

Ova vam opcija omogućuje upravljanje uređajima na kojima se pojavljuje vaš modul. Možete odabrati da deaktivirate svoj modul na tabletima, pametnim telefonima ili stolnim računalima pojedinačno. To je korisno ako želite koristiti različite modove na različitim uređajima ili ako želite pojednostaviti dizajn mobilnih uređaja uklanjanjem određenih elemenata sa stranice.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]PREUZMI DIVI TEMU [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]PREUZMITE predlošci DIVI[/vcex_button][/vc_column][/vc_row]

Ostali Divi tutoriali