Как создать меню в группе в вк: Как создать меню в группе Вконтакте

Разное 

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

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

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

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

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

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

Минимальный размер аватара – 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 МБ;
  • кодек h.264;
  • звук AAC.

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

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

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

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

1280 на 720 пикселей.


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

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


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


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

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

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


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

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

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


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


Как оформить шапку страницы

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

Обложка

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


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

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

Примеры динамических обложек:

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

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

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

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

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

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

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


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

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

Вот как выглядит закрепленный пост в шапке страницы Flatro:


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

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

А вот что мы видим, когда кликаем по нему:

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

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

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

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

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

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

Скрытое меню

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

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

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

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

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

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

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

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

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

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

Скидки и акции

Кейсы, отзывы клиентов

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

Розыгрыши

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

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

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

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

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

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

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



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



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



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


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

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



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


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


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

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

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

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


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


Номер телефона компании


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


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


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


Акции


Конкурсы


Вакансии


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

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

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


    4. Еще один вариант – поделить аватар на две части. Одна – для миниатюры, а вторая – для остальной части аватара.


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


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



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

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

Домен сайта


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


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


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


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


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


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


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


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


Информация о предстоящих мероприятиях


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


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


Хвасты


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

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

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

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


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


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


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


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


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


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


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

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

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

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




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

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

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

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

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

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

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

1. Fotor.com



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



Вставляем ее в шаблон, выделаем левой кнопкой мыши, выбираем команду Layer (иконка бутерброда) и кликаем по Move to bottom. Таким образом наша картинка будет идти фоном, а все надписи наложатся поверх нее.


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


Затем жмем на иконку в виде дискеты, выбираем название, формат изображения, качество и жмем на кнопку Sign in to download.


2. Canva.com

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


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


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


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


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

С недавнего времени «ВКонтакте» можно верстать статьи в специальном редакторе. Чтобы создать статью, необходимо нажать на букву «Т»:


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

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

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

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


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

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

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

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

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

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

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

И сохраните, для web-устройств.

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

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

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


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

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

[] [] []

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

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

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

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

Вот что у меня получилось:

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

[][][]

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


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

[][][]

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

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

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

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

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

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

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

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

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

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

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

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

Путь #3. Сделать все самостоятельно

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

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

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

Шаг #0. Общие сведения о том, как устроены меню групп ВК

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

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

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

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

https://vk.com/wall-XXX ?own=1

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

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

http://vk.com/pages?oid=-ID_группы &p=Нaзвание_страницы

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

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

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

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

http://vk.com/page- ID_группы _XXX ?act=edit&section=edit

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

Шаг #2. Делаем простое меню для группы ВКонтакте

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

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

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

clubID_группы

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

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

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

Шаг #3. Где можно размещать вики-страницы ВКонтакте

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

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

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

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

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

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

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

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

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

[]

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

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

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

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

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

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

Шаг #4. Как сделать меню в группе ВКонтакте. Графическое

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

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

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

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

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

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

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

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

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

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

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

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

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

Меню в паблике? Проще простого!

Пересмотрите еще раз статьи: и , сейчас нам пригодятся эти знания!

3 шага к красивому меню паблика!

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

Шаг №1: Создаем внутреннюю страницу меню

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

Вариант 1: (обычный)

http://vk.com/pages?oid=- XXX &p=Нaзвание_страницы

где XXX — ID Вашей публичной страницы,

а «Название_страницы» — любое слово, которым будет названа страница

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

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

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

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

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

Шаг №2: Создаем пост на стене

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

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

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

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

Шаг №3: Закрепляем пост

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

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

vk.com/frilkacom

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

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

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

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

Чем является Wiki-разметка?

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

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

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

Способы создания вики-разметок

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

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

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

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

Как сделать меню в группе в ВК, которое было бы красивым? В социальной сети «ВКонтакте» вставить фотографию или картинку при помощи вики-разметки предоставляется возможным только в тех случаях, когда они загружены в фотоальбомы сайта. Итак, заходим в него, выбираем нужную фотографию и копируем её адрес. К примеру, пускай он будет такой: photo12345_67890. Теперь необходимо его взять в двойные Должен получиться такой результат: []. А что, если к фотографии или картинке следует прикрепить текст или ссылку? А может, есть желание немного отредактировать внешний вид? Тогда с этим поможет следующее: необходимо, чтобы у файла был такой вид — [[ photo12345_67890|options|text/link]]. Вместо трех последних слов подставляется то, что надо. Text — пишем то, что нужно. Думается, особенных объяснений не надо. Link переводится с английского как «ссылка». Указывается для того, чтобы машина пользователя знала, куда ей необходимо идти. Options — здесь могут устанавливаться такие значения:

  1. Plain — ссылка на изображение оформлена как текст, в ней отсутствует картинка.
  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]]

|-
|}

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

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

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

Заключение

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

Как сделать меню в группе Вконтакте: пошаговая инструкция.

1. Меню для группы Вконтакте: первый этап.

Первым делом необходимо зайти на вашу личную страницу на сайте Вконтакте. Далее заходим в группу, в которой необходимо создать меню. В группе выбираем вкладку «Управление сообществом», на появившейся странице меняем статус у позиции «Материалы» — выбираем значение «Открытые». Жмем кнопку «Сохранить».

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

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

2. Как создать меню в группе Вконтакте: технические особенности.

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

[[photo-******_******|300x225px;nolink;noborder|Название изображения]],

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

Если вам необходимо, чтобы щелкая по картинке, пользователи переходили по внешним ссылкам, создается несколько иной код:

