Přejít k hlavnímu obsahu

Jak změnit barvu menu mezi stránkami Divi

Divi: nejjednodušší téma WordPress k použití

Divi: Nejlepší WordPress téma všech dob!

více Stahování 901.000, Divi je nejoblíbenější téma WordPress na světě. Je kompletní, snadno použitelný a je dodáván s více než šablonami 62 zdarma. [Doporučeno]

Někdy je snazší než vyřídit, aby se vaše stránka vymykala z davu. Naštěstí se můžete zapojit do hraní malého drotáře přidáním kreativních doteků personalizace, díky nimž váš blog vynikne nad ostatními.

V tomto tutoriálu vám ukážu, jak pomocí Builderu Divi přizpůsobit váš blog, zejména oblast CSS.

Toto je region, o kterém mluvím:

Vlastní sekce pro tvorbu CSS WordPress

To znamená, že jakékoli změny, které zde provedeme, se projeví pouze na stránce, kterou upravujeme. Je to neuvěřitelně zajímavá a užitečná funkce!

Zde je konečný výsledek, který budeme mít na konci tohoto tutoriálu. Barva pozadí navigační nabídky, která se mění v závislosti na navštívené stránce. Jako další možnost si všimnete, že ikony také změní barvu.

Ikona, která mění barvu divi

Nejprve ukážu, jak použít barvu pozadí v nabídce. Pak vám zvlášť ukážu, jak zajistit, aby se sociální ikony shodovaly.

Pokud jste si ještě nečetli náš tutoriál o prezentace tématu WordPress Divi, Vyzývám vás, abyste to udělali.

Začněme!

Aplikovat barvy na menu

Nejprve používám výchozí formát záhlaví. Pokud používáte jiný formát, měl by tento tutoriál stále platit, protože generické ID „divs“ v Divi je, pokud vím, stejné pro všechny formáty (# main-header). Pokud máte problémy s jinými formáty.

Formát záhlaví Divi

Vytvořte si snadno svůj web pomocí Elementoru

Elementor vám umožní snadno vytvořit jakýkoli design webových stránek s profesionálním vzhledem. Přestaňte platit drahé za to, co můžete udělat sami. [Zdarma]

Musíme zajistit, aby se odkazy objevily dole. Barvy, které jsem si vybral, které najdete na Coolors.co, pokud je chcete použít, jsou na tmavší straně, takže musím udělat textový odkaz světlou barvou. Rozhodl jsem se pro bílou barvu.

Personalizace nabídky divi

Používám rgba (255,255,255,0.6), což bude barva odkazu a tmavě bílá jako barva aktivního odkazu (pro požadovaný vizuální efekt)

Poté přejděte na stránku, na kterou chcete použít první změnu (měli byste vidět odkazy v menu na místě). Kliknutím na ikonu „3 řádky“ se zobrazí okno s možnostmi.

Tvůrce Wordpress Divi

Do tohoto pole nyní přidejte následující CSS:

# Hand-header {background: #474f61; }

Měli byste mít něco podobného, ​​nezapomeňte změnit hexadecimální kód na libovolnou barvu, kterou chcete:

Nastavení divi přizpůsobení barev

Klikněte na Uložit a aktualizovat A to se bude vztahovat na hlavní nabídku, vše v jednom řádku kódu.

Hledáte ty nejlepší témata a pluginy aplikace WordPress?

Stáhněte si ty nejlepší pluginy a témata aplikace WordPress na Envato a snadno si vytvořte své webové stránky. Již více než stahování 49.720.000. [EXCLUSIVE]

Nyní stačí přidat stejný kód pro všechny vaše stránky a pokaždé změnit hexadecimální kód.

Ikony sociálních sítí (volitelné)

V této části se chystáme upravit kód, který jsme již udělali, poté přidat nějaký kód na úrovni CSS webu a vysvětlím, proč by měl být na jednotlivé stránky přidán nějaký CSS a proč by některé neměly být být.

Nejprve se musíte ujistit, že jste nastavili své sociální vazby. Přejít na „ Možnosti Divi> Obecné téma A přidejte své adresy URL na své stránky sociálních médií.

Sociální divi ikona

Poté přejděte na své nastavení na sekundární liště nabídek a nastavte barvy pozadí a textu. Jako barvu textu volím „bílou“, protože ke každé sociální ikoně přidám kulaté barevné pozadí, aby odpovídalo nové barvě nabídky, aby se ikona mohla objevit.

Přizpůsobení sekundární nabídky

Přejít na „ Záhlaví a navigace> Prvky záhlaví A zaškrtněte políčko “ Zobrazit sociální ikony ".

Prvek záhlaví Divi WordPress

Pamatujete si, jak jsme přidali CSS na každou stránku? Vrátíme se zpět a upravíme to, co jsme napsali dříve. Nahraďte, co tam máte, následujícím CSS, nebo pokud víte, co je jiné, můžete jednoduše přidat další kód.

# Hand-header, # .a top-header-sociální-ikonu {background: #474f61; }

Tento kód umožní našemu webu nejen změnit barvu pozadí nabídky na této stránce, ale také pozadí našich sociálních ikon. Právě jsme do mixu přidali další prvek. Měli byste mít něco, co vypadá takto:

Vlastní editor CSI divi motivů

Možná budete muset zkontrolovat, zda jsou hexadecimální barvy na každé stránce správné.

Snadno vytvořte svůj online obchod

Stáhněte si zdarma WooCommerce, nejlepší e-commerce pluginy pro prodej vašich fyzických a digitálních produktů na WordPress. [Doporučeno]

Obecné CSS

Následující kód bude ve vašem Možnost motivu> rámeček CSS Nebo ve stylovém souboru dětského motivu.

Možnosti motivu divi css vlastní sekce

# Top-header-social-ikony .a li {margin-left: 5px; } # .a top-header-sociální-ikonu {padding: 4px; margin-bottom: 8px; šířka: 30px; výška: 30px; border-radius: 50%; line-výška: 24px; }

Možná vás zajímá, proč tomu tak není v krabici CSS na stránce. Důvod je ten, že tento konkrétní kód ovlivňuje všechny cílené prvky, takže je neefektivní umístit přesně stejný kód na více místech. Na stránku se změní pouze barva pozadí, ale tento kód se na stránce nezmění. Je to jen nejlepší postup, jak se vyhnout přidávání váhy na váš web.

To je vše pro tento tutoriál, doufám, že vám to umožní přizpůsobit nabídky na vašem blogu WordPress.

Ostatní výukové programy Divi

Tento článek obsahuje komentáře 3

  1. Dobrý den,

    Děkuji za všechny vaše návody.
    Víte, jestli můžeme umístit dílčí nabídku divi (druhá úroveň pod rozevírací nabídku) do šířky výplně? který zabírá celou šířku stránky

  2. Dobrý den,

    Jak postupujete při změně barvy textu v hlavní záhlaví? S průhledným pozadím (na mém hlavním záhlaví) je barva písma, kterou jsem si vybral (na mém hlavním záhlaví, které představuje mé různé sekce) přes rozhraní přizpůsobení divi, černé. Chtěl bych však, aby to na některých STRÁNKÁCH bylo bílé, protože níže uvedená fotka je příliš tmavá.

    Jak?

    Předem děkuji

Zanechat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinné položky jsou označeny *

Tato stránka používá společnost Akismet ke snížení nežádoucích účinků. Přečtěte si další informace o tom, jak se používají vaše komentáře.

Zpět na začátek
22 akcie
podíl13
tweet2
Zadat7