Создайте раздел плавающего контакта с эффектами движения Divi Scroll

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

Ниже вы найдете бесплатную загружаемую папку с макетом JSON для загрузки в свою собственную библиотеку Divi. Мы также включили шаблон PSD, который поможет вам воссоздать фон карты, а также SVG булавки карты, чтобы вы могли персонализировать его своими собственными цветами.

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

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

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

Рабочий стол

Мобильный

Загрузите раздел "Плавающий контакт" БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

1. Создайте фон карты для раздела плавающих контактов.

Откройте Google Maps

Первым шагом в этом уроке является создание черно-белого фона карты. Чтобы создать свой собственный, выполните следующие действия:

• Сначала откройте Карты Google и найдите свой адрес.
• Когда он загрузится, уменьшите масштаб, чтобы вы могли видеть большую часть города или улицы вокруг вашего адреса.

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

Персонализировать пин

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

Выполните следующие действия для вывода SVG:

• Сначала загрузите бесплатные файлы, указанные в начале этого руководства, и распакуйте папку.
• Во-вторых, откройте изображение булавки SVG с помощью Illustrator, Inkscape или вашего любимого редактора векторных изображений.
• В-третьих, измените цвет, чтобы он соответствовал вашему бренду или веб-сайту.
• Наконец, сохраните как прозрачный PNG.

Редактировать в Photoshop

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

Если у вас есть Photoshop, вы можете использовать PSD-файл, который мы включили, и просто добавить снимок экрана карты к смарт-объекту во втором слое.

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

• Откройте файл PSD.
• Дважды щелкните слой оранжевого цвета. Откроется новое окно.
• Замени нашу карту своей.
• Не забудьте нажать кнопку «Сохранить».
• Вернитесь в главное окно редактирования и тоже нажмите «Сохранить».
• Экспорт в Интернет в формате .jpg.

Если у вас нет Photoshop, выполните следующие действия:

• Сначала создайте новый проект размером 1920 x 700 пикселей.
• Во-вторых, поместите снимок экрана карты на холст. Убедитесь, что вы находитесь в правом верхнем квадранте, немного выше центра.
• В-третьих, с помощью настройки изображения превратите изображение в черно-белое.
• Также добавьте немного контраста.
  1. Яркость: -25
  2. Контрастность: -50
• Затем щелкните слой изображения и добавьте прозрачность примерно на 55%.
• Если вы будете создавать этот дизайн на веб-странице с небелым фоном, добавьте белый слой под изображением, чтобы базовый цвет оставался белым независимо от того, какой цвет фона имеет веб-сайт.
• Продолжайте, поместив булавку в свое местоположение. Установите его в высоту примерно 90 пикселей. Оставьте его на самом верхнем слое.
• Наконец, загрузите в формате .jpg.

2. Создать структуру элемента

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

Фон

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

На вкладке содержимого добавьте фон карты, который вы создали в Photoshop.

• Фоновое изображение: ваша отредактированная карта.

Интервал

Затем настройте параметры интервала между секциями на вкладке «Дизайн».

• Верхнее и нижнее поле: 50vh
• Нижняя обивка: 0vw

Видимость

Затем сделайте переливы видимыми.

• Горизонтальное и вертикальное переполнение: видимое

Позиция

Наконец, установите индекс Z секции равным 10.

• Индекс Z: 10

Добавить новую строку

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

Пришло время добавить элементы. Сначала добавьте строку из 2 столбцов.

Размеры

Откройте настройки строки и отрегулируйте размер следующим образом.

• Ширина
  • Рабочий стол: 90%
  • Планшет и телефон: 80%
• Максимальная ширина: 90%

Видимость

Щелкните вкладку «Дополнительно» и настройте параметры переполнения.

• Горизонтальное и вертикальное переполнение: видимое

Позиция

Завершите настройки строки, изменив настройки положения.

• Должность: Родственник
• Начало смещения: вверху слева
• Вертикальное смещение
  • Рабочий стол: -8vw

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

Фон

Перед добавлением модулей нам нужно стилизовать отдельные столбцы. Добавьте цвет фона в столбец 1.

• Сплошной цвет: # 25274d

Интервал

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

• Верхняя и нижняя обивка
  • Настольный компьютер и планшет: 7vw
• Отступ слева и справа
  • Рабочий стол: 3vw
  • Планшет и телефон: 6vw

Граница

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

• Закругленные углы: 10 пикселей по всем четырем углам.

Эффекты прокрутки

И последнее, но не менее важное: используйте вертикальное движение в настройках эффектов прокрутки. Это поможет нам создать эффект плавания.

• Эффекты преобразования прокрутки: вертикальное движение
• Установить вертикальное движение / рабочий стол
  • Начальное смещение: 4
  • Среднее смещение: 0 (при 50%)
  • Конечное смещение: -4
• Установить вертикальное движение / планшет и телефон
  • Начальное смещение: 4
  • Среднее смещение: 0 (при 40% и 60%)
  • Конечное смещение: -3
• Триггер эффекта движения: середина элемента

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

Позиция

Теперь перейдем к настройкам второго столбца. Отрегулируйте настройки положения соответствующим образом.

• Должность: Родственник
• Начало смещения: вверху слева
• Вертикальное смещение
  • Рабочий стол: 25vw

Эффекты прокрутки

Мы также добавляем вертикальное движение в этот столбец.