[[photo-******_******|370x132px; noborder; nopadding|http://www.URL/ваша ссылка.ru]].

3. Как сделать меню в группе ВК: эстетические моменты.

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

Возможно, Вам также будет интересная статья «Как раскрутить группу ВК».

Похожие статьи

Узнаем как изготовить меню в группе в ВК: вики-разметка

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

Чем является Wiki-разметка?

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

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

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

Способы создания вики-разметок

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

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

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

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

Как сделать меню в группе в ВК, которое было бы красивым? В социальной сети «ВКонтакте» вставить фотографию или картинку при помощи вики-разметки предоставляется возможным только в тех случаях, когда они загружены в фотоальбомы сайта. Итак, заходим в него, выбираем нужную фотографию и копируем её адрес. К примеру, пускай он будет такой: photo12345_67890. Теперь необходимо его взять в двойные квадратные скобки. Должен получиться такой результат: [[photo12345_67890]]. А что, если к фотографии или картинке следует прикрепить текст или ссылку? А может, есть желание немного отредактировать внешний вид? Тогда с этим поможет следующее: необходимо, чтобы у файла был такой вид — [[ photo12345_67890|options|text/link]]. Вместо трех последних слов подставляется то, что надо. Text — пишем то, что нужно. Думается, особенных объяснений не надо. Link переводится с английского как «ссылка». Указывается для того, чтобы машина пользователя знала, куда ей необходимо идти. Options — здесь могут устанавливаться такие значения:

  1. Plain — ссылка на изображение оформлена как текст, в ней отсутствует картинка.
  2. Noborder — убирается рамка около фотографии.
  3. Box — изображение открывается в окне.
  4. Nolink — ссылка на фотографию убирается.
  5. Nopadding — пробелы между изображениями не отображаются.
  6. NNNxYYYpx или NNNpx — указывают, какой размер будет иметь картинка в пикселях. Первый вариант предусматривает ширину и высоту. При желании можно «сжать» картинку. И второй вариант предусматривает редактирования ширины.

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

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

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

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

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

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

{|
|-
|<center>”’Новое в науке”’</center>||
|-
!<center>[[photo12345_67890|nolink;noborder;150x70px| ]]</center>!!
|-
|<center>
[[Новости науки|Новости]]<br/>
[[Открытия]]<br/>
|<center>
[[Конференции]] <br/>
[[Разработки]]<br/>
[[Книги]]<br/>
[[Симпозиумы]]<br/>
|<center>
Разделы:<br/>
[[Медицина|1]] | [[Физика|2]] | [[Математика|3]] | [[Экономика|4]]<br/>
[[Химия|5]] | [[Биология|6]] | [[Программирование|7]] | [[Электротехника|8]]<br/>
|-
|}

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

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

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

Заключение

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

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

В сегодняшней публикации мы поговорим о том, как сделать красивое и качественное меню в группе Вконтакте. Сегодня ВК – это не просто площадка для общения со своими друзьями, количество которых всегда можно увеличить, воспользовавшись данным сервисом от студии пиара socprka.ru. Вконтакте – это отличный инструмент для продвижения своей продукции, бренда, идеи и т.п. Во Вконтакте создаются и развиваются самые разные группы, поэтому нужно как-то выгодно выделяться на фоне конкурентов. Очевидно, главное – это умение заинтересовать потенциальных подписчиков (клиентов). Нужно сделать так, чтобы они возвращались на вашу страничку. Некачественная и плохо оформленная группа этому точно не поспособствует, поэтому нужен высококачественный, что называется, эффективный, дизайн. Если не хотите тратить время на изучение азов дизайна Вконтакте, обращайтесь к нам. Специалисты SocPRka сделают вашу группу неповторимой. Заказывайте тариф «Вип» или «Премиум», которые предусматривают создание меню для группы. Если нет возможности оплатить услуги профессионалов, тогда читайте внимательно данную инструкцию.

Посмотрите на верхний рисунок. Это пример красивого кликабельного меню в группе Vkontakte. Здесь и красивые цвета, и запоминающаяся картинка, и само меню. Для того, чтобы такое сделать, нужно хорошо знать две вещи: Фотошоп и вики-разметку. Даже и вики-разметку знать не обязательно, так как существуют сервисы, при помощи которых можно эту самую разметку скопировать с понравившегося меню другой группы. Один из подобных ресурсов расположен по адресу: «vkmaster.zf-projects.ru» (нижний скриншот). На сайте есть множество отличных функций: зачеркивание текста ВК, дата регистрации, дата рождения, поиск ВУЗов, код wiki-страницы и др.

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

Сделать меню для группы Вконтакте в 2018 году стало проще

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

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

  • menumaker.pw.
  • vkprofi.ru.

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

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

  • Находим группу с красиво и качественно оформленным меню.
  • Копируем в буфер ссылку на страницу с меню.
  • Далее заходим по ссылке: «vkmaster.zf-projects.ru/wiki-pcode». Вставляем скопированную ранее ссылку в специальное поле.
  • Нажимаем кнопку: «Узнать».
  • Чуть ниже появится поле с кодом wiki-страницы.
  • Копируем данный кусок кода (смотрите скрин внизу).

  • Переходим на свою страничку редактирования свежих новостей на главной странице группы. Вставляем код, редактируем его под свои адреса ссыллок и анкоры.

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

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

Как создать меню вконтакте. Делаем скрытое меню открытым

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

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

Я понимаю что фотошопом не все владеют, тогда поищите на просторах интернета просто картинки по теме. Принципиального отличия нет. Просто сложнее картинки подобрать.

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

Этап1.

Создать в фотошопе новый документ размером приблизительно 700х800 пикселей, залить  его белым цветом. Вырезать в слое два окна 200х710 пикселя и 382х442 пикселя простым выделением и командой дел. Хочу уточнить, что высота может и меняться, в зависимости от картинки и Вашего желания. На нижнем слое должна быть нужная иллюстрация. Совместим прямоугольники по низу.

Теперь можно написать нужный текст и поместить кнопки меню в нужное место.

Вы видите, что я создала 2 кнопки.

 


Правый прямоугольник можно сохранить отдельной картинкой размером 200х710 пикселя. Ее загружаем в правый верхний угол группы, где написано Загрузить фотографию. Левая картинка нуждается в нарезке. У меня получается две, у Вас может быть и больше. Высоту делайте не меньше, чем 50 пикселей.

Этап 2.

Загружаем наши три картинки в альбом странички вконтакте или группы. На странице группы видим Свежие новости и кликаем Редактировать.

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

 

и вставляем следующее.

[[photo-номер|размер px;nopadding|ссылка/]]

Для каждой картинки своя строчка. Внимание! Создавать эти записи надо только в текстовом редакторе! Не в ворде. У меня получилось такое.

[[photo-55593982_328727262|382x144px;nopadding|http://vkpluss.ru/]]

[[photo-55593982_328727264|382x88px;nopadding|http://vkpluss.ru/glavnaya/]]

Не забудьте сохранить.

Где брать номер картинки? Если правой клавишей кликнуть по картинке и открыть ее в новом окне, то в браузере увидите номер такого вида https://vk.com/photo156539370_328142608. Это он. Если там будут какие-то еще значки, их не надо учитывать.

Все готово! Единственно меню получается скрытое меню. Надо кликнуть на меню чтобы увидеть всю красоту!

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

Этап 2.

Если нам не нужное скрытое меню, делаем открытое.

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

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

Надо ее скопировать.

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

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

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

Все очень просто! Теперь Вы знаете как создать красивое меню вконтакте.

Удачи!

P.S. Если у вас нет фотошопа, можно скачать бесплатно(без смс и так далее) графическое приложение gimp-org. 

 

 

 

P.S. Небольшая тренировка мозга

Когда человек находится дома без головы?

Ответ на задачу

Читайте также:

http://vkpluss.ru/poleznaya-informaciya/kak-sozdat-menyu-vkontakte-delaem-skrytoe-menyu-otkrytym.htmlНадеждаСофт и просто полезноескрытое меню открытым,создать меню вконтакте

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

Надежда Трофимова[email protected]Блог vkpluss.ru

Меню группы в ВК: как сделать и настроить, как убрать | IM

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

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

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

Что можно добавить в меню

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

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

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

Как настроить

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

Шаг 1. Зайдите в настройки сообщества: «Настройки — Меню».

Шаг 2. Нажмите «Новая ссылка».

Шаг 3. Настройте ссылку по пунктам:

  • Загрузите обложку (минимальные размеры 376х256 пикселей).
  • Введите название (до 20 символов).
  • Укажите адрес ссылки.

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

Как удалить или изменить ссылку в меню

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

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

Как использовать

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

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

Как отключить или убрать меню в группе ВК

Меню, в целом хорошее начинание, но с одной большой оговоркой.

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

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

По материалам: internet-marketings.ru

Вики разметка ВКонтакте, wiki-разметка

Сегодня проработаем очень интересную и важную тему — вики разметка ВКонтакте, т.е. создание wiki-страниц и работа с ними.

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

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

Переходим в «Управление группой», в раздел «Настройки»

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

Имейте ввиду, что при включении «Материалов», стандартное меню сообщества не будет видно вашим подписчикам.

Выбор всегда за вами.


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

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

Вики страница прописывается следующим образом:

[[Название]]

Или с указанием текста:

[[Название|Текст ссылки]]

На новых вики-страницах,  картинки можно размещать шириной не более 607 px, а код  объемом не более 16300 знаков.

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

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

И в двойных квадратных скобках прописать название ваших страниц, примерно так:

[[декоративная косметика]]

[[уход за кожей]]

[[контакты]]

 

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

Затем, перейдите в группу и обновите страницу ВК!  Откройте «Свежие новости» или ту страницу, которую вы переименовали.

Редактирование вики разметки ВКонтакте

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

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

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

Вставьте заготовленный текст и отформатируйте его.

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

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

Если вам не нужно, чтобы картинка увеличивалась — перейдите в режим вики разметки и добавить в код картинки, после размера , код   ;nolink

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

Сохраните все ваши оформленные страницы и ссылки на них из строки браузера.

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

А ваши вики страницы можно вставить в раздел ссылки или через «Приложения» в новые «Виджеты».

Будет хороший информативный блок.

 

P.S.  Надеюсь вам понравилась эта информация!

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

Поделиться ссылкой:

Понравилось это:

Нравится Загрузка…

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

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

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

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

На сегодняшний день создано несколько типов меню:

  • Открыть с активными точками;
  • Закрыто в виде фиксированной записи;
  • С отдельными картинками или общей смежной картинкой баннера и меню.

Суть создания обоих вариантов одинакова. Только основное отличие в дополнительных элементах и ​​типах записи и об этом будет подробнее в этой статье.

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

Закрытое меню группы ВК

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

Вид меню будет следующим:

Открыть меню группы (фиксированный материал)

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

Как сделать красивое меню для Группы ВКонтакте: Пошаговая инструкция

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

  • Для аватара 200×332 пикселей;
  • Для баннера главного меню 395×282 пикселей.

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

Для того, чтобы было понятно, если высота основной группы Аватаров 332, то возьмем от нее 50 и получим высоту главного меню 82. Если размер не имеет значения, то высота может быть произвольной.

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

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

Создайте новую ткань в Photoshop с размерами 600×350 пикселей, которую мы будем использовать в качестве трафарета, чтобы вырезать в ней отверстия для наших картинок. Для работы нам необходимо перевести размеры всех элементов и линий в пиксели и это делается следующим образом: «Edit-Installation-Main» и вот уже выставляем пиксели.

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

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

Должно произойти следующее:

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

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

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

Итак, вернитесь в фотошоп и создайте новый холст размером 400×300 пикселей. После этого выберите в разделе: File-place и выберите картинку для фона меню.

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

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

Обратите внимание, что у вас должно быть:

  • Материалы открыты в «ограниченном» режиме;
  • Включены обсуждения;
  • Папка с фотографиями открыта для всех.

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

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

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

Совет: Важным моментом после загрузки изображений является удаление отступов.Это решается вставкой «nopadding» перед размером изображений.

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

[]
Где xxxxx — ID вашей картинки
yyyyy — ширина в пикселях (не более 388)

В итоге должно получиться так:

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

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

http://vk.com/page-116682062_51411604?Act=Edit&hid=183950676&section\u003dedit

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

Перейти на главную страницу и сделать следующее:

Шаг номер 1.

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

Шаг номер 2.

Для записи прикрепляем изображение нашей вилки для меню и нажимаем Отправить.

Шаг номер 3.

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

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

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

В итоге получаем это меню.

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


ВАЖНО: После изменения дизайна ВК в 2016 году внесены новые изменения при создании изображений и требований к изображениям которых.

Скачать шаблон меню ВКонтакте + Все исходники урок

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

Применяю видео для консолидации читал -))).

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

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

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

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

У нас будет такой простой фон.

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

Чтобы открыть файл в редакторе, нужно нажать «Файл», затем «Открыть»… «и выберите нужный рисунок.

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

  1. Далее макет меню нужно разрезать на части, выбирая кнопки, с помощью которых можно переходить в нужные разделы. Для этого вам нужно использовать инструмент «Slice Tool». Нажмите на букву «С» и выберите вырезку (правая кнопка мыши на элементе).

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

  2. Теперь получившееся изображение нужно сохранить. Для этого нужно выбрать «Файл», затем «Сохранить для Интернета и устройств» или заменить эти действия комбинацией клавиш Alt + Ctrl + SHIFT + S .
  3. В настройках при выборе типа файла нужно выбрать JPEG, качество максимальное, поставить галочки напротив «прогрессивный» и «встроенный профиль», затем нажать «Сохранить».Теперь получается такое количество изображений, сколько частей было нарезано.
  4. Готовый фрейм для меню группы ВКонтакте создан, осталось скачать его прямо в саму группу. Для этого вам необходимо загрузить изображение в групповой фотоальбом с помощью стандартной загрузки. Здесь нужно учесть следующий момент: при загрузке в альбом фотографий необходимо соблюдать порядок, в котором они расположены.
  5. Затем вам нужно перейти в раздел «Свежие новости», который находится над разделом «Фото».Если у вас нет этого раздела, вам необходимо войти в раздел «Управление сообществом» в группе и убедиться, что раздел «Материалы» подключен.
  6. В разделе «Новости» нужно нажать на кнопку «Редактировать», откроется текстовый редактор. В редакторе нужно зарегистрировать свой заголовок, а также включить режим Wiki-разметки. Wiki-time — это специальный язык разметки, используемый для разработки текста на веб-сайтах. Чтобы включить разметку вики, необходимо щелкнуть значок ромба.
  7. В режиме редактирования нужно выбрать «исходный код», проще всего в нем сделать меню группы ВКонтакте.
  8. Для того, чтобы собрать меню в единое целое, нужны ссылки на фото каждой части меню. Чтобы узнать, нужно открыть фотографию в альбоме и посмотреть строку браузера. Теперь вам нужно скопировать эти ссылки, но вы должны копировать не всю ссылку целиком, а только ее часть, содержащую слово фото и числа. Например: Photo5634052_195301019.

  9. Скопированную ссылку необходимо вставить в исходный код в меню. Ссылку обязательно прописать в квадратных скобках!
  10. Следующий знак | и прописано 370px, затем выставляется знак; И прописаны следующие теги: NOBORDER и NOPADDING.

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

noborder. — Это тег, очищающий фрейм (может не прописываться, если нужно, чтобы фрейм остался).

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

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

  1. В разделе «Исходный код» код необходимо указывать столько раз, сколько необходимо для создания разделов.При этом ссылка на фото (меню изображения) и ссылка перехода меняются в прописанном коде.
  2. Нажав на кнопку «Просмотр», вы можете увидеть, как будет выглядеть меню.

Хотите быть умнее других? Зарабатывать больше? Подробнее:

  • ? Вы тоже не в курсе?
  • . Конечно пригодится.
  • . У вас тоже нет звонка?


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

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

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

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


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


Справа, так что в будущем эта часть будет группой аватаров.


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


Желательно нарезать примерно.


После вырезания сохраняем файл не просто а через «Сохранить для Интернета и устройств …» (или Alt + Shift + Ctrl + S) он создаст папу со всеми нарезанными файлами.


Сейчас мы не переходим в группу, нам еще нужно создать вики-разметку.Или, другими словами, создайте страницу.

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

Откройте новую вкладку браузера и вставьте такую ​​ссылку: http://vk.com/pages?Oid\u003d-xxx&p\u003d_starter, где XXX — это идентификатор вашей группы. Например, у меня было так.
http://vk.com/pages?Oid=-

542&p=May


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


Но между картинками есть пробелы, чтобы убрать пробелы — входим в режим Wiki-разметки (это сверху в правом углу знак кавычек) Вводим такой тег «Option; nopadding;» До размера фото. например []


А оказалось все вместе.


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


Нажми, чтобы сохранить, посмотри что получилось, у меня все вышло если перейти по ссылкам «https://vk.com/page-

542_49969122″


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


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

И снова рад вас приветствовать!

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

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

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

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

Итак. Вот основные шаги:

  • Продумайте главное меню
  • Выбрать изображение
  • Фотошоп (без фотошопа как всегда нигде)
  • Резка изображения
  • Заливка изображений в альбом контактов

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

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

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

В моем примере я использовал фон девушки и разместил слева от него 3 кнопки. Каждая кнопка — имела свое название.

Мое меню состояло из следующих пунктов:

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

Выберите этот инструмент и начинайте «резать». Получилось 4 части. (самая простая вещь что придумала 🙂 хотя можно и на части разрезать)

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

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

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

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

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

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

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

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

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

А сегодня все.Перед общением!

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

Итак, как быстро сделать регистрацию?

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

Если у вас есть фотошоп, и вы знаете, как им пользоваться, все еще проще. Я сделал в Paint.

Нужно определиться с размерами меню и аватарками по длине. Хорошо, что они закончились на одном уровне. С шириной все стандартно. Ширина меню — 382 пикселя. Ширина аватарки — 200 пикселей.

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

В окне редактирования загрузите части будущего меню.

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

Например:

[]
фото 239952196_322501460. — Это ссылка на фото.
400 пикселей 72. — это размер фотографии
nopadding — это тег, очищающий промежутки между картинками
страница — 11053617_29800171 — это ссылка, по которой пользователи группы будут переключаться на этот текст на картинке .Вы также можете узнать, как и ссылку на фото, просто открыв нужную страницу и скопировав ее из верхней адресной строки браузера.

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

Еще меню сделал.

Вывод: все просто. Иди актив идет!

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

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

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

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

Дизайн меню

Позволяет создать основу для будущего проекта. Для выполнения этой части работы приветствуется знание такой программы, как «Adobe Photoshop». Так выглядит шаблон размеров, в котором мы будем воплощать будущее красивого меню.

Ширина аватара — 200 пикселей, высота — 500. Картинка главного меню — 510 * 308. В итоге получаем вот это красивое «меню» в конце.

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

Этот источник макета PSD был реализован, например.Скачать.

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

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

Заходим в раздел «Изображение» и выбираем операцию «Обрезка».

На выходе получаем:

Имея большой вес, получившееся изображение можно использовать в инструменте «Сохранить для Интернета». Команда также находится в разделе «Файл».

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

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

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

«Разрежьте» нашу картинку на соответствующие части. В нашем случае их будет три.

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

Wiki-разметка готового меню во «ВКонтакте».

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

Тогда обязательно проделаем следующую последовательность действий. Заходим в «Управление сообществом» и в разделе «Разделы» напротив кнопок «Материалы» выбираем «ограниченный».

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

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

Заходим в раздел «Свежие новости», выбираем «Редактировать» и попадаем в меню редактора.

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

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

Общая структура каждой нарезанной части в разметке следующая — [], где:

    iD — идентификатор (номер) загруженных вами картинок;

    X и y — размер изображения по горизонтали и вертикали в пикселях;

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

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

… который автоматически размещает все части меню в центре страницы!

Поскольку тег, центрированное изображение, мы уже оставили в покое, чтобы избавиться от «неприятных» расстояний между частями общего изображения, вам следует вставить тег «NOPADDING» следующим образом: []

Вот что в итоге и происходит.

Теперь вы должны щелкнуть вкладку «Группа», затем «Изменить».

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

Зайдите на главную страницу, нажмите «Добавить запись». Не забудьте сразу сменить автора записи!

Щелкните «многоточие» справа от записи и щелкните вкладку «Закрепить».

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

При нажатии на «Открыть меню».

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

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

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

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

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

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

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

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

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

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

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

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


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

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

[] [] []

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

… — Эти теги выравнивают наше меню по центру. Если их убрать, меню визжит к левому краю.

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

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

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

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

[] [] []

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


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

[] [] []

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

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

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

Группы

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

При создании группы ВКонтакте необходимо сделать следующее:

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

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

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

Настройка.

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

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

2. Новое поле в группе.

После настройки в вашей группе должно появиться новое поле «Свежие новости»:


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


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

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

Для примера воспользуемся программой Photoshop. и создайте новое меню. После открытия графического редактора создайте новый файл и установите примерные размеры 700 на 1050. После этого добавьте фоновый узор и нарисуйте кнопки меню с надписями:


4. Разделение картинок по частям.

Для того, чтобы отдельные элементы картины с медью нам понадобился «режущий» инструмент:

С помощью этого инструмента выберите область вокруг каждой кнопки:

Теперь выберите в меню специальное меню сохранения:

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

5. Вставка изображений.

Теперь вернемся в Полевой редактор «Свежие новости» и добавим туда картинки:


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

6. Установка кода.

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


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


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


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

Дизайн группового меню, полезные советы.

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

  1. После создания вики-разметки (кода меню) сохраните ее в текстовый файл. Вдруг что-то пойдет не так, появится возможность восстановить меню.
  2. В интернете легко найти шаблон группового меню ВКонтакте. Это пригодится всем, кто не умеет работать с фотошопом и другими графическими редакторами.
  3. Также для облегчения работы кнопки меню для группы ВКонтакте можно скачать в Интернете и просто установить их на любой фон.
  4. Не делайте слишком маленькие снимки для меню, лучше наоборот использовать огромный формат, иначе качество теряется.
  5. Ширину меню лучше не делать больше 610 пикселей, иначе оно может некорректно отображаться на странице.
  6. Для работы с Wiki-разметкой существуют специальные редакторы, но их нужно уметь разбираться отдельно, они созданы для профессионалов.
  7. Не торопитесь заканчивать работу в графическом редакторе, пробуйте разные цветовые гаммы, шрифты, фон и так далее.
  8. Меню в группе ВК выглядит лучше, если совместить его с аватаркой. Для этого нужно настроить размер рисунка.

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

Красивое групповое меню за 100 рублей

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

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

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

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

  1. Предварительный просмотр сгенерированного меню справа. Устанавливайте параметры, пока не получите желаемый результат, а затем нажмите кнопку «Загрузить меню»:

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

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

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

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

Wiki-разметка и фотографии для скачивания в отдельном альбоме.

Ошибки при создании группового меню ВКонтакте

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

Ошибка 1.

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

Ошибка 2.

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

Ошибка 3.

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

Ошибка 4.

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

Ошибка 5.

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

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

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


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

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

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

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


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


Справа, так что в будущем эта часть будет группой аватаров.


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


Желательно нарезать примерно.


После вырезания сохраняем файл не просто а через «Сохранить для Интернета и устройств …» (или Alt + Shift + Ctrl + S) он создаст папу со всеми нарезанными файлами.


Сейчас мы не переходим в группу, нам еще нужно создать вики-разметку. Или, другими словами, создайте страницу.

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

Откройте новую вкладку браузера и вставьте такую ​​ссылку: http://vk.com/pages?Oid\u003d-xxx&p\u003d_starter, где XXX — это идентификатор вашей группы. Например, у меня было так.
http://vk.com/pages?Oid=-

542&p=May


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


Но между картинками есть пробелы, чтобы убрать пробелы — входим в режим Wiki-разметки (это сверху в правом углу знак кавычек) Вводим такой тег «Option; nopadding;» До размера фото. например []


А оказалось все вместе.


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


Нажми, чтобы сохранить, посмотри что получилось, у меня все вышло если перейти по ссылкам «https://vk.com/page-

542_49969122″


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


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

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

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

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

Есть много примеров создания навигации в группе. Что ж, теперь приступим к практике.

Создать меню

Необходимые настройки в группе

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

На своей странице Вконтакте в левом столбце нажмите на пункт «Группа» и выберите свою группу из списка.Затем под аватаром нажмите три вертикальные точки и выберите из списка «Управление сообществом».

Теперь в меню справа перейдите в раздел «Разделы» и в полях «Обсуждение» и «Материалы» выберите «Открыть» или «Ограничено». Щелкните «Сохранить».

Подготовка изображений для меню и аватарок в Photoshop

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

Меню может быть продолжением изображения, которое стоит на аватаре;

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

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

Откройте Photoshop и создайте в нем новый файл — Ctrl + N. Установите значение ширины 760, высоты 500 пикселей.

Теперь, используя инструмент Slice Tool, вам нужно разрезать лист на несколько областей. Выделите инструмент справа и дважды щелкните по нему, чтобы открыть окно из меню. Установите значение ширины — 200, высоты — 500.Это будет аватар нашей группы.

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

Выделяем область слева вверху. Для него ширина 510, высота 182. Эта область нашего изображения соответствует группе области, в которой написано название группы, статус, показывать какие-то вкладки.То есть нам это тоже не нужно.

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

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

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

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

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

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

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

На этом этапе вы можете в области справа (аватар) добавить логотип компании или красиво написать ее название.

Сохраните созданный образ: Файл — Сохранить для Интернета и устройств или используйте комбинацию клавиш Alt + Shift + Ctrl + S.

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

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

Затем вернитесь на главную страницу группы и выберите Аватар — «Загрузить фото». Это одно из изображений, которые мы только что сделали в Photoshop.

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

Создание меню с использованием вики-разметки

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

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

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

После этого он появится на странице редактирования.

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

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

Здесь вы удаляете все ненужные теги, например

И убираете промежутки между всеми строками. Теперь посмотрите на верхний снимок экрана — у нас есть промежутки между добавленными изображениями. Чтобы их убрать, перед размером картинки напишите nopadding и поставьте «;».

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

Это будет похоже на код после добавления «nopadding;» и ссылку.

В итоге должно быть так: Название вкладки (МЕНЮ) изменено, пробелы между строками убраны, пробелы между изображениями убраны (nopadding;), добавлены ссылки. Нажмите «Сохранить страницу» и вернитесь на главную страницу в группе.

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

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

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

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: как сесть в голову подписчикам и полюбить их бренд».«

Wika markup — это инструмент форматирования текста в Публикациях ВКонтакте.

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

Подробнее о Вика-разметке ВКонтакте

Что еще можно делать с этим контентом:

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



Как сделать разметку вики

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

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

Как самому создать публикацию

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

Далее воспользуйтесь ссылкой http://vk.com/pages? Oid = — ******* & p = my. Замените на нем адрес сообщества. Вместо звездочек вставьте свой ID, а название замените на название раздела. Обратите внимание, что он не будет изменен. Можно писать по-русски, с пробелами и цифрами.

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

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

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

  • — жирный шрифт.
  • — курсив.
  • — подчеркивание.
  • — Ссылка.

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

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

Если хотите прикрепить большую картинку К заметке снова откройте настройки, нажмите на камеру и поставьте соответствующую иллюстрацию.

Меню

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

Чтобы изменить фото на предметах, воспользуйтесь услугой IMGONLINE. Скачайте их и загрузите в редактор. Не забываем нажимать. Если вы хотите объединить их так, чтобы между ними не было границ, введите каждое nopadding. После этого добавьте ссылку на раздел, на который ведет кнопка.

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



Таблицы

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

Прочие знаки:

  • | — — Начало новой строки. Ставить после (|.
  • | — Простая клетка.
  • ! — Ячейка с выделенным, центрированным текстом.
  • | + — заголовок в центре.

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

  • NOBORDER — Отсутствие видимых рамок.
  • Номаргин — увеличивает стол в ширину материала.
  • Nopadding — Уменьшает отступы в ячейках.
  • Fixed — исправляет ширину.

Пример.

Коды разметки Wika

Так заголовки, отступы, списки, разделительная линия и подпись на вики-языке выглядят так и в первой версии.

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

  • Не оформлять контент в визуальном редакторе. Из-за перехода в этот режим сбиваются настройки: пропадают теги, сбивается размер картинок.
  • e Добавьте к названию ненужные знаки: «+», «_». Они подвергаются перекодированию, в результате чего меню может сломаться.
  • Сократите длинные ссылки с помощью этой службы. Домен первого уровня должен состоять не более чем из 6 символов.

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

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

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


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

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

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

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

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

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

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

Довольного моря, начинаем воплощать идею жизни!

Создание группы

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

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

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

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

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

Все. Группа создана!

Теперь можно приступить к разложению.

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

Этот этап можно разделить на 2 части: графическую и техническую. Для работы нам понадобится шаблон для создания группового аватара и меню, а также немного фантазии и базовые фото фотошопа (это Adobe Photoshop).

Шаблон разметки

Какой шаблон от себя и что это вообще такое? Шаблон представляет собой нечто вроде пустого. В данном случае в формате * .psd мы отметили области для меню и группы аватарок.

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

Для наглядности приведу пример.

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

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

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

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

На левом фрагменте (там, где надпись «Меню») тоже можно добавить несколько триггеров.В этом случае я решил обойтись без них. Все. Дизайн аватара готов. Нажимаем в Photoshop SHIFT + Ctrl + Alt + S разрушающие горячие клавиши и сохраняем наши фрагменты в папку на жестком диске.

Первый этап работы с графикой завершен. Вернуться к контакту.

Установка аватара и меню для группы

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

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

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

Эти числа после «? Gid =» — это ID желаемой группы.Вставляем полученное значение в форму скрипта и пишем имя страницы, которую хотим создать. В этом случае я вожу «Меню».

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

Если все сделано правильно, откроется эта страница.

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

Написал «Меню» и моя страничка после сохранения стала выглядеть вот так.

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

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

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

Wiki-разметка меню группы ВКонтакте

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

Не буду подробно останавливаться на том, как именно собрал меню. Вот что я сделал.

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

Разрезаем изображение на фрагменты и сохраняем их.

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

Для этого возвращаемся на главную страницу группы (куда ведет в меню лента и наша ссылка-картинка). Нажмите на изображение меню и попадете на ту же страницу, которая ранее была создана для меню.

Если вы являетесь администратором или создателем группы (в нашем случае это так), то ссылка «Редактировать» будет вверху страницы.Нажмите здесь.

Далее переходим в режим Wiki-разметки (под кнопкой закрытия в правом верхнем углу страницы рисуется такая рамка с внутренней). Когда активирован правый режим, эта кнопка становится серой.

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

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

. И к уже вложенному параметру «NOBORDER» я заканчиваю второй параметр «nopadding». Первый отключает обводку фрагментов и границ в таблицах таблиц. Второй убирает отступы с края.

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

В моем случае код меню следующий.

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

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

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

После этого вставьте ссылки на новые страницы в код вики-кода на новые страницы в виде страницы 102302049_51013384, где первое число — это идентификатор группы, а второе — номер страницы. Хотя это вообще не важно. Ведь нам просто нужно скопировать этот фрагмент URL и вставить в разметку.

В результате код меню принимает следующий вид.

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

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

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

  1. Теоретические представления о вики-разметке.
  2. Возможность практического применения.

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

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

Групповое оформление с помощью вики-разметки

Вики-разметка имеет:

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

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

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

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


Номер в группе соответствует номеру сообщества.


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

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

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

Создание таблиц с использованием вики-разметки

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

  1. Домашний стол {| ;
  2. Название таблицы | + ;
  3. Новая линия | — ;
  4. Новая прозрачная ячейка | ;
  5. New Dark Cell ! ;
  6. Конец таблицы |}.

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

Оформление ссылок с вики-разметкой

Как сделать графическое меню в группе?

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

Меню можно оформить в:

  • текстовом стиле;
  • графический стиль.

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

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

Шаблоны разметки для меню группы (картинки, теги, таблицы, спойлеры)

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

Особенности и секреты вики-разметки

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

  1. Нужна группа для подключения к услуге «Новости» .Подключение происходит путем наложения «галочки» перед разделом «Новости» в функционале «Настройки»;
  2. Изображение Страница вставляется в вики только тогда, когда изображение размещено на главной учетной записи учетной записи в выделенном альбоме;
  3. На одной странице Вика не может быть размещено более семнадцати открытых и незакрытых тегов;
  4. В одной фрезерной линии может содержаться до восьми элементов списка ;
  5. Ширина вставляемого изображения не может превышать 610 пикселей;
  6. При редактировании значений изображения Все пропорции картинок меняются пропорционально их соотношениям значений.

Приложения в контакте для вики-разметки

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

  1. Приложения, являющиеся руководством для изучения вики-разметки. Интерактивная FAQ beta Приложение предоставляет готовую разметку страниц. И в учебных целях предлагает восстановить его кодировку;
  2. Приложения, не требующие абсолютно никаких знаний, при этом их самостоятельно выполняет пользователь.К такому типу относится Wiki-редактор . Для оформления группы достаточно разобраться с визуальным редактором.

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

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


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

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

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

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

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

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

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

Довольного моря, начинаем воплощать идею жизни!

Создание группы

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

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

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

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

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

Все. Группа создана!

Теперь можно приступить к разложению.

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

Этот этап можно разделить на 2 части: графическую и техническую. Для работы нам понадобится шаблон для создания группового аватара и меню, а также немного фантазии и базовые фото фотошопа (это Adobe Photoshop).

Шаблон разметки

Какой шаблон от себя и что это вообще такое? Шаблон представляет собой нечто вроде пустого. В данном случае в формате * .psd мы отметили области для меню и группы аватарок.

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

Для наглядности приведу пример.

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

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

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

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

На левом фрагменте (там, где надпись «Меню») тоже можно добавить несколько триггеров.В этом случае я решил обойтись без них. Все. Дизайн аватара готов. Нажимаем в Photoshop SHIFT + Ctrl + Alt + S разрушающие горячие клавиши и сохраняем наши фрагменты в папку на жестком диске.

Первый этап работы с графикой завершен. Вернуться к контакту.

Установка аватара и меню для группы

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

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

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

Эти числа после «? Gid =» — это ID желаемой группы.Вставляем полученное значение в форму скрипта и пишем имя страницы, которую хотим создать. В этом случае я вожу «Меню».

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

Если все сделано правильно, откроется эта страница.

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

Написал «Меню» и моя страничка после сохранения стала выглядеть вот так.

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

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

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

Wiki-разметка меню группы ВКонтакте

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

Не буду подробно останавливаться на том, как именно собрал меню. Вот что я сделал.

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

Разрезаем изображение на фрагменты и сохраняем их.

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

Для этого возвращаемся на главную страницу группы (куда ведет в меню лента и наша ссылка-картинка). Нажмите на изображение меню и попадете на ту же страницу, которая ранее была создана для меню.

Если вы являетесь администратором или создателем группы (в нашем случае это так), то ссылка «Редактировать» будет вверху страницы.Нажмите здесь.

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

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

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

. И к уже вложенному параметру «NOBORDER» я заканчиваю второй параметр «nopadding». Первый отключает обводку фрагментов и границ в таблицах таблиц. Второй убирает отступы с края.

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

В моем случае код меню следующий.

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

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

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

После этого вставьте ссылки на новые страницы в код вики-кода на новые страницы в виде страницы 102302049_51013384, где первое число — это идентификатор группы, а второе — номер страницы. Хотя это вообще не важно. Ведь нам просто нужно скопировать этот фрагмент URL и вставить в разметку.

В результате код меню принимает следующий вид.

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

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

Создайте дизайн-группу ВКонтакте. Как быстро сделать красивую группу ВКонтакте

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1 голос

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

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

К концу этой статьи у вас будет эффектная и однородная картинка.

Метод для ленивых

Чтобы не отвлекать от важных дел тех, кто уже умеет спешить, спешит или элементарно не хочет заморачиваться, могу предложить видеоурок. Он подскажет, как сделать все то же, что и я, только без фотошопа через сервис www.vkprofi.ru. .

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

Для желающих учиться

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

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

Вам понадобится…

  1. Фотошоп.
  2. Базовое изображение.

Фотография должна быть большой и качественной, если вы ищете поисковики, обратите внимание на обои рабочего стола. Если вы работаете в крутом сообществе, особенно связанном с бизнесом, рекомендую воспользоваться сервисом http://ru.Depositphotos.com . Там вы найдете только рекламные изображения.

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

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

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

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

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

Изготовление шаблона будущей красивой группы

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

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

С картинкой на аву все так, действительно 200х500.

С постом все иначе.

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

Мой вариант подходит только для стационарных столбов. Самый простой и популярный способ оформления.

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

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

Теперь нажмите кнопку PRTSC. Он находится в верхнем ряду на клавиатуре после бесчисленной буквы «F». После того, как вы что-нибудь нажмете, ничего не происходит.Все нормально, 100 раз заходить не надо, фотошоп открыть.

Нажмите Ctrl + V, тем самым вы вставите свой экран в рабочее поле программы. Теперь возьмите инструмент «Прямоугольное выделение» и поработайте с левым блоком.

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

Двигайтесь строго по краю.

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

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

То же самое нужно проделать и с аватаркой. Выделяем и переносим на новый слой (Ctrl + J)

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

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

Перетащите как слой в корзину, как обычный файл с рабочего стола.

Это было закончено. Шаблон создан.

Уникальное изображение для группы

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

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

Отражает неверно.

Если у вас такая же ерунда, просто сделайте самую верхнюю. Затем, когда нажата кнопка alt, нажмите на слой 1 и слой 2. Чтобы они оба были выделены.

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

Если нажать Ctrl, а затем по эскизу только что созданного слоя. По краям объектов из нового слоя бегают муравьи, которые подскажут, как установить нижнюю картинку. Вы можете удалить их, нажав Ctrl + d. То, что сейчас внутри, впоследствии будет вставлено в ВК.

Если начать движение фото, то вместе с ним «пойдут» и бегут муравьи. Могу посоветовать установить направляющие. Не знаете, как с ними работать? Посмотри это видео.

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

Но я люблю вторую. Он быстрее. Нажмите Alt и переместите курсор между двумя слоями, он визуально изменится. Затем щелкните левой кнопкой мыши.

В итоге получилось вот такое фото.

Каждую часть можно вырезать с помощью инструмента «Рамка», а затем сохранить в формате JPEG.Правое фото добавлено в качестве аватара. Слева можно просто добавить как обычную запись, а потом исправить.

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

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

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

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

Виды меню и их особенности

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

  • для информационной площадки;
  • ;
  • для учебной платформы.

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

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

Как создать меню в группе ВКонтакте: Пошаговая инструкция

Весь процесс можно разделить на 2 этапа:

  • Работа в фотошопе;
  • Добавление разделов и картинок в самой группе.

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

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

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

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

Алгоритм действий:

  • Открываем фотошоп и заходим в «файл» — «Создать» и выставляем ширину и высоту: 760х500 соответственно.

  • Выбираем инструмент «Вырезание», а затем «разбиваем фрагмент». Делим изображение на 3 части по горизонтали. Для фрагмента с левого или правого края в выпадающем окне (в зависимости от того, какую часть вы хотите видеть на аватаре) напишите значения ширины и высоты — 200хх и Y) — 560 и 0. Оно будет аватаром группы.

  • Для следующего фрагмента задаем значения ширины и высоты — 50х500, а в координатах пишем 510 и 0.Это пространство между группой Аватар и меню. Эта часть не понадобится.

  • Снова выбираем «разбить фрагмент» и разделить по вертикали на 2 части. Для фрагмента сверху установите значения: ширина — 510, высота — 182, координаты — 0. Это пространство над меню. Эта часть не будет видна в группе.

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

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

  • Последний шаг — сохранение изображений. Вам нужно сохранять изображения следующим образом: Файл — Сохранить для Интернета. Этот метод подходит для более поздних версий Photoshop. Если в разделе «Файл» надписи «Сохранить для Интернета» нет, то делаем так:

Заходим в пункт «Файл», выбираем «Экспорт» — «Сохранить для Интернета».Все параметры оставлены как есть. Снова нажимаем «Сохранить».

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

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

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

  • Скачиваем в группу все фото, кроме аватарок и тех частей, которые не понадобятся. Чтобы фотографии отображались на главной странице, нужно вернуться в управление сообществом и нажать на вкладку «Фото» — «Открыть».
  • Загрузить аватар.
  • Следующим шагом будет включение режима Wiki-разметки. Вы можете сделать это, нажав на значок с ромбиками в правой части страницы в разделе «Редактировать».

  • Вот вставьте код для разметки: [], где [] — ссылка на раздел или страницу, где осуществляется переход по нажатию на фото.Вы можете добавить как ссылки на разделы в самом Вконтакте, так и на внешних ресурсах.
  • Этот код дублируется столько раз, сколько разделов в меню, каждый раз вставляя ссылки.
    При желании мы также меняем вкладку «Свежие новости», например, на «Меню.

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

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

Услуги по созданию группового меню

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

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

С уважением, Галиулин Руслан.

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

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

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

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

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

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

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

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

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

Нажмите на надпись «Скачать» в поле «Обложка сообщества».

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

Для исключения ненужных пропусков Вам необходимо указать параметры таблицы «Фиксированный NOPADDING NOBORDER».Разметка графического меню из 2 столбцов и 2 строк выглядит так:

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

Размер группы аватаров в новом дизайне для регистрации КПБ

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

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

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

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

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

На сегодняшний день создано несколько типов меню:

  • Открыть с активными точками;
  • Закрыто в виде фиксированной записи;
  • С отдельными картинками или общей смежной картинкой баннера и меню.

Суть создания обоих вариантов одинакова. Главное отличие только в дополнительных элементах и ​​типах записей и об этом будет подробнее в этой статье.

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

Закрытое меню группы ВК

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

Вид меню будет следующим:

Открыть меню группы (фиксированный материал)

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

Как сделать красивое меню для Группы ВКонтакте: Пошаговая инструкция

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

  • Для аватара 200×332 пикселей;
  • Для баннера главного меню 395×282 пикселей.

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

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

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

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

Создайте новую ткань в Photoshop с размерами 600×350 пикселей, которую мы будем использовать в качестве трафарета, чтобы вырезать в ней отверстия для наших картинок. Для работы нам необходимо перевести размеры всех элементов и линий в пиксели и это делается следующим образом: «Edit-Installation-Main» и вот уже выставляем пиксели.

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

Используя левую кнопку «Мыши», как будто вы выделяете область, вам нужно выделить блоки нужных нам размеров и после каждого выбора нажимать кнопку «Удалить» и выбирать 50% серый . Такие действия приведут к тому, что блоки будут нужного размера и будут выделены цветом, отличным от основного фона.

Должно произойти следующее:

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

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

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

Итак, вернитесь в фотошоп и создайте новый холст размером 400×300 пикселей. После этого выберите в разделе: File-place и выберите картинку для фона меню.

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

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

Обратите внимание, что у вас должно быть:

  • Материалы открыты в «ограниченном» режиме;
  • Включены обсуждения;
  • Папка с фотографиями открыта для всех.

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

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

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

Совет: Важным моментом после загрузки изображений является удаление отступов. Это решается вставкой «nopadding» перед размером изображений.

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

[]
Где xxxxx — ID вашей картинки
yyyyy — ширина в пикселях (не более 388)

В итоге должно получиться так:

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

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

http://vk.com/page-116682062_51411604?Act=Edit&hid=183950676&section\u003dedit

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

Перейти на главную страницу и сделать следующее:

Шаг номер 1.

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

Шаг номер 2.

Для записи прикрепляем изображение нашей вилки для меню и нажимаем Отправить.

Шаг номер 3.

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

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

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

В итоге получаем это меню.

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


ВАЖНО: После изменения дизайна ВК в 2016 году внесены новые изменения при создании изображений и требований к изображениям которых.

Скачать шаблон меню ВКонтакте + Все исходники урок

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

Применяю видео для консолидации читал -))).

