Размеры меню для группы в контакте: Размеры оформления сообщества ВКонтакте ⋆ Targbox SMM

Содержание

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

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

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

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

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

Да, именно самостоятельно, ведь после прочтения данной статьи, вам не понадобятся услуги фрилансеров. Хотя это дело не дорогое, за 1500 вам смогут сделать сделать меню на workzila (подробный опыт о работе с этой биржей я писал ).

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

1. Макет (графическое расположение элементов) — мы ведь должны знать где что должно находиться.

2. Базовые знания wiki-разметки. (о самых самых стандартных вещах мы поговорим чуть ниже, а для подробного изучения — рекомендую эту группу ).

3. Базовые навыки работы с фотошопом. Нужно будет вырезать куски макета нужного размера.

Где брать макеты для меню?

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

1. На фрилансе или томже Workzilla.

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

3. Можно загуглить и скачать уже готовые. Поверьте, таких не мало.

Ну с другой стороны… Зачем гуглить? Просто подпишитесь на обновления моего сайта. И покликайте по кнопкам соц сетей ниже.

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

Главное условия — быть подписчиком и пройтись по соц кнопкам.!


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

Размеры аватаров и меню, которые пригодятся для оформления групп вк

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

Как видите, в группе для аватарки нужен размер 200 в ширину и 500 пикселей в высоту. А для картинки основного меню — 395 пикселей ширины и 289 пикселей высоты.

Вот, в принципе и все что нужно. Есть макеты, есть понимание размеров.

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

Как самостоятельно оформить группу вконтакте, имея макеты на руках

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

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

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

Сначала немного ликбеза.

Чем отличается меню группы от меню паблика?

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

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

А в паблике (в группе, кстати, тоже можно) — меню — всегда открыто.

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

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

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

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

где XXX – номер группы, YYY – название страницы (здесь все знаки вопросов и тире обязательны).

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

Я ввёл следующий запрос

И у меня открылась сразу созданная страница с возможностью её редактирования.

Вот здесь-то и нужно будет вставлять ваш код самого меню с помощью wiki-разметки. Но об этом чуть позже.

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

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

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

И в появившемся окне нажимаем кнопку «Закрепить» — все просто!

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

На самом деле все сейчас используют именно этот способ меню.

Угадайте почему?

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

Нарезка макета для оформления группы или паблика

Так, для аватарки всё понятно, мы тут ничего не нарезаем. Мы создали картинку нужного размера и залили её в ВК. Всё. С аватаркой для группы мы закончили!

Теперь меню.

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

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

Нажимаем на меню, видим картинку.

Нам нужно выделить «кликабельные» зоны.

т.е. выделить сами кнопки. Давайте я выделю эти зоны для вас красными линиями.

У нас получается сколько? 5 картинок. И не каждая из картинок будет кнопкой!! Как видим верхняя большая картинка — это не кнопка, а сама по себе…

Так, мы по этим линиям вырезали картинки. Теперь нужно из «залить» в ВК.

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

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

Залили и у вас должно появится следующее:

Возможно у вас появится просто код, как на картинке ниже. Если нет — нажмите кнопку «Исходный код» , эту кнопку я выделил на верхней картинке. И увидите следующее:

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

И, чтобы между картинками не было отступов — вписать тег «nopadding», выглядеть это должно вот так:

вот это вот page-58190479_45419120 — это адрес самой страницы вконтакте, вы этот идентификатор найдете в адресной строке вашего браузера.

Вот и всё 🙂 Правда не сложно?

Вот что получилось в коде у меня в итоге. Если у вас нечто подобное — значит всё в порядке.

Если у вас с каким-то из пунктов возникли проблемы — прошу, обращайтесь. Буду рад помочь.

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

prospero | sociate | socialtools

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

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

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

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

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

Делаем шаблон для группы VK как на картинке ниже.

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

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

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

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

Её необходимо назвать также как и на графическом меню, а затем заполнить поле с описанием. Когда вы внесете всю нужную информацию, уверенно жмем «Создать тему».

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

