Хотите ли вы добавить кнопку прокрутки вниз в модуль Divi Fullwidth Header?

Модуль Divi Fullwidth Header включает кнопку, которая сообщает пользователю, что он может прокрутить страницу вниз. После нажатия на нее он автоматически перенаправляется в следующий раздел. Это простая кнопка с несколькими значками на выбор, а ее цвет и размер полностью настраиваются. 

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

Давайте начнем!

Обзор кнопок прокрутки вниз

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

Пример 1

Пример 2

Скачайте DIVI прямо сейчас!!!

Пример 3

Пример 4

Скачайте DIVI прямо сейчас!!!

Кнопки прокрутки вниз Полноэкранный дизайн заголовка

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

Смотрите также: Divi: как создать организационную диаграмму с помощью модуля Blurb

Разделитель на всю ширину

Мы добавим разделитель для этого заголовка полной ширины. Откройте настройки секция на всю ширину .

Затем прокрутите вниз до Делитель . Нажмите на вкладку Дно и выберите 8-й стиль разделителя. Установите цвет на #e5e8f0 и введите 10vw для высоты. Закройте настройки раздела.

• Разделители: Низкие
• Стиль: 8-й стиль
• Цвет: #e5e8f0
• Высота: 10vw

Текст заголовка

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

• Название: Начните свое путешествие к лучшему самочувствию сегодня.
• Подзаголовок: Лесли Сайндон, лицензированный терапевт
• Кнопка №1: Записаться на прием
• боди: нет

Заголовок изображения

Прокрутите до Фотографии и выберите изображение заголовка. Я выбираю изображение, предоставленное с Пакет макетов терапии.

Фон заголовка

Прокрутите до проверка данных . Удалить цвет фона и выбрать вкладку Фоновый градиент.

• Остановки градиента:
  • 25%: #2e5b61
  • 100%: RGBA (46, 91, 97, 0,5)

Включить Поместите градиент над фоновым изображением .

• Квадратный градиент над фоновым изображением: ДА

Фоновое изображение заголовка во всю ширину

Затем выберитеВкладка «Фоновое изображение» и выберите полноэкранное изображение. Я использую другое изображение из Therapy Layout Pack.

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

Макет заголовка на всю ширину

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

• Сделать полноэкранным: ДА

Полноэкранный значок прокрутки заголовка вниз

Затем активируйте Показать кнопку прокрутки вниз. Мы стилизуем эту кнопку в наших примерах, поэтому пока оставим ее с настройками по умолчанию.

• Показать кнопку прокрутки вниз: ДА

Заглавное изображение

Затем прокрутите вниз до Фото товара и измените верхний левый закругленный угол на 200 пикселей для настольных компьютеров. Установите остальные закругленные углы на 0px. Измените закругленные углы на 100 пикселей для планшетов и телефонов.

• Закругленные углы изображения:
  • Рабочий стол: 200 пикселей вверху слева, 0 пикселей все остальные
  • Планшет и телефон: 100 пикселей вверху слева, 0 пикселей все остальные

Текст заголовка заголовка

Затем прокрутите вниз до Текст заголовка. Используйте H1 для уровня заголовка. Выберите шрифт Cormorant Garamond для заголовка, установите жирность на жирный и цвет на #e1ecea.

• Название:
  • Уровень заголовка: H1
  • Шрифт: Cormorant Garamond
  • Вес шрифта: полужирный
  • Цвет текста: #e1ecea

Затем установите размер для всех трех размеров экрана. Используйте 90 пикселей для настольных компьютеров, 40 пикселей для планшетов и 24 пикселя для телефонов. Измените высоту строки на 1.1em.

• Размер текста заголовка: 90px, 40px, 24px
• Высота строки заголовка: 1,1 см

Полноразмерный текст подзаголовка заголовка

Затем прокрутите вниз до Текст субтитров. Измените шрифт на Inter, толщину на полужирный и цвет на #e1ecea.

• Подзаголовок:
  • Шрифт: Интер
  • Вес шрифта: полужирный
  • Цвет текста: #e1ecea

Определить размер 22 пикселя для компьютеров, 20 пикселей для планшетов и 16 пикселей для телефонов. Измени это высота строки в 1,6 см.

• Размер текста субтитров: 22px, 20px, 16px
• Высота строки субтитров: 1,6 см

