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

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

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

Давайте приступим к делу!

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

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

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

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

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

Начните с добавления новой страницы на свой сайт WordPress.

Дайте своей странице название и опубликуйте

Дайте своей странице заголовок и сразу же опубликуйте ее.

Сделать страницу домашней страницей

Перейти к настройкам чтения веб-сайта

Затем перейдите к настройкам чтения вашего сайта.

Установить новую страницу как домашнюю

Здесь мы собираемся выбрать новую страницу навигации по значкам в качестве домашней страницы нашего веб-сайта.

Скрыть основную строку меню и нижний колонтитул на странице навигации по значкам

Вернитесь на страницу навигации по значкам и включите Visual Builder Divi

Теперь, когда мы выбрали домашнюю страницу, мы можем приступить к созданию нашей страницы навигации по значкам. Вернитесь на страницу, которую вы создали, и переключитесь на Divi Visual Builder.

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

Добавьте собственный CSS, чтобы скрыть основную строку меню и нижний колонтитул только на этой странице

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

#main-header, #main-footer {
display: none;}

Начнем проектировать!

Добавить раздел # 1

Давайте начнем создавать наш адаптивный дизайн с Divi! Добавьте первый обычный раздел.

Добавить ряд

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

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

Размеры

Еще не добавляя никаких модулей, откройте настройки строки и включите опцию «Сделать эту строку полной шириной» в настройках размера.

• Сделать эту строку полной шириной: Да

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

Загрузить логотип компании

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

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

Затем измените выравнивание изображения на вкладке дизайна. Убедитесь, что вы отключили параметр «Всегда по центру изображения на мобильных устройствах».

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

Интервал

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

• Внизу: 10vw (рабочий стол), 20vw (планшет и телефон)

Добавить текстовый модуль

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

Следующий необходимый нам модуль - это текстовый модуль. Добавьте контент H1 по вашему выбору.

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

Продолжите, изменив настройки текста H1 на вкладке дизайна.

• Шрифт заголовка: Didact Gothic
• Толщина шрифта заголовка: полужирный
• Выравнивание текста заголовка: по левому краю
• Цвет текста заголовка: # 333333
• Размер текста заголовка: 5vw (рабочий стол), 6vw (планшет), 7vw (телефон)
• Высота строки заголовка: 0,8 м

Размеры

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

• Ширина: 68% (рабочий стол), 80% (планшет), 88% (телефон)
• Выравнивание модуля: слева

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

Видимость

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

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

Цвет

Затем перейдите на вкладку дизайна и измените цвет значка.

• Цвет: # 333333

Размеры

Измените также настройки размера модуля.

• Вес разделителя: 10 пикселей
• Ширина: 8% (рабочий стол), 20% (планшет), 25% (телефон)
• Выравнивание модуля: слева

Добавить раздел # 1

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

Добавить ряд

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

Продолжите, добавив в раздел новую строку.

Размеры

Еще не добавляя никаких модулей, откройте настройки строки и измените настройки размера.

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

Интервал

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

• Нижняя обивка: 0,2 Вт
• Левое заполнение: 4vw (рабочий стол), 2vw (планшет), 1vw (телефон)
• Правая прокладка: 25vw (рабочий стол), 2vw (планшет), 1vw (телефон)
• Правый отступ столбца 1: 0,2vw
• Колонка 2, отступ слева: 0,1vw
• Правый отступ столбца 2: 0,1vw
• Колонка 3, отступ слева: 0,2vw

Пользовательские CSS

Мы обеспечиваем отображение всех столбцов рядом друг с другом, даже на планшете и телефоне, добавляя одну строку кода CSS к основному элементу на вкладке «Дополнительно».

display: flex;

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

Добавить заголовок

Теперь мы можем начать добавлять наши модули! Добавьте новый модуль Blurb в первый столбец и введите заголовок.

Выбрать значок

Затем выберите нужный значок.

Ссылка

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

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

Градиентный фон

Затем добавьте градиентный фон.

• Цвет 1: # 4b42ff
• Цвет 2: rgba (255,255,255,0)
• Тип градиента: радиальный
• Радиальное направление: центр
• Стартовая позиция: 60%
• Конечная позиция: 60%

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

Вместе с фоновым изображением. Сохраните следующее изображение на свой рабочий стол:

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

• Положение фонового изображения: по центру
• Повтор фонового изображения: без повтора

Настройки значков

Продолжите, изменив настройки значка на вкладке дизайна.

• Цвет значка: #ffffff
• Расположение значков: вверху
• Использовать размер шрифта значка: Да
• Размер шрифта значков: 4vw (рабочий стол), 6vw (планшет), 8vw (телефон)

Настройки текста заголовка

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

• Шрифт заголовка: Didact Gothic
• Выравнивание текста заголовка: по центру
• Цвет текста заголовка: #ffffff
• Размер текста заголовка: 2vw (рабочий стол), 3vw (планшет), 4vw (телефон)
• Интервал между заголовками: -2 пикселя
• Высота строки заголовка: 0em

Интервал

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

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

Клонировать модуль Blurb дважды и размещать дубликаты в оставшихся столбцах

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

Изменить содержимое рекламного объявления

Конечно, вам нужно будет изменить названия каждого дубликата.

Изменить значки рекламных объявлений

Вместе с иконами.

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

Сопоставьте новые модули Blurb с уникальным URL-адресом, который ведет на нужную страницу.

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

Изменить фон с градиентом размытия

Затем измените первые цвета градиентного фона обоих дубликатов.

• Цвет 1: # f9f9f9

• Цвет 1: # ff445d

Измените цвета значков и текста модуля Blurb в столбце 2

И совместите цвета значка и текста модуля Blurb с новым цветом фона градиента.

• Цвет значка: # 000000
• Цвет текста заголовка: # 000000

Клонировать всю строку

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

Клонировать модуль Blurb в столбце 2

Клонируйте модуль Blurb из столбца 2.

Поместите модули Blurb на светлом фоне в столбец 1 и столбец 3

И поместите модули Blurb на светлом фоне в столбцы 1 и 3.

Поместите модуль Color-Background Blurb в столбец 2

Переместите один из модулей Blurb с цветным фоном во второй столбец.

Удалить оставшийся модуль Blurb

И удалите оставшийся модуль Blurb.

Изменить содержимое рекламного объявления

Опять же, вам нужно изменить заголовки каждого модуля Blurb.

Изменить значки рекламных объявлений

Вместе с иконами.

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

И ссылки тоже.

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

Изменить градиентный фон модуля Blurb в столбце 2

И последнее, но не менее важное: измените первый цвет градиентного фона модуля Blurb в столбце 2.

• Цвет 1: # 000000

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

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

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

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