Создание настраиваемой боковой навигации по столбцам для одностраничных приложений с помощью Divi

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

Давайте перейдем к этому.

Предварительный просмотр

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

Рабочий стол

Мобильный

Загрузите БЕСПЛАТНО макет навигации по столбцу

Чтобы получить доступ к бесплатному расположению боковой панели навигации с колонками, вам сначала необходимо загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Начнем воссоздавать!

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

Создать новую пустую страницу

Первое, что вам нужно сделать, это создать новую пустую страницу. Как только вы это сделаете, переключитесь на Visual Builder.

Добавить новый раздел

Фоновый цвет

Мы собираемся уместить все содержимое нашей страницы в один раздел, одну строку и два столбца. Добавьте на страницу новый обычный раздел с белым фоном.

• Цвет фона: #FFFFFF

Интервал

Удалите все стандартные верхние и нижние отступы раздела.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Добавить новую строку

Структура столбца

Продолжите, добавив новую строку, используя следующую структуру столбцов:

Размеры

Не добавляя еще каких-либо модулей, откройте настройки строки и соответствующим образом измените настройки размеров:

• Выровнять высоту столбца: Да
• Ширина: 100%
• Максимальная ширина: 100%
• Высота: 100vh

Интервал

Перейдите к настройкам интервала и удалите все отступы по умолчанию сверху и снизу.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Столбец 1 Настройки

Завершив общие настройки строки, откройте настройки столбца 1.

Фоновый цвет

Добавьте белый цвет фона.

• Цвет фона: #FFFFFF

Коробка Тень

Наряду с тонкой тенью коробки.

• Горизонтальное положение тени блока: 80 пикселей
• Сила размытия тени коробки: 75 пикселей
• Цвет тени: rgba (0,0,0,0.07)

Масштаб преобразования

Мы также уменьшаем размер столбца на рабочем столе.

• Внизу: 75% (компьютер), 100% (планшет и телефон)
• Справа: 75% (компьютер), 100% (планшет и телефон)

Преобразовать Перевести

Затем измените положение столбца, используя некоторые настраиваемые параметры преобразования.

• Внизу: -5vw (рабочий стол), 0px (планшет и телефон)
• Справа: 0 пикселей

Столбец 2 Настройки

Продолжите, открыв настройки столбца 2.

Интервал

Перейдите на вкладку дизайна и добавьте следующие значения отступа слева и справа для разных размеров экрана:

• Левое заполнение: 2vw (рабочий стол), 4vw (планшет), 5vw (телефон)
• Правое заполнение: 2vw (рабочий стол), 4vw (планшет), 5vw (телефон)

CSS-класс

Позже мы добавим плавную прокрутку и скроем полосу прокрутки. Для этого нам нужно добавить в столбец собственный класс CSS.

• Класс CSS: scroll-column

Видимость

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

• Горизонтальное переполнение: скрыто
• Вертикальное переполнение: прокрутка

Добавить текстовый модуль пункта меню в столбец 1

Добавить копию

Приступим к добавлению модулей! Добавьте первый пункт меню «Текстовый модуль» в столбец 1 с некоторым содержимым по вашему выбору.

Добавить ссылку

Добавьте ссылку привязки к пункту меню.

• URL ссылки на модуль: www.yourwebsite.com/yourpage/#home

Настройки текста

Перейдите на вкладку дизайна и соответствующим образом измените настройки текста:

• Шрифт текста: Монтсеррат
• Выравнивание текста: по центру
• Цвет текста: # 383838
• Размер текста: 3vw
• Расстояние между буквами текста: -3 пикселя (рабочий стол), -2 пикселя (планшет), -1 пиксель (телефон)

Интервал

Затем добавьте несколько настраиваемых значений верхнего и нижнего полей.

• Верхняя маржа: 23vw (ПК), 3vw (планшет и телефон)
• Нижнее поле: 3vw (рабочий стол), 2vw (планшет), 1vw (телефон)

Клонировать элемент меню дважды

После того, как вы завершили первый пункт меню, дважды клонируйте его.

Изменить содержимое обоих дубликатов

Измените содержимое пункта меню обоих дубликатов.

Изменить ссылки обоих дубликатов

Вместе с якорными ссылками.

• Дубликат 1: / # about
• Дубликат 2: / # услуг

Изменить интервал между двумя дубликатами

Завершите дубликаты, соответствующим образом изменив значения интервалов:

• Верхнее поле: 3vw (рабочий стол), 2vw (планшет), 1vw (телефон)
• Нижнее поле: 3vw (рабочий стол), 2vw (планшет), 1vw (телефон)

Добавить модуль разделителя в столбец 1

Видимость

Добавьте модуль разделителя прямо между первым и вторым текстовыми модулями в столбце 1. Убедитесь, что опция «Показать разделитель» включена.

• Показать разделитель: Да

Линия

Затем измените цвет линии.

• Цвет линии: # ffebc9

Размеры

Вместе с настройками размеров.

• Вес разделителя: 1vw
• Высота: 0 пикселей

Модуль разделения клонов

Клонируйте модуль разделителя и поместите дубликат под вторым текстовым модулем.

Добавить модуль отслеживания социальных сетей в столбец 1

Добавить социальные сети

Следующий и последний модуль, который нам нужен в столбце 1, - это модуль отслеживания социальных сетей. Добавьте нужные социальные сети.

Выравнивание