VK Blocks — плагин для WordPress

1,3,5
  • [Исправление ошибки] Исправление перевода
1,3,4
  • [Исправление ошибки дизайна] [поток] исправление ошибки dd на Lightning G3 и т. Д.
  • [Добавить стиль] [таблица] границы таблицы / границы / полосы
  • [Исправление ошибки] [Слайдер] исправление ошибки css при активной оптимизации css
1.3,3

* [Исправление ошибки дизайна] [Изображение] исправление ошибки стиля vk-image-round-round для блока ядра / изображения.

1.3.2
  • [Исправление ошибки] [Карточка] Исправить предложение управления выравниванием.
  • [Исправление ошибки] [Расширение заголовка] Редактор исправлений css не отображается.
  • [Исправление ошибки] [Кнопка] Исправить ширину кнопки «Wide» в редакторе.
  • [Исправление ошибки / Изменение спецификации] [Персонал] Добавить селектор шрифта заголовка, mintyo или нет.
1.3.1
  • [Исправление ошибки] [Аккордеон] Поддерживает встряхивание дерева и добавление Pro Icon
  • [Исправление ошибки] Исправить относительный путь к полному пути
1.3,0
  • [Добавить новый блок] [Аккордеон] Добавить новый блок аккордеона
  • [Перевод] [Список сообщений] Исправлено обозначение классификационного названия
  • [Изменение спецификации] [Карточка] Удалить тег ссылки из заголовка
