Как добавить подсказку
Перейти к содержимому

Как добавить подсказку

  • автор:

Как добавить всплывающую подсказку к тексту?

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

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

Рис. 1. Вид всплывающей подсказки

Самый простой способ сделать такую подсказку — это добавить к нужному элементу атрибут title с желаемым текстом (пример 1).

Пример 1. Использование атрибута title

Диамат — материалистическая интерпретация диалектики Гегеля.

Атрибут title выводит подсказку, вид которой задаётся браузером, и не может быть изменён через CSS. Чтобы сделать подсказку со своим собственным стилем, надо к элементу добавить пользовательский атрибут (такие атрибуты начинаются на data- , например, data-title ) и уже для него задать свой стиль.

Стиль самого элемента определяется с помощью селектора [data-title] , он выбирает все те элементы, у которых есть пользовательский атрибут data-title .

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

[data-title] < position: relative; /* Относительное позиционирование */ cursor: help; /* Меняем курсор на справочный */ >

Вывод подсказки делаем через псевдоэлемент ::after (или ::before, что в данном случае равнозначно), который добавляется к нашему селектору [data-title] . Чтобы вывести текст из значения атрибута, используем свойство content со значением attr(data-title) .

[data-title]::after < content: attr(data-title); /* Выводим текст из атрибута data-title */ >

Теперь надо настроить положение подсказки и её стиль. Для этого делаем её абсолютно позиционированной, что в сочетании с относительным положением у родителя позволяет настраивать положение псевдоэлемента. К примеру, чтобы вывести подсказку ниже текста ставим ей свойство top со значением 1em .

[data-title]::after < content: attr(data-title); /* Выводим текст из атрибута data-title */ position: absolute; /* Абсолютное позиционирование */ left: 0; top: 1em; /* Подсказка снизу */ >

Чтобы вывести подсказку выше текста, меняем свойство top на bottom.

[data-title]::after < content: attr(data-title); /* Выводим текст из атрибута data-title */ position: absolute; /* Абсолютное позиционирование */ left: 0; bottom: 1em; /* Подсказка снизу */ >

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

Осталось задать остальной стиль подсказки (цвет, фон и др.) и спрятать её через свойство opacity.

[data-title]::after < content: attr(data-title); /* Выводим текст из атрибута data-title */ position: absolute; /* Абсолютное позиционирование */ left: 0; top: 1em; /* Положение подсказки */ opacity: 0; /* Скрываем подсказку, делая её прозрачной */ >

Для отображения подсказки применяем псевдокласс :hover, добавляя его к нашему селектору. Внутри используем единственное свойство opacity .

[data-title]:hover::after < opacity: 1; /* Показываем подсказку */ >

Окончательный под показан в примере 2.

Пример 2. Использование пользовательского атрибута

Данный метод позволяет гибко настраивать вид подсказки и добавлять её к любым элементам.

См. также

  • :focus на мобильных устройствах
  • content
  • opacity
  • quotes
  • relative и absolute
  • Аккордеон меню
  • Анимация ссылок при наведении
  • Атрибут title
  • Атрибуты ссылок
  • Виды ссылок
  • Всплывающая подсказка
  • Добавление тени
  • Использование :hover
  • Не только текст
  • Нормальное позиционирование
  • Очистка float
  • Переходы с помощью :hover
  • Подробнее о позиционировании
  • Подсветка строк и колонок таблицы
  • Псевдокласс :hover
  • Псевдоклассы в CSS
  • Псевдоэлемент ::after
  • Псевдоэлементы
  • Псевдоэлементы ::after и ::before
  • Работа с типографикой
  • Селекторы CSS
  • Состояния кнопок
  • Сочетание с псевдоклассами
  • Типы ссылок

Как сделать всплывающую подсказку

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

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

Как сделать тултип

Создадим всплывающую подсказку для формы, в которой несколько полей для заполнения. Нам нужно разместить подсказку-уточнение к полю «Дети».

Форма, в которой нужно создать тултип

Для размещения тултипа создаём в HTML-файле с классом tooltip , который располагается в разметке формы:

Чтобы подсказка всплывала, курсор необходимо наводить на какую-либо область или кнопку. Добавим внутрь небольшую кнопку для наведения:

Рядом со словом «Дети» появилась маленькая кнопка

