Как создать мобильную панель контактов Divi с интерактивным номером телефона, электронной почтой, SMS и ссылками направления

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

В этом уроке мы покажем вам, как создать мобильную панель контактов Divi с помощью Click-to-Call, электронной почты, SMS и ссылок для маршрутов. Для этого мы будем использовать конструктор Divi для создания панели и кнопок в глобальном нижнем колонтитуле. Затем мы добавим настраиваемые URL-адреса к каждой контактной ссылке, чтобы получить нужную нам функциональность.

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

Sneak Peek

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

Скачайте макет БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

Как добавить загрузку шаблона фиксированной панели контактов на свой сайт Divi

ВНИМАНИЕ! Добавление этого шаблона заменит шаблон веб-сайта по умолчанию (если он у вас есть) на вашем сайте Divi. Мы предлагаем добавить это на тестовый сайт, чтобы вы ничего не испортили на действующем сайте.

Чтобы импортировать фиксированный шаблон полосы нижнего колонтитула на свой веб-сайт, распакуйте загруженный zip-файл, чтобы получить доступ к файлу JSON.

Затем перейдите на панель управления WordPress и перейдите в Divi> Theme Builder.

Затем щелкните значок переносимости в правом верхнем углу страницы.

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

Затем нажмите кнопку «Импорт».

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

А теперь перейдем к руководству, не так ли?

Часть 1. Создание глобального нижнего колонтитула

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

ПРИМЕЧАНИЕ. Если у вас уже есть глобальный нижний колонтитул, вы можете открыть редактировать глобальный нижний колонтитул и добавить панель контактов в дополнение к текущему нижнему колонтитулу.

Выберите вариант «Строить с нуля».

Часть 2: Создание фиксированной панели содержимого

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

Настройки раздела

Прежде чем мы начнем добавлять модули, откройте настройки раздела, задайте ему заданную высоту следующим образом:

• Высота: 80 пикселей

Это важно для создания пространства внизу страницы, где фиксированная строка в конечном итоге остановится. Мы также удалим отступы по умолчанию сверху и снизу.

• Padding: 0px сверху, 0px снизу

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

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

Фон

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

Размер

• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 100%
• Рост: наследовать

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

Интервал

• Отступ: 0 пикселей сверху, 0 пикселей снизу, 15% слева, 15% справа

Пользовательские CSS

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

display:flex;
flex-wrap:nowrap;
align-items:center;

Фиксированное позиционирование

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

• Позиция: фиксированная
• Расположение: внизу слева
• Индекс Z: 99999

Часть 3: Создание ссылок для вызова, электронной почты, SMS и направлений

Теперь, когда наша панель контактов завершена, мы готовы добавить интерактивные кнопки контактов вместе с настраиваемыми URL-адресами.

Разработка кнопки "Звонок по нажатию"

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

Содержание

На вкладке содержимого добавьте заголовок и значок к рекламному объявлению следующим образом:

• Название: Звонок
• Значок использования: ДА
• Изображение: телефон

Фон

Задайте ему белый цвет фона:

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

Настройки дизайна

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

Значок

• Цвет значка: # 751136
• Использовать размер шрифта значка: ДА
• Размер шрифта значка: 2em

Шрифт заголовка

• Стиль шрифта Tite: TT
• Выравнивание текста заголовка: по центру
• Цвет текста заголовка: # 751136
• Размер текста заголовка: 1em

Размер основного текста

Если вы заметили, мы определяли размеры элементов рекламного объявления, используя единицу длины «em». Это относительно размера основного текста. Таким образом, настройка размера основного текста рекламного сообщения (даже если основной текст не отображается) приведет к корректировке размера всех элементов рекламного объявления в единицах длины em. Это просто удобный способ изменить размер кнопки при продвижении вперед без необходимости настраивать каждый элемент индивидуально.

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

• Размер основного текста: 12 пикселей

Размер

Задайте рекламному объявлению заданную высоту и ширину следующим образом:

• Ширина: 4.5em
• Выравнивание модуля: по центру
• Высота: 4.5em

Отступы и углы

• Набивка: верх 0,5 мкм

Коробка Тень

• Box Shadow: см. Снимок экрана
• Горизонтальное положение тени блока: 0 пикселей
• Вертикальное положение тени блока: 2 пикселя
• Цвет тени: rgba (255,255,255,0,55)

Пользовательские CSS

Чтобы выровнять содержимое модуля рекламного объявления по центру по вертикали, добавьте следующий настраиваемый CSS в основной элемент:

display:flex;
align-items:center;

И уберите интервал под значком рекламного объявления, добавив следующее изображение размытия:

margin-bottom: 0.3em;

Добавление URL ссылки для вызова

Чтобы добавить URL-адрес ссылки для вызова, который будет инициировать вызов на мобильный телефон, добавьте номер после префикса «tel:».

• URL ссылки на модуль: тел: 555-555-5555

Дизайн кнопки электронной почты

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

Добавление значка электронной почты и URL-адреса ссылки

Затем обновите повторяющееся рекламное объявление в столбце 2, добавив новый заголовок и значок.

Чтобы добавить URL-адрес ссылки для вызова, который будет инициировать отправку электронной почты в мобильном приложении, добавьте адрес электронной почты после префикса «mailto:».

• URL ссылки на модуль: mailto: [электронная почта защищена]

Дизайн кнопки SMS (текстовое сообщение)

Чтобы создать кнопку SMS, продублируйте столбец 2.

Добавление значка SMS и URL ссылки

Затем обновите повторяющееся рекламное объявление в столбце 2, добавив новый заголовок и значок.

Чтобы добавить URL-адрес ссылки для вызова, который будет инициировать отправку электронной почты в мобильном приложении, добавьте адрес электронной почты после префикса «sms:».

• URL ссылки на модуль: sms: +15555555555

Разработка кнопки "Маршруты"

Чтобы создать кнопку SMS, продублируйте столбец 3.

Добавление значка маршрутов и URL ссылки

Затем обновите повторяющееся рекламное объявление в столбце 3, добавив новый заголовок и значок.

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

В этом руководстве мы собираемся добавить ссылку маршрутов, которая будет генерировать маршруты от текущего местоположения пользователя до GooglePlex в Маунтин-Вью, Калифорния.

• URL ссылки на модуль:

  https://www.google.com/maps/dir/?api=1&destination=1600+amphitheatre+pkwy+mountain+view+CA

Чтобы добавить свой собственный адрес в URL-адрес, замените текст после «destination =» в URL-адресе, не забудьте разделить слова символами «плюс» («+»).

Нажатие на кнопку должно дать вам нечто подобное…

Скрыть раздел на рабочем столе

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

• Отключить: рабочий стол

Окончательные результаты

Дополнительные ссылки для контактов

С HTML5 вы не ограничены телефонными номерами. Вы можете добавить другие призывы к действию, такие как электронная почта, обмен сообщениями, факс и т. Д. Протоколы HTML5 включают:

тел: - позвонить по телефону
mailto: - открыть почтовое приложение
callto: откройте Skype
sms: - отправить текстовое сообщение
факс: - отправить факс

И при желании вы также можете добавить целевую ссылку Waze для URL-адреса маршрутов.

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

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

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

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!