Как создать вертикальную навигацию с Divi, которая движет бизнесом
Опубликовано: 2017-08-29В сегодняшнем руководстве по Divi мы покажем вам, как создать вертикальную навигацию, которая будет способствовать развитию бизнеса на вашем веб-сайте. Вертикальная навигация, которую мы покажем вам, как сделать, обычно используется для предприятий, которые считают важным, чтобы посетители действовали немедленно. Например, если у вас есть ресторан, в котором клиенты могут делать заказы онлайн, вы можете захотеть, чтобы ваш веб-сайт помогал посетителям действовать быстро.
Вертикальная навигация, которую мы покажем вам, как сделать, будет содержать важную информацию и призывы к действию вместо страниц. Включение их в вертикальную навигацию будет стимулировать посетителей к заказу и, таким образом, увеличит коэффициент конверсии веб-сайта.
Результат
Прежде чем погрузиться в различные шаги и вдохновение, давайте посмотрим на результат вертикальной навигации, которого вы сможете достичь в конце этого поста:
Помимо того, что мы покажем вам, как добавлять различные элементы меню в вертикальную навигацию, мы также будем использовать фиксированную навигацию. Таким образом, вы уверены, что информация будет следовать за посетителями на протяжении всего одностраничного просмотра.
Вдохновение
Вдохновение, которое мы вдохновили на вертикальную навигацию, которая движет бизнесом, исходит от веб-сайта, который мы продемонстрировали в предыдущем посте. В этом посте мы перечислили 12 веб-сайтов, которые используют вертикальную навигацию для собственных целей. Одним из примеров, привлекших внимание людей, был веб-сайт Eat Thai Restaurant. Их вертикальная навигация - одна из тех нестандартных концепций. Их веб-сайт - одностраничный, но они нашли хороший способ по-прежнему использовать возможности навигации. Их сайт выглядит так:
Как создать вертикальную навигацию с Divi, которая движет бизнесом
Подпишитесь на наш канал Youtube
Включить вертикальную навигацию
Для начала нам нужно активировать вариант вертикальной навигации, который предлагает Divi. Для этого перейдите в панель управления WordPress> Внешний вид> Заголовок и навигация> Формат заголовка> Включить вертикальную навигацию.
Включить фиксированную навигацию
Вертикальная навигация, которую мы воссоздаем, будет исправлена, как и веб-сайт Eat Thai Restaurant. Чтобы зафиксировать вертикальную навигацию, перейдите в панель управления WordPress> Divi> Параметры темы> вкладка Общие> Включить фиксированную навигацию.
Настройки основного меню (настройщик темы)
Следующее, что вам нужно сделать, это внести некоторые изменения в основное меню. Если вы находитесь на панели инструментов WordPress, выберите «Внешний вид»> «Настройка»> «Заголовок и навигация»> « Панель основного меню» . Оказавшись там, вы можете внести в него следующие изменения (или любые другие изменения, которые хотите внести):
- Скрыть изображение логотипа: отключить
- Максимальная высота логотипа: 100
- Верхнее поле меню: 0
- Размер текста: 14
- Расстояние между буквами: -1
- Шрифт: Lato Light
- Цвет текста: #FFFFFF
- Цвет активной ссылки: #FFFFFF
- Цвет фона: # 004159
- Цвет фона выпадающего меню: # 004159
Фиксированные настройки меню навигации (настройщик тем)
Последнее, что нам нужно сделать в настройщике тем, - это убедиться, что логотип появляется при прокрутке. Если вы все еще используете настройщик тем, перейдите в « Заголовок и навигация»> «Фиксированные настройки навигации»> и убедитесь, что опция «Скрыть логотип» отключена.
Добавить пункты меню
Двигаясь дальше, мы собираемся добавить пункты меню в нашу вертикальную навигацию. Эта часть сообщения, вероятно, отнимет у вас большую часть времени. Вы должны добавить каждый из элементов индивидуально с помощью настраиваемых ссылок.
Активировать классы CSS
Но прежде чем мы начнем добавлять элементы меню, вам нужно убедиться, что опция CSS Classes включена. Эта опция позволяет вам назначить класс каждому из пунктов меню индивидуально. В данном случае это необходимо, поскольку для большинства элементов будут заданы собственные настройки стиля. Чтобы включить параметр «Классы CSS», нажмите «Параметры экрана» в правом верхнем углу страницы меню и включите параметр «Классы CSS», как показано на снимке экрана ниже.
Добавить новое меню
После того, как вы активировали классы CSS для своих пунктов меню, вы можете продолжить и создать новое меню. Дайте ему имя и убедитесь, что вы сделали это новое меню своим основным меню.
После добавления всех пунктов меню (которые мы покажем вам шаг за шагом) ваше меню будет выглядеть так:
Номер телефона
Так как это одностраничный, в меню не будет никаких страниц. Все элементы, которые мы собираемся добавить в меню, скорее будут настраиваемыми ссылками. Это дает нам возможность поиграть с тем, что мы хотим добавить.
Чтобы добавить первый пункт меню, щелкните «Пользовательские ссылки» и добавьте номер телефона в поле «Метка навигации». Вы можете выбрать, хотите ли вы добавить к нему URL-адрес или нет. Однако при добавлении пункта меню в ваше меню вам нужно будет ввести URL-адрес. После того, как пункт меню был добавлен в ваше меню, вы можете стереть URL-адрес, и вы будете уверены, что ничего не произойдет, когда кто-то щелкнет элемент меню.
После того, как вы добавили пункт меню в свое меню, вы также увидите, что появляется класс CSS. Здесь вам нужно будет выбрать класс CSS, который изменит стиль пункта меню. В этом случае мы используем класс phone-number. Если вы хотите просто скопировать и вставить строки кода CSS в конце этого сообщения, убедитесь, что вы используете классы CSS, упомянутые в этих шагах.
Адрес
Точно так же мы добавим адрес. Введите адрес в метку навигации и добавьте URL-адрес, если хотите. Класс, который мы используем для пункта меню адреса, - это просто «адрес».
Социальные иконки
Добавление значков социальных сетей в вертикальную навигацию требует немного больше усилий. В предыдущем посте мы подробно рассмотрели добавление значков социальных сетей в ваше основное меню. Однако в этом случае метод будет немного другим, так как нам нужно будет расположить значки рядом друг с другом в вертикальной навигации.
Добавить Font Awesome
Первое, что вам нужно сделать, если вы еще этого не сделали, - это добавить Font Awesome в параметры темы. Для этого перейдите в панель управления WordPress> Divi> Параметры темы> Интеграция> и вставьте следующий шорткод в заголовок вашего сайта:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
Получить шорткоды
Получить шорткоды к иконкам социальных сетей; откройте эту страницу на сайте Font Awesome. В поле поиска, которое вы увидите на этой странице, найдите различные значки, которые вы хотите добавить в свою вертикальную навигацию.
После того, как вы нажмете на значок, вы увидите шорткод, связанный со значком. Сохраните где-нибудь каждый из этих шорткодов.
Добавить социальные иконки в меню
Далее мы добавим значки социальных сетей. Обычно вы можете добавлять каждый из социальных иконок по отдельности в качестве пунктов меню. Но поскольку мы хотим, чтобы они отображались рядом друг с другом, нам придется поместить их в один и тот же пункт меню. HTML-код, который вам нужно будет добавить в метку навигации, следующий:
<a href="#" target="_blank"><i class="fa fa-facebook-official facebook" aria-hidden="true"></i></a> <a href="#" target="_blank"><i class="fa fa-instagram instagram" aria-hidden="true"></i></a> <a href="#" target="_blank"><i class="fa fa-envelope envelope" aria-hidden="true"></i></a>
Не забудьте добавить URL-адрес к каждому значку. Класс, который мы используем для всех трех объединенных значков социальных сетей, называется «icon-wrapper», но мы также назначили дополнительный класс каждому значку социальных сетей, чтобы внести индивидуальные изменения. Вы можете заметить эти классы сразу после класса Font Awesome. Их называют «фейсбук», «инстаграм» и «конверт».
Направления
Для следующего пункта меню мы использовали слово «направления» в качестве имени класса CSS.
Линия
Чтобы добавить строку прямо под направлениями, мы должны добавить пустой символ в ярлык навигации. Это потому, что WordPress не позволяет создавать пункт меню без привязки к нему ярлыка. Чтобы добавить пробел в пункт меню строки, просто добавьте "& nbsp;" к ярлыку навигации. Кроме того, также добавьте «line» в качестве имени класса CSS в этот пункт меню.
Часы работы
Двигаясь дальше, мы собираемся добавить часы работы и присвоить ему имя класса CSS «часы».
CTA 1
Затем мы добавим первый CTA. Мы собираемся присвоить ему имя класса CSS cta-1.
CTA 2
Для второго призыва к действию мы будем использовать имя класса CSS cta-2.
Кнопка CTA
Добавление кнопки CTA в вертикальную навигацию требует на несколько шагов больше, чем для обычных пунктов меню, представляющих собой просто текст. Начните с открытия страницы, которую вы используете как одностраничную страницу, и выполните следующие шаги, указанные ниже.
Создать кнопку на целевой странице
Если вы хотите использовать кнопку с призывом к действию в вертикальной навигации, вам понадобится такая же кнопка где-то на одностраничном экране. Создав его, вы можете проверить элемент и скопировать следующие строки кода (связанные с созданной вами кнопкой), которые появляются в коде вашего веб-сайта:
<div class="et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_center"> <a class="et_pb_button et_pb_button_0 et_pb_module et_pb_bg_layout_light"> ORDER NOW </a> </div>
Конечно, этот код может отличаться в зависимости от того, как вы его стилизуете. Это также зависит от того, есть ли на той же странице другие кнопки или нет. Помните, что кнопка будет отображаться только в том стиле, который вы назначили ей на странице, где расположена кнопка. Вот почему добавление кнопки к вашей вертикальной навигации обычно предпочтительнее, когда это касается одностраничного просмотра.
Примечание. Убедитесь, что вы отрегулировали размер шрифта и отступ кнопки в модуле кнопок, чтобы он идеально вписался в вашу вертикальную навигацию.
Добавить как элемент меню
Теперь, когда вы скопировали необходимый HTML-код, связанный с кнопкой, добавьте новую настраиваемую ссылку и добавьте код в метку навигации. Класс CSS, который мы используем для этого пункта меню, - cta-3.
Добавить строки кода CSS
Следующая часть этого поста посвящена разделу строк кода CSS, которые помогут вам достичь конечного результата и макета. Вы заметите, что мы использовали классы CSS, которые мы назначили различным пунктам меню. Однако, если вы решили использовать другие имена классов, не забудьте изменить их в коде CSS, чтобы он работал.
Чтобы добавить код CSS, перейдите в панель управления WordPress> Divi> Параметры темы> Прокрутите вниз вкладку Общие и добавьте следующие строки кода CSS в поле Пользовательский CSS:
@media only screen and (min-width:992px) {
.et_vertical_nav #page-container #main-header {
margin: 10px !important;
height: 93% !important;
z-index: 9999;
}}
.phone-number {
font-size: 1.9em !important;
font-weight: 400 !important;
}
.address {
font-weight: 300 !important;
}
@media only screen and (min-width:769px){
#main-header div#et-top-navigation {
padding-top: 110px;
height: 100%;
position: static !important;
}}
@media only screen and (min-width:769px){
.et_vertical_nav span.logo_helper {
display: none;
}}
@media only screen and (min-width:769px){
.et_vertical_nav #main-header #logo {
margin-bottom: 28px;
}}
@media only screen and (min-width:769px){
.et_vertical_nav #main-header .container {
margin-left: 25px !important;
margin-right: 25px !important;
height: 100% !important;
}}
.facebook, .instagram, .envelope {
padding: 7px 13px 7px 13px;
font-size: 1.6em;
}
.icon-wrapper a {
display: inline-block !important;
}
.directions {
font-size: 1.2em;
font-weight: 400;
padding-top: 0;
text-align: center;
}
.line {
border-top: 1px solid;
color: #fff;
margin: 8px auto auto;
width: 20%;
}
.hours {
color: #ffffff;
font-size: 10px;
font-weight: 300;
text-align: center;
}
.cta-1 {
margin-top: 5px !important;
font-size: 1.3em;
font-weight: 600;
text-align: center;
}
.cta-2{
font-size: 1.1em;
font-weight: 300;
letter-spacing: 0.02em;
text-align: center;
}
#page-container {
background: #d6d4d1;
}
@media only screen and (max-width:768px) {
.directions, .line, .cta-1, .cta-2, .cta-3 {
display: none !important;
}}
#main-header #top-menu-nav .nav li {
line-height: 10.5px;
}
Изменить цвет фона разделов
Последний шаг, который вам нужно сделать, - это изменить цвета фона разделов на вашей одностраничной странице. Убедитесь, что этот цвет такой же, как тот, который вы используете для контейнера страницы. В данном случае это '# d6d4d1'.
Результат
После того, как вы добавили все пункты меню и код CSS, связанный с каждым из этих пунктов меню, вы сможете достичь следующего результата:
Последние мысли
В этом посте мы показали вам, как создать вертикальную навигацию для вашей одностраничной страницы. Этот пост был вдохновлен сайтом Eat Thai Restaurant, который также был создан с помощью Divi. Если вы следили за всем постом шаг за шагом, вы должны были достичь результата, который был продемонстрирован выше. Если у вас есть какие-либо вопросы или предложения, обязательно оставьте комментарий в разделе комментариев ниже!
Обязательно подпишитесь на нашу рассылку по электронной почте и канал на YouTube, чтобы не пропустить важное объявление, полезный совет или бесплатную поддержку Divi!
Лучшее изображение от Vectomart / shutterstock.com