Навигация - дело тонкое

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

Если сайта нет, то навигация по группе с меню будет удобней.

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

О сайтах мы писали ранее, Photoshop можете скачать здесь

Итак, мы подготовили макет, сделали мы это в Фотошопе, Вы можете подготовить его через Canva или Crello, либо купить у дизайнера. Вот наш макет, с которым в дальнейшем мы и будем работать.

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

Для раскрой нам понадобится одноименный инструмент "Раскройка". Выбираем его в панеди инструментов и готовимся кроить менюшку.

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

Далее также блок 2, блок 3 и так далее.

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

После того, как поделили меню на блоки, его нужно сохранить, я сохраняю обычно исходник в формате psd. Делается это так, открываете Файл-Сохранить Как - сохраняем, куда требуется.

Далее сохраняю данное меню в виде png файла, он понадобится нам как заглушка. Действия такие же Файл-Сохранить как- Тип файлов выбираем PNG.

Ну и последнее, нам надо сохранить файл Для Web и устройств.

Открываем Файл- Сохранить для Web и устройств. Попадаем сюда:

Набор справа сверху выбираем PNG24, нажимаем Сохранить.

На выходе получаем папку с несколькими файлами. Папка МЕНЮ и содержит нужные нам файлы. Откройте, посмотрите, там вы увидите нашу раскроенную менюшку.

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

1. Сначала создаем ссылку такого вида:

http://vk.com/pages?oid=-XXX&p=Нaзвание_страницы 

XXX — меняем на ID Вашей публичной страницы, а «Название_страницы» — любое слово, которым будет названа страница. 

Где взять ID страницы?

Заходим в свою группу, нажимаем на слово Записи сообщества.

Откроется отдельная стена записей, смотрите в строку браузера, там будет ссылка по типу https://vk.com/wall-149165015?own=1. Вот эти цифры 149165015 и есть ID Вашего сообщества.

2. Шаг следующий. Создали свою ссылку, выглядеть она будет так

http://vk.com/pages?oid=-149165015&p=Наше_меню

Вставляем ее в браузер и открываем.

Попадаем на следующую страницу:

Нажимаем наполнить содержимым.

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

Вот что должно у Вас получится

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

[[photo897420_456242978|600px;noborder;nopadding|http://aquacontur.ru/cat]]

[[photo897420_456242979|600px;noborder;nopadding|https://vk.com/topic-149165015_35552913]]

[[photo897420_456242980|600px;noborder;nopadding|http://aquacontur.ru/kontakty]]

Сейчас расскажу, что мы изменили. Мы поставили размер фото 600px везде, так как именно столько ширина страницы ВК, мы добавили noborder и nopadding - чтобы не было пробелов между фото, чтобы получилось сплошное меню. Далее, Вы ставите ссылки на те разделы, которые Вы описали в меню.

После того, как Вы это напишите - нажмите Сохранить страницу и предпросмотр. Если Вы сделали все правильно, то Вы получите цельное меню.

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

Теперь остается последний вопрос, КАК закрепить меню в группе!

Итак, переходим в нашу группу, нажимаем Добавить запись.

Теперь нам нужно поместить наше wiki меню в эту запись.

Нажмем на название нашего меню, у нас это Наше меню и скопируем из строки браузера ссылку на это меню.

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

Убираем ссылку и нажимаем Отправить.

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

Теперь, если нажать на Посмотреть, то Вы перейдете в меню и можете по нему пройтись и все проверить)))

Если у Вас появились вопросы, отправляйте их мне, я соберу вопросы и в следующий раз на них отвечу @DonnaOlivia