Включение вашего логотипа в фиксированный заголовок в Divi

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

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

В этом посте я покажу вам, как:

1. Измените свой логотип на другой, когда ваш фиксированный заголовок активен. (Это можно сделать с помощью одной строки CSS)
2. Измените цвет вашего логотипа на фиксированном заголовке.
3. Добавьте крутой эффект перехода при переключении вашего логотипа на фиксированный заголовок.
4. Переключите и переместите центрированный логотип заголовка на макет по умолчанию (с выравниванием по левому краю) в фиксированном заголовке.

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

Sneak Peek

Вот небольшой обзор того, чего мы добьемся в этом уроке.

Вот как выглядит простой переключатель логотипа.

Вот переключатель логотипа с эффектом перехода.

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

Установка

Прежде чем делать что-либо еще, убедитесь, что вы выполнили следующее:

1. Установите последнюю версию Divi.
2. Реализуйте активную дочернюю тему Divi. Если вам нужна помощь с настройкой дочерней темы, она рассматривается в этом посте. Если вам нужна дополнительная помощь. Обратитесь в нашу службу поддержки.
3. Сделайте две версии вашего логотипа размером 200 × 131 и добавьте их в свою медиатеку WordPress. Один логотип будет использоваться для основного заголовка, а другой - для вашего фиксированного заголовка. Если можете, сделайте версию логотипа с фиксированным заголовком более горизонтальным, чтобы он не сдавливался по вертикали на меньший фиксированный заголовок. Вот пример моего основного логотипа заголовка, который я использую. Вот пример моего фиксированного логотипа в заголовке. Обратите внимание, что я обрезал текст, чтобы сделать более простой и горизонтальный логотип, который хорошо вписывается в заголовок с меньшей высотой. Маловероятно, что кто-то все равно сможет прочитать этот текст, а бренд все еще представлен.

   

4. Настройте главное меню с помощью пунктов меню.

После того, как вы выполнили эти шаги, вы готовы начать.

Включение вашего логотипа в фиксированный заголовок в Divi

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

Включение логотипа в фиксированный заголовок с помощью CSS

Прежде чем мы перейдем к нашему пользовательскому CSS, давайте настроим настройки нашего меню в настройщике темы. На внутренней стороне вашего сайта WordPress перейдите в «Настройщик тем»> «Заголовок и навигация»> «Формат заголовка» и убедитесь, что у вас выбран стиль заголовка по умолчанию.

Затем вернитесь к настройкам заголовка и навигации в настройщике темы. Выберите основную строку меню и обновите следующее:

Высота меню: 105
Максимальная высота логотипа: 80
Размер текста: 20

Теперь вернитесь к заголовку и навигации. Выберите «Фиксированные настройки навигации» и обновите следующее:

Фиксированная высота меню: 60
Размер текста: 20

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

Вставьте фрагмент CSS для переключения логотипа в фиксированный заголовок

Один из самых простых способов заменить изображение вашего логотипа другим в фиксированном заголовке - использовать свойство CSS «content». Если вы знакомы с CSS, обычно это то, что используется при добавлении содержимого в псевдоэлемент: before или: after. В этом случае мы собираемся использовать его для вставки нового контента (изображения вашего логотипа), чтобы заменить текущее изображение логотипа.

Для этого перейдите в «Настройщик тем»> «Дополнительные CSS» и вставьте следующий CSS.

/*********************************
change logo for fixed header (quick and easy way)
**********************************/
.et-fixed-header #logo {
content: url(INSERT NEW LOGO IMAGE URL);
}

Теперь замените текст «ВСТАВЬТЕ НОВОЕ ИЗОБРАЖЕНИЕ ЛОГОТИПА» на свое фактическое изображение логотипа.

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

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

Изменение цвета вашего логотипа

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

Используя свойство invert CSS, вы можете инвертировать цвет вашего логотипа с помощью нескольких строк CSS. Например, если ваш логотип черный, инвертирование цвета логотипа сделает его белым. А если логотип белый, он станет черным. Чтобы добавить этот стиль к своему логотипу, перейдите в Настройщик тем> Дополнительный CSS и добавьте следующий CSS (убедитесь, что вы удалили или закомментировали ранее добавленный CSS):

/*********************************
Invert Logo color on fixed header
*********************************/
.et-fixed-header #logo {
-webkit-filter: invert(100%);
filter: invert(100%);
}

Посмотрите результат. Это черный логотип, преобразованный в белую версию.

Добавление эффекта перехода при переключении вашего логотипа на фиксированный заголовок

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

Добавление нового логотипа в файл Header.php

Чтобы добавить еще одно изображение логотипа в заголовок, нам нужно добавить его в файл header.php. Используя FTP-клиент (например, FileZilla), перейдите в корень ваших файлов темы Divi и сделайте копию файла header.php.

Вставьте копию файла header.php в корень папки дочерней темы.

Затем, используя предпочитаемый вами текстовый редактор, откройте файл header.php. Найдите html-код для ссылки, содержащей изображение логотипа, заключенное в div с классом «logo_container».

<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
</a>

Мы собираемся добавить похожий фрагмент кода для отображения другого изображения в вашем заголовке. Скопируйте и вставьте следующий код прямо под ним.

<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="INSERT NEW LOGO IMAGE URL" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" class="second-logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
</a>

Обратите внимание, что это обновленная копия исходного кода над ним с двумя отличиями. Во-первых, у него есть новый URL-адрес источника изображения, который вам нужно будет добавить. Во-вторых, это класс под названием «второй логотип».

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

Затем вернитесь к своему файлу header.php. Найдите только что созданный фрагмент кода и замените текст «ВСТАВЬТЕ ЗДЕСЬ URL-адрес изображения нового логотипа» на фактический URL-адрес изображения.

Сохраните файл header.php.

Теперь у вас есть два логотипа, которые будут отображаться на вашем сайте рядом. Скорее всего, вы не хотите оставлять это в таком виде, поэтому давайте добавим необходимый настраиваемый CSS для создания нашего эффекта перехода.

Добавление крутого перехода, когда логотип включается в ваш фиксированный заголовок

Перейдите в «Настройщик тем»> «Дополнительные CSS» и удалите (или закомментируйте) код из предыдущего раздела этого сообщения (если применимо). Затем добавьте следующий настраиваемый CSS:

@media all and (min-width: 980px){
/*********************************
show, hide, and transition logos for primary and fixed nav;
must have second logo in header.php file for this to work
**********************************/
#logo {
opacity:1;
display:inherit;
margin: 0 0 0 0;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
#logo.second-logo {
opacity:0;
margin: 0 0 -200px -130px;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.et-fixed-header #logo {
opacity: 0;
margin: -200px 0px 0 0px;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;

}
.et-fixed-header #logo.second-logo {
opacity:1;
margin: 0 0 0 -90px !important;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}

/*********************************
hides overflow on header container so logo doesn't show outsite header on transition
*********************************/
#main-header {
overflow: hidden;
}
}

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

Изменение расположения логотипа центрированного заголовка слева для фиксированного заголовка

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

Чтобы переключиться с логотипа по центру на логотип с выравниванием по левому краю, вы можете добавить следующий настраиваемый CSS в поле «Дополнительные CSS» в настройщике темы. Сначала добавьте код для быстрого и простого переключения логотипа:

/*********************************
change logo for fixed header (quick and easy way)
**********************************/
.et-fixed-header #logo {
content: url(INSERT NEW LOGO IMAGE URL HERE);
}

Не забудьте добавить URL-адрес изображения вашего логотипа.

Затем добавьте следующее, чтобы настроить размещение логотипа:

@media all and (min-width: 980px){
/*********************************
change centered logo on centered header style to default layout when fixed header is active
*********************************/
.et_header_style_centered header#main-header.et-fixed-header .logo_container {
float: left;
width: 20%;
}

.et_header_style_centered #main-header.et-fixed-header div#et-top-navigation {
width: 80%;
float: right;
height: 70px;
line-height: 70px;
text-align: right;
}
.et-fixed-header #top-menu-nav {
float: none!important;
}

.et_fixed_nav #et-top-navigation {
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
}
}

Примечание. Убедитесь, что вы удалили из этого поста все предыдущие CSS, которые могут конфликтовать.

Вот и все. Посмотрите результат.

В заключение

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

Скоро

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

Я с нетерпением жду этого.

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

Ваше здоровье.