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

Вы когда-нибудь думали о создании полностью горизонтальной страницы, на которой для навигации используются пролистывающие и якорные ссылки? Что ж, если у вас есть и вы точно не знаете, как подойти к этому, это идеальный пост для вас. Мы собираемся показать вам, как создать полностью горизонтальную пролистываемую страницу с помощью Divi. Этот метод действительно поможет вам выделить ваш веб-сайт среди других и соответствует тенденциям веб-дизайна 2019 года. Результат, который мы создадим, будет отлично смотреться на экранах всех размеров.

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

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

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

Рабочий стол

Мобильный

Подход

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

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

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

Фоновый цвет

Создайте новую страницу и добавьте к ней обычный раздел. Откройте настройки раздела и измените цвет фона.

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

Интервал

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

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

Добавить строку №1

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

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

Размеры

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

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

Интервал

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

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

CSS ID

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

• Идентификатор CSS: swipe-1

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

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

scroll-snap-align: start;

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

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

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

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

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

• Цвет значка: rgba (255,255,255,0)
• Размещение изображения / значка: вверху
• Использовать размер шрифта значка: Да
• Размер шрифта значков: 5vw (рабочий стол), 13vw (планшет), 21vw (телефон)

Интервал

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

• Верхнее поле: 14vw (рабочий стол), -11vw (планшет), -17vw (телефон)
• Левое поле: 60vw (планшет и телефон)

Видимость

Мы также скрываем модуль на экранах меньшего размера.

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

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

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

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

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

• Шрифт заголовка 2: Source Serif Pro
• Выравнивание текста заголовка 2: по левому краю
• Размер текста заголовка 2: 3vw (рабочий стол), 7vw (планшет и телефон)

Размеры

Затем измените ширину в настройках размера.

• Ширина: 77%

Интервал

И добавьте немного нижнего поля для экрана меньшего размера.

• Нижняя маржа: 15vw (планшет и телефон)

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

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

Прямо под текстовым модулем, который вы добавили, добавьте модуль кнопок. Введите какую-нибудь копию.

Настройки кнопок

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

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 0.9vw (рабочий стол), 2vw (планшет), 3.5vw (телефон)
• Цвет текста кнопки: # 000000
• Ширина границы кнопки: 1 пиксель

• Цвет границы кнопки: # 000000
• Радиус границы кнопки: 0 пикселей
• Шрифт кнопки: Mukta
• Толщина шрифта: полужирный
• Стиль шрифта: прописные

Интервал

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

• Верхняя маржа: 6vw (ПК), 4vw (планшет и телефон)
• Верхний отступ: 15 пикселей
• Нижний отступ: 15 пикселей
• Отступ слева: 50 пикселей
• Отступ справа: 50 пикселей

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

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

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

Ссылка

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

• URL ссылки на модуль: https://www.yourwebsite.com/page/#swipe-2

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

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

• Цвет значка: # 333333
• Расположение значка изображения: вверху
• Использовать размер шрифта значка: Да
• Размер шрифта значков: 5vw (рабочий стол), 13vw (планшет), 21vw (телефон)

Интервал

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

• Верхнее поле: 14vw (рабочий стол), -11vw (планшет), -17vw (телефон)
• Левое поле: 60vw (планшет и телефон)

Добавить строку №2

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

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

Фоновый цвет

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

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

Размеры

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

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

Интервал

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

• Верхнее поле: -3,5vw (рабочий стол), -10vw (планшет), -17vw (телефон)
• Верхняя прокладка: 8vw (рабочий стол), 15vw (планшет), 20vw (телефон)
• Нижняя прокладка: 8vw (рабочий стол), 15vw (планшет), 20vw (телефон)
• Левое заполнение: 24vw (рабочий стол), 5vw (планшет и телефон)
• Правая прокладка: 24vw (рабочий стол), 5vw (планшет и телефон)
• Правое заполнение столбца 1: 2vw (рабочий стол), 0vw (планшет и телефон)
• Поле слева в столбце 2: 2vw (рабочий стол), 0vw (планшет и телефон)

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

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

