Как создать домашнюю страницу навигации с Divi

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

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

Результат на рабочем столе

Результат, который мы собираемся воссоздать, на рабочем столе выглядит так:

Результат на мобильном

Результат на мобильных устройствах немного отличается и выглядит так:

Как создать домашнюю страницу навигации с Divi

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

Восстановить настольную версию

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

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

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

Восстановить первую строку навигации

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

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

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

Фоновая картинка

Находясь на вкладке Content, первое, что мы собираемся сделать, это добавить фоновое изображение в вашу строку. Мы рекомендуем использовать изображение с шириной «1400 пикселей» и высотой «934 пикселей», так как это приведет к наилучшему результату. Кроме того, убедитесь, что вы поставили изображение без повтора.

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

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

Размеры

Затем откройте подкатегорию «Размер», включите параметр «Использовать настраиваемую ширину» и используйте процентную ширину «100%».

Интервал

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

Видимость

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

Текстовый модуль для описания страницы

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

После завершения настроек строки вы можете добавить первый текстовый модуль в столбец строки и использовать следующие настройки для подкатегории «Текст» на вкладке «Дизайн»:

• Шрифт текста: Andika
• Толщина шрифта текста: Обычный
• Размер текста: 13 пикселей
• Цвет текста: # 000000
• Высота текстовой строки: 1,1 мкм
• Ориентация текста: влево

Размеры

Прокрутите вниз, откройте подкатегорию «Размер» и добавьте ширину «18%». Эта ширина гарантирует, что наш текстовый модуль не будет пересекать фоновое изображение нашей строки после того, как мы добавим к нему отрицательное левое поле.

Интервал

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

• Верхнее поле: 150 пикселей
• Левое поле: -20 пикселей
• Верхний отступ: 10 пикселей
• Нижний отступ: 10 пикселей

Модуль делителя

Видимость

Затем добавьте модуль Divider прямо под текстовым модулем. В подкатегории «Видимость» включите параметр «Показать разделитель».

Цвет

Затем перейдите на вкладку «Дизайн» и добавьте «#FFFFFF» в качестве цвета разделителя.

Стили

Двигаясь дальше, выберите «Solid» в качестве стиля разделителя и «Top» в качестве позиции разделителя.

Размеры

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

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

Текстовый модуль для пункта меню

Текст ссылки в поле содержимого

Как только вы закончите с модулем разделителя, добавьте еще один текстовый модуль прямо под ним. Этот текстовый модуль будет нашим элементом навигации. Откройте настройки, введите текст и добавьте на него ссылку.

Цвет градиента фона

Находясь на вкладке Content, используйте следующие настройки градиентного фона:

• Первый цвет: #FFFFFF
• Второй цвет: rgba (12,113,195,0,62)
• Тип градиента: линейный
• Направление градиента: 108 градусов
• Стартовая позиция: 31%
• Конечная позиция: 21%

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

Затем перейдите на вкладку «Дизайн» и примените следующие настройки к вкладке «Ссылка» в подкатегории «Текст»:

• Шрифт ссылки: Andika
• Толщина шрифта ссылки: полужирный
• Стиль шрифта ссылки: прописные буквы и подчеркивание
• Стиль подчеркивания ссылки: сплошной
• Размер текста ссылки: 100 пикселей
• Цвет текста ссылки: # 000000
• Высота линии ссылки: 1em

Интервал

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

• Верхнее поле: -33 пикселей
• Нижнее поле: 250 пикселей
• Левое поле: -20 пикселей
• Верхний отступ: 80 пикселей
• Нижний отступ: 80 пикселей

Клонируйте первую строку навигации столько раз, сколько необходимо

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

Изменить фон строки

Первое, что вам нужно сделать, это изменить фоновые изображения дубликатов вашей строки. Опять же, убедитесь, что вы используете изображение с шириной «1400 пикселей» и высотой «943 пикселей» для получения наилучшего результата.

Изменить текстовый модуль для пункта меню

Изменить ссылку

Затем откройте элемент навигации «Текстовый модуль» и измените текст вместе со ссылкой.

Изменить градиентный фон в соответствии с длиной текста

Наконец, вам также необходимо изменить градиентный фон этого текстового модуля. Измените второй цвет градиента на «rgba (224,43,32,0.62)» и измените значение начальной позиции в соответствии с длиной вашего нового элемента навигации. Если у вас есть довольно длинный элемент навигации, вам нужно изменить процентное значение начальной позиции на более высокое значение, пока вы не увидите, что он встал на место.

Восстановить мобильную версию

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

Восстановить первую строку навигации

Начните с добавления еще одной строки в раздел, который мы создали в начале этого сообщения.

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

В этом столбце, как и в настольной версии, также потребуется только один столбец.

Размеры

Размер этой строки следующий:

• Сделать эту строку полной шириной: Да
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1

Эти настройки гарантируют, что наша строка займет всю ширину экрана.

Видимость

И, наконец, отключите эту строку на рабочем столе, потому что у нас есть другие строки, которые будут отображаться на рабочем столе.

Текстовый модуль для описания страницы

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

Идите вперед и добавьте в строку первый текстовый модуль. Примените следующие настройки к подкатегории Текст:

• Шрифт текста: Andika
• Толщина шрифта текста: Обычный
• Размер текста: 13 пикселей
• Цвет текста: # 000000
• Высота текстовой строки: 1,1 мкм
• Ориентация текста: по центру

Размеры

Затем откройте подкатегорию «Размер» и используйте ширину «71%» и центральное выравнивание модуля.

Интервал

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

Текстовый модуль для пункта меню

Текст ссылки в поле содержимого

Для мобильной версии нам не нужен разделительный модуль, поэтому мы пропустим этот шаг. Вместо этого мы немедленно добавим элемент навигации Text Module прямо под предыдущим созданным нами текстовым модулем. После этого добавьте текст со ссылкой в ​​поле содержимого на вкладке «Содержимое».

Цвет градиента фона

Градиентный фон, который мы собираемся использовать для этого текстового модуля, такой же, как и в первой версии Desktop:

• Первый цвет: #FFFFFF
• Второй цвет: rgba (12,113,195,0,62)
• Тип градиента: линейный
• Направление градиента: 108 градусов
• Стартовая позиция: 31%
• Конечная позиция: 21%

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

Используйте следующие настройки для текстовой подкатегории:

• Шрифт ссылки: Andika
• Толщина шрифта ссылки: полужирный
• Размер текста: 65 пикселей
• Цвет текста: # 000000
• Высота текстовой строки: 1em
• Ориентация текста: влево

Интервал

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

Модуль изображения

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

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

Клонируйте первую строку навигации столько раз, сколько необходимо

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

Изменить текстовый модуль для пункта меню

Изменить ссылку

Первое, что вам нужно изменить, - это текст и ссылку в поле содержимого вкладки «Содержимое» текстового модуля элемента навигации.

Изменить градиентный фон в соответствии с длиной текста

Затем вы также можете изменить второй цвет градиента на «rgba (224,43,32,0.62)» и изменить значение начальной позиции в соответствии с длиной вашего текста.

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

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

Результат

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

Результат на рабочем столе

Результат на мобильном

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

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

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

Изображение от LanKogal / shutterstock.com