Да накарате сайта си да се откроява от тълпата понякога е по-лесно да се каже, отколкото да се направи. За щастие, можете да се заемете с вашите „Направи си сам“ проекти, като добавите креативни щрихи за персонализиране, които ще накарат вашия блог да се открои от тълпата.

В този урок ще ви покажа как да използвате Divi builder-а, за да персонализирате блога си, по-специално CSS областта.

Това е регионът, за който говоря:

Това означава, че всички промени, които правим тук, ще бъдат ефективни само на страницата, която редактираме. Това е невероятно интересна и полезна функция!

Ето и крайния резултат, който ще имаме в края на този урок. Цветът на фона на менюто за навигация, който се променя в зависимост от страницата, която посещавате. Като допълнителна опция ще забележите, че иконите също променят цвета си.

Първо ще покажа как да приложим цвета на фона в менюто. След това отделно ще ви покажа как да направите така, че социалните икони да съвпадат.

Ако все още не сте чели нашия урок за представяне на темата WordPress Divi, Каня ви да го направите.

Нека да започнем!

Прилагане на цветове в менютата

Първо, използвам заглавния формат по подразбиране. Ако използвате друг формат, този урок все пак трябва да бъде ефективен, тъй като генералният идентификатор на „divs“ на Divi е един и същ за всички формати (# main-header), доколкото знам. Ако имате проблеми с други формати.

Трябва да се уверим, че връзките се показват отдолу. Избраните от мен цветове, които ще намерите на Coolors.co, ако искате да ги използвате, са от по-тъмната страна, така че трябва да направя текстовата връзка светъл цвят. Заложих на бял цвят.

Използвам rgba (255,255,255,0.6), който ще бъде цветът на връзката и тъмно бял като активния цвят на връзката (за желания визуален ефект)

След това отидете на страницата, на която искате да приложите първата промяна (трябва да видите настройките на менюто). Кликнете върху иконата "3 ред" и ще се появи поле за опции.

Сега добавете следния CSS в това поле:

# main-header {фон: #474f61; }

Трябва да имате нещо подобно на това, не забравяйте да промените шестнадесетичния код на какъвто цвят искате:

Кликнете върху Запазване и актуализиране И това ще важи за главното меню, всичко в един ред код.

Сега просто трябва да добавите същия код за всичките си страници и да променяте шестнадесетичния код всеки път.

Икони в социалната мрежа (незадължително)

За тази част ще модифицираме кода, който вече сме направили, след това добавяме някакъв код на ниво CSS на сайта и ще обясня защо някои CSS трябва да се добавят в отделните страници и защо някои не трябва да бъдат бъде.

Затова първо трябва да сте сигурни, че сте настроили социалните си връзки. Към „ Divi Options> General theme И добавете вашите URL адреси към страниците си в социалните медии.

След това отидете на настройките си във вторичната лента с менюта и задайте цветовете на фона и текста. Избирам „бял“ като цвят на текста, защото ще добавя кръгъл оцветен фон към всяка социална икона, за да съвпадне с новия цвят на менюто, за да може иконата да се появи.

Към „ Заглавка и навигация> Елементи на заглавката И поставете отметка в квадратчето " Показване на социални икони ".

Спомняте ли си как пристъпихме към добавяне на CSS на всяка страница? Ще се върнем и ще редактираме написаното преди. Заменете това, което имате там, със следния CSS или ако разпознаете какво е различно, можете просто да добавите допълнителния код.

# main-header, # top-header и-социална икона a {background: #474f61; }

Този код ще позволи на нашия сайт да променя не само цвета на фона за менюто на тази страница, но и фона на нашите социални икони. Току-що добавихме още един елемент към сместа. Трябва да имате нещо, което изглежда по следния начин:

Може да се наложи да проверите дали шестнадесетичните цветове са правилни на всяка страница.

Общ CSS

Следният код ще бъде във вашия „ Опция за тема> CSS кутия Или във файла със стила на детската тема.

# top-header.and-социалните икони li {margin-left: 5px; } # top-header. и-социална икона a {padding: 4px; долна граница: 8px; ширина: 30px; височина: 30px; радиус на границата: 50%; линия-височина: 24px; }

Може би се чудите защо това не е така в полето CSS на страницата. Причината е, че този конкретен код засяга всички насочени елементи, така че е неефективно да се поставя точно един и същ код на няколко места. Променя се само цветът на фона на страница, но този код не се променя на страница. Това е просто най-добрата практика да избягвате добавянето на тегло към вашия сайт.

Това е всичко за този урок, надявам се, че ще ви помогне да персонализирате менютата на вашия WordPress блог.

[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 [/ vcex_button] [/ colu width_m»n_colum » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expanded" align = "center" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_download "] EM DOWNLOAD DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Други уроци по Диви

3 Коментари

Кокосови на 8 януари 2020 г. в 22:13 ч

Здравей,

Благодаря ви за всички ваши уроци.
Знаете ли дали можем да поставим подменюто divi (второ ниво под падащото меню) в ширина на запълване? което заема цялата ширина на страницата
Отговор
Жермен Юнг на 10 октомври 2018 г. в 10:20 ч.

Здравей,

Как да промените цвета на текста в основния заглавие? Имайки прозрачен фон (в главния ми заглавие), избраният от мен цвят на шрифта (в основния заглавие, който представя различните ми раздели) чрез интерфейса за персонализиране на divi е черен. Въпреки това бих искал да е бял на НЯКОИ СТРАНИЦИ, защото снимката по-долу е твърде тъмна.

Как?

Благодаря ви предварително
Отговор
- Thierry Bertrand на 10 октомври 2018 г. в 16:32 ч.
  
  Здравейте Жермен,
  
  Искате ли да е бяло на всички страници или само на няколко страници?
  Отговор