Želite li dodati responzivni logotip svom modulu Fullwidth Menu od Divi tako da se prilagođava prikazu na mobitelu?
Jeste li znali da više od 50% od promet Internet dolazi s mobilnih uređaja? To znači da mobilna verzija vašeg web stranica je izuzetno važan i čak može biti glavni način na koji će netko posjetiti vašu stranicu.
Provjerite svoje web stranica je responzivan i prilagođen mobilnim uređajima bitan je korak u dizajniranju web stranica.
U ovom vodiču pokazat ćemo vam kako dodati responzivni logotip vašem modulu Fullwidth Menu koristeći ugrađene responzivne opcije Divi.
To će vam omogućiti da dodate veći ili složeniji logotip koji će se pojaviti na većim zaslonima i manji ili jednostavniji logotip koji će se pojaviti na manjim zaslonima.
Započnimo!
pregled
Evo pregleda onoga što ćemo dizajnirati. Desktop verzija web stranice imat će prošireni logo s dodatnim tekstom, a mobilna verzija logotipa imat će samo osnovni logotip.
Što trebate za početak
Sve prvo instalirajte i aktivirajte Divi temu i provjerite imate li najnoviju verziju Divi na vašoj web stranici. Zatim provjerite imate li najmanje dvije verzije svog logotipa: jednu za desktop prikaz vaše stranice i jednu za mobilni prikaz. Na kraju preuzmite predložak Predlošci zaglavlja i podnožja za Divi's High School Layout Pack.
Sada ste spremni za početak!
Kako dodati responzivni logotip vašem modulu zaglavlja pune širine u Diviju
Stvorite modul Fullwidth Header
Pročitajte također: Divi: Kako prikazati modul Fullwidth Header na cijelom zaslonu
Dodajte odjeljak pune širine
Budući da je izvorni izbornik napravljen sa standardnim modulom izbornika, morat ćemo izmijeniti izgled kako bismo dodali modul Fullwidth Header.
Prvo dodajte odjeljak pune širine (Puna širina) u globalno zaglavlje ispod postojećeg izbornika.
U postavkama odjeljka pune širine idite na napredanI onda Pomaknite se efekti.
- Ljepljiva pozicija: Drži se vrha
Zatim dodajte boju pozadine.
- Pozadina: #f5f0eb
Dodajte drugu boju za pozadinu u ljepljivom stanju.
- Pozadina (ljepljiva): #ffffff
Dodajte modul zaglavlja pune širine
Sada dodajmo modul Fullwidth Header.
Otvorite postavke modula i uklonite pozadinu.
Kako bismo jednostavno replicirali izgled izvornog izbornika, možemo upotrijebiti značajku Copy Styles za kopiranje nekih prilagođenih postavki.
Vidi također: Divi: Kako promijeniti gradijent pozadine dok lebdite
Otvorite postavke početnog izbornika, zatim desnom tipkom miša kliknite Izbornik teksta i odaberite Kopiraj stilove teksta izbornika.
Nakon kopiranja kliknite na tri točke modula Fullwidth Header, a zatim odaberite Prošli stilovi teksta izbornika.
Sada ćemo ponoviti iste korake s postavkama padajućeg izbornika.
Ponovite još jednom za ikone.
Postavite poravnanje teksta udesno.
- Poravnanje teksta: desno
Postavite maksimalnu visinu logotipa ispod dizajnZatim dimenzioniranje.
- Maksimalna visina logotipa: 50 px
Dodajte sljedeći CSS u odjeljak Izbornik veza pod Prilagođeni CSS.
padding-top: 0px;
padding-bottom: 5px;
padding-left: 0.3em;
padding-right: 1.3em;
Na kraju prilagodite gornju i donju podstavu.
- Gornja podstava: 10 px
- Padding-Dno: 10px
Sada izbrišite izvorni odjeljak izbornika.
Dodajte odgovarajući logotip
Sada ćemo dodati responzivni logo. Srećom, Divi to olakšava s ugrađenim responzivnim opcijama.
Sous Sadržaj, otvorite postavke logotipa i prenesite desktop verziju svog logotipa.
Odaberite ikonu mobilnog načina rada za korištenje responzivnih opcija, a zatim zamijenite mobilni logotip svojim responzivnim logotipom.
Napravite novu stranicu s unaprijed definiranim izgledom
Da biste vidjeli izbornik pune širine s responzivnim logotipom na djelu, stvorimo novu stranicu s unaprijed definiranim izgledom iz biblioteke Divi.
Za ovaj dizajn koristit ćemo početnu stranicu srednje škole Srednjoškolski paket rasporeda da odgovaraju zaglavlju i podnožju.
Dodajte novu stranicu na svoju web stranicu i dodijelite joj naslov, a zatim odaberite opciju Koristite Divi Builder. Budući da smo raspored zaglavlja i podnožja uvezli kao globalno zaglavlje i podnožje, upotrijebite zadani izgled za ovu stranicu.
Za ovaj ćemo primjer koristiti unaprijed izrađeni izgled iz biblioteke Divi, pa odaberite Pregledaj rasporede.
Pronađite i odaberite izgled Početna stranica srednje škole.
odabrati Koristite ovaj izgled da biste dodali izgled svojoj stranici.
Konačni rezultat
Sada pogledajmo naš konačni dizajn.
Preuzmite DIVI sada!!!
Zaključak
Imati web-mjesto prilagođeno mobilnim uređajima i responzivno važnije je nego ikada. A zahvaljujući Divi ugrađenim responzivnim opcijama, izgradnja jednog je lakša nego ikada!
S responzivnim logotipom, identitet vaše marke uvijek će biti jasan, bez obzira na veličinu zaslona.
Nadamo se da će vas ovaj vodič inspirirati za vaše sljedeće Divi projekte. Ako imate nedoumica ili prijedloga, potražite nas odjeljak komentara raspravljati o tome.
Također se možete konzultirati naši resursi, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem na internetu Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.
Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...
