Как сделать красивое меню в группе вконтакте
Цель создателя группы в соц. сети привлечь больше посетителей. Важно чтоб гость захотел вступить, подписать, почитать информацию, оставить комментарий или заказать товар. Потребность в конечном результате отличается от направления деятельности.
Первые секунды пребывания формируют дальнейшие действия гостя. Именно поэтому интерфейс играет большую роль.
Факторы оставляющие гостя:
- аватарка;
- описание;
- название;
- красивое и практичное меню;
- красочность;
- контент.
Создать практичное меню, побуждающее не только к действию легко. Но для начала следует разобраться, каким оно должно быть.
Каким должно быть меню
Используя грамотно составленное меню, посетитель сможет легко передвигаться по ней и быстро получить ответы на свои вопросы. Также навигация позволяет создать правильное впечатление о проекте.
Три основные цели групп:
- продажи;
- увеличение трафика;
- увеличение активных посестителей.
Для продаж навигация в группе заменяет витрину в магазине.
Здесь должны быть самые важные кнопки:
- каталог;
- стоимость;
- доставка;
- акционные предложения;
- отзывы.
Для увеличения посещаемости акцент делается на контент и изюминку сайта или блога.
Приблизительный вариант набора кнопок:
- интересные статьи;
- полезная информация;
- подписаться;
- отзывы.
Для повышения активности участников следует стимулировать их акциями, опросами и интересным и необычным контентом.
Предлагаем такие кнопки:
- подписаться на новости;
- задать интересный тематический вопрос;
- акции;
- опросник;
- голосование.
Рассмотрим, как создать меню для группы в контакте, все технические моменты, которые требуют минимальных знаний графического редактора и основ работы с вконтакте.
Создаем по этапам
Создание навигации – процесс интересный, сложный и длительный. Но результат того стоит.
Весь процесс условно делиться на 2 этапа:
- работа с фотошопом;
- техническое добавление.
видео: меню для паблика
Работаем с фотошопом
Прежде чем приступить, необходимо визуально представить дизайн или общий вид, а также его составляющие. Специальных знаний не требуется, достаточно просто выполнять шаги инструкции.
Алгоритм действий:
- установите и запустите программу «Фотошоп»;
- в пункте «Файл» выберете «Создать»;
- в появившемся окне задайте:
- ширину – 630 пикс;
- высоту – 725 пикс;
- содержимое фона – белый.
Далее нужно разделить рабочую область на 2 окна. Они то и будут привлекать внимание посетителей и обязательно заставят передвигаться по группе.
Делается это с помощью инструмента «Прямоугольная область»:
Работа с графикой:
- под этим слоем расположите свое оформление:
- далее напишите желаемый текст;
- с помощью инструментов рисования фигур, нарисуйте кнопки:
Приблизительно должно получиться вот так:
Сохраните прямоугольник, расположенный справа отдельной картинкой, задав размер 200х500 пикс. Это готовая аватарка, загружается через кнопку «Загрузить фотографию» в группе вк.
Вторую картинку нужно еще разделить по количеству пунктов. Это делается для того, чтоб каждой кнопке присвоить ссылку.
Для начала следует сделать разметку:
- комбинацией клавиш «CTR+R» включите линейку;
- наведите курсор на верхнюю линейку;
- зажав левую кнопку мыши, потяните вниз, к нижней границе кнопки;
- повторите по каждой кнопке.
Создаем фрагменты:
- возьмите инструмент Slice Tool;
- вверху есть кнопка «Фрагменты по направляющим»;
- должно получиться вот так:
Сохранение изображений:
- нажмите Файл – Сохранить для web;
- введите название;
- укажите формат JPEG;
- ставьте наилучшее качество;
- отметьте галочки у «Прогрессивный и Встроенный профиль»;
- последняя кнопка «Сохранить».
Как очистить компьютер от ненужных программ? Инструкция тут.
Далее приступайте к технической части. Необходимо загрузить созданные шедевры в группу.
Техническая часть
Готовые изображения необходимо перенести в группу. Выполняя указанные ниже шаги с этой задачей можно легко справиться.
Важно! Заливка меню отличается от обычно загрузки фото или картинок.
Все по порядку:
- зайдите в группу;
- включите новостную ленту;
- возле полосы «Свежие новости» нажмите «Редактировать»;
- поменяйте название на меню или что-то подобное;
- через кнопку в виде фотоаппарата добавьте картинки;
- результат будет приблизительно таким:
Теперь самое важное, собственно для чего все это и делалось. Добавить функциональности меню. Отдельной картинке необходимо присвоить «свою» ссылку.
Перейдя по ссылке, посетитель быстро попадет на необходимую информацию.
Если вы хотите вставить ссылку на запись со стены:
- найдите необходимую запись;
- кликните по ней левой кнопкой мыши;
- скопируйте 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 элементов списка.
Для создания красивой и функциональной навигации необходимо знать основы фотошопа и вики-разметки. Однако последняя содержит свои нюансы, столкнувшись с которыми новичок, может надолго застрять и запутаться.
Важно! Проверяйте закрытие всех тегов. Сохраняйте последовательность.
Основной помощник в данном деле это внимательность и четкое следование инструкции. В помощь всегда может прийти официальная страница вк, которая так и называется вики-разметка.
Home — The Boathouse Orlando
The Boathouse Orlando
Ресторан №1 в Дисней-Спрингс по версии USA Today!
The Boathouse Orlando
Присоединяйтесь к нам в лучших ресторанах на набережной в Центральной Флориде.
Предыдущий
Следующий
«Отличная еда, отличные устрицы, отличные напитки, отличная атмосфера и 100% отличный сервис! Всегда будет одним из моих любимых!»
Мэри Бет Д. «Это место абсолютно феноменально»
«Я обедал в прекрасных ресторанах по всей территории Соединенных Штатов, и НИКОГДА не встречал такого хорошего обслуживания, как в этом ресторане. Спасибо за потрясающий опыт!»
Дуг Дж. «Еда была великолепной, но обслуживание было действительно замечательным и захватывающим!»
«Наш сервер был восхитительным, еда была превосходной, и они без проблем смогли разместить нашу группу из 12 человек! Даже принесла еду моему 2-летнему ребенку, чтобы он мог поесть пораньше!»
Сюзанна Д. «Это был самый потрясающий опыт!»
Отличная еда Изучите наше меню Рестораны на набережной Галерея Лодки мечты Классика Амфикар Туры Подробности
Живая музыка каждую ночь!
В пятницу и субботу вечером с 20:00. до полуночи слушайте живую музыку в The BOATHOUSE, пока вы отдыхаете, наблюдая за самым красивым закатом в Центральной Флориде.
Звоните 407-939-2628 для бронирования запросов.
Частный ужин
BOATHOUSE® предлагает частные обеды для особых мероприятий и больших групп. Наша команда кулинаров разработает меню и создаст праздник, который запомнится на всю жизнь. Позвоните нам сегодня, чтобы забронировать следующее мероприятие: 407-939-2628.
Капитаны подпевают бранч
Присоединяйтесь к нам каждую субботу и воскресенье на лучший бранч в Центральной Флориде! Капитан будет принимать запросы на песни для ваших любимых песен, пока вы обедаете в знаменитом меню бранча от шеф-повара Боба!
Домашняя страница — Salad And Go
Домашняя страница — Salad And GoУтренняя остановка с YUM в течение всего дня.
Закажите завтрак и обед заранее и наслаждайтесь утром двойным напором. Или прокатитесь через наш диск через. Наша команда сделает это эффективно и вкусно.
Много чистоты, мало зелени.
Прощай, прощай грустные салаты. Мы все о больших, чистых и привлекательных вариантах, которые на самом деле поднимают ваши стандарты салата, не повышая цены.
См. МенюНевероятно до первой порции.
Наши салаты — это не просто поцелуй шеф-повара, они также тщательно приготовлены нашим собственным шеф-поваром Даниэлем Патино. Наше вкусное и инновационное меню означает, что вы будете хотеть салатов круглый год.
Заказать сейчасЛюдям, которые здесь работают, действительно нравится.
О, и они ПОТРЯСАЮЩИЕ. Настоящий салат и закуска. Благодаря нашей команде, наша служба доставки находится там, где она есть.
Работайте с намиПредыдущий слайд
Следующий слайд
Утренняя остановка с YUM в течение всего дня.
Закажите завтрак и обед заранее и наслаждайтесь утром двойным напором. Или прокатитесь через наш диск через. Наша команда сделает это эффективно и вкусно.
Много чистоты, мало зелени.
Прощай, прощай грустные салаты. Мы все о больших, чистых и привлекательных вариантах, которые на самом деле поднимают ваши стандарты салата, не повышая цены.
См. наше менюНевероятно до первой порции.
Наши салаты — это не просто поцелуй шеф-повара, они также тщательно приготовлены нашим собственным шеф-поваром Даниэлем Патино. Наше вкусное и инновационное меню означает, что вы будете хотеть салатов круглый год.
Заказать сейчасПредыдущий слайд
Следующий слайд
10:30)
Выходные дни 7:00-21:00 (завтрак до 11:00)
Хорошая еда не должна быть сложной.
Наша миссия — сделать свежие и питательные продукты доступными и удобными для ВСЕХ.
Мы революционизируем фаст-фуд.
Меняем мир, по одному салату за раз.