кнопка заголовка

Прокрутите вниз до настроек Кнопка первая и активировать Используйте пользовательские стили для первой кнопки . Измените размер на 14px, цвет текста на #2e5b61 и цвет фона на #e1ecea.

• Использовать пользовательские стили для первой кнопки: ДА
• Кнопка первая
  • Размер текста: 14 пикселей
  • Цвет текста: #2e5b61
  • Предыстория: #e1ecea

Измените ширину кайма в 0px и радиусе кайма на 50px. Используйте Inter для шрифта и измените вес на полужирный.

• Кнопка один:
  • Ширина границы: 0 пикселя
  • Радиус границы: 50px
  • Шрифт: Интер
  • Вес: Жирный

Для заполнение кнопки , используйте 20 пикселей для верхнего и нижнего и 40 пикселей для левого и правого.

• Button One Padding: 20 пикселей сверху и снизу, 40 пикселей слева и справа

Читайте также: Divi: как создать раздел Fluid Hero

Примеры кнопок прокрутки вниз

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

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

• Подбор иконок – выберите из 11 иконок. Они включают в себя различные конструкции стрелок с фоном или без него, в том числе необведенные, обведенные и сплошные.
• Цвет – стандартная палитра цветов Divi.
• Размер – стандартная регулировка размера Divi.

Он также включает поле CSS на вкладке «Дополнительно». 

Мы будем использовать все эти параметры.

Смотрите также: Divi: 5 наложений масок и узоров, применимых к фоновому изображению.

Пример №1

В нашем первом примере мы будем использовать значок без кружка без фона. Выберите первый значок, измените цвет на #e1ecea и измените размер на 66 пикселей для компьютеров, 60 пикселей для планшетов и 50 пикселей для телефонов.

• Значок: 1-й значок
• Цвет: #e1ecea
• Размер: 66 пикселей (для ПК и планшетов), 50 пикселей (для телефонов)

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

Пример 2

Для нашего второго примера мы будем использовать значок в кружке. Выберите седьмой значок и измените цвет на #e8c553. Мы собираемся увеличить значок для этого. Измените размер на 78 пикселей для компьютеров, 70 пикселей для планшетов и 60 пикселей для телефонов.

• Значок: 7-й значок
• Цвет: #e8c553
• Размер: 78 пикселей (настольный компьютер), 70 пикселей (планшет), 60 пикселей (телефон)

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

Пример 3

Для нашего третьего примера мы будем использовать иконку с кругом вокруг нее и фоном. Это окрасит фон и создаст иконку с отверстием, которое показывает фоновое изображение веб-сайта. 

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

Выберите восьмой значок и измените его цвет на #0e4951. Установите размер 60 пикселей для настольных компьютеров, 56 пикселей для планшетов и 50 пикселей для телефонов.

• Значок: 8-й значок
• Цвет: #0e4951
• Размер: 60 пикселей (настольный компьютер), 56 пикселей (планшет), 50 пикселей (телефон)

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

Пример 4

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

В этом примере мы будем использовать CSS для создания фоновой формы за значком, который будет виден через значок выреза. Сама иконка будет использовать стандартные настройки.

Выберите одиннадцатый значок и измените цвет на #e1ecea. Для этого мы уменьшим иконку и сделаем большую фоновую форму. Измените размер на 50 пикселей для компьютеров, 40 пикселей для планшетов и 30 пикселей для телефонов.

• Значок: 11^ème
• Цвет: #e1ecea
• Размер: 50 пикселей (настольный компьютер), 40 пикселей (планшет), 30 пикселей (телефон)

Затем перейдите на вкладку Фильтр и прокрутите до поля Кнопка прокрутки вниз и введите этот CSS:

border-radius: 45%;
padding:12px 40px 14px 40px;
background-color:#2e5b61

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

Результаты различных примеров

Пример 1

Пример 2

Скачайте DIVI прямо сейчас!!!

Пример 3

Пример 4

Скачайте DIVI прямо сейчас!!!

Заключение

Это наш обзор четырех кнопок прокрутки вниз, которые вы можете включить в свой модуль Fullwidth Header Divi. Кнопка прокрутки включает в себя несколько значков на выбор, и вы можете установить ее цвет и размер. 

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

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

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

Не стесняйтесь также обращаться к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.

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

...