Dosiahnuť, aby vaša stránka vynikla z davu, sa niekedy ľahšie povie, ako urobí. Našťastie sa môžete zapojiť do DIY pridaním kreatívnych úprav prispôsobenia, ktoré to zabezpečia váš blog vyniká od ostatných.

V tomto návode vám ukážem, ako použiť Divi builder na prispôsobenie váš bloga najmä oblasť CSS.

Toto je región, o ktorom hovorím:

To znamená, že všetky zmeny, ktoré tu urobíme, budú účinné iba na stránke, ktorú upravujeme. Toto je neuveriteľne zaujímavá a užitočná funkcia!

Toto je konečný výsledok, ktorý budeme mať na konci tohto tutoriálu. Farba pozadia navigačnej ponuky sa mení v závislosti od navštívenej stránky. Ako ďalšiu možnosť si všimnete, že ikony tiež menia farbu.

Najskôr ukážem, ako použiť farbu pozadia v ponuke. Potom vám osobitne ukážem, ako dosiahnuť zhodu sociálnych ikon.

Ak ste si ešte neprečítali náš tutoriál o prezentácia témy WordPress Divi, Pozývam vás, aby ste to urobili.

Začnime!

Použiť farby menu

Najskôr používam predvolený formát hlavičky. Ak používate iný formát, tento návod by mal byť stále efektívny, pretože generické ID „divs“ v Divi je, pokiaľ viem, rovnaké pre všetky formáty (# main-header). Ak máte problémy s inými formátmi.

Musíme sa uistiť, že sa odkazy zobrazujú v dolnej časti. Farby, ktoré som si vybral a ktoré nájdete na Coolors.co, ak ich chcete použiť, sú na tmavšej strane, takže musím urobiť textový odkaz svetlou farbou. Ja som sa rozhodol pre bielu farbu.

Používam rgba (255,255,255,0.6), ktorá bude farbou odkazu a tmavo bielou farbou aktívneho odkazu (pre požadovaný vizuálny efekt)

Potom prejdite na stránku, na ktorú chcete použiť prvú zmenu (mali by ste vidieť odkazy v menu na mieste). Kliknutím na ikonu „3 riadky“ sa zobrazí okno s možnosťami.

Do tohto poľa teraz pridajte nasledujúce CSS:

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

Mali by ste mať niečo podobné, nezabudnite zmeniť hexadecimálny kód na ľubovoľnú farbu:

Kliknite na Uložte a aktualizujte A to sa bude vzťahovať na hlavné menu, všetko v jednom riadku kódu.

Teraz stačí pridať rovnaký kód pre všetky vaše stránky a zakaždým zmeniť hexadecimálny kód.

Ikony sociálnych sietí (voliteľné)

V tejto časti budeme modifikovať kód, ktorý sme už urobili, potom pridajte nejaký kód na úroveň CSS webu a vysvetlím, prečo by sa mal na jednotlivé stránky pridať nejaký CSS a prečo by niektoré nemali byť. byť.

Najprv sa musíte uistiť, že ste si nastavili svoje sociálne prepojenia. Choďte na „ Možnosti Divi> Všeobecná téma A pridajte svoje URL na svoje stránky sociálnych médií.

Potom prejdite na svoje nastavenia na sekundárnom paneli s ponukami a nastavte farby pozadia a textu. Ako farbu textu vyberám „bielu“, pretože ku každej sociálnej ikone pridám okrúhle farebné pozadie, aby zodpovedalo novej farbe ponuky, aby sa ikona mohla zobraziť.

Choďte na „ Hlavička a navigácia> Prvky hlavičky A začiarknite políčko “ Zobraziť sociálne ikony ".

Pamätáte si, ako sme pokračovali v pridávaní CSS na každú stránku? Vrátime sa a upravíme to, čo sme predtým napísali. Nahraďte to, čo máte, nasledujúcim CSS, alebo ak zistíte, čo je iné, môžete jednoducho pridať ďalší kód.

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

Tento kód umožní našej stránke zmeniť nielen farbu pozadia ponuky na tejto stránke, ale aj pozadie našich sociálnych ikon. Do zmesi sme práve pridali ďalší prvok. Mali by ste mať niečo, čo vyzerá takto:

Možno bude potrebné skontrolovať, či sú hexadecimálne farby na každej stránke správne.

Všeobecné CSS

Nasledujúci kód bude vo vašom „ Voľba témy> rámček CSS Alebo v súbore štýlov detskej témy.

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

Možno sa čudujete, prečo to tak nie je v poli CSS na stránke. Dôvod je ten, že tento konkrétny kód ovplyvňuje všetky cieľové prvky, takže je neefektívne umiestňovať presne ten istý kód na viac miest. Na stránke sa mení iba farba pozadia, ale tento kód sa na stránke nemení. Je to len najlepší postup, ako sa vyhnúť zvyšovaniu váhy na vašom webe.

To je všetko pre tento návod, dúfam, že vám umožní prispôsobiť 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”]STIAHNUŤ TÉMU DIVI [/vcex_button][/vc_column=][vc_column width] /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”]STIAHNUŤ TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Ďalšie výukové programy spoločnosti Divi

• 5 webové stránky pre použitie v hoteli Divi tému
• Ako pridať text na produktoch Divi WooCommerce
• Ako zmeniť farbu ponuky medzi stránkami Divi
• Ako si prispôsobiť mriežky blogu s Divi
• Ako používať role Divi editor na WordPress
• Ako vytvoriť posuvník Divi na celej obrazovke
• Ako zmeniť farbu ponúk medzi stránkami Divi
• Funkcie, ktoré pravdepodobne neviete o Divi
• Ako používať Divi Builder na WordPress
• Ako používať modul posúvania videa Divi
• Ako používať modul Divi Builder Flip
• Ako pridať modul posudkov na Divi Builder
• Ako používať textový modul Divi
• Ako vytvoriť posúvač na Divi
• Ako upraviť rolu používateľa Divi
• Ako používať modul Divi Social Media
• Ako používať modul obchodu na tému WordPress Divi
• Ako používať modul bočného panela Divi
• Ako používať modul tabuľky cien Divi
• Ako používať titulný modul publikácií Divi
• Ako pridať video modul Divi
• Ako používať navigačný modul článku
• Ako používať vyhľadávací modul Divi
• Ako používať modul peňaľenky Divi
• Ako používať osobný modul na nástroji Divi Builder
• Ako používať modul peňaženky s filtrom Divi
• Ako používať posuvný modul s plnou šírkou
• Ako používať modul obrazu Divi Builder
• Ako používať navigačný modul v celej šírke nástroja Divi Builder
• Ako používať modul galérie obrázkov
• Ako používať modul kariet Divi Builder s plnou šírkou
• Ako používať portálový modul Divi s plnou šírkou
• Ako používať modul záhlavia Divi s plnou šírkou
• Ako používať počítací modul Divi
• Ako používať posúvač článkov v aplikácii Divi Builder
• Ako používať modul Divi Email Optin