Kako koristiti navigacijski modul pune širine na Divi Builderu

Modul Divi's Full Width Menu omogućuje vam postavljanje navigacijskog izbornika bilo gdje na stranici. To se može koristiti za dodavanje drugog izbornika stranice na stranicu ili se može koristiti zajedno sa značajkom Prazna stranica za pomicanje glavne navigacije na dno stranice. Na primjer, možete premjestiti svoj izbornik ispod prvog odjeljka kako biste smjestili ljude s velikom početnom slikom. To u osnovi omogućuje navigaciju zaglavljem da se kreće po stranici pomoću alata za izgradnju!

Kako dodati modul cijelog zaslona na svoju stranicu

Prije nego što svojoj stranici možete dodati modul izbornika pune širine, 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 Omogućite Visual Builder kada pregledavate svoje web stranica u prvom planu ako ste prijavljeni na nadzornu ploču WordPressa.

Nakon što uđete u Visual Builder, možete kliknuti sivi gumb plus da biste na svoju stranicu dodali novi modul. Novi moduli pune širine mogu se dodati samo unutar odjeljaka pune širine. Ako započinjete novu stranicu, ne zaboravite prvo dodati odjeljak s punom širinom na svoju stranicu. Imamo nekoliko sjajnih vodiča o tome kako koristiti elemente odjeljka Divi.

Pronađite modul izbornika pune širine na popisu modula i kliknite ga da biste ga dodali na svoju stranicu. Popis modula je pretraživ, što znači da također možete utipkati riječ "Fullwith menu" ili "full width menu" (ovisno o vašoj verziji), a zatim kliknuti enter za automatsko pretraživanje i dodati modul izbornika pune širine ! 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 izbornika Fullwidth ispod zaglavlja stranice

U ovom primjeru pokazat ću vam kako dodati izbornik pune širine ispod zaglavlja stranice.

Evo primjera:

Budući da će ovaj novi izbornik pune stranice zamijeniti zadani glavni navigacijski izbornik, potrebno je odabrati predložak prazne stranice tako da se zadani navigacijski izbornik ne pojavi na vrhu stranice uz izbornik pune širine. da ću dodati.

Da biste uredili predložak stranice, idite na uređivač stranice i odaberite predložak "prazna stranica" u području Atributi stranice desne bočne trake.

Budući da će ovaj modul prikazati izbornik koji već postoji, važno je da ste ga već kreirali prije dodavanja u modul izbornika pune širine.

Nakon što stvorite svoj izbornik, upotrijebite vizualni alat za izgradnju kako biste dodali odjeljak Fullwidth odmah ispod zaglavlja na stranici. Zatim u odjeljak dodajte modul izbornika pune širine.

Ažurirajte postavke izbornika Fullwidth na sljedeći način:

Opcije sadržaja

Izbornik: [odaberite izbornik koji će se koristiti u modulu] Kontekst: # 333333

Mogućnosti dizajna

Boja teksta: Svijetla Orijentacija teksta: Font središnjeg izbornika: Veličina fonta izbornika Roboto: 20px

To je sve!

trik : Možete koristiti opcije prikaza na kartici Napredno da biste sakrili ovaj izbornik na mobilnom uređaju i prikazali drugačiji izbornik iznad zaglavlja, tako da korisnici mobilnih uređaja mogu vidjeti izbornik bez pomicanja po stranici .

Mogućnosti sadržaja izbornika s punom širinom

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

Meni

Odaberite izbornik koji ćete koristiti u modulu. Pomoću stranice možete stvoriti nove izbornike Izgledi> Izbornici s vaše WordPress nadzorne ploče. Svaki put kada stvorite novi izbornik, izbornik će se moći odabrati s ovog padajućeg izbornika.

Boja pozadine

Prema zadanim postavkama, modul izbornika ima bijelu boju pozadine. Ako želite koristiti drugu boju za pozadinu izbornika, ovdje je možete odabrati pomoću alata za odabir boja.

Boja pozadine padajućeg izbornika

