Të bësh faqen tuaj të dallohet nga turma ndonjëherë është më e lehtë të thuhet sesa të bëhet. Për fat të mirë, ju mund të përfshiheni me DIY duke shtuar prekje krijuese të personalizimit që do ta sigurojnë atë blogun tuaj dallon nga të tjerët.

Në këtë tutorial, unë do t'ju tregoj se si të përdorni ndërtuesin Divi për ta personalizuar blogun tuaj, dhe në veçanti zonën CSS.

Ky është rajoni për të cilin po flas:

Çfarë do të thotë kjo është se çdo ndryshim që bëjmë këtu do të jetë efektiv vetëm në faqen që po redaktojmë. Kjo është një tipar tepër interesant dhe i dobishëm!

Këtu është rezultati përfundimtar që do të kemi në fund të këtij udhëzimi. Ngjyra e sfondit të menusë së lundrimit që ndryshon në varësi të faqes që po vizitoni. Si një opsion shtesë do të vini re që ikonat gjithashtu ndryshojnë ngjyrën.

Së pari do të tregoj se si të aplikoni ngjyrën e sfondit në menu. Pastaj veçmas do t'ju tregoj se si t'i bëni ikonat shoqërore të përputhen.

Nëse nuk keni lexuar akoma tutorin tonë prezantimi i temës WordPress Divi, Unë ju ftoj ta bëni.

Le të fillojmë!

Aplikoni ngjyra në menutë

Së pari, unë përdor formatin e paracaktuar të kokës. Nëse jeni duke përdorur një format tjetër, ky tutorial duhet të jetë akoma efektiv sepse ID-ja e përgjithshme e "divs" në Divi është e njëjtë për të gjitha formatet (#main-header), me sa di unë. Nëse keni probleme me formate të tjera.

Ne duhet të sigurohemi që lidhjet të shfaqen në pjesën e poshtme. Ngjyrat që zgjodha, të cilat do t’i gjeni në Coolors.co nëse doni t’i përdorni, janë në anën më të errët, prandaj duhet ta bëj lidhjen e tekstit me një ngjyrë të hapur. Unë zgjodha ngjyrën e bardhë.

Po përdor rgba (255,255,255,0.6) që do të jetë ngjyra e lidhjes dhe e bardha e errët si ngjyra aktive e lidhjes (për efektin vizual të dëshiruar)

Pastaj shkoni në faqen në të cilën dëshironi të aplikoni ndryshimin e parë (ju duhet të shihni lidhjet e menysë të krijuara) Klikoni në ikonën "3 linja" dhe do të shfaqet një kuti opsionesh.

Tani shtoni CSS-në e mëposhtme në këtë kuti:

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

Ju duhet të keni diçka të ngjashme me këtë, mos harroni të ndryshoni kodin magji në çfarëdo ngjyre që dëshironi:

Klikoni mbi Ruani dhe azhurnoni Dhe kjo do të vlejë për menunë kryesore, të gjitha në një rresht kodesh.

Tani thjesht duhet të shtoni të njëjtin kod për të gjitha faqet tuaja dhe të ndryshoni kodin magji çdo herë.

Ikonat e Rrjetit Social (opsional)

Për këtë pjesë, ne do të modifikojmë kodin që kemi bërë tashmë, pastaj shtojmë disa kod në nivelin CSS të faqes, dhe unë do të shpjegoj pse disa CSS duhet të shtohen në faqet individuale dhe pse disa nuk duhet të jenë jetë.

Kështu që së pari duhet të siguroheni që keni vendosur lidhjet tuaja shoqërore. Shko tek " Opsione Divi> Tema e përgjithshme Dhe shtoni URL-të tuaj në faqet tuaja të mediave sociale.

Pastaj shkoni te cilësimet tuaja në shiritin e menusë dytësore dhe vendosni ngjyrat e sfondit dhe tekstit. Po zgjedh 'të bardhën' si ngjyrën e tekstit sepse do të shtoj një sfond me ngjyrë të rrumbullakët në secilën ikonë sociale që të përputhet me ngjyrën e menusë së re, në mënyrë që ikona të shfaqet.

Shko tek " Header & Navigation> Elementet e Header Dhe shënoni kutinë " Trego ikona sociale '.

Ju kujtohet se si kemi vazhduar të shtojmë CSS në secilën faqe? Do të kthehemi dhe do të redaktojmë ato që kemi shkruar më parë. Zëvendësoni ato që keni atje me CSS-në e mëposhtme, ose nëse njihni se çfarë është ndryshe, thjesht mund të shtoni kodin shtesë.

# header-header, # top-header .et-social-ikonë a {background: #474f61; }

Ky kod do të lejojë që faqja jonë jo vetëm të ndryshojë ngjyrën e sfondit për menunë në këtë faqe, por edhe sfondin e ikonave tona sociale. Ne vetëm shtuam një element tjetër në përzierje. Ju duhet të keni diçka që duket si më poshtë:

Ju mund të keni nevojë të kontrolloni që ngjyrat e hexit janë të sakta në secilën faqe.

CSS e përgjithshme

Kodi i mëposhtëm do të jetë në " Opsioni i temës> Kuti CSS Ose në skedarin e stilit të temës së fëmijës.

# top-header. dhe social-icons li {margin-left: 5px; } # top-header .et-social-icon a {mbushje: 4px; fundi i diferencës: 8px; gjerësia: 30px; lartësia: 30px; rrezja kufitare: 50%; lartësia e vijës: 24px; }

Ju mund të pyesni veten pse nuk është kështu në kutinë CSS të faqes. Arsyeja është se kjo pjesë e veçantë kodi prek të gjithë elementët e synuar, kështu që është joefikas të vendosni të njëjtin kod të saktë në shumë vende. Vetëm ngjyra e sfondit ndryshon për faqe, por ky kod nuk ndryshon për faqe. Shtë thjesht një praktikë më e mirë për të shmangur shtimin e peshës në faqen tuaj.

Kjo është e gjitha për këtë tutorial, shpresoj se do t'ju lejojë të personalizoni menutë në tuaj blog WordPress.

[vc_row center_row=”po”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”i sheshtë” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]SHKARKO TEMËN DIVI [/vcex_button][/vc_colum][/vc_colum] /1″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=2&url=23065&tid40632=tutorials” target=”blank” layout=”expanded” align=”family” font ”Raleway” font_weight=”1″ style=”flat” custom_background=”#c700e” custom_hover_background=”#4226d8f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-NADLOGO”]DOW templates DIVI[/vcex_button][/vc_column][/vc_row]

Tutoriale të tjera Divi

• faqet e internetit të 5 për përdorim restorant Divi temë
• Si të shtoni tekst në një produkt Divi WooCommerce
• Si të ndryshoni ngjyrën e menysë në mes të faqeve Divi
• Si të personalizoni rrjetet e një blogu me Divi
• Si të përdorni redaktorin e roleve Divi në WordPress
• Si të krijoni një rrëshqitës Divi në ekran të plotë
• Si ta ndryshoni ngjyrën e menusë në mes të faqeve Divi
• Karakteristikat që ju ndoshta nuk i dini për Divi
• Si të përdorni Divi Builder në WordPress
• Si të përdorni modulin scrolling video Divi
• Si të përdorni modulin Dili Builder Flip
• Si të shtoni një modul dëshmimi në Divi Builder
• Si të përdoret moduli i tekstit Divi
• Si të krijoni një shirit në Divi
• Si të redaktoni një rol të përdoruesit të Divi
• Si të përdorni modulin Divi Social Media
• Si të përdorni modulin e dyqaneve në temën WordPress Divi
• Si të përdorni modulin e sidebarit Divi
• Si të përdorni Modulin e Tabelës së Çmimeve të Divi-t
• Si të përdoret moduli i titullit të botimeve Divi
• Si të shtoni një modul video të Divi
• Si të përdorni modulin e lundrimit të artikullit
• Si të përdorni modulin e kërkimit Divi
• Si të përdorni modulin e portofolit Divi
• Si të përdorni modulin e personit në Divi Builder
• Si të përdorni modulin e portofolit me filtrin Divi
• Si të përdorni modulin e plotë slider width
• Si të përdorni modulin e imazhit të ndërtuesit Divi
• Si të përdorni modulin e navigimit të plotë të Divi Builder
• Si të përdorni modulin e galerisë së imazheve
• Si të përdorni modulin e kartës me gjerësi të plotë Divi Builder
• Si të përdorni modulin e Portofolit të Divi Full Width
• Si të përdorni modulin e headerit me gjerësi të plotë Divi
• Si të përdorni Modulin e Divi Counter
• Si të përdorni rrëshqitësin e artikujve në Divi Builder
• Si të përdorni modulin Optika të Divi Email