Divi: как включить кнопку прокрутки вниз в модуль заголовка Fullwidth

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

Модуль 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)

Включить Разместите градиент поверх фонового изображения. .

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

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

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

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

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

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

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

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

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

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

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

Затем прокрутите вниз до Фото товара и измените верхний левый закругленный угол на 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 см

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

Прокрутите вниз до настроек Кнопка первая и активировать Используйте пользовательские стили для первой кнопки Измените размер на 14 пикселей, цвет текста на #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 прямо сейчас!!!

Заключение

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

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

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

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

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

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

...