Иконка для кнопки добавлена в формате SVG, так как это небольшой графический элемент.

Для размещения текста подсказки, создадим ещё один :

   Укажите количество детей, которые будут с вами, возраст которых от 6 до 18 лет. Дети до 6 лет размещаются бесплатно.  

Теперь переходим к стилизации тултипа, открываем CSS-файл.

Для начала напишем оформление для кнопки:

.tooltip-toggle

Также не забываем стилизовать саму иконку и добавить ей оформление при наведении курсора:

.tooltip-icon < width: 1px; height: 9px; color: #83b3d3; display: block; >.tooltip-toggle:hover .tooltip-icon

С помощью псевдоэлемента :hover мы меняем цвет иконки — в активном состоянии голубой оттенок становится немного темнее.

Затем задаём стиль текстовому блоку, описываем тип и размер шрифта, цвет фона и расположение текста:

.tooltip-text

Свойство border-radius делает уголки блока плавными, скругляет их.

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

.tooltip

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

.tooltip-text < font-family: "PT Sans", sans-serif; / Шрифт текста / background-color: #333333; / Цвет фона / color: #FFFFFF; / Цвет текста / font-size: 16px; / Размер текста / line-height: 20px; / Высота строки / font-weight: 400; / Жирность текста / text-transform: none; / Преобразование текста / padding: 20px 18px 18px 22px; / Отступы внутри элемента / border-radius: 10px; / Скругление углов / width: 256px; / Ширина элемента / position: absolute; / Позиционирование элемента / bottom: 100%; / Расположение элемента относительно нижнего края / left: 50%; / Расположение элемента относительно левого края / z-index: 1; / Настройка наложения элемента / transform: translateX(-50%); / Сдвиг элемента по горизонтали / display: none; / Скрываем элемент по умолчанию / >

Указываем свойство transform: translateX(-50%) для центрирования подсказки по горизонтали. С помощью свойства display со значением none скрываем блок, чтобы его не было видно постоянно.

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

.tooltip-toggle:hover + .tooltip-text, .tooltip-toggle:focus + .tooltip-text

Несколько важных моментов

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

Чтобы скринридер смог прочитать текст тултипа, ему нужно подсказать назначение блока. Для этого мы связываем кнопку и текст в тултипе с помощью aria-labelledby .

Задаём плашке с текстом role=»tooltip» :

   Укажите количество детей, которые будут с вами, возраст которых от 6 до 18 лет. Дети до 6 лет размещаются бесплатно.  

Затем добавляем кнопке атрибут aria-labelledby=»tooltip-label-date» , чтобы указать скринридеру какой контент зачитывать. И ставим id=»tooltip-label-date» на плашку, которая будет зачитываться:

   Укажите количество детей, которые будут с вами, возраст которых от 6 до 18 лет. Дети до 6 лет размещаются бесплатно.  

Тултип доступен для чтения скринридером.

Материалы по теме

  • Шаблон HTML-формы
  • Как сделать кнопку в HTML
  • Как сделать картинку ссылкой
  • 3 способа валидации форм

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Увеличение ссылки при наведении

Увеличение ссылки при наведении

Задача: плавно увеличить ссылку при наведении.

Решение:

a < display: inline-block; transition: transform 0.3s ease; >a:hover

Вот как это работает:

Что всё это значит

Первые два свойства просто немного меняют вид ссылки.

Свойство color: maroon; меняет цвет текста в тегах на темно-красный.

Свойство text-decoration: none; убирает подчеркивание. Есть и другие варианты text-decoration — мы писали о них отдельно.

Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому работаем с CSS-анимацией. Так, свойство transform: scale(1.2); срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.

Свойство transition: transform 0.3s ease; используется для создания плавного перехода между состояниями элемента. В нашем случае увеличение будет происходить в течение 0.3 секунд с использованием функции времени ease для более плавного начала и конца анимации.

  • 13 октября 2023

WOFF больше не нужен

WOFF больше не нужен

Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.

Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!

Я хорошо помню пост от Зака в конце 2016, после которого я отказался от исчерпывающего синтаксиса @font-face , включавшего, вдобавок, TTF, EOT и SVG-шрифты, и перешёл только на WOFF2 и WOFF.

Похоже, с тех пор мир веб-шрифтов изменился ещё разок, и вот актуальная версия @font-face :

@font-face