Все готово? если да, то начинаем редактировать наше меню. Используем для этого вкладку «Свежие новости». Опять же смело жмем «Редактировать».

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

Образец кода для предполагаемого меню:

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

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

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

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

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

Тема этой статьи — новый дизайн ВКонтакте. Снова поменялось , теперь можно установить горизонтальную обложку в группе. Оформление вашего сообщества ВК с такой шапкой намного интереснее. Откровенно говоря, здесь не требуются знания Photoshop. А можно без особых навыков сделать красивую картинку даже в PowerPoint, Fotor, Canva, Pixlr Editor.

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

Загрузка новой обложки

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

Затем кликаем на последнюю, и загружаем новую обложку группы ВКонтакте. Вот тут и можно понять, что файл загрузки может быть любой величины! Но не меньше, чем размер 1590×400 px. Создаем прототип обложки в любом редакторе. Далее мы можем выделить и сохранить ту область, которая соответствует требованиям ВК. Вот подсказка, где найти изображение для обложки, каким редактором воспользоваться, чтобы

Чем интересен новый дизайн ВКонтакте?

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

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

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

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

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

Как сделать обложку группы Вконтакте онлайн

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

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

P.S.S. Включайте свою креативность и удачи Вам во всех начинаниях!

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

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

С чего начать работу над дизайном?

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

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

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

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

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

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

Важные элементы в дизайне групп Вконтакте

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

Аватар

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

Используйте только качественные изображения и забудьте про клипарты с бесплатных фотостоков. Поиск картинок для эффективного дизайна группы Вконтакте нужно производить на сайтах pinterest.com, freepik.com, flaticon.com или в крайнем случае google.ru. Но лучше подбирать изображения на платных фотостоках. Поисковые запросы вводите только на английском языке. Если испытываете трудности с английским, то смело используйте Гугл переводчик.

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

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

Создание сообщества

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

Вид сообщества и тематика

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

Оформление группы

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

На обложке можно разместить:

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

Обложка в сообществе «МТС»

Обложка в сообществе «Тинькофф Банк»

Обложка в сообществе «HeadShot»
Размеры изображений для оформления сообщества ВКонтакте.
Размер обложки для группы ВКонтакте 1590x400px
Размер миниатюры аватара — круг диаметром 200px

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

Описание сообщества

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

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

Примеры вики-постов:


Аватар группы

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

    1. Текст
      Если вы размещаете текст на миниатюре аватара, важно, чтобы он был крупным и не выходил за пределы аватара.
    2. Понимание
      На аватаре необходимо разместить изображение, на котором будет понятно, что изображено.
    3. Минимализм
      Для того, чтобы вашa аватаркa смотрелась актуально, можно сделать её в стиле минимализм: меньше слов и излишних элементов, не несущих практически никакой смысловой нагрузки. Миниатюра аватара обязана быть максимум простой и читабельной.
    4. Привлечь внимание
      Чтобы миниатюра аватарки привлекала внимание. Нужно оформить её так, чтобы она не была слишком белой и скучной, иначе она потеряется на фоне более красочных аватарок конкурентов.

Что разместить на миниатюре аватара?

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


Настройки сообщества

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

Далее во вкладке «ссылки» указать ссылки на вашу страницу в других соцсетях и ссылку на ваш сайт.

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

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

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

Вики-меню — красиво и информативно

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

Примеры вики-меню:



Подробное руководство по созданию вики-меню вы можете посмотреть тут —

Оформление меню в контакте. Как правильно оформить группу ВКонтакте — основные элементы и полезные фишки

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

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

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

Шаг 1.
Создаем в фотошопе новый документ размером где то 850х700 пикселей, заливаем его белым цветом. В данном примере я сразу наложила сверху интерфейс ВКонтакта для наглядности. Теперь нам надо вырезать в слое два окна, через которые будет проглядывать собственно само графическое оформление. Сначала выделяем прямоугольник размером 200х500 пикселя и нажимаем Del. Потом выделяем прямоугольник размером 510х309 и также нажимаем Del.

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

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

