Всем привет! По поводу нового дизайна «ВКонтакте» казалось бы уже всё написали и обсудили.  Но с приходом нового интерфейса видоизменилась не только лента. И без того «страшная и ужасная»  wiki - разметка, начала кошмарить по-новому. На деле всё не так печально. И я вам это покажу на примере способа, позволяющего сделать быстро и правильно меню в новой версии без ошибок.

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

Итак, начнем! 

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

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

 

Шаг 2. Проверяем  с помощью вкладки Изображение → Размер изображения… размер картинки. Нам нужна 600 пикселей по ширине.

yjrkjKAuRek

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

swXe6lnERy8

После выставления ширины не забываем нажать кнопку «Ок«

aFTxbJ1jFiU

Шаг 3. После чего выбираем инструмент «раскройка» (расположен на боковой панели) и начинаем резать нашу картинку на кнопки.

4xIwRhWIceQ

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

WCyoU49wl0s

Далее нажимаем в левом верхнем углу вкладку Файл и выбираем в выпадающем списке Сохранить для WEB…

Mxm4nVi5DSU

И жмём обязательно сохранить.

YK08A77NJQw

Нарезанные изображения сохранятся в папке. Всё, теперь можно фотошоп закрывать. Дальше переходим в нашу группу во «ВКонтакте».

Шаг 4. Переходим в Управление сообществом (расположена под аватаркой группы).

e3TLVHI_3wk

Выбираем вкладку МАТЕРИАЛЫ.  Включаем, ставим Ограниченные и жмем СОХРАНИТЬ.

ow9Tgh6B0VA

Шаг 5. Возвращаемся на главную страницу группы.

e1gbmuaaV1Y

Справа от «menu» (у вас скорее всего будет надпись «свежие новости») нажимаем «редактировать».

D4FjXnqTbl0

Шаг 6. Вот и добрались до святая святых — вики-редактора. Теперь начинается самое интересное. Меняем название на «меню» и жмем значок фотокамеры, добавляем все нарезанные кусочки из той папки куда мы их сохранили.YcMV-1jW3dI

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

cUEdT59Ztxs

После этого нехитрого процесса код выглядит так:

qTJVdBwwlJEcY01mohyFZIX0lCt80z_o4Vvc4dWUenmk

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

Нажав «предпросмотр» видим, что всё встало на свои места:

M7pxysO8_Lk

Шаг 7. Добавляем в код ссылки на каждую кнопку, для примера первую-третью кнопки сделаю некликабельными. В хвостик для этого прописываем nolink. Не забываем убрать пробел между | и ].

Получается так:

qTJVdBwwlJE

Четвертая будет вести на вики-страницу, можно сделать на фотоальбом.

Как сделать новую вики-страницу: 

Вставляем в браузер данную ссылку http://vk.com/pages?oid=-XXX&p=Название  

Где XXX — id сообщества; Название — Ваше название для страницы. 

CtSAn1_uJXM

 

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

Получился код:

qTJVdBwwlJE cY01mohyFZI X0lCt80z_o4 Vvc4dWUenmk

Убедившись, что всё выглядит корректно, нажимаем кнопку «Сохранить» и жмем имя страницы вверху.

6yJu9Cv3VTY

Шаг 8. Самое время закрепить меню. Для этого копируем из браузера ссылку на страницу с меню и возвращаемся на главную страницу группы.

Шаг 9.  Скопированную ссылку вставляем в поле нового сообщения.

Yk1APtc9Un4

Шаг 10. После того как появится кусочек меню, ссылку удаляем! И через значок фотокамеры добавляем заранее подготовленную картинку баннера.

Ставим «от имени сообщества» (кружок слева от кнопки «отправить» если есть) и жмем отправить.  

nIGxgd_cK2s

 

Закрепляем меню

 

KUwlmSQKBtQ

 

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

--2Zovs1uHw

При нажатии на меню открываются кнопки.

oZKe_TTgzMg

Кликабельная из них, как и задумывалась одна — четвёртая. За ней скрывается вики-страница.

D5xvutxvRUM

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

На этом сегодня всё, и я желаю вам успехов в развитии вашего дела!  

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

  

Статью подготовила участница команды target-training Ольга Мельничук.