Иногда легче сказать, чем сделать, чтобы ваш сайт выделялся из толпы. К счастью, вы можете заняться творчеством своими руками, добавив творческие элементы индивидуальной настройки, которые гарантируют, что ваш блог выделяется среди других.

В этом уроке я покажу вам, как использовать конструктор Divi для настройки ваш блоги, в частности, область CSS.

Я говорю об этом регионе:

Это означает, что любые изменения, которые мы здесь вносим, ​​будут действовать только на странице, которую мы редактируем. Это невероятно интересная и полезная функция!

Вот окончательный результат, который мы получим в конце этого урока. Цвет фона меню навигации, которое меняется в зависимости от страницы, которую вы посещаете. В качестве дополнительной опции вы заметите, что значки также меняют цвет.

Сначала я покажу, как применить цвет фона к меню. Затем отдельно я покажу вам, как совместить значки социальных сетей.

Если вы еще не прочитали наш учебник на презентация темы WordPress DiviЯ приглашаю вас сделать это.

Давайте начнем!

Применение цвета к меню

Во-первых, я использую формат заголовка по умолчанию. Если вы используете другой формат, это руководство по-прежнему должно быть эффективным, поскольку, насколько мне известно, общий идентификатор «div» в Divi одинаков для всех форматов (# main-header). Если у вас проблемы с другими форматами.

Нам нужно убедиться, что ссылки появляются внизу. Выбранные мною цвета, которые вы найдете на Coolors.co, если хотите их использовать, находятся на более темной стороне, поэтому мне нужно сделать текстовую ссылку светлым. Я выбрал белый цвет.

Я использую rgba (255,255,255,0.6), который будет цветом ссылки и темно-белым в качестве цвета активной ссылки (для желаемого визуального эффекта)

Затем перейдите на страницу, на которой вы хотите применить первое изменение (Вы должны увидеть ссылки меню на месте). Щелкните значок «3 линии», и появится окно параметров.

Теперь добавьте в это поле следующий CSS:

# Ручной заголовок {фон: #474f61; }

У вас должно получиться что-то похожее, не забудьте изменить шестнадцатеричный код на любой желаемый цвет:

Нажмите ' Сохранить и обновить И это будет относиться к главному меню, все в одной строке кода.

Теперь вам просто нужно добавить этот код для всех ваших страниц и каждый раз менять шестнадцатеричный код.

Иконки социальных сетей (необязательно)

В этой части мы собираемся изменить код, который мы уже сделали, затем добавить некоторый код на уровне CSS сайта, и я объясню, почему некоторые CSS должны быть добавлены на отдельных страницах и почему некоторые не должны быть.

Итак, сначала вы должны убедиться, что вы установили свои социальные ссылки. Перейти к Параметры Divi> Общая тема И добавьте свои URL-адреса на свои страницы в социальных сетях.

Затем перейдите к своим настройкам в дополнительной строке меню и установите цвет фона и текста. Я выбираю «белый» в качестве цвета текста, потому что я собираюсь добавить круглый цветной фон к каждому значку социальных сетей, чтобы он соответствовал новому цвету меню, чтобы значок мог появиться.

Перейти к Заголовок и навигация> Элементы заголовка И поставьте галочку Показать социальные иконки .

Вы помните, как мы добавили CSS на каждую страницу? Мы вернемся и отредактируем то, что написали ранее. Замените то, что у вас есть, на следующий CSS, или, если вы узнаете, что отличается, вы можете просто добавить дополнительный код.

# Ручной заголовок, # .and топ-заголовок-социал- значок {фон: #474f61; }

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

Возможно, вам придется проверить правильность шестнадцатеричных цветов на каждой странице.

Общий CSS

Следующий код будет в вашем " Параметр темы> поле CSS Или в файле стиля дочерней темы.

# Top-заголовок-социально-иконки .and литий {Левое поле: 5px; } # .and топ-заголовок-социал- значок {отступы: 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" 18 /69″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=118&url=7&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”2″ style=”flat” custom_background=”#c23065e” custom_hover_background=”#40632d1f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”] СКАЧАТЬ ШАБЛОНЫ DIVI[/vcex_button][/vc_column][/vc_row]

Другие учебные пособия Divi

• сайты 5 для использования ресторана Divi темы
• Как добавить текст в продукт Divi WooCommerce
• Как изменить цвет меню между страницами Divi
• Как персонализировать сетки блога с Divi
• Как использовать роль DiVi редактор на WordPress
• Как создать полноэкранный слайдер Divi
• Как изменить цвет меню между страницами Divi
• Особенности, которые вы, вероятно, не знаете о Divi
• Как использовать Divi Builder в WordPress
• Как использовать модуль прокрутки видео Divi
• Как использовать модуль Flip Builder Flip
• Как добавить отзыв модуль на Divi Builder
• Как использовать текстовый модуль Divi
• Как создать слайдер на Divi
• Как редактировать роль пользователя Divi
• Как использовать модуль Divi Social Media
• Как пользоваться магазинным модулем на тему WordPress Divi
• Как использовать боковую панель Divi
• Как использовать модуль таблицы цен Divi
• Как использовать титульный модуль изданий Divi
• Как добавить видео модуль Divi
• Как использовать навигационный модуль статьи
• Как использовать модуль поиска Divi
• Как использовать модуль кошелька Divi
• Как использовать модуль пользователя в Divi Builder
• Как использовать модуль кошелька с фильтром Divi
• Как использовать ползунок полной ширины
• Как использовать модуль изображения Divi Builder
• Как использовать полноразмерный навигационный модуль Divi Builder
• Как использовать модуль галереи изображений
• Как использовать модуль карты полной ширины Divi Builder
• Как использовать модуль Divi Full Width Portfolio
• Как использовать полноразмерный заголовочный модуль Divi
• Как использовать Divi Counter Module
• Как использовать слайдер статей в Divi Builder
• Как использовать модуль Divi Email Optin