Пропустить

Как изменить цвет меню между страницами DiVi

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 901.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

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

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

Пользовательский раздел WordPress css builder

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

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

Иконка, меняющая цвет divi

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

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

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

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

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

Формат заголовка Divi

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

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

Персонализация меню divi

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

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

Wordpress Divi Builder

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

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

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

Настройки divi для настройки цвета

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

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

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

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

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

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

Значок социальной диви

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

Настройка вторичного меню

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

Элемент заголовка divi wordpress

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

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

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

Пользовательский редактор тем css-кода divi

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

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

Общий CSS

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

Пользовательские параметры темы divi css

# Top-заголовок-социально-иконки .and литий {Левое поле: 5px; } # .and топ-заголовок-социал- значок {отступы: 4px; край дно: 8px; ширина: 30px; высота: 30px; граница радиуса: 50%; высота линии: 24px; }

Вы можете быть удивлены, почему это не так в поле CSS на странице. Причина в том, что этот конкретный фрагмент кода влияет на все целевые элементы, поэтому неэффективно размещать один и тот же код в нескольких местах. Изменяется только цвет фона на странице, но этот код не меняется на странице. Это просто лучшая практика, чтобы избежать увеличения веса на вашем сайте.

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

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

Эта статья содержит комментарии 3

  1. Привет,

    Спасибо за все ваши уроки.
    Вы знаете, можем ли мы поместить подменю divi (второй уровень под выпадающим меню) в fill-width? которая занимает всю ширину страницы

  2. Привет,

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

    Комментарий Faire?

    Merci пар Avance,

    1. Привет Жермен,

      Вы хотите, чтобы он был белым на всех страницах или только на нескольких страницах?

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх