Пропустить

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

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

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

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

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

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

Это регион, о котором я говорю:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Общий CSS

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

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

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

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

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

Эта статья содержит комментарии 3
  1. Привет,

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

  2. Привет,

    Как изменить цвет текста в главном заголовке? Наличие фона (на моем основном заголовке) прозрачно, цвет шрифта, который я выбрал (на моем главном заголовке, который показывает мои разные темы) через интерфейс настройки divi, является черным. Однако я хотел бы, чтобы он был белым на некоторых страницах, потому что снимок ниже слишком темный.

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

    Merci пар Avance,

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

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

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

Вверх
22 акции
доля13
чирикать2
Регистрация7