Prema zadanim postavkama padajući izbornici u vašem modulu izbornika nasljeđuju boju pozadine definiranu u prethodnoj postavci. Ako želite da padajući izbornici imaju vlastitu boju, pomoću ove postavke možete odabrati prilagođenu boju.

Boja pozadine izbornika za mobilne uređaje

Na mobilnim uređajima, modul izbornika pretvoren je u drugačiji dizajn i prilagođeniji mobilnom uređaju. Možete kontrolirati boju pozadine padajućeg izbornika za mobilne uređaje neovisno o odgovarajućem računalu.

Oznaka uprave

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 oblikovanja izbornika pune širine

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.

Otvorite podizbornike

Prema zadanim postavkama, svi se podizbornici otvaraju kao padajući izbornik ispod trake glavnog izbornika. Ako svoj izbornik postavite pri dnu stranice, a vaš izbornik sadrži dugačke padajuće izbornike, možda ćete ih htjeti otvoriti iznad modula izbornika, tako da se izbornik ne širi dalje od prozora preglednika.

Izvršite veze izbornika pune širine

Prema zadanim postavkama, veze najviše razine s modulom izbornika nalaze se unutar zadane širine sadržaja. Ako želite ukloniti ovo ograničenje i omogućiti da vaše veze pokreću cijelu širinu stranice, počevši od krajnjeg lijevog dijela zaslona, možete omogućiti ovu opciju.

Boja linije padajućeg izbornika

U padajućim izbornicima veze su odvojene linijom od 1 piksela. Ako želite prilagoditi boju ovog retka, možete odabrati prilagođenu boju pomoću alata za odabir boja u ovoj postavci.

Boja teksta

Ovdje možete odabrati vrijednost svog teksta. Ako radite na tamnoj pozadini, vaš bi tekst trebao biti uključen. Ako radite sa svijetlom pozadinom, tekst bi trebao biti taman.

Tekst orijentacija

Ovo kontrolira kako je tekst poravnat u modulu. Možete birati između Lijeva, Desna i Sredina.

Boja aktivne veze

Boje aktivnih veza istaknute su u modulu izbornika kako bi korisniku pokazale njihovo trenutno mjesto. Pomoću ove postavke možete promijeniti boju isticanja koja se koristi za ove aktivne veze.

Boja teksta padajućeg izbornika

Prema zadanim postavkama, tekst u padajućim izbornicima modula nasljeđuje boju teksta glavnog izbornika. Međutim, možda ćete htjeti promijeniti ovu boju ako ste definirali prilagođenu boju pozadine padajućeg izbornika.

Boja teksta mobilnog izbornika

Prema zadanim postavkama, tekst u padajućim izbornicima modula nasljeđuje boju teksta glavnog izbornika. Međutim, možda ćete htjeti promijeniti ovu boju ako ste postavili prilagođenu boju pozadine mobilnog izbornika.

Font izbornika

Font fonta svog izbornika 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.

Izbornik veličine fonta

Ovdje možete prilagoditi veličinu fonta vašeg izbornika. 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 izbornika

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

Razmak između slova izbornika

Razmak između slova utječe na razmak između svakog slova. Ako želite povećati razmak između svakog slova u numeričkom 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 linije izbornika

Visina retka utječe na razmak između svakog retka vašeg numeričkog teksta 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 mogućnosti izbornika pune širine

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.

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 izborne CSS klase koje ćete koristiti za ovaj modul. CSS klasa može se koristiti za stvaranje prilagođenog CSS stila. Možete dodati više klasa, odvojenih razmakom. Ove se klase mogu koristiti u vašoj podređenoj Divi temi ili u prilagođenoj CSS tablici stilova koju dodate na svoju stranicu ili web mjesto. web stranica pomoću opcija Divi teme 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.

Animacija padajućeg izbornika

Možete birati između različitih animacija koje ćete koristiti kada je omogućen padajući izbornik. Prema zadanim postavkama, animacija je postavljena na blijeđenje, ali vi to mijenjate u: proširivanje, povlačenje ili okretanje.

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]

Kako koristiti modul za navigaciju pune veličine Divi Builder