1,2,4
  • [Исправление ошибки / Изменение спецификации] [Список сообщений] Исправьте слишком много тегов и измените пользовательский интерфейс тега
  • [Исправление ошибки] [Слайдер] Исправление ошибки при оптимизации css
1.2.3
  • [Исправление ошибки] [FAQ2] Исправление уведомлений PHP.
1.2.2
  • [Изменение спецификации] [Ползунок] Исправьте скорость слайда по умолчанию и используйте кубическую кривую Безье.
  • [Исправление ошибки] Исправить всплывающее окно FontAwsome в случае WP5.7
1.2.1
  • [Исправление ошибки] Исправить перевод настройки блоков ВКонтакте
1.2.0
  • [Изменение спецификации] Преодоление тряски дерева груза Swiper (улучшение скорости загрузки)
  • [Исправлена ​​ошибка] Отображение значка на панели инструментов
1.1.0
  • [Изменение спецификации] [Блок слайдера] Отображение нескольких изображений на одном слайде.
1.0.16

[Изменение спецификации] Обновление библиотеки VK-Admin

1.0.15

[Исправление ошибки] [Внешний вид] Исправлена ​​ошибка, из-за которой не работало сокрытие.

1.0.14

[Изменение спецификации] [Список сообщений] Фильтрация терминов по таксономии на боковой панели.
[Перевод] Исправить перевод в настройках балуна.

