Chcete pridať responzívne logo do svojho modulu ponuky s plnou šírkou divi aby sa to prispôsobilo pohľadu na mobile?
Vedeli ste, že viac ako 50% z prevádzka Internet pochádza z mobilných zariadení? To znamená, že mobilná verzia vášho webové stránky je mimoriadne dôležitá a môže byť dokonca hlavným spôsobom, akým niekto navštívi vašu stránku.
Uistite sa, že vaše webové stránky je citlivý a vhodný pre mobilné zariadenia je základným krokom pri navrhovaní a webové stránky.
V tomto návode vám ukážeme, ako pridať responzívne logo do vášho modulu Fullwidth Menu pomocou vstavaných responzívnych možností divi.
To vám umožní pridať väčšie alebo zložitejšie logo, ktoré sa zobrazí na väčších obrazovkách, a menšie alebo jednoduchšie logo, ktoré sa zobrazí na menších obrazovkách.
Začnime!
prehľad
Tu je ukážka toho, čo budeme navrhovať. Desktopová verzia webu bude mať rozšírené logo s doplnkovým textom a mobilná verzia loga bude mať len základné logo brandingu.
Čo potrebujete, aby ste začali
Všetko najprv si nainštalujte a aktivujte tému Divi a uistite sa, že máte najnovšiu verziu divi na vašom webe. Ďalej sa uistite, že máte aspoň dve verzie svojho loga: jednu pre zobrazenie vášho webu na počítači a jednu pre mobilné zobrazenie. Nakoniec si stiahnite šablónu Šablóny hlavičky a päty pre Divi's High School Layout Pack.
Teraz ste pripravení začať!
Ako pridať responzívne logo do modulu hlavičky s plnou šírkou v Divi
Vytvorte modul Fullwidth Header
Čítajte tiež: Divi: Ako zobraziť modul Fullwidth Header na celej obrazovke
Pridajte celú šírku sekcie
Keďže pôvodné menu je vytvorené so štandardným modulom menu, budeme musieť upraviť rozloženie, aby sme pridali modul Fullwidth Header.
Najprv pridajte sekciu s plnou šírkou (Plná šírka) do globálnej hlavičky pod existujúcou ponukou.
V nastaveniach sekcie plnej šírky prejdite na pokročilýA potom Efekty posúvania.
- Lepiaca pozícia: Držte sa navrchu
Ďalej pridajte farbu pozadia.
- Pozadie: #f5f0eb
Pridajte inú farbu pozadia v lepkavom stave.
- Pozadie (lepkavé): #ffffff
Pridajte modul hlavičky s plnou šírkou
Teraz pridajme modul Fullwidth Header.
Otvorte nastavenia modulu a odstráňte pozadie.
Aby sme jednoducho replikovali vzhľad pôvodnej ponuky, môžeme použiť funkciu Kopírovať štýly na skopírovanie niektorých vlastných nastavení.
Pozri tiež: Divi: Ako zmeniť gradient pozadia pri umiestnení kurzora myši
Otvorte nastavenia domovskej ponuky a potom kliknite pravým tlačidlom myši Textové menu a vyberte položku Kopírovať štýly textu ponuky.
Po skopírovaní kliknite na tri bodky modulu Fullwidth Header a potom vyberte Minulé štýly textu ponuky.
Teraz zopakujeme rovnaké kroky s nastaveniami rozbaľovacej ponuky.
Opakujte ešte raz pre ikony.
Nastavte zarovnanie textu doprava.
- Zarovnanie textu: vpravo
Nastavte maximálnu výšku loga pod dizajnPotom Dimenzovanie.
- Maximálna výška loga: 50px
Do sekcie pridajte nasledujúci CSS Odkaz na menu v časti Custom CSS.
padding-top: 0px;
padding-bottom: 5px;
padding-left: 0.3em;
padding-right: 1.3em;
Nakoniec upravte vrchnú a spodnú výplň.
- Padding-Top: 10px
- Výplň dole: 10 pixelov
Teraz odstráňte pôvodnú časť ponuky.
Pridajte responzívne logo
Teraz pridáme responzívne logo. Našťastie to Divi uľahčuje vďaka vstavaným responzívnym možnostiam.
pod obsah, otvorte nastavenia loga a nahrajte počítačovú verziu svojho loga.
Ak chcete použiť responzívne možnosti, vyberte ikonu mobilného režimu a potom nahraďte mobilné logo svojim responzívnym logom.
Vytvorte novú stránku s preddefinovaným rozložením
Ak chcete vidieť ponuku na celú šírku s responzívnym logom v akcii, vytvorte novú stránku s preddefinovaným rozložením z knižnice Divi.
Pre tento dizajn budeme používať stredoškolskú domovskú stránku Balík s rozložením pre strednú školu aby sa zhodovali s hlavičkou a pätou.
Pridajte na svoj web novú stránku, pomenujte ju a potom vyberte možnosť Použite Divi Builder. Keďže sme rozloženie hlavičky a päty importovali ako globálnu hlavičku a pätu, použite pre túto stránku predvolené rozloženie.
Pre tento príklad použijeme vopred pripravené rozloženie z knižnice Divi, takže vyberte Prehľadávať rozloženia.
Nájdite a vyberte rozloženie Domovská stránka strednej školy.
vybrať Použite toto rozloženie pridajte rozloženie na svoju stránku.
Konečný výsledok
Teraz sa poďme pozrieť na náš finálny dizajn.
Stiahnite si DIVI teraz!!!
záver
Mať web vhodný pre mobilné zariadenia a reagovať naň je dôležitejšie ako kedykoľvek predtým. A vďaka vstavaným možnostiam reakcie od Divi je jeho zostavenie jednoduchšie ako kedykoľvek predtým!
S responzívnym logom bude identita vašej značky vždy jasná, bez ohľadu na veľkosť obrazovky.
Dúfame, že vás tento návod inšpiruje pre vaše ďalšie Divi projekty. Ak máte nejaké obavy alebo návrhy, nájdite nás v časť s komentármi diskutovať o tom.
Môžete sa tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.
Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.
...
