Divi tutorial: Kako koristiti izbornik preko cijelog zaslona

još Blair Jersyer | Divi

Punozaslonski modul Izbornik na Divi olakšava dodavanje lijepih obojenih zaglavlja na vrh stranica (ili bilo gdje na web mjestu, ako želite). Ovi se moduli mogu smjestiti samo u odjeljke pune širine.

modul s punom širinom zaglavlja divi.png

Kako dodati modul Divi preko cijelog zaslona

Prije nego što svojoj stranici možete dodati modul izbornika preko cijelog zaslona, ​​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.

upotrijebite divi builder

Nakon što uđete u Visual Builder, možete kliknuti sivi gumb plus da biste na svoju stranicu dodali novi modul. Novi moduli izbornika preko cijelog zaslona mogu se dodati samo unutar odjeljaka s punom širinom. Ako započinjete novu stranicu, ne zaboravite prvo dodati odjeljak s punom širinom na svoju stranicu.

cijeli izbornik divi.png

Pronađite modul zaglavlja preko cijelog zaslona 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č "zaglavlje cijelog zaslona", a zatim kliknuti "Enter" da biste automatski pronašli i dodali modul zaglavlja cijelog zaslona! 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 zaglavlja preko cijelog zaslona na stranicu O stranici

U ovom primjeru pokazat ću vam kako pomoću modula zaglavlja Fullwidth dodati zaglavlje s prilagođenim tekstom i pozadinskom slikom.

Svi moduli preko cijelog zaslona dostupni su samo kada se koriste cjeloviti odjeljci. Pomoću Visual Builder-a umetnite novi odjeljak preko cijelog zaslona. Zatim dodajte modul Person u odjeljak.

Ažurirajte postavke zaglavlja na cijelom zaslonu kako slijedi:

Opcije sadržaja

Naslov: O nama Tekst podnaslova: Razlikujemo stvari ... URL pozadinske slike: [umetanje slike 1920 x 800] Prekrivna pozadina Boja: rgba (0,0,0,0.2 , XNUMX)

Mogućnosti dizajna

Orijentacija teksta i logotipa: Srednji gumb Gumb za pomicanje prema dolje: DA Ikona: [ikona za odabir] Ikona za pomicanje prema dolje Boja: # fcbf00 Ikona pomicanja: 50px Boja teksta: Boja svijetlog teksta: # fcbf00 Font Naslov: Otvoreno bez, podebljano, velika slova Veličina fonta naslova: 60px (radna površina), 40px (tablet), 30px (telefon) Veličina fonta titla: 25px

Napredne opcije (prilagođeni CSS)

Glavni element:
presvlake: 100px 0;

divi modul punog zaslona.png

To je sve!

primjer zaglavlja divi.jpg

Opcije sadržaja zaglavlja na cijelom zaslonu

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.

sadržaj divi.png

Naslov

Ovdje unesite naslov svoje stranice.

Tekst podnaslova

Ako želite koristiti podnaslov, dodajte ga ovdje. Natpis će se pojaviti ispod vašeg naslova malim fontom.

Gumb # 1 tekst

Unesite tekst gumba.

Gumb # 2 tekst

Unesite tekst gumba.

Sadržaj

Ovdje možete definirati sadržaj koji će biti smješten ispod zaglavlja i teksta naslova.

URL gumba 1

Unesite URL gumba.

URL gumba 2

Unesite URL gumba.

URL slike logotipa

Prenesite željenu sliku ili unesite URL slike koju želite pregledati.

URL slike zaglavlja

Prenesite željenu sliku ili unesite URL slike koju želite pregledati.

URL pozadinske slike

Ako se postavi, ova će se slika koristiti kao pozadina ovog modula. Da biste uklonili pozadinsku sliku, samo uklonite URL iz polja postavki. Pozadinske slike pojavit će se na vrhu pozadinskih boja, što znači da boja pozadine neće biti vidljiva kada se primijeni pozadinska slika.

Boja pozadine

Definirajte prilagođenu boju pozadine za svoj modul ili ostavite prazno da biste koristili zadanu boju.

Boja presvlake u pozadini

Odaberite boju pozadinskog sloja koja će biti postavljena iznad pozadinske slike. Poluprozirne prekrivene slike mogu stvoriti neke sjajne efekte kada se postave na pozadinu slika.

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 dizajna zaglavlja 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.

modul za dizajn sekcije pune širine divi.png

