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

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

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

Шаг 1
Создаем в фотошопе новый документ размером примерно 900х700 пикселей, заливаем его белым цветом. Теперь нам надо вырезать в слое два окна, через которые будет проглядывать собственно само графическое оформление. Сначала выделяем прямоугольник размером 200х500 пикселя (аватар) и нажимаем Del. Потом выделяем прямоугольник размером 510х352 (выравниваем по нижней линии аватара и делаем расстояние между фигурами 50 пикселей) и также нажимаем Del.
После очередного апдейта дизайна ВКонтактом (31.10.2016) размеры баннера стали 510х307 (а не 510х352).

Шаг 2
Теперь ниже белого слоя кладем какую-нибудь единую картинку, которая и будет составлять основу оформления.

Шаг 3
После этого дополняем картинку различными элементами — логотипом, текстовыми надписями и кнопкой, призывающей кликнуть по меню. Затем сохраняем на компьютере две отдельных картинки — одна аватар (справа), вторая меню с кнопкой кликнуть (слева).

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

Шаг 5
Нарезаем наше меню на несколько горизонтальных полосок в соответствии с количеством пунктов меню. Сохраняем в виде отдельных файлов.

Шаг 6
Заходим в нашу группу Вконтакте, нажимаем «Управление сообществом» (при нажатии на три точки под автаром открывается выпадающее меню) и проверяем правильность установок. Группа должна быть открытая и материалы тоже открыты.

Шаг 7
Теперь загружаем новый аватар. Подводим мышкой к месту аватара и на всплывающем меню выбираем «Обновить фотографию». Загружаем правую фотографию из Шага 3, растягиваем область выделения вверх и вниз до краев картинки, нажимаем «Сохранить» и потом выбираем область для круглой миниатюры.

Шаг 8
Теперь нужно создать внутреннюю страницу. О том, как это сделать, подробно расписано в уроке . Еще один альтернативный способ создания внутренней страницы расписан в уроке « » в Шаге 5 и 6.

Шаг 9
После того, как мы создали внутреннюю страницу, можно перейти на нее. Для этого нужно нажать на раскрывающееся меню группы (по умолчанию этот пункт называется «Свежие новости» — я переименовала в «Меню») и там нажать на ссылку «Меню». После этого мы перейдем на вновь созданную пустую страницу.

Шаг 10
Теперь нам надо создать графическое меню из пяти пунктов. Для этого мы загружаем в альбом группы наши пять картинок из Шага 5. Мы нажимаем на значок фотоаппарата и загружаем нарезанные картинки с компьютера. Хранится картинки будут где-то на серверах ВКонтакта с привязкой к группе, поэтому создавать отдельный альбом для картинок-нарезок не обязательно. Загружать картинки нужно в режими Вики-разметки.

Шаг 11
Теперь в режиме вики-разметки мы будем создавать графическое меню. Очень важно создавать именно в режиме вики-разметки (иконка в правом верхнем углу из двух треугольных скобочек), а не в визуальном режиме редактирования. Подробнее о создании кода в вики-разметке рассказано в Шаге 4 и Шаге 5 урока « «. Там же приведен шаблон кода для вставки. Если все сделано правильно, то должно получиться готовое графическое меню, как на рисунке ниже.

Шаг 12
Теперь возвращаемся на главную страницу группы, берем урл нашей внутренней страницы (он должен быть такого вида https://vk.com/page-78320145_49821289) и вставляем в окошко, где создаются новости. Автоматически должно прикрепиться окошко со ссылкой на эту самую внутреннюю страницу. После этого мы подводим курсор к надписи «Прикрепить» и прикрепляем к записи фотографию, а именно нашу картинку слева из Шага 3. После этого стираем строку с урл внутренней страницы, оставив пустое место. Важно! На данном шаге надо поставить галочку (если есть такие права, в основном это касается групп с открытой стеной) в чекбоксе «От имени группы». Если эту галочку не поставить, то запись невозможно будет закрепить. В конце нажимаем «Отправить».

Шаг 13
Подводим курсор к трем точкам рядом с заголовком поста и в выпадающем окошке выбираем пункт «Закрепить». Соответственно также новость и открепляется, если необходимо.

Шаг 14
Есть один нюанс. Иногда, после того, как открепляешь новость, она уходит далеко вниз ленты, согласно дате создания, и бывает достаточно трудно вновь ее отыскать. Поэтому лучше сразу где-нибудь записать урл закрепленной новости. Для этого надо подвести курсор ко времени создания новости и нажать на ссылку.

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

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

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

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

Тексты в паблике: 8 простых правил

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

• 1. Главное: пишите максимально просто, выкидывайте причастные и деепричастные обороты, определения. Используйте поменьше прилагательных. Старайтесь быть предельно конкретны и информативны.
• 2. Делайте заголовок. Пусть первой строчкой вашего поста будет заголовок, отражающий суть поста.
• 3. Отделяйте абзацы текста друг от друга пустой строкой.
• 4. Используйте тире внутри предложений (-), а не дефис (-). Внутри ВК достаточно поставить два дефиса подряд (--), чтобы получить тире.
• 5. Используйте русские кавычки-ёлочки («»), а не английские кавычки (""). Внутри ВК в ёлочки трансформируются два больше или меньше подряд (<< и >>).
• 6. Разбивайте длинный текст на абзацы.
• 7. Ставьте теги и ссылку на источник в конце поста, а не вначале и не внутри.
• 8. Убирайте http:// и последний слэш (/) в ссылках.

Примеры хорошего оформления постов:

Размеры графики для паблика

Аватар имеет 3 ипостаси. Основная, для списка групп и для ленты новостей. Самая большая, основная, имеет 200 пикселей в ширину и максимум 500 в высоту. То есть загрузить можно картинку и большей высоты, но она будет обрезана. При этом важно учесть ретина-устройства. Сейчас они всё более распространены. Это экраны с повышенной плотностью пикселей и большей четкостью. Поэтому картинку для аватарки нужно готовить двойного размера, 400 в ширину и максимум 1000 в высоту. Лично я предпочитаю создавать квадратные аватарки. Либо не очень большой высоты, для того, чтобы они хорошо сочетались с меню паблика.

Обложка для меню при квадратной аватарке: 604*230, соответственно делать нужно 1208*460.

Формула для расчета высоты вашей обложки меню (если у сообщества заполнен статус и он в одну строку):высота меню = высота аватарки - 50 (100 в ретина версии) точек.

Например, если аватарка у меня 400 в ширину и 675 в высоту, то высота меню будет 675-100=575, а ширина 604.

Обложка статьи может быть любого размера, в принципе. Главное, горизонтальная ориентация. Я использую файлы размером 900*350 и 900*550.

Где заказать графику

1. ВКонтакте, как ни странно. Запрос «дизайн групп» или «дизайн пабликов». Стоит от 1000 рублей, качество низкое.

2. Фриланс-биржи. От 1000 рублей, качество разное. Помните, что дешевое качественным не бывает.

3. Знакомый дизайнер:-)

Как сделать графику самостоятельно

Я предполагаю, что вы не владеете профессиональным ПО (Фотошопом, например), и не являетесь дизайнером. Иначе вы не читали бы этот текст:)

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

Задание

1. Сделайте 1-2 поста с правильным оформлением, Приложите ссылки
2. Сделайте обложку, аватарку и обложку меню. Приложите ссылки.

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

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

Как оформить описание для группы ВКонтакте

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

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

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

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

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

Возникает вопрос, а стоит ли вообще писать описание, если вы сразу планируете закреплять баннер? Можно однозначно сказать, что стоит.

Если вы грамотно вставили в описание вашей группы ВКонтакте ключевые слова , то и Google и Яндекс вполне могут вывести вас в топ поисковой выдачи. Так что пренебрегать описанием сообщества в любом случае не стоит.

Подведем итоги

1. Описание должно быть кратким, содержательным и емким;
2. Оно должно быть читабельным;
3. Описание должно содержать ключевые слова и отражать ваше УТП (уникальное торговое предложение);
4. В описании должны читаться выгоды, интересы и боль вашей целевой аудитории;
5. Не нужно перегружать описание группы ВКонтакте различными украшательствами в виде сердечек и стрелочек — это отвлекает внимание от сути вашего проекта;
6. В описании есть призыв к действию.

А какое описание у вашего сообщества? Если у вас возникли вопросы, то задавайте, не стесняйтесь! Я с радостью отвечу.

Понравилась статья, делитесь с друзьями!

Обсуждение: 8 комментариев

1. Юлия, Вы неплохо справились с описанием группы!)

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

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

Что такое паблик?

Думаю, многим и так понятно, что такое паблик или группа. Однако, что такое группа в продажах? Вот тут уже интересно… Представим на минутку, что Вы в поиске Яндекс ищите товар. Затем Вы попадаете на посадочную страницу — лендинг. Группа ВК – это та же посадочная страница. Только выглядит по-другому и немного отличается. Начнем выявлять ошибки и менять свою группу к совершенству.

Шаг 1: Пишем название группы

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

Здесь вы видите поиск. Вводим ключевой запрос «ремонт телефонов тамбов». Как вы думаете, куда в первую очередь перейдут? Именно! К тому, кто выше всех в поиске. Кроме этого название должно соответствовать запросу.

Даю Вам готовую формулу для написания названии группы.

Название группы = Бренд + Ключевое слово + Регион

Пример: Сотик.ru | Ремонт телефонов в Тамбове

Шаг 2: Пишем правильный статус в группе

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

Например так.

Ремонтируем телефоны и даем гарантию на 2 года. Постоянным клиентам дарим бонусы и подарки.

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

Шаг 3: Рисуем аватарку группы

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

Советы как сделать аватарку лучше:

• Логотип или название бренда обязательно.
• Картинка, которая соответствует Вашему продукту
• Кнопка «подпишись». (Призыв к действию)
• Не более 3-х цветов на одну аватарку.
• Только качественное изображение (5000 х 2000 px).
• Сохраняйте изображение в формате.jpg

Шаг 4: Добавляем фотографии товара или услуги

Все мы визуалы, и привыкли смотреть на товар, с помощью фотографий. Есть товар? Покажите во всей его красе. Разделите товары или услуги по альбомам, под каждым фото напишите описание товара или услуги. Не забудьте прописать цены.

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

Шаг 5: Заполняем товары

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

Шаг 6: Выкладываем посты в паблике

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

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

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

Шаг 7: Раскручиваем группу

Контент наладили, группу оформили, но вот нету клиентов. Ммм… Что же не так? А вы запустили трафик в свой паблик? Приглашали людей? Нет? Так, что же вы сидите. Действуйте! Приглашайте друзей, пишите им и просите вступить в группу. Раскручивайте всевозможными способами. Кидайте ссылку Вконтакте везде где только можно. Но по своему опыту скажу, что платная раскрутка группы рулит. Но это уже .

Заключение

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

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

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

Используются следующие размеры оформления группы Вконтакте:

• Обложка страницы показывается вверху, на всю ширину паблика, размер 1590 х 400 пикселей;
• Большой аватар — вертикальный баннер 200х500 px (соотношение сторон 2:5), показывается справа вверху;
• Маленькая аватарка, круглая картинка, показывается в каждом сообщении группы, размер 200х200 пикселей.
• Изображение меню для группы Вконтакте, ширина 510 пикселей, высота — 307 (чтобы нижний край меню красиво совпадал с низом большой аватары справа).

Если в настройках сообщества загружено изображение обложки, то большой аватар справа не показывается.

Как сделать шапку для группы Вконтакте самостоятельно

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

Открой картинку в графическом редакторе. Обрежь или масштабирую до размера: длина 1590 px, высота 400 px.

Далее можно нанести необходимые надписи (название группы, слоган, призыв вступать в сообщество). Теперь нужно загрузить обложку в сообщество, для этого зайди в пункт меню «Управление сообществом»:

Кликни по надписи «Загрузить» в поле «Обложка сообщества».

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

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

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

Размеры шапки в паблике Вконтакте в новом дизайне

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

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

Процесс оформления меню группы Вконтакте состоит из следующих этапов:

• Подготовка списка ссылок меню (это могут быть страницы, разделы сообщества или внешние сайты).
• Подготовка фоновой картинки.
• Нанесение на фоновое изображение надписей и «кнопок» меню.
• Нарезка изображения на части.
• Включение wiki-страницы.
• Загрузка графического меню и форматирование его wiki-разметкой.

Фоновая картинка должна быть шириной 510 пикселей, а высота зависит от количества и размещения пунктов меню. Для работы с изображениями понадобится растровый графический редактор, ниже показаны примеры с использованием бесплатного и легкого Paint.Net.

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

Вертикальное меню сообщества ВК с пунктами в один столбик

Открой картинку в редакторе. Инструментом редактора «Текст» напиши пункты меню поверх фона. Чтобы надписи меню были заметны, их можно выделить несколькими способами:

• Обвести рамкой;
• Изменить цвет фона под буквами;
• Добавить буквам тень.

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

Следующий шаг — нарезка изображения на части:

Процесс нарезки изображения также можно выполнить с помощью удобного онлайн-инструмента www.imgonline.com.ua/cut-photo-into-pieces.php .

Далее в меню «Управление сообществом» зайди в пункт «Разделы» и в пункте «Материалы» выбери «Ограниченные» (это значит, что страницы создавать и редактировать сможет только администратор группы).

Нажми сохранить и перейди на главную группы. Возле раздела с информацией о группе появился пункт «Свежие новости».

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

Щелкни по добавленной картинке и в окне свойств укажи ссылку на нужный раздел.

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

Каждый тэг изображения начинается «[[» и заканчивается «]]», состоит из трех частей, разделенных знаком «|»: ID изображения, свойства и ссылка. Нужно откорректировать размеры картинок и вставить в их свойства тег «nopadding». Свойства картинок перечисляются через «;».

После сохранения изменений создание меню завершено.

Меню с горизонтальным или многострочным расположением пунктов

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

Правила оформления таблицы:

• Начало обозначается символом «{|», конец таблицы — «|}».
• Дополнительные свойства указываются после «|~»
• Новая строка начинается с «|-».
• Каждая ячейка отделена «|».

Для исключения лишних пробелов нужно указать параметры таблицы «fixed nopadding noborder». Разметка графического меню из 2 столбцов и 2 строк выглядит так:

А само меню в группе:

Размер аватарки группы в новом дизайне для оформления паблика ВК

В сообществах Вконтакте используется два варианта аватарки:

• Большой прямоугольный баннер 200 на 500 точек, показывается справа вверху, если не загружена обложка.
• Миниатюра 200х200 пикселей, показывается в постах и в обсуждениях в виде кружочка.