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

Виды меню сайта

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

Главное

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

Второстепенное

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

По способу реализации выделяют:

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

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

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

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

Второе бывает левым либо правым, либо комбинацией обоих.

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

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

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

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

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

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

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

После добавления снова попадаем в меню редактора и нажимаем клавишу «<>», в которой произведем дальнейшее редактирование. Также сразу переименовываем раздел и вместо «Свежие новости» пишем в нашем случае «МЕНЮ ГРУППЫ».

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

• id – идентификатор (номер) картинки, которую вы загрузили;

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

• www.site.ru – ссылка, ведущая на необходимый блок группы (например, «Обсуждения») или прямо на нужный раздел вашего сайта иди другого веб-ресурса.

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

Сразу все картинки необходимо закрыть тегом (а не как стоит изначально по умолчанию, каждое изображение) <center>…</center>, который автоматически размещает все части меню по центру страницы!

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

Вот что получается в итоге.

Не забываем нажать кнопку «Сохранить».

Теперь следует нажать на вкладку «МЕНЮ ГРУППЫ», потом «редактировать».

!Важно! Чтобы скопировать необходимый адрес, нажимаем в нашем варианте на «МЕНЮ ГРУППЫ» и копируем оттуда «правильную ссылку».

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

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

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

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

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

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

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

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

vk
smm

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

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

Такой прием удерживает внимание даже случайного посетителя, “заставляет” его задержаться на странице, изучить ее содержание детально (и даже подписаться на обновления). Отвечаем на вопрос: как создать меню в группе ВКонтакте?

• Выберите любую яркую картинку, которая вписывается в тематику и стилистику блога. Затем загрузите ее в фотоальбом на личной страничке или в альбом сообщества.
• Найдите ее в фотоальбоме, скопируйте ссылку на фотографию в адресной строке вашего браузера.
• Откройте режим редактирования группы, как описано в предыдущем разделе статьи. Нужен режим wiki-разметки.
• Пишем код. photo-AAAAA_BBBBBB — вставьте эту ссылку из адреса фото. Далее: |400px| (ширина изображения, можно выбрать любое значение, до 600 px). И, наконец, рабочая ссылка — скопируйте ее в текущей строке браузера.
• Заключите написанное в двойные квадратные скобки. Конечный вид ссылки: ].

Делаем подпункты в меню

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

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

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

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

И сразу все получится! Для паблика вконтакте процесс практически такой же.

Как сделать меню сайта

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

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

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

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

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

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

Такой прием удерживает внимание даже случайного посетителя, “заставляет” его задержаться на странице, изучить ее содержание детально (и даже подписаться на обновления). Отвечаем на вопрос: как создать меню в группе ВКонтакте?

• Выберите любую яркую картинку, которая вписывается в тематику и стилистику блога. Затем загрузите ее в фотоальбом на личной страничке или в альбом сообщества.
• Найдите ее в фотоальбоме, скопируйте ссылку на фотографию в адресной строке вашего браузера.
• Откройте режим редактирования группы, как описано в предыдущем разделе статьи. Нужен режим wiki-разметки.
• Пишем код. photo-AAAAA_BBBBBB — вставьте эту ссылку из адреса фото. Далее: |400px| (ширина изображения, можно выбрать любое значение, до 600 px). И, наконец, рабочая ссылка — скопируйте ее в текущей строке браузера.
• Заключите написанное в двойные квадратные скобки. Конечный вид ссылки: [].

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

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

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

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

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

Зайдите в группу и перейдите в окно “Свежие новости”, именно из него вы и будете создавать меню.

Кликните “Редактировать”.

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

Теперь создайте структуру:

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

На данном скриншоте, можно предположить, что в группе есть материал с названием “Раздел 1”, обсуждение “Раздел 2” и альбом “Раздел 3”. Нажмите “Предпросмотр” либо “Сохранить изменения”.

Ваш раздел сменится на “Меню”, а в нем появятся активные ссылки на основные категории группы, аккуратно оформленные в список.

Завершающий этап оформления

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

Наконец-то пришло время определиться публичная страница у вас или группа. От этого зависит дальнейшая стратегия.

Если вы не знаете что у вас, то переходите в раздел управление из категории «Мои группы».

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

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

Выпадающее меню

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

Сначала нам нужно создать HTML-структуру нашего меню. Основные навигационные ссылки мы поместим в маркированный список:

<ul id="navbar">
  <li><a href="#">Главная</a></li>
  <li><a href="#">Новости</a></li>
  <li><a href="#">Контакты</a></li>
  <li><a href="#">О нас</a></li>
</ul>

Подпункты мы разместим в отдельном списке, вложив его в элемент <li>, который содержит родительскую ссылку относительно подпунктов. Теперь мы имеем четкую структуру нашей будущей панели навигации:

<ul id="navbar">
  <li><a href="#">Главная</a></li>
  <li><a href="#">Новости</a></li>
  <li><a href="#">Контакты</a>
    <ul>
      <li><a href="#">Адрес</a></li>
      <li><a href="#">Телефон</a></li>
      <li><a href="#">Email</a></li>
    </ul>
  </li>
  <li><a href="#">О нас</a></li>
</ul>

Попробовать »

Теперь приступим к написанию CSS кода. Для начала необходимо скрыть список с подпунктами с помощью объявления display: none;, чтобы они не отображались на веб-странице все время. Для отображения подпунктов нам нужно чтобы при наведении на элемент <li> список снова был преобразован в блочный элемент:

#navbar ul { display: none; }
#navbar li:hover ul { display: block; }

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

#navbar, #navbar ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#navbar li { float: left; }
#navbar ul li { float: none; }

Затем нам нужно сделать так, чтобы наше выпадающее подменю не смещало контент, расположенный под панелью навигации, вниз. Для этого мы зададим пунктам списка position: relative;, а списку, содержащему подпункты position: absolute; и добавим свойство top со значением 100%, чтобы абсолютно позиционированное подменю отображалось точно под ссылкой.

#navbar ul {
  display: none;
  position: absolute;
  top: 100%;
}
#navbar li {
  float: left;
  position: relative;
}
#navbar { height: 30px; }

Попробовать »

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

Теперь нам осталось стилизовать оба наших списка и выпадающее меню будет готово:

#navbar ul {
  display: none;
  background-color: #f90;
  position: absolute;
  top: 100%;
}
#navbar li:hover ul { display: block; }
#navbar, #navbar ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#navbar {
  height: 30px;
  background-color: #666;
  padding-left: 25px;
  min-width: 470px;
}
#navbar li {
  float: left;
  position: relative;
  height: 100%;
}
#navbar li a {
  display: block;
  padding: 6px;
  width: 100px;
  color: #fff;
  text-decoration: none;
  text-align: center;
}
#navbar ul li { float: none; }
#navbar li:hover { background-color: #f90; }
#navbar ul li:hover { background-color: #666; }

Попробовать »

МЕНЮ

Панель иконокЗначок менюАккордеонВкладкиВертикальные вкладкиЗаголовки вкладокВкладки полностраничныеВкладки при наведенииВерхняя навигацияОтзывчивый верхний навигаторНавигация с иконкамиМеню поискаСтрока поискаФиксированная боковая панельАнимированные боковые панелиОтзывчивая боковая панельПолноэкранная навигация наложенияМеню Off-CanvasБоковые кнопки навигацииБоковая панель с иконкамиМеню с горизонтальной прокруткойВертикальное менюНижняя навигацияОтзывчивая нижняя навигацияГраницы навигацииМеню по правому краюСсылка меню по центруМеню равной шириныФиксированное менюСкольжение вниз по полосе прокруткиСкрыть меню при прокруткеУменьшить меню при прокруткеЛипкая навигацияНавигация на изображенияВыпадающее менюВыпадающий при кликеВыпадающее меню в навигацииВыпадающий список в боковой навигацииОтзывчивая навигация с выпадающимПодменю навигацияВсплывающее менюМега менюМобильное менюМеню занавесСвернуть боковой барСвернуть боковую панельПагинацияХлебные крошкиГруппа кнопокГруппа вертикальных кнопокЛипкий социальный барНавигация таблеткиОтзывчивый заголовок

Что такое меню группы

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

Создать мега меню

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

Шаг 1) Добавить HTML:

Пример

<div class=»navbar»>  <a href=»#home»>Главная</a>  <a href=»#news»>Новости</a>  <div class=»dropdown»>    <button class=»dropbtn»>Выпадающий      <i class=»fa fa-caret-down»></i>    </button>    <div class=»dropdown-content»>      <div class=»header»>        <h2>Мега меню</h2>      </div>      <div class=»row»>        <div class=»column»>          <h3>Категории 1</h3>          <a href=»#»>Ссылка 1</a>          <a href=»#»>Ссылка 2</a>          <a href=»#»>Ссылка 3</a>        </div>        <div class=»column»>          <h3>Категории 2</h3>          <a href=»#»>Ссылка 1</a>          <a href=»#»>Ссылка 2</a>          <a href=»#»>Ссылка 3</a>        </div>        <div class=»column»>          <h3>Категории 3</h3>          <a href=»#»>Ссылка 1</a>          <a href=»#»>Ссылка 2</a>          <a href=»#»>Ссылка 3</a>        </div>      </div>    </div>  </div></div>

Объяснение примера

Используйте любой элемент, чтобы открыть выпадающее меню, например элемент <button>, <a> или <p>.

Используйте элемент контейнера (например, <div class=»dropdown-content»>), чтобы создать выпадающее меню и добавить сетку (столбцы) и добавить раскрывающиеся ссылки внутри сетки.

Оберните элемент <div class=»dropdown»> вокруг кнопки и элемент контейнер (<div class=»dropdown-content»> в позиции выпадающего меню с помощью правильного CSS.

Шаг 2) Добавить CSS:

Пример

/* Контейнер навигации */.navbar {  overflow: hidden;  background-color: #333;  font-family: Arial;}/* Ссылки в панели навигации */.navbar a {  float: left;  font-size: 16px;  color: white;  text-align: center;  padding: 14px 16px;  text-decoration: none;}/* Выпадающий контейнер */.dropdown {  float: left;  overflow: hidden;}/* Кнопка выпадающего списка */.dropdown .dropbtn {  font-size: 16px;  border: none;  outline: none;  color: white;  padding: 14px 16px;  background-color: inherit;  font: inherit; /* Важно для вертикального выравнивания на мобильных телефонах */  margin: 0; /* Важно для вертикального выравнивания на мобильных телефонах */}/* Добавить красный цвет фона для ссылок на навигационную панель при наведении курсора */.navbar a:hover, .dropdown:hover .dropbtn {  background-color: red;}/* Выпадающее содержимое (скрыто по умолчанию) */ .dropdown-content {  display: none;  position: absolute;  background-color: #f9f9f9;  width: 100%;  left: 0;  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  z-index: 1;}/* Мега заголовок меню, если это необходимо */.dropdown-content .header {  background: red;  padding: 16px;  color: white;}/* Показать выпадающее меню при наведении курсора */.dropdown:hover .dropdown-content {  display: block;}/* Создайте три одинаковых столбца, которые плавают рядом друг с другом */.column {  float: left;  width: 33.33%;  padding: 10px;  background-color: #ccc;  height: 250px;}/* Ссылки стиля внутри столбцов */.column a {  float: none;  color: black;  padding: 16px;  text-decoration: none;  display: block;  text-align: left;}/* Добавить цвет фона при наведении курсора */.column a:hover {  background-color: #ddd;}/* Очистить поплавки после столбцов */.row:after {  content: «»;  display: table;  clear: both;}

Объяснение примера

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

Мы оформили кнопку выпадающего списка с фоном цвета, заполнением и т.д.

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

Класс содержит фактическое выпадающее меню. Он скрыт по умолчанию и будет отображаться при наведении курсора (см. ниже). Он расположен так, чтобы быть видимым прямо под кнопкой раскрывающегося списка, а ширина установлена на 100%, чтобы покрыть весь экран.

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

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

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

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

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

Текстовое

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

1. Откройте режим редактирования ранее созданного списка разделов.
2. Напишите в столбик нужные разделы. Например, «Главная»;, «Чат»; или «Правила»;. При этом каждый раздел должен быть заключен в квадратные скобки.

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

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

В итоге каждый раздел должен выглядеть аналогично этому примеру: *[https://vk.com/glavnaya|Главная]. После этого нажмите на кнопку «Сохранить страницу»; чтобы она в группе в ВК отображалась на главной странице.

Графическое меню

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

• ширина заставки должна быть не более 610 пикселей, а высота около 450 пикселей;
• сохранять файл нужно для Web, если работа происходит в Фотошопе;
• формат картинок рекомендуется определять, как PNG-24.

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

1. Откройте редактор и нажмите в панели инструментов на иконку в виде фотоаппарата, чтобы добавить картинку.
2. Загрузите изображения, которые вы создали в графическом редакторе.
3. После загрузки в окно редактора добавятся строчки с названием файлов и их разрешением.
4. Нажмите на иконку в виде скобок, чтобы перейти в режим визуального редактирования.
5. В каждой строчке после цифр, указывающих разрешение поставьте точку с запятой ; и допишите nopadding. Причем пробелов между символами не должно быть.
6. После слова nopadding поставьте разделительную черту | и вставьте ссылку на страницу группы.
7. Внизу щелкните по кнопку «Сохранить страницу»;.

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

Что для этого нужно?

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

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

Через компьютер

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

Создание и настройка

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

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

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

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

Перед вами появится специальное окошко для создания альбома в группе ВК

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

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

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

Обложка

Для альбома в группе ВК можно будет выбрать обложку. Обложка – это главная фотография, которая будет показана на альбоме.

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

1. Открываете альбом группы в рассматриваемой социальной сети. Если вы ещё не загрузили туда фотографии, то вам необходимо будет это сделать. После этого, находите нужную фотографию в альбоме и кликаете по ней левой кнопкой мышки.
2. После этого, выбранная фотография полностью откроется на вашей странице. В нижней части экрана будет располагаться специальная панель с различными функциями. Находите там графу «Ещё» и жмете по ней ЛКМ.
3. Должно появиться небольшое окошко с определенным количеством строк. Вам понадобится нажать левой кнопкой мыши по пункту «Сделать обложкой альбома».
4. Как только вы так сделаете, в левой нижней части экрана появится уведомление «Фотография установлена обложкой альбома».
5. Теперь, когда вы увидите данный альбом, то на нем будет обложка в виде выбранной фотографии.

1 этап – подготовка меню фотошопе

Для наглядного примера, как сделать Меню, мы нашли подходящую картинку в Интернете

Важно только, чтобы ширина изображения составляла не более 600 пикселей (из-за особенностей ВК). Мы выберем ширину 400px

Это органично спишется в наш дизайн. Задать размеры можно через сочетание клавиш Alt+Ctrl+I
Обратите внимание, что высоту указывать не надо, она подстроится пропорционально.

Вот так будет выглядеть меню нашей группы вконтакте

Изменяем ширину заготовки под меню группы

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

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

1. Теперь сохраните изображение для меню группы ВКонтакте в формате WEB через сочетание клавиш «SHIFT+CTRL+ALT+S».

Сохранение кнопок меню

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

Сохраненные «Кнопки» меню

Показывайте преимущества продукта

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

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

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

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

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

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

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

Главный вопрос в ее идее! Поиск тоже стал более простым и легким! Вообще за последние несколько лет появилась масса программ для этого.

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

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

Все Аватарка готова! Можно загружать!

Аналогично можно создать все надписи в Меню

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

ИЗОБРАЖЕНИЯ

Слайд шоуГалерея слайд шоуМодальное изображениеЛайтбоксОтзывчивая сетка изображенийСетка изображенийГалерея вкладокЭффект наведения на изображениеНаложение слайда на изображениеНаложение на изображениеНаложение заголовка на изображениеНаложение иконки на изображениеЭффект к изображениюЧерно-белое изображениеТекст на изображенииИзображение с текстовым блокомИзображение c прозрачным текстомИзображение на всю страницуФорма на изображенииИзображение герояРазмытое фоновое изображениеФоновое изображениеВыравненные изображенияОкругленные изображенияИзображение аватарОтзывчивое изображениеИзображение по центруМинитюрное изображениеЗнакомство с командойЛипкое изображениеЗеркальное изображениеДрожание изображенияГалерея портфолиоПортфолио фильтрЗум изображенияЛупа изображенияПолзунок сравнения

Первый этап

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

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

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

Прямоугольник, который получился справа (размером 200 на 710) можно скопировать и выгрузить в отдельный файл. Это готовая аватарка для группы. А вот левая часть картинки нуждается в дополнительной нарезке.

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

Высота каждого нарезанного элемента должна быть не менее 50 пикселей.