Остался всего один формат. Просто, скажите?

Как писал Зак, «так как в вебе, когда шрифт не найден, всё равно подгружаются системные шрифты, мы можем идти в ногу со временем». Итак, какие браузеры отправятся в тёмные века системных шрифтов с этим синтаксисом?

  • IE 11, 10, 9, 8, 7, …
  • Chrome 4–35
  • Edge 12 и 13
  • Safari 3–9.1
  • Firefox 2–38
  • Opera 22 и ниже
  • Android 4.4.4 KitKat и ниже (а это
  • Safari на iOS 3.2–9.3

Caniuse.com показывает, что почти у 95% пользователей есть браузер с поддержкой WOFF2. А в относительной статистике (Date Relative — прим. перев.) заметно, что массовый переход на WOFF2 случился в 2015 и 2016. К концу 2016 во всех последних версиях больших браузеров появилась поддержка WOFF2.3

А спустя 7 лет поддержка расширилась настолько, что можно уже не добавлять в проект WOFF-файлы — ну, кроме случая, когда вы точно знаете, что много ваших пользователей используют старые устройства и браузеры.

С другой стороны, нет смысла и удалять WOFF из старых проектов. Если вы подключали WOFF2 раньше WOFF внутри @font-face — и порядок здесь важен — то браузер просто скачает и подключит WOFF2-версию.

И если однажды вы, как и я, обнаружите себя перед папкой, полной файлов WOFF2, знайте, что WOFF — уже всё.

  • 23 сентября 2023

Трясём пароль с помощью CSS

Трясём пароль с помощью CSS

Знаете момент, когда всё на сайте уже сделано, и хочется добавить какую-нибудь маленькую незаметную фишку? Мы тоже знаем, поэтому давайте просто потрясём поле пароля, когда пользователь ввёл неверный пароль. Как на Маке.

Вот что получится в итоге:

  • 7 сентября 2023

Как сделать тёмную тему на сайте

Как сделать тёмную тему на сайте

Без лишних слов создадим простой переключатель для светлой и темной темы с использованием HTML, CSS и JavaScript. Нам понадобятся три файла — index.html , styles.css и script.js .

HTML

Основная разметка страницы — заголовок, абзац текста, список и текст в рамке.

CSS (styles.css):

Здесь задаём цвета для светлой и тёмной темы, а ещё минимальную стилизацию текста и блока с рамкой.

body < font-family: Arial, sans-serif; transition: background-color 0.3s ease; >body.light-theme < background-color: #ffffff; color: #000000; >body.dark-theme < background-color: #121212; color: #ffffff; >.boxed-text

JavaScript (script.js)

Этот код нужен, чтобы переключать тему при нажатии на кнопку:

document.getElementById('themeToggle').addEventListener('click', function() < const currentTheme = document.body.className; if (currentTheme === 'light-theme') < document.body.className = 'dark-theme'; >else < document.body.className = 'light-theme'; >>); 

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

  • 29 августа 2023

4 способа центрировать текст в CSS

4 способа центрировать текст в CSS

Центрирование элементов на веб-странице — это одна из наиболее распространенных задач, с которой мы сталкиваемся при работе с макетами. И хотя центрирование текста по горизонтали довольно простое ( text-align: center; и делов-то), вертикальное центрирование может быть немного сложнее. Давайте рассмотрим несколько методов.

Метод 1: Flexbox

Flexbox — это один из самых простых и эффективных способов центрирования.

Заворачиваем текст в с классом center-both :

 

Центрированный текст

.center-both

Метод 2: CSS Grid

HTML такой же, как в предыдущем примере. В CSS включаем гриды и используем свойство place-items со значением center :

.center-both

Метод 3: позиционирование и Transform

Этот метод немного старомодный и работает не идеально. Здесь у div устанавливается relative позиция. А

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

.center-both < position: relative; >.center-both p

HTML остается таким же. Вот что получается:

Плохой метод: использование line-height

Если у вас однострочный текст, вы можете установить line-height , равный высоте родительского элемента.

.center-both < line-height: 200px; /* Пример высоты */ text-align: center; >

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

Если вам интересно узнать больше о каждом из этих методов, рекомендуем посмотреть документацию по Flexbox на MDN или документацию по CSS Grid на MDN, а ещё пройти курсы в HTML Academy.

  • 28 августа 2023

Как скруглить рамку. CSS-свойство border-radius

Как скруглить рамку. CSS-свойство border-radius

CSS-свойство border-radius помогает скруглить углы элемента. Оно особенно полезно для стилизации кнопок, форм, карточек товаров и других элементов сайта.

  • 28 июля 2023

CSS-свойство contain

CSS-свойство contain

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

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

⭐ CSS-свойство contain определяет, как элемент должен взаимодействовать с другими элементами внутри контейнера.

Синтаксис

.container
  • 14 июля 2023

Как задать позицию и размер элемента. CSS-свойство inset

Как задать позицию и размер элемента. CSS-свойство inset

CSS-свойство inset задаёт позицию и размер элемента на странице. Это комбинация четырёх отдельных свойств: top , right , bottom и left , которые определяют отступы от верхнего, правого, нижнего и левого края элемента.

Синтаксис

.element
  • 13 июля 2023

Как перекрыть один элемент другим. CSS-свойство z-index

Как перекрыть один элемент другим. CSS-свойство z-index

z-index определяет порядок наложения элементов в трёхмерном пространстве на веб-странице. Свойство управляет тем, как элементы перекрывают друг друга, если они имеют позиционирование, отличное от значения static .

Синтаксис

.my-element
  • 10 июля 2023

Как верстать и оформлять цитаты

Как верстать и оформлять цитаты

�� Не используйте тег для других видов текста — перевода или шутки, так как это не семантично.

  • 22 июня 2023

Подсказки в YouTube: что это такое и как добавить подсказку в видео

Подсказки в YouTube: что это такое и как добавить подсказку в видео

Подсказки в YouTube – это хороший способ продвижения роликов на YouTube. Инструмент, который пришёл на смену аннотациям. Главное их отличие в том, что они показываются не только на ПК, но и на телефонах, что делает их эффективнее. Ниже расскажем о разных способах использования всплывающих подсказок в видеороликах. Читайте также: Как попасть в рекомендации на YouTube

Реклама: Реклама. Erid 2VtzqvSTQ86

Реклама. Erid 2VtzqvSTQ86

Что такое подсказка в YouTube

Подсказки – это всплывающие кликабельные элементы в правом верхнем углу, которые появляются во время просмотра видео на Youtube. Есть несколько видов подсказок в YouTube.

  1. Самый распространённый тип подсказок – это видео или плейлист. В верхнем углу всплывает название рекомендуемого контента от автора канала.
    Что такое подсказка в YouTube
  2. Если вы рекламируете другой канал, то в подсказке появится только тизер, который вы прописывали в описании. Для того чтобы увидеть превью канала и подробную информацию о нём, нужно открыть меню подсказок.
  3. Подсказка в виде опроса появляется также как и ролик, написано только её название. Если вы хотите проголосовать, то нужно нажать на восклицательный знак и оставить свой голос.
    Подсказка опрос
  4. Подсказках с ссылкой на сайт. Добавьте в подсказку призыв к действию, чтобы увеличить количество переходов.
    Подсказка с ссылкой на сайт

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

Как посмотреть все подсказки в ролике на ютуб

Как сделать подсказку в видео на YouTube

Чтобы расставить подсказки в своих роликах выполните следующее:

Шаг 2. Перейдите в раздел «Менеджер видео» и кликните по первому разделу.

Как сделать подсказку в видео на YouTube

Выберете видео, где вы хотите поставить подсказки и нажмите на «Изменить».

Шаг 3. Перед вами откроется меню, где нужно выбрать «Подсказки». Нажимаем на синюю клавишу «Добавить подсказку».

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

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

Видео или плейлист

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

Канал

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

Как сделать подсказку-опрос

Сделав опрос на своём видео, вам необходимо прописать вопрос для зрителей и варианты ответов. Нажав на «Изменить» вы ещё можете прописать текст тизера. Если вам нужно прописать больше 2 вариантов, нажмите на «Добавить вариант ответа».

Как сделать подсказку-опрос

Ссылка

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

Как добавить ссылку в видео на Ютуб

Важно! Подсказки сохраняются автоматически, вы можете их расставить и закрыть страницу менеджера видео.

Как удалить подсказку с видео на Youtube

Если вы решили удалить подсказку со своего ролика, перейдите в тот же раздел что и при добавлении.

  1. Кликните по кнопке с карандашом на ту подсказку, которую хотите удалить.
    Как удалить подсказку с видео на Youtube
  2. Нажмите на кнопку с корзиной и подсказка удалится с видео.
    Видео или плейлист

Как посмотреть насколько эффективны подсказки

Если вы решили проверить эффективны ли подсказки, необходимо перейти во вкладку «YouTube Аналитика» и посмотреть графики, где видно сколько переходов было за определённый промежуток времени.

Как посмотреть насколько эффективны подсказки

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

Примеры использования

Ниже расскажем несколько примеров, как используются подсказки для продвижения роликов:

Пример 1. Д елаете обзоры товаров из своего интернет-магазина? Прикрепите ссылку на карточку товара. Если зрителя заинтересует продукт, он сразу сможет перейти на него и заказать. Не лишним будет продублировать ссылку в описании ролика.

Примеры использования подсказок

Пример 2. Вы являетесь владельцем крупного канала и решили ввести новую рубрику, но не знаете, понравится она она зрителям или нет. Задайте этот вопрос своим подписчикам в одном из видео. Сделайте 3-5 вариантов ответа.

Пример 3. Вы создали второй канал и хотите его быстро развить, достаточно поставить в подсказки ссылку на него и немного рассказать в своих роликах про новый канал. Подписчики увидев подсказку в углу, смогут нажать на неё и перейти на новый канал, а при интересе подписаться на него. Также можно указывать ссылку на сторонний канал, если вы его рекламируете.

Пример 4. Продавайте рекламу в подсказках. Например, так делает канал «Ютубер», ведущим которого является Эрик Ютубер.

В завершении хочется дать несколько эффективных советов, как применять подсказки для развития вашего канала:

  • не добавляйте больше 5 подсказок в видео;
  • при их расставлении подбирайте наиболее выгодный временной отрезок, например, в видео вы рассказываете о своих других роликах, целесообразно будет вставить ссылку на этот контент, чтобы зрители понимали о чём идёт речь;
  • обязательно расставляйте подсказки в популярных роликах, чтобы раскрутить свой канал.

Зачем нужны подсказки на Youtube и как их добавить

Для того чтобы ваш проект на Youtube успешно продвигался, приносил вам удовлетворение от самореализации и приличный доход, одного умения создавать креативные и интересные ролики маловато. Нужно ещё знать обо всех полезных инструментах и фишках, которые предоставляет Ютуб, и уметь ими пользоваться.

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

Содержание:

  • Что такое и для чего используются подсказки на Ютубе
  • Как в видео на Youtube добавить подсказки

Получить бесплатную консультацию от SEO-эксперта по вашему сайту

Что такое и для чего используются подсказки на Ютубе

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

Что такое подсказка в ютубе картинка

Подсказки в роликах на Ютубе могут быть нескольких видов, и каждый из них нужен для достижения определённой цели:

  • Видео (плейлист). Вы добавляете в свой ролик подсказку с рекомендацией посмотреть другие ваши отдельные видео или плейлисты на эту же тему. Если пользователи заинтересуются таким предложением, вы увеличите популярность своего канала за счет возросшего количества просмотров.
  • Канал. Добавив ссылку на другой канал, с которым вы хотите ознакомить ваших пользователей, вы перенаправите их в нужное место.
  • Опрос. Такая подсказка будет очень полезна, если вам необходимо узнать мнение пользователей по какому-либо вопросу. Кликнув по всплывающему элементу, они заполнят графы анкеты.
  • Ссылка. Если ваша цель – продвинуть с помощью канала на Youtube свой бизнес, вы можете добавить в видеоролик ссылку на свой интернет-магазин или любой другой веб-сайт, усилив её призывом к действию. Это увеличит трафик и прибавит вам потенциальных клиентов.

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

Для большей эффективности, размещайте их таким образом:

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

Как в видео на Youtube добавить подсказки

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

  • Зайдя на Youtube с компьютера, в «Творческой студии» найдите пункт «Видео».
  • Выбрав ролик, нажмите кнопку «Изменить». Если вы пока только добавляете видео, то после его загрузки также появится меню для настроек.

Пример как добавить рекламные подсказки youtube

Как добавить подсказки на youtube картинка

Как сделать всплывающие подсказки на youtube

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *