Вк размеры меню: Размеры для ВК: обложки, меню, баннеры, реклама | Александра Цыкунова

Еще одна рекомендация для картинок — не пишите на них слова «лайк», «репосты» и прочее, что теоретически можно отнести к накруткам. Алгоритмы ВКонтакте борются с лайко-попрошайками и занижают охват таких постов. Об этом говорит эксперимент Церебро Таргет: два одинаковых поста получили разный охват подписчиков, на одном из них был замазан «лайк»:

Товары

Размеры: не меньше 600 px.

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

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

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

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

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

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

Если вы хотите знать больше о ведении групп в социальных сетях, вам может быть интересны другие наши статьи из цикла SMM:

Основы SMM. Часть 1: Создаем коммерческий аккаунт

Основы SMM. Часть 2: Составляем контент-план на примерах и шаблонах

Основы SMM. Часть 3: Обратная связь в группе

Основы SMM. Часть 4: Сервисы для общения с подписчиками в соцсетях

Размеры оформления контента ВКонтакте — CheckROI

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

Размеры для сообщества (группы) ВКонтакте

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

• • Аватарка. Максимальный размер картинки ВКонтакте для аватара — 200х500 пикселей, для миниатюры — 200х200 пикселей. При загрузке файла большего разрешения, отобразится только его часть. Миниатюра выбирается из фрагмента аватара. Полный размер можно увидеть, кликнув по аватарке. Допустимые форматы фото JPG, GIF или PNG.
    При наличии обложки группы будет отображаться только миниатюра аватара. В мобильной версии, с обложкой или без, отображается только миниатюра.

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

• Обложка (шапка) группы. В полной (компьютерной) версии сайта размер шапки группы Вконтакте составляет 1590х400 пикселей. Выберите нужный фрагмент, при загрузке картинки большего параметра.

В мобильной версии ВК обложка обрезается по бокам на 197 пикселей. Размер видимой части обложки ВК составляет 1196х400. При создании шапки учитывайте зону отображения элементов приложения (боковые кнопки, индикаторы устройства). Размер зоны занимает 83 пикселя сверху и по 140 пикселей с боков.

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

1. От 1 до 5 изображений, размером 1080х1920 пикселей. Смена картинок происходит автоматически. Доступна функция автоувеличения.
2. От 1 до 5 видеороликов, размером 1080х1920 пикселей. Файлы загружаются в формате MP4 (видеокодек H.264, аудиокодек AAC), размером не более 30Мб и продолжительностью до 30 секунд. Смена роликов происходит в автоматическом режиме.

Важно! «Живые» обложки отображаются только в мобильных приложениях.

• Свёрнутая обложка — отображается при входе в группу.
• Развёрнутая обложка — отображается после клика по свёрнутой обложке.

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

• Изображения для записей ВКонтакте. Они бывают двух видов:
  • Квадратные — минимальный размер 510х510 пикселей.
  • Прямоугольные — минимальный размер высоты 510 пикселей, соотношение сторон 3:2.

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

Видеозаписи. Рекомендованный размер для загрузки роликов — 1280х720 пикселей (HD качество). Увеличение или уменьшение параметров видео отразится на чёткости отображения. Размер файла не должен превышать 5Гб.

Допустимые форматы для загрузки — AVI, MP4, 3GP, MPEG, MOV, FLV, WMV.

Размеры меню сообщества. Оптимальный размер картинки меню — 376х256 пикселей. Текст меню не должен превышать 19 символов.

Размер обложки для статей

Рекомендуемый размер — 510х286 пикселей. Учитывайте, что часть изображения будет закрыта текстом (название, автор статьи), кнопками «Читать» и «Сохранить в закладках».

Размеры для витрины товаров

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

Размеры для историй

Для историй используйте рекомендованные значения:

• Изображения — размер фотографий 1080х1920 пикселей.
• Видео — размер роликов 720х1080 пикселей. Продолжительность видео 15 секунд, а размер не более 10Мб. Формат загружаемого файла MP4 (видеокодек H.264, аудиокодек AAC).

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

Обложка фотоальбома

Рекомендуемый размер обложки ВК — 1200х800 пикселей. Учитывайте, что внизу будет отображено название альбома и количество фотографий.

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

Размеры Сниппетов

Сниппет — специальный блок, добавленный к записи и содержащий ссылку на внешние ресурсы. Рекомендуемый размер — 537х240 пикселей.

Переход по ссылке осуществляется кликом по картинке.

Размеры рекламных баннеров

Тизеры — рекламные блоки, расположенные с левой стороны под основным меню ВКонтакте. По размерам делятся на:

• Большой тизер — 145х165 пикселей
• Маленький тизер — 145х85 пикселей

Промопост с кнопкой — то же, что и сниппет (537х240 пикселей).

Промопост-баннер — используется тот же формат изображения, что и для записи сообщества.

Размеры баннеров для промо-постов Вконтакте

Карусель

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

Рекомендация по загрузке изображений

Для загрузки фото используйте Flash-загрузчик. С его помощью можно сохранить большое количество фото в альбом и ускорить этот процесс. При неправильном выборе размера фото его качество может пострадать. Это происходит потому, что слишком большие иллюстрации (5000×3000 пикселей) сжимаются и после загрузки выглядят размытыми. Если наоборот, картинка небольшая (1920×1080 пикселей) резкость может повыситься. Чтобы избежать такого эффекта, используйте фото, разрешение которого не превышает 1280х1024 пикселей. Это оптимальный размер, который не изменяется ВКонтактом после загрузки.

Оформление группы ВКонтакте

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

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

Размер – это главное

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

Так выглядит оформление группы SMMplanner с учетом минимальных размеров изображений:

Первое, что стоит сделать в сообществе – баннер. Большая яркая картинка привлечет внимание пользователя и будет источником самой важной информации о вас. Размеры различаются для десктопной и мобильной версии: это 1590 на 400 px и 1196 на 400 px соответственно. Со смартфонов люди увидят только центральную часть картинки.

Недавняя опция в VK – это живой баннер (видео или анимация). Его параметры – 1080 на 1920 full HD, а вес не должен превышать 30 МБ.

Аватар в современном VK всегда круглый. Минимальный размер – 200 на 200 px. Если очень хочется, можно сделать вертикальный аватар (в соотношении 200 на 500 px), но его увидят лишь те, кто кликнет на картинку для просмотра. Уверена, вы сами не имеете привычки кликать на авы коммерческих сообществ, так что эта опция почти бесполезная.

Далее пользователь столкнется с меню. Если сделать полноценную страницу с вики-разметкой, можно вдоволь креативить с с картинками в любых пропорциях при ширине 510 px. Но с недавнего времени можно создать и упрощенный вариант – со ссылками на приложения. Минимальный размер обложки для каждой ссылки – 376 на 256 px.

Виджеты могут иметь разные пропорции. Самые популярные варианты: вертикальные картинки 500 на 750 px, квадраты 500 на 500 px или баннер 1000 на 251 px.

Другая важная часть коммерческого сообщества – товары, они всегда квадратные. Минимальный размер 400 на 400 px, максимальный – 1000 на 1000 px.

Иногда обложки фотоальбомов, статей и видео тоже становятся частью оформления. Для видео в VK оптимальный размер 1280 на 720 px. Для обложки альбома – 1200 на 800 px, в мобильной версии снизу будет обрезано 200 px от исходной картинки. Для заглавного изображения в статье нужен размер не меньше 510 на 286 px.

Для постов оптимальная ширина 510 px, а пропорции могут варьироваться. Наиболее удачными считаются квадраты или горизонтальные прямоугольники 2:3.

Что еще нужно учесть?

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

Подумайте о практичности

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

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

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

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

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

Пишите разборчиво

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

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

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

Сделайте дизайн единообразным

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

Первый важный фактор для единообразия оформления – это цвет.

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

Иногда в оформлении меню, ссылок и постов повторяются элементы логотипа. Вот так:

Полезные сервисы

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

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

Еще несколько ссылок вам в помощь:

• Unsplash, Pixabay, Pexels – мои любимые бесплатные фотостоки, тут можно найти иллюстрации или текстуры для оформления группы.
• FontStorage – хранилище бесплатных шрифтов. Перед скачиванием убедитесь, что в наличии есть кириллическая версия.
• Наш сервис отложенного постинга: в одном месте вы сможете создавать, редактировать и планировать публикации для всех соцсетей.

создание шапки, аватара, меню и вики-разметки — Digital-агентство S1

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

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

1.Размер аватара ВК

• Минимальный размер аватара – 200 на 200 пикселей.
• Максимальный размер аватара – 200 на 500 пикселей. Но, в принципе, можно загружать изображения и большего размера – до 7000 пикселей с каждой стороны. Главное, чтобы соотношение их сторон не превышало 2 к 5.
  

2. Обложка

• Размер обложки для полной версии сайта — 1590 на 400 пикселей.
• Обратите внимание: в мобильной версии и приложениях отображается не полная версия обложки, а только ее часть размером 1196 на 400 пикселей, поэтому располагайте основные элементы вашей обложки в пределах 1196 на 400 пикселей.

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

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

4. Изображения к постам со ссылкой

• Изображения к постам со ссылкой – это изображения, которые автоматически «подтягиваются» к посту, когда вы вставляете в него ссылку.
• Минимальный размер изображения, которое вы можете использовать в качестве анонса к вашей статье, – 537 на 240 пикселей. Однако вы можете загружать и более крупные изображения, если будет соблюдена пропорция.

5. Картинка для статьи, созданной в редакторе

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

6. Размер фото и видео для историй

Размер для фотографий — 1080 на 1920 пикселей. Размер для видео — 720 на 1280 пикселей.

Технические характеристики для видеозаписей:

• до 15 секунд;
• не больше 5 МБ;
• кодек h.264;
• звук AAC.

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

7.Размер обложки для фотоальбома

Рекомендуемый размер изображения для обложки альбома — 1200 на 800 пикселей. Учитывайте, что в мобильной версии нижняя часть обложки будет отображаться меньше на 200 пикселей.

8. Размер картинки для видео

Размер картинки для видео составляет 1280 на 720 пикселей.

9. Вики-страница

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

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

1.Обложка

Не так давно «ВКонтакте» ввели обновление – теперь на страницы можно загружать большие и красивые обложки (1590 на 400 пикселей). Чтобы сделать это, перейдите в настройки и нажмите кнопку «Загрузить».

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

2. Живые обложки «ВКонтакте»

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

Как добавить? Зайдите через браузер сообщество, нажимаете «Упаравление», выбираете «Добавить обложку» и загружаете до 5 видео/картинок. Если не хотите, чтобы во время показа слайдов обложки масштабировались, то отключите опцию «Показывать фотографии в движении». Рекомендуемое разрешение 1080×1920, вес видео до 20 МБ, длительность – до 30 секунд.

3. Обложка + описание сообщества + ссылка на сайт

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

4. Описание с хэштегами

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

5. Закрепленный пост, рассказывающий, о чем страница

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

6. Новое меню ссылок

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

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

7. Меню группы открытое

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

8. Меню группы закрытое

Закрытое меню – это тот же самый вики-пост, как и в предыдущем пункте, только на анонсе стоит картинка, на которой нет пунктов меню. Обычно на ней пишут: «Меню», «Навигационное меню» или «Навигация по материалам паблика».

9. Слитное меню для группы

Слитное меню – это когда картинка на анонсе вашего меню составляет с аватаром одно изображение. 

10. Гифка и аватар одним изображением

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

11. Скрытое меню

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

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

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

Для этого нужно выполнить три условия:

• Прикрепить ролик к записи и закрепить эту запись вверху сообщества.
• Кроме ролика, к записи больше ничего не должно быть прикреплено. Только видео и текст по желанию.
• Видео должно быть загружено «ВКонтакте» – сторонние плееры не поддерживаются.

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

Миниатюра аватара

1. Текст на миниатюре аватара должен быть достаточно крупным, чтобы его можно было прочитать.
2. Текст не должен выходить за пределы миниатюры.
3. Пользователям должно быть понятно, что изображено на аватарке.
4. По возможности лучше не использовать стоковые изображение, т. к. они часто понижают доверие к компании.
5. Нежелательно, чтобы миниатюра аватара была слишком блеклой и скучной, иначе она будет теряться на фоне более ярких аватарок конкурентов.
6. Если вы хотите, чтобы ваша аватарка выглядела современно, сделайте ее в стиле минимализм: поменьше текста, теней, градиентов и не несущих никакой смысловой нагрузки элементов. Ваша аватарка должна быть максимально простой и аккуратной. Этот стиль сейчас в тренде.
7. Если перед вами стоит цель привлечь внимание пользователей и выделиться на фоне других аватарок в ленте, придется включить фантазию. Подумайте, на что вы сами обращаете внимание, когда ищете интересные сообщества?

Каким должен быть сам аватар?

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

1. Аватар должен быть качественным. О том, как этого добиться, я писала чуть выше. Для тех, кто пропустил эту часть, скажу вкратце – размер аватара должен быть в 2–3 раза больше того, что вы запланировали.
2. Желательно, чтобы аватар сочетался с меню: был такой же цветовой гаммы, имел те же самые шрифты, элементы и т. д. Благодаря этому шапка вашей страницы будет выглядеть более аккуратно и профессионально.
3. Сам аватар и миниатюра аватара могут быть разными. Например, вы можете нарисовать на аватаре круг, оформить его так, как вам нравится, выбрать эту область в качестве миниатюры, а остальную часть аватара выполнить в другом стиле.
4. Для того чтобы побудить пользователей подписаться на вашу страницу или написать сообщение представителю компании, вы можете разместить в самом низу аватарки соответствующий призыв к действию и сопроводить его указывающей на кнопку стрелочкой.
5. Старайтесь не размещать на аватаре слишком много информации, иначе он будет смотреться перегруженным и неопрятным. Добавьте на него только самые важные пункты и обязательно убедитесь, что между ними есть «воздух».

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

Точно также как у WordPress (или любой другой CMS) есть HTML-редактор, с помощью которого вы создаете статьи, так и у «Контакта» есть свой редактор для создания и редактирования вики-страниц.

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

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

1. Скопировать в адресную строку своего браузера вот такую ссылку: http://vk.com/pages?oid=-XXX&p=Нaзвание_страницы
2. Вместо ХХХ вписать ID своей страницы, а вместо фразы «Название_страницы» – заголовок статьи (на русском или на английском, разделяя слова нижним подчеркиванием).

Как закрыть доступ к редактированию страницы

У каждой вики-страницы есть настройки доступа. Находятся они в нижнем левом углу редактора.

Как перейти в режим кода

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

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

Текст вики-страницы, в основном, форматируется с помощью редактора. Интерфейс практически такой же, как в ворде, поэтому, думаю, объяснять здесь почти нечего. Единственное, что стоит сказать, – на вики-странице нельзя изменить размер шрифта. Вместо этого необходимо использовать теги h2, h3, h4, выделение жирным или курсивом.

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

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

Если ссылка ведет на внешний сайт, она автоматически открывается в новом окне. Но если она ведет на одну из страниц «ВКонтакте» – она будет открываться в том же окне, даже несмотря на то, что зачастую это оказывается очень неудобно.

Так как же сделать так, чтобы ссылка открывалась в новом окне?

Есть очень простой способ – «сокращатель ссылок вк». Получите короткий вариант вашей ссылки и вставьте в вики-пост. После этого она будет всегда открываться в новом окне.

Чтобы добавить изображение, необходимо воспользоваться иконкой в виде фотоаппарата. Я рекомендую вам это делать сразу в режиме кода, т. к. при загрузке изображений «Контакт» почему-то всегда выравнивает их посередине и делает размером 400 пикселей в ширину (хотя оригинал может быть больше), и в любом случае приходится лезть в код и прописывать нужные размеры. А так можно сэкономить время.

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

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

1. Вставить после второго знака | ссылку на ваше видео: либо на YouTube или другой сторонний видеохостинг, либо на видео из самого «Контакта». Но лучше, конечно, чтобы пользователь не покидал социальной сети. Так ему будет удобней.
2. Сделать выравнивание (посередине, слева или справа).
3. Указать реальный размер картинки (помните: ее ширина не должна превышать 610 пикселей).

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

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

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

Порядок действий таков:

• Создайте меню с помощью вики-разметки. Сохраните ссылку, по которой оно доступно.
• Вставьте ссылку в новый пост.
• Подготовьте изображение для вашего меню.
• Добавьте изображение к посту, уберите ссылку из поля для ввода текста и нажмите «Отправить».
• Закрепите пост.

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

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

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

1. Использовать табличную верстку с фиксированной шириной ячеек.
2. Разрезать меню на одинаковые квадраты или прямоугольники шириной не более 190 пикселей (если 3 столбца), 150 пикселей (если 4 столбца) и 110 пикселей (если 5 столбцов). Больше столбцов, как мне кажется, смысла делать нет, т. к. на мобильных они будут смотреться очень и очень мелко.

Табличная верстка – это когда все элементы меню верстаются как таблица. Очень подробно о том, как создавать таблицы с помощью вики-разметки.

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

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

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

Анна Борисенко
Маркетолог S1

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

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

Каждый день во «ВКонтакте» заходит в среднем 23 миллиона пользователей. Vk.com — это самый популярный адрес у российских пользователей после поисковика «Яндекс». За пользователями туда приходит и бизнес. Поэтому за последние пару лет администрация сети добавила с десяток крутых функций для развития бренда в ВК: виджеты, статьи, сторис, меню сообщества.

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

Аватар

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

ВКонтакте

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

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

Минимальный размер аватара — 200 на 200 пикселей. Но лучше загружать картинку в 2 раза больше — так вы сохраните качество изображений при сжатии.

Максимальный размер логотипа — до 7000 пикселей каждая сторона. При этом соотношение сторон не больше, чем 5:2, то есть картинка шириной в 200 пикселей должна быть не больше 500 пикселей в высоту, иначе редактор предложит ее обрезать.

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

2. Поместите на аватар название сайта или проекта

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

ВКонтакте

В редакторе Canva вы легко сможете сделать идеальный аватар для своего проекта. Нажимайте «Использовать этот шаблон», если вам понравился какой-то вариант.

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

3. Без лишних слов! Иногда достаточно простого логотипа

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

ВКонтакте

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

4. Сочетая цвета, сохраняйте гармонию

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

5. Иногда достаточно просто картинки по теме вашей группы ВК

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

ВКонтакте

6. Продвигаете личный бренд? Поставьте на аватар свою фотографию

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

ВКонтакте

Обложка

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

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

ВКонтакте

7. Создавайте дизайн обложки в правильном размере

Администрация «Вконтакте» рекомендует загружать изображения размером 1590 на 400 пикселей.

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

Обложки групп Sony Pictures и HeadHunter с компьютера

Обложки групп Sony Pictures и HeadHunter с компьютера

8. Примеры однотонной обложки ВК

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

ВКонтакте

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

Еще один из простых и распространенных вариантов обложки. Администраторы сообщества Вергилий выбрали для обложки картину Сандро Боттичелли «Рождение Венеры», а НИУ ВШЭ—НН — картинку из фотостока с изображением нейронных связей. Рекомендуем прочитать нашу статью «42 необычных сайта со стоковыми фото и бесплатными картинками».

ВКонтакте

ВКонтакте

10. Разместите свой слоган на обложке

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

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

11. Для анонсов используйте отдельные обложки ВК

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

ВКонтакте

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

12. Добавьте интерактива на обложку ВК

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

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

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

13. Удивите подписчиков анимированной обложкой

Живая обложка — это новый способ оформления группы «Вконтакте», нарезка из фото и видео без звука, которые сменяют друг друга. При этом «ВКонтакте» анимирует фото: они как бы наплывают на пользователя. А если нажать на них — они раскроются на весь экран, как сторис. Пример — из сообщества Cropp Russia.

Живая обложка группы Cropp Russia Живая обложка напоминает Актуальное в Инстаграме с той разницей, что разместить на ней можно не больше 5 объектов, а посмотреть — только с мобильного телефона. С компьютера пользователь увидит обычную обложку-картинку, которую нужно настроить отдельно. Например, так выглядят обложки российского сообщества Ikea и сети пиццерий Додо Пицца с компьютера.

Обложки групп российского сообщества Ikea и сети пиццерий Додо Пицца с компьютера

Обложки групп российского сообщества Ikea и сети пиццерий Додо Пицца с компьютера

А вот так — с мобильного телефона.

Живые обложки групп российского сообщества Ikea и сети пиццерий Додо Пицца с телефона

Живые обложки групп российского сообщества Ikea и сети пиццерий Додо Пицца с телефона

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

ВКонтакте

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

14. Настройте кнопки действия

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

ВКонтакте

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

ВКонтакте

Обложки — это инструмент, который поможет вам продать товар или услугу, поэтому используйте его по полной. Если у вас проходит акция, разместите предложение заказать продукт с 20% скидкой и выберите кнопку действия «Заказать», «Перейти на сайт» или «Подробнее».

ВКонтакте

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

ВКонтакте

Меню

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

