Aby vaše stránky vyčnívaly z davu, se někdy snáze řekne, než udělá. Naštěstí se můžete zapojit do DIY přidáním kreativních úprav přizpůsobení, které to zajistí váš blog vyniká od ostatních.

V tomto tutoriálu vám ukážu, jak používat Divi builder k přizpůsobení váš bloga zejména oblast CSS.

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

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.

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.

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.

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.

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:

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

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í.

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řejít na „ Záhlaví a navigace> Prvky záhlaví A zaškrtněte políčko “ Zobrazit sociální ikony ".

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:

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

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.

# 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 pro tento tutoriál vše, doufám, že vám umožní přizpůsobit si menu WordPress blog.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]STÁHNOUT TÉMA DIVI [/vcex_button][/vc_column=][vc_column /1″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=2&url=23065&tid40632=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”1″ style=”flat” custom_background=”#c700e” custom_hover_background=”#4226d8f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]STAŽTE SI TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Ostatní výukové programy Divi

Podobné předměty

3 Komentáře

kokosové ořechy dne 8. ledna 2020 v 22 h 13 min

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
odpověď
Germain Jung 10. října 2018 ve 10 h 20 min

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
odpověď
- Thierry Bertrand 10. října 2018 ve 16 h 32 min
  
  Dobrý den, Germain,
  
  Chcete, aby byla bílá na všech stránkách nebo jen na několika stránkách?
  odpověď