1.0.13

[Исправление ошибки] [Редактор] Редактор исправлений CSS столбца сетки, карточки, карточки значка, выбора сообщения.

1.0.12

[Исправление ошибки] [Оглавление] исправление ошибки порядка оглавления.

1.0.11

[Исправление ошибки] Ошибка исправления [PageContent] не может использовать новую строку.

1.0.10

[Перевод] Исправить перевод.

1.0.9

[Other] только версия

1.0.8

[Исправить систему перевода] команда исправления для создания файла pot.

1.0.7

[Исправление устарело] Исправление [Карта] устарело.
[Исправление ошибки дизайна] [Изображение] исправление ошибки стиля для блока ядра / изображения.

1.0.6

[Исправление ошибки дизайна] [Ползунок] [Персонал] [Блоки PR] [Контент PR] исправление ошибки стиля для катавары.

1.0.5
1.0.4

[Исправление ошибки] Исправление ошибки [Оглавление] для устаревшего.

1.0.3

[Исправление ошибки] Исправление ошибки [Spacer] для устаревшего.

1.0.2

[Bug fix] Исправить ошибку при блокировке instert.

1.0.1
1.0.0

[Другое] [Все] Рефакторинг всех блоков.

0,57,4

[Изменение спецификации] Загрузить цвет термина при инициализации

