Как добавить настраиваемый фиксированный заголовок для мобильных устройств с помощью Divi
Опубликовано: 2017-09-01Наличие фиксированного заголовка (или навигации) на мобильном телефоне может повысить удобство использования вашего сайта, если все сделано правильно. Фиксированная навигация в целом кажется на 22% быстрее, чем стандартные заголовки. В этом высокоскоростном мире технологий это значительный показатель, даже если он и был вдвое меньше.
А с Divi добавить фиксированный заголовок на ваш сайт можно с помощью нескольких строк CSS. Divi уже позволяет настраивать мобильные заголовки с помощью настройщика тем, но в настоящее время нет встроенных настроек для развертывания фиксированного заголовка для мобильных устройств. В этом руководстве я покажу вам, как добавить настраиваемый фиксированный заголовок на мобильный телефон, который включает в себя следующее:
- Другой (более удобный для мобильных устройств) логотип, чем в версии для настольных компьютеров.
- Более короткий заголовок, чтобы освободить больше места для просмотра.
- Более крупный интерактивный значок навигации в виде гамбургера, чтобы упростить развертывание мобильной навигации.
- Полупрозрачный фон, который делает заголовок еще более навязчивым при просмотре сайта.
Вот небольшой пример того, как будет выглядеть заголовок.
Установка
Эта настройка похожа на мою предыдущую публикацию о переключении вашего логотипа на фиксированный заголовок. Прежде чем начать, убедитесь, что вы выполнили следующее:
- Убедитесь, что у вас установлена последняя версия Divi.
- Создайте активное главное меню для своего сайта.
- На внутренней стороне вашего сайта WordPress перейдите в «Настройщик тем»> «Заголовок и навигация»> «Формат заголовка» и убедитесь, что у вас выбран стиль заголовка по умолчанию.
- Сделайте две версии вашего логотипа размером 200 × 131 и добавьте их в свою медиатеку WordPress. Один логотип будет использоваться для основного заголовка, а другой - для вашего фиксированного заголовка. Если можете, сделайте версию логотипа с фиксированным заголовком более горизонтальным, чтобы он не сдавливался по вертикали на меньший фиксированный заголовок. Вот пример моего основного логотипа заголовка, который я использую.
Вот пример моего фиксированного логотипа в заголовке. Обратите внимание, что я обрезал текст, чтобы сделать более простой и горизонтальный логотип, который хорошо вписывается в заголовок с меньшей высотой. Маловероятно, что кто-то все равно сможет прочитать этот текст, а бренд все еще представлен. 
- Настройте главное меню с помощью пунктов меню.
Поскольку мы будем добавлять собственный CSS для выполнения фиксированного заголовка, нам не нужно настраивать стандартный заголовок или параметры фиксированного заголовка в настройщике темы. Но если вы хотите продублировать настройки размеров меню и логотипа в моем примере, выполните следующие действия (это совершенно необязательно):
Перейдите к настройкам заголовка и навигации в настройщике темы. Выберите основную строку меню и обновите следующее:
Высота меню: 105
Максимальная высота логотипа: 80
Размер текста: 20
Теперь вернитесь к заголовку и навигации. Выберите «Фиксированные настройки навигации» и обновите следующее:
Фиксированная высота меню: 60
Размер текста: 20
После того, как вы выполнили эти шаги, вы готовы начать.
Как добавить настраиваемый фиксированный заголовок для мобильных устройств с помощью Divi
Подпишитесь на наш канал Youtube
Начиная
Мы будем реализовывать этот дизайн, вводя пользовательский CSS в разделе Additional CSS в настройщике темы Divi. Поскольку мы будем ориентироваться только на мобильные устройства, мы собираемся обернуть весь наш CSS в медиа-запрос, который ограничивает стили шириной браузера менее 980 пикселей. Идите вперед и начните с ввода следующего в поле Additional CSS:
@media (max-width: 980px) {
}
Создание фиксированного заголовка для мобильных устройств с помощью CSS
Поскольку Divi уже добавляет класс под названием «et-fixed-header», когда пользователь прокручивает страницу вниз, мы можем использовать этот селектор в нашем настраиваемом CSS для создания и стилизации фиксированного заголовка для мобильных устройств.
Эта первая группа CSS ниже делает заголовок фиксированным (или закрепленным) в верхней части страницы, а затем регулирует высоту фиксированного заголовка до 55 пикселей. Он также добавляет полупрозрачный белый цвет фона. Добавьте следующее в свой дополнительный CSS в настройщике темы в скобках Media Query.
/*********************************
style mobile fixed header
*********************************/
.et_fixed_nav #main-header.et-fixed-header {
position: fixed;
background: rgba(255,255,255,0.8); /*change header background color here*/
height: 55px;
}
.et-fixed-header .logo_container {
height: 55px;
}
.et-fixed-header .mobile_menu_bar {
padding-bottom: 5px;
}
Apple предлагает, чтобы все интерактивные элементы пользовательского интерфейса для своих приложений имели размер не менее 44 × 44 пикселей, чтобы наши большие пальцы и пальцы могли легко нажимать на них. Это было бы хорошим руководством для элементов фиксированного заголовка мобильного телефона. Следующий CSS делает значок навигации 45 пикселей.
/*********************************
make mobile fixed header navigation icon larger
*********************************/
.et-fixed-header .mobile_menu_bar:before {
font-size: 45px;
}
.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 5px;
}
.et_fixed_nav #et-top-navigation {
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
Наконец, давайте добавим больше высоты нашему логотипу в фиксированный заголовок, чтобы мы могли лучше его видеть. Введите следующий CSS:
/**************************
Increase height of logo area on mobile and mobile fixed header
***************************/
#logo, .et-fixed-header #logo {
max-height: 80%;
}
Вот и все! Мы все закончили.
Вот последний набор CSS для создания фиксированного мобильного заголовка:
@media (max-width: 980px) {
/*********************************
style mobile fixed header
*********************************/
.et_fixed_nav #main-header.et-fixed-header {
position: fixed;
background: rgba(255,255,255,0.8);
height: 55px;
}
.et-fixed-header .logo_container {
height: 55px;
}
.et-fixed-header .mobile_menu_bar {
padding-bottom: 5px;
}
/*********************************
make mobile fixed header navigation icon larger
*********************************/
.et-fixed-header .mobile_menu_bar:before {
font-size: 45px;
}
.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 5px;
}
.et_fixed_nav #et-top-navigation {
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
/**************************
Increase height of logo area on mobile and mobile fixed header
***************************/
#logo, .et-fixed-header #logo {
max-height: 80%;
}
}
Сохраните ваши настройки. Теперь у вас есть исправный мобильный фиксированный заголовок.
Включение вашего логотипа в фиксированный заголовок мобильного устройства
Если вы хотите использовать другой логотип для своего мобильного фиксированного заголовка, вы можете сделать это довольно легко с помощью некоторого jQuery. Все, что вам нужно, это URL-адреса обоих логотипов, которые вы собираетесь использовать. URL-адрес первого изображения логотипа должен быть логотипом по умолчанию, который вы уже используете для своего сайта. Второй URL-адрес изображения логотипа должен быть логотипом, который вы хотите использовать для фиксированного мобильного заголовка. Убедитесь, что вы загрузили оба логотипа в медиа-библиотеку и получили URL-адреса.
Когда у вас есть оба URL-адреса, перейдите на панель управления WordPress и перейдите в Divi> Параметры темы> Интеграции. Найдите поле ввода «Добавить код в заголовок вашего блога» и введите следующий скрипт jQuery:
<script>
var imageUrl = [
'ENTER DESKTOP LOGO IMAGE URL',
'ENTER MOBILE LOGO IMAGE URL',
];
jQuery(window).on('scroll', function() {
var $header = jQuery('header');
var $logo = jQuery('#logo');
if ((jQuery(window).width() < 981) &&
($header.hasClass('et-fixed-header'))) {
return $logo.attr('src', imageUrl[1]);
};
return $logo.attr('src', imageUrl[0])
});
</script>
Теперь замените текст «ВВЕДИТЕ URL-адрес изображения логотипа на рабочем столе» на URL-адрес логотипа, который вы в настоящее время используете для своего сайта.
Затем замените текст «ВВЕДИТЕ URL-адрес ИЗОБРАЖЕНИЯ МОБИЛЬНОГО ЛОГОТИПА» на URL-адрес логотипа, который вы хотите использовать только для мобильных устройств.
Сохраните настройки и проверьте результаты.
Поддержка браузера
В этом посте я создал фиксированный заголовок, используя только CSS, сильно полагаясь на свойство CSS «position: fixed». Это свойство CSS может несовместимо со старыми версиями мобильных браузеров, особенно в iOS Safari и Android. Но в наши дни «position: fixed» довольно хорошо поддерживается в новых версиях мобильных браузеров (кроме Opera Mini).
Существуют и другие более надежные плагины и решения JavaScript, но я подумал, что лучше всего предоставить вам простую версию CSS. Пожалуйста, рассмотрите возможность изучения этих вариантов, если это решение вам не подходит.
Последние мысли
Стоит отметить, что мобильные фиксированные заголовки могут отрицательно сказаться на удобстве использования. Поскольку они продолжают блокировать верхнюю часть вашего браузера все время, если вы не будете осторожны, вы можете потерять ценную недвижимость без уважительной причины. Помните, не у всех есть фаблет, как у этого парня.
Вот почему важно настроить фиксированный заголовок для мобильных устройств, придав ему меньшую высоту, другой логотип и большую кнопку навигации. А добавив несколько строк CSS на свой веб-сайт Divi, вы можете иметь фиксированный заголовок на мобильном телефоне без использования стороннего плагина. Так что, если есть смысл добавить его в следующий проект, дерзайте. Наличие такой функциональности может улучшить пользовательский интерфейс вашего сайта.
Я с нетерпением жду вашего ответа в комментариях.
Ваше здоровье!