Как сделать динамическую (живую) обложку Вконтакте?

Размеры Живые обложки для сообщества ВКонтакте

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

Рекомендованный размер живой обложки — 1080 х 1920 pixel. (ширина 1080 pixel, высота 1920 pixel), мы рекомендуем использовать контейнер mov, формат кодека для видео h.264, частота кадров по желанию 25 (Pal) или 30 (NTSC) и это все.

Таргбокс первым в сети разобрался со всеми тонкостями и нюансами при подготовке видео и изображений для Живых обоев. В этой статье вы узнаете о размерах живых обложек и о том как их установить.

Прежде всего мы должны понимать, Живые обложки доступны только в мобильном приложение ВКонтакте для IOS и Android.

Возможны 3 варианта загрузки.

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

Размеры первого и второго варианта не отличаются и требуют одинаковой подготовки/

Варианты использования живой обложки

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

Пожалуй, выбор тех, кто опробовал новый вариант подачи, показателен. В число пионеров вошли представители мировых брендов:

• магазины Nike Football Russia (они удачно вписали в видеоролик рекламу спортивной обуви, которая продаётся в их торговых точках);
• команда PlayStation Россия (заинтриговавшая пользователей небольшим, но впечатляющим видео — эпизодом прохождения захватывающей игры);
• авиакомпания S7 Airlines (использовавшая в заставке имиджевый ролик со взлетающим самолётом);
• рок-группа Twenty One Pilots (сделавшая живой обложкой момент своего концертного выступления).

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

Загрузка видео или фото без функции «показывать фотографии в движении».

Давайте определим 2 состояния видимости обложки:

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

Сокращенный вид живой обложки

Полный вид живой обложки
Абсолютно логичный вопрос в как разместить основную информацию чтобы она была видна на привью и в полной версии. Давайте разберемся как наша обложка вписывается в привью. Сразу закрепим с Вами шируну обложки в данном варианте она неизменна и составляет 1080 pixel.

Правильные размеры живых обложек для вк

Но вот с высотой дела обстоят куда сложнее. Привью обрезает часть изображения сверху и снизу но обрезает не одинаково поэтому просто от центровать полезную информацию будет не правильно. Плюс нам мешают меню интерфейса и название группы с аватаркой, которые есть и в привью и в полной версии. Чтобы окончательно не запутаться воспользуйтесь нашим шаблоном обложки ВКонтакте. Мы немного округлили все размеры для удобства и сделали запас на отображение на разных экранах. (Сразу оговорюсь, совсем маленькие экраны мы не тестировали проверяли с Iphone 5 и дальше до 10 (она кстати дает больше вариантов для творчества с обложками). Шаблон размещенный ниже поделен на зоны от 1 до 7 обратите на них внимание далее мы будем разбирать эти зоны.

Шаблон с размерами живых обложек VK

Что мы получили в итоге. Если Вы планируете как у мы все любим написать скидка 90% и максимально задействовать этой надписью все имеющееся пространство, не обольщайтесь сильно Ваш размер всего (ш х в) 1080 х 832 pixel. На рисунке это область 4, она видна всем пользователям и в привью и в полной версии.

Для тех кто получил всю необходимую информацию и планирует покинуть статью не забудьте вступить в нашу группу ВК @targboxsmm

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

• Зона 3 на рисунке размером (ш х в) 1080 х 132 pixel — это интерфейс смарфона и меню ВК, на самом деле можно эффективно использовать данную область, главное не писать в этой зоне текст т.к. он окажется не читаемым для пользователей. Элемент графического оформления вполне нормально будет смотреться в данной зоне.
• Зона 2 размером (ш х в) 1080 х 150 pixel — не видна на привью вообще, но в полной версии обложки она свободна для использования.
• Зона 1 размером (ш х в) 1080 х 140 pixel — это интерфейс и меню ВК, с этим вопросом мы уже разобрались. Можно использовать для графических элементов.

Итак, что получается с верхней частью обложки. Зону 1,2,3 (ш х в) 1080 х 423 pixel можно использовать для размещения графических элементов или просто залить красивым фоном. Зона 4 размером (ш х в) 1080 х 832 pixel — это наша с Вами основная рабочая поверхность, куда мы кидаем заманушки, акции, логотипы и т.п.

• Зона 5 размером (ш х в) 1080 х 250 pixel — проблемная область т.к. на ней размещается название сообщества, аватар и кнопки действия. Название сообщества еще не сильно заслоняет нашу обложку, а вот аватар и кнопки практически полностью перекрывают обложку. И вариант с использованием призыва к действию не очень заходит в данной области. Вернемся к ней позже.
• Зона 6 размером (ш х в) 1080 х 275 pixel — не видна в привью, а в полной версии обложки на ней размещается название группы и аватар.
• Зона 7 размером (ш х в) 1080 х 140 pixel — мы специально ее выделили т.к. в этой зоне размещена кнопка действия.

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

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

Как создать динамическую обложку для группы Вконтакте

Самый простой способ — это воспользоваться онлайн сервисом. Есть бесплатные тарифы.

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

https://dycover.ru/ref/3667352/

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

• Виджет «Текст»;
• Виджет «Дата и Время»;
• Виджет «Текст»;
• Виджет «Фигура»;
• Виджет «Картинка»;
• Последний подписчик;
• Последний комментатор;
• Виджет «Пользователь».

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

Давайте приступим. На главной странице сервиса нажмите на кнопку «Попробовать бесплатно».

После этого нас попросят подтвердить доступ к нашей странице. Нажмите на кнопку «Разрешить».

Мы будем перемещены на страницу, где будет сформирован список наших групп. Найдите здесь нужное сообщество, и нажмите на его URL адрес (см. как узнать id группы вк), для добавления в сервис.

На следующей странице нажмите «Подключить».

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

Переходим к созданию обложки. Нажмите на ссылку «Создайте ее».

Для начала нужно загрузить фоновую картинку. Ее рекомендованный размер 1590 x 400 пикселей. В конструкторе перейдите на вкладку «Загрузка фона», затем нажмите «Загрузить фон».

Выберите на компьютере нужное изображение. Оно будет добавлено в качестве обложки.

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

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

По аналогии, добавьте все необходимые виджеты, и нажмите на кнопку «Сохранить обложку».

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

Более подробный обзор функций сервиса, вы найдете в нашем видео уроке.

Загрузка изображений с функции «показывать фотографии в движении».

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

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

Шаблон с размерами живых обложек VK

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

Живая обложка ВК шаблон

Что такое живая обложка для вк

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

Ты можешь использовать их для следующего:

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

При этом кнопка действия никуда не пропадет: она будет отражаться на фоне видео или картинки.