Orijentacija teksta i logotipa

Ovo kontrolira kako je vaš tekst poravnat u modulu.

Napravite cijeli zaslon

Ovdje možete odabrati hoće li se zaglavlje proširiti na cijelu veličinu zaslona.

Koristite Parallax efekt

Ako je omogućeno, vaše će pozadinske slike imati fiksni položaj poput vašeg pomicanja, stvarajući zabavan efekt paralakse.

Parallax metoda

Definirajte metodu koja se koristi za efekt paralaksa.

Prikaži gumb za pomicanje prema dolje

Ovdje možete odabrati hoće li se prikazati gumb za pomicanje prema dolje.

ikona

Odaberite ikonu za prikaz gumba za pomicanje prema dolje.

Pomičite se prema ikoni u boji

Prema zadanim postavkama, padajuća ikona nasljeđuje boju teksta zaglavlja (bijela ili siva). Ovu boju možete promijeniti podešavanjem boje u ovoj opciji pomoću alata za odabir boja.

Pomaknite se prema dolje veličine ikone

Ovu postavku koristite za povećanje ili smanjenje veličine ikone za pomicanje prema dolje koja se pojavljuje na dnu zaglavlja.

divi modul poravnavanja pune širine u glavnom.png

Okomito poravnanje slike

Ovo kontrolira orijentaciju slike u modulu.

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.

Okomito poravnanje teksta

Ova postavka određuje okomito poravnanje vašeg sadržaja. Sadržaj se može centrirati okomito ili poravnati na dnu.

Font naslova

Možete promijeniti font naslova 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 slova naslova

Ovdje možete prilagoditi veličinu teksta naslova. Možete povući klizač raspona 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 jedinice mjere, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em".

Boja teksta naslova

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

Razmak naslovnih slova

Razmak između slova utječe na razmak između svakog slova. Ako želite povećati razmak između svakog slova u tekstu naslova, 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.

naslovni sectio dizajn modul u glavu preko cijelog zaslona divi.png

Visina naslovnice

Visina retka utječe na razmak između svakog retka teksta vašeg naslova. 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 mjerne jedinice, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em", ovisno o vrijednosti vaše veličine.

Font sadržaja

Font teksta sadržaja 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 slova sadržaja

Ovdje možete prilagoditi veličinu teksta sadržaja. 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 sadržaja

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

Razmaknica slova sadržaja

Razmak između slova utječe na razmak između svakog slova. Ako želite povećati razmak između svakog slova u tekstu vašeg sadržaja, 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 retka sadržaja

Visina retka utječe na razmak između svakog retka teksta vašeg sadržaja 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.

Font slova

Font teksta opisa 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 slova podnaslova

Ovdje možete prilagoditi veličinu teksta opisa. 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 podnaslova

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

Razmak slova titlova

Razmak između slova utječe na razmak između svakog slova. Ako želite povećati razmak između svakog slova u tekstu vašeg naslova, upotrijebite klizač raspona da 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 titlova

Visina retka utječe na razmak između svakog retka teksta vašeg opisa. 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 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.

Maksimalna širina teksta

Pomoću ove postavke smanjite maksimalnu širinu teksta u zaglavnom modulu. Na primjer, vrijednost od 50% osigurat će da tekst nikada ne prelazi 50% širine ukupnog modula zaglavlja.

modul odjeljka divi head full width.png

Upotrijebite prilagođene stilove za gumb

Omogućavanjem ove opcije otkrivaju se razne postavke prilagodbe gumba pomoću kojih možete promijeniti izgled gumba vašeg modula.

Veličina teksta gumba

Ova se postavka može koristiti za povećanje ili smanjenje veličine teksta na gumbu. Gumb se prilagođava kako se veličina teksta povećava i smanjuje.

Boja teksta gumba

Prema zadanim postavkama, gumbi usvajaju boju naglaska vaše teme kako je definirano u programu za prilagođavanje tema. Ova vam opcija omogućuje da gumbu ovog modula dodijelite prilagođenu boju teksta. Odaberite prilagođenu boju pomoću alata za odabir boje da biste promijenili boju gumba.

Boja pozadine gumba

Prema zadanim postavkama, gumbi imaju prozirnu boju pozadine. To se može promijeniti odabirom željene boje pozadine iz alata za odabir boja.

Gumb Širina granice

Svi Divi gumbi prema zadanim postavkama imaju obrub od 2 piksela. Ova se granica može povećati ili smanjiti pomoću ove postavke. Granice se mogu ukloniti unosom vrijednosti 0.

Boja rubova gumba

Prema zadanim postavkama obrubi gumba usvajaju boju naglaska vaše teme kako je definirano u programu za prilagođavanje tema. Ova vam opcija omogućuje da gumbu ovog modula dodijelite prilagođenu boju obruba. Odaberite prilagođenu boju pomoću alata za odabir boja da biste promijenili boju obruba gumba.

Radijus graničnika gumba

Polumjer obruba utječe na zaobljenost kutova gumba. Prema zadanim postavkama, gumbi u Diviu imaju mali radijus obruba koji zaokružuje uglove za 3 piksela. Ovu vrijednost možete smanjiti na 0 da biste stvorili kvadratni gumb ili ga znatno povećali da biste stvorili gumbe s kružnim rubovima.

Razmaknica slova gumba

Razmak između slova utječe na razmak između svakog slova. Ako želite povećati razmak između svakog slova u tekstu gumba, 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.

Tipka gumba

Font teksta gumba 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.

Dodajte ikonu gumba

Onemogućeno, ova postavka uklonit će ikone s vašeg gumba. Prema zadanim postavkama, svi Divi gumbi prikazuju ikonu strelice na lebdenju.

Ikona gumba

Ako su ikone omogućene, pomoću ove postavke možete odabrati ikonu koju ćete koristiti na svojem gumbu. Divi ima različite ikone na izbor.

Gumb ikone u boji

Prilagodba ove postavke promijenit će boju ikone koja se pojavljuje na vašem gumbu. Prema zadanim postavkama boja ikone jednaka je boji teksta gumba, ali ova postavka omogućuje vam neovisno podešavanje boje.

Gumb za postavljanje ikona

Možete odabrati prikaz ikone gumba s lijeve ili desne strane gumba.

Pokažite ikonu samo kad zadržite pokazivač iznad gumba

Prema zadanim postavkama ikone gumba prikazuju se samo kada lebdite. Ako želite da se ikona uvijek prikazuje, isključite ovu postavku.

Boja teksta na gumbu

Kad mišem zadržite pokazivač iznad gumba, koristit će se ova boja. Boja će se promijeniti od osnovne boje definirane u prethodnim postavkama.

Boja pozadine gumba za lebdenje (boja gumba za pokazivanje)

Kad mišem zadržite pokazivač iznad gumba, koristit će se ova boja. Boja će se promijeniti od osnovne boje definirane u prethodnim postavkama.

Gumb za preusmjeravanje rubova boja (boja graničnika uz zadržavanje)

Kad mišem zadržite pokazivač iznad gumba, koristit će se ova boja. Boja će se promijeniti od osnovne boje definirane u prethodnim postavkama.

Gumb za zaobljenje graničnog polumjera

Kad se mišem zadrži pokazivač iznad gumba, koristit će se ova vrijednost. Vrijednost će se promijeniti od osnovne vrijednosti definirane u prethodnim postavkama.

Tipka razmaka razmaka

Kad se mišem zadrži pokazivač iznad gumba, koristit će se ova vrijednost. Vrijednost će se promijeniti od osnovne vrijednosti definirane u prethodnim postavkama.

Napredne opcije zaglavlja 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.

modul naslov divi sekcije advance.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 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.

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

4 Komentari

  1. Nick Freund
    Nick Freund 7. siječnja 2023. u 5:54

    Hvala vam na ovoj informaciji, zapravo sam tražio mogućnost postavljanja izbornika na sliku bez aktiviranja područja zaglavlja u Diviju. Je li moguće?

    odgovor
    • Thierry Bertrand
      Thierry Bertrand 8. siječnja 2023. u 6:25

      Ovu opciju još nismo testirali.

      odgovor
  2. DESI GRAF
    DESI GRAF 15. veljače 2021. u 13 h 17 min

    Bok
    Hvala na članku, je li moguće dodati 3. gumb "Tekst gumba # 3" ako je moguće, kako?
    CDt,

    odgovor
  3. Raul
    Raul 7. lipnja 2020. u 18 h 47 min

    Naslov govori o izborniku, a sadržaj je blok pune širine ...

    odgovor

Objavi komentar

Vaša email adresa neće biti objavljena. Obavezna polja su označena *

Ova web stranica koristi Akismet kako bi smanjila neželjene. Saznajte više o načinu upotrebe podataka o vašim komentarima.