Идите вперед и добавьте текстовый модуль в первый столбец. Введите какую-нибудь копию по вашему выбору (включая заголовок H3).

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

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

• Шрифт текста: Open Sans
• Размер текста: 0.65vw (рабочий стол), 1.8vw (планшет), 2.7vw (телефон)
• Высота текстовой строки: 1,8 м

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

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

• Шрифт заголовка 3: Mukta
• Толщина шрифта заголовка 2: полужирный
• Стиль шрифта заголовка 3: прописные
• Размер текста заголовка 3: 0,8vw (рабочий стол), 3vw (планшет), 4vw (телефон)
• Высота строки заголовка 3: 1,8 м

Интервал

Добавьте немного нижнего поля для экрана меньшего размера.

• Нижняя маржа: 5vw (планшет и телефон)

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

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

Изменить содержимое

Убедитесь, что вы изменили содержимое.

Клонировать строку №1 три раза

Когда обе ваши строки будут готовы, вы можете клонировать первую строку 3 раза.

Изменить дубликат №1

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

Нам нужно будет изменить CSS ID первого дубликата.

• Идентификатор CSS: swipe-2

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

Вместе с цветом первого модуля Blurb Module.

• Цвет значка: # 333333

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

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

• URL ссылки на модуль: https://www.yourwebsite.com/page/#swipe-1

• URL ссылки на модуль: https://www.yourwebsite.com/page/#swipe-3

Заменить дубликат №2

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

Измените CSS ID второго дубликата.

• Идентификатор CSS: swipe-3

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

Вместе с цветом значка первого модуля Blurb.

• Цвет значка: # 333333

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

И снова измените ссылки каждого модуля Blurb соответственно:

• URL ссылки на модуль: https://www.yourwebsite.com/page/#swipe-2

• URL ссылки на модуль: https://www.yourwebsite.com/page/#swipe-4

Заменить дубликат №3

Изменить идентификатор CSS

Также измените CSS ID дубликата третьей строки.

• Идентификатор CSS: swipe-4

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

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

Изменить ссылку модуля Blurb (столбец 2)

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

• URL ссылки на модуль: https://www.yourwebsite.com/page/#swipe-1

Клонировать строку №2 три раза

Переходим к следующему ряду. Клонируйте этот ряд также трижды.

Изменить цвет фона строки дубликата №1

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

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

Изменить цвет фона строки дубликата №2

Второй дубликат использует следующий цвет фона:

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

Изменить цвет фона строки дубликата №3

Также измените цвет фона дубликата третьей строки.

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

Добавить CSS ID и CSS-код в раздел

Теперь, когда у нас есть все нужные строки, мы можем совершить волшебство. Добавьте CSS ID ко всему разделу. Позже в этом посте мы будем использовать этот CSS ID, чтобы скрыть полосу прокрутки.

• Идентификатор CSS: полоса прокрутки раздела

Затем перейдите к параметрам Custom CSS и добавьте несколько строк кода CSS в основной элемент.

overflow-y: scroll;
display: grid;
grid-template-columns: repeat(4, 100%);
scroll-behavior: smooth;
scroll-snap-type: x mandatory;

Чем больше столбцов раздела вы хотите создать, тем больше столбцов вам придется добавить в код CSS. Итак, скажем, например, вы хотите иметь ту же структуру, но разрешить 7 смахиваний вместо 4, вам придется соответствующим образом изменить строку кода CSS столбцов шаблона сетки:

grid-template-columns: repeat(7, 100%);

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

Скрыть полосу прокрутки

Вы также можете скрыть полосу прокрутки, используя раздел CSS ID и добавив следующие строки кода CSS в настройки страницы:

#section-scrollbar::-webkit-scrollbar {
display: none;
}

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

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

Рабочий стол

Мобильный

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

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