Néha könnyebb mondani, mint megtenni, hogy webhelye kitűnjön a tömegből. Szerencsére belevághat a barkácsolásba, ha kreatív testreszabási vonásokat ad hozzá, amelyek biztosítják, hogy a blogod kiemelkedik másoktól.

Ebben az oktatóanyagban megmutatom, hogyan lehet testreszabni a Divi buildert a blogod, és különösen a CSS terület.

Erről a régióról beszélek:

Ez azt jelenti, hogy az itt végrehajtott változtatások csak az általunk szerkesztett oldalon lesznek érvényesek. Hihetetlenül érdekes és hasznos funkció!

Íme a végső eredmény, amelyet ennek az oktatóanyagnak a végén kapunk. A navigációs menü háttér színe, amely a meglátogatott oldaltól függően változik. További lehetőségként észreveheti, hogy az ikonok szintén megváltoztatják a színt.

Először megmutatom, hogyan kell alkalmazni a háttér színét a menüben. Ezután külön megmutatom, hogyan lehet a közösségi ikonokat egyeztetni.

Ha még nem olvasta el a bemutatónkat a a WordPress Divi téma bemutatása, Felkérem Önt, hogy tegye meg.

Kezdjük!

Színt adjon a menükbe

Először az alapértelmezett fejléc formátumot használom. Ha más formátumot használ, akkor ennek az oktatóanyagnak továbbra is hatékonynak kell lennie, mert a Diviben a "divs" általános azonosítója minden formátumnál megegyezik (# main-header), ha jól tudom. Ha problémája van más formátumokkal.

Meg kell győződnünk arról, hogy a linkek megjelennek az alján. Az általam választott színek, amelyeket a Coolors.co oldalon talál, ha használni akarja őket, a sötétebb oldalon vannak, ezért világos színűvé kell tennem a szöveges linket. A fehér szín mellett döntöttem.

Az rgba-t (255,255,255,0.6) használom, amely a link színe és sötétfehér lesz az aktív link színe (a kívánt vizuális effektusért)

Ezután ugorjon arra az oldalra, amelyen alkalmazni kívánja az első módosítást (látnod kell a hozzárendelt menüoldalakat). Kattintson a "3 sor" ikonra, és megjelenik egy opciómező.

Most adja hozzá a következő CSS-t ebbe a mezőbe:

# fő fejléc {background: #474f61; }

Ehhez valami hasonló kellene, ne felejtsd el megváltoztatni a hex kódot bármilyen színűre:

Kattintson a Mentés és frissítés És ez vonatkozik a főmenüre is, mind egy kódsorban.

Most csak hozzá kell adnia ugyanazt a kódot az összes oldalához, és minden alkalommal meg kell változtatnia a hexakódot.

Közösségi hálózati ikonok (opcionális)

Ebben a részben módosítani fogjuk a már elvégzett kódot, majd hozzáadunk valamilyen kódot a webhely CSS szintjén, és elmagyarázom, hogy miért kell egyes CSS-eket hozzáadni az egyes oldalakhoz, és miért másokat nem lehet.

Tehát először meg kell győződnie arról, hogy beállította-e a társadalmi kapcsolatait. Ugrás a " Divi Opciók> Általános téma És adja hozzá az URL-eit a közösségi média oldalaihoz.

Ezután lépjen a másodlagos menüsor beállításaihoz, és állítsa be a háttér és a szöveg színét. A „fehér” -t választom szövegszínnek, mert minden közösségi ikonhoz hozzáadok egy kerek színű hátteret, hogy az illeszkedjen az új menü színéhez, hogy az ikon megjelenhessen.

Ugrás a " Fejléc és navigáció> Fejléc elemek És jelölje be a négyzetet Mutasd társadalmi ikonok ".

Emlékszel, hogyan folytattuk a CSS hozzáadását minden oldalra? Visszamegyünk és szerkesztjük azt, amit korábban írtunk. Cserélje le az ott található CSS-t a következő CSS-re, vagy ha felismeri, mi a különbség, egyszerűen hozzáadhatja az extra kódot.

# fő fejléc, # fejléc .et-social-icon a {background: #474f61; }

Ez a kód lehetővé teszi webhelyünk számára, hogy ne csak az ezen az oldalon található menü háttérszínét, hanem közösségi ikonjaink hátterét is megváltoztassa. Most adtunk egy másik elemet a keverékhez. Kellene valami, ami a következőképpen néz ki:

Előfordulhat, hogy ellenőriznie kell, hogy a hex színek helyesek-e minden oldalon.

Általános CSS

A következő kód szerepel a " Témaopció> CSS mező Vagy a gyermek téma stílusfájljában.

# top-header .and-social-icons li {margin-left: 5px; } # top-header .et-social-icon a {padding: 4px; margin-bottom: 8px; szélesség: 30px; magasság: 30px; határ-sugár: 50%; vonalmagasság: 24px; }

Kíváncsi lehet, hogy miért nem így van az oldal CSS mezőjében. Ennek oka az, hogy ez a kóddarab az összes megcélzott elemre hat, így nem hatékony pontosan ugyanazt a kódot több helyre tenni. Csak a háttér színe változik oldalanként, de ez a kód nem változik oldalanként. Ez csak egy legjobb gyakorlat annak elkerülése érdekében, hogy a webhely súlyosbodjon.

Ennyi az oktatóanyaghoz, remélem, lehetővé teszi a menük testreszabását 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”]DIVI TÉMA LETÖLTÉSE [/vcex_button][/vc_column][vc_colum /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”]LETÖLTÉS TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Egyéb Divi oktatóanyagok

• 5 weboldalak éttermi felhasználásra Divi téma
• Hogyan lehet szöveget hozzáadni a Divi WooCommerce termékhez?
• Hogyan változtathatja meg a menü színét a Divi oldalak között
• Hogyan lehet személyre szabni egy blog rácsát a Divi-vel
• Hogyan kell használni a szerepe Divi szerkesztő WordPress
• Hogyan készítsünk teljes képernyős Divi csúszkát?
• Hogyan változtathatja meg a menük színét a Divi oldalak között
• Funkciók, amelyeket valószínűleg nem ismer a Divi-ről
• A Divi Builder használata a WordPress-en
• Hogyan használjuk a Divi video scrolling modult
• A Divi Builder Flip modul használatának módja
• Hogyan adhatunk hozzá egy beszámolót a Divi Builderhez
• A Divi szövegmodul használata
• Hogyan lehet létrehozni egy csúszkát a Divi-n
• A Divi felhasználói szerepkör szerkesztése
• A Divi Social Media használata
• Hogyan lehet használni az üzlet modult a WordPress Divi témában?
• A Divi oldalsáv moduljának használata
• A Divi áratábla modul használatának módja
• A Divi kiadványok címmoduljának használata
• Hogyan adhatunk hozzá egy Divi video modult
• A cikk navigációs moduljának használata
• A Divi keresőmodul használata
• A Divi pénztárca moduljának használata
• A személyi modul használata a Divi Builder-en
• A pénztárca moduljának használata a Divi szűrővel
• A teljes szélességű csúszka modul használata
• A Divi Builder képmodul használata
• A Divi Builder teljes szélességű navigációs moduljának használata
• A képgaléria modul használata
• A Divi Builder teljes szélességű kártya moduljának használata
• A Divi teljes szélességű portfólió moduljának használata
• A Divi teljes szélességű fejléc moduljának használata
• A Divi számláló modul használata
• Hogyan lehet használni a Divi Builder cikkcsúszkáját?
• A Divi Email Optin modul használata