Если раньше меню делали из инструментов разметки, то теперь достаточно открыть пункт «Меню» в настройках и добавить ссылку на нужный объект и картинку размером 376 на 256 пикселей. Готово! Чтобы впечатлить своим меню, попробуйте составить из него цельную композицию с помощью шаблонов Canva.

15. Оформите меню в цветах своего бренда

Подберите картинки или разместите иллюстрация на фоне в основных цветах вашего бренда. Посмотрите пример от AliExpress — меню гармонирует с общим оформлением группы ВК.

ВКонтакте

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

В сообществе Samsung не стали делать меню в цветах бренда (слишком много черного), но все-таки сохранили строгость в оформлении. Вы можете сделать похожее меню в редакторе Canva, размещайте иконки из раздела «Визуальные элементы» на выбранном фоне. Легко, просто и красиво!

Оформление группы ВКонтакте — шаблон для меню с фото

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

17. Составьте из меню цельную композицию

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

Картинки в постах

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

ВКонтакте

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

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

ВКонтакте

18. Закрепляйте пост с важной информацией

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

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

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

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

В редакторе Canva в «Визуальных элементах» вы можете найти иллюстрации, которые подойдут для вашего проекта. А еще использовать разные эффекты для шрифтов и вырезать объекты с помощью инструмента Background Remover (доступен для аккаунтов Canva Pro). Например, вы можете поменять фон на своей фотографии на более яркий.

Шаблоны с анонсами событий для закрепленного поста

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

Шаблоны с новостями и объявлениями

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

Шаблоны для праздников

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

19. Используйте минимализм для креатива с продутом или услугой

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

Хороший пример публикации с товаром можно подсмотреть у белорусского ювелирного магазина SLAVIA. На креативе указана важная информация — товар, цена, логотип, промокод, сроки действия акции.

ВКонтакте

Подобные креативы легко сделать в редакторе Canva, а также можете использовать готовые шаблоны. Вместо фото можно разместить видеоролик.

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

20. Оформляйте информацию в посты-инфографики

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

ВКонтакте

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

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

21. Разбавьте привычное оформление комиксами или просто иллюстрациями

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

ВКонтакте

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

22. Оформляйте игры, тестов, конкурсов в цветах своего бренда

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

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

23. Используйте инфоповоды для оригинального оформления постов

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

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

24. Делайте подборку из нескольких изображений в одном стиле

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

ВКонтакте

25. Используйте плашки для оформления текста

Если вам нужно разместить текст на фоновом изображении, то не обойтись без плашек. Такое оформление красиво смотрится в ленте ВК.

Живые обложки групп российского сообщества Ikea и сети пиццерий Додо Пицца с телефона

26. Красиво оформляйте опросы в группе ВК

Сделать опрос можно при создании записи. В панели инструментов нажмите на «Еще» и выберите «Опрос». На фоне вы можете размещать любое понравившееся изображение. Фоновый дизайн для опроса вы легко можете сделать в редакторе Canva. Особенно интересно делать опрос из двух частей одного изображения. Посмотрите на пример!

ВКонтакте

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

27. Загружайте в документы сообщества полезные гайды и чек-листы

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

Виджеты

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

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

ВКонтакте

28. Покажите на карте адрес вашего магазина или офиса

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

ВКонтакте

Обложки статей, карточек товаров, видеозаписей, подкастов

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

29. Красиво оформляйте лонгриды в ВК

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

Обложки статей в группах книжной сети «Буквоед» и Фестиваля Ural Music Night

Обложки статей в группах книжной сети «Буквоед» и Фестиваля Ural Music Night

30. Затемняйте картинки для обложек к статьям

Чем темнее обложка, тем лучше читается на ней белый текст заголовка, который накладывается автоматически. Затемнить снимки легко с онлайн-фоторедактором Canva, в котором можно отрегулировать яркость самому или с помощью фильтров, а заодно настроить размер (подходящий — 510 на 286 пикселей). Посмотрите, как мы сделали из фотографии хорошую обложку:

Caption: Обработка будущей обложки в редакторе Сanva

Обработка будущей обложки в редакторе Сanva

31. Сделали репост статьи с сайта? Проверьте, подходит ли картинка к оформлению группы ВК

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

Картинка должна отражать суть того, что читатель найдет по ссылке, как в посте Cosmopolitan, или коротко сообщать главное в подписи, как в посте журнала «Канобу».

Иллюстрации для ссылок журналов Cosmopolitan и Канобу

Иллюстрации для ссылок журналов Cosmopolitan и Канобу

Размеры иллюстраций для ссылок — 537 на 240 пикселей. Если накладываете текст, лучше затемнить и затонировать изображение, как в первом шаблоне, а картинку без текста лучше сделать контрастной и насыщенной, как на втором примере.

Важно заранее «подружить» стиль картинок-ссылок с общим стилем постов, чтобы они не выбивались из ленты.

32. Продумайте стиль карточек товара

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

Попробуйте поиграть с объектом и шрифтом — это любимый прием у МегаФон. Такого эффекта легко добиться в редакторе Canva, используя инструмент Background Remover.

ВКонтакте

33. Найдите свой стиль для оформления обложек подкастов и плейлистов ВК

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

ВКонтакте

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

34. Наведите порядок в видеозаписях! Сделайте брендированные обложки

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

Размер обложки для видеозаписи — 1280 на 720 пикселей. Подходящий вариант для оформления вы можете найти в готовых шаблонах Canva.

35. Хотите на обложку для фотоальбома поместить текст? Делайте это правильно

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

ВКонтакте

Рекомендуемый размер обложки для фотоальбома — 1200 на 800 пикселей. Внизу (около 200 пикселей) лучше ничего не размещать, особенно текст, на него наложится название альбома. Учитывайте то, что нижняя часть на смартфонах вообще не видна.

Истории

40 миллионов пользователей в месяц смотрят или публикуют истории в ВК. И если для того, чтобы попасть в ленту постов, нужно пройти «умные алгоритмы» соцсети, то в ленте сторис первыми отображаются самые свежие истории. А значит, у бренда, который публикует истории, шансов достучаться до аудитории куда больше. Поэтому через сторис покупателей привлекают к акциям и распродажам, приглашают купить актуальные товары или просто пообщаться.

Например, о скидках в День защиты детей рассказывает история магазина UNIQLO (обратите внимание, как взгляд модели призывает кликнуть на аватар группы — хитрый визуальный прием!), а об акции «Счастливый час» — сторис петербургского книжного «Буквоед» (у ребят в целом стоит поучиться оформлению группы ВК).

ВКонтакте

36. Лучший размер шаблона для историй ВК

Истории ВК такого же размера, что и в Инстаграме — 1080 на 1920 пикселей, поэтому можно сделать один шаблон и использовать в обеих соцсетях. За вдохновением приходите в наш гайд по Инста-сторис: там крутые примеры, подробный разбор инструментов и идеи для продающих историй.

37. Правильно расположите текст, чтобы на него не попали кнопки нижней части экрана

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

38. Выбирайте крупный шрифт, чтобы текст легко читался

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

39. Используйте интерактивные стикеры, чтобы повысить вовлеченность аудитории

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

ВКонтакте

40. Проводите игры, конкурсы, показывайте комиксы

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

Таргетированная реклама

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

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

Таргетированная реклама от «Логомашины», мебельного магазина «Галион» и онлайн-курса кулинари

41. Выберите подходящий формат для рекламных баннеров ВК

Есть три варианта таргетированных баннеров.

• 145 на 145 пикселей — самый популярный формат для рекламы группы.

• 145 на 165 пикселей — больше подходит для крупных изображений.

• 145 на 85 пикселей — этот формат идеален, когда важен текст объявления или сделать вертикальную картинку невозможно.

ВКонтакте

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

145 на 165 пикселей.

ВКонтакте

42. Текст и картинка должны быть понятными

Главное правило для тизеров — понятные картинки и текст, которые сочетаются друг с другом. Посмотрите примеры, которые встретились в ВК!

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

ВКонтакте

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

Меню для группы Вконтакте Пошаговая инструкция. Основы оформления групп в ВКонтакте с использованием вики-разметки

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

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

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

А теперь подробнее по каждому пункту.

Размер аватара ВК

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

Максимальный размер аватара — 200 на 500 пикселей. Но, в принципе, можно загружать изображения и большего размера — до 7000 пикселей с каждой стороны. Главное, чтобы соотношение их партий не превышало 2: 5.

Покажи на примере.

У меня есть образ. Его размер: 200 на 800 пикселей (соотношение 2 к 8). При загрузке не возникает никаких ошибок. Однако я все еще не могу использовать это изображение, потому что «Контакт» не позволяет мне выделить его полностью.

Крышка

Размер обложки для полной версии сайта — 1590 на 400 пикселей.

Примечание: в мобильной версии А в приложениях отображается не полная версия обложки, а только ее 1196 часть размером 400 пикселей. Посмотрите, как он вырезан в мобильном приложении:

Чтобы этого не произошло, разместите основные элементы вашей обложки в пределах 1196 на 400 пикселей.

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

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

Звучит немного запутанно 🙂 Поэтому я покажу вам на примере.

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

Но выглядит как горизонтальное изображение в альбомной ориентации (ширина 510 пикселей):

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

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

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

Все эти данные взяты из кода разметки Open Graph:

Если Open Graph не зарегистрирован, заголовок берется из метагеги Title, а изображение — из статьи.При этом его легко изменить — либо выбрать другое изображение из статьи с помощью специальных стрелок:

Или загрузите свой:

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

Картинка к статье, созданной в редакторе

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

Хороший пример:

Не очень хороший пример:

Размер фото и видео для рассказов

Размер для фото — 1080 на 1920 пикселей. Размер для видео — 720 на 1280 пикселей.

Технические характеристики видео:

• до 15 секунд;
• не более 5 МБ;
• ч.264 кодек;
• звук aAC.

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

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

Размер обложки для фотоальбома

Размер картинки для видео

1280 при 720 пикселях.

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

Ширина области содержимого Wiki-страницы составляет 607 пикселей.Если вы загрузите изображение большего размера, оно автоматически загрузит 400 пикселей в ширину. Пример: у меня есть изображение размером 1366 для 768. Если я добавлю его на вики-страницу, окажется, что:

Для изменения размера картинки нужно нажать и выставить нужные значения:

Как работать с вики-страницами, я подробно расскажу чуть ниже. Поэтому на этом они не остановятся.

Как сделать, чтобы картинки «ВКонтакте» не лазили? Влияние фона и размера на качество изображения.

Если вы хоть раз пробовали загружать изображения «ВКонтакте» (неважно, была ли это картинка аватара или просто фотография из вашего путешествия), то наверняка вы уже знаете, что у них есть свойство, к которому можно прикоснуться. Особенно это заметно на темном (а особенно на красном) фоне и когда картинки не слишком большие. Пример:

Как сделать, чтобы качество картинки не портилось?

Чтобы изображение не лазило (точнее было лазило, но в гораздо меньшей степени), необходимо сделать его в 2-3 раза больше желаемого размера.Например, если нам нужно сделать аватар размером 200 на 500 пикселей, мы сделаем снимок размером 400 на 1000 пикселей. Если нужно сделать меню размером 510 на 400 пикселей, берем 1020 на 800.

Изображение на темно-синем фоне, которое я привел чуть выше, имеет размер 510 на 350. Я сделал его вдвое больше (1020 на 700) и сохранил. Вот что из этого вышло:

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

Как сделать головной убор

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

Крышка

Не так давно ВКонтакте представило обновление — теперь на страницы можно загружать большие и красивые обложки (1590 на 400 пикселей). Для этого зайдите в настройки и нажмите кнопку Загрузить.

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

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

Примеры динамических крышек:

Обложка + Описание сообщества + Ссылка на сайт

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

Описание с хештегами

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

Исправлен пост, рассказывающий о какой странице

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

А вот что видит пользователь после того, как перейдет по ссылке:

Открыто групповое меню

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

Вот какой фиксированный пост в шапке страницы Flatro:

Групповое меню закрыто

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

Но что мы видим, когда я нажимаю на него:

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

Меню переходов для группы

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

Гифка и Аватар в одном изображении

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

Кстати, я заметил этот пример у SMM-маркетолога Сергея Шмакова. Итак, за находку выражаю огромную благодарность 🙂

Скрытое меню

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

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

В конце ноября 2015 года в социальной сети «ВКонтакте» появилось интересное нововведение — как только пользователь заходит на вашу страницу, прикрепленное к шапке видео начинает воспроизводиться автоматически.Таким приемом можно привлечь еще больше внимания пользователей (особенно тех, кто впервые зашел на вашу страницу), и в то же время не раздражать тех, кому не нравится, когда он навязывает свой контент, ведь видео воспроизводится без звука. и практически не мешает.

Как добавить такое видео в шапку своей страницы?

Для этого нужно выполнить три условия:

• Прикрепите ролик к записи и закрепите эту запись на вершине сообщества.
• Кроме ролика к пластинке ничего не прикреплять. Только видео и текст по желанию.
• Видео надо скачивать «ВКонтакте» — сторонние плееры не поддерживаются.

Запись, получившая много репостов

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

Анонсы новых клипов, альбомов, событий

Презентация новых продуктов / услуг

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

Корпуса, отзывы покупателей

Рекламные приложения

Розыгрыши

Правила сообщества

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

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

Что должен Аватар

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

Миниатюрный аватар

1. Текст на миниатюрном аватаре должен быть достаточно большим, чтобы его можно было прочитать.







2. Текст не должен выходить за рамки миниатюр.







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







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




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







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

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

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

Какую информацию можно разместить на миниатюрном аватаре

Несмотря на то, что миниатюра Аватара имеет очень маленький размер, ее можно использовать для привлечения подписчиков в ваше сообщество. Как это сделать? Рассмотрим несколько вариантов:

Объявление о новом продукте / Услуги / События

Преимущества компании / Услуги / Страницы

Телефон организации

Выгодные цены

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

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

Акции

Соревнования

Вакансий

Какой должен быть Аватар?

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

1. Аватарка должна быть качественной. О том, как этого добиться, я писал чуть выше. Для тех, кто пропустил эту часть, скажу вкратце — размер аватара должен быть в 2-3 раза больше, чем вы планировали.
2. Желательно, чтобы аватарка была объединена из меню: была такая же цветовая гамма, были такие же шрифты, элементы и т.д. Благодаря этому ваши страницы будут выглядеть более аккуратно и профессионально. Пример:
3. Аватар и сам миниатюрный аватар могут быть разными.Например, вы можете нарисовать на аватаре круг, расположить его как угодно, выбрать эту область в качестве миниатюры, а остальная часть аватара выполнена в другом стиле.




Другой вариант — разделить аватар на две части. Один — для миниатюр, а второй — для всего остального аватара.




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




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

Какую информацию можно разместить на аватаре?

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

Домен сайта

Телефон / адрес / время работы

Конкурсы / Акции

Самые покупаемые товары / Новинка

информация о доставке

Рекламное мобильное приложение

Основные преимущества компании / страниц / товаров и др.

Обновить ассортимент / новое творчество и др.

Информация о том, что ваше сообщество является официальным

Информация о ближайших мероприятиях

Адреса аккаунтов в других социальных сетях

Расширенное описание страницы

Подсумок

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

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

Для того, чтобы объединить аватар и меню, вам понадобится программа Adobe Photoshop или ее аналог. Я объясню весь процесс на примере «Фотошопа». Итак, начнем.

1. Скачайте шаблон для «Фотошопа», который я специально подготовил для этой статьи.В обычном размере (меню — 510 пикселей по ширине, аватар — 200) или в увеличенном (меню — 1020 пикселей по ширине, аватар — 400).
2. Откройте изображение, которое хотите взять за основу.
3. Скопируйте его, вставьте в шаблон и разместите так, как хотите вырезать.

1. Добавить эффекты, текст, графику и т. Д.

1. Если вы не хотите потерять часть изображения (в этом пространстве размером 50 пикселей), сдвиньте его вправо, как показано на следующем Gif:

1. Выберите инструмент «Вырезание» и нажмите кнопку «Фрагменты на направляющей».

1. Удаляем ненужные фрагменты (щелчок правой кнопкой мыши — «Удалить фрагмент») и корректируем существующие (щелчок правой кнопкой мыши — щелкаем в пустом месте — берем нужную область и растягиваем до нужного размера).

1. Перейдите в раздел «Файл» и выберите команду «Сохранить для Интернета».

1. Перейдите в то место, где вы сохранили картинки (рабочий стол или какую-то конкретную директорию), и найдите там папку с названием «Изображения».Именно там будут ваши изображения. Теперь осталось только вылить их на страницу.

П.С. Высота аватара может быть изменена на ваше усмотрение. Я взял максимальный размер — 500 пикселей, но это значение может быть меньше. Например, как на странице «Wiki-разметка»:

Как использовать виджеты

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

Вот несколько примеров того, как выглядят виджеты на странице ВКонтакте:

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

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

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

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

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

А что делать тем, кто не умеет работать в «Фотошопе»?

Если вы никогда не работали в «Фотошопе» (или любых других графических редакторах) и еще не готовы выделить время для его разработки, вы можете воспользоваться услугами, в которых уже есть готовые выкройки картинок для разных социальных сетей:

1.Fotor.com.

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

Вставляем его в шаблон, выбираем левой кнопкой мыши, выбираем слой (значок Sandworm) и нажимаем на Move to Bottom. Таким образом, наша картинка вернется на задний план, а все надписи нанесены поверх нее.

После этого меняем текст, шрифт, размер шрифта, расположение надписи и т.д.

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

2. canva.com.

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

Мы выбираем вашу деятельность. Шаг, на котором вас просят пригласить друзей, мы пропускаем. Попадаем в главное меню, где выбираете запись в Facebook, если нам нужна прямоугольная фотография, или запись в Instagram — если квадратная.

Выбираем шаблон (если в шаблоне стоит отметка «бесплатно», значит, он бесплатный), меняем текст.

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

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

В последнее время во «ВКонтакте» можно делать свои статьи в специальном редакторе. Для создания статьи необходимо нажать на букву «Т»:

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

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

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

Точно так же и WordPress (или любая другая CMS) имеет редактор HTML, с помощью которого вы создаете статьи, а «контакт» имеет свой собственный редактор для создания и редактирования вики-страниц. Выглядит он так:

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

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

С чего начать?

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

После того, как скачали или нарисовали меню, нужно его вырезать. Для чего это? Это необходимо для создания отдельных ссылок, для того или иного изображения.Так как, если наше меню полностью в группе, то больше одной ссылки не работает, либо я чего-то не знаю. Кроме того, наше меню нужно настраивать по размеру, то есть необходимо учитывать, что максимальная видимая ширина составляет 388 пикселей (одно изображение), а остальные будут либо обрезаться, либо гонять в размерах, которые вы указываете при создании меню в группе, при этом изображение может растягиваться или наоборот сжиматься, что может испортить первоначальную задумку. Также стоит учесть, что, например, для горизонтального меню нам придется перемещаться по ширине 370 пикселей, иначе меню не строится по горизонтали.

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

Просто выберите этими инструментами необходимые области, например:

И за исключением веб-устройств.

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

Заходим на страницу нашей группы. И делаем некоторые подготовительные действия: в управлении сообществом подключаем «Материалы», сохраняем. Если на данном этапе что-то непонятно, то прочтите статью, про текстовое меню ВКонтакте, там все подробно, про это сказано.

После этого нам нужно скачать наши картинки, которые мы получили при нарезке меню.То есть нажмите «Добавить фото».

После загрузки картинок можно переходить к созданию меню. Для этого нажмите «Редактировать» рядом со свежими новостями.

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

Итак, разберемся подробнее что к чему:

фото-48249652_297601976 — Путь к нашей картинке. Путь формируется следующим образом: Номер альбома_номер самой фотографии. Как найти путь к нашему имиджу? Все очень просто. Заходим в фотоальбом, в котором находятся наши картинки, и нажимаем на нужное изображение. Тогда в адресной строке мы увидим полный путь к нашему изображению.

130x46px; nopadding; — Параметры изображения: 130x46px; — Ширина и высота нашей картинки (может отличаться от размера самой стены) — для вертикального меню контакта CCC указывать не обязательно; nopadding; — Без пробелов — при использовании этой опции все пробелы (отступы) удаляются, а изображения объединяются в одно.

Вот что я сделал:

Горизонтальное меню ВКонтакте сделано по принципу. Единственное отличие состоит в том, что при написании кода новые пункты меню не нужно переносить в новую строку. А также не забывайте, что при таком расположении картинок мы можем использовать ширину всего 370 пикселей. Я почти не исправил приведенный выше код и получил:

[] [] []

А это выглядит так:

И еще хотелось бы добавить: Бывают ситуации, когда нам нужно вставить картинку в меню, но это не должна быть ссылка.Он должен выполнять роль украшения. Для этого достаточно использовать опцию «NOLINK». Наглядный пример: такое же горизонтальное меню, только первая кнопка не является активной ссылкой, а представляет собой простую картинку.

[] [] []

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

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

Удачных экспериментов!

