Живая обложка ВКонтакте: инструкция, размеры, советы

В последнее время всё большую популярность обретают различные интерактивные способы завлечь аудиторию и привлечь к себе больше внимания. Тут и боты для социальных сетей и мессенджеров, и другие решения, придающие «уникальности». Среди них можно выделить и динамические обложки для сообществ, официально поддерживать которые ВКонтакте начали в марте. Почему я решил написать эту небольшую статью? Хотя ажиотаж вокруг этой темы и спал, всё равно она остаётся довольно популярной, находятся как «клиенты», готовые платить очень большие деньги, так и желающие научиться это делать самому. Я работал с одной «студией», которая берет шестизначные суммы за эту работу, при этом кидая своих разработчиков и мелких клиентов. Так вот, чтобы в этой сфере не было монополии, и все увидели, насколько легко это делается, я и решил написать статью.

На примере моего пустого сообщества-песочницы

Как использовать живые обложки ВКонтакте

Для начала отметим, что такие обложки отображаются только в мобильных приложениях ВКонтакте для iOS и Android. В десктоп- и мобильной версии сайта посетители видят обычную обложку.

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

Если пользователь нажмёт на обложку, то раскроет её на весь экран — так будет удобнее рассмотреть фото или видео в деталях или прочитать условия акции внизу баннера. А ещё при нажатии на обложку в видео можно включить звук.

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

Что точно нужно знать пользователю, который зашёл в ваше сообщество? У вас сейчас проходит акция? Ваши товары созданы только из натуральных материалов? Эту информацию можно и нужно размещать на слайдах.

Например:

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

Ещё примеры: салон красоты может сделать фоторяд из работ «до/после»; кафе, бары или рестораны — выкладывать обзор нового меню; школа танцев — выступления и информацию о записи на занятие.

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

Лайфхак: помимо живой обложки, добавьте в сообщество кнопку для связи или перехода в магазин (Настройки -> Кнопка действия). Возможность в один клик перейти на сайт или связаться с представителем компании — эффективный инструмент для повышения трафика и продаж товара/услуги.

Принцип работы

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

Скрипты динамической обложки ВК

Этот вариант подходит разве что для программистов. Нужно через API сделать специальный модуль. С помощью Access Token получить доступ к данным и подставить необходимые значения в макет шапки сайта. Для простых задач есть готовые универсальные решения. Но создать что-то оригинальное можно лишь самостоятельно прописывая необходимый программный код.

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

Онлайн-сервисы

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

Простыми и надежными показали себя площадки LetsCover и DyCover. Для работы с одним пабликом они предоставляют базовый инструментарий безвозмездно. При этом за символическую плату можно воспользоваться полным функционалом.

Требования к живым обложкам для групп‍

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

• Все слайды должны быть вертикальными, в пропорции 9:16, рекомендуемый размер — 1080*1920.
• Требования к видео: продолжительность не более 30 секунд, формат MP4, 15-60 кадров в секунду, размер до 20 Мб.

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

Введение

Совсем недавно мне потребовалось создать несколько видеообложек для сообществ, но так как я этим никогда ранее не занимался, пришлось разбираться. С такими программами как Adobe Photoshop, Adobe Premiere и Adobe After Effects я уже давно знаком и активно пользуюсь, поэтому разобраться с такой задачей не составило особого труда.

Живая обложка — относительно новый формат оформления сообществ в ВКонтакте. Официально стал доступен для всех администраторов групп в начале 2022 года. До этого, устанавливать живые обложки могли только верифицированные сообщества.

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

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

Как установить живую обложку в группу ВКонтакте?

В мобильном приложении

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

В открывшемся меню выберите раздел «Информация».

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

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

В десктоп-версии ВКонтакте

Чтобы загрузить слайды в полной версии сайта, зайдите в своё сообщество и перейдите в раздел «Управление».

В настройках найдите пункт «Обложка» и кликните по ссылке «Управление».

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

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

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

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

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

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

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

Что мы получили в итоге. Если Вы планируете как у мы все любим написать скидка 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 — мы специально ее выделили т.к. в этой зоне размещена кнопка действия.

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

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

Как создать обложку самому?

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

Если ваши фотографии/видео необходимо привести к единому стилю, используйте бесплатные онлайн-конструкторы, например, Canva или Vista Create, либо мобильные приложения для обработки фото и видео — PicsArt, VSCO, Mojo, InShot.

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

Личный кабинет

Здесь имеется 3 пункта (слева).

Первый пункт – Тарифы. Можете посмотреть свой тариф, можете поменять тариф.

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

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

Полезные советы

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

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

• Избегайте рекламных штампов. Они уже потеряли свою актуальность и могут оттолкнуть потенциального клиента. Например, «индивидуальный подход», «только сейчас» или «только для вас». Лучше указывать конкретику: доставка в течение 2-х рабочих дней.
• Не делайте слишком длинные фразы. Чем короче текст, тем быстрее пользователь прочтет и сможет определиться, актуально ему ваше предложение или нет.
• Будьте внимательны в использовании сленга. Ориентируйтесь на свою целевую аудиторию, тщательно проверяйте и продумывайте слоганы, в которых содержится подобная лексика. К примеру, для молодежи всем известные выражения «Вливайся!» (Fanta), «Заряди мозги» (Nuts) будут близки и понятны. Если вы попробуете использовать их для поколения постарше, вас могут не понять, либо понять неправильно.

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

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

Как вставит и отредактировать виджет

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

(1) – Виджет дата и время (в бесплатной нельзя вставить время) (2) – Три виджета Пользователь (3) – Виджет Последний подписчик (4) – Виджет Текст

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

На обложке появится виджет (1), с помощью маркеров его можно растянуть. Можно растянуть отдельно фото, отдельно текст (Иван Иванов). У каждого виджета имеются свои настройки (2).

Панель настроек Отображение

(1) – перемещать виджет можно с помощью ползунков (по осям X и Y) или просто ввести с клавиатуры нужное значение (2) – ширину и высоту также можно изменять с помощью ползунков (3) – виджет можно повернуть на нужный угол

Раздел Виджет уже рассмотрели (см. выше)

Изображение

(1) – Размер изображения, можно изменить размер (2) – Округление изображения, можно сделать изображение круглым, это очень красиво смотрится (ползунок до конца вправо или значение 50) (3) – Рамка, стандартные настройки рамки (стиль, толщена, цвет)

Разделы Имя и Фамилия, рассмотрите сами, там ничего интересного, можете оставить, как есть.

В каждом виджете, где есть текстовое поле, есть Настройка текста, настройки стандартные, как например, в редакторе Word.

Есть еще 2 нужные кнопки, Корзина (1) удаляет ненужный виджет и Копировать (2), если нужно сделать несколько одинаковых виджетов с одинаковыми настройками. Так я делал виджеты Пользователь (3).

Есть еще пункты меню, о которых необходимо упомянуть.

Какую информацию содержит в себе динамическая обложка

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

• Счетчик времени, оставшегося до определенного события;
• Текст по ссылке из интернета – статистика посещаемости вашего сайта, цитаты из публикаций и т.д.;
• Бот, отвечающий на типичные вопросы участников группы или оказывающий прочую помощь;
• Количество участников группы;
• Несколько последних подписчиков, которые вступили в группу;
• Самые активные участники сообщества – поставившие больше всего лайков или написавшие больше всего комментариев;
• Информация по проводимому в паблике конкурсу;
• Курсы валют;
• Погода в определенном регионе;
• Состояние пробок в крупном городе;
• Информацию о пожертвованиях и последней активности донатеров, с активной кнопкой для сбора средств.

Как видите, такой инструмент имеет массу возможностей. Если настроить все правильно, можно получить максимальную отдачу от подписчиков.

Готовые шаблоны

Здесь вы найдете готовые шаблоны, «разложенные» по категориям. Можно выбрать понравившейся шаблон и отредактировать его под себя.

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

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

Теперь перейдите в свою группу, перезагрузите браузер и посмотрите, что у вас получилось.

РЕГИСТРИРУЙТЕСЬ НА СЕРВИСЕ DyCover

С уважением, Сергей Бурдин