Фон для страницы сайта: Как сделать фон для сайта? — Независимое театральное объединение "Зрительские симпатии"

Содержание

Настройки фона страницы

Заказать сайт

Искать везде

Искать везде
CMS
Интернет-магазин 2.0
Интернет-магазин 1.0
Onicon
Maliver
Rekmala
Pablex
Кабинет и почта
CRM
Интеграции CMS. S3

Главная / Редактирование сайта / Хочу создать страницу / Конструктор лендингов / Настройки фона страницы

При необходимости вы можете задать фон для все страницы лендинга.

Общий фон будет распространяться на все блоки страницы, но только при условии, что у блока нет собственного фона. Если для блока выбран собственный фон — он будет перекрывать общий.

Рассмотрим, как работать с данной возможностью.

Шаг 1

На верхней панели редактирования раскройте меню «Настройки» и выберите пункт «Настройки сайта»,

Шаг 2

В открывшемся окне нажмите на кнопку редактирования фона.

Шаг 3

Откроется окно настроек фона, в котором вам будут доступны следующие параметры:

Изображение — выберите (при необходимости предварительно загрузив) картинку, которую вы хотите использовать в качестве фона страницы.
Прозрачность картинки — укажите значение от 0 до 100, где 0 это минимальная прозрачность (картинка четко видна), а 100 максимальная (картинка практически незаметна).
Не растягивать картинку на весь экран — отметьте данную галочку, если хотите, чтобы у изображения использовались оригинальные пропорции и оно не растягивалось по всей ширине экрана.

Цвет — если вы хотите использовать вместо картинки просто фоновый цвет, выберите его из палитры (картинку в настройке выше в таком случае загружать не нужно).
Прозрачность цвета — укажите значение от 0 до 100, где 0 это минимальная прозрачность (цвет фона четко виден), а 100 максимальная (фоновый цвет практически незаметен).
Не фиксировать изображение при скролле — если галочка отмечна, фоновое изображение будет зафиксировано таким образом, что при прокрутке страницы, фон блока будет как бы статично располагаться позади блоков. Если же галочку снять, фон не будет зафиксирован и будет пролистываться вместе со страницей.

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

В конце не забудьте обновить параметры в окне настроек.

Шаг 4

Вернувшись к окну настроек сайта, сохраните изменения.

Обратите внимание!

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

Была ли статья вам полезна?

Да

Нет

Укажите, пожалуйста, почему?

Рекомендации не помогли
Нет ответа на мой вопрос
Содержание статьи не соответствует заголовку
Другая причина

Комментарий

Как редактировать страницы сайта в конструкторе Тинькофф

Как отредактировать страницу?

Вы можете загружать на страницу свои изображения, переписывать текст, размещать товары и услуги.

Как отредактировать страницу:

Выберите страницу, которую хотите изменить.
Если страницы нет, создайте новую
Чтобы добавить новый блок, нажмите +:
Перед вами откроется список блоков. Они помогают быстро разместить нужную информацию и добавить особые функции: контактную форму, меню сайта, прием платежей, фотографии. Добавьте нужные блоки на страницу:
Вы можете настраивать каждый блок: отключать лишние элементы, менять, дублировать или удалять блоки. Наведите курсор на блок, который хотите настроить, — появятся кнопки управления блоком:
Измените элементы внутри блока. Для этого нажмите на нужный элемент — откроется панель редактирования.
Вы можете менять стиль шрифта, фон и цены, выравнивать текст, добавлять ссылки
Добавьте по аналогии столько блоков, сколько считаете нужным. Когда закончите редактировать страницу, нажмите «Опубликовать».

Как добавить изображение на страницу?

Как добавлять изображения на сайт:

Выберите блок с изображением.
Изображения работают не только в блоке «Фотографии», но и в «Слайдерах», «Преимуществах», «Отзывах» и так далее
Нажмите на изображение, которое хотите заменить. Снизу появится плашка, которая поможет загрузить и настроить картинку.
Изображение может быть в форматах JPG, PNG или GIF. Размер — не больше 10 МБ

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

Как отредактировать изображение?

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

Как изменить фон блока?

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

Как изменить фон блока:

Кликните в пустое место на фоне блока;
Появится поле, в котором можно выбрать цвет для фона.
Цвет текста и кнопок подстраивается под фон. Например, если выбрать синий фон, текст и кнопки станут белыми

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

Если фон слишком яркий, вы можете его приглушить:

Готово.

Как изменить вид текста?

Как изменить вид текста:

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

Вы можете в любой момент изменить внешний вид текста:

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

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

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

Ссылка на другой сайт указывается во вкладке «Внешняя ссылка»

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

Зайдите на страницу и добавьте блок с кнопкой.
Нажмите на кнопку и укажите ссылку — на текущий раздел страницы, внешнюю страницу, или корзину;
Вы можете поставить ссылку на страницу сайта или любой его блок

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

Клиент нажимает на кнопку, и товар добавляется в корзину.

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

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

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

Зайдите на страницу сайта и нажмите значок +, чтобы добавить новый блок:
Выберите блок «Меню страницы»:
Укажите, какие элементы блока надо отобразить в меню. Для этого нажмите на значок «Изменить структуру».
Выберите, сколько пунктов меню надо показывать на сайте. Настройте количество пунктов с помощью кнопок + и −.
Вы можете добавить в меню сколько угодно пунктов
Замените стандартный логотип на свой: Форматы логотипа: jpg, png или gif. Размер — до 10 МБ
Настройте ссылки в меню — выберите пункт меню и укажите ссылку. Ссылка может вести к любому разделу, который есть на странице, на другие страницы сайта или любой внешний сайт
Чтобы меню сайта всегда оставалось сверху, закрепите его:

Готово: вы настроили меню на сайте.

Блок «Контакты» помогает разместить информацию о компании: адрес, телефон, название, местоположение на картах.

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

Зайдите на страницу сайта и нажмите +, чтобы добавить новый блок;
Выберите блок «Контакты»;
Нажмите кнопку «Изменить структуру» и выберите, какие элементы отображать в блоке;
Кликните на карту в любом месте и введите адрес компании в нижнем поле.
Не забудьте также изменить телефон, эл. почту и адрес в блоке по центру

В блоке «Контакты» вы можете добавить новые элементы, например время работы и маршрут до офиса. Для этого нажмите + на иконке «Пункты»:

Как добавить видео с YouTube или Vimeo?

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

Как добавить видео:

Зайдите на страницу сайта и нажмите +, чтобы добавить новый блок;
Выберите блок «Видео»;
С помощью кнопок − и + выберите, сколько роликов будет отображаться на сайте;
Скопируйте ссылку на видео из YouTube или Vimeo. Вернитесь в конструктор сайтов, кликните на блок с видео и вставьте ссылку в нижнем поле;

Теперь на странице отображается видео.

Как разместить на сайте файл для скачивания?

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

Как прикрепить файл с устройства:

Откройте пункт «Еще» → «Файл».
Выберите файл на устройстве.
Прикрепите файл и опубликуйте страницу;
Прикрепленный файл можно при желании заменить на новый

Как прикрепить ссылку на файл с файлообменника:

Загрузите файл в Яндекс.Диск, Google Диск или Dropbox и скопируйте ссылку.
Нажмите «Копировать ссылку»
Перейдите в конструктор сайтов и добавьте любой блок с кнопкой или текстом. Нажмите на кнопку и вставьте ссылку в окно «Внешняя ссылка»;
Опубликуйте страницу.

Готово: Теперь посетители смогут скачать приложенный файл.

Как добавить код из другого сайта?

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

Как добавить код на примере Яндекс.Карт:

Зайдите на страницу сайта, нажмите знак +, чтобы добавить новый блок;
Добавьте на страницу блок‑скрипт;
Создайте карту в Яндексе.
Как создать карту, читайте в разделе «Помощь» Яндекса
Скопируйте код из Яндекс.Карт;
Вернитесь в конструктор сайтов и вставьте код в блок‑скрипт;
В блок-скрипте вы можете вставить код между тегом head или между тегом body
Опубликуйте страницу — вы увидите Яндекс. Карты;

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

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

Безопасно	Рискованно
Установить счетчик Яндекса или Google	Установить подозрительный счетчик. Он может перенаправлять посетителей на другой сайт
Разместить виджет известного callback-сервиса	tableCell»>Разместить неизвестную форму заявок. Она может рассылать спам
Разместить баннер известной реферальной программы	Подключить слишком выгодную реферальную программу. Она может украсть деньги посетителей

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

Какие есть блоки для сайта?

Как изменить логотип на сайте?

Как изменить логотип на сайте:

Откройте страницу сайта и добавьте новый блок;
Выберите блок «Меню страницы» — появится шапка сайта с логотипом;
Чтобы изменить логотип, нажмите на него и загрузите новый;

Готово.

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

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

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

Как группировать близкие по смыслу страницы?

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

Чтобы сгруппировать страницы, следуйте инструкции:

Войдите в конструктор сайтов, перейдите на ваш сайт и нажмите кнопку «Создать папку»;
Укажите название и адрес папки;
Папка появится в списке со всеми страницами;
Чтобы переместить страницу в папку, нажмите на три точки возле любой страницы и выберите опцию «Перенести в папку»;
Страницы внутри папки автоматически обновят свои адреса. Каждый раз, когда вы перемещаете страницы между папками, у них обновляется адрес.
Если на перемещенную страницу ведут ссылки с других страниц, их придется обновлять вручную
Чтобы убрать страницу из папки, нажмите на три точки и выберите опцию «Перенести в папку» → «Перенести на уровень выше». Адрес станет прежним.
Вы также можете вкладывать папки друг в друга — максимум до четырех вложений. Рекомендуем не создавать слишком много папок, чтобы не запутаться

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

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

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

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

Получилось найти ответ?

Как изменить фон на моем сайте?

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

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

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

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

Чтобы изменить фон вашего сайта, вам нужно будет отредактировать файл CSS, относящийся к выбранной вами теме, и изменить его стиль «тела» в соответствии с вашими потребностями

Доступ к файлу CSS

От менеджера вашего интернет-магазина:

Перейти к Настройки > Дизайн > Темы и стили
Нажмите кнопку «Редактировать внешний вид/цвета (CSS)», расположенную в верхней части страницы

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

Примечание:
Папка темы вашего магазина содержит файл default.css в качестве таблицы стилей. Как только вы нажмете описанную выше кнопку «Редактировать внешний вид/цвета (CSS)», ваш магазин начнет использовать дополнительную таблицу стилей с именем «default_modifed».

В редакторе таблиц стилей найдите стиль «тело» и нажмите его отдельную кнопку «Действие > Редактировать».

Совет:
Используйте CTRL-F в браузере, чтобы найти слово «тело» и найти его проще.

Найдите поле «фон» и измените его значения в соответствии с вашими потребностями.

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

Редактирование CSS

Раздел фона стиля тела обычно содержит шестнадцатеричное значение цвета (#xxxxxx) и URL-адрес используемого изображения. Вы также можете увидеть некоторые инструкции о том, как должно отображаться изображение. Например, в следующем примере фон стиля по умолчанию:

#020202 url(images/BG_body.jpg) без повторов вверху по центру

В данном случае:

#020202 — указывает темный цвет
url(images/BG_body.jpg) — указывает путь к изображению
не повторяющийся верхний центр — определяет выравнивание и отображение изображения.

Удаление изображения

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

Совет:
На некоторые цвета можно ссылаться по их именам вместо шестнадцатеричного значения. Например, #FF0000 можно заменить словом «красный». Нажмите здесь , чтобы получить список цветов, на которые можно ссылаться по названию.

Изменение изображения

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

Примечание:
При загрузке нового изображения обязательно загрузите его непосредственно в папку вашего сайта /web/assets/templates/[theme]/css/images, где [theme] — это имя папки вашей темы. (например, v40001-html5)

Размещение изображения

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

Некоторые распространенные варианты:

без повтора: изображение отображается только один раз на странице
повтор-x: изображение повторяется горизонтально по всей странице.
Repeat-y: изображение повторяется вертикально вниз по странице

Подробное руководство по веб-сайту.

Тенденции веб-разработки появляются и исчезают быстро, но некоторые из них настолько сильны, что их нельзя игнорировать. Использование видео в качестве фона веб-страницы — одна из закрепившихся тенденций.

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

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

Что такое фоновое видео

Определить фоновое видео несложно, так как его суть понятна из названия. Фоновое видео — это фрагмент видеоконтента, который используется в качестве фона вашего сайта. Есть много способов использовать его на веб-странице, а также несколько стилей, которые вы можете выбрать. Самое главное, что нужно знать, это то, что:

Ваше фоновое видео должно идеально соответствовать дизайну сайта
Иметь четкую цель.

Далее мы подробнее расскажем о возможных целях использования фонового видео.

Основные цели использования фонового видео

Фоновое видео может помочь вам в достижении трех основных целей.

1. Передайте атмосферу

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

2. Покажите свой товар или услугу.

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

3. Вызвать эмоцию.

Большинство покупок мы совершаем под влиянием эмоций и желаний. Первое впечатление, которое мы получаем, почти всегда визуальное. Фоновое видео — это возможность быстро разжечь эмоции и последующее желание, прежде чем рациональная часть мозга подключится к процессу. Например, этот подход хорошо сработает для индустрии туризма, когда визуальное впечатление (например, тропический пляж) еще больше усилит желание 9.0010

Стили фонового видео

Анимированное фоновое видео

Анимированное фоновое видео может соответствовать практически любой бизнес-цели и корпоративному брендингу. Давайте рассмотрим несколько примеров.

— Мики Моттес — дизайнер и аниматор, поэтому его веб-сайт полностью анимирован. Фон его веб-сайта работает как портфолио, поэтому каждый посетитель может сразу увидеть его творческий стиль.

— Your Plan, Your Planet — научный проект, запущенный Google. Это анимированный лендинг, и все дальнейшее взаимодействие с сайтом тоже анимировано. Цель проекта — научить всех бережно относиться к ресурсам. Простая и понятная анимация — хороший способ сделать это.

Преимущества использования анимационного ролика в качестве фона в том, что:

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

Видеоролики Live-Action

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

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

Стоковые видео для фона веб-сайта

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

Почему ваше фоновое видео должно быть персонализировано

Стоковые видео никогда не могут идеально подходить для вашего бизнеса и могут испортить вашу репутацию, если посетитель уже видел его в другом месте. Исследования показывают, что современные пользователи подсознательно связывают низкокачественный веб-контент с таким же некачественным продуктом или услугой. Качественное видео в качестве фона — это первый шаг к тому, чтобы убедить пользователей в том, что ваш сайт, а значит, и ваши предложения тоже достойны их внимания.
Индивидуальное видео способно дать пользователям правильное визуальное впечатление с первых секунд. 94% первого впечатления связано с дизайном. Индивидуальное фоновое видео — еще один шанс улучшить первое впечатление и побудить пользователя к дальнейшему взаимодействию.
Пользовательские фоновые видео более привлекательны. Они заставляют пользователей проводить больше времени на странице, демонстрируя хорошие модели поведения, чтобы сделать ваш сайт более надежным, по мнению Google. Google ценит индивидуальный и привлекательный контент, и это относится и к видео.
Индивидуальное видео в качестве фона может передать любое сообщение, которое вы хотите. Как мы уже говорили, фоновое видео на вашем сайте может иметь разные цели, а значит, оно может доносить до ваших посетителей различные сообщения — от создания нужного настроения до повышения вашей репутации с помощью визуальных средств.

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

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

Полноэкранные фоновые видео хорошо работают на целевых страницах

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

Под верхним

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

Должен быть контраст

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

Учитывать пользователей мобильных устройств

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

Время, которое взрослые проводят в мобильных телефонах

Как создаются фоновые видео

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

Основные ошибки, которых следует избегать при создании фонового видео

Опыт говорит, что чем больше подводных камней вы предусмотрите, тем эффективнее будет ваше фоновое видео. Вот основные ошибки при создании фонового видео, которые в итоге могут дорого обойтись.

Использование стокового видео или любого другого видео, которое вы выберете случайным образом. Мы уже говорили об этом. В лучшем случае стоковые видео не принесут результата. В худшем случае они могут навредить вашему бизнесу и репутации.
Автовоспроизведение звука видео. Пользователи в один голос утверждают, что это одна из самых раздражающих онлайн-ситуаций. Внезапный громкий звук может необратимо убить желание работать с вами — особенно если вы работаете с «чувствительными к тишине» категориями людей, например, родителями с маленькими детьми.
Ограничение длины. Не стоит ограничивать длину видео. В общем, это может длиться сколь угодно долго или продолжаться на повторе, но при одном условии — это не должно влиять на скорость загрузки страницы. Поэтому также важно выбрать правильный подход к хранению видео. Об этом мы поговорим дальше.
Сделать видео более важным, чем удобство использования и наглядность другого контента. Иногда владельцы бизнеса думают, что фоновое видео — это волшебная пилюля для идеального взаимодействия с пользователем. Однако это не совсем так. Наличие видео не должно усложнять интерфейс, мешать поиску или мешать легкому доступу к другому контенту на вашем сайте.
Выбор неподходящего разрешения. Большинство фоновых видео имеют стандартный размер HD (1280×720), но он также может зависеть от размеров вашего веб-сайта. Лучше всего проконсультироваться с дизайнером. Если вы создаете веб-сайт самостоятельно, используя WordPress или Wix, необходимое вам разрешение будет зависеть от используемого вами шаблона.

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

Чрезмерное движение или что-то слишком отвлекающее. Слишком динамичное видео может вызвать головокружение у пользователей, чувствительных к движениям. А что-то слишком отвлекающее может заставить пользователя забыть о своем главном намерении — совершить покупку.
Отсутствие кнопок паузы, остановки или скрытия. Наличие видео может усложнить структуру вашего сайта. Вот почему у пользователей всегда должна быть возможность скрыть или остановить видео и легко двигаться дальше по воронке.

Как добавить фоновое видео на ваш веб-сайт

По сути, существует несколько способов добавить фоновое видео на ваш веб-сайт:

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

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

Заключение

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