На вопрос «Как создать меню для группы ВКонтакте» есть три основных варианта ответа: заказать у специалиста, создать с помощью онлайн-дизайнера или мастера, вникнуть в какие-то тонкости вопроса и все делать самому.

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

Итак, вот три пути создания меню:

Каждый из них, конечно, имеет свои достоинства и недостатки. О первых двух расскажем чуть подробнее. А для тех, кто все же решится пойти по третьему пути и все сделает самостоятельно, мы написали подробное руководство (инструкцию).

Кстати, для тех, кто предпочитает получать информацию через видео, а не читать длинные тексты, есть видео:

Путь №1. Заказать Создание меню от специалиста-дизайнера

Достоинства этого метода относительны скорость и минимальное участие с вашей стороны. Минусы — самая высокая цена и шанс получить красивое, но некорректное меню (основные ошибки мы подготовили при создании меню). Кроме того, нужно найти исполнителя. Здесь мы можем порекомендовать поискать его на KWORK.Сервис RU, в разделе «Дизайн-группы в сообществах».

Путь # 2. Использование онлайн-дизайнера

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

Путь № 3. Делай все сам

Преимущества этого пути очевидны: он бесплатный, и вы конвертируете новые навыки. Минусы такие: нужны навыки и довольно долго (на первое время). Вот что вам потребуется:

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

Если вы думаете, что вам всем по плечу, то приступим.

Шаг №0. Общие сведения о том, как устроено меню

Меню для группы составлено из вики-страниц, создание которых поддерживает ВК. Wiki-страницы — это специальные страницы, которые можно создавать только публично. От обычных постов они отличаются тем, что могут использовать так называемую разметку Wiki. Эта разметка представляет собой специальный код, который преобразуется в дополнительные объекты форматирования. Чтобы было понятнее объясните. Например, в обычных сообщениях можно использовать только простой текст, а разметка вики позволяет выделять части текста жирным шрифтом или курсивом.То есть она вводит дополнительные функции регистрации. В частности, возможность размещать изображения, при нажатии на которые пользователь будет перенаправлен по ссылке. Именно эти дополнительные возможности форматирования используются для создания общедоступного меню ВКонтакте. Как именно мы расскажем ниже.

Шаг 1. Подготовительный этап

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

Итак, вы создали новую группу. Давайте теперь узнаем идентификатор (ID) вашей группы. ID группы — это ее уникальный номер, с которым контактирует. Зайдите в свою группу и нажмите «Записи сообщества» (если в группе нет записей, то вместо «Записи сообщества» будет «Нет записей»). Вы перейдете на новую страницу С этим типом типа:

https://vk.com/wall Xxx ? Собственное = 1

Вместо Ххх У вас будет набор цифр (и только цифр!).Это идентификатор вашего сообщества. Например, в нашей тестовой группе это 154457305.

Теперь давайте создадим новую вики-страницу в группе. Для этого сделайте ссылку такого типа:

http://vk.com/pages?Oid=- ID_Group & p =. Navigation_strant

http://vk.com/pages?Oid=- 154457305 & p =. Меню

Откройте полученную ссылку в браузере (скопируйте ее в адресную строку браузера и перейдите по адресу).Все, вы создали вики-страницу с заголовком «Меню» (если, конечно, не указали «Меню» в качестве имени страницы в ссылке). Вы должны увидеть такой текст: «Страница меню пуста. Заполните содержимое». В правом верхнем углу есть значок «карандаш» (). Щелкните по нему, чтобы перейти к редактированию страницы.

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

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

http://vk.com/page- ID_Group _ Xxx ? ACT = Edit & section = Edit

Часть адреса перед знаком «?» — Это адрес вашей вики-страницы. Запишите где-нибудь: В ВК нет возможности увидеть список своих вики и ссылки на них. Чтобы перейти к нужному, вам необходимо знать его адрес или снова воспользоваться ссылкой на Wiki-страницу.Использование последнего способа Имейте в виду, что страницы, если они уже существуют, не создаются заново.

Шаг №2. Делаем простое меню для VKontakte Group

Итак, у нас есть вики «Меню». Переключитесь в режим разметки редактора и добавьте следующий код:

Нажмите кнопку «Предварительный просмотр», расположенную под редактором. Вы должны увидеть список из трех ссылок. Первые два являются внешними и ведут на главные страницы «Яндекс» и Google соответственно. Третья ссылка внутренняя. Она ведет в Паблик ВК с ID «1» (это официальная группа ВК для разработчиков).Если у вас в превью отображается код, а не ссылки (которые можно нажимать) — значит вы ввели код в режиме визуального редактирования , а не в режиме разметки. Будь осторожен!

Обращаем ваше внимание, что внешние ссылки на код Viki-VC оформляются одинарными скобками, а внутренние — двойными. В этом случае внутренние ссылки ВК указываются не как обычный адрес сайта, а как указатель на конкретный объект ВК. Например, указатель на группу имеет такую ​​запись:

клуб. ID_Group

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

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

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

Шаг №3. Где можно разместить вики-страницы vkontakte

Основных мест два: вы можете создать сообщение со ссылкой на вики-страницу или разместить его в разделе «Материалы» вашего сообщества.

Начнем сначала. Начать добавлять новую запись На стене вашей группы. Сначала прикрепите к нему любую фотографию. Лучше сделать большую фотографию, ширина которой больше высоты.Затем вставьте ссылку на созданную запись на созданную вами вики-страницу с помощью простейшего меню. Именно ее мы попросили вас записать чуть раньше. Напомним, ссылка имеет такой вид ( у вас будут другие номера ):

http://vk.com/page-121237693_72827423.

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

Кликните по фото в фиксированном посте: появится ваша вики с простейшим меню группы.

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

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

Перейти к этой новинке. Нажмите на крик «Редактировать». В результате вы попадете в уже знакомый вам редактор Wiki-страницы. Единственное отличие — есть поле для ввода названия страницы.Измените его из «Свежих новостей» в «Меню2». В режиме режим редактирования изображения Введите следующий код:

«» «Версия меню для раздела» Материал «» «

[]

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

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

Мы узнали, что меню можно разместить в двух местах. Желательно сделать это и в виде фиксированной записи и в разделе «Материалы». Запомните два нюанса:

• Фиксированную запись увидят 98% ваших посетителей, а в раздел Материалы попадут только 25-40% самых любопытных, а также приверженцев старых пользователей вашей группы, знающих что там есть что-то полезное.
• Фиксированная запись с картинкой для вызова меню может быть дополнена текстом. Так вы не потеряете эту особенность закрепленной записи. Но и перебарщивать тоже не стоит: чем больше текста, тем ниже ссылка на открытие вашего меню.

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

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

Шаг №4. Как сделать меню в группе ВКонтакте. Graphic

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

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

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

Наше тестовое меню будет выглядеть так:

Всего две кнопки. Первый будет вести на главную страницу Яндекса, а второй — в группу Команды ВКонтакте.

Вертикальное графическое меню в ВК — изображение, вырезанное на полосе.Эти бэнды размещаются друг в друге с помощью разметки на странице вики. На некоторых из этих «полосок» прописаны ссылки. При нажатии на такое изображение происходит переход по ссылке, по сути, с этой ссылки. Одна полоска — это одно звено. Некоторым полосам (например, промежуточным, которые располагаются между элементами) наоборот назначается отсутствие ссылки. Такие полосы становятся «незапираемыми».

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

• В первую очередь нужно нарисовать меню.Его ширина должна быть строго , 600px, (пикселей). По высоте рекомендуется делать меню не более 900 пикселей. Лучше всего сохранять результат в формате PNG, в крайнем случае — в формате JPG. Воспользуйтесь знакомыми и удобными инструментами для рисования (например, Photoshop или GIMP). Результат здесь на 95% зависит от ваших творческих и технических навыков. Даже если вы совсем не умеете пользоваться графическими редакторами — не отчаивайтесь. Навыков хватит максимум на пару часов. В Интернете огромное количество справочной и обучающей информации.Кроме того, возможность хотя бы использовать графический редактор очень и очень полезна для публичных администраторов. Зря не потратишь.
• Далее рисунок из меню нарезается горизонтальными полосами. Сделать это можно любым удобным для вас способом: от обычного множества фотошопов до различных онлайн-сервисов. Если у вас нет идей, как это делается — просто задайте вопрос любимой поисковой системе. Не будем подробно описывать техническую часть процесса резки: способов десятки, одни подходят для одних пользователей, а другим не подходят.При обрезке необходимо соблюдать одно простое правило: высота одной полосы не должна быть меньше 60px . В противном случае у вас могут возникнуть проблемы с отображением меню в приложении и в мобильных браузерах: т. Н. «Белые полосы» между изображениями.
• Нарезанные «полоски» загружаются в альбом или альбом группы на странице администратора группы. Мы рекомендуем второй вариант. В любом случае альбом с нарезанными частями меню должен быть в открытом доступе. .В противном случае те пользователи, для которых недоступны изображения из альбома, не увидят ваше меню!
• Компилируется код вики-разметки, который вставляется на нужную вики-страницу.
• В группе размещен фиксированный пост со ссылкой на вики-страницу с меню. О том, как делается такой пост. Подробно мы писали выше. Кроме того, код (с небольшими изменениями) можно добавить на корневую вики-страницу (пункт справа от пункта «Информация» появляется при разрешении раздела «Материалы».Подробнее — см. Выше).

А теперь займемся загрузкой частей меню и кода Wiki подробнее. Мы подготовили для вас. Имеет два каталога: «1» и «2». Первый содержит части самого примитивного и простого варианта слайсера для нашего меню — на две части. Скачайте архив, скачайте изображения (1.png и 2.png) из каталога «1» в новый альбом (дома или в группе).

У нас две «полоски»: верхняя (с кнопкой «Яндекс») и нижняя (с кнопкой «ВКонтакте»).Оба являются эталонными изображениями. В вики-разметке это делается с помощью кода этого типа:

«ССЫЛКА» — Это целевая ссылка. Например, https://yandex.ru/. Помимо обычного внешнего вида Эта ссылка может быть указанием на объект ВКонтакте: пост, страницу пользователя или группу. Например, после нажатия кнопки переход в Сообщество ВКонтакте можно указать как его адрес (https://vk.com/team) и указатель на него (Club22822305). В принципе разницы не будет.Внешние ссылки (те, которых нет на ресурсах ВК) мы рекомендуем вырезать через

Учитывая, что это меню находится не в группе, а на странице (Public) ВКонтакте, я решил показать вам, как все это делается! Давно уже колотили вопросами: как сделать меню в паблике, как сделать так, чтобы меню было открыто, как сделать клип и т.д .. вот инструкция!

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

Меню в публичном доступе? Проще простого!

Перечитайте еще раз Статьи: А, теперь мы воспользуемся этими знаниями!

Вы наверное уже догадались, что в основе такого меню лежит … прикрученный пост с внутренней страницы! Лично мне такой способ очень нравится, даже в группе своего блога я отказался вставлять и использовать именно «Меню во взрыве».А теперь дам четкую инструкцию «как это сделать»!

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

Вариант 1: (Нормальный)

http: // vk.com / pages? Oid = Xxx & p =. Navigation_strant

, где xxx — идентификатор вашей публичной страницы,

и «Имя Савраиста» — любое слово на этой странице будет называться

Вариант 2: (облегченный, но)

Итак, мы создаем вики-страницу и заполняем ее так же, как если бы мы заполняли меню для группы. То есть прописываем туда все изображения и переходы. У нас должно получиться примерно следующее:

Это меню вики-кода

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

А это готовая страница меню

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

Наверное, вы уже знаете, ссылка на пост прикрепляется автоматически и после прикрепленной ссылки от переноса адреса страницы вы можете удалить.Если вы опубликуете ссылку, меню на стене не появится, а просто будет ссылка, щелкнув по которой человек попадет в наше меню. Это просто пол корпуса! Нам нужно, чтобы меню было заметно и висело в триале, т.е. на самом видном месте.

Итак, теперь мы должны удалить ссылку из «тела» поста (прикрепленная страница останется) и добавить к посту картинку , которую увидят подписчики. Фишка в том, что если в одной записи есть ссылка и изображение, то при нажатии будет выполняться картинка по ссылке ! Все гениальное всего!
Картинка может частично или полностью повторять само меню, тут вам уже решать.Если вы заказываете публичное меню, то вам понадобится баннер, т.е. картинка, которая будет висеть в клипе. Вот что мы получаем при публикации поста:

Картинка повторяет меню и привлекает внимание посетителей к странице

Наконец-то мы все готовы и вывешиваем пост с картинкой и ссылкой на стену! Теперь нам нужно перенести это в шапку группы, закрепить пост по главному, что-то сделать… Для этого нажимаем на дату / время поста (для каждого поста есть дата публикации), попадаем на внутреннюю страницу поста, листаем ее вниз и ищем кнопку «Исправить» «Смотреть в картинку, которую нужно найти:

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

vk.com/frilkacom

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

Итак, за три несложных шага нам удалось создать красивое меню, которое можно использовать в любом сообществе ВКонтакте!

У меня все есть! Делитесь статьей с друзьями, добавляйте в избранное и следите за обновлениями блога, чтобы не пропустить новые интересные статьи!

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

Что такое разметка вики?

Как сделать групповое меню ВК? Разметка Wika — хороший помощник! Это очень эффективный и удобный способ создания группы в социальной сети «ВКонтакте».Эта разметка по принципу действия очень напоминает код hTML. Но для людей, не имеющих отношения к программированию, это будет более понятно за счет простоты реализации. Свое название Wiki-разметка получила благодаря Википедии, где многие пользователи впервые смогли ознакомиться с основными особенностями ее функционирования. Разметка Wika позволяет людям без знаний в области программирования быстро и легко составлять внешний вид Группы:

1. Создавать графические спойлеры и таблицы.
2. Форматирование текста и изображений.
3. Работа с якорями и ссылками.

Как сделать групповое меню ВК? Рекомендации так необходимы, но в целом это можно понять с помощью хорошего руководства. Если говорить о HTML, то для изучения и работы с ним нужно было сидеть несколько дней, а то и неделю. Разметка Wika с хорошей памятью требует совсем немного времени. Как его создать? Какие есть подходы? Итак, поговорим о технологиях, а кто это сделал? Разберемся, как сделать групповое меню ВК.Уорд Каннингем впервые ввел понятие «вики» (в переводе с гавайского означает «быстрый»).

Wikic Marking Methods

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

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

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

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

Как сделать меню в группе в ВК, что было бы красиво? В социальной сети «Вконтакте» вставка фото или картинки с использованием вики-разметки предоставляется только в тех случаях, когда они загружены в фотоальбомы сайта. Итак, заходим в него, выбираем желаемое фото и копируем его адрес. Например, пусть это будет так: Photo12345_67890. Теперь надо разобрать его на дубль должен получиться такой результат: []. А что, если к тексту или ссылке нужно прикрепить фото или картинку? А может есть желание немного отредактировать внешний вид? Тогда в этом поможет следующее: необходимо, чтобы файл был такого типа — [[Photo12345_67890 | Опции | текст / ссылка]].Вместо последних трех слов подставляется то, что нужно. Текст — Пишем то, что нужно. В особых пояснениях вроде бы не надо. Ссылка с английского переводится как ссылка. Он указывается для того, чтобы машина пользователя знала, куда ей нужно идти. Параметры — здесь могут быть установлены следующие значения:

1. Обычный — Ссылка на изображение оформлена в виде текста, на ней нет изображения.
2. NOBORDER — рамка убрана возле фото.
3. Box — Изображение открывается в окне.
4. NOLINK — Ссылка на фото убрана.
5. Nopadding — пробелы между изображениями не отображаются.
6. NNNXYYYPX или NNNPX — укажите размер картинки в пикселях. Первый вариант обеспечивает ширину и высоту. При желании можно «сжать» картинку. А второй вариант предусматривает редактирование ширины.

Как создавать таблицы с помощью вики-разметки?

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

1. (| — Так обозначено начало таблицы. Без него невозможно обойтись при создании данного элемента невозможно, это обязательный атрибут.
2. | — Используется для придания ячейкам эффекта прозрачности.
3. | + — Используя этот набор символов, имя таблицы вызывается в центре.Это не обязательный атрибут, но ставить его следует сразу после знаков, обозначающих начало.
4. | — — Так указывайте новые строки (в том числе для ячеек).
5. ! — Придает темный цвет. В случае эго необходимо использовать знак из пункта №2.
6. |) — набор знаков, обозначающих конец таблицы. Это необязательный атрибут. Но все же рекомендуется использовать его, чтобы не допустить ошибки.

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

Создание группового меню в социальной сети «ВКонтакте» с использованием вики-разметки: Пример реализации

Здесь будут использоваться параметры NOBORDER и NOLINK. Они уберут рамку картинки и ссылку. Также изображения будут изменены в размере, а вторая строка ячеек будет иметь темную заливку из-за использования атрибута !.А вот и сам пример:

{|
| —
|

[[Открытия]]

|

[[Разработка]]

[[Книги]]

[[Симпозиумы]]

|

[[Медицина | 1]] | [[Физика | 2]] | [[Математика | 3]] | [[Экономика | 4]]

[Химия | 5]] | [[Биология | 6]] | [[Программирование | 7]] | [[Электрооборудование | 8]]

| —
|}

Как видите, ответ на вопрос: «Как сделать меню в группе в ВК?» Очень просто.

Важность вики-разметки в продвижении вашего проекта

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

Заключение

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

17 важных обновлений ВКонтакте в 2016 году • Runetology.com

2016 год принес много обновлений ВКонтакте. С момента своего основания 10 лет назад ВК в этом году впервые сменил интерфейс.Инструменты для бизнеса и рекламы также получили много важных обновлений. Чтобы рекламодатели и агентства не пропустили ни одной из последних функций, я подготовил список самых важных изменений на VK.com за 2016 год.

1. Рассказы

Тенденция исчезновения фото и видео сообщений очевидна, поэтому после Snapchat, Facebook Messenger и Instagram ВКонтакте также представил свои «Истории». Пользователь может публиковать фото или 12-секундные видеоролики. Истории доступны только в мобильной версии ВКонтакте.

2. Двойник

До десятков параметров таргетинга ВК добавил инструмент похожих аудиторий — look-alike. Система выбирает пользователей ВКонтакте, которые ведут себя так же, как те, которые уже посетили ваш сайт и выполнили целевое действие, например, сделали заказ в интернет-магазине, загрузили файл или подписались на рассылку новостей.

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

3. Рынок

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

4. VK Live

VK теперь позволяет пользователям вести прямые трансляции и зарабатывать на них деньги. Зрители могут поддержать авторов виртуальными подарками, которые авторы могут обменять на деньги. Доступно на iOS.

5. Новые размеры таргетированной рекламы

Баннеры, показанные слева, увеличены:

• 146 x 85 пикселей для типа «Изображение и текст»
• 146 x 165 пикселей для типа «Большое изображение»

Длина текста также увеличилась:

• Заголовок — 33 символа (вместо 25)
• Текст — 70 знаков (вместо 60)

Подробно о форматах рекламы ВКонтакте вы найдете в моем тексте «Путеводитель по рекламе Вконтакте».

6. Один пиксель ретаргетинга

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

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

7. Аудиореклама

стали доступны для настольных компьютеров в 2016 году и были протестированы некоторыми крупными рекламодателями, включая McDonald’s и Adidas. Пока нет информации о том, сколько времени займет этот тест, и каковы условия использования этого формата для мелких рекламодателей.Стоимость аудиорекламы составит около 350 рублей за 1000 прослушиваний, что сопоставимо с рекламой на радио.

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

8. Кнопки призыва к действию

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

• раскрутка сообщества: Присоединиться, Отправить сообщение
• продвижение внешних сайтов: Go, Buy, Register
• объявлений в мобильной версии: Звоните, Пишите, Отправляйте на почту.

9. Изображение на обложке сообщества

ВК изменил внешний вид сообществ, добавив обложки как на фан-страницах Facebook. Рекомендуемый размер обложки — 1590 х 400 пикселей. Вы можете добавить обложку в настройках вашего сообщества.

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

10. Денежные переводы между пользователями

ВК введены денежные переводы между пользователями.Сделать перевод можно в чате, как в мобильном приложении, так и в настольной версии. Лимиты — от 100 до 75 000 руб. Комиссия за перевод денег с карты Visa — 1% от суммы, минимум 40 руб.

11. Скрытые сообщения

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

12. Живой чат для сайтов

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

13. Короткая ссылка vk.me — быстрый выход в чат

Если вам не нужен livechat на вашем сайте, теперь вы можете использовать короткую ссылку, которая ведет в раздел чата — http: // vk.я / ИМЯ ПОЛЬЗОВАТЕЛЯ. Когда пользователь нажимает на короткую ссылку, она перенаправляет его в ВК и открывает чат с вашим сообществом.

А с помощью специального сервиса https://vk.com/print вы можете создавать симпатичные «ярлыки» со ссылкой или QR-кодом, которые можно разместить на вашем сайте или в рекламных материалах.

14. Умная новостная лента

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

Получите несколько советов о том, как создавать и публиковать контент в интеллектуальной ленте новостей ВКонтакте.

15. Полная статистика постов

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

16. Пополнение через PayPal

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

17. Обновление вики-разметки

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

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

Twenty Twenty | WordPress.org

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

• На экране ноутбука с разрешением 1440 пикселей ширина основного столбца составляет до 580 пикселей.Ширина блока «Широкий» составляет до 1200 пикселей, а ширина блока «Полный» охватывает всю ширину экрана.
• В нижнем колонтитуле есть две области виджетов с максимальной шириной столбца 570 пикселей.
• Рекомендуемый размер избранного изображения — 1980 пикселей в ширину и 1485 пикселей в высоту.

Наверх ↑

Twenty Twenty содержит Starter Content, который помогает настроить тему, идентичную демонстрационной странице темы. Стартовый контент можно активировать только на недавно установленных сайтах, на которых еще нет страниц или сообщений.Для активации перейдите в настройщик и нажмите Опубликовать .

Наверх ↑

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

Наверх ↑

Twenty Twenty включает настройку логотипа сайта, которая может использоваться для отображения логотипа вашей компании или вашего изображения. Вы можете установить логотип своего сайта, перейдя в Customizer → Site Identity. Рекомендуемое разрешение логотипа — 240 пикселей в ширину и 180 пикселей в высоту.

Наверх ↑

Twenty Twenty включает три настройки цвета, которые позволяют придать вашему сайту индивидуальный вид. Чтобы изменить настройки цвета, перейдите в Customizer → Colors.

В Twenty Twenty включены следующие цветовые настройки:

• Цвет фона (по умолчанию светло-бежевый)
• Цвет фона верхнего и нижнего колонтитула (по умолчанию белый)
• Основной цвет (по умолчанию розовый)

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

Наверх ↑

Twenty Twenty включает шаблон страницы, называемый «шаблоном обложки», который отображает заголовок сообщения или страницы поверх избранного изображения.

Вы можете настроить публикацию или страницу для использования шаблона обложки, отредактировав публикацию или страницу, выбрав вкладку «Документ» на правой боковой панели, развернув вкладку «Атрибуты публикации / страницы» и выбрав « Шаблон обложки »в раскрывающемся списке« Шаблон ».

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

Наверх ↑

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

• Арабский
• Китайский
• Кириллица
• Деванагари
• Греческий
• Гуджарати
• Иврит
• Японский
• Корейский
• Тайский
• Вьетнамский

  10

В Twenty Twenty есть два разных меню рабочего стола:

• Традиционное горизонтальное меню, которое всегда видно
• Расширяемое меню, которое скрыто за кнопкой меню

Вы можете выбрать, какое место меню использовать, перейдя в Внешний вид → Меню, где вы можете назначить меню для «Горизонтальное меню рабочего стола» или «Расширенное меню рабочего стола».Вы также можете использовать оба пункта меню в комбинации, если хотите.

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

Наверх ↑

Twenty Twenty включает две области виджетов под содержимым сайта и над нижним колонтитулом.

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

Наверх ↑

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

Меню социальных иконок Twenty Twenty поддерживает следующие сервисы:

• 500px
• Amazon
• Bandcamp
• Behance
• Codepen
• DeviantArt
• Dribbble
• Dropbox
• Etsy
• Facebook
9010 9010 9010 Gread 9010 Glick 9010 Google
• Instagram
• Kickstarter
• JSFiddle
• Последний.fm
• LinkedIn
• Mail
• Mastadom
• Medium
• Meetup
• Pinterest
• Pocket
• Reddit
• Skype
• Snapchat
• SoundCloud 9010 9010
• Tumbloud 9010 Tok10 9010 Spotify 9010 9010 Tok10
• Vimeo
• VK
• WhatsApp
• WordPress
• Yelp
• YouTube

Дополнительные значки можно добавить, выполнив действия, описанные в разделе «Добавление значков в Twenty Twenty» в полевом руководстве по темам: WordPress 5.5.

Наверх ↑

Получите помощь сообщества с Twenty Twenty на ее форуме: https://wordpress.org/support/theme/twentytwenty

Вы также можете прочитать журнал изменений темы.

Двадцать Двадцать один | WordPress.org

Twenty Twenty-One — новая тема по умолчанию для WordPress версии 5.6.

Twenty Twenty-One — это чистый холст для ваших идей, и он делает редактор блоков вашей лучшей кистью. Благодаря новым узорам блоков, которые позволяют создавать красивый макет за считанные секунды, мягкие цвета и привлекательный, но вневременной дизайн этой темы позволят вашей работе сиять.Прокатитесь! Посмотрите, как Twenty Twenty-One улучшает ваше портфолио, бизнес-сайт или личный блог.

• Требуется WordPress не ниже 5.3.
• Требуется PHP версии не ниже 5.6.
• На экране ноутбука с разрешением 1440 пикселей ширина основного столбца составляет до 1240 пикселей. Ширина блока «Wide» также составляет до 1240 пикселей, а ширина блока «Full» охватывает всю ширину экрана.
• Рекомендуемый размер избранного изображения — 610 пикселей в ширину или больше.
• Рекомендуемый размер логотипа — не менее 300 пикселей в ширину или не менее 100 пикселей в высоту.
• Twenty Twenty-One имеет одну область виджетов, которая отображается под содержимым сайта и над нижним колонтитулом. Каждый виджет занимает одну треть доступного пространства с максимальной шириной 380 пикселей.

Наверх ↑

• Перейти к ссылке содержимого
• Семантический HTML с ориентирами
• Поддержка режимов высокой контрастности и темного режима
• Поддержка навигации с помощью клавиатуры

Наверх ↑

Twenty Twenty-One поставляется со стартовым контентом, в котором объясняется, как использовать шаблоны и стили блоков темы.Вы можете активировать стартовый контент только на недавно установленных сайтах, на которых нет страниц или сообщений. Для активации перейдите в настройщик и нажмите «Опубликовать».

Наверх ↑

Twenty Twenty-One спроектирован так, чтобы в полной мере использовать творческую свободу, предоставляемую редактором блоков. Особое внимание было уделено блоку Columns, чтобы вы могли создавать впечатляющие целевые страницы с замысловатыми макетами блоков. Twenty Twenty-One включает стили для редактора блоков, поэтому то, что вы видите в редакторе, почти точно соответствует конечному результату.

Наверх ↑

Крупный текст # Крупный текст

Вверх ↑

Область ссылок # Область ссылок

Наверх ↑

Контактная информация # Контактная информация

Наверх ↑

Медиа и текст заголовок статьи # Медиа и текст заголовок статьи

Наверх ↑

Наложение изображений # Наложение изображений

Наверх ↑

Два изображения # Два изображения

Наверх ↑

Наложение изображений и текста # Наложение изображений и текста

Наверх ↑

Список портфолио # Список портфолио

Подробнее о шаблонах блоков и их добавлении

Наверх ↑

Стили блоков выбираются на боковой панели настроек блока в редакторе.

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

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

Вверх ↑

Borders # Borders

В Twenty Twenty-One границы могут быть добавлены к следующим блокам:

• Медиа и текст
• Последние сообщения — Стили границ и разделителей
• Изображение — Стили границ и рамок
• Обложка
• Группа

Наверх ↑

Перекрывающиеся столбцы # Перекрывающиеся столбцы

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

Наверх ↑

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

Черный

Белый

Темно-серый

Серый

Зеленый

Синий

фиолетовый

Красный

Оранжевый

Желтый

Наверх ↑

Twenty Twenty позволяет изменять цвет фона вашего сайта.

Чтобы изменить цвет фона, перейдите в «Настройщик» → «Цвета и темный режим».

Добавьте свой собственный цвет или выберите цвет из палитры.

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

Наверх ↑

Twenty Twenty-One включает настройку логотипа сайта, которая может использоваться для отображения логотипа вашей компании или вашего изображения. Вы можете установить логотип своего сайта, перейдя в Customizer → Site Identity.

Рекомендуемый размер логотипа — не менее 300 пикселей в ширину или не менее 100 пикселей в высоту. Логотип виден в верхнем и нижнем колонтитулах.

Логотип в шапке сайта по центру. Если вы хотите скрыть заголовок и слоган сайта, логотип помещается слева от меню:

Наверх ↑

В настройщике вы найдете панель под названием Excerpt Settings:

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

Наверх ↑

Twenty Twenty-One включает два пункта меню:

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

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

Наверх ↑

Главное меню навигации поддерживает описания меню.

Чтобы включить описания меню, перейдите в Внешний вид → Меню , и откройте вкладку «Параметры экрана» вверху страницы.

В разделе Показать дополнительные свойства меню установите флажок Описание:

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

Наверх ↑

Есть два способа добавить значки социальных сетей на ваш сайт:

• Используйте блок социальных иконок в редакторе.
• Добавьте ссылку на сайт социальной сети в меню нижнего колонтитула.

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

Twenty Twenty-One предоставляет значки для следующих социальных сетей:

• 500px
• Amazon
• Bandcamp
• Behance
• Codepen
• DeviantArt
• Dribbble
• Dropbox
• Etsy
• Facebook
9010 9010 9010 Gread 9010 Glick 9010 Google
• Instagram
• Kickstarter
• JSFiddle
• Последний.fm
• LinkedIn
• Mail
• Mastadom
• Medium
• Meetup
• Pinterest
• Pocket
• Reddit
• Skype
• Snapchat
• SoundCloud10 9010
• Twitch 901 Tumbloud 901 9010
• VK
• WhatsApp
• WordPress
• Yelp
• YouTube

Дополнительные значки можно добавить, выполнив действия, описанные в разделе «Добавление значков в Twenty Twenty» в полевом руководстве по темам: WordPress 5.5.

Наверх ↑

Twenty Twenty-One поддерживает одну область виджетов в самом низу каждой страницы. Каждый столбец виджета составляет 33% ширины сайта, до 380 пикселей.

Наверх ↑

Twenty Twenty-One поддерживает форматы сообщений.
Форматы сообщений выбираются в боковой панели настроек редактора → Сообщение → Статус и видимость.

• Standard
• Aside
• Gallery
• Link
• Image
• Quote
• Status
• Video
• Audio
• Chat

Top ↑

Twenty Twenty-One включает стили для языков RTL.

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

  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", без засечек  

• ar, ary, azb, ckb, fa-IR, haz, ps : Tahoma, Arial, без засечек.
• zh-CN : PingFang SC, Helvetica Neue, Microsoft YaHei New, STHeiti Light.
• zh-TW : PingFang TC, Helvetica Neue, Microsoft YaHei New, STHeiti Light.
• zh-HK : PingFang HK, Helvetica Neue, Microsoft YaHei New, STHeiti Light.
• bel, bg-BG, kk, mk-MK, mn, ru-RU, sah, sr-RS, tt-RU, uk : Helvetica Neue, Helvetica, Segoe UI, Arial, без засечек.
• bn-BD, hi-IN, mr, ne-NP : Arial, без засечек.
• el : Helvetica Neue, Helvetica, Arial, без засечек.
• gu : Arial, без засечек.
• he-IL : Arial Hebrew, Arial, sans-serif.
• и : без засечек.
• ko-KR : Apple SD Gothic Neo, Malgun Gothit, Nanum Gothic, Dotum, без засечек.
• th : Sukhumvit Set, Helvetica Neue, Helvetica, Arial, без засечек.
• vi : Libre Franklin, без засечек.

Наверх ↑

Одной из специальных возможностей темы Twenty Twenty-One является поддержка предпочтений цветовой схемы посетителя в настройках его операционной системы или браузера.Эта функция предоставляется по подписке и поддерживается в большинстве операционных систем, включая Android, iOS, OSX, Windows 10, а также в большинстве дистрибутивов Linux.

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

Наверх ↑

Включение темного режима в настройщике # Включение темного режима в настройщике

Чтобы активировать поддержку темного режима, вы можете перейти в раздел «Цвета и темный режим» в настройщике. Если для фона сайта выбран светлый цвет, вы сможете увидеть и активировать настройку Dark Mode Support . Выбранный цвет фона будет применен к светлому режиму, а цвета темного режима оптимизируются автоматически. Вы можете использовать кнопку включения / выключения темного режима в нижней части экрана предварительного просмотра, чтобы переключаться между темными и светлыми схемами в предварительном просмотре.

Наверх ↑

Темный режим в редакторе # Темный режим в редакторе

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

Наверх ↑

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

Наверх ↑

Получите помощь сообщества с Twenty Twenty-One на его форуме поддержки.

Вы также можете прочитать журнал изменений темы.

Экспериментальная оценка размера частиц субстрата биомассы пшеничной и рисовой соломы на выход метана

Авторы

• Рам Чандра Колледж сельскохозяйственной инженерии и послеуборочной технологии (Центральный сельскохозяйственный университет), Ранипул, Гангток — 737 135, Сикким, Индия
• ЧАС.Такеучи Отделение энергетических наук, Научный институт EcoTopia, Нагойский университет, Нагоя 464–8603, Айти, Япония
• Т. Хасегава Отделение энергетических наук, Научный институт EcoTopia, Нагойский университет, Нагоя 464–8603, Айти, Япония
• В. К. Виджай Центр развития сельских районов и технологий, Индийский технологический институт Дели, Хауз Хас, Нью-Дели 110 016, Индия

Ключевые слова:

Аннотация

В данной статье исследуется влияние размера частиц в субстратах на выход метана из биомассы пшеницы и рисовой соломы без какой-либо другой предварительной обработки.Анаэробное переваривание трех субстратов с различным средним размером частиц (MPS) 1,5 мм, 0,75 мм и 0,30 мм биомассы пшеничной и рисовой соломы проводили при мезофильной температуре 37 ^o ° C. Наблюдаемый результат показал, что средний размер частиц 0,30 мм и 0,75 мм увеличивал выход метана на 4,7% и 38,7%, соответственно, по сравнению с размером частиц 1,50 мм пшеничной соломы. Однако в случае субстратов из рисовой соломы выход метана оказался на 7,9% и 13,0% выше, соответственно, для среднего размера частиц 0.30 мм и 0,75 мм по сравнению с размером частиц 1,50 мм. Средний размер частиц 0,75 мм давал самый высокий выход биогаза, а также метана в обоих случаях биомассы, однако пшеничная солома приводила к значительно более высокому выходу метана, чем рисовая солома.

Биография автора

Рам Чандра, Колледж сельскохозяйственной инженерии и послеуборочной технологии (Центральный сельскохозяйственный университет), Ранипул, Гангток- 737 135, Сикким, Индия

Доцент (возобновляемые источники энергии)

Кафедра сельскохозяйственной энергетики и машинного оборудования

Обложка для группы ВКБ: как сделать и поставить шапку сообщества

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

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

Какой должен быть размер чехла в ВК

Рекомендуемый размер обложки для группы ВКонтакте — 1590 × 400 пикселей. Однако владельцы сообщества могут использовать графику других размеров. Например, при просмотре страницы сообщества с компьютера обложка отображается в размере 795 × 200 пикселей. Для пользователей мобильных устройств заголовок сообщества настраивается под размер экрана.

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

Пользователи смартфонов видят «обрезанную» версию обложек сообществ — по бокам обрезано 190-200 пикселей. Создавая графику для веб-мастера ВКонтакте, не забывайте об этой функции, иначе призыв к действию или логотип будут обрезаны, а это негативно скажется как на бренде, так и на конверсии.

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

Что должно быть на обложке вашего сообщества

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

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

Заголовок. Не переусердствуйте с творчеством. Потенциальные подписчики должны сразу понять из заголовка, откуда они взяли и какую полезную информацию они могут узнать от издателя.
Подзаголовок. Вы можете использовать его для расшифровки или дополнения названия. Постарайтесь быть краткими в формулировках.
Логотип. Если у вашей компании красивый и качественный логотип, разместите его в «шапке» группы.Этот элемент повысит узнаваемость вашего бренда.
Контактная информация. Номер телефона или адрес электронной почты также могут быть указаны на обложке группы. Например, если вы занимаетесь доставкой еды на дом и у вашей компании есть единый номер телефона для приема заказов, поместите его в «шапку».
CA фото. Еще один способ сообщить вашему будущему подписчику, что группа будет ему полезна. Однако перед тем, как разместить фотографию или изображение своего центра сертификации, не забудьте проанализировать и составить портреты потенциальных клиентов.
Фотография товара. Если вы собираетесь продавать товары через широкую публику, используйте качественные фотографии товаров в «шапке».

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

Примеры хороших обложек для шапки группы ВКонтакте

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

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

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

Как создать обложку ВК в Canva

Чтобы подписаться на услугу,

Для создания обложки перейдите на главную страницу сервиса: canva.com и активируйте 30-дневный бесплатный период (позже вы сможете отменить подписку и пользоваться услугой бесплатно). Вы можете использовать свою учетную запись Google или профиль Facebook для входа в систему.

Шаг 1 . После входа в Canva приступайте к созданию обложки. Сделать это можно двумя способами — вручную, указав размер «заголовка». Когда вы нажимаете кнопку «Создать обложку для группы ВК», Canva откроет новый шаблон с рекомендуемыми размерами — 1590 × 400 пикселей — и вариантами макета.

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

Шаг 3: Чтобы изменить фон обложки, загрузите изображение в редактор, щелкнув значок «Загрузить» и нажав кнопку «Загрузить собственные изображения».

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

Шаг 4: Чтобы нанести текст на обложку, щелкните значок «Текст» и проверьте типы подписей и шрифтов.

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

Шаг 5. Когда обложка будет готова, сохраните изображение, нажав кнопку «Загрузить» в верхней части меню.

Сервис предложит выбрать формат — PNG, JPG и PDF (стандартный и для печати). Для ВКонтакте лучше использовать первые два формата.

Осталось только нажать на кнопку «Загрузить», и через несколько секунд обложка будет на вашем компьютере.

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

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

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

Не так давно представители ВКонтакте анонсировали еще один яркий способ оформления сообществ — живые обложки.Скорее всего, они со временем вытеснят привычный статичный дизайн. Живые обложки — это коллаж из меняющихся изображений (до 5 штук) или коротких видеороликов. Они отображаются в мобильных приложениях для iOS и Android.

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

для CSS

CSS-спрайтов стали основой современной веб-разработки — и не зря.Они позволяют компилировать несколько ресурсов в один ресурс, сводя к минимуму количество HTTP-запросов и гарантируя, что изображения для таких вещей, как состояния ролловера, уже загружаются при необходимости.

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

Именно этому последнему сценарию будет уделено особое внимание в данной главе.

Лучше всего это пояснить на примере, поэтому давайте посмотрим на меню с соответствующими значками.

Меню пунктов с иконками

Меню HTML

  

    
 Входящие 
    
 Черновики 
  

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

Меню CSS

  .menu li {
    фон: url (/img/sprite.png) no-repeat 0 0;
    отступ слева: 20 пикселей;
}

.menu .menu-inbox {
    background-position: 0 -20 пикселей;
}

.menu .menu-draft {
    background-position: 0-40 пикселей;
}
  

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

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

• Мы стали полагаться на очень специфическую структуру HTML: элемент списка.
• Спрайты пришлось переопределить для использования в других модулях.
• Расположение внутри элемента было очень хрупким: увеличение размера шрифта могло показать другие части спрайта.
• Обработка интерфейсов справа налево была более сложной, поскольку мы могли использовать только горизонтальные спрайты и фиксировать положение x на 0.

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

Реструктуризация HTML для создания модуля значков

  
  Входящие 
  

Многие люди, скорее всего, воздержатся от использования тега i . Я решил использовать его, потому что он был маленьким, в основном лишенным семантики, и был пустым элементом без содержимого. Почему нет контента? В этом примере значок поддерживает видимый текст рядом с ним.Если бы значок располагался отдельно, мы бы добавили атрибут заголовка, чтобы его можно было прочитать программой чтения с экрана или использовать в качестве всплывающей подсказки. Если вы не согласны и считаете, что интервал более уместен, я пойму.

Благодаря тому, что к нему применен один тег с различными классами значков, он больше не имеет других зависимостей HTML. Это хорошо. Но почему три разных класса? Каждый из них играет немного разную роль, и все в конечном итоге объединяются, чтобы имитировать традиционный элемент img .

Модуль значков CSS

 .ico {
    дисплей: встроенный блок;
    фон: url (/img/sprite.png) без повтора;
    высота строки: 0;
    вертикальное выравнивание: снизу;
}

.ico-16 {
    высота: 16 пикселей;
    ширина: 16 пикселей;
}

.ico-inbox {
    background-position: 20px 20px;
}

.ico-drafts {
    background-position: 20px 40px;
}
  

Класс ico определяет основы преобразования элемента во встроенный блочный элемент, что и есть изображение. Вам может потребоваться настроить vertical-align , чтобы значок правильно располагался относительно текста.Internet Explorer имеет проблемы с применением inline-block для блокировки элементов. Поскольку мы применяем его к встроенному элементу, у него нет такой же проблемы. В качестве альтернативы вы можете использовать {zoom: 1; дисплей: встроенный; } для блочных элементов в IE, чтобы они вели себя как строчные блочные элементы.

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

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

Спрайт с плотно упакованным изображением

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

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