0,57,3

[Исправление ошибки] Исправление [nowrap] не работает без загрузочных тем.

0,57,2

[Другое] Cope with block sample preview

0,57,1
  • [Исправление ошибки] [Ползунок] Исправить ошибку, требующую восстановления блока в случае заполнения пользовательского класса css.
0,57,0
  • [Изменение спецификации] Изменить значки (включая значок vk)
0,56,3
  • [Исправление ошибки] [Воздушный шар] исправление ошибки границы
0,56,2
  • [Исправление ошибки] [Воздушный шар] исправление ошибки границы
0.56,1
0,56,0
  • [Добавить блок] Добавить блок содержимого страницы
  • [Добавить функцию] Добавить nowrap
  • [Добавить функцию] [Выноска] Добавить функцию границы
0,55,0
  • [Добавить функцию] [Внешний] Повтор фонового изображения
  • [Исправление ошибки] Исправление не позволяет сэкономить на некоторых плагинах, использующих среду
  • [Изменение спецификации] [Заголовок] удалить спецификацию веса шрифта из обычного стиля
0,54,2
  • [Исправление ошибки] [Слайдер] Исправить сломанный слайдер на странице.
0,54,1
  • [Исправление ошибки дизайна] Исправление, не влияющее на выравнивание текста в теме по горизонтальной границе
0,54,0
  • [Добавить функцию] [Список сообщений] Добавить макет карточки (без заказа) и добавить таксономию отображения
  • [Исправление ошибки] Исправление [Анимация] устарело
0,53,2

[Исправление] [ToC (Pro)] Исправить идентификатор системы добавления

0,53,1

[Bugfix] [Step (Pro)] Исправить систему сброса номера шага

0.53,0

[Design Change] VK Blocks Изменение дизайна иконок

0,52,2

[Other] только версия

0,52,1

[Исправление ошибки] [Столбец сетки (Pro)] Исправлена ​​ошибка, из-за которой скрытая спецификация удалялась при повторном редактировании.
[Исправление ошибки] [Ползунок (Pro)] Исправление Невозможно остановить цикл
[Исправление ошибки] [Внешний (Pro) )] Исправлена ​​ошибка, из-за которой невозможно редактировать внешний блок (не удается сохранить тег стиля) для пользователя с ролью редактора

.
0,52,0

[Изменение спецификации] [Оптимизация CSS] Удалить пакет

0.51,0

[Изменение спецификации] [Оптимизация CSS] по умолчанию выключено / исключено предварительная загрузка wooCommerce
[Добавить функцию] [Оптимизация CSS] Добавить дескрипторы исключения

0,50,3
0,50,2
0,50,1
0,50,0
  • [Изменение спецификации] [Оптимизация CSS] Общее управление функцией оптимизации CSS
  • [Исправление ошибки] [Значок карты] Исправить бесконечное восстановление
0,49,8
  • [Исправление ошибки] Исправить белый экран редактирования
0.49,7
  • [Исправление ошибки] Исправить белый экран редактирования
  • [изменение спецификации] [кнопка] разрешить некоторый стиль текста
  • [изменение проектной спецификации] [PR Content] Изменить высоту строки
0,49,6

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

0,49,5

[исправление ошибки в редакторе digigin] [значок всплывающего окна] Круглая обрезка зарегистрированных значков

0,49,4

Только изменение версии

0.49,3
  • [Исправление ошибки] [core / image] Исправить снова стиль волны не отражается
0,49,2
  • [Исправление ошибки] Исправить белый экран редактирования
0,49,1
  • [Исправление ошибки] Исправление [PR Content]: не удается нажать кнопку в текстовом поле
  • [Исправление ошибки] [ядро / изображение] исправление стиля волны не отражается
0,49,0
  • [Добавить функцию] [Отзывчивый разделитель] добавить пробел (можно выбрать верхнее поле)
  • [Добавить функцию] [Старый FAQ] Может быть аккордеоном (только в версии Pro)
  • [Исправление ошибки] [Список дочерних страниц] Можно выбрать «эту страницу» (если только одна страница имеет дочерние страницы, нельзя выбрать эту страницу в списке дочерних страниц другой страницы)
0.48,0
  • [BugFix] [Outer] Исправлена ​​ошибка кнопки очистки цвета границы.
  • [Добавить стиль] [Ядро / Изображение] добавить дополнительный стиль к ядру / изображению.
0,47,0
  • [Добавить функцию] [Список сообщений (Pro)] добавить порядок по заголовку / добавить порядок по убыванию / по возрастанию
0,46,1
  • [BugFix] [New FAQ] Исправить систему аккордеона при включении Tree Shaking
0,46,0
  • [Добавить функцию] [Новый FAQ] Добавить аккордеон (Pro)
  • [BugFix] [Grid Column (Pro)] исправить неожиданное имя класса «undefined»
0.45,2
  • [BugFix] Исправлена ​​ошибка с отключением блока карт.
0,45,1
  • [BugFix] Удалить бесполезный файл
0,45,0
  • [Добавить функцию] Адаптивный BR
0,44,13
  • [исправление ошибки digigin] vk_heading plain css Adjust
0,44,12
  • [исправление ошибки digigin] Настройка CSS заголовка блока
0,44,11

только версия

0.44,10
  • [исправление ошибки] [Исправление столбца сетки (Pro)] могло выбрать 5 столбцов
0,44,9
0,44,8
  • [исправление ошибки] [Столбец сетки (Pro)] Исправить обтекание блока на xxl
0,44,7
  • [исправление ошибки] [шаблон блока (Pro)] Исправить шаблон блока
0,44,6
  • [исправление ошибки] [шаблон блока (Pro)] Исправить шаблон блока
  • [исправление ошибки] Остановить ExUnit VK Blocks
  • [исправление ошибки] [рамка] Cope с дизайном заголовка Lightning Pro (баллон)
0.44,5
  • [исправление ошибки digigin] Заголовок блока Настройка выравнивания текста Digigin
0,44,4

только версия

0,44,3

[Изменение спецификации] отменить предварительную загрузку
[исправление ошибки digigin] Заголовок блока Настройка цвета шрифта Digigin

0,44,2
  • [digigin bug fix] Заголовок блока Digigin tuning
0,44,1
  • [Настройка Desigin] Смена тега

= 0.44.0
[Изменение спецификации] Re Cope with xxl size
[bug fix] [Card (Pro)] исправляет критическую ошибку на карте и восстанавливает до 0.43.0
[исправление ошибки] [Дочерняя страница (Pro)] исправление использования в виджете страницы vk
[исправление ошибки] [Столбец сетки (Pro)] Исправление ошибки в новом столбце

0,43,4 (0,42,1)

перестроить 0.42.1

0,43,3 (0,42,1)

вернуться к 0,42,1

0,43,2

Добавить перевод

0,43,0

[Изменение спецификации] Cope with xxl size
[Specification Change] Stop ExUnit VK Blcosk on VK Blocks Free
[Исправление ошибки] [Блок потока] Изображение стрелки не отображается при использовании встряхивания дерева

0.42,1

[Изменение спецификации] [цвет термина] Добавить исключить таксономию

0,42,0

[Добавить функцию] [Настройка шаблона блока] Добавить настройку отображения и скрытия шаблона блока.

0,41,2

[Исправление ошибки] [Кнопка] Снова исправить статический идентификатор кнопки.

0,41,1

[Исправление ошибки] [Кнопка] Исправить статический идентификатор кнопки.

0,41,0

[Добавить функцию] [Анимация (Pro)] Добавить вариант анимации
[Добавить новый блок] [Новый FAQ] Добавить новый блок часто задаваемых вопросов

0.40,3

[Исправление ошибки] [BorderBox] Исправить обрушение под трясущимся деревом

0,40,2

[Исправление ошибки] [Столбец сетки] Исправить сворачивание на экране редактирования

0,40,1

[Исправление ошибки / изменение спецификации] [Заголовок] Исправьте поле заголовка ниже и измените значение по умолчанию для заголовка ниже поля.

0,40,0

[Добавить функцию] CSS Optimize

0,39,5

[Исправление ошибки] [слайдер] Исправить колапы первого вида

0,39,4

[Исправление ошибки] [border-box] Исправление btn-primary на стороне редактора.

0,39,3

[Исправление ошибки] [border-box] Исправить цвет заголовка.

0,39,2

[Исправление ошибки] Исправить цвет кнопки редактора на WP 5.5

0,39,1

[Исправление ошибки] Исправление ошибки даты списка сообщений с помощью WP5.5

0,39,0

[Добавить функцию] Добавить шаблоны блоков ВКонтакте.

0,38,9

[Исправление] [Внешний (Pro)] Фоновая обложка стала не работать исправление ошибки.

0,38,8

[Исправление ошибки] Восстановить

0.38,6

[Bugfix] Исправить настройки макета кнопок

0,38,5

[Изменение спецификации] Удалить класс кнопки в src / blocks / button /

0,38,4

[Bugfix] [Card (Pro)] Исправление ошибки изменения высоты изображения

0,38,3

[Bugfix] [Card (Pro)] Исправление ошибки изменения высоты изображения

0,38,2

[Исправление ошибки / изменение спецификации] [Всплывающая подсказка] Изменить структуру HTML всплывающей подсказки

0,38,1

[Добавить новый блок] [Ползунок (Pro)]
[Добавить функцию] [Карточка (Pro)] Добавить настройку высоты изображения
[Исправление ошибки / Изменение спецификации] [Баллон] Изменить ширину баллона 100%
[Добавить функцию] [Рамка ] добавить фон заливки

0.37,4

[Изменение спецификации] Изменение каталога администратора

0,37,3

[Изменение спецификации] Изменение ссылки на административную библиотеку

0,37,2

[BugFix] Ошибка PHP

0,37,1

[BugFix] [Заголовок] Заданный текст elesed

0,37,0

[Добавить функцию] [Воздушный шар] Исправлена ​​проблема исчезновения введенного текста

0,36,0

[Добавить функцию] [FAQ] Часть ответа была изменена на внутренний блок, и теперь можно размещать другие, кроме букв
[Добавить функцию] [FAQ] Теперь вы можете выбрать стиль дизайна
[Добавить функцию] [Заголовок ] Значки могут использоваться до и после букв
[Добавить функцию] [Воздушный шар] Теперь вы можете выбрать стиль изображения
[Добавить функцию] [Анимация (Pro)] Добавление функции задания скорости / расстояния анимации
[Добавить функцию] [ Карточка (Pro)] Добавление внутренней области блока к текстовой части. Вы можете добавлять и размещать любые блоки, которые вам нравятся.
[Добавить функцию] [Дочерняя страница (Pro)] Не отображать страницы без дочерних страниц в раскрывающемся списке
[Исправление ошибки] [Временная шкала (Pro)] Исправлена ​​ошибка, из-за которой невозможно сбросить цвет

0,35,5

[Изменение спецификации] [Border Box] Обновление списка значков

0,35,4

[Исправление ошибки] Исправление ошибки макета списка значков [BorderBox]

0,35,3

только сборка

0,35,2

только сборка

0,35,1

[Исправление ошибки] [Шаг блока] Невозможно редактировать исправление ошибки

0.35,0

[Добавить функцию] Обновление селектора значков Fontawesome
[Добавить настройку] [Внешний (Pro)] Добавить LR без заполнения
[Изменение спецификации] [Рамка] Настройка заполнения (широкий экран)

0,34,0

[Добавить блок] [Анимация (Pro)]
[Добавить функцию] Добавить средство выбора значка fontawesome в блок рамки

0,33,3

[Исправление ошибки] обратно к 0.33.1

0,33,2

[Исправление ошибки] [Карточка (профессиональная версия)], если URL-адрес равен нулю, нет тега названия карточки.

0,33,1

[Исправление ошибки] [Оглавление (pro)] исправление ошибки при открытии и закрытии

0,33,0

[Добавить функцию] [Card (pro)] Cope with card block Image round
[Bug fix] [Table of content (pro)] open close bug fix

0,32,5

[Other] Обновить шаблон шаблона блока (Pro)

0,32,4

[исправление ошибки] [Внешний вид] Исправление фоновой ошибки.

0,32,3

[исправление ошибки] [Внешний вид] Исправление фоновой ошибки.

0.32,2

[исправление ошибки] [Значок карты] Исправить выравнивание значка и элемента карты.

0,32,1

[исправление ошибки] [Border Box] Исправление оформления заголовка переписано темой.

0,32,0

[Добавить новый блок] [Icon Card (pro)]
[Изменение спецификации] Font Awesome Version 5.13.0
[Изменение спецификации] Bootstrap Version 4.5.0

0,31,0

[Добавить новый блок] [Border Box]
[исправление ошибки] [Внешний (pro)] Ошибка исправления BG на iPhone

0.30,0

[Добавить функцию] [Список сообщений (pro) / Card (pro) / Grid Column (pro)] Cope with 6 column

0,29,7

[исправление ошибки] [Внешний (pro)] исправление ошибки внешнего блока

0,29,6

[Удалить функцию] [Групповой блок] Удалить пользовательский цвет границы

0,29,5

[Настройка дизайна] [Стиль группового блока] Добавить стиль предупреждения

0,29,4

только сборка

0,29,3

[исправление ошибки]

Содержание

Справиться со старым типом toc

0.29,2

только сборка

0,29,1

[исправление ошибки] Справиться с устаревшей версией

0,29,0

[Добавить новый блок] [Столбец сетки (pro)]
[Добавить функцию] [Группа] Использовать настраиваемый цвет границы
[исправление ошибки] Многие номера символов заголовка
[исправление ошибки] [список] 2-значное число исправление ошибки дисплея

0,28,4

[исправление ошибки] Исправление ошибки устройства вставки перетаскиванием

0,28,3

[исправление ошибки] Исправление ошибки тега маркера

0.28,2

[исправление ошибки] Отменить

0,28,1

[исправление ошибки] Исправление ошибки тега маркера

0,28,0

[исправление ошибки] исправление ошибки блока close toc
[Добавить функцию] [Список дочерних страниц (pro)] функция исключения этой страницы.

0,27,5

[исправление ошибки] [Step (pro)] При добавлении внутреннего блока исправление ошибки номера шага в реальном времени.

0,27,4

[исправление ошибки] [Список сообщений (pro)] Имя дополнительного класса не отражено исправление ошибки

0.27,3

только сборка

0,27,2

[исправление ошибки] [Внешняя (профессиональная версия)] при сбросе границы этот блок разрывается
[исправление ошибки] [Таблица содержания (профессиональная версия)] Невозможно отобразить все заголовки

0,27,1

[исправление ошибки] [PR Content] Исправление ошибки макета в firefox
[Настройка дизайна] [Table of content (pro)] Настройка заполнения

0,27,0

[Добавить функцию] [Внешний (профессиональный)] Ответственное фоновое изображение
[Изменение спецификации] [персонал] Изменить размер заголовка
[Изменение спецификации] [Ответственный разделитель] Отображение пунктирной линии на экране редактирования

0.26,9

[исправление ошибки] исправление ошибки столбца [Card (pro)] на экране редактирования

0,26,8

[исправление ошибки] [Card (pro)] Исправление ошибки с исчезновением URL карты.

0,26,7

[исправление ошибки] исправление ошибки столбца [Card (pro)] на экране редактирования

0,26,6

[исправление ошибки] Ошибка класса динамического атрибута

0,26,4

[исправление ошибки] [кнопка] Исправление ошибки изменения цвета.

0,26,3

[bug fix] [button] исправление ошибки стиля контура.

0.26,2

[исправление ошибки] Используется исправление ошибки функции автоматической остановки в обеих версиях (Free и Pro).

0,26,0

[Добавить функцию] [кнопка] Добавить стиль текста
[Добавить функцию] [кнопка] Добавить широкий стиль
[исправление ошибки] Исправление ошибки при использовании скрытой функции и столбца сообщений

0,25,4

[исправление ошибки] [цвет термина] Исправлена ​​ошибка, возникающая из-за отсутствия пользовательской таксономии / термина.

0,25,3

[BugFix] [Список сообщений (Pro)] Offset BugFix
[BugFix] [Card] Исправление ошибки блокировки блоков
[BugFix] [Скрытая функция] ReEnable

0.25,1

[Изменение спецификации] [Скрытая функция] Исключить блок повторного использования

0,25,0

[Добавить функцию] [Скрытая функция] Добавить
[Добавить функцию] [Список сообщений (Pro)] Добавить макет текстового списка

0,24,2

[BugFix] [Table of Content (Pro)] Заголовок во внешнем блоке, исправление ошибки

0,24,1

[bugfix] Справиться с WordPress5.4
[bugfix] [Block Template (Pro)] indert bug fix

0,24,0

[Добавить функцию] [Блок шаблона (Pro)] Добавить
[Добавить функцию] [Таблица содержания (Pro)] Добавить блок шаблона
[BugFix] [Таблица содержания (Pro)] Целевая точка ссылки

0.23,0

[Добавить функцию] [список сообщений (Pro)] Добавить настройку (смещение / порядок / исключить себя)
[BugFix] [Outer (Pro)] Не удается удалить исправление фонового изображения

0,22,4

[BugFix] Редактор стиля CSS не работает

0,22,3

[BugFix] [PR Content] Исправление ошибки
[Изменение спецификации] Добавить крючок точки загрузки css
[Изменение спецификации] [YouTube] Добавить ширину 100%

0,22,2

[Изменение спецификации (возврат)] загрузить CSS в верхний колонтитул из нижнего колонтитула

0.22,0

[Изменение спецификации] загрузить шрифт awesome в нижний колонтитул из заголовка

0,21,0

[Изменение спецификации] загрузить CSS в нижний колонтитул из заголовка

0,20,4

[исправление ошибки] [Card (Pro)] повторное использование и исправление ошибки группы

0,20,3

[исправление ошибки] [PR Content] устранено

0.20.2

[исправление ошибки] [Card (Pro)] исправление ошибки преобразования размера md

0.20.1

[Изменение спецификации] [Card (Pro)] btn margine tuning

0.20,0

[добавить блок] [Блок карты] * Только версия Pro
[Изменение спецификации] Удалить Lightning Pro Limited

0,19,2

[Настройка дизайна] [Список дочерних страниц (Pro)] Добавить верхнее поле
[Изменение спецификации] [post-list (Pro) / child-page (Pro)] Изменить имя внешнего класса

0,19,1

[Исправление ошибки] Ссылка на vk-components.css
[Изменение спецификации] Исключить ссылку на vk-components.css для пользователя Lightning

0,19,0

[Добавить функцию] [Блок контроля качества] Добавить привязку html

0.18,2

[исправление] [Список сообщений (Pro)] Отображение элемента управления

0,18,0

[исправление] [Список сообщений (Pro)] элемент управления
[Добавить функцию] [Дочерняя страница (Pro)] Можно установить родительскую страницу.

0,17,7

[bugfix] Оглавление, исправление ошибки рендеринга
[Настройка дизайна] [Step block / Timiline block]

0,17,6

[bugfix] исправление ошибки цвета стиля заголовка

0,17,5

[исправление] Перерегистрация viewHelpers.js

0.17,4

[настройка развертывания с GitHub]

0,17,2

[исправление ошибки] [Кнопка] Пользовательская цветовая палитра.
[исправление ошибки] [Блок PR] Фиксированное изображение alt

0,17,1

[исправление ошибки] [Кнопка] Исправлена ​​ошибка ввода текста в Safari
[исправление ошибки] [Baloon / PR Content] Исправлено изображение alt

0,17,0

[добавить блок] [блок списка дочерних страниц] * только в версии Pro
[добавить стиль] [групповой блок] граница вокруг
[добавить идентификатор] [отзывчивый разделитель] добавить указанный идентификатор пользователем

0.16,4

[исправление ошибки] [блок шага] размер шрифта
[исправление ошибки] [стиль заголовка] добавить очистить: до и: после

0,16,3

[исправление ошибки] деактивированная функция бесплатной версии

0,16,2

[исправление ошибки] функция объявления

0,16,0

[Добавить стиль] Добавить стили заголовков

0,15,1

[настройка проекта] Удалить нижнюю границу последнего блока в групповом блоке.

0,15,0

[Добавить стиль] Добавить стили группы
[Добавить стиль] Добавить стили изображения

0.14,0

[Добавить стиль] Добавить стили списка

0,13,3

[Bugfix] [Step] первый блок не становится h5 во втором последующем исправлении ошибки блока элементов.

0,13,2

[Изменение спецификации] Удалить указанную ширину страницы редактирования (изменить указанную тему)

0,13,1

[Изменение спецификации] [Шаг блока] Удалить первую подпись

0,13,0

[Добавить блок] Шаговый блок
[Добавить блок] Блок временной шкалы

0.12,7

[Исправление ошибки] [содержание] исправление ошибки

0,12,6

[Исправление ошибки] [столбец] Исправление ошибки столбца WordPress 5.3

0,12,5

[Исправление] [список сообщений] Исправление ошибки WordPress 5.3

0,12,4

Исправление ошибки отображения кнопки [Bugfix] [список сообщений]

0,12,3

[Исправление ошибки] программа обновления

0,12,2

[Исправление ошибок] [список сообщений] список ошибок таксономии
[добавить функцию] средство обновления

0.12.1

[Bugfix] общий размер шрифта html css

0.12,0

[Добавить новый блок] Блок списка сообщений

0.10.1

[Bugfix] baloon css

0.10.0

[Добавить функцию] Добавить маркер

0.9.0

[Добавить новый блок] Содержание (только Pro)

0,8,3

[Изменение спецификации] [Персонал] Небольшая настройка CSS

0,8,2

[Изменение спецификации] [Персонал] Изменить тег H и прочее.

0.8.1

[Исправление ошибки] Когда поле заголовка установлено, выравнивание заголовка не работает.

0,8,0

[Добавить новый блок] Персонал

0,7.1

[Исправление ошибки] [Заголовок] Часть функций нижнего края поля не работала.

0,7,0

[Исправление ошибки] [Блоки PR] Если URL-адрес ссылки не установлен, теги не печатаются.
[Изменение спецификации] [Блоки PR] Измените статью внешнего тега на div
[Изменение спецификации] [Блоки PR] Измените тег h2 на тег h4

0,6,0

[Добавить новый блок] Заголовок
[Добавить новый блок] Адаптивная прокладка
[Исправление ошибки] [внешнее] Исправление дизайна FireFox и Eddge
[Добавить функцию] [Внешний] Добавить настройку идентификатора ссылки

0.5,2

[Исправление ошибки] [внешняя] Тема Lightning Pro (без дочерних) исправление ошибки не работает

0,5,1

[Исправление ошибки] [внешнее] Исправление ошибки в дочерней теме, не работающей

0,5,0

[Добавить функцию] [внешняя] Добавить границу

0.4.1

[Изменение спецификации] [PR Content] изменение разметки
[Добавить функцию] [кнопка] Добавить заголовок

0,4,0

[Добавить новый блок] Внешний
[Добавить новый блок] PR-контент

0,3,0

[Добавить новый блок] Блок кнопок
[Добавить новый блок] Блок PR-блоков

0.2,2

[исправление ошибки] Исправлена ​​ошибка, которая становится непригодной для использования в WordPress 5.0

0,2,0

[Изменение спецификации] Изменено правило имени CSS

0,1,0

Первый выпуск

VK-01 Off-World Bartender: 31 шаг (с изображениями)

Теперь для другого Pi (модели A + или того, что у вас есть, кроме Zero), есть заметное использование контактов GPIO платы. Я даже подключил к нему контакты RUN для быстрого сброса меню.

Чтобы понять, почему используются все эти контакты GPIO, давайте поговорим об образе программного обеспечения MP4 Museum, который работает на этом Pi.

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

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

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

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

01_place_glass

02_order_screen

03_pouring

04_remove_drink

05_scan_card

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

Это все говорит о том, что время, необходимое для каждого взаимодействия с пользователем, просто встроено в длину вашего видео. Если бы я устанавливал это где-нибудь без присмотра, я бы, вероятно, включил какой-нибудь датчик движения, чтобы выключить MP4 Museum Pi после 15 минут одиночества. Но в контексте грандиозного конкурса Cocktail Robotics Grand Challenge всегда рядом есть оператор, который направляет или перезагружает машину. Если что-то не пойдет не так, как надо, большинство людей не собираются начинать со своего заказа на напитки и отказываться от него на полпути.Поэтому, если приветственное видео достаточно длинное, продолжительность остальных видеороликов не должна превышать 5–10 минут, чтобы свести к минимуму вероятность их преждевременного перехода в следующее видео.

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

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

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

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

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

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

Виноделие: основы и прикладные аспекты — 1-е издание

Содержание

ВВЕДЕНИЕ: ВИНО И ВИНОДЕЛИЕ

В.К. Джоши и Рамеш К. Рэй

КОМПОЗИЦИОННАЯ, ПИТАТЕЛЬНАЯ, ТЕРАПЕВТИЧЕСКАЯ ЦЕННОСТЬ ВИНА И ТОКСИКОЛОГИЯ

Хатидже Калкан Йылдырым

ВИНО КАК ПОЛНЫЙ ФУНКЦИОНАЛЬНЫЙ НАПИТК: ПЕРСПЕКТИВА

S.K. Сони, Урваши Свами, Нитика Триведи и Раман Сони

СОРТА ВИНОГРАДА ДЛЯ ВИНОДЕЛИЯ

Аджай Кумар Шарма, Р. Г. Сомкувар и Рошни Р. Самарт

Достижения в созревании, созревании и сборе плодов

Гиль-Муньос, Гомес-Плаза

ВЛИЯНИЕ СОРТА НА КАЧЕСТВО И АРОМАТ ВИНА

Вишал С.Рана, Нирджа С. Рана и Равина Павар

ПОЛОЖИТЕЛЬНЫЕ И ОТРИЦАТЕЛЬНЫЕ АСПЕКТЫ BOTRYTIS В ВИННОМ ПРОИЗВОДСТВЕ

Monika Cioch, Dorota Semik-Szczurak и Szymon Skoneczny

ГЕНЕТИЧЕСКАЯ ИНЖЕНЕРИЯ ПЛОДОВЫХ КУЛЬТУР

Р. Каур, К. Кумар и Шилпа

ВИНОДЕЛЕНИЕ: МИКРОБИОЛОГИЯ

Альберт Мас, М. Хесус Тория, Джемма Белтран и Илькин Юджел Сенгун

МИКРОБИОМ ВИНА: ОБЗОР ЭКОЛОГИИ ДРОЖЕЙ

Катия Карвалью Пинто, Ана Катарина Батиста Гомеш и Жоао Сальвадор Симойнс

ВИННЫЕ ДРОЖЖИ: ФИЗИОЛОГИЯ И ФАКТОРЫ РОСТА

М.Хесус Тория, Альберт Мас, Илькин Ючел Сенгун и Джемма Белтран

МАЛОЛАКТИЧЕСКИЕ БАКТЕРИИ В ВИНОДЕЛИИ

Альберт Бордонс, Изабель Араке, Мар Маргалеф-Катала и Кристина Регуант

БИОХИМИЯ ВИН

л.с. Васанта Рупасингхе, В.К. Джоши, Ашвани Кумар и Пуджа Кумари

ГЕНЕТИЧЕСКАЯ ИНЖЕНЕРИЯ МИКРООРГАНИЗМОВ В ВИННОМ ПРОИЗВОДСТВЕ

Гарги Дей

ЭНОЛОГИЧЕСКИЕ ФЕРМЕНТЫ

Харальд Клаус

ДОБАВКИ, СРЕДСТВА, УПАКОВКИ, УКРЫТИЯ И ЭТИКЕТКИ В ЭНОЛОГИИ

Л.Вееранджанея Редди и В. К. Джоши

БИОГЕННЫХ АМИНОВ В ВИНА

Спирос Парамитиотис и Рамеш К. Рей

ИММОБИЛИЗИРОВАННЫЕ ДРОЖЖИ В ВИННОМ ПРОИЗВОДСТВЕ

Стева Левич, Верица Джордевич, Ана Калушевич, Радован Джорджевич, Бранко Бугарски и Виктор Недович

ПРОИЗВОДСТВО ВИНА: КОНТРОЛЬ, БИОРЕАКТОР И МОДЕЛИРОВАНИЕ ПРОЦЕССА

Стив К. З. Десобго и Эммануэль Дж.Nso

Созревание и старение вина

Хатидже Калкан Йылдырым

ВИНОДЕЛЕНИЕ: ОСНОВНЫЕ И ПОСЛЕДНИЕ РАЗВИТИЯ

В. К. Джоши, Викас Кумар и Джасприт Каур

CIDER

В. К. Джоши, Сомеш Шарма и Викас-Кумар

ПРОИЗВОДСТВО БЭНДИ: ОСНОВЫ И ПОСЛЕДНИЕ РАЗРАБОТКИ

Франсиско Лопес

БИОАУГМЕНТАЦИЯ И БИОВАЛОРИЗАЦИЯ ВИННЫХ ОТХОДОВ И СТОЧНЫХ ВОД

Константинос В.Коцанопулос, Рамеш К. Рей и Судханшу С. Бехера

ДОСТИЖЕНИЯ В АНАЛИТИЧЕСКИХ ТЕХНИКАХ В ЭНОЛОГИИ

Disney Рибейро Диаса, Леонардо де Фигейредо Вилелаб и Розана Фрейтас Шванб

ДОСТИЖЕНИЯ В АНАЛИТИЧЕСКИХ МЕТОДАХ ОПРЕДЕЛЕНИЯ ТОКСИЧНЫХ КОМПОНЕНТОВ, МИКРОЭЛЕМЕНТОВ, АРОМАТИЧЕСКИХ СОЕДИНЕНИЙ И ТЕРАПЕВТИЧЕСКОГО ЗНАЧЕНИЯ

Симона Геррини, Сильвия Мангани, Джованна Фиа и Лиза Гранчи

АСТРИЧНОСТЬ И ЦВЕТ ВИНА: РОЛЬ, ЗНАЧЕНИЕ, МЕХАНИЗМ И МЕТОДЫ ОЦЕНКИ

М.

No related posts.

Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *