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

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

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

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

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

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

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

Пример 1

Пример 2

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

Пример 3

Пример 4

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

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

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

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

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

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

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

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

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

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

• Название: Начните свое путешествие к лучшему самочувствию сегодня.
• Подзаголовок: Лесли Сайндон, лицензированный терапевт
• Кнопка №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 всех времен.

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

...