• Эффекты преобразования прокрутки: вертикальное движение
• Установить вертикальное движение / рабочий стол
  • Начальное смещение: 2
  • Среднее смещение: 0 (при 50%)
  • Конечное смещение: -2
• Установить вертикальное движение / планшет и телефон
  • Начальное смещение: 0
  • Среднее смещение: 0 (при 50%)
  • Конечное смещение: -2
• Триггер эффекта движения: верх элемента

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

Содержание

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

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

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

• Уровень заголовка: H2
• Шрифт: Palanquin Dark
• Толщина шрифта: полужирный
• Стиль шрифта: TT
• Цвет: желтый # ffd868
• Размер
  • Рабочий стол: 5vw
  • Таблетка: 10vw
  • Телефон: 12vw
• Расстояние между буквами: 4 пикселя

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

Содержание

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

• Имя
• Эл. адрес
• Тема
• Сообщение

Защита от спама

Перед стилизацией модуля контактной формы. включите защиту от спама и подключите свой аккаунт ReCaptcha.

• Использовать службу защиты от спама: Да
• Провайдер услуг: ReCaptcha
• Выберите учетную запись

Поля

Перейдите на вкладку «Дизайн» и задайте для полей следующий стиль.

• Цвет фона: темно-синий # 25274d
• Цвет текста: бледно-серый # d1d1d1
• Цвет фона фокуса: темно-синий # 25274d
• Цвет текста фокуса: бледно-серый # d1d1d1
• Шрифт: Palanquin
• Стиль: TT
• Размер текста
  • Рабочий стол: 0.9vw
  • Таблетка: 2vw
  • Телефон: 3vw
• Расстояние между буквами: 1 пиксель

Кнопка

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

• Пользовательские стили: Да
• Размер текста: 20 пикселей
• Цвет текста: темно-синий # 25274d
• Цвет фона: желтый # ffd868
• Радиус границы: 7 пикселей
• Цвет значка: темно-синий # 25274d
• Верхнее поле: 5 пикселей

Размеры

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

• Ширина: 100%
• Максимальная ширина: 100%

Интервал

Мы также добавим немного верхнего отступа.

• Верхняя обивка: 4vw

Граница

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

• Входы со скругленными углами: 6 пикселей по всем четырем углам.
• Стили границы входов: все четыре стороны
• Ширина границы входов: 2 пикселя
• Цвет границы входов: желтый # ffd868

Добавить модуль "Социальные сети" в столбец 2

Содержание

Перейдите к столбцу 2 и добавьте модуль социальных сетей. Используйте все необходимые вам социальные сети.

• Facebook
• Твиттер
• Linkedin

Ссылка

Перед стилизацией добавьте ссылки на соответствующие сети.

Фон элемента

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

• Цвет: темно-синий # 25274d

Значок предмета

На вкладке дизайна того же элемента измените настройки значка следующим образом.

• Цвет: желтый # ffd868
• Размер шрифта значка
  • Рабочий стол и планшет: 31 пикс.
  • Телефон: 26px

Расстояние между предметами

Затем добавьте небольшое поле, чтобы отделить значки друг от друга.

• Правое поле: 1vw

Копирование и вставка стилей элементов

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

Выравнивание

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

• Выравнивание модуля: слева

Размеры

Затем отрегулируйте размер модуля.

• Ширина: 100%

Интервал

Удалите также все отступы по умолчанию.

• Отступ сверху, снизу, слева и справа: 0vw

Граница

Наконец, добавьте закругленные углы в настройках границы. Это откорректирует границы сразу для всех значков.

• Закругленные углы
  • Вверху слева и справа: 7 пикселей
  • Внизу слева и справа: 0 пикселей

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

Содержание

Под модулем социальных сетей добавьте еще один текстовый модуль. Добавьте контент по вашему выбору. Мы добавили два адреса, номер телефона и электронную почту. Используйте жирный шрифт в заголовке каждого элемента заглавными буквами.

• ШТАБ-КВАРТИРА: 1587 Sukhumvit Soi 21, Бангкок, Таиланд.
• РАСПОЛОЖЕНИЕ ТОРГОВЛИ : Торговый центр Emporium, 2-й этаж.
• ТЕЛЕФОН: (321) 564 2398
• EMAIL: [адрес электронной почты защищен]

Фон

Измените цвет фона модуля.

• Цвет: темно-синий # 25274d

Текст

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

• Шрифт: Palanquin
• Цвет: желтый # ffd868
• Размер: 18 пикселей

Интервал

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

• Верхнее поле
  • Рабочий стол: -60 пикселей
  • Планшет и телефон: -50 пикселей
• Отступ сверху, снизу, слева и справа
  • Рабочий стол: 3vw
  • Таблетка: 6vw
  • Телефон: 8vw

Граница

И завершите модуль, добавив закругленные углы в настройках границы. Вот и все!

• Закругленные углы: 10 пикселей вверху справа, внизу слева и внизу справа.

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

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

Рабочий стол

Мобильный

Вы воссоздали макет раздела с плавающими контактами!

Использование новых эффектов прокрутки Divi помогает превратить любой стандартный макет в превосходный дизайн. Создавая собственный фон карты, вы можете лучше контролировать внешний вид готового дизайна. Если у вас есть какие-либо вопросы или предложения, оставьте комментарий в разделе комментариев ниже!