Как оформить свою группу в контакте без фотошопа

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

Дата последней проверки актуальности статьи: 16 февраля 2020 г.

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

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

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

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

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

Ну а если вы все-таки предпочитаете читать, то начнем.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Подставьте в эту ссылку ID своей группы, а название страницы укажите как «Меню». У нас получилась такая ссылка (обратите внимание на минус перед ID группы! Не удалите его случайно!):

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

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

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

    http://vk.com/page- >XXX?act=edit&section=edit

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

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

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

    [https://yandex.ru/|Ссылка на Яндекс]
    [https://google.com/|Ссылка на Google]
    [[club1|Паблик ВК API]]

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

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

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

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

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

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

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

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

    После вставки ссылки в текст под ранее добавленной фотографией должна появиться ссылка на вашу вики-страницу. Это выглядит так:

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

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

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

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

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

    »’Вариант меню для раздела «Материалы»»’
    [https://yandex.ru/|Ссылка на Яндекс]
    [https://google.com/|Ссылка на Google]
    [[club1|Паблик ВК API]]

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

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

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

    Читайте так же:  Как мне выписаться из квартиры если я не собственник
  • Закрепленную запись увидят 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). В принципе, разницы не будет. Внешние ссылки (те, которые ведут не на ресурсы ВК) мы рекомендуем сокращать с помощью https://vk.com/cc.

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

    Та часть адреса, что выделена (начинается с «photo», далее идут две группы цифр, разделенные подчеркиванием) — это и есть указатель на данное изображение. Важно: если фото хранится в альбоме сообщества, то после «photo» будет стоять знак «минус». Например так: photo-1237112_754439303

    Наше меню состоит всего из двух полос-ссылок. Поэтому его код будет выглядеть так:

    Замените ID фотографий на свои. Заметьте, что между кодами отдельных полос нет пробелов и переносов строк. Если они там будут, то между частями вашего меню появятся белые полосы. Будьте внимательны! Теперь вставьте получившийся код в разметку той вики-страницы, которую вы собираетесь вызывать по изображению-ссылке. Затем, создайте пост с изображением-ссылкой на стене группы и закрепите его (о том, как это делается мы подробно рассказывали выше). Для изображения используйте файл «open.png» из архива. Его, кстати, желательно загрузить в тот же альбом, что и части меню. Перезагрузите страницу. Теперь при клике на пост у вас должно появляться меню. Если этого не происходит и что-то идет не так — еще раз внимательно прочитайте нашу инструкцию и у вас все получится.

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

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

    [[photo-143167693_456239030|600px;nopadding;nolink| ]][[photo-143167693_456239031|600px;nopadding|https://vk.cc/3J6QGc]][[photo-143167693_456239032|600px;nopadding;nolink| ]][[photo-143167693_456239033|600px;nopadding|https://vk.com/team]][[photo-143167693_456239034|600px;nopadding;nolink| ]]

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

    Теперь откройте для редактирования корневую вики-страницу (пункт справа от пункта «Информация»). Вставьте и туда код меню. Сохраните изменения, перезагрузите страницу и посмотрите на результат. Как видите, меню немного не вписывается по ширине. Исправить это очень просто: в wiki-коде этой страницы замените 600px на 510px. Примерно так:

    [[photo-143167693_456239030| 510px;nopadding;nolink| ]][[photo-143167693_456239031| 510px;nopadding|https://vk.cc/3J6QGc]][[photo-143167693_456239032| 510px;nopadding;nolink| ]][[photo-143167693_456239033| 510px;nopadding|https://vk.com/team]][[photo-143167693_456239034| 510px;nopadding;nolink| ]]

    Теперь ваше меню должно отображаться правильно и в этом пункте.

    Вместо заключения

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

    Как оформить свою группу в контакте без фотошопа

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

    . Размер обложки для группы вконтакте 795x200px или 1590x400px
    Почему два размера?
    Как было и ранее ничего не поменялось , второй размер в два раза больше, чтобы хорошо и красиво открывалось на больших мониторах компов.
    И если ты читаешь эту статью тебя так или иначе касается оформление группы, значит забываем про размер обложки для группы 795x200px и
    используем размер обложки для группы 1590x400px, чтобы отлично открывалось у всех без исключения.

    Все эти данные официальные, прямиком от тех поддержки VK.com
    В конце статьи найдете прямую ссылку на оф. страницу.

    . ЧТОБЫ НЕ ПОРТИЛОСЬ КАЧЕСТВО КАРТИНОК при загрузке в Vk.com:

    Чтобы картинка аватара или поста не искажалась, чтобы не появлялись цветовые шумы похожие на рябь
    Необходимо при сохранении кртинки в фотошопе выбрать меню ФАЙЛ -> СОХРАНИТЬ ДЛЯ WEB -> в открывшемся окне настройки поставить галочку возле sRGB -> СОХРАНИТЬ ->ЗАГРУЗИТЬ в вк
    а ВОТ ЗАГРУЗИТЬ КАРТИНКИ РЕКОМЕНДУЕТСЯ ПЕРЕТАСКИВАНИЕМ ИЗ ПАПКИ НА СТРОЧКУ ЗАГРУЗКИ ВКОНТАКТЕ.
    тАКОЙ СПОСОБ ОПИСЫВАЕТ ТЕХНИЧЕСКАЯ ПОДДЕРЖКА ВК.

    . КАК ЗАГРУЗИТЬ / ВКЛЮЧИТЬ ОБЛОЖКУ ГРУППЫ ВКОНТАКТЕ.
    Заходим в » ДЕЙСТВИЯ» под аватаром группы ,
    Выбираем «УПРАВЛЕНИЕ»
    Видим «Обложка Сообщества» — Загрузка.
    Это оно и есть !
    Загружаем перетаскиванием , оформленную обложку для сообщества вконтакте (как ее обложку для ВК описано Выше)

    Готово, Похвалите себя !

    Если все же что то не получилось пиши ниже, разберем в чем сложность в чем крылась проблема
    СКИДЫВАЙ ЧТО ПОЛУЧИЛОСЬ
    __________________________________________________________
    КАЧАЙТЕ ШАБЛОН НАШЕЙ ОБЛОЖКИ — ИСПОЛЬЗУЙТЕ в СВОЕМ ОФОРМЛЕНИИ

    Читайте так же:  Образец отзыв на исковое заявление в гражданском процессе образец

    благодарю всех за лайки, Кому подсказали и помогли.

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

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

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

    Факторы оставляющие гостя:

  • аватарка;
  • описание;
  • название;
  • красивое и практичное меню;
  • красочность;
  • контент.
  • Фото: пример функционального меню

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

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

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

    Три основные цели групп:

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

    Фото: пример навигации для продаж

    Здесь должны быть самые важные кнопки:

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

    Фото: привлечение подписчиков

    Приблизительный вариант набора кнопок:

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

    Предлагаем такие кнопки:

  • подписаться на новости;
  • задать интересный тематический вопрос;
  • акции;
  • опросник;
  • голосование.
  • Фото: предоставление услуг

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

    Создаем по этапам

    Создание навигации – процесс интересный, сложный и длительный. Но результат того стоит.

    Весь процесс условно делиться на 2 этапа:

  • работа с фотошопом;
  • техническое добавление.
  • видео: меню для паблика

    Работаем с фотошопом

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

    Алгоритм действий:

    установите и запустите программу «Фотошоп»;

    Фото: ярлык Фотошопа

    Фото: заданные параметры

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

    Делается это с помощью инструмента «Прямоугольная область»:

    кликните на значок правой кнопкой мышки;

    Фото: кнопка для вырезания фигур

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

    Фото: появившееся окно

    Фото: расположение прямоугольников

    Работа с графикой:

    под этим слоем расположите свое оформление:

    Фото: замащивание слоя картинкой

    Фото: кнопка рисования фигур

    Приблизительно должно получиться вот так:

    Фото: готовый результат

    Сохраните прямоугольник, расположенный справа отдельной картинкой, задав размер 200х500 пикс. Это готовая аватарка, загружается через кнопку «Загрузить фотографию» в группе вк.

    Фото: загрузка аватарки

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

    Для начала следует сделать разметку:

  • комбинацией клавиш «CTR+R» включите линейку;
  • наведите курсор на верхнюю линейку;
  • зажав левую кнопку мыши, потяните вниз, к нижней границе кнопки;
  • повторите по каждой кнопке.

    Фото: расстановка направляющих

    Создаем фрагменты:

    возьмите инструмент Slice Tool;

    Фото: расположение Slice Tool

    Фото: кнопка «Фрагменты по направляющим»

    Фото: разбивка картинки

    Сохранение изображений:

    нажмите Файл – Сохранить для web;

    Фото: путь для сохранения картинок

    Как очистить компьютер от ненужных программ? Инструкция тут.

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

    Техническая часть

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

    Важно! Заливка меню отличается от обычно загрузки фото или картинок.

    Все по порядку:

    1. зайдите в группу;
    2. включите новостную ленту;

    Фото: включение новостей через настройки

    Фото: смена названия

    Фото: загрузка картинок

    Фото: код загрузки картинки

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

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

    Если вы хотите вставить ссылку на запись со стены:

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

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

    Далее просто вставьте ссылку на соответствующую картинку. Вот код картинки, который появился в окне загрузки картинки: [[photo37602118_351733570|400x90px;noborder|]].

    После символа «|» просто вставьте свою ссылку. Выглядеть это будет вот так: [[photo37602118_351733570|400x90px;noborder| ссылка]]

    Сохраните изменения соответствующей кнопкой внизу окна.

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

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

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

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

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

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

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

    Видео: меню с поиском по рубрикам

    Нюансы создания

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

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

    Вот так: [[photo37602118_351733570|400x90px;noborder| ссылка]]

    Основные теги представлены в таблице ниже:

    Фото: теги используемые для разметки

    Работа с картинками

    Для того чтоб прикрепить ссылку или текст к изображению, с возможностью слегка видоизменить его, следует ввести код следующего вида:
    [[photo37602118_351733570|options|text/link]].

    Где options заменяется на:

    • noborder — снятие рамки вокруг изображения;
    • nopadding — снятие пробелов между изображением;
    • plain — вставка ссылки на картинку. Оформляется в виде текста, без графики;
    • nolink — снятие ссылки на картинку;
    • box — открытие изображения в окне;
    • NNNxYYYpx или NNNpx — задает размер фото в пикселях.
    • Создание таблицы

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

      Фото: варианты создания таблиц

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

    • <|символ начала таблицы, без него таблицы быть не может. Используется всегда;
    • |+ отвечает за расположение названия таблицы по центру. Ставят после символов начала таблицы. Используется по желанию;
    • | обозначает начало новой строки и ячейки;
    • | символ, делающий ячейку прозрачной;
    • ! делает ячейку темным цветом. При его отсутствии обязательно нужно применять предыдущий знак;
    • |> означает конец таблицы. Необязательный символ, однако, используется, чтоб предотвратить возникновение ошибки.
    • При заполнении таблицы, содержание каждой ячейки необходимо ставить после знака |, а при разделении ячеек, нужно продублировать типы строки вот так: || или .

      Особенности разметки

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

      Фото: пример функциональности

      С целью избегания основных ошибок следует ознакомиться с основными из них:

    • необходимо быть внимательными, при изменении размера картинки – если она менее 131 пикселя, ее качество значительно ухудшится;
    • ширина картинки не должна превышать 610px;
    • на одной wiki-странице запрещено размещать больше 17 незакрытых тегов;
    • при изменении ширины картинки, ее высота изменяется автоматически и пропорционально;
    • список внутри таблицы следует создавать с помощью тега
      ;
    • в одной строке разметки должно быть не больше 8 элементов списка.
    • Не знаете, как переустановить Андроид на планшете. Вам поможет статья.

      Вас интересует, как увеличить память на диске С. Вам сюда.

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

      Важно! Проверяйте закрытие всех тегов. Сохраняйте последовательность.

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

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

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

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

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

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

      Создание графического меню в группе ВКонтакте

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

      Интерактивное меню

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

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

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

      Создать красивое меню в группе ВКонтакте можно за 5 шагов.

      Шаг 1: готовим контент

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

      Шаг 2: работаем в Photoshop

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

      Сохраните файлы в формате gif.

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

      Шаг 3: создаем страницы

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

      Теперь создайте внутренние страницы. Используйте ссылку: http://vk.com/pages?o >

      где XXX — ID вашего сообщества, узнать который можно, щелкнув на любой пост и посмотрев на строку в браузере. В нашем примере цифры 35702496 и есть идентификационный номер группы:

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

      Шаг 4: создаем внутреннюю часть меню

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

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

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

      Шаг 5: делаем красивый пост

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

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

      Как создать красивое меню ВКонтакте без фотошопа

      Как создать меню ВКонтакте с помощью сервиса vkprofi.ru

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

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

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

      В левом верхнем углу располагается меню для экспорта (загрузки) готового меню в вашу группу ВК. Там вы можете также посмотреть ваш статус в сервисе «Неактивен» или «Активен», статус зависит от наличия средств на балансе, минимальное пополнение 50руб. на 1 сутки. Экспортировать меню можно только при активном статусе.

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

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

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

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

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

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

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

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

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

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

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

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

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

      После установки ссылок прокликайте каждую кнопку и убедитесь, что ссылки установились. Если одна или несколько ссылок ведут на ВК пост, их лучше предварительно сократить в сервисе vk.com/cc и уже сокращенные вставить в меню.

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

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

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

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

      После загрузки меню в группу откроется белое окошко, в котором будет ссылка на меню и его wiki-код.

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

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

      Поздравляем, ваше красивое меню ВКонтакте готово!

      Вы также можете посмотреть подробный видеоурок по созданию ВК меню ниже:

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

      Обновлено — 29 августа 2017 в 13:16

      p, blockquote 1,0,0,0,0 —>

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

      p, blockquote 2,0,0,0,0 —>

      p, blockquote 3,0,0,0,0 —>

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

      p, blockquote 5,0,1,0,0 —>

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

      2. Открываем его с помощью стандартной программы Paint (этот редактор установлен на всех компьютерах, путь: пуск/все программы/стандартные/paint).

      3. В меню «Фигуры» выбираем овал и отмечаем часть картинки кругом . Эта часть и будет аватаркой:

      p, blockquote 6,0,0,0,0 —>

      p, blockquote 7,0,0,0,0 —>