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

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

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

Кроме того, мы рассмотрим часть того, как добавлять всплывающие подсказки, используя пользовательские коды CSS . Так что, если вы новичок в Elementor или используете его годами, эта статья для вас!

Оглавление

• Что такое всплывающая подсказка?
• Как всплывающие подсказки помогают улучшить взаимодействие с пользователем на вашем веб-сайте
• Как добавить всплывающие подсказки на ваш сайт Elementor с помощью пользовательского CSS
• Как добавить всплывающие подсказки на ваш сайт Elementor с помощью HappyAddons
• Как сделать так, чтобы всплывающие подсказки не выглядели как спам
• Несколько отличных примеров дизайна всплывающих подсказок
• Часто задаваемые вопросы о том, как добавить всплывающую подсказку с помощью Elementor
• К вам: готовы ли вы добавить всплывающие подсказки на свой сайт?

Что такое всплывающая подсказка?

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

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

Как всплывающие подсказки помогают улучшить взаимодействие с пользователем на вашем веб-сайте

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

1. Позволяет добавлять контекстную информацию

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

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

2. Помогает в полях формы

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

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

3. Объясняет процесс установки веб-приложения

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

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

4. Помогает вам продвигать функции продуктов

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

Как добавить всплывающие подсказки на ваш сайт Elementor с помощью пользовательского CSS

Существует несколько способов добавления всплывающих подсказок в Элементор веб-сайт с использованием пользовательского CSS. Давайте рассмотрим некоторые самые простые методы для них.

Метод 01 – Использование тега <abbr> (аббревиатура) Чтобы добавить всплывающие подсказки

Используя тег <abbr>, вы можете создавать всплывающие подсказки на своем сайте в любое время. Вы должны добавить текст всплывающей подсказки внутри тега title="…". Ниже приведен пример кода, который вы можете использовать для создания всплывающей подсказки.

 John <abbr title="I'm an Elementor Expert!">DOE</abbr>

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

Примечание. С помощью этого метода нельзя стилизовать всплывающие подсказки! Но это самый простой способ добавить всплывающую подсказку.

Способ 2 – Создание всплывающей подсказки с помощью HTML и CSS

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

В Elementor вы получите HTML-виджет для создания поля для написания этого кода. Перетащите виджет HTML на холст Elementor.

Вы получите поле, автоматически открытое в разделе контента Elementor. Вы должны добавить класс и дать ему имя класса, мы назвали его «tooltiptext». Этот класс будет использоваться для настройки всплывающей подсказки. Ниже приведен пример HTML-кода, который можно использовать для создания всплывающих подсказок.

 <span class="tooltiptext" >My Skill Sets</span>

Здесь мы использовали «Мои наборы навыков» в качестве текста всплывающей подсказки. Вы должны написать желаемый текст всплывающей подсказки в этом разделе.

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

Если вы хотите добавить этот код в свой пользовательский CSS Elementor, следуйте этой навигации : Настройки сайта Elementor > Пользовательский CSS . Вот код. Вы можете скопировать весь фрагмент кода CSS для всплывающей подсказки или настроить их в соответствии с вашими потребностями.

Примечание. Чтобы перейти к дополнительной панели CSS вашей темы, выберите « Панель администратора» > «Внешний вид» > «Настроить» > «Дополнительный CSS» .

 .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 150%; left: 50%; margin-left: -60px; } .tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent; } .tooltip:hover .tooltiptext { visibility: visible; }

Если вы хотите изменить положение всплывающей подсказки, положение стрелки и т. д., следуйте приведенным ниже фрагментам кода.

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

 .tooltip .tooltiptext { width: 120px; top: 100%; left: 50%; margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */ }

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

 .tooltip .tooltiptext { top: -5px; left: 105%; }

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

 .tooltip .tooltiptext { top: -5px; right: 105%; }

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

 .tooltip .tooltiptext::after { content: " "; position: absolute; top: 100%; /* At the bottom of the tooltip */ left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent; }

Если вы хотите узнать больше о настройке всплывающей подсказки CSS, вы можете посетить w3schools.

Как добавить всплывающие подсказки на ваш сайт Elementor с помощью HappyAddons

Некоторым из нас может быть сложно создать всплывающую подсказку с помощью пользовательских кодов CSS. Сегодня создание и добавление всплывающих подсказок на ваш сайт возможно без единой строчки кода. HappyAddons предоставляет вам функцию всплывающей подсказки CSS без кода в Elementor.

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

• Изменить цвет текста
• Изменить типографику текста
• Изменить положение всплывающей подсказки
• Добавить цвет фона текста и фоновое изображение
• Добавьте динамические теги
• Добавить анимацию
• Добавить стрелку подсказки

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

Предпосылки для добавления всплывающих подсказок

• Элементор Бесплатно
• HappyAddons Free

После того, как вы установили эти плагины на свой сайт, выполните следующий процесс.

Шаг 01. Включите расширенную подсказку

Поскольку всплывающая подсказка — это функция, а не виджет, ее необходимо сначала включить. Чтобы включить эту функцию,

• Сначала выберите любой виджет или элемент вашего сайта.
• Затем перейдите к Вкладка «Дополнительно» .
• Прокрутите немного вниз и разверните параметр Happy Tooltip .
• Включите « Включить расширенную подсказку ».

После включения этой функции вы получите еще два раздела для настройки всплывающей подсказки. Это стиль и содержание. Вы можете увидеть их на фото выше.

1. Стиль : этот раздел позволит вам настроить дизайн и добавить изображение для всплывающей подсказки. Подробнее об этом варианте мы поговорим позже.
2. Содержимое: вы можете добавлять и редактировать текст всплывающей подсказки, исправлять его положение, добавлять анимацию и т. д. в разделе содержимого.

Шаг 02: Добавьте тексты всплывающих подсказок

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

<b>,<i>,<u>,<s>,<br>,<em>,<del>,<ins>,<sub>,<sup>,<code>,<mark>,<small >,<strike>,<abbr>,<span>,<strong>,<a>,<q>,<img>,<dfn>,<time>,<cite>,<acronym>,<hr>

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

HappyAddons имеет интеграцию с динамической поддержкой содержимого всплывающей подсказки. Но из-за некоторых ограничений нам сложно поддерживать все теги. В настоящее время мы не поддерживаем динамические теги шорткода.

Кроме того, вы не можете видеть динамические данные в режиме редактирования, только в режиме предварительного просмотра.

Настройте положение всплывающей подсказки Elementor

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

• верхний
• Нижний
• Оставил
• Верно

На фотографии ниже вы можете видеть, что мы изменили положение всплывающей подсказки вправо.

Добавьте анимацию в подсказки Elementor

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

• Исчезать
• Вкатывать
• Увеличить
• Подпрыгивать
• Сдвиньте вниз
• Сдвиньте влево
• Сдвиньте вправо
• Сдвиньте вверх

Выберите тот, который соответствует потребностям вашей всплывающей подсказки. Смотрите фото ниже!

Вы даже можете настроить продолжительность анимации для всплывающей подсказки. По умолчанию установлено значение 1000 мс (миллисекунд).

Добавить или удалить стрелку из всплывающей подсказки Elementor

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

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

Активируйте всплывающую подсказку

Триггер определяет, как Элементор всплывающая подсказка появится на вашем экране. Доступны два варианта триггера:

• Нажмите
• Наведите курсор

Вы получите опцию «Расстояние» прямо под разделом «Триггер». Это позволит вам увеличить или уменьшить расстояние между вашим веб-элементом и его расстоянием с помощью всплывающей подсказки.

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

Вы получите параметр выравнивания текста под разделом «Расстояние».

Шаг 03: Стиль подсказок Elementor

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

Увеличьте ширину всплывающей подсказки

Первая опция попадет в раздел стилей — это Width . Перетащите кнопку ширины и отрегулируйте ее до нужного размера.

Увеличьте размер стрелки всплывающей подсказки

Вы можете настроить размер стрелки всплывающей подсказки в разделе Размер стрелки всплывающей подсказки . Вы можете сделать это, перетащив кнопку измерения ниже.

Измените типографику ваших всплывающих подсказок

Вы можете добавить различные вкусы к своей всплывающей подсказке в настройках типографики. Здесь вы получите все настройки типографики Elementor.

Добавьте цвет к фону текста всплывающей подсказки

Вы можете добавить цвет к фону текста всплывающей подсказки с помощью параметра «Цвет фона».

Добавьте радиус границы в подсказку

По умолчанию радиус границы вашей всплывающей подсказки составляет 5 пикселей. Но вы можете изменить его по своему усмотрению. Панель управления радиусом границы даст вам все полномочия для этого.

Добавьте тень окна в подсказку

Перетаскивая кнопки измерения, вы можете добавить тень к своим всплывающим подсказкам из настроек тени блока.

Шаг 04: Включите параметр изображения

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

Добавьте изображение и настройте всплывающую подсказку

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

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

Как сделать так, чтобы всплывающие подсказки не выглядели как спам

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

Давайте рассмотрим их ниже.

1. Делайте подсказки краткими и простыми

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

2. Никогда не показывайте несколько всплывающих подсказок вместе

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

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

3. Сохраняйте пространство между элементами

Пространство — важная часть любого дизайна пользовательского интерфейса. Существует идеальное соотношение того, сколько места вы должны выделить на своих веб-страницах. Соотношение составляет 2:1, что означает, что на одной трети ваших веб-страниц должны быть пробелы.

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

4. Позвольте пользователям пропустить обучающую часть

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

Несколько отличных примеров дизайна всплывающих подсказок

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

1. Амазонка

Amazon в настоящее время является веб-сайтом электронной коммерции номер один в Интернете. Вы найдете бесчисленное множество подсказок, которые Amazon использует, чтобы направлять вас на разных страницах и объяснять все основные процессы. Всякий раз, когда вы попадаете на его домашнюю страницу, вы получаете всплывающую подсказку, подобную приведенной ниже.

Лучше всего то, что он включает не только инструкции, но и кнопки CTA.

2. Википедия

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

3. AliExpress

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

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

Часто задаваемые вопросы о том, как добавить всплывающую подсказку с помощью Elementor

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

К вам: готовы ли вы добавить всплывающие подсказки на свой сайт?

Хороший дизайн — это первое, что может произвести впечатление на вашу аудиторию за мгновение. По данным Adobe, 38% пользователей перестают взаимодействовать с веб-сайтом, если его содержание и макет менее привлекательны. Более 55% интернет-пользователей говорят, что им не нравится рекомендовать компанию с очень плохим веб-дизайном — SocPub.

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

Мы надеемся, что после прочтения этой статьи вы теперь знаете все о том, как добавлять всплывающую подсказку на веб-сайты Elementor, будь то с помощью пользовательского CSS или с помощью всплывающей подсказки в будущем Happyaddons. Если у вас все еще есть какие-либо дополнительные вопросы или любопытство по этой теме, просто сообщите нам об этом в разделе комментариев.

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