Затем перейдите на вкладку дизайна и измените выравнивание модуля.

• Выравнивание модуля: по центру

Интервал

Затем измените значения маржи.

• Верхняя маржа: 12vw (настольный компьютер), 5vw (планшет и телефон)
• Нижняя маржа: 3vw (планшет и телефон)

Граница

И добавьте «50vw» к каждому из углов, чтобы создать круглую форму.

Добавить модуль изображения в столбец 2

Загрузить изображение

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

Выравнивание

Перейдите на вкладку дизайна и выберите выравнивание изображения по левому краю.

• Выравнивание изображения: по левому краю

Размеры

Затем измените настройки размера.

• Принудительная полная ширина: Да

Интервал

И добавьте правую обивку.

• Правое заполнение: 20vw

CSS ID

Наконец, перейдите на вкладку «Дополнительно» и добавьте первый идентификатор CSS. Убедитесь, что это соответствует привязке к первому пункту меню.

• CSS ID: Главная

Добавить модуль текста заголовка в столбец 2

Добавить контент H2

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

Настройки текста H2

Перейдите на вкладку дизайна и соответствующим образом измените настройки текста H2:

• Шрифт заголовка 2: Montserrat
• Выравнивание текста заголовка 2: по левому краю
• Цвет текста заголовка 2: # 383838
• Размер текста заголовка 2: 2vw (рабочий стол), 4vw (планшет), 5vw (телефон)
• Интервал между буквами заголовка 2: -1px

Интервал

Затем добавьте несколько значений пользовательской маржи.

• Верхнее поле: 6vw (рабочий стол), 10vw (планшет), 12vw (телефон)
• Нижнее поле: 2vw (рабочий стол), 4vw (планшет), 6vw (телефон)

Добавить модуль разделителя в столбец 2

Видимость

Следующий необходимый нам модуль - это Divider Module. Убедитесь, что опция «Показать разделитель» включена.

• Показать разделитель: Да

Линия

Измените цвет линии.

• Цвет линии: # ffebc9

Размеры

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

• Вес разделителя: 15 пикселей
• Ширина: 16%
• Выравнивание модуля: слева

Добавить модуль основного текста в столбец 2

Добавить содержимое

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

Настройки текста

Перейдите на вкладку дизайна и соответствующим образом измените настройки текста:

• Шрифт текста: Roboto
• Выравнивание текста: по ширине
• Цвет текста: # a8a8a8
• Размер текста: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
• Расстояние между буквами текста: 1 пикс.
• Высота текстовой строки: 2vw (рабочий стол), 3.5vw (планшет), 4.5vw (телефон)

Интервал

Затем добавьте несколько значений пользовательского интервала.

• Верхнее поле: 3vw (рабочий стол), 5vw (планшет), 7vw (телефон)
• Нижнее поле: 3vw (рабочий стол), 5vw (планшет), 7vw (телефон)
• Правое поле: 20vw (настольный компьютер и планшет), 5vw (телефон)

Добавить модуль кнопок в столбец 2

Добавить содержимое

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

Выравнивание

Выберите выравнивание левой кнопки на вкладке дизайна.

• Расположение кнопок: влево

Кнопка

Соответственно измените настройки кнопки:

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
• Цвет текста кнопки: #ffffff
• Цвет фона кнопки: # 0072ff
• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 0 пикселей
• Шрифт кнопки: Montserrat
• Толщина шрифта кнопок: полужирный

Интервал

И также поиграйте со значениями интервалов.

• Верхнее поле: 4vw (рабочий стол), 6vw (планшет), 8vw (телефон)
• Нижнее поле: 4vw (рабочий стол), 6vw (планшет), 8vw (телефон)
• Верхняя прокладка: 1,5vw (рабочий стол), 3vw (планшет), 4vw (телефон)
• Нижняя обивка: 1,5 мм (рабочий стол), 3 мм (планшет), 4 мм (телефон)
• Левое заполнение: 3vw (рабочий стол), 6vw (планшет), 8vw (телефон)
• Правая прокладка: 3vw (рабочий стол), 6vw (планшет), 8vw (телефон)

Клонировать все модули в столбце 2 дважды и разместить в том же порядке

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

Изменение идентификатора CSS для модуля №1 для повторяющегося изображения

Измените идентификатор CSS первого дублирующего модуля изображения.

• CSS ID: о нас

Изменение идентификатора CSS для модуля №2 для повторяющегося изображения

Сделайте то же самое для второго дублирующего модуля изображения.

• CSS ID: услуги

Скрыть полосу прокрутки и добавить плавную прокрутку

Открыть настройки страницы

Теперь, чтобы создать эффект плавной прокрутки и скрыть полосу прокрутки столбца 2, мы добавим несколько строк кода CSS. Откройте настройки страницы.

Добавить собственный CSS

Затем перейдите на вкладку «Дополнительно» и добавьте код CSS. Как только вы завершите этот шаг, все готово!

.scroll-column::-webkit-scrollbar {
display: none;
}

.scroll-column {
scroll-behavior: smooth;
}

Предварительный просмотр

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

Рабочий стол

Мобильный

Последние мысли

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

Если вы хотите узнать больше о Divi и получить больше бесплатных подарков Divi, убедитесь, что вы подписались на нашу рассылку новостей по электронной почте и канал YouTube, чтобы вы всегда были одним из первых, кто узнает и извлекает выгоду из этого бесплатного контента.