Загрузите БЕСПЛАТНЫЙ дизайн раздела героя с призывом к действию для Divi

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

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

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

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

Рабочий стол

Мобильный

Скачать The Hero Sections БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

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

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

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

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

Добавьте новый раздел на страницу, над которой вы работаете, откройте настройки раздела и вставьте градиентный фон.

• Цвет 1: #ffffff
• Цвет 2: # f5ede5
• Направление градиента: 90 градусов
• Стартовая позиция: 17%
• Конечная позиция: 17%

Интервал

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

• Верхняя прокладка: 5vw (рабочий стол), 10vw (планшет), 13vw (телефон)
• Нижняя прокладка: 5vw (рабочий стол), 10vw (планшет), 13vw (телефон)

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

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

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

Фоновый цвет

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

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

Размеры

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

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Ширина: 60vw (рабочий стол), 100% (планшет и телефон)
• Максимальная ширина: 100%
• Выравнивание строк: вправо

Интервал

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

• Верхняя обивка: 6vw
• Нижняя обивка: 6vw
• Левое заполнение: 5,5 Вт
• Правое заполнение: 24vw

Граница

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

• Ширина левой границы: 6 пикселей
• Цвет левой границы: #FFFFFF

Коробка Тень

Добавьте тонкую тень коробки, чтобы создать глубину в разделе героя.

• Сила размытия тени коробки: 100 пикселей
• Цвет тени: rgba (0,0,0,0.22)

CSS-класс

И используйте класс CSS на вкладке «Дополнительно». Позже в этом посте мы будем использовать этот класс CSS, чтобы скрыть полосу прокрутки.

• Класс CSS: полоса прокрутки

Главный элемент

Чтобы создать горизонтальную прокрутку / смахивание, нам нужно разместить столбцы горизонтально. Мы сделаем это, добавив некоторый собственный код CSS в основной элемент строки.

display: grid;
grid-template-columns: repeat(6, 100%);
grid-column-gap: 2vw;

Переполнения

Переходим к настройкам видимости и меняем переполнения строки.

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

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

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

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

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

• Цвет 1: rgba (245 237 229,0.91)
• Цвет 2: rgba (219,34,65,0,84)
• Стартовая позиция: 35%
• Конечная позиция: 81%
• Поместите градиент над фоновым изображением: Да

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

Вместе с фоновым изображением.

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

Интервал

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

• Верхняя прокладка: 4vw (рабочий стол), 10vw (планшет), 12vw (телефон)
• Нижняя прокладка: 4vw (рабочий стол), 10vw (планшет), 12vw (телефон)
• Левое заполнение: 2vw (рабочий стол), 5vw (планшет), 7vw (телефон)
• Правая прокладка: 2vw (рабочий стол), 5vw (планшет), 7vw (телефон)

Граница

Продолжите, добавив радиус границы «20 пикселей» к каждому из углов в настройках границы.

Главный элемент

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

width: 100% !important;

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

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

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

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

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

• Шрифт заголовка 3: Poppins
• Толщина шрифта заголовка 3: светлый
• Цвет текста заголовка 3: # e92640
• Размер текста заголовка 3: 1.5vw (рабочий стол), 3.5vw (планшет), 4.5vw (телефон)

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

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

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

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

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

• Шрифт текста: Поппинс
• Толщина шрифта текста: легкий
• Цвет текста: # e92640
• Размер текста: 0.8vw (рабочий стол), 1.9vw (планшет), 2.8vw (телефон)

Интервал

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

• Нижнее поле: 18vw (рабочий стол), 30vw (планшет), 42vw (телефон)

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

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

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

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

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

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 0.8vw (рабочий стол), 1.8vw (планшет), 2.5vw (телефон)
• Цвет текста кнопки: # f5ede5
• Ширина границы кнопки: 1 пиксель
• Цвет границы кнопки: # f5ede5
• Радиус границы кнопки: 5 пикселей
• Шрифт кнопки: Поппинс

Интервал

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

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

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

Видимость

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

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

Линия

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

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

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

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

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

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

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

• Шрифт текста: Поппинс
• Толщина шрифта текста: легкий
• Цвет текста: # f5ede5
• Размер текста: 0.8vw (рабочий стол), 1.9vw (планшет), 2.8vw (телефон)
• Высота текстовой строки: 2.3em

Интервал

Также добавьте немного верхнего поля.

• Верхняя маржа: 2vw

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

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

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

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

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

Размеры

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

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 100%

Интервал

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

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

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

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

Пора начинать добавлять модули! Начните с первого текстового модуля и введите контент H1 по вашему выбору.

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

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

• Шрифт заголовка: Poppins
• Цвет текста заголовка: # e92741
• Размер текста заголовка: 3vw (рабочий стол), 5vw (планшет), 7vw (телефон)

Интервал

Затем добавьте некоторые значения маржи.

• Верхнее поле: -35vw (рабочий стол), 7vw (планшет), 10vw (телефон)
• Левое поле: 5vw
• Правое поле: 12vw

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

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

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

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

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

• Шрифт текста: Поппинс
• Толщина шрифта текста: легкий
• Цвет текста: # e92741
• Размер текста: 0.8vw (рабочий стол), 1.9vw (планшет), 2.8vw (телефон)
• Высота текстовой строки: 2,8 м

Интервал

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

• Верхнее поле: 2vw (рабочий стол), 7vw (планшет), 10vw (телефон)
• Нижнее поле: 2vw (рабочий стол), 7vw (планшет), 10vw (телефон)
• Левое поле: 5vw
• Правое поле: 13vw (рабочий стол), 5vw (планшет и телефон)

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

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

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

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

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

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 0.9vw
• Цвет текста кнопки: # e92741
• Цвет фона кнопки: # f5ede5
• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 5 пикселей
• Шрифт кнопки: Поппинс

Интервал

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

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

Коробка Тень

Завершите дизайн модуля кнопок, добавив тонкую тень блока.

• Положение прямоугольной тени по вертикали: 20 пикселей
• Сила размытия тени коробки: 50 пикселей
• Сила распространения тени коробки: -5 пикселей
• Цвет тени: rgba (0,0,0,0.19)

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

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

Рабочий стол

Мобильный

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

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

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