Если вы использовали Shopify, ты знаешь тему Dawn. Это одна из самых популярных бесплатных тем, доступных для начинающих предпринимателей, а также широкие возможности настройки для создания уникальной витрины магазина.
Тема Dawn включает в себя множество модулей, таких как стандартный блок загрузки видео и графический баннер.
Баннер изображения позволяет кнопкам и тексту служить передним планом, а изображение — фоном. К сожалению, видеомодуль не поддерживает такой тип переднего плана. Однако есть способы получить лучшее из обоих миров: создать видеобаннер, в котором видео является фоном, а на переднем плане — текст.
В этом руководстве мы покажем вам, как построить Тема рассвета видеобаннер, который привлечет внимание на вашей домашней странице!
Обзор темы «Рассвет»
Тема «Рассвет» бесплатна. Shopify тема это широко используется розничными продавцами электронной коммерции. Благодаря простому дизайну и понятным настройкам он остается популярным выбором для создания визуально привлекательного и элегантного магазина.
Что такое видеофон/баннер и почему вам следует использовать его на своем веб-сайте?
Видеобаннер — это область веб-страницы, в которой видео представлено в виде полноэкранного фона вместе с другими элементами на переднем плане, такими как кнопки и текст.
Такой модуль, как видеобаннер на тему Dawn, предлагает множество преимуществ, улучшающих общее впечатление от веб-сайта для посетителей. Вот некоторые ключевые преимущества:
- Расширенные визуальные элементы: Благодаря использованию увлекательных видеороликов веб-сайт становится более привлекательным и привлекает внимание посетителей.
- Динамичный и интересный контент: Видео эффективно передаютformatион. Они могут продемонстрировать особенности продукта, продемонстрировать практические рекомендации или рассказать увлекательную историю бренда, поддерживая интерес посетителей.
- Расширенное взаимодействие с пользователем: Видео способно произвести неизгладимое впечатление на посетителей. Сочетание визуальных эффектов, звука и движения привлекает внимание и побуждает пользователей к дальнейшему исследованию.
- Эффективная коммуникация бренда: Видеофон или баннер могут передать послание бренда покупателям. Это позволяет компаниям подчеркнуть свое уникальное ценностное предложение, продемонстрировать продукты или услуги и создать сильный имидж бренда.
Используя возможности видео в дизайне вашего веб-сайта, вы можете сделать его более интересным и повысить конверсию.
Пошаговое руководство по добавлению видеофона/баннера в тему Dawn
Технически существует четыре способа добавить видеобаннер на тему Dawn (не все из них идеальны):
- Преобразование видео в видео/изображение WebP format.
- Регулировка Shopify код обычного графического баннера, чтобы он поддерживал видео.
- Преобразование видео в GIF format.
- Просто загрузив видео в блок Видео в Shopify, пропуская идею наличия элементов переднего плана (поэтому это не будет настоящим баннером).
Изменить не так уж и сложно Shopify код для стандартного графического баннера, но этот процесс неоправданно долгий, учитывая, что у вас есть доступ к файлу format как ВебП. GIF-файлы значительно снижают качество видео, а вариант 4 не дает нам настоящего видеобаннера.
Поэтому мы рекомендуем конвертировать любое видео format у вас есть (.mp4, .mov, .wmv) для WebP format. WebP сочетает в себе преимущества изображений, видео и GIF-файлов JPEG высокого разрешения: вы можете создавать красивые движущиеся видеоролики без больших объемов и без значительной потери разрешения. И вы можете загружать видео/изображения WebP на Shopify имиджевый баннер.
Вот как:
Шаг 1. Возьмите видео и преобразуйте его в файл WebP. Format
В Интернете есть различные бесплатные конвертеры «видео в WebP». Попробуйте онлайн-поиск или воспользуйтесь одним из протестированных нами конвертеров:
Загрузите свое видео в бесплатный конвертер, а затем выберите его преобразование в WebP. format. Сохраните новый файл на свой компьютер.
Шаг 2. Найдите тему «Рассвет» в Shopify
Перейдите в «Интернет-магазин» > «Темы».
Если у вас ее еще нет, установите тему Dawn. Другойwise, вы должны найти тему Dawn, обозначенную как Shopify«Текущая тема». Нажмите кнопку «Настроить», чтобы продолжить.
Шаг 3. Добавьте и выберите блок графического баннера
Блок «Изображение-баннер» добавляется в тему Dawn по умолчанию. Итак, вы сможете щелкнуть этот модуль, чтобы открыть его настройки на левой панели. Также можно нажать на сам баннер с изображением в предварительном просмотре справа. Используйте ссылку «Добавить блок», если вам нужно вставить «Изображение-баннер» с нуля.
Шаг 4. Загрузите видеофайл WebP
Нажмите кнопку «Выбрать изображение» в разделе «Первое изображение».
При этом загружается область для загрузки изображений в медиатеку вашего магазина. Также можно вставить URL-адреса видео, но мы будем использовать функцию загрузки. Нажмите кнопку «Добавить изображения» и выберите файл WebP, который вы создали ранее. Отметьте вновь загруженный файл галочкой, затем нажмите кнопку «Готово».
При этом видеофайл WebP помещается в баннер изображения, что позволяет вам также редактировать любой контент на переднем плане. Нажмите «Сохранить».
Поздравляем, вы успешно добавили видеобаннер на тему Dawn!
Шаг 5: Предварительный просмотр видео
Но подождите, это wise просмотреть видео на внешнем интерфейсе, чтобы убедиться, что оно выглядит правильно, работает плавно и имеет подходящее разрешение.
Вернувшись на главный экран панели управления, щелкните значок глазного яблока, чтобы «Просмотреть свой интернет-магазин». Он расположен рядом с «Интернет-магазином» в разделе «Каналы продаж».
Успех!
Настройка видеобаннера на тему Dawn: сделайте его уникальным
Настройка гарантирует, что ваше видео идеально соответствует вашему бренду и эстетике магазина. Итак, давайте засучим рукава и приступим к делу, ладно?
Вы всегда должны выбрать графический баннер, чтобы увидеть его настройки. Оказавшись там, вы можете изменить непрозрачность наложения изображения и изменить высоту баннера. Затем вы можете изменить desktop положение содержимого, изменение места наложения текста.
Перемещение содержимого и кнопок позволяет отображать текст и кнопку над той областью видео, где они наиболее заметны.
Для дальнейшей настройки у вас есть доступ к разделу «Пользовательский CSS».
И, конечно же, можно выбрать текст содержимого или кнопку, чтобы изменить то, что они говорят и как они выглядят.
Советы по оптимизации видеофайла для достижения максимальной скорости и совместимости
Наличие впечатляющего видео не будет иметь значения, если оно замедляет сканирование вашего сайта или некорректно отображается на определенных устройствах. Вот почему оптимизация вашего видеофайла для достижения максимальной скорости и совместимости является неоспоримой задачей. В этом разделе мы поделимся некоторыми полезными советами, которые помогут оптимизировать ваш видеоконтент для эффективной загрузки и универсального воспроизведения.
- Использовать видеофайл format(например, WebP), которые широко совместимы с большинством веб-браузеров.
- Размер видеофайла должен быть как можно меньшим. WebP прекрасно сжимает видео без потери качества.
- Установите соотношение сторон видео так, чтобы оно соответствовало размеру экрана.
- Выбирайте видео со сбалансированным цветом и контрастом, которое отражает индивидуальность магазина.
Устранение распространенных проблем с добавлением видеофона/баннера в тему Dawn
Иногда, независимо от того, насколько вы осторожны, проблемы все равно могут возникать при добавлении видеобаннера темы Dawn. Вот несколько советов по устранению неполадок, если вы столкнулись с проблемами:
Проблемы несовместимости
Попробуйте преобразовать видео в совместимый файл. format например WebP, или воспользуйтесь ссылкой для встраивания видео.
Размер видео слишком большой
Обрежьте видео или сожмите его, чтобы уменьшить размер файла, сохранив качество.
Видео не воспроизводится автоматически
Убедитесь, что вы включили опцию «Автозапуск» в настройках темы.
Наше заключение по добавлению видеобаннера на тему «Рассвет»
Следуя нашему пошаговому руководству и советам по устранению неполадок, вы сможете добавить видеобаннер темы Dawn в Shopify легко.
Что ты думаешь? Дайте нам знать в комментариях, если вам удалось добавить видеобаннер на тему Dawn!
Комментарии Ответы 0