Oprava menu v Divi

Pokud vytváříte menu v Divi pomocí Tvůrce motivů, zřejmě narazíte na pár nedostatků. Může se vám rozhodit jeho vzhled na menších obrazovkách nebo zjistíte, že se vám část obsahu skryje pod vytvořeným menu. Zde je pár nápadů, které vám můžou pomoct.

Přidání horní mezery pro záhlaví

Jakmile vytvoříte fixované menu, na stránce se toto menu vznáší bez toho, aby zabíralo prostor. Díky tomu vám menu může překrývat obsah stránek. Pokud nechcete, aby fixovaná navigace překrývala některé existující stránky nebo příspěvky, můžete přidat prostor nad obsah stránek. Uděláte to tak, že přidáte globální tělo šablony.

Divi tvůrce šablon

Pokračujte přidáním nového řádku pomocí následující struktury sloupců:

Přidání nového řádku

Zvolte modul „Odeslat obsah“:

Upravte nastavení Řádku a umožněte, aby řádek zabíral celou šířku sekce. Upravte vlastní mezeru mezi sloupci a nastavte maximální šířku na 100% podle obrázku:

Nastavení řádku

Otevřete nastavení u sekce i u řádku a odeberte v řádkování horní a spodní odsazení. Nakonec nastavte okraj sekce tak, aby vám navigace nepřekrývala obsah stránky. To znamená, že by okraj měl mít stejnou výšku jako menu.

Nastavení řádkování v sekci

Jakmile budete mít nastavení hotové uložte jej v tvůrci motivů.

Obsah sloupců vedle sebe

Tento kód zajistí, že se veškerý obsah sloupců zobrazí vedle sebe i na menších obrazovkách. Pokud tento kód nepoužijete, budou se moduly řadit pod sebe.

Kód pro přizpůsobení na mobilní zařízení – přidáme do CSS řádku display: flex;

Přizpůsobení menu pro responzivní design

Fixované menu

Divi v aktuální verzi umožňuje pokročilé pozicování přímo v nastavení sekce, takže následující kód zřejmě nebude potřeba. Ve starších verzích bylo nutné využívat CSS kódu, kterým se menu přilepilo k horní části stránky.

Kód pro přilepené menu na stránce – přidáme do CSS sekce
position: fixed;
top: 0;
left: 0;
right: 0;

Fixované menu

Zajímáte se o WordPress a rádi byste se naučili jak vytvořit kompletní a profesionálně vypadající web? Zkuste můj kurz WordPressu, na kterém se naučíte vše nezbytné pro tvorbu webových stránek.

22. 6. 2020

Divi sleva 20

Další návody

DIVI a 6 nových šablon pro váš blog

DIVI a 6 nových šablon pro váš blog

Společnost Elegant Themes nedávno vydala Divi 4.0, která obsahuje Tvůrce motivů, který vám umožní vytvářet šablony pro jakoukoli z vašich stránek nebo typ příspěvků. Nejen, že můžete vytvořit vlastní záhlaví a zápatí, ale můžete vytvořit vlastní šablonu pro příspěvky...

Změna barvy hamburger menu v DIVI

Změna barvy hamburger menu v DIVI

Možná jste v šabloně Divi narazili na problém, že vaše mobilní menu nemá barvu, kterou potřebujete. Třeba chcete mít barvu mobilního hamburger menu stejnou jako barvu vašich odkazů nebo není hamburger menu vidět, protože má podobnou barvu jako vaše hlavička....

Kontaktní formulář nebo email na WordPress webu?

Kontaktní formulář nebo email na WordPress webu?

Stránka Kontaktujte nás. Je to stránka, kam jdou návštěvníci webu, kteří mají otázky nebo chtějí mluvit s majitelem stránek. Díky této stránce můžete získat nové zakázky. Aby vás zákazníci mohli kontaktovat, můžete využít kontaktní formulář nebo prostě napsat...