Как создать собственный переключатель для транскриптов видео в Divi

Добавление настраиваемого переключателя для транскриптов видео может принести много преимуществ вашему веб-сайту. Фактически, простое включение расшифровки стенограммы для каждого видео на вашем веб-сайте может улучшить пользовательский интерфейс, доступность и SEO. Пользователи будут иметь возможность читать контент, что является отличной функцией доступности для глухих, слабослышащих или в шумной кофейне. И вы можете читать стенограммы быстрее, чем смотреть видео (или видео субтитры). Кроме того, добавленный контент, вероятно, будет включать значительное количество ключевых слов, которые улучшат SEO. Создание настраиваемого переключателя для стенограммы видео также хорошо, потому что он может скрывать этот длинный контент до тех пор, пока он не понадобится.

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

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

Sneak Peek

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

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

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

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

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

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

СКАЧАТЬ

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

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

Щелкните кнопку Импорт.

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

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

После этого макет раздела будет доступен в Divi Builder.

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

Что вам нужно для начала

Для начала вам необходимо сделать следующее:

1. Если вы еще этого не сделали, установите и активируйте тему Divi.
2. Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).
3. Выберите вариант «Строить с нуля».

После этого у вас будет чистый холст, чтобы начать проектировать в Divi.

Создание настраиваемого переключателя для транскриптов видео в Divi

Часть 1: Добавление видео Youtube на страницу с помощью модуля Divi Video

В первой части нашего руководства мы собираемся добавить / встроить видео YouTube на страницу с помощью видеомодуля в конструкторе Divi. Этот процесс действительно довольно прост.

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

Далее добавляем в ряд видеомодуль.

Щелкните значок «Добавить видео плюс» под параметром «Файл видео MP4 или URL-адрес Youtube.

Затем выберите действие « Вставить из URL-адреса» на левой боковой панели всплывающего окна.

Вставьте URL-адрес видео YouTube в поле ввода.

Затем нажмите кнопку « Вставить в сообщение» .

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

Часть 1: Создание настраиваемого переключателя для расшифровки стенограммы

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

Сначала добавьте модуль переключения прямо под видео.

В настройках переключателя добавьте слово «Транскрипт» для текста заголовка. (Мы вернемся к основному содержанию позже, чтобы вставить текст нашего видео на YouTube позже)

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

• Цвет значка: # 42b3a9
• Цвет фона Open Toggle: прозрачный
• Закрытый переключатель Цвет фона: прозрачный
• Выравнивание текста: по центру
• Шрифт заголовка: Roboto
• Стиль шрифта заголовка: TT

• Максимальная ширина: 800 пикселей
• Выравнивание модуля: по центру
• Отступ: 0 пикселей сверху, 20 пикселей снизу, 0 пикселей слева, 0 пикселей справа
• Ширина границы: 0 пикселей

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

Добавьте следующий CSS к заголовку Toggle :

display:inline-block;
padding: 1em 2.5em 1em 2em !important;

Добавьте следующий CSS к значку переключения :

right: 0.75em !important;

Добавьте следующий CSS в Toggle Content :

max-height: 30vh;
overflow-y: scroll;
padding: 20px 3%;
background: #ffffff;
border: 2px solid #eeeeee;
border-radius: 5px;
text-align:left;

Часть 3: Получение стенограммы с Youtube и добавление ее к содержимому Toggle

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

Для этого перейдите к своему видео на Youtube и выполните следующие действия:

1. Откройте раскрывающееся меню «Дополнительные действия» (3 точки по горизонтали) рядом с кнопкой «Сохранить» под видео.
2. Щелкните Открыть стенограмму из списка.
3. Вверху поля стенограммы откройте раскрывающееся меню «Дополнительные действия» (3 вертикальные точки).
4. Щелкните Переключить отметки времени. Это позволит скрыть отображение временных меток слева от каждого блока текста.

Скопируйте весь текст из поля в буфер обмена.

Сейчас в тексте много разрывов строк. Чтобы убрать их, вы можете зайти на textfixer.com и использовать их бесплатный инструмент для удаления разрывов строк, чтобы удалить разрывы строк из текста.

В разделе «Удалить разрывы строк» ​​выберите «Удалять только разрывы строк».

Затем вставьте текст стенограммы в поле.

И нажмите кнопку «Удалить разрывы строк».

После создания текста в разделе «Новый текст без разрывов строк» ​​скопируйте текст в буфер обмена.

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

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

Вот и все!

Конечный результат

Вот окончательный результат нашего настраиваемого переключателя для расшифровки стенограммы видео в Divi.

На рабочем столе…

На планшете…

И по телефону…

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

В этом руководстве мы показали вам, как преобразовать модуль переключения Divi в настраиваемый переключатель для транскриптов видео в Divi. Уникальный лаконичный дизайн переключателя позволяет использовать его не только для записи видео. Я имею в виду, что вы можете поместить туда буквально любой текст, какой захотите. Но я считаю, что под видео он отлично подходит. Кроме того, использование этих автоматически сгенерированных транскриптов для видео на YouTube может определенно пригодиться, если вам нужно простое решение. Но не стесняйтесь изучить другие варианты расшифровки вашего видеоконтента и / или поделиться некоторыми с нами.

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

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