Содержание

«Вконтакте» добавил меню в сообществах

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

Без настройки это выглядит так:

Большинство восприняли такую идею негативно, и на это есть несколько причин

1. Меню нельзя убрать:

2. Меню всё-таки можно убрать, но…

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

А кто-то воспринял ситуацию с юмором:

3. Из отрицательного отметили и отображение меню:

4. Да и ссылки и подключенные приложения пока (надеемся, что пока) работают некорректно:

Кстати, внешние ссылки указывать нельзя. Но их можно сокращать через vk.cc

5. Меню доступно для веб-версии и приложения. Многие просто не видят меню с телефона:

Но, кажется, мы стали забывать, что есть и положительные моменты!

Вот те, кто уже внедрили обновление:

Дмитрий Фердман сделал обложки в фирменных цветах группы и добавил такие разделы, как:

Группа «SMM Кейсы» использовали картинки с иконками:

Магазин «Royal Philips» решил использовать меню только для товаров, а виджеты они спрятали в конец, чтобы блок был в едином стиле:

Официальная группа смартфонов и телефонов Nokia в России тоже сделала ставку на иконки:

Ресторан «FRANK» использовал обновление так:

Ещё один удачный пример оформления группы – магазин аксессуаров из кожи:

«Forbes» сделал ставку на лаконичность:

Чем-то схоже с меню радио «MAXIMUM»:

«Пятый канал» сделал ещё проще:

А вот пример «РЕН ТВ»:

Чтобы настроить такой раздел, перейдите с компьютера к управлению сообществом и откройте в нём пункт «Меню». Добавлять можно до семи внутренних ссылок VK и загружать собственные обложки для всех элементов.

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

Не забудьте, что размер картинок – 376х256 пикселей. А заголовок имеет ограничение в 20 символов.

А что выбираете вы: убрать меню, жертвуя виджетами, или оставить и оформить?

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

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

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

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

Еще один хороший пример интернет магазина:

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

А вот пример неудачного решения:

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

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

Теперь давайте посмотрим на все это с технической точки зрения.

Создаем меню для группы Вконтакте

Первым делом создадим графический макет будущей менюшки. Для этой цели мы будем использовать программу Photoshop (для простенькой картинки вполне сгодится стандартный Paint). Откройте программу и создайте новый документ:

Я буду создавать картинку размером 500×500 пикселей, однако, в зависимости от количества и расположения разделов размер картинки может быть другим.

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

Затем напишите на фоновой картинке заранее продуманные разделы, кнопки и телефоны. Их мы  в последующем превратим в ссылки:

Для того чтобы разделы превратились в ссылки, картинку нужно разрезать по частям. В этом нам поможет инструмент “раскройка” (Slice Tool):

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

Последним шагом будет разрез объектов. Чтобы это сделать кликните по кнопке “фрагменты по направляющим” (Slices From Guides) на верхней панели инструментов:

Сохраняем каркас для web устройств. Формат картинки ставим JPG, выбираем максимальное качество и сохраняем, например, на рабочий стол:

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

Вывод меню с помощью Wiki разметки

В своей группе зайдите в “управление сообществом” и проверьте, подключен ли раздел “материалы”. Если раздел выключен, то подключите его:

После этого в группе появиться вкладка “свежие новости”. Нажмите на кнопку “редактировать”, Вас перебросит в текстовый редактор:

Вместо стандартного заголовка, пропишите свой, а также включите режим wiki разметки, нажав на пиктограмму ромба:

Теперь откройте группу в новой вкладке и загрузите в фотоальбом заготовленный каркас, а в текстовый редактор вставьте следующий код, столько раз, на сколько частей разбит каркас:

[[photo133337_133701019|370px;nopadding;|page-13333337_13333337]]

[[photo133337_133701019|370px;nopadding;|page-13333337_13333337]]

Вместо значения “photo133337_133701019” нужно вставить ссылку на фотографию

Вместо значения “page-13333337_13333337” нужно вставить ссылку на нужную страницу или раздел группы

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

Ссылку на фото нужно копировать не всю, а только эту часть:

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

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

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


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

Подпишитесь на обновления блога Life-Webmaster.ru и получайте в числе первых новые статьи про создание блога, раскрутку и заработок на нем!

подробное руководство по дизайну сообществ ВК

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

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

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

Актуальные размеры изображений ВК

Рассмотрим каждый элемент подробнее.

Аватар сообщества

200х200 px — минимальный допустимый размер аватарки для групп Вконтакте. При загрузке изображений меньшего размера, сеть выдает ошибку с рекомендациями по исправлению.

Ошибка: изображение меньше 200х200 px

200х500 px — максимальный рекомендуемый размер изображений для аватара. Но при загрузке картинок до 7000 px ошибку не выдает. Лучший вариант — 200х300 px.

Пример

Загружаем изображение размером 200х800 px, с соотношением сторон 2:8. Файл успешно загружается, сайт не выдает никакой ошибки. Но требует выделить активную область изображения, которую и будет видеть пользователь. Здесь возникает проблема: выделить всю картинку нельзя, использовать получиться только область размером 200х500 px. Важно учитывать этот параметр при составлении технического задания для дизайнера.

Соотношение сторон аватара ВК

Прикрепленные изображения

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

Пример

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

Изображение 510х510 px в ленте новостей

Не хуже, но немного по-другому выглядит прямоугольная фотография с шириной 510 px.

Изображение альбомной ориентации с шириной 510 px

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

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

Нельзя назвать это различие критичным, но пользователям мобильного приложения намного привычней видеть фотографии квадратной формы (как в Instagram).

Изображения к публикациям со ссылкой

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

При вставке ссылки в текст поста автоматически подтягивается заголовок и изображение

Информацию о заголовке, фотографию сеть берет из кода разметки Open Graph:

В строке «image» хранится изображение с котиком

При отсутствии информации в коде Open Graph, ВК берет данные из мета-тегов: Title, Description, а в качестве иллюстрации подтягивает первое изображение из статьи. Вы можете легко заменить фотографию, нажав на стрелочки под надписью «Ссылка».

Подбираем иллюстрацию к посту с ссылкой

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

Добавляем собственную иллюстрацию к посту с ссылкой

Как и ко всем другим изображения есть требования к минимальному размеру: 573х240 px. Можно загрузить картинку большего размера, но важно соблюдать рекомендуемые пропорции 2,2:1.

Рекомендуемое соотношение сторон для иллюстрации к посту со ссылкой

Блок с товарами

Минимальный размер изображений для обложки товара 400 px, максимальный — 7000 px по ширине или высоте. Лучше всего выглядят фотографии квадратного размера 1000х1000 px. У каждого товара есть обложка и 3 фотографии, которые показываются при открытии товара.

Блок товаров фитнес-клуба

Вики-страницы

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

Пример

Если добавить на вики-страницу картинку размером 1366х768 px, не скорректировав размер, то изображение некрасиво растянется.

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

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

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

Оформление вики-страниц рассмотрим подробнее чуть ниже.

Как сохранить исходное качество изображений Вконтакте

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

Пример

Сжатие изображение при загрузке в ВК

Как избежать снижения качества?

За рекомендацией пришлось обратиться в поддержку соцсети, т.к. в открытом доступе такой информации нет. Представитель команды посоветовал следовать такому алгоритмы: открыть изображение в программе Photoshop, в меню выбрать команду «Сохранить для Web» — настройки качества 100% — галочка напротив строки «Преобразовать в sRGB».

Сохраняем изображение в Photoshop

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

Пример

Если требуется подготовить аватар группы размером 200х500 px, то размер исходной картинки должен быть около 400х1000 px. Для меню 510х400 px, лучшим вариантом будет исходник 1200х800 px.

Картинка на фоне темно-синего цвета, которую мы использовали чуть раньше, имеет исходный размер 510х350 px. Чтобы добиться лучшего качества, мы увеличили ее размер в два раза, а затем сохранили в Photoshop по совету поддержки. Вот результат:

Выглядит лучше, но не идеально

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

Выглядит намного лучше

Дизайн шапки группы Вконтакте

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

1. Обложка сообщества + закрепленный пост

После обновления дизайна владельцам сообществ стал доступен новый элемент оформления — обложка. Размер изображения — 1590х400 px. Чтобы добавить обложку нужно зайти в настройки группы и нажать «Загрузить».

Загрузка обложки сообщества

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

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

Обложка Сбербанк: информация о ближайшем мероприятии

Закрепленный пост обычно продолжает тему, начатую в обложке. Например, в случае со Сбербанком — рассказывает более подробно о Зеленом Марафоне.

2. Обычное текстовое описание

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

Текстовое описание популярного издания о стартапах – vc.ru

Описание группы клуба Фильм про

3. Текст + хэштеги

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

Описание с хэштегами, журнал WebDesignMagazine

Описание с хэштегами, смартфон Nokia Lumia

4. Описание через вики-страничку

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

Группа предпринимателя, идущего к своей цели

Нажав на кнопку «Просмотреть», пользователь попадает на вики-страничку с подробной информацией о проекте.

Вики-страница с описанием проекта

5. Без шапки

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

Группа без шапки – PSD’ец

Группа с пустым описанием Atmospheric Bass Music

6. Открытое меню

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

Картинка, дублирующая пункты меню

При нажатии пользователь открывает вики-страницу с меню группы:

Кликабельное меню с идентичными разделами

Еще один пример

Кнопки на картинке не кликабельны, а вот при нажатии на «Просмотреть» откроется полноценное меню:

Пример открытого меню

7. Закрытое меню

Закрытое меню отличается тем, что пользователь не видит на картинке его пункты. Обычно на анонсе пишут что-то вроде «Меню», «Навигация», «Все материалы в одном месте» или «Жми сюда».

Закрытое меню Lady’s Club

Меню Motion Hub

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

Пост-меню паблика Мой компьютер

Закрытое меню группы английского языка

Меню интернет-магазина для девушек CosmoMarket

8. Меню слитое с аватаркой

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

Слитное меню сообщества вики-разметки

Меню группы о помаде для увеличения губ

9. Спрятанное меню

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

Бренд одежды Oodji. Чтобы открыть меню, надо нажать на ссылку «Меню группы #oodji»

Само меню

Пример уже открытого меню Спортмастера

10. Изображение

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

Сообщество Лайфхакерша разместило картинку с призывом, но кнопка не клибабельна

Comedy Radio анонсирует запуск приложения

11. Изображение и аватар в едином стиле

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

Империя пиццы и суши информирует о режиме работы, дает контакты для заказа

Coca-Cola использует красивую картинку со слоганом

12. Гифка как продолжение аватара

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

Оригинальная шапка группы Тоталь

13. Автоматически воспроизводимое видео

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

Как сделать, чтобы видео включалось само?

Нужно соблюсти всего лишь 3 условия:

  1. Загрузить нужный ролик через ВК — видео, загруженные через Ютуб или Вимео не включаются автоматически.

  2. Дополнить видео можно только текстом. Прикрепить ссылку или картинку не получится.

  3. После загрузки видео нужно опубликовать на стене, а затем закрепить пост.

Видео с упражнениями в сообществе Лайфхакер

Coca-Cola делится любимыми рекламными видео

13. Популярная запись

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

Страница Рецепты, пост с огромным количеством репостов

Группа Идеи дизайна интерьера закрепили кладезь материалов о ремонте. Посмотрите, сколько репостов и лайков!

14. Действующие акции

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

Сеть баров Killfish рассказывает об акции

Интернет-магазин напоминает о скидках

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

Интерактивный тест от Сбербанка

15. Анонсы мероприятий

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

Группа сериала Теория большого взрыва анонсирует новый сезон

Группа Пилот разместила в шапке график концертов

16. Розыгрыши

Сеть Детский мир разыгрывает запас подгузников

Лотерея Столото дарит Айфон

17. Опросы

Мини-исследование Gillette

Опрос на странице ресторана

18. Объявления

Объявление выделено словом «Важно» на красном фоне

Суши Терра информирует о временных неполадках

19. Вакансии

Ресторан ищет официантов

20. Ссылки на другие соцсети

Инфографика в примерах делится ссылкой на свой профиль в Перископе

Студии Дениса Каплунова ссылается на аккаунт в Пинтересе

21. Продажа товаров/услуг

Группа по оформлению групп «Вконтакте» предлагает свои услуги

Сервис Церебро.Таргет предлагает подключиться

22. Самый популярный продукт

Популярный товар магазина 24shop

23. Отзывы клиентов/покупателей

Отзыв — самый сильный инструмент повышения доверия

Как сделать привлекательный аватар

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

1. Миниатюра

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

Пример неудачных надписей — слишком мелко

Примеры удачных надписей — текст крупный

Лучше, чтобы надпись помещалась внутри миниатюры

Примеры неудачных аватаров — текст не помещается внутри миниатюры

Надпись внутри выглядит опрятней

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

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

Примеры удачных решений — все четко и понятно

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

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

Подбирайте яркие цвета, чтобы миниатюра выделялась на фоне конкурентов. 

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

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

Анти-минимализм — куча картинок, надписей, шум

Стильно и аккуратно

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

Красный огонек как часть аватара

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

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

2. Текст на миниатюре

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

Анонс нового продукта/услуги/события

Анонс нового сезона, коллекции, премьеры всегда привлекает внимание любителей новинок

Ваше УТП

Выберите одно преимущество: круглосуточно, дешево, быстро и т.д.

Контакты

Поможет тем, кто уже готов купить, быстро найти ваш номер

Супер цены

Если у вас крутая цена — пишите ее прямо на миниатюре

Бесплатная доставка

Особенно актуально для ресторанов доставки еды

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

Не стесняйтесь рассказывать о бесплатных услугах

Акции и скидки

-50% выглядит органично и привлекательно

Розыгрыши

Ну как пройти мимо потенциальной халявы?

Вакансии

Соцсети — хороший вариант поиска лояльных сотрудников

Держите в голове вашу цель и портрет ЦА, а вдохновение придет во время работы над оформление группы.

3. Продающий дизайн аватара

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

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

  2. Следуйте единому стилю. Идеально — аватар и меню в фирменном стиле компании. Хорошо — в единой цветовой гамме с пересекающимися элементами. Такое сочетание меню и аватара выглядит эффектно.
  3. Аватар и меню группы Аудиокниги

    Аватар и меню в едином стиле, группа Лучшее

    Знаменитый аватар группы Палата №6 оригинально сочетается с меню


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


  6. Делите аватар на части. Верхняя — под миниатюру, нижняя — под остальную информацию.
  7. Разделенные на части аватары


  8. Добавьте призыв к действию. Нарисуйте стрелочку, указывающую на кнопку «Подписаться» или «Написать сообщение». Не все пользователи знают, что можно писать сообщения группе.
  9. Аватары со стрелочками


  10. Оставьте немного пространства. Слишком большое количество информации воспринимается как шум: мозг не может выделить что-то одно и предпочитает вообще ничего не воспринимать.
  11. Слишком много информации

    Благодаря свободному пространству, информация считывается легче

Важные элементы аватара

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

Адрес сайта

Актуально для интернет-магазинов

Контакты и режим работы

Подойдет доставкам, ресторанам, магазинам

Розыгрыши призов/скидки

Имеет смысл, если акция длится дольше 1-2 недель

Топ-товар или новинка

Или товар, который вы хотите вывести в топ 😉

Условия доставки

Кратко: по всей России, бесплатно, круглосуточно

Дополнительные сервисы

Например, реклама мобильного приложения

УТП

Пишите о своем уникальном торговом преимуществе

Новинки/анонсы

Актуально для кинотеатров, магазинов одежды, музыкальных исполнителей

Официальное сообщество

Если у вас есть значок «официальное сообщество» от ВК — расскажите об этом

Расписание/график

Подойдет для певцов, гастролирующих театров, цирков

Ссылки на другие аккаунты

Лучше, конечно, разместить активную ссылку, но так тоже можно

Подробное описание

То, что не влезло в заголовок: слоган, девиз

Награды

Признанный лидер отрасли? Победитель конкурса? Укажите это!

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

Как объединить аватар и меню

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

  1. Используйте шаблон. Ширина 510 px для меню и 200 px для аватара. Или 1200 px для меню и 400 px для аватара.

  2. Подберите качественное изображение, скачайте его на ваш компьютер. Откройте картинку в программе.

  3. Скопируйте и вставьте в шаблон. Откорректируйте положение картинки так, как собираетесь ее нарезать.
  4. Нанесите эффекты, добавьте надписи и все, что посчитаете нужным.
  5. Чтобы часть изображения, расположенная в месте пробела не исчезала, сдвиньте ее как на гифке: 
  6. Откройте инструмент «Раскройка», затем «Фрагменты по направляющим».   
  7. Уберите лишнее и подкорректируйте изображение.
  8. Сохраните изображение. Файл — Сохранить для Web — 100% качество. 
  9. Найдите изображения на своем компьютере. Обычно все рисунки из Фотошопа сохраняются в отдельной папке. Добавьте аватар и анонс для меню.

Объединенные меню и аватар, сделанные по шаблону из статьи

В шаблоне вы можете изменить высоту аватара. По умолчанию стоит 500 px.

Здесь высота картинки 340 px

Как правильно оформлять картинки для постов в ВК

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

Нетология оформляет посты в едином стиле

Оригинальные посты компании Knorr

Пример сочетание эстетики и функциональность в группе Факт дня

Три разных, но перекликающихся типа постов в группе Интернет-маркетинг от А до Я

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

1. Затемнение/осветление изображения

Делает текст более читаемым за счет контрастности надписи к фону.

Пример из паблика Почему я этого не знал?

Тот же прием в группе Цитаты и статусы

Осветление фона в Adme

Осветление от Павла Деева

2. Контрастная фигура

Надпись размещается на отдельной однотонной фигуре (круг, полоска, треугольник) контрастной по отношению к цвету текста.

Гармоничное изображение

Контраст от Cossa

Brain Academy, хамелеон и синяя полоса

3. Выделение текста построчно

Каждая строка текста выделяет контрастной полоской. Выглядит стильно.

Мудрость от Adme

Бизнес цитаты

4. Нарезка изображений

Одна часть картинки заменяется нейтральным фоном, на котором размещается текст

Правильное образование

Реклама астрологического теста

5. Замутнение

Изображение немного размывается с помощью инструмента «Расфокусировка», а текст остается в фокусе и выглядит более четко.

fishki.net

Автор неизвестен

6. Изображение с нейтральным фоном

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

Пинтерест Милы Корниенко

Хорошо сказано

7. Тень, обводка

Выделите текст с помощью темной тени или белой обводки.

Простые мудрости

1001 мем

fishki.net

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

Где искать изображения хорошего качества?

Используйте сервис бесплатных фотографий — https://www.pexels.com. Вбивайте ключевое слово на английском и смело используйте любое изображение. Авторы не против. Если не нашли подходящее, попробуйте поискать в Гугл или Яндекс. Выставите фильтр по размеру, цвету. Но обязательно проверяйте тип лицензии, чтобы не нарушить авторские права.

Как делать крутые картинки без дизайнера и Фотошопа?

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

1. Fotor.com

Выбирайте раздел Design — крайний справа.

Нужный нам раздел

Выбираем соцсеть для которой будем делать картинку: Инстаграм – квадраты, Фейсбук – прямоугольники.

Есть и другие форматы, но эти два подходят лучше всего

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

Шаблоны с бриллиантом — платные

Вместо фоновой картинки сервиса подставляем свою.

Добавьте свои изображения, нажав на большой значок плюса в правой верхней части экрана.

Вставляем, корректируем размер, пишем свой текст. Если нужно — добавляем логотип.

Редактура текста

Готовое изображение сохраняем на компьютер: нажимаем на значок дискеты — выбирает формат — готово.

Готово! Вы восхитительны.

2. Canva.com

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

Окошко регистрации, Canva

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

Шаблоны для Инстаграм и ВК

Выбираем шаблон поинтересней и удаляем стандартный фон.

Здесь сотни красивейших шаблонов

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

Жмем на Download, выбираем формат и скачиваем

Сохраняем красивую картинку в свои файлы. Всё!

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

Что лучше: прикрепленные изображения или встроенные?

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

Слева – встроенная картинка, справа – загруженная

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

Загруженные изображения на экране Айфон 5

А вот так выглядят встроенные картинки:

Абсолютно нечитаемо

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

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

Пример со страницы Интернет-маркетинг от А до Я

Как использовать вики-разметку в Вконтакте

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

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

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

У социальной сети Вконтакте есть собственный HTML-редактор, позволяющий пользоваться возможностями вики-разметки.

HTML-редактор Вконтакте

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

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

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

Как создать вики-страницу Вконтакте самостоятельно

Чтобы самостоятельно создать вики-страницу Вконтакте, нужно сделать всего три действия:

  1. Скопировать эту ссылку в блокнот или любой текстовый редактор: http://vk.com/pages?oid=-XXX&p=Нaзвание_страницы

  2. Найти ID своей группы, для которой создается страничка, и вставить его вместо XXX в скопированной ссылке. Вместо «Название_страницы» вписать понятное название. Для нашего примера мы впишем «Навигационно меню». В итоге должна получиться ссылка как на картинке. Копируем ее и вставляем в адресную строку браузера.

Ссылка на вики-страницу

3. Нажимаем ввод и переходим к наполнению страницы

Как узнать ID своей группы в Вконтакте

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

Раздел Записи сообщества

ID — это цифры после слова «wall-» и до знака вопроса.

Стрелочка указывает на ID

Более простой способ – установить приложение «Узнать ID». Найдите его в каталоге приложений и добавьте в левое меню для быстрого доступа.

Приложение для поиска ID

Как ограничить права на редактирование

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

Доступ к странице

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

Стандартные настройки доступа

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

Одна из самых безобидных шуток

Как открыть режим кода

Режим кода при создании и редактировании вики-страниц используется чаще всего. Чтобы перейти в него нажмите на значок < > в верхнем правом углу.

Переключение режимов в вики-редакторе ВК

Как форматировать текст

Форматировать текст проще в визуальном режиме. Выглядит как любой другой текстовый редактор. Но есть ограничение — нельзя менять размер шрифта. Что выделить заголовки или важную информацию, используйте теги h2, h3, h4 и курсивное выделение.

Форматируем текст в визуальном режиме

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

Теги форматирования в режиме кода

Как вставить ссылку в текст на вики-странице ВК

Ссылку можно вставить в режиме кода, используя шаблон [ссылка на статью|текст ссылки].

Пример вставки ссылки

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

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

Сокращатель ссылок от ВК

Готово! Теперь ссылка будет открываться в новом окне

Как добавить картинку в вики-страницу

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

Добавляем картинку на вики-страницу

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

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

Загружаем видео на вики-страницу

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

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

Как добавить ссылку на картинку в вике-странице

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

  1. После второго знака | вставить нужную ссылку, предварительно сократив.

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

  3. Проверить размеры изображения: ширина не более 610 px.

Вот что получается в результате

Как создать навигационное меню Вконтакте

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

Как посмотреть код вики-страницы любой группы

Начнем с информации. Перед тем, как приступить к созданию своего меню, найдите примеры, которые нравятся вам, кажутся стильными и удобными. Затем установить приложение «Исходный код страницы». С его помощью можно будет просмотреть код любой вики-страницы, проанализировать его и даже скопировать.

Чтобы посмотреть код, нужно:

  • запустить приложение;

  • выбрать тип сообщества;

  • добавить ссылку на него и нажать «Просмотр»;

  • выбрать интересующую страничку и нажать «Просмотр кода».

Все вики-страницы группы Киномания

По какому принципу создаются меню Вконтакте

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

Меню, созданное за 5 минут

Код этого меню

Вариант немного посложнее:

Меню Motion Hub

Простые меню создаются по следующему принципу: подбираем или создаем картинку с основными пунктами/разделами. Добавляем эту картинку в Фотошоп, делим на части с помощью инструмента «Раскройка». Каждая часть картинки будет выполнять функцию кнопки, ведущей на определенный раздел группы. После раскройки загружаем изображения в редактор вики-страниц и добавляем к каждой части ссылку на какой-либо раздел.

Получается вот так

А вот код этого меню

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

Меню в один столбик

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

Danone и Lady’s club

Danone и Lady’s club — мобильная версия

Код этих страниц

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

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

Меню в два столбика

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

Интересное меню сообщества Книги

А вот как выглядит на мобильном

Рассмотрим код этого типа меню. Обратите внимание на часть под серой полоской.

Код этого меню

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

Меню в два столбика так же просто создать, как меню в один столбик. Главное — подобрать такой размер картинок, который будет отображаться одинаково хорошо в мобильной и десктопной версиях.

Отображение меню в мобильной версии

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

Десктопная версия меню группы Империя кино

Мобильная версия этого же меню

Десктопная версия меню группы Пальчики оближешь

Неправильный перенос этого же меню на мобильниках

А вот пример правильной верстки:

Отображение на компьютерах

На смартфонах

Как адаптировать меню под смартфоны?

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

  1. Использовать табличную верстку с фиксированной шириной ячеек.

  2. Добавлять картинки квадратной или прямоугольной формы с шириной не превышающей 190 px для меню в три столбика, не более 150 px для меню в четыре столбика, не более 110 px для меню в пяти столбиков. Не рекомендуем использовать более пяти столбиков, потому что будет слишком мелко на экранах мобильников.
Как сделать табличную верстку?

Табличная верстка — это способ создания вики-страницы, при котором все элементы верстаются как таблица. Подробную инструкцию можно изучить в официальном руководстве. Рассмотрим лишь суть метода и некоторые примеры.

Для табличной верстки используют специальные теги:

Теги для табличной верстки

Код табличной верстки

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

Десктоп – слева. Мобильная версия – справа

Вот код этого меню в текстовом варианте:

{|fixed nopadding noborder


|~190px 190px 190px


|-


|[[photo258316413_430862279|190px;nopadding| ]]


|[[photo258316413_430862290|190px;nopadding| ]]


|[[photo258316413_430862307|190px;nopadding| ]]


|-


|[[photo258316413_430862332|190px;nopadding| ]]


|[[photo258316413_430862349|190px;nopadding| ]]


|[[photo258316413_430862372|190px;nopadding| ]]


|}

Важно, прописать для каждого столбца таблицы параметр ширины. В примере с тремя столбиками ширина 190 px. Для меню с четырьмя столбиками параметры ширины будут выглядеть так: |~150px 150px 150px 150px.

Теги nopadding и noborder позволяют убрать рамку вокруг изображения и отступы между ними. Если вы планируете создать меню в три столбика, просто скопируйте код из примера, вставьте свои картинки и ссылки.

Адаптивное меню в четыре столбика

Создается практически также как и меню в три столбика. Рассмотрим пошаговый алгоритм.

  1. Выбираем изображение и нарезаем его на квадраты со сторонами по 150 px.
  2. С помощью инструмента «Раскройка»

    Создаем нужное количество квадратиков


  3. Наносим текст, добавляем эффекты и сохраняем как для Web.
  4. Не красоты ради, примера для


  5. Добавляем картинки в вики-страницу, прописываем теги и размеры.
  6. Код меню в четыре столбика


  7. Проверяем, как меню выглядит на компьютере и смартфоне.
  8. Меню на смартфоне

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

  2. Вместо квадратов можно использовать прямоугольники, главное соблюдать рекомендуемую ширину. Учтите, что все картинки должны быть одинаковы по размеру.
  3. Меню группы Стартап Академия

    Все картинки одного размера


  4. Можно использовать разные фигуры, если помнить о размерах.
  5. Меню с разными фигурами

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

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

Метод №1

Используйте браузер Google Chrome. Вставьте адрес вашей вики-страницы в адресную строку и добавьте в его начало m.

Проверяем верстку в мобильной версии

Кликните правой кнопкой мыши в любой части страницы и выберите «Просмотреть код» — «Планшеты и смартфоны».

Смотрим, как выглядит на планшетах и телефонах

Укажите устройство, которое вас интересует:

Выбираем конкретное устройство

Методы №2

Установите плагин для Google Chrome Resolution Test. Перейдите в мобильную версию Вконтакте. Нажмите на иконку и выберите или пропишите размеры экрана, которые вас интересуют.

Проверяем адаптивность

Заключение

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

16 CSS Mobile Menus

Коллекция специально подобранных бесплатных HTML и CSS мобильных меню примеров кода. Обновление коллекции за октябрь 2018 г. 1 новый предмет.

  1. Меню CSS
  2. Круговые меню CSS
  3. Выпадающие меню CSS
  4. Боковые меню CSS
  5. Горизонтальные меню CSS
  6. Полноэкранные меню CSS
  7. Скользящие меню CSS
  8. CSS Переключить меню
  9. Меню CSS вне холста
Автор
  • Джеффри Крофте
О коде

Анимированное мобильное меню

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Мел Шилдс
О коде

CSS Мобильная навигация

На основе «Раскладывающегося меню гамбургеров на чистом CSS» Эрика Тервана.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Стас Мельников
О коде

Анимация мобильного меню

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Кайл Лавери
Сделано с
  • HTML (мопс) / CSS (SCSS) / JavaScript (Babel)
О коде

Концепция мобильного меню

На основе «Идеи веб-навигации для iPhone X» https: // dribbble.com / shots / 3851367-iPhone-X-Web-Navigation-Idea.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • тиффани чунг
О коде

Волшебное мобильное мегаменю

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Сделано с
  • HTML / CSS (SCSS) / JavaScript (Babel)
О коде

Анимированная доступная навигация

Доступное меню навигации с прогрессивным улучшением с круговым анимированным фоном.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Райден Канеда
Сделано с
  • HTML (Haml) / CSS (SCSS) / JavaScript
О коде

Стиль мобильного меню

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Иван Богачев
Сделано с
  • HTML (мопс) / CSS (PostCSS) / JavaScript (Babel)
О коде

Меню с эффектами прокрутки

Меню App Menu с эффектами прокрутки и наведения.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Кирстен Хамфрис
О коде

Мобильное меню

Мобильное меню на чистом CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Мисников Макс
О коде

Мобильная навигация

только CSS мобильная навигация триггер и меню.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Рави Диман
О коде

Навигация на чистом CSS

Навигация на чистом CSS просто и легко

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Сделано на Марсе
Сделано с
  • HTML / CSS (SCSS) / JavaScript
О коде

3 Анимация для мобильной навигации

3 Чистый CSS мобильная навигация анимации.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Нарендра Н Шетти
О коде

Прототип слайдера мобильного меню

Прототип слайдера мобильного меню в HTML, CSS и JavaScript.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Сделано с
  • HTML / CSS (SCSS) / JavaScript
О коде

Навигация по приложению

Концепция навигации мобильного приложения.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Матье Лавуа
Сделано с
  • HTML (мопс) / CSS (SCSS) / JavaScript
О коде

Мобильное меню в стиле Apple

В духе мобильного меню от Apple.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

кодов виртуальных ключей (Winuser.h) — приложения Win32

  • 5 минут на чтение

В этой статье

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

Константа / значение Описание
VK_LBUTTON
0x01
Левая кнопка мыши
VK_RBUTTON
0x02
Правая кнопка мыши
VK_CANCEL
0x03
Обработка прерывания управления
VK_MBUTTON
0x04
Средняя кнопка мыши (трехкнопочная мышь)
VK_XBUTTON1
0x05
X1 кнопка мыши
VK_XBUTTON2
0x06
X2 кнопка мыши
0x07
Не определено
VK_BACK
0x08
Клавиша BACKSPACE
VK_TAB
0x09
клавиша TAB
0x0A-0B
Зарезервировано
VK_CLEAR
0x0C
Ключ CLEAR
VK_RETURN
0x0D
Клавиша ВВОД
0x0E-0F
Не определено
VK_SHIFT
0x10
SHIFT ключ
VK_CONTROL
0x11
Клавиша CTRL
VK_MENU
0x12
Клавиша ALT
VK_PAUSE
0x13
Клавиша ПАУЗА
VK_CAPITAL
0x14
Клавиша CAPS LOCK
VK_KANA
0x15
IME Режим Кана
VK_HANGUEL
0x15
IME Hanguel mode (поддерживается для совместимости; используйте VK_HANGUL )
VK_HANGUL
0x15
IME Режим Hangul
VK_IME_ON
0x16
IME на
VK_JUNJA
0x17
IME режим Junja
VK_FINAL
0x18
Окончательный режим IME
VK_HANJA
0x19
IME Hanja mode
VK_KANJI
0x19
IME Режим кандзи
VK_IME_OFF
0x1A
IME выкл.
VK_ESCAPE
0x1B
Клавиша ESC
VK_CONVERT
0x1C
преобразование IME
VK_NONCONVERT
0x1D
IME неконвертированный
VK_ACCEPT
0x1E
IME принять
VK_MODECHANGE
0x1F
Запрос на изменение режима IME
VK_SPACE
0x20
ПРОБЕЛ
ВК_ПРИОР
0x21
Клавиша PAGE UP
VK_NEXT
0x22
Клавиша СТРАНИЦА ВНИЗ
ВК_ЕНД
0x23
Ключ КОНЕЦ
VK_HOME
0x24
ключ HOME
VK_LEFT
0x25
Клавиша со стрелкой влево
ВК_УП
0x26
Клавиша СТРЕЛКА ВВЕРХ
VK_RIGHT
0x27
Клавиша со СТРЕЛКОЙ ВПРАВО
VK_DOWN
0x28
Клавиша со СТРЕЛКОЙ ВНИЗ
VK_SELECT
0x29
Клавиша ВЫБОР
VK_PRINT
0x2A
PRINT ключ
VK_EXECUTE
0x2B
Клавиша EXECUTE
VK_SNAPSHOT
0x2C
Клавиша ЭКРАНА ПЕЧАТИ
VK_INSERT
0x2D
INS ключ
VK_DELETE
0x2E
Клавиша DEL
VK_HELP
0x2F
Клавиша СПРАВКИ
0x30
0 ключ
0x31
1 ключ
0x32
2 ключа
0x33
3 ключа
0x34
4 ключа
0x35
5 ключей
0x36
6 клавиш
0x37
7 клавиш
0x38
8 клавиш
0x39
9 клавиш
0x3A-40
Не определено
0x41
Ключ
0x42
B ключ
0x43
C ключ
0x44
D-образный ключ
0x45
E ключ
0x46
F ключ
0x47
Шпонка G
0x48
H ключ
0x49
I ключ
0x4A
J ключ
0x4B
K ключ
0x4C
L ключ
0x4D
M ключ
0x4E
N ключ
0x4F
Шпонка
0x50
P ключ
0x51
Q ключ
0x52
R ключ
0x53
S ключ
0x54
Т-образная шпонка
0x55
U-образная шпонка
0x56
Ключ V
0x57
W ключ
0x58
X ключ
0x59
Y-образная шпонка
0x5A
Z ключ
VK_LWIN
0x5B
Левая клавиша Windows (обычная клавиатура)
VK_RWIN
0x5C
Правая клавиша Windows (естественная клавиатура)
VK_APPS
0x5D
Клавиша приложений (естественная клавиатура)
0x5E
Зарезервировано
VK_SLEEP
0x5F
Клавиша спящего режима компьютера
VK_NUMPAD0
0x60
Цифровая клавиатура Клавиша 0
VK_NUMPAD1
0x61
Цифровая клавиатура 1 клавиша
VK_NUMPAD2
0x62
Цифровая клавиатура 2 клавиши
VK_NUMPAD3
0x63
Цифровая клавиатура 3 клавиши
VK_NUMPAD4
0x64
Цифровая клавиатура 4 клавиши
VK_NUMPAD5
0x65
Цифровая клавиатура 5 клавиш
VK_NUMPAD6
0x66
Цифровая клавиатура 6 клавиш
VK_NUMPAD7
0x67
Цифровая клавиатура 7 клавиш
VK_NUMPAD8
0x68
Цифровая клавиатура 8 клавиш
VK_NUMPAD9
0x69
Цифровая клавиатура 9 клавиш
VK_MULTIPLY
0x6A
Ключ умножения
VK_ADD
0x6B
Добавить ключ
VK_SEPARATOR
0x6C
Разделительный ключ
VK_SUBTRACT
0x6D
Клавиша вычитания
VK_DECIMAL
0x6E
Десятичный ключ
VK_DIVIDE
0x6F
Разделительный ключ
VK_F1
0x70
Клавиша F1
VK_F2
0x71
Клавиша F2
VK_F3
0x72
Клавиша F3
VK_F4
0x73
Клавиша F4
VK_F5
0x74
Клавиша F5
VK_F6
0x75
Клавиша F6
VK_F7
0x76
Клавиша F7
VK_F8
0x77
Клавиша F8
VK_F9
0x78
Клавиша F9
VK_F10
0x79
Клавиша F10
VK_F11
0x7A
Клавиша F11
VK_F12
0x7B
Клавиша F12
VK_F13
0x7C
Клавиша F13
VK_F14
0x7D
Клавиша F14
VK_F15
0x7E
Клавиша F15
VK_F16
0x7F
Клавиша F16
VK_F17
0x80
Клавиша F17
VK_F18
0x81
Клавиша F18
VK_F19
0x82
Клавиша F19
VK_F20
0x83
Клавиша F20
VK_F21
0x84
Клавиша F21
VK_F22
0x85
Клавиша F22
VK_F23
0x86
Клавиша F23
VK_F24
0x87
Клавиша F24
0x88-8F
Не назначен
VK_NUMLOCK
0x90
Клавиша NUM LOCK
VK_SCROLL
0x91
Клавиша SCROLL LOCK
0x92-96
Специально для OEM
0x97-9F
Не назначен
VK_LSHIFT
0xA0
Левая клавиша SHIFT
VK_RSHIFT
0xA1
Правая клавиша SHIFT
VK_LCONTROL
0xA2
Левая клавиша CONTROL
VK_RCONTROL
0xA3
Правый ключ управления
VK_LMENU
0xA4
Левая клавиша МЕНЮ
VK_RMENU
0xA5
Правая клавиша МЕНЮ
VK_BROWSER_BACK
0xA6
Клавиша возврата в браузере
VK_BROWSER_FORWARD
0xA7
Клавиша перехода вперед в браузере
VK_BROWSER_REFRESH
0xA8
Клавиша обновления браузера
VK_BROWSER_STOP
0xA9
Клавиша остановки браузера
VK_BROWSER_SEARCH
0xAA
Клавиша поиска в браузере
VK_BROWSER_FAVORITES
0xAB
Клавиша избранного в браузере
VK_BROWSER_HOME
0xAC
Клавиша «Пуск» и «Домой» в браузере
VK_VOLUME_MUTE
0xAD
Клавиша отключения звука
VK_VOLUME_DOWN
0xAE
Клавиша уменьшения громкости
VK_VOLUME_UP
0xAF
Клавиша увеличения громкости
VK_MEDIA_NEXT_TRACK
0xB0
Клавиша следующей дорожки
VK_MEDIA_PREV_TRACK
0xB1
Клавиша предыдущей дорожки
VK_MEDIA_STOP
0xB2
Клавиша Stop Media
VK_MEDIA_PLAY_PAUSE
0xB3
Клавиша воспроизведения / паузы
VK_LAUNCH_MAIL
0xB4
Клавиша запуска почты
VK_LAUNCH_MEDIA_SELECT
0xB5
Клавиша Select Media
VK_LAUNCH_APP1
0xB6
Клавиша запуска приложения 1
VK_LAUNCH_APP2
0xB7
Клавиша запуска приложения 2
0xB8-B9
Зарезервировано
VK_OEM_1
0xBA
Используется для разных символов; он может варьироваться в зависимости от клавиатуры.
Для стандартной клавиатуры США клавиша ‘;:’
VK_OEM_PLUS
0xBB
Для любой страны / региона клавиша «+»
VK_OEM_COMMA
0xBC
Для любой страны / региона клавиша ‘,’
VK_OEM_MINUS
0xBD
Для любой страны / региона клавиша ‘-‘
VK_OEM_PERIOD
0xBE
Для любой страны / региона расширение ‘.’ключ
VK_OEM_2
0xBF
Используется для разных символов; он может варьироваться в зависимости от клавиатуры.
Для стандартной клавиатуры США «/?» ключ
VK_OEM_3
0xC0
Используется для разных символов; он может варьироваться в зависимости от клавиатуры.
Для стандартной клавиатуры США клавиша » ~ ‘
0xC1-D7
Зарезервировано
0xD8-DA
Не назначен
VK_OEM_4
0xDB
Используется для разных символов; он может варьироваться в зависимости от клавиатуры.
Для стандартной клавиатуры США клавиша ‘[{‘
VK_OEM_5
0xDC
Используется для разных символов; он может варьироваться в зависимости от клавиатуры.
Для стандартной клавиатуры США символ ‘\ |’ ключ
VK_OEM_6
0xDD
Используется для разных символов; он может варьироваться в зависимости от клавиатуры.
Для стандартной клавиатуры США — клавиша ‘]}’
VK_OEM_7
0xDE
Используется для разных символов; он может варьироваться в зависимости от клавиатуры.
Для стандартной клавиатуры США — клавиша одинарной / двойной кавычки
VK_OEM_8
0xDF
Используется для разных символов; он может варьироваться в зависимости от клавиатуры.
0xE0
Зарезервировано
0xE1
Специально для OEM
VK_OEM_102
0xE2
Клавиша с угловой скобкой или обратная косая черта на 102-клавишной клавиатуре RT
0xE3-E4
Специально для OEM
VK_PROCESSKEY
0xE5
Клавиша ПРОЦЕССА IME
0xE6
Специально для OEM
VK_PACKET
0xE7
Используется для передачи символов Юникода, как если бы они были нажатиями клавиш.Клавиша VK_PACKET — это младшее слово 32-битного значения виртуального ключа, используемого для методов ввода без клавиатуры. Для получения дополнительной информации см. Примечание в KEYBDINPUT , SendInput , WM_KEYDOWN и WM_KEYUP
0xE8
Не назначен
0xE9-F5
Специально для OEM
VK_ATTN
0xF6
Ключ Attn
VK_CRSEL
0xF7
CrSel ключ
VK_EXSEL
0xF8
Ключ ExSel
VK_EREOF
0xF9
Клавиша удаления EOF
VK_PLAY
0xFA
Клавиша воспроизведения
VK_ZOOM
0xFB
Клавиша масштабирования
VK_NONAME
0xFC
Зарезервировано
VK_PA1
0xFD
PA1 ключ
VK_OEM_CLEAR
0xFE
Клавиша очистки

Требования

Минимальный поддерживаемый клиент Windows 2000 Professional [только настольные приложения]
Минимальный поддерживаемый сервер Windows 2000 Server [только настольные приложения]
Заголовок
Winuser.ч

Как создать меню с SubMenu, используя CSS / HTML

Введение:

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

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

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

    и

  • и создавать параметры меню.

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

    Листинг 1: Скрипт вертикального меню и подменю

    
    
     Пример меню HTML 
    
    
    
    • Новости
      • Национальные новости
      • Международные новости
      • Новости спорта
      • Новости Голливуда
    • Технологии
      • ИТ / программное обеспечение
      • Аппаратное обеспечение
      • Iphone
      • Neuro-Science
    • Спорт
      • Крикет
      • Тенис
      • Бадминтон
      • Хоккей
    • Contry
      • Индия
      • Шри-Ланка
      • Бангладеш
      • Англия

    Рисунок 1: На рисунке выше показано простое меню с подменю, созданным тегом div, которое содержит четыре главных меню и 16 подменю (по 4 подменю для каждого главного меню), и мы использовали стандартный HTML в качестве основы.В этом примере мы можем удалить маркеры, поля и отступы из списка.

    Горизонтальное меню:

    Следующий раздел содержит описание линейного меню (горизонтального меню). Если элементы «li» будут отображаться как встроенные элементы, это заставляет список располагаться в одной строке. Элемент ul имеет полную ширину, а каждая гиперссылка в списке имеет ширину 7 пикселей. Также мы добавили несколько цветов, чтобы сделать его интерактивным

    Листинг 2: Скрипт горизонтального меню и подменю

    
    
     Пример меню HTML 
    
    
    
    
    
    
     

    Рисунок 2: На рисунке вверху показан простой горизонтальный пункт меню.

    Подменю / выпадающее меню по горизонтали Главное меню:

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

    Листинг 3: Сценарий для подменю / выпадающего меню

    
    
     Пример меню HTML 
    
    
    
    
    
    
      

    Рисунок 3 : Меню готово

    Вывод:

    Это руководство охватывает базовые знания о меню CSS.