Доброго времени суток, уважаемые читатели моего блога. Этой статьей я открываю серию публикаций на тему красивого оформления групп Вконтакте. Сейчас мы поработаем над созданием меню, затем перейдем к созданию стильного единого изображения, ну и в конце научимся делать картинки кликабельными.
В конечном итоге у вас получится примерно такое сообщество. При нажатии на кнопку перехода действительно открывается дополнительная стильная страничка.
Работа предстоит не такая уж трудная, я детально объясню как действовать. Работа займет не больше пары часов. Давайте обо всем по порядку.
1. Подготовка к работе. Инструменты, без которых не обойтись
Итак, прежде чем я перейду к основному вопросу, и мы начнем разбирать как делать меню в группе Вконтакте, поговорим о том, что вам понадобится.
1.1. Фотошоп
Конечно можно обойтись и без фотошопа, посмотрите вот это видео, в котором все подробно рассказано. Если хотите. Однако, если вы не владеете навыками , то я настоятельно рекомендую заморочиться и пройти все три мои публикации.
Если вы хотите нормальную группу, то у вас нет другого выбора, кроме как изучать фотошоп. Без качественных картинок никуда не уедешь. Могу порекомендовать вам курс Зинаиды Лукьяновой . Быстро и не скучно вы освоитесь в новой профессии и сможете даже зарабатывать, используя навыки дизайнера. Знаний хватит!
Итак, ну давайте продолжим. Все необходимое имеется? Тогда вы готовы действовать дальше.
2. Работа в фотошопе или меню своими руками
Ну вот, теперь можно приступать к пошаговой инструкции непосредственно для создания меню. Открываем фотошоп, затем иллюстрацию с меню. Надеюсь, что проблем не возникнет. В правом верхнем углу выбираем «Файл» и затем «Открыть». Находим документ на компьютере. Что дальше?
Картинку нужно раскроить. Выбираем инструмент «Раскройка». Как вы видите, он кроется под «Рамкой». Просто нажмите на него и удерживайте левую кнопку мыши несколько секунд, пока не появится дополнительное меню.
Теперь на самой картинке щелкаете правой клавишей мыши и находите «Разделить фрагмент».
В конкретном случае изображение я поделю на 4 части. Почему именно так? Любая кнопка в интернете – это рисунок, которому присвоен определенный код. Вы наводите стрелкой на нужный фрагмент иллюстрации и ваш браузер передает информацию компьютеру: «Парень, тут есть дополнительные возможности».
Иногда все изображение меняется. Например, утопающие кнопки при нажатии – это всего лишь второе изображение, там нет никакой анимации.
В моем случае одну картинку нужно поделить на несколько частей и каждой из них присвоить свое действие. Где-то ссылка на список товаров, где- то переход на сайт. Также есть часть картинки, которая помечена как «Меню». При наведении мышью не должно ничего происходить.
По-хорошему, я должен был выделить 5 частей, чтобы ровнее отделить кнопки, но я оправдываю себя тем, что если человек промахнется, он все равно сделает то, что хотел, а если нажмет верно, то ни о чем и не узнает.
Не проблема сделать больше категорий или расположить их в два столбца. Если поймете основную информацию, справитесь и со всем остальным.
Я подвинул линии, чтобы было ровнее. Это не сложно, делается при помощи курсора.
Смотрите, чтобы изображения сохранялись как jpeg (самая верхняя категория справа). Далее нажимаем «Сохранить».
Ну вот и все.
С этим закончили, теперь можно переходить к самой группе и работе с кодом.
3. Верстка в Вк для чайников
Раньше я думал, что вики-разметка применима только к сообществам. Не знаю изменилось ли что-то или так всегда было, но сейчас абсолютно не важно создаете ли вы группу или паблик. Странички можно сделать и там, и там.
Ну что ж, осталось дело за малым, верстка. Открываете «Список вики-страниц».
И добавляете новую.
Даете ей название. В нашем случае – меню.
И переходите к редактированию.
Первым делом нужно добавить все части нашей картинки.
Загружаем.
Делайте это из папки снизу-вверх по списку. От самого последнего (нижнего, в моем случае «Написать админу») к верхнему («Меню»), тогда все встанет верно, хотя не так уж трудно перетащить фрагменты при помощи мыши. Кому как удобнее.
Теперь нужно убрать отступы и сделать разные фрагменты ссылками, а кое-где и совсем убрать возможность щелкать. Переходим в кодовый режим.
Теги «center» указывают на то, что фотка и ее фрагменты расположены по центру. Я их уберу, чтобы вам было легче воспринимать информацию.
Если хотите, можете сделать тоже самое, но учтите, что иллюстрация съедет вправо.
Снова возвращаемся в код, чтобы убрать отступы между фрагментами рисунка.
Чтобы изображение вновь стало единым после размера поставьте точку с запятой и напишите тег nopadding (;nopadding).
Выглядеть это будет так.
Естественно, что отступов не должно быть после каждого фрагмента, а потому теги нужно продублировать.
Теперь иллюстрация выглядит единой. Если не получилось проверьте верно ли вы написали слово и поставили ли точку с запятой, уберите пробелы где нужно, чтобы было как в моем примере. Для результата важна каждая мелочь.
Сейчас при нажатии на разные части изображения, они открываются в новом окне.
Чтобы этого не происходило, понадобится еще один тег. Nolink. Не забывайте про точку с запятой.
Перехода не будет только на первой картинке, а вот к остальным можно подставить свои url.
Вы можете перенаправлять читателей на другие вики-страницы, к постам, в блоги и остальные социальные сети. Теперь сделать это не трудно, вы все умеете. Осталось лишь сохранить.
Вот так выглядит наше с вами меню.
А вот и желанная ссылочка.
4. Завершающий этап оформления
Наконец-то пришло время определиться публичная страница у вас или группа. От этого зависит дальнейшая стратегия.
Если вы не знаете что у вас, то переходите в раздел управление из категории «Мои группы».
Если вы хотите сделать как у меня и поставить на меню, то переходите ко второй части и мы продолжим красиво оформлять паблик. В результате получится что-то на подобие вот этого.
Я не сторонник делать меню просто картинкой в статусе, но некоторые хотят именно этого. Я не в праве никого критиковать и, если у вас группа, то вы можете воплотить свою задачу.
5. Видео инструкция
Посмотрите видео, всю основную работу мы с вами уже сделали, осталось дело за малым.
6. Альтернативный способ для Чайников за 100 руб.
Если возникли трудности при самостоятельном создании меню, смело идите на этот сервис — VkMenu.ru , где за скромную цену в 100 руб. (сегодня такая), сможете сделать менюшку через онлайн конструктор.
По-моему отличная альтернатива ручной работе, и проклинанию всех и вся, если ничего не выходит с вики-разметкой.
На этом я прощаюсь, но ненадолго. Отдохните немного и перейдем к следующей части.
Подписывайтесь на мою группу Вконтакте . Приятной работы и до скорой встречи!
Группы Вконтакте - это дополнительная возможность не только зарабатывать в интернете, но и раскручивать собственный бизнес. От чего зависит успех группы? От того, насколько активно вы будете заниматься её продвижением, а также насколько грамотно она будет оформлена.
При оформлении группы Вконтакте, необходимо сделать следующее:
- Составить описание группы.
- Подобрать оптимальную аватарку.
- Добавить интересный контент.
- Придумать эффективное название.
- Создать меню для группы.
Если практически все из этих пунктов понятны сразу после их прочтения, то создание меню для группы Вконтакте, часто сопровождается массой вопросов. Как создать меню для группы Вконтакте? Для этого мы составили подробную инструкцию, благодаря которой вы без труда сможете создать интересное и красивое меню.
Инструкция по создания меню для группы Вконтакте
Настройка.
Для начала вам потребуется перейти в настройки группы и включить материалы:
Лучше ставить ограниченные, т.к. при открытых материалах каждый пользователь сможет создавать их в вашем сообществе.
2. Новое поле в группе.
После настройки, в вашей группе должно появиться новое поле «Свежие новости»:
Чтобы изменить содержание этой формы, вам потребуется нажать кнопку «Редактировать», после чего появляется новая форма, в которую можно встраивать различные файлы, в том числе и меню для группы:
Теперь необходимо создать или скачать меню для своей группы.
3. Создание меню для группы Вконтакте.
Для представления примера, мы воспользуемся программой Photoshop и создадим новое меню. После открытия графического редактора, создаем новый файл и устанавливаем приблизительные размеры 700 на 1050. После этого добавляем фоновый рисунок и рисуем кнопки меню с надписями:
4. Разделение картинки на части.
Для того чтобы отдельные элементы картинки были копками, нам потребуется инструмент «Раскройка»:
Этим инструментом выделите область вокруг каждой кнопки:
Теперь в меню выбираем специальное сохранение созданного меню:
В примере мы разделили картинку на 5 частей, поэтому теперь мы имеем 5 отдельных изображений, которые потребуется собрать в одну картинку.
5. Вставляем картинки.
Теперь возвращаемся в редактор поля «Свежие новости» и добавляем туда картинки:
После того как вы выберите файлы меню, у вас должен появиться следующий код:
6. Настройка кода.
Простой вставки изображений недостаточно, чтобы меню начало работать, вам потребуется задать некоторые параметры. Для начала добавляем тег «nopadding», чтобы убрать разделение между отдельными частями нашего меню:
А теперь самое главное, указываем ссылку на страницу, после горизонтального слеша в каждой строчке, вот пример:
Как видите, в примере мы указали различные ссылки для перехода из меню. Остается изменить название ссылки, при которой открывается меню и можно проверять, что у нас получилось:
Как видите, ничего сложного в создании меню для группы Вконтакте, нет. Если у вас нет Photoshop или вы не умеете рисовать (как я), тогда скачивайте готовые меню в интернете, выбор довольно широкий.
Дизайн меню группы, полезные советы.
Качественное оформление любой странички в интернете повышает к ней интерес. После изменения дизайна сообщества, вы сразу же заметите улучшение в статистике. Сделать меню в группе Вконтакте не тяжело, а если вы решите этим воспользоваться, учитывайте полезные рекомендации:
- После создания Wiki разметки (код меню), сохраните его в текстовом файле. Вдруг что-то пойдет не так, у вас будет возможность восстановить меню.
- В интернете можно легко найти шаблон меню группы Вконтакте. Это пригодится всем, кто не умеет работать с Фотошопом и другими графическими редакторами.
- Также для облегчения работы, кнопки меню для группы Вконтакте можно скачать в интернете и просто установить их на любой фон.
- Не берите слишком мелкие картинки для меню, лучше наоборот использовать огромный формат, иначе теряется качество.
- Ширину меню лучше не делать больше 610 пикселей, иначе она может не корректно отображаться на страничке.
- Для работы с Wiki разметкой есть специальные редакторы, но в них придется разбираться отдельно, они создаются для профессионалов.
- Не спешите заканчивать работу в графическом редакторе, попробуйте разные цветовые гаммы, шрифты, фоны и так далее.
- Меню в группе ВК выглядит лучше, если его объединить с аватаркой. Для этого нужно подгонять размер картинки.
Новое меню в группе Вконтакте, профессионалы создают за несколько минут. Новичкам же не всегда удается сделать всё качественно. Что попало добавлять не стоит, это может наоборот отпугнуть подписчиков. Поэтому, лучше обратиться к профессионалам или специальным сервисам, это не так дорого стоит.
Красивое меню группы за 100 рублей
Создано много разных конструкторов, чтобы сделать меню группы Вконтакте онлайн. Расценки везде отличаются, так же как и доступные функции. Сравнивая сервисы, можно с уверенностью сказать, что Menumake - это лучший вариант. Даже у новичка уйдет не больше 5 минут на создание меню, а система автоматически его добавит в нужную группу. Как это всё происходит?
- Заходим на сайт, авторизуемся через Вконтакте. Откроется полный список групп, в которых вы являетесь администратором. Выбираем нужное сообщество и нажимаем «Создать меню»:
- Открывается редактор, в центре находится кнопка «Выбрать шаблон». Жмём на неё и выбираем готовый шаблон меню Вконтакте, выбор большой:
- После этого добавляются пункты меню. Тут всё просто, указываешь текст меню и напротив добавляешь ссылку, куда будет направляться пользователь при нажатии:
- Под настройкой пунктов находятся дополнительные параметры. Можно выбрать другой фон, изменить шрифт, цвет, его расположение и так далее:
- Справа находится предпросмотр создаваемого меню. Настраивайте параметры, пока не получите желаемый результат, а потом жмите на кнопку «Загрузить меню в группу»:
- Перед началом загрузки откроется окно, в котором клиентам напоминают, что нужно заплатить 100 рублей за эту услугу. В неё входит добавление альбома, размещение графического меню в группе Вконтакте и его кода:
Оплату на этом сайте можно провести с помощью банковской карты или через PayPal . Также администрация готова принять другие электронные деньги, через систему Яндекс.Касса. Всего за 100 рублей у вас появится меню группы Вконтакте, а новый дизайн обязательно поможет в развитии площадки.
Где заказать меню для группы Вконтакте?
Представленный выше сервис работает по специальному алгоритму. Что, если у пользователя есть определенные требования и хочется добавить что-нибудь оригинальное? В таком случае, лучше обратиться к дизайнерам и профессионалам. Найти их не сложно, для этого тоже созданы специальные сайты:
Wiki разметки и фотографии для загрузки в отдельный альбом.
Ошибки при создании меню группы Вконтакте
Неопытные пользователи часто пытаются сэкономить и сделать всё своими руками. Без определенных навыков (хотя бы умения работать с графическими редакторами) получается что попало. Некоторые меню в группах ВК вызывают смех, а всё потому, что допускаются эти ошибки:
Ошибка 1.
Чаще всего встречаются не качественные меню, когда его разработчик пытался внести от себя что-то необычное и креативное. Графические редакторы позволяют добавлять кучу разных узоров, располагать кнопки нестандартным образом и так далее. Всё это дополнительная нагрузка, меню должно быть, в первую очередь удобным, поэтому лучше делать его простым и стильным.
Ошибка 2.
Иногда акцент делается на фоновое изображение, так как оно занимает большую часть меню. Кнопки должны быть огромными, полностью разделяя основную картинку на несколько частей. Дело в том, что почти 50% социального трафика заходят в сеть с мобильных устройств. Кликать мышкой по мелким пунктам легко, а вот на маленьком экране это просто невозможно.
Ошибка 3.
С целью заинтересовать посетителя и заставить его перейти хотя бы по одному пункту меню Вконтакте, некоторые добавляют по 10 и больше кнопок. Такая навигация никому не нужна, она наоборот вводит пользователя в замешательство. Лучше выбрать 3-5 основных пунктов, не представляя огромный каталог.
Ошибка 4.
В меню часто ставят ссылки на сторонние сайты, а это раздражает пользователей. Они не хотят уходить из Вконтакте, поэтому лучше, чтобы пункты направляли их на внутренние страницы социальной сети. Если требуется презентовать каталог или что-то ещё, лучше создайте обсуждение и в нём поставьте ссылку на сайт.
Ошибка 5.
Пункты меню должны быть продуманными и реально пригождаться пользователям. Например, в группе интернет-магазина есть смысл добавить пункты Доставка, Каталог, Контакты. В информационных группах - Правила, Прайс на рекламу, Ссылки на обсуждения. Помните, каждый пункт должен приближать посетителя к целевому действию (заказу, обращению и т.д.).
Новички постоянно допускают однотипные ошибки, это мешает оформить меню группы Вконтакте и снижает его эффективность. Если меню бесполезное, то какой от него вообще смысл? Оно должно быть полезным, как для администратора (который направляет людей на нужные страницы), так и для посетителя, который ищет необходимую информацию).
Разработать меню группы бесплатно своими руками вполне реально, тем более теперь у вас есть подробная инструкция. Однако лучше довериться профессионалам и потратить небольшую сумму. Оформление сообществ сказывается на их развитии, а сейчас ВК обновился и добавились изображения в верхней части, что также нужно использовать для красивого внешнего вида.
Как известно, человек, читая или попадая на тот или иной веб-ресурс, первые 8 секунд обращает внимание на дизайн и интерфейс. Параллельно он убеждается в хорошем или плохом юзабилити (удобстве пользования). Меню в группе в социальной сети «Вконтакте», о котором мы сегодня и поговорим и рассмотрим принцип его конструирования на примере, позволяет не только красочно преподать информацию и «отличиться» от конкурентов в лучшую сторону, но и выявить именно те пункты и сделать на них акцент, которые необходимы.
Достаточно взглянуть на несколько примеров, чтобы понять, на сколько это красиво и удобно:
Приступим. Для начала, следует отметить, что, если вы хотите сделать меню сами с нуля, то вам понадобится вся нижеследующая информация. В том случае, если дизайн уже есть, то можете пропустить часть статьи пи перейти непосредственно к его размещению и wiki-разметке.
Дизайн меню
Позволяет выполнить основу для будущего проекта. Чтобы выполнить данную часть работ, приветствуется знание такой программы, как «Adobe Photoshop». Вот так выглядит шаблон размеров, в котором мы будем реализовывать будущее красивое меню.
Ширина аватара составляет 200 пикселей, высота – 500. Картинка основного меню – 510*308. В результате мы получим вот такую красивую «менюшку» в конце.
Обращаем внимание на то, что в зависимости от информации, расписанной после названия группы, может меняться высота картинки справа (аватара), а соответственно и все что расположено рядом, может сместиться!
Данный исходник PSD-макета был реализован для примера. Скачать .
Не будем заострять внимания на том, как делался шаблон, приступим сразу к его подготовке для размещения в новую или уже существующую группу. Открываем файл в «Фотошопе».
Первым делом, сохраняем аватар. Один из способов быстрого сохранения, если в файле все проструктурировано и мало элементов (как в нашем случае). Отключаем видимость ненужных нам слоев.
Заходим в раздел «Изображение» и выбираем операцию «Тримминг».
На выходе получаем:
При большом весе получившегося изображения, можно воспользоваться инструментом «Сохранить для Web». Команда также находится в разделе «Файл».
Проделываем аналогичную операцию с изображением, которое будет выводиться при первичном отображении меню. В нашем случае, оставляем видимыми – папку «открыть меню» и «фон меню» в папке «меню с машиной». На выходе в результате:
Теперь необходимо выполнить сохранение и нарезку второго уровня меню. Для этого оставляем видимым «фон меню» в папке «меню с машиной» и добавляем к нему «Меню второй уровень».
Затем воспользуемся инструментом «Раскройка», найти который можно в меню слева.
«Разрезаем» нашу картинку на соответствующие части. В нашем случае их будет три.
На этом подготовительная часть закончена. Приступаем к основному этапу.
Wiki-разметка готового меню в «Вконтакте».
Первым делом, надо загрузить фотографию группы или аватарку, нажав на одноименную ссылку и выбрав необходимый нам файл.
Затем обязательно проделываем следующую последовательность действий. Заходим в «Управление сообществом» и в пункте «Разделы» напротив кнопки «Материалы» выбираем «Ограниченные».
Сделать это необходимо, чтобы пользователи и участники группы не могли изменять и/или редактировать дополнительные позиции, в том числе и меню.
После проделанной операции загружаем наши нарезанные картинки в альбом сообщества.
Переходим в раздел «Свежие новости», выбираем «Редактировать» и попадаем в меню редактора.
Чтобы убыстрить процесс, воспользуемся клавишей «Фотоаппарат» и нажмем «Выбрать из фотографий сообщества».
После добавления снова попадаем в меню редактора и нажимаем клавишу «<>», в которой произведем дальнейшее редактирование. Также сразу переименовываем раздел и вместо «Свежие новости» пишем в нашем случае «МЕНЮ ГРУППЫ».
Общая структура каждой нарезанной части выглядит следующим образом в разметке - [], где:
id – идентификатор (номер) картинки, которую вы загрузили;
X и Y – размер изображения по горизонтали и вертикали в пикселях;
Глядя на шаблон, редактируем нашу wiki-разметку и периодически заходим в раздел «Предпросмотр», в которой визуально отображаются внесенные нами изменения.
Сразу все картинки необходимо закрыть тегом (а не как стоит изначально по умолчанию, каждое изображение)
Так как тег, центрирующий изображение, мы уже оставили один, то, чтобы избавиться от «неприятных» расстояний между частями общего изображения, следует вставить тег «nopadding» следующим образом: []
Вот что получается в итоге.
Теперь следует нажать на вкладку «МЕНЮ ГРУППЫ», потом «редактировать».
Важно! Чтобы скопировать необходимый адрес, нажимаем в нашем варианте на «МЕНЮ ГРУППЫ» и копируем оттуда «правильную ссылку».
Переходим на главную страницу, нажимаем «Добавить запись». Не забываем сразу же поменять автора записи!
Нажимаем на «многоточие» справа от записи и кликаем по вкладке «Закрепить».
После этого обновляем страницу и наслаждаемся получившимся результатом, который выглядит следующим образом:
При нажатии на «Открыть меню».
Как видите, сделать меню в социальной сети «Вконтакте» достаточно легко и просто. Достаточно иметь легкий уровень знаний пользования «Фотошопом» и wiki-разметки. Чем лучше и понятливее дизайн, тем охотнее и чаще будет потенциальный пользователь приходить и возвращаться в вашу группу.
Если вы хотите действительно уникальный и потрясающий дизайн группы с соблюдением фирменной стилистики и сопутствующих элементов, то обратитесь к профессиональному дизайнеру, а можете и сами перед этим опробовать размах своих талантов. Удачи вам во всех ваших начинаниях!
Шаг 1
Для начала идем в свою группу и в блоке «Свежие новости» (в данном случае я переименовала ее в «Меню») нажимаем ссылку «Редактировать», которая появляется при наведении. Важно! Во-первых, у вас должна быть именно Открытая группа, а не Страница. Поскольку на Странице такого пункта просто нет. И второе, в меню Управление сообществом > Информация > Материалы должен быть выбран пункт «Открытые».
Шаг 2
Во вкладке «Редактирование»пишем фразу [[Веб-дизайн теория]], заключенную в двойные квадратные скобки. Потом нажимаем на кнопку «Сохранить страницу».
Шаг 3
После этого рядом с кнопкой появится ссылка «Предпросмотр», на нее и жмем. Ниже откроется предпросмотр нашего меню, где мы видим появившуюся снизу ссылку «Веб-дизайн теория».
Шаг 4
Жмем на эту ссылку и переходим на созданную страницу с названием «Веб-дизайн теория». После жмем на ссылку «Наполнить содержанием». Далее редактируем текст как в обычном текстовом редакторе — вставляем картинки, тексты, видео и прочие объекты. При этом наша созданная страница будет иметь урл вида https://vk.com/page-15865937_43819846.
Альтернативный способ создания внутренней страницы
Есть альтернативный способ создания страницы. В основном он подходит для пабликов (публичных страниц), поскольку для них не подходит способ, описанный выше. Для этого мы воспользуемся таким кодом
http://vk.com/pages?oid=-XXX&p=Нaзвание_страницы
где вместо ХХХ мы подставим id нашей группы, а вместо текста «Название страницы» мы напишем Меню. Теперь надо выяснить id группы. Как это сделать? Заходим на главную страницу группы и смотрим на наши записи на стене - прямо под блоком «Добавить запись» будет написано «Все записи» - нажимаем на эту ссылку.
Переходим на страницу и видим урл такого вида https://vk.com/wall-78320145?own=1 , где цифры 78320145 в данном примере и есть id группы. Подставляем наши данные в исходный код и получаем запись такого вида: http://vk.com/pages?oid=-78320145&p=Меню (с вашими цифрами!). Вставляем эту строку в адресную строку браузера и нажимаем Enter. Так мы создали новую страницу Вконтакте.
Сегодня мы опять возвращаемся к теме оформления групп В Контакте. Ранее мы уже научились . Сегодня мы будем учиться делать графическое меню с закрепленным верхним баннером и ссылкой на внутреннюю страницу с пунктам расширенного меню. В общем то, на внутренней странице может быть любая информация. Особенно удобно там располагать, например каталоги с ассортиментом продукции. И у раскрывающегося меню и у закрепленного меню есть свои плюсы и минусы. Основной минус раскрывающегося меню — то, что он по умолчанию находится в закрытом состоянии. Но зато на нем можно разместить сразу несколько ссылок.
Закрепленное меню смотрится более эффектно за счет общего впечатления, но у него может быть только одна ссылка, ведущая либо на внутреннюю страницу Вконтакта, либо на внешний сайт (причем на внешний сайт ссылка будет идти не с картинки а с текстовой ссылки под картинкой). Также из очевидных минусов то, что на мобильных устройствах графическое меню представлено в виде обычной записи в ленте, стоящей сверху, а не в виде закрепленной рядом с аватаром. В общем, при выборе оформления стоит учитывать эти нюансы. Итак, давайте посмотрим, как создается закрепленное верхнее меню со ссылкой на внутреннюю страницу.
Оформляю группы Вконтакте
Качественный дизайн групп и пабликов ВК, закрепленное меню, раскрывающееся меню, внутреннее графическое меню, каталоги, внутренняя навигация — цены и портфолио .
Шаг 1
Создаем в фотошопе новый документ размером примерно 900х700 пикселей, заливаем его белым цветом. Теперь нам надо вырезать в слое два окна, через которые будет проглядывать собственно само графическое оформление. Сначала выделяем прямоугольник размером 200х500 пикселя (аватар) и нажимаем Del. Потом выделяем прямоугольник размером 510х352 (выравниваем по нижней линии аватара и делаем расстояние между фигурами 50 пикселей) и также нажимаем Del.
После очередного апдейта дизайна ВКонтактом (31.10.2016) размеры баннера стали 510х307 (а не 510х352).
Шаг 2
Теперь ниже белого слоя кладем какую-нибудь единую картинку, которая и будет составлять основу оформления.
Шаг 3
После этого дополняем картинку различными элементами — логотипом, текстовыми надписями и кнопкой, призывающей кликнуть по меню. Затем сохраняем на компьютере две отдельных картинки — одна аватар (справа), вторая меню с кнопкой кликнуть (слева).
Шаг 4
Также в фотошопе создаем графическое меню, состоящее из нескольких пунктов. Ширина этого меню должна быть 600 пикселей, высота по усмотрению, в зависимости от количества пунктов. В помощь используйте урок « «.
Шаг 5
Нарезаем наше меню на несколько горизонтальных полосок в соответствии с количеством пунктов меню. Сохраняем в виде отдельных файлов.
Шаг 6
Заходим в нашу группу Вконтакте, нажимаем «Управление сообществом» (при нажатии на три точки под автаром открывается выпадающее меню) и проверяем правильность установок. Группа должна быть открытая и материалы тоже открыты.
Шаг 7
Теперь загружаем новый аватар. Подводим мышкой к месту аватара и на всплывающем меню выбираем «Обновить фотографию». Загружаем правую фотографию из Шага 3, растягиваем область выделения вверх и вниз до краев картинки, нажимаем «Сохранить» и потом выбираем область для круглой миниатюры.
Шаг 8
Теперь нужно создать внутреннюю страницу. О том, как это сделать, подробно расписано в уроке . Еще один альтернативный способ создания внутренней страницы расписан в уроке « » в Шаге 5 и 6.
Шаг 9
После того, как мы создали внутреннюю страницу, можно перейти на нее. Для этого нужно нажать на раскрывающееся меню группы (по умолчанию этот пункт называется «Свежие новости» — я переименовала в «Меню») и там нажать на ссылку «Меню». После этого мы перейдем на вновь созданную пустую страницу.
Шаг 10
Теперь нам надо создать графическое меню из пяти пунктов. Для этого мы загружаем в альбом группы наши пять картинок из Шага 5. Мы нажимаем на значок фотоаппарата и загружаем нарезанные картинки с компьютера. Хранится картинки будут где-то на серверах ВКонтакта с привязкой к группе, поэтому создавать отдельный альбом для картинок-нарезок не обязательно. Загружать картинки нужно в режими Вики-разметки.
Шаг 11
Теперь в режиме вики-разметки мы будем создавать графическое меню. Очень важно создавать именно в режиме вики-разметки (иконка в правом верхнем углу из двух треугольных скобочек), а не в визуальном режиме редактирования. Подробнее о создании кода в вики-разметке рассказано в Шаге 4 и Шаге 5 урока « «. Там же приведен шаблон кода для вставки. Если все сделано правильно, то должно получиться готовое графическое меню, как на рисунке ниже.
Шаг 12
Теперь возвращаемся на главную страницу группы, берем урл нашей внутренней страницы (он должен быть такого вида https://vk.com/page-78320145_49821289) и вставляем в окошко, где создаются новости. Автоматически должно прикрепиться окошко со ссылкой на эту самую внутреннюю страницу. После этого мы подводим курсор к надписи «Прикрепить» и прикрепляем к записи фотографию, а именно нашу картинку слева из Шага 3. После этого стираем строку с урл внутренней страницы, оставив пустое место. Важно! На данном шаге надо поставить галочку (если есть такие права, в основном это касается групп с открытой стеной) в чекбоксе «От имени группы». Если эту галочку не поставить, то запись невозможно будет закрепить. В конце нажимаем «Отправить».
Шаг 13
Подводим курсор к трем точкам рядом с заголовком поста и в выпадающем окошке выбираем пункт «Закрепить». Соответственно также новость и открепляется, если необходимо.
Шаг 14
Есть один нюанс. Иногда, после того, как открепляешь новость, она уходит далеко вниз ленты, согласно дате создания, и бывает достаточно трудно вновь ее отыскать. Поэтому лучше сразу где-нибудь записать урл закрепленной новости. Для этого надо подвести курсор ко времени создания новости и нажать на ссылку.
Шаг 15
Теперь обновляем главную страницу группы. Наше графическое меню будет вверху соседствовать рядом с аватаром. А при нажатии на картинку, мы попадаем на внутреннюю страницу с меню из пяти пунктов.
