Chcete přidat responzivní logo do svého modulu Fullwidth Menu divi aby se to přizpůsobilo pohledu na mobilu?
Věděli jste, že více než 50 % z provoz Internet pochází z mobilních zařízení? To znamená, že mobilní verze vašeho Webové stránky je nesmírně důležité a může být dokonce hlavním způsobem, jakým někdo navštíví vaši stránku.
Ujistěte se, že vaše Webové stránky je citlivý a vhodný pro mobilní zařízení je základním krokem při navrhování a Webové stránky.
V tomto tutoriálu vám ukážeme, jak přidat responzivní logo do vašeho modulu Fullwidth Menu pomocí vestavěných responzivních možností divi.
To vám umožní přidat větší nebo složitější logo, které se zobrazí na větších obrazovkách, a menší nebo jednodušší logo, které se zobrazí na menších obrazovkách.
Začněme!
přehled
Zde je náhled toho, co budeme navrhovat. Desktopová verze webu bude mít rozšířené logo s doplňkovým textem a mobilní verze loga bude mít pouze základní logo branding.
Co potřebujete, abyste mohli začít
Vše nejprve nainstalujte a aktivujte téma Divi a ujistěte se, že máte nejnovější verzi divi na vašem webu. Dále se ujistěte, že máte alespoň dvě verze svého loga: jednu pro zobrazení vašeho webu pro počítače a jednu pro mobilní zobrazení. Nakonec si stáhněte šablonu Šablony záhlaví a zápatí pro Divi's High School Layout Pack.
Nyní jste připraveni začít!
Jak přidat responzivní logo do modulu záhlaví s plnou šířkou v Divi
Vytvořte modul Fullwidth Header
Čtěte také: Divi: Jak zobrazit modul Fullwidth Header na celou obrazovku
Přidejte sekci s plnou šířkou
Vzhledem k tomu, že původní nabídka je vytvořena se standardním modulem nabídky, budeme muset upravit rozložení a přidat modul Fullwidth Header.
Nejprve přidejte sekci v plné šířce (Plná šířka) do globálního záhlaví pod stávající nabídkou.
V nastavení sekce plné šířky přejděte na pokročilýA pak Posunujte efekty.
- Sticky Position: Stick to Top
Dále přidejte barvu pozadí.
- Pozadí: #f5f0eb
Přidejte jinou barvu pozadí v lepkavém stavu.
- Pozadí (lepkavé): #ffffff
Přidejte modul Fullwidth Header
Nyní přidáme modul Fullwidth Header.
Otevřete nastavení modulu a odeberte pozadí.
Pro snadnou replikaci vzhledu původní nabídky můžeme použít funkci Kopírovat styly ke zkopírování některých vlastních nastavení.
Otevřete nastavení domovské nabídky a poté klikněte pravým tlačítkem na Text nabídky a zvolte Kopírovat styly textu nabídky.
Po zkopírování klikněte na tři tečky modulu Fullwidth Header a vyberte Předchozí styly textu nabídky.
Nyní zopakujeme stejné kroky s nastavením rozbalovací nabídky.
Opakujte ještě jednou pro ikony.
Nastavte zarovnání textu doprava.
- Zarovnání textu: vpravo
Nastavte maximální výšku loga pod DesignPak Rozměry.
- Maximální výška loga: 50px
Přidejte do sekce následující CSS Odkaz na menu v části Vlastní CSS.
padding-top: 0px;
padding-bottom: 5px;
padding-left: 0.3em;
padding-right: 1.3em;
Nakonec upravte horní a spodní polstrování.
- Padding-Top: 10px
- Padding-Dol: 10px
Nyní odstraňte původní část nabídky.
Přidejte responzivní logo
Nyní přidáme responzivní logo. Naštěstí to Divi usnadňuje díky vestavěným responzivním možnostem.
pod Obsah, otevřete nastavení loga a nahrajte desktopovou verzi svého loga.
Chcete-li použít responzivní možnosti, vyberte ikonu mobilního režimu a poté nahraďte mobilní logo svým responzivním logem.
Vytvořte novou stránku s předdefinovaným rozložením
Chcete-li vidět nabídku v plné šířce s responzivním logem v akci, vytvořte novou stránku s předdefinovaným rozložením z knihovny Divi.
Pro tento návrh budeme používat domovskou stránku střední školy Balíček rozložení pro střední školy aby odpovídalo záhlaví a zápatí.
Přidejte na svůj web novou stránku, pojmenujte ji a poté vyberte možnost Použijte Divi Builder. Protože jsme importovali rozložení záhlaví a zápatí jako globální záhlaví a zápatí, použijte pro tuto stránku výchozí rozložení.
Pro tento příklad použijeme předem připravené rozvržení z knihovny Divi, takže vyberte Procházet rozvržení.
Najděte a vyberte rozvržení Domovská stránka střední školy.
vybrat Použijte toto rozvržení přidat rozvržení na stránku.
Konečný výsledek
Nyní se pojďme podívat na náš finální design.
Stáhněte si DIVI hned teď!!!
Proč investovat do čističky vzduchu?
Mít web optimalizovaný pro mobily a responzivní web je důležitější než kdy jindy. A díky vestavěným responzivním možnostem Divi je sestavení snazší než kdy předtím!
S responzivním logem bude identita vaší značky vždy jasná, bez ohledu na velikost obrazovky.
Doufáme, že vás tento tutoriál inspiruje pro vaše další Divi projekty. Pokud máte nějaké obavy nebo návrhy, najděte nás v sekci komentářů diskutovat o tom.
Můžete se také poradit naše zdroje, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.
Mezitím sdílejte tento článek na různých sociálních sítích.
...