Шаг 3.
Теперь правый прямоугольник (аватар) сразу же сохраняем отдельной картинкой размером 200х500 пикселя. Это уже готовая картинка для оформления группы. Она загружается в блок в правом верхнем углу группы, где написано «Обновить фотографию». А левую картинку надо нарезать на несколько картинок по количеству пунктов меню. В данном случае это 5 картинок шириной 510 пикселя.

Шаг 4.
На этом шаге нам надо загрузить наши нарезанные картинки ВКонтакт. Для этого сразу под описанием группы выбираем блок «Свежие новости», по-моему так он называется в оригинале. Я его переименовала в «Меню». Нажимаем «Редактировать». Важно! Во-первых, у вас должна быть именно Открытая группа, а не Страница. Поскольку на Странице такого пункта просто нет. И второе, в меню Управление сообществом > Информация > Материалы должен быть выбран пункт «Открытые».

Шаг 5.
Итак, во вкладке «Редактирование» мы нажимаем на иконку фотоаппарата и загружаем наши пять нарезанных картинок меню. ВКонтакт загрузит их по-своему, уменьшив размер до 400 пикселей по ширине и присвоив картинке тег noborder. В следующем шаге нам предстоит немного поправить код.

Шаг 6.
А именно, мы выставляем оригинальные размеры картинок и меняем тег noborder на тег nopadding. Также нам надо проставить урл ссылок с каждого пункта меню. В данном случае первая ссылка ведет на внутреннюю страницу Вконтакта, а остальные четыре ссылки ведут прямо на страницы моего сайта.

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

[][][]

Шаг 7.
Еще раз повторяю, чтобы открыть данное меню надо щелкнуть по надписи «Меню». А так оно всегда находится в свернутом виде. Читайте комментарии к посту, там много вопросов разобрано. Ну и присоединяйтесь к моей группе В Контакте .

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

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

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

  • Обложка страницы показывается вверху, на всю ширину паблика, размер 1590 х 400 пикселей;
  • Большой аватар — вертикальный баннер 200х500 px (соотношение сторон 2:5), показывается справа вверху;
  • Маленькая аватарка, круглая картинка, показывается в каждом сообщении группы, размер 200х200 пикселей.
  • Изображение меню для группы Вконтакте, ширина 510 пикселей, высота — 307 (чтобы нижний край меню красиво совпадал с низом большой аватары справа).

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

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

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

Открой картинку в графическом редакторе. Обрежь или масштабирую до размера: длина 1590 px, высота 400 px.

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

Кликни по надписи «Загрузить» в поле «Обложка сообщества».

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

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

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

Размеры шапки в паблике Вконтакте в новом дизайне

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

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

Процесс оформления меню группы Вконтакте состоит из следующих этапов:

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

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

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

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

Открой картинку в редакторе. Инструментом редактора «Текст» напиши пункты меню поверх фона. Чтобы надписи меню были заметны, их можно выделить несколькими способами:

  • Обвести рамкой;
  • Изменить цвет фона под буквами;
  • Добавить буквам тень.

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

Следующий шаг — нарезка изображения на части:


Процесс нарезки изображения также можно выполнить с помощью удобного онлайн-инструмента www.imgonline.com.ua/cut-photo-into-pieces.php .

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

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

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

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

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

Каждый тэг изображения начинается «[[» и заканчивается «]]», состоит из трех частей, разделенных знаком «|»: ID изображения, свойства и ссылка. Нужно откорректировать размеры картинок и вставить в их свойства тег «nopadding». Свойства картинок перечисляются через «;».

После сохранения изменений создание меню завершено.

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

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

Правила оформления таблицы:

  • Начало обозначается символом «{|», конец таблицы — «|}».
  • Дополнительные свойства указываются после «|~»
  • Новая строка начинается с «|-».
  • Каждая ячейка отделена «|».

Для исключения лишних пробелов нужно указать параметры таблицы «fixed nopadding noborder». Разметка графического меню из 2 столбцов и 2 строк выглядит так:

А само меню в группе:

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

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

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

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

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

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

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

Делаем шаблон для группы VK как на картинке ниже.

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

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

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

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

Её необходимо назвать также как и на графическом меню, а затем заполнить поле с описанием. Когда вы внесете всю нужную информацию, уверенно жмем «Создать тему».

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

Все готово? если да, то начинаем редактировать наше меню. Используем для этого вкладку «Свежие новости». Опять же смело жмем «Редактировать».

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

Образец кода для предполагаемого меню:

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

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

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

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

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

), сделать меню.

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

Делаем красивую графику

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

  • Аватар для группы — 200×300 пикс
  • Баннер в описании — 510×271 пикс

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

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

Для начала загружаем аватарку. Идем в группу, и нажимаем «Загрузить фотографию» .

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

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

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

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

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

Теперь обновите страницу, и посмотрите результат.

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

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

Давайте вернемся к нашему примеру и представим, что необходимо сделать кнопку «Подробнее» . Она уже есть на картинке. Как нам сделать ее именно кнопкой, чтобы при нажатии, человек попадал на наш основной сайт? Сейчас покажу.

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

Открываем нашу картинку в редакторе, и активируем инструмент «Раскройка» .

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

Теперь нажимаем Alt+Ctrl+Shift+S , чтобы сохранить готовые изображения.

Https://vk.com/pages?oid=-120208137&p=меню

Смотрите, после символов «odi=- » , вам нужно вставить id своей группы (см. ). А в самом конце ссылки, напишите название для вашей страницы с меню. В примере мы так и оставим «Меню» .

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

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

Далее переходим в раздел «Редактирование» . Здесь для каждого изображения нам нужно убрать отступы, чтобы они слились в единую картинку. Для этого в коде добавьте вот такое значение «nopadding;» . И добавьте ссылку на нужную страницу или сайт, прописав значение «https://site.ru/page.html» (указывайте свои адреса!). В нашем примере кнопка «Подробнее» , должна вести на сайт сайт. Вот что должно получиться.

[] []

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

Https://vk.com/page-120208137_52523487

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

Вот такое меню у нас получилось в итоге.

Рекомендуем также

Как сделать иконки в вк : Радиосхема.ру

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

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

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

ВСЕ РАЗМЕРЫ ЭЛЕМЕНТОВ ? vk.cc/9ruYUx

Размер ВК / Как сделать группу в ВК запись закреплена

  • Все записи
  • Записи сообщества
  • Поиск
Размер ВК / Как сделать группу в ВК запись закреплена

Друзья, у кого обложка группы отображается некорректно, обрезана по краям справа и слева примерно с 09.02.2021?

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

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

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

Размер ВК / Как сделать группу в ВК запись закреплена
Размер ВК / Как сделать группу в ВК запись закреплена

А у вас в сообществе настроены приветственные сообщения?
Это те сообщения, когда посетитель впервые пишет в сообщения в группу.

Данные сообщения считаются важными, ведь там можно отразить:
1. Приветствие и время работы вашего бизнеса;
Показать полностью.
2. Акцию или УТП;
3. Ссылку на лонгрид, вики-меню, мастер-класс, марафон и т.д;
4. Первый вопрос, на который посетитель сразу может написать ответ.

Расскажите какое у вас в сообществе приветственное сообщение в комментариях к посту. Давайте соберем варианты, может кому пригодится.

Размер ВК / Как сделать группу в ВК запись закреплена

Размер обложки для #историй
Как #сделать историю с компьютера и мобильной версии.

Используйте в своих сообществах новый канал продвижения
Подробнее читайте в статье

Размер ВК / Как сделать группу в ВК запись закреплена

ВСТРЕЧАЙТЕ ЭФФЕКТИВНЫЕ ЛЕНДИНГИ ВКОНТАКТЕ

Приложение Spycat Page — конструктор промостраниц ВКонтакте. Это новый инструмент для продвижения товаров и услуг Вконтакте.

Преимущества лендинга Вконтакте:
Показать полностью.
Теперь не нужно писать сложный код, любой пользователь может за 5 минут создать посадочную страницу с помощью конструктора;
Имеются шаблоны под разные виды бизнеса, если вы не владеете дизайном;
Промостраницы можно добавить в рекламный пост, пост сообщества, виджет или меню;
Эффективна в использовании в таргетированной рекламе;
Интегрируется с Яндекс.Метрикой, Пикселем ВКонтакте, с приложениями для рассылки сообщений «Рассылки ВКонтакте» и «Senler», уведомляет о новых заявках через чат-бот;
Повышает конверсию при использовании на промостранице аction-кнопки, которая может быть настроена на подписку в сообщество, на рассылку, на форму заявки и др.

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

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

КАК ПОВЫСИТЬ ДОВЕРИЕ К ВАШЕЙ ГРУППЕ #ВКОНТАКТЕ!
6 простых пунктов для успешной группы.

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

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

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

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

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

Качество контента.
Пишите своими словами, добавляя УТП (уникальное торговое предложение).
Фотографии товара должны вызывать желание его купить.

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

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

Как создать группу

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

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

  • Нажмите на значок Контакты в нижней части главного меню
  • Выбрать Создать Группа
  • Здесь вы увидите всех из своей адресной книги или можете ввести номер телефона того, кого хотите добавить.
  • Добавьте людей, которых вы хотите, в свою группу и нажмите Готово (* Android) или Создать (* iOS)

💡ПРОГРАММНЫЙ СОВЕТ: Создайте группу, не добавляя никого, таким образом вы можете создать свою группу до того, как люди начнут присоединяться. Вы можете сделать это, нажав Готово (* Android) или Создать (* iOS) никого не ковыряя.

Вот и все — ваша группа создана.Затем настройте его и расскажите о себе!

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

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

  • Зайдите в свою группу, нажмите на название группы. Это приведет вас к экрану Group Info .
  • Чтобы переименовать группу, нажмите на название
  • Чтобы изменить плитку чата, нажмите Изменить на текущей плитке чата.Выберите забавный GIF-файл или свою фотографию, чтобы представить свою группу. Когда вы меняете плитку чата, ваша группа получает уведомление.

💡 ПРО СОВЕТ: После того, как ваша группа заработает, подумайте о том, чтобы изменить плитку чата как способ взаимодействия с вашей группой. Вы можете попробовать найти такие плитки, как «Пятница», «Праздновать» и т. Д.

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

💡 СОВЕТ ПРОФЕССИОНАЛА: В свой первый Polo для группы вы можете включить несколько вещей, например, почему вы основали группу, какие вопросы вы хотите, чтобы люди обсуждали, или какие правила у вас есть в группе. Вы также можете поделиться несколькими советами о том, как использовать Marco Polo, чтобы помочь всем начать работу.

Пригласите людей в свою группу

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


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

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

💡 PRO TIP : Начните разговор прямо сейчас! Когда два или более человека разговаривают, каждый может видеть, насколько это весело.

Домен NORTHSIDE Perry’s Steakhouse & Grille®

Домен NORTHSIDE Perry’s Steakhouse & Grille® | Изысканный ресторан в Остине, штат Техас перейти к содержанию Щелкните здесь, чтобы получить информацию о пикапе со стороны автомобиля, доступном в часы приема пищи

Чикаго, Иллинойс

1780 East Golf Road
Schaumburg, IL 60173

(Карта)

Телефон: 847-648-7451

Факс:

Доступна услуга парковщика

×

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

×

Опыт Перри

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

Учить больше ×

Домен NORTHSIDE

Зарезервировать To-Go и варианты доставки

| Частный ужин | Штанга 79 ®

| Частный ужин | Штанга 79 ®

Ресторан

Понедельник — четверг
16:00 —

Пятница
16:00 —

Суббота
16:00 —

Воскресенье
16:00 —

Часы

Понедельник — четверг (DINE-IN & TO-GO)
4 П.М. — 10 вечера.

Пятница (DINE-IN & TO-GO)
10:30 утра. — 10 вечера.

Суббота (DINE-IN & TO-GO)
16:00. — 10 вечера.

Воскресенье (DINE-IN & TO-GO)
4 П.М. — 9 вечера.

Управление

Джефф ХэлфордСтарший генеральный директор

Энтони ФеррантеШеф-повар

Опыт Перри в Domain NORTHSIDE

Поприветствуйте общественные часы, пятничные обеды, интимные ужины и праздничные вечеринки в Perry’s Domain NORTHSIDE.Здесь вы можете попробовать удостоенные наград стейки, зрелищные презентации за столом, знаменитую свиную отбивную, пламенеющие десерты, обширную винную карту и все, что принадлежит Perry’s. Посетите наш оживленный бар 79 ® и насладитесь освежающими креативными коктейлями в просторном внутреннем дворике. Каждый день — это редкое и хорошо сделанное событие ® в Perry’s.

Домен NORTHSIDELocation Gallery — Остин, Техас

1/11

Домен NORTHSIDE Exterior

2/11

Домен NORTHSIDE Главная столовая

3/11

Домен NORTHSIDE Wine Tower

4/11

Домен NORTHSIDE Bar 79 ®

5/11

Домен NORTHSIDE Signature Room

6/11

Домен NORTHSIDE Prime Room

7/11

Домен NORTHSIDE Prime Room

8/11

Домен NORTHSIDE Northside Room

9/11

Домен NORTHSIDE Legacy Room

10/11

Домен NORTHSIDE Prime и Northside Rooms, объединенные

11/11

Домен NORTHSIDE Patio

◀ ︎ ▶ ︎ × Знаменитая свиная отбивная

Давайте поговорим Chop

®

Свиная отбивная, пятница ® Обед, воскресный ужин, инструкции по транспортировке и разогреву

Специальные предложения и многое другое

Дай мне блюдо

Держите меня в курсе последних предложений и акций Perry’s Steakhouse & Grille ® !

Заполните форму ниже, чтобы сделать заказ в нашем домене NORTHSIDE , расположенном по адресу Austin, TX .

×

Группы меню

Функция «Группа меню» позволяет упростить управление пунктами меню в Clock POS. Например, кофе, горячий шоколад и чай могут составлять группу меню горячих напитков.

Как создать

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

Вы можете просмотреть существующие группы меню, выбрав «Управление» -> «Группы меню».


Как редактировать

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


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

Размер значка: В раскрывающемся меню выберите размер значка.

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

Цвет: Нажмите кнопку «Цвет» и выберите цвет группы меню из палитры.

Блок: Этот флажок заставит эту группу меню покрыть весь «блок» экрана, как показано на изображении ниже.


«Две строки»: Этот флажок заставит вашу группу меню располагаться в две строки, как на изображении ниже.


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

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

Обновление: Используйте эту кнопку, чтобы применить изменения, внесенные в группу меню.

Сброс: Это приведет к сбросу настроек группы меню по умолчанию.

Мега-меню

хорошо работают для навигации по сайту

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

Как показано на следующих снимках экрана, мегаменю имеют следующие характеристики:

  • Большие, двумерные панели разделены на группы вариантов навигации
  • Варианты навигации структурированные с помощью макета, типографики и (иногда) значков
  • Все видно сразу — без прокрутки
  • Вертикальный или горизонтальный форм-факторы при активации с верхней панели навигации; при активации из левой навигации они могут отображаться как мега-развязки (не показаны)
  • Параметры меню открываются при наведении указателя мыши, щелчке или касании
Дэйв Рэмси.com мегаменю разделил контент на пять отдельных групп. Пользователи, открывшие мегаменю, могли быстро сканировать различные категории. Мега-меню Новой Шотландии включало изображения, рекламирующие местные достопримечательности и мероприятия. Визуальный стиль не отличался четким различием между двумя отдельными группами категорий: Просмотр списков и Узнайте больше о . Применение другого шрифта или цвета шрифта могло бы выделить эти группы. Мегаменю GameStop.com было трудно сканировать, потому что метки опций не загружались заранее и были слишком похожи друг на друга (например.g., ярлыки под XBOX 360 Pre-Owned трудно различить, потому что все они начинаются со слова Pre-Owned ). Розничный продавец JohnLewis.com использовал мегаменю с ярлыками, которые было трудно сканировать и отличать друг от друга. Moleskine.com использовал изображения в мегаменю, чтобы помочь пользователям визуализировать и сравнивать продукты.

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

Мегаменю также позволяют дизайнерам отображать несколько уровней информационной архитектуры сайта — в трех из пяти приведенных выше примеров (Дэйв Рэмси, Game Stop, Джон Льюис) мегаменю содержат как категории первого уровня, так и категории второго уровня.

Мега-меню превосходит обычные выпадающие меню

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

  • Для больших сайтов с множеством функций обычные раскрывающиеся меню обычно скрывают большинство параметров пользователя .Да, вы можете прокручивать, но (а) это неудобно и (б) прокрутка скрывает параметры в верхней части меню. В результате вы не можете визуально сравнить все свои варианты; нужно полагаться на кратковременную память. У людей достаточно мыслей, и возня с кратковременной памятью снижает их способность выполнять задачи на вашем сайте. Мега-меню показывают все сразу, поэтому пользователи могут видеть , а не пытаться запомнить .
  • Обычные раскрывающиеся списки не поддерживают с группировкой , если вы не используете кладжи, такие как префикс вторичных вариантов с пробелом для их отступа.Мега-меню позволяют визуально подчеркнуть взаимосвязь между элементами. Это снова помогает пользователям понять свой выбор.
  • Хотя простой текст может быть прекрасным, иллюстраций действительно стоит слов, как показывает пример Moleskine. Мега-меню упрощают использование изображений и значков, когда это необходимо. И даже если вы придерживаетесь одного текста, в вашем распоряжении более богатая типографика (позволяющая, например, различать размеры ссылок в зависимости от их важности).

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

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

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

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

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

Таким образом, хронометраж должен быть:

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

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

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

В приведенном выше примере пользователь сначала указал на элемент навигационной панели Sport & Leisure , а теперь хочет выбрать Haberdashery .При перемещении указателя между этими двумя точками он пересекает элемент навигационной панели Baby & Child . Многие пользователи будут двигаться так быстро, что указатель выйдет из активной области менее чем на 0,5 секунды. Однако пожилые или неторопливые пользователи могут перемещать мышь так медленно, что раскрывающийся список исчезнет, ​​пока они все еще стремятся к пункту меню. Очень назойливый.

Группирование опций в мегаменю

Основные правила группировки:

  • Параметры фрагментов в связанных наборах , например, те, которые вы обнаруживаете после проведения исследования с сортировкой карточек ментальной модели функций пользователей.
  • Оставить средний уровень , степень детализации . Не предлагайте огромные группы с многочисленными опциями, для сканирования которых требуется много времени. И наоборот, не делайте отдельные группы настолько маленькими, чтобы в мегаменю было слишком много групп, на понимание которых пользователи должны потратить время.
  • Используйте краткие, но описательные метки для каждой группы. Помните стандартные правила написания текстов в Интернете: повышайте удобство сканирования, начиная с наиболее информативного слова и избегайте выдуманных терминов.
    • Чтобы слова были короткими и прямыми; основная форма глаголов («магазин») обычно лучше герундий («покупка»).
    • Дифференциальные этикетки. Например, предложения JohnLewis.com Gift по проценту и Gift по Случай не работают вместе.
  • Заказать группы. Вы можете сделать это, используя неотъемлемый порядок между функциями (как для рабочего процесса) или в зависимости от важности, поместив наиболее важную или часто используемую группу в верхний левый угол (при условии, что язык с письмом слева направо, например английский).
  • Показывать каждый вариант только один раз . Дублирование параметров заставляет пользователей задаться вопросом, совпадают ли эти два экземпляра или разные. Кроме того, избыточность делает весь интерфейс больше и громоздче.

Сохраняйте простоту мегаменю

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

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

Точно так же — но еще хуже — скрывает окно поиска в мегаменю. Это плохо по двум причинам:

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

Доступность

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

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

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

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

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

Есть два основных подхода к повышению доступности мегаменю:

  • Простой : Не беспокойтесь о том, чтобы сделать само раскрывающееся меню доступным. Вместо этого сделайте каждый пункт меню верхнего уровня интерактивным, приведет к обычной веб-странице , где вы представите все раскрывающиеся варианты в простом, полностью доступном HTML.
  • Advanced : отредактируйте сайт из серверной части с помощью плагина jQuery, который сделает доступным средство чтения с экрана мегаменю. Это также потребует структурных изменений в HTML и CSS.

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

Заключение

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

См. Также: статья о недостатках плохо оформленных мегаменю.

Сэндвич-кейтеринг — тарелки для вечеринок и упакованные ланчи

Сэндвич-кейтеринг с рестораном Джимми Джона

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

Коробки для вечеринок, коробки для обедов и Mini Jimmys® полностью настраиваются. Выберите свои любимые 8-дюймовые фавориты или оригиналы на нашем свежеиспеченном французском хлебе или в салате Unwich®. Не забудьте взять с собой пакеты с Jimmy Chips®, ведра Jumbo Kosher Pickle и шоколадную стружку или овсяное печенье с изюмом. для всего экипажа!

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

Обслуживайте все типы мероприятий с помощью Jimmy John’s

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

Мы специализируемся на заказах кейтеринга в последнюю минуту, но всегда приветствуем уведомление за 24 часа!

Корпоративное питание

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

Для больших офисов или корпоративных мероприятий и вечеринок обратите внимание на наши коробки для вечеринок из 18 или 30 предметов с упакованными третями сэндвичей или упаковку из 12 полусэндвичей Mini Jimmys.Кроме того, закажите много вкусных блюд Jimmy Chips®, печенья и ведерко с нашим Jumbo Kosher Jimmy Pickles®.

Бокс-ланч-кейтеринг

Наши коробочные обеды идеально подходят для рабочих обедов, внеклассных мероприятий и экскурсий. Они включают в себя 8-дюймовые бутерброды, Jimmy Chips® и овсяное печенье с изюмом или шоколадной крошкой, а также маринованное копье!

Кейтеринг для особых мероприятий

Вечеринка позже? Мы обслуживаем.

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

За какое время необходимо предварительное уведомление для заказа кейтеринга?

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

Сколько людей кормят Party Boxes и Mini Jimmys®?

Party Box из 18 предметов кормит примерно 9, Party Box из 30 предметов — 15, а пакет Mini Jimmys из 12 — 6-8.

Могу ли я настроить свои коробки для вечеринок или коробочные обеды?

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

Могу ли я попросить, чтобы кусочки сэндвича в упаковках для 18 и 30 вечеринок были индивидуально упакованы?

Да! Сообщите местную команду Джимми Джона при размещении заказа.

Могу ли я получить обслуживание Unwiches?

Да! Наш Unwich® доступен для коробок для вечеринок и коробок для обедов!

Какие есть варианты питания?

Закажите любой из ваших любимых чипсов Jimmy Chips®, печенье или ведро наших Jumbo Kosher Jimmy Pickles и не забудьте отдельные стороны Kickin ‘Ranch® или Avocado Guac Spread!

Джимми Джона доставляет и организует кейтеринг?

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

Есть ли минимальный заказ на упакованные ланчи?

Нет, мы накормим столько, сколько нужно !!

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

Свяжитесь с вашим местным офисом Jimmy John’s или позвоните в нашу службу поддержки клиентов по телефону 1 (866) 276-6302.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *