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

Управление сообществом

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

img1

Сохраняем настройки и возвращаемся обратно в группу.

У нас появляется вкладка «Свежие новости» . Идем на нее, и нажимаем кнопку «Редактировать» .

img1

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

Когда закончите, сохраните страницу.

Создаем страницу с помощью Wiki разметки

Создаем wiki меню ВКонтакте

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

  • поиск в вк по фото
  • почему не воспроизводится музыка в вк
  • почему тормозит видео вк

Источник: vksetup.ru

как сделать вики разметку

menu-vk-viki-2

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

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

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

Вики разметка. Картинки:

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

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

Для вставки картинки вы должны зайти в альбом и скопировать адрес этого изображения. Например photo11111_11111.

Далее вам надо заключить эту часть ссылки в квадратные скобки следующим образом:

Еще по теме:  Как включить встроенные покупки в ВК

Так же у вас есть возможность менять параметры изображения и добавлять ссылки. Пример:

[[photo11111_11111|options|text/link]] , где на месте options можно подставить значение из следующего списка:

  • plain — ссылка на фотографию будет в виде текста, без картинки
  • noborder — удаляет рамку вокруг фото
  • box — изображение будет открываться в новом окне
  • nolink — убирает ссылку с картинки
  • nopadding — удаляет пробелы с картинки
  • NNNpx или NNNxYYYpx — здесь вы можете указать размер фотографии в пикселях (только ширину или ширину на высоту)

WIKI-разметка вконтакте. Текстовый вариант

Текстовая вики разметка группы, как мы говорили раньше, выглядит более красиво. Когда вы её сделаете, то сами всё поймете!

шаблоны вики разметки

Как сделать таблицу при помощи вики разметки:

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

|+ — Необязательный атрибут-название таблицы. Ставится сразу за атрибутом начала таблицы.

| — -знак начала новой строки в том числе ячеек.

| — атрибут, который отвечает за прозрачность ячейки.

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

|> -знак, означающий конец таблицы. Указывать его не обязательно, но для предотвращения возникновения ошибок лучше указать.

Рассмотрим создание вики разметки на конкретном примере:

А вот и код, благодаря которому создана эта таблица и вся разметка в целом.

<| |- |”’Новости”’||”’Основное”’||”’Все серии”’ |- ![[photo708176_168310200|nolink;noborder;90x80px| ]]!![[photo-4489985_130746672|nolink;noborder;90x80px| ]]!![[photo708176_168309890|nolink;noborder;90x80px| ]] |- | [[Новости из жизни актеров сериала|Новости]]
[[Биографии]]
| [[Аудио]]
[[Видео]]
[[Книги]]
[[Обсуждения]]
| Сезоны:
[[1 сезон|1]] | [[2 сезон|2]] | [[3 сезон|3]] | [[4 сезон|4]]
[[5 сезон|5]] | [[6 сезон|6]] | [[7 сезон|7]] | [[8 сезон|8]]
|- |> Вконтакте есть небольшой учебник с курсом по вики-разметке.

vk-viki

Оформление ссылок через wiki-разметку, а так же как сделать ссылку с анкором вконтакте:

Есть несколько вариантов оформления ссылки.

1) Обычная ссылка:

2) Ссылка с анкором (гиперссылка)

Источник: vkontakte-hack.ru

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

Добрый день, друзья. Мы создали и оформили группу. Но функционал группы позволяет нам делать и более интересные оформления. Поэтому давайте оформим группу ВКонтакте, используя вики — разметку, как было обещано в предыдущей статье.

Еще по теме:  Как в ВК изменить название сообщества

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

интерактивное меню, оформление группы вконтакте, вики - разметка, шаблон

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

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

интерактивное меню, оформление группы вконтакте, вики - разметка, шаблон

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

В предложенном варианте высота в 377 рх выбрана при размещении на передней странице группы каждого элемента информации в одну строчку.

интерактивное меню, оформление группы вконтакте, вики - разметка, шаблон

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

интерактивное меню, оформление группы вконтакте, вики - разметка, шаблон

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

интерактивное меню, оформление группы вконтакте, вики - разметка, шаблон

Теперь переходим непосредственно к группе. После корректировки настроек, на стене появились две вкладки: «Свежие новости» и «Обсуждения». Кликаем по «Новая тема» в закладке обсуждений и создаем первую страничку нашего меню.

интерактивное меню, оформление группы вконтакте, вики - разметка, шаблон

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

Еще по теме:  Как поставить пароль на ВК на айфоне se

интерактивное меню, оформление группы вконтакте, вики - разметка, шаблон

На стене появится созданное сообщение. Таким же путем создаем нужное нам количество (в соответсвии с разделами меню) страниц.

интерактивное меню, оформление группы вконтакте, вики - разметка, шаблон

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

интерактивное меню, оформление группы вконтакте, вики - разметка, шаблон

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

интерактивное меню, оформление группы вконтакте, вики - разметка, шаблон

Образец кода для рассматриваемого меню:

[[photo161272339_305868837|387x50px;noborder;nopadding|topic-55525598_28652980]]
[[photo161272339_305868826|387x50px;noborder;nopadding|topic-55525598_28653317]]
[[photo161272339_305868817|387x50px;noborder;nopadding|topic-55525598_28653323]]
[[photo161272339_305868805|387x197px;noborder;nopadding;nolink| ]]

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

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

интерактивное меню, оформление группы вконтакте, вики - разметка, шаблон

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

интерактивное меню, оформление группы вконтакте, вики - разметка, шаблон

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

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

Источник: ludmilazibirova.ru

Рейтинг
( Пока оценок нет )
Загрузка ...