Как создать прозрачную вертикальную навигацию, которая перекрывает ваш сайт Divi

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

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

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

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

Сегодняшний конечный результат: простое и элегантное вертикальное меню

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

Создание дизайна в Divi

Подпишитесь на наш канал Youtube

общие настройки

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

Активировать вертикальную навигацию

Для начала вам нужно включить вертикальную навигацию на своем сайте. Для этого перейдите в панель управления WordPress> Внешний вид> Настройка> Заголовок и навигация> Формат заголовка> и включите вертикальную навигацию.

Выберите настройки дизайна в настройщике темы

Теперь, когда вы все еще находитесь в настройщике тем, вы можете настроить все параметры вертикальной навигации так же, как вы меняете верхнюю навигацию. Вернитесь в « Заголовок и навигация»> «Основное меню»> и внесите все изменения, которые вы хотите внести в основное меню.

В этой части важно обеспечить цвет фона для меню с непрозрачностью менее 1. Желательно даже менее 0,5. Убедитесь, что здесь применяется цвет фона. Если вы хотите, чтобы то же самое применялось к цвету фона раскрывающегося меню, выберите тот же цвет и там.

Добавить код CSS

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

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

Эти изменения коснутся только настольной версии вашего веб-сайта. На экранах шириной менее 981 пикселей изменения не применяются.

Добавить код CSS в настройщике тем

Во-первых, у нас есть код, который гарантирует, что ваш сайт заполняет всю ширину вашего браузера. Скопируйте и вставьте следующий код на вкладку Additional CSS в настройщике темы:

@media (min-width: 981px) { 
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header { 
margin-left: 0px !important; 
}
}

Кроме того, если вы хотите настроить ширину вертикальной навигации, скопируйте и вставьте вместо этого следующие строки кода CSS:

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header { 
margin-left: 0px !important;
}
.et_vertical_nav #page-container #main-header
{
width: 120px;
}
}

Воссоздание упрощенной вертикальной навигации

Теперь, когда мы выполнили необходимые шаги по созданию прозрачной вертикальной навигации, которая перекрывает ваш веб-сайт, мы собираемся воссоздать этот пример. Пример снова выглядит так:

Общие советы по дизайну

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

Централизовать все

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

Если вы все же выбираете контент, выровненный по-разному, убедитесь, что вы проверили отступы и поля контента. Если вы соответствующим образом измените поля и отступы, результаты все равно могут быть великолепными. Но вам, вероятно, придется внести много изменений вручную.

Одинаковый цвет фона везде

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

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

Начать создание примера

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

Создать заголовок полной ширины

В разделе полной ширины добавьте заголовок полной ширины. Затем перейдите на вкладку «Дизайн», установите для параметра «Ориентация текста и логотипа» значение «Центр» и также включите полноэкранный режим для полноэкранного заголовка.

Настройки заголовка

Кроме того, прокрутите ту же вкладку вниз и внесите следующие изменения в подкатегорию текста заголовка:

• Шрифт заголовка: Lato Light
• Стиль шрифта заголовка: заглавные буквы
• Стиль шрифта заголовка: 60 ​​(рабочий стол), 50 (планшет), 40 (телефон)
• Цвет текста заголовка: #FFFFFF

Настройки подзаголовка

Кроме того, продолжайте прокрутку и убедитесь, что настройки подкатегории Subhead Text следующие:

• Шрифт подзаголовка: Lato Light
• Размер шрифта подзаголовка: 22 пикселя (настольный компьютер и планшет), 19 (телефон)
• Цвет текста подзаголовка: # c4c4c4

Настройки кнопок

Наконец, внесите следующие изменения в подкатегорию «Кнопка» на вкладке «Дизайн»:

• Использовать собственные стили для первой кнопки: Да
• Размер текста кнопки One: 15 (настольный компьютер и планшет), 12 (телефон)
• Цвет текста кнопки один: # 000000
• Цвет фона кнопки One: #FFFFFF
• Шрифт кнопки One: Lato Light
• Стиль шрифта Button One: жирный и заглавные

Настройки градиентного фона

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

В нашем примере мы используем темный фон. Поэтому мы начнем с черного цвета градиента. Другой цвет, который мы сопоставили с фоновым изображением, - «rgba (0,49,109,0.43)».

Кроме того, настройки, которые мы использовали для цветов градиента, следующие:

• Тип градиента: линейный
• Направление градиента: 87 градусов
• Стартовая позиция: 0%
• Конечная позиция: 62%

Далее добавьте фоновое изображение и примените следующие настройки:

• Размер фонового изображения: обложка
• Положение фонового изображения: по центру
• Повтор фонового изображения: без повтора
• Наложение фонового изображения: наложение

Изменения в настройщике тем

На следующем шаге нам нужно будет внести некоторые другие изменения в настройщик тем. Если вы находитесь на панели инструментов WordPress, перейдите в Внешний вид> Настройка> Заголовок и навигация> Основная панель меню> и внесите следующие изменения:

• Макс.высота логотипа: 83
• Размер текста: 14
• Расстояние между буквами: 0
• Шрифт: Lato Light
• Стиль шрифта: заглавные буквы
• Цвет текста: #FFFFFF
• Цвет активной ссылки: #FFFFFF
• Цвет фона: #FFFFFF
• Цвет фона выпадающего меню: rgba (221,153,51,0)
• Цвет строки раскрывающегося меню: # 1E73BE
• Цвет текста раскрывающегося меню: #FFFFFF

Добавить собственный код CSS в настройщике тем

Пока вы все еще находитесь в настройщике тем, мы собираемся добавить необходимые строки кода CSS, чтобы макет выглядел так, как он есть.

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

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
#top-menu li {
margin-top: 15px;
border-bottom: 1px solid #FFFFFF;
}
.et_vertical_nav #main-header #logo {
margin-top: 80% !important;
margin-bottom: 0px !important;
}
.et_vertical_nav.et_vertical_fixed.et_header_style_left .et-fixed-header #et-top-navigation, .et_vertical_nav.et_vertical_fixed.et_header_style_split .et-fixed-header #et-top-navigation {
padding-top: 0px !important;
}}

Конечный результат

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

Подведение итогов

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

Обязательно подпишитесь на нашу рассылку по электронной почте и канал на YouTube, чтобы не пропустить важное объявление, полезный совет или бесплатную поддержку Divi!