Ссылка на страницу вконтакте вики: Создаем вики-страницу в ВК: практические рекомендации

Создаем вики-страницу в ВК: практические рекомендации

Немного теории: что такое вики-страницы в ВК

Итак, это специальная страничка, которая создается и оформляется с помощью Wiki-разметки в ВК. Кстати, «Вики» в переводе с гавайского означает «быстрый».

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

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

Wiki-разметка ВКонтакте: что это

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

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

Wiki-разметку ВК можно сопоставить с кодом HTML. Только вот здесь все намного проще. Чтобы разобраться с HTML понадобится намного больше времени, нежели с Вики. На изучение Wiki понадобится не более одной недели и все благодаря ее графическому интерфейсу. Если хотите оперативно научиться делать классные онлайн-журналы, магазины, блоги и даже сайты, тогда изучите эту тему.

Как создать вики-страницу в ВК: практический алгоритм к действию

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

Предлагаем практическое руководство:

1. Открываем адресную строку в браузере.
2. Копируем ссылочку https://vk.com/pages?oid=-ХХХ&p=Нaзвание_страницы и вставляем ее в адресную строчку.
3. Обратите внимание, что вместо ХХХ в ссылке надо вписать ID группы.
4. Далее в форму «Название страницы» нужно добавить реальное название странички. При этом следует учесть такие нюансы:
5. Прописывая нейминг страницы, все пробелы заменяем на нижнее подчеркивание «_».
6. Нейминг странички теперь выступает в качестве заголовка публикации.
7. Нажимаем Enter.

Все, готово. После этого заходим в категорию «наполнения содержанием» или в раздел «редактирования». Теперь самое интересное – как создать «конфетку»?

Как создать крутую wiki-публикацию

Для начала запомните 2 простых правила успешных постов.

Создаем аппетитную картинку

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

Самые распространенные характеристики картинок, которые используются для вики-публикаций следующие:

• Самый легкий путь – просто прикрепить фотографию. Хотя это простейший вариант, которые мало кого привлечет.
• Текст на прикольном фоне. В данном случае уместно будет разместить текст, в котором будет прослеживаться и сам заголовок публикации. Здесь нет ничего сложного, но в то же время это оригинальный способ привлечь внимание подписчиков. Если захотите, то можете добавить красивую иконку.
• Картинка + текст. При желании короткий текстовый материал накладывается прямо на изображение.
• Текст и картинка напополам. Первая половина – текст, вторая – изображение. С одной стороны такая публикация затрагивает образное мышление, с другой – делается акцент на названии. Не стоит забывать о том, что во все изображения будет добавляться Wiki-разметка ВК.

Что должна содержать картинка, чтобы пост был эффективным для продвижения

• интригующий заголовок;
• наличие логотипа;
• картинка или красочный фон;
• внедряем призыв к какому-либо действию: кнопка «важно», адрес группы и т.д.

Как сделать таблицу в вики-разметке Вконтакте

Для того, чтобы создать табличку Wiki, необходимо использовать конкретные символы в четкой последовательности:

1. Начинаем таблицу с символа «{|».
2. Для написания заголовка используем «|+».
3. Чтобы начать новую строчку, нажимаем «|-».
4. Если необходимо оформить прозрачную ячейку, пригодится символ «|».
5. Для оформления темной ячейки – «!».
6. Чтобы завершить создание таблички, нажмите «|}».

Послесловие

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

Материал: https://smm-blog.com/wiki-stranica-vk/

как оформить группу вконтакте с помощью внутренней страницы

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

Вот, классный пример такой страницы:

Перед нами навигационное меню, в основе которого вики разметка вконтакте . Такая страница получается очень яркой и функциональной — есть подрубрики, переходы к отдельным статьям, архивы по месяцам и многое другое. Все крупные сообщества обязательно имеют подобные страницы, ведь без них не только подписчики, но и сами администраторы могут запутаются в объеме информации. Рубрики — это удобно и для пользователя и для администратора.

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

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

Вики разметка вконтакте — это тот функционал, который позволяет превратить группу ВК в практически полноценный сайт! И это круто, потому как так мы можем сделать это бесплатно! Я вам расскажу как сделать внутренние страницы чуть ниже, а пока не могу не упомянуть о ещё одной их супер-полезной функции-

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

Такая запись состоит из меньшего числа элементов, здесь нет отдельных рубрик, подрубрик, кнопочек типа сайтовых, но она создана по тому же принципу, что и страницы меню (см. вверху). А, сделать ее очень просто! Для этого не нужно углубляться в теорию работы с вики. Я подарю вам простой алгоритм

Алгоритм создания вики-страниц

Чтобы создать внутреннюю страницу вконтакте, надо правильно прописать её адрес в браузере

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

После заполнения и сохранения страницы мы получим конечный адрес для работы — page-52497428_44506807 , который будем использовать.

Как заполняется wiki страница

Ну с наполнением у вас и вовсе не должно возникнуть проблем. Пишем текст, украшаем его и форматируем:

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

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

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

Работать с внутренними страницами я советую в обычном текстовом редакторе на компьютере (word, блокнот) и сохранять готовые страницы где-то у себя. Дело в том, что wiki-разметка в контакте еще не доведена до ума и часто возникают проблемы — то строка пропадет, ко картинка исчезнет. Поэтому у вас всегда должен быть отдельно сохранен чистый, работающий вариант странички.

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

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

Что такое вики разметка Вконтакте?

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

Для чего нужна wiki-разметка?

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

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

Оформление группы с помощью wiki-разметки

Хочется сразу отметить, что система редактирования wiki разметка очень напоминает HTML-верстку.

Главным преимуществом wiki разметки является, то что его изучить может каждый, даже не сильно «продвинутый» пользователь сети.

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

Как выучить язык wiki-разметки и узнать о всех мелочах?

На просторах интернета я нашел, очень подробную инструкцию в которой расписаны все мелочи создания wiki страниц, от вставка видео и аудио, до работы с ссылками и таблицами! Данная инструкция в формате справки Windows, а значит её откроет любой компьютер.

Как создавать страницы

Страница — это интернет-элемент, вмещающий в себя информацию для общего обозрения пользователями.

Страница формируется автоматически, при указание текста:
[[Название статьи]] или [[Название статьи|текст для ссылки]]

На страницах тексты подаются при помощи тегов.

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

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

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

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

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

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

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

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

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

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

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

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

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

[]
[]
[]
[]

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

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

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

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

В статье речь пойдет о том, что такое вики и для чего они предусмотрены системой. Этот термин введен Уордом Каннингемом в 1995 году. Именно в это время и появилась первая вики-среда. Стоит отметить, что слово «вики» заимствовано у гавайцев. Оно обозначает в переводе «быстрый».

1. Своеобразный вид страниц и записей. Их позволяется править любому посетителю сайта. Изменять можно как тексты с картинками, так и саму структуру портала.
2. Конструктор, предназначенный для создания обширных виртуальных энциклопедий.
3. Философская теория и специальные технологии.

Что собой представляет вики-разметка?

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

Какова организация подобных ресурсов?

Какие компоненты в них входят? В этом следует обязательно разобраться. Электронная энциклопедия способна содержать много страниц, рубрик, разделов и прочего. Данные составляющие переплетаются в единую сеть, образуя общее пространство. Разработать такой огромный ресурс способен особый инструмент, который называется вики-разметка. Он позволяет не только создавать различные энциклопедии, а также оформлять сообщества «ВКонтакте».

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

Какова связь между вики и «ВКонтакте»?

Сначала следует затронуть такой вопрос: какую пользу приносит данный инструмент для социальной сети «ВКонтакте»? Такая разметка дает возможность осуществлять следующее:

Создавать оригинальное меню;
делать метки;
разрабатывать таблички;
добавлять новые навигационные компоненты.

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

Достоинства вики

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

Вики-секреты

Чтобы получить уровень профессионала вики-разметке, необходимо потратить немало времени. Но сначала пользователю нужно узнать определенные моменты о данной системе. Например, изображения с размером, которое не превышает 131 пикселя, становятся некачественными. Существуют определенные правила: одна страничка должна вмещать до 17 тегов, а строка иметь не более 8 компонентов. При установке ширины картинки ее высота меняется автоматически в соответствии со всеми пропорциями.

Чтобы разработать новую страницу в сообществе, потребуется указать в тексте ссылку на статью. Стоит отметить, что дополнительные страницы появляются сразу после набора свежего материала. Для ввода ссылок в вики-разметке предназначены специальные скобки − []. Внутри нее находится сама ссылка. Если перейти по ней, можно попасть на новую страницу. Затем ее следует наполнить и отредактировать. Вот и все, новая страница готова.

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

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

Создание ссылки-якоря

Что касается ссылок, они могут быть различными. Встречаются не только симпатичные кнопочки, но и серьёзные якоря. При помощи вики-разметки «ВКонтакте» допускается создание и того и другого. При этом необходимо помнить одно важное правило: текст нужно ставить только справа от ссылки, а изображение — слева. После этого стоит научиться присоединению анкора. Для этого необходимо открыть квадратные скобки и вставить требуемую ссылку. Затем устанавливается знак разделения элементов – ǀ, далее пишем сам текст. После этого разрешается закрыть скобки. Приблизительно получается следующее: [[ссылка.ру ǀ Мой сайт]].

Сначала необходимо создать кнопочку. Чтобы добавить изображение, можно воспользоваться словом «photo», набрав его номер в альбоме группы. Затем нужно снова заключить всю информацию в скобки. Сначала следует прописать фотографию, а после − ссылку. В результате должна получиться приблизительно такая кнопка: []. Следует уделить должное внимание и функциям, которые доступны для работы с данным изображением:

Plain – текстовая ссылка на фотографию без картинки;
noborder – убрать рамку у изображения;
box – открыть рисунок в новом окне;
nolink – удалить ссылку на фото;
nopadding – удалить пробелы между изображениями;
NNNpx – ширина картинки;
NNNxYYYpx – размеры фотографии.

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

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

{| — открытие таблицы;
|+ — заголовок, выровненный по центру;
|- — новая строка;
| — создание прозрачности;
! — тёмные ячейки;
|} — закрытие таблицы.

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

Оформление меню

Стоит посмотреть, как создается вики-разметка меню «ВКонтакте». Сначала потребуется красивый рисунок и некоторые знания. Необходимо учитывать, что меню бывает нескольких видов:

Следует заранее подготовить рисунок, ширина которого должна быть до 610 пикселей. Это обусловлено размерами стены группы в социальной сети. Необходимо раскроить картинку в Фотошопе или любом другом редакторе, предназначенном для выполнения подобных функций. В результате должно получиться требуемое число кнопок. На каждой из них следует написать наименование конкретного пункта меню. После этого можно переходить в свою группу. В ней потребуется отыскать панель управления и подключить инструмент «Материалы».

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

Где научиться создавать вики-разметку?

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

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

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

Можно привести несколько примеров, а более подробное описание и применение всех тэгов вики разметки сможете найти .

• Сделать жирным текст можно заключив его в тэг ТЕКСТ .
• Курсивный текст создается с помощью тэга ТЕКСТ .
• Подчеркнутый с помощью тэга ТЕКСТ
• Ссылки создаются заключением URL-адреса в квадратные скобки, например: .
• Если нужно сделать ссылку вместе с анкором, то есть ссылкой будет служить определенный текст, тогда следует написать такую конструкцию: .
• Очень важны для графического оформления ссылки в виде картинок. Реализуется такая ссылка следующей конструкцией: [], где xxxxxx_yyyyyy – ID вашей фотографии, 600 px – размер фото в пикселях.

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

Давайте разберемся на наглядном примере как создать графическое меню с ссылками навигации по группе из картинки.

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

Таблицы в вики-разметке составляются по аналогии с html-кодом, только тэги не в буквенном, а символьном виде (не путать с )

{| это начало таблицы, соответственно,

|} ее конец.

|- это начало новой строки, конец, указывать не обязательно.

| это знак столбца в этой строке. Сколько таких знаков, столько и столбцов будет.

Это знак столбца, который будет отличаться по фону от соседнего.

Теперь давайте составим простейшую таблицу из 4 ячеек.

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

Программа для вики разметки вконтакте. Создание вики страниц вконтакте – wiki разметка для чайников

Сегодня проработаем очень интересную и важную тему — вики разметка вконтакте, т.е. создание wiki-страниц и работа с ними.

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

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

Переходим в «Управление группой», в раздел «Настройки»

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

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

Теперь мы можем создавать дополнительные или, как их называют Вики-страницы группы. Этих страниц может быть бесконечное множество. Имейте ввиду Вики-страницу переименовать и удалить невозможно!

Вики страница прописывается следующим образом:

Или с указанием текста:

На новых вики-страницах, картинки можно размещать шириной не более 607 px, а код объемом не более 16300 знаков.

Итак, мы создадим несколько вики страниц.

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

И в двойных квадратных скобках прописываем название наших страниц:

[[декоративная косметика]] [[уход за кожей]] [[контакты]]

Сохраняем страницу. Просмотрим — у нас получилось три страницы.

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

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

В нижнем левом углу мы можем настроить доступ к странице. В правом нижнем углу можно сохранить страницу.

Вставляем заготовленный текст и видим, что он не отформатирован, начинаем его редактировать.

Можно выбрать заголовок, выделить часть текста жирным. Добавить картинку, цитату. Если мы нажмем на картинку в визуальном режиме, она увеличится.

Если мы кликнем на картинку в визуальном режиме, в открывшемся окне мы можем поменять название картинки, ее размер, вставить ссылку.

Если нам не нужно, чтобы картинка увеличивалась — нужно перейти в режим вики разметки и добавить в код картинки, после размера, код ;nolink

Более подробно, по шагам, можно посмотреть в видео под этой статьей.

P.S. Надеюсь вам понравилась эта информация!

P.S.S. Пользуйтесь вики разметкой вконтакте, и пусть вам сопутствует удача!

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

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

Можно привести несколько примеров, а более подробное описание и применение всех тэгов вики разметки сможете найти .

• Сделать жирным текст можно заключив его в тэг ТЕКСТ .
• Курсивный текст создается с помощью тэга ТЕКСТ .
• Подчеркнутый с помощью тэга ТЕКСТ
• Ссылки создаются заключением URL-адреса в квадратные скобки, например: .
• Если нужно сделать ссылку вместе с анкором, то есть ссылкой будет служить определенный текст, тогда следует написать такую конструкцию: .
• Очень важны для графического оформления ссылки в виде картинок. Реализуется такая ссылка следующей конструкцией: [], где xxxxxx_yyyyyy – ID вашей фотографии, 600 px – размер фото в пикселях.

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

Давайте разберемся на наглядном примере как создать графическое меню с ссылками навигации по группе из картинки.

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

Таблицы в вики-разметке составляются по аналогии с html-кодом, только тэги не в буквенном, а символьном виде (не путать с )

{| это начало таблицы, соответственно,

|} ее конец.

|- это начало новой строки, конец, указывать не обязательно.

| это знак столбца в этой строке. Сколько таких знаков, столько и столбцов будет.

Это знак столбца, который будет отличаться по фону от соседнего.

Теперь давайте составим простейшую таблицу из 4 ячеек.

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

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

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

Статьи

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

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

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

Контентные статьи часто выходят в топ-выдачи Яндекса и Гугла наравне со статьями из блогов. Для продвижения сообществ можно использовать SEO-оптимизацию контента.

Меню

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

Вариантов, как именно сделать меню — много, большая часть описана в сообществе Wiki . В Кайросе сделали подобие лендинга с плашкой для навигации.

Игры

Используя вики-публикации можно создавать простенькие квест-игры:

Мы рассмотрели три самых популярных причины использования вики-публикаций для сообществ в ВКонтакте. Давайте разберемся с технической стороной.

Создание вики-публикаций

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

Сложный способ заключается в ручном прописывании ссылки в адресной строке. Нужно в ссылке:

Заменить -XXX на id вашего сообщества и «Название страницы» на верное название страницы. Более подробно способ описан в СММщиках . Мне лень запоминать ссылку, ещё лень постоянно возвращаться к этой статье, поэтому я обращаюсь к лайфхаку, создаю страницу, через разрешение VkOpt на Хром.

С помощью разрешения, в выплывающем меню в настройках сообщества появляется кнопка «Список wiki-страниц».

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

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

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

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

Мне работать с чистым кодом удобнее, чем в визуальном редакторе, но это зависит от степени знаний кодов разметки.

Самые «важные» коды вики-разметки*

* Которые я чаще всего использую

Заголовок первого уровня. Для оформления заголовка первого уровня используются символы « == » с двух сторон заголовка.

Отступ от края страницы. Для отступа используется символ « : » перед абзацем. Чем больше двоеточий, тем больше отступ. Я использую эту разметку, чтобы показать примеры и отделить их от основного уровня текста.

Серый текст. Чтобы обозначить пример, я использую разметку, которая делает черный цвет текста серым. Для этого нужна разметка « » и нужен закрывающий текст « » (убрать пробелы перед закрывающей скобкой)

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

Таблица начинается с « {| », а заканчивается « |} », чтобы обозначить строку, используется код « |- », а для того, чтобы разбить строку на ячейки, используется « | ».

В таблице, часто использую:
Невидимые границы таблицы: noborder;
Расширить таблицу на ширину страницы (по-умолчанию, таблица создаётся на 500 px, а ширина вики-страницы 600 px): nomargin;
Колонки фиксированной ширины (по-умолчанию таблица растягивается в зависимости от контента). Если нужно сделать три столбца одинаковой ширины, после того как прописали код открывающий таблицу, пишите на следующей строке |~33 33 33.

Как переименовать неправильно названные страницы

Раньше считалось, что если ошибиться в названии страницы, то придется создавать новую страницу с правильным названием. Но СММщики нашли лазейку, нужно при открытой вики-странице с неправильным названием, в конце адресной строки прописать /market и перейти на новую страницу. Появится кнопка редактирования названия страницы, подробнее способ описан в материале «

Вики страница (wiki-страница) В Контакте

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

Что такое вики (wiki) — страница и зачем она нужна?

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

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

Очень просто! Введите в поисковой строке браузера ссылку вида

вместо ХХХ – поставьте номер id вашего паблика или группы (только цифры). Узнать id номер вашего паблика или группы можно, открыв любую фотографию и скопировав цифры в адресной строке браузера, идущие после «photo-» и до «_».

Вместо pagename – введите название вики-страницы которую вы создаете(если несколько слов, то через нижний флеш «_»). В нашем примере «ЖМИ_СЮДА».

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

1. Если вы хотите сделать вики — страницу для паблика, нужно сначала создать группу (сообщество) В Контакте. Только там есть возможность создания вики — страниц. И уже после этого, готовую вики – страницу можно будет переносить в паблик (публичная страница). Создать группу весьма просто:

А) в правой колонке выбираем «Мои группы»;

Б) в открывшемся окне, в правом верхнем углу нажимаем «создать сообщество»

В) пишем название будущей группы (на ваше усмотрение)

Г) включаем чекбокс (флажок) возле пункта «Группа»

Д) нажимаем «создать сообщество»

Если вам нужна вики — страница для группы В Контакте, то шаг № 1 пропускайте.

2. Чтобы сделать вики (wiki) – страницу, нужно открыть «материалы». Для этого зайдите в свою группу. В правой колонке, под аватаром вашей группы, нажмите надпись «Управление сообществом». В открывшемся окне найдите пункт «Материалы». Выберите «Открытые». Не забудьте сохранить изменения.

3. После этого, на главной странице вашей группы, под описанием, появится надпись «Свежие новости», а рядом «Редактировать». Именно сюда нам и нужно нажать.

4. Обратите внимание, если на главной странице группы, вместо описания вы «закрепили пост», его нужно «открепить». Нажмите на пост (не на картинку! а именно на текст поста, под картинкой нажмите «открепить»)

5. После того, как вы нажали кнопку «редактировать» рядом с надписью «Свежие новости» перед вами откроется окно вики (wiki) – страницы. В верхнем правом углу вы увидите кнопочку с двумя галочками – это переключатель режимов редактирования. В визуальном режиме редактирования работать новичку значительно проще, поскольку этот редактор частично похож на обычный word. В режиме wiki – разметки, нужно прописывать специальный код.

6. Ставим переключатель режимов редактирования в позицию «Режим wiki-разметки».

7. И пишем фразу, нажав на которую человек попадет на созданную нами wiki-страницу. Но, чтобы этот текст стал кликабельным, его нужно заключить в двойные квадратные скобки (на клавиатуре в английской раскладке кнопки с русскими буквами «Х» и «Ъ»), например [[ЖМИ СЮДА]]. Нажимаем внизу «Сохранить страницу». А затем «Предпросмотр». Если вы все сделали правильно, то надпись, которую вы написали внутри квадратных скобок, появится ниже кнопки «сохранить страницу» и будет кликабельной (станет ссылкой). То -есть, если на нее нажать, вас перенесет на пустую страницу с названием «ЖМИ СЮДА». Если не получилось и под кнопкой «сохранить страницу» вы видите надпись в квадратных скобках, проверьте еще раз в каком режиме у вас стоит переключатель редактирования.

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

https://vk.com/pages?oid=-ХХХ &p=pagename

где ХХХ – это номер id вашего паблика или группы (только цифры). Узнать id номер вашего паблика или группы можно, открыв любую фотографию и скопировав цифры в адресной строке браузера, идущие после «photo-» и до «_».

pagename – название вики-страницы (если несколько слов, то через нижний флеш «_»). В нашем примере «ЖМИ_СЮДА».

1. После того, как заменили id, нажимайте «Наполнить содержанием».
2. Вы опять попадаете в вики — редактор. Если вы не специалист, то наполняйте вики — страницу с помощью визуального режима редактирования. Здесь все просто. Можете добавить, и изменить как вам больше нравится любой текст. Вставить фото, аудио или видео. Прикрепить любую ссылку к тексту или картинки. Чтобы посмотреть результат, нажимайте «Предпросмотр». Ничего сложного.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

{| — этот знак обозначает начало таблицы. Обязательный атрибут.

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

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

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

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

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

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

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

{| |- |

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

WIKI-разметка: графическое меню

Как сделать графическое вики-меню в группе/паблике :

1) нарезаем картинки в фотошопе

2) заливаем в альбом и собираем меню тегом nopadding

[]
[]
[]
[]

Так же вконтакте есть приложения для создания вики разметки. Думаю, лучше создавать через него т.к. не придется учить все эти значения.

Создание wiki-страницы в сообществе Вконтакте

Wiki-страница — это такой пост с ссылкой, при клике на которую открывается статья с фотографиями или видеозаписями и текстом.

Чтобы создать wiki-страницу, воспользуйтесь этой ссылкой: http://vk.com/pages?oid=-ВАШ-ID&p=ВАШЕ-НАЗВАНИЕ . Подставьте сюда ID группы и название создаваемой wiki-страницы. Его можете написать русскими буквами. Чтобы узнать ID выберите «Записи», в браузере в строке ввода появится адрес страницы такого формата: https://vk.com/wall{номер}?own=1,  где {номер} — это и есть ID.

Получившуюся ссылку вставьте в браузер, нажмите Enter. У вас откроется созданная пустая wiki-страница. Нажмите «Наполнить содержанием» или «Редактировать», откроется редактор, для создания содержимого страницы.

Вставляем текст. Вы можете редактировать его как обычный текст, задать заголовки h2, h3, h4. Также, тут есть кнопка, которая позволяет перейти в режим «wiki-разметки», это похоже на html, но теги тут именно контактовские.  Чтобы сделать ссылку, выделите текст, нажмите на иконку  «Добавить ссылку», выберите «Внешняя ссылка», вставьте нужный адрес, «Добавить». Рядом с текстом появляется стрелка, значит эта ссылка открывается в новой вкладке.

Чтобы оформить текст как цитату, выделите его и нажмите на иконку «Добавить цитату». Текст выделяется цветной полоской. Можно добавить видео или аудио. Чтобы вставить картинку нажмите «Добавить фотографию» и «Загрузить фотографию из компьютера». Чтобы она была во весь экран, кликните на нее и поставьте размер по ширине 607 пикселей (т.к. размер wiki-страницы равен 607 пикселям) и «Сохранять пропорции», чтобы картинка не искажалась.

При клике на эту картинку в посте она будет открываться в полном размере, на wiki-странице это не нужно. Чтобы картинка по клику не открывалась и у нее не было обводки, перейдите в режим «wiki-разметки», картинка тут будет отображать в виде кода:

[[photo13791719_371782129|400x236px| ]]

Измените код, добавив тэги ;nopadding;nolink|, код картинки должен теперь выглядеть вот так

[[photo13791719_371782129|400x236px;nopadding;nolink| ]]

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

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

Чтобы разместить wiki-страницу , скопируйте ее адрес, и вставьте у себя на стене. Прикладывайте к этой записи брендированную картинку, при клике на которую будет открываться статья.

Задание

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

2. Прописать  ;noborder;nolink| чтобы при клике не открывались картинки

3. Добавить картинку на стену со ссылкой на статью

Пишите в комментарии, что у вас получилось.

Как оформить пост через-вики страницу: пошаговый алгоритм + видеоурок

Привет, друзья! Сегодня я предлагаю поговорить на довольную непростую тему для новичков: как оформить пост через вики-страницу ВКонтакте.

Прежде всего стоит уточнить, что вики-страницы можно создавать только в группах ВК. В паблике эта возможность не реализована, но ее можно прописать с помощью wiki-кода.

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

Какие возможности дает вики-страница

Наверняка вы обращали внимание, что оформление простого поста ВКонтакте имеет очень ограниченный функционал. Что мы можем сделать с постом? Это добавить тематические смайлы и разделить абзацы. На этом пожалуй все… Поэтому длинные посты читать довольно сложно: чаще они выглядят, как длинная простыня из текста.

На фоне таких постов выигрывают именно вики-страницы. Возможности вики-страницы:

• Форматирование текста
• Выделение заголовков
• Использование жирного шрифта, курсива, подчеркнутого текста
• Добавление нескольких изображений
• Применение буллитов
• Установка спойлеров
• Добавление графических таблиц
• Возможность устанавливать кнопки и ссылки на сторонние сайты через них.

Как подключить вики-страницу в группе ВК

Для того, чтобы у вас появилась возможность создавать вики-страницы в группе, эту функцию нужно подключить. Под аватаром или обложкой нажмите на три точки – Управление сообществом – Разделы – Материалы – Ограниченные. Не забудьте нажать кнопочку Сохранить.

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

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

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

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

Создание вики-страницы в группе ВК

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

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

Для этого нам необходимо в окне для форматирования текста выставить режим wiki-разметки (значок будет подсвечиваться синеньким цветом). Именно в этом режиме нам предстоит работать.

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

Сейчас нам необходимо создать вики-страницу, для этого пишем название поста в квадратных двойных скобках. Пример [[Тест]]

Теперь  нажмите на кнопку Сохранить страницу. Далее Предпросмотр. И ниже появится ваше название поста – это слово будет активно, необходимо на него кликнуть.

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

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

После того, как ваша wiki-страница будет оформлена и готова к публикации, обязательно сохраните ее и скопируйте адрес в браузерной строке.

Теперь можно вернуться в группу.

Как оформить пост через вики-страницу

Приступаем непосредственно к созданию поста через вики-страницу. Тут все очень просто. Добавляете запись для нового поста – возможно пару строк по теме – это уже на ваше усмотрение и… Внимание! Вставляете скопированную ссылку.

Если вы все сделали правильно, у вас чуть ниже отобразится название созданной wiki-страницы: в моем случае это Тест.

Далее добавьте изображение по теме: напоминаю, что идеальный размер картинки должен быть по ширине не менее 700рх.

После того, как картинка вставлена, рекомендую ссылку удалить. Не переживайте, страница останется на месте. Кнопочка Отправить.

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

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

На этом все: теперь, если кликнуть на фото поста, нам открывается статья, которая оформлена через вики-страницу.

Денежные ручейки

Создание первой страницы Wiki

Создание первой страницы

Если еще не создано ни одной страницы, посетитель сайта увидит Главную страницу в таком виде:

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

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

Упрощенный визуальный редактор имеет кнопки, недоступные в других модулях системы:

Примечание: Wiki допускает настройку переадресации страниц. Если по каким-то причинам страница не должна отображаться, но удалять её нежелательно, то можно использовать переадресацию. Для этого необходимо в режиме текста добавить на страницу выражение #REDIRECT [[**********]]. Вместо звёздочек вставьте имя страницы, на которую производится перенаправление. Редактирование исходной страницы становится доступным только администратору.

Заполните текстом страницу и нажмите Опубликовать. Страница будет создана.

Создание страницы из Красной ссылки

Для создания новой страницы по красной ссылке просто нажмите на нее. Откроется форма создания новой страницы.

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

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

Советую также прочитать:

Как создать wiki-страницу? | Create Yourself

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

Например, с помощью вики-разметки можно создать меню для сообщества.
.

.
.
Можно сделать обучающую статью с картинками.
.

.
.
Можно написать кейс. И следующая статья, кстати, будет посвящена как раз созданию кейсов.
.

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

Возможностей действительно много.

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

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

В принципе, это совсем не сложно. К тому же, у ВК есть подробные мануалы в официальном сообществе – https://vk.com/wiki

Второй, более простой, вариант – сервисы. Разберем на примере wikiposter.net
.

.
.
Переходим по ссылке, нажимаем кнопку “Войти” и авторизуемая через ВК.

Вики постер показывает нам сообщества, где мы являемся администраторами.

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

Когда сообщество будет сделано и появится в списке, нажимаем на кнопку “Создать вики-страницу”.
.

.
.
Создаётся новая пустая страничка.
.

.
.
Теперь добавляем необходимый материал – текст, картинки, скрины, кнопки и т.д.
.

.
.
Нажимаем “Создать вики-страницу”.
.

.
.
Все.

Вики-пост готов. Теперь его можно прикрепить к статье или настроить на него рекламу.

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

Использование ссылок на страницах вики — База знаний (APAN9.0) — Поддержка APAN

Платформа Telligent использует как синтаксис вики-ссылок, так и расширенный текстовый редактор для создания ссылок.

Синтаксис Wiki Link

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

Создать новую страницу, используя синтаксис вики-ссылки

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

1. В вики, создает новый документ или редактирует существующий.
2. На странице редактирования вы можете создать новый документ, который является дочерним по отношению к текущему, создав ссылку на новый документ.
   1. В качестве примера введите:
3. Щелкните Сохранить. Страница сохранена, а введенная ссылка отображается красным цветом.
4. Щелкните красную ссылку . Откроется страница n ew (но не будет сохранена, пока вы ее не сохраните).

Ссылка на существующую страницу в той же вики с использованием синтаксиса ссылки вики

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

Создать ссылку, которая показывает заголовок как текст ссылки

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

Создать ссылку, которая показывает другой текст в качестве текста ссылки

1. В вики создайте новый документ или отредактируйте существующий.
2. На странице редактирования введите имя существующей страницы в двойных квадратных скобках, затем поставьте вертикальную черту, а затем текст, который должен отображаться в ссылке:
   1. В качестве примера введите:
3. Щелкните Сохранить. Страница сохранена, и текст ссылки отображается синим («собачий цвет»). Однако при нажатии на ссылку отображается правильная страница («Какого цвета собаки чаще всего?»).

Другие ссылки

Кнопка ссылки на расширенный текстовый редактор

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

Ссылка на существующую страницу в той же или другой вики с помощью кнопки ссылки текстового редактора

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

1. Скопируйте ссылку нужной страницы .
2. Откройте окно редактирования wiki в документе, который вы собираетесь связать с ним.
3. Введите текст.
4. Выделите текст.
5. В меню расширенного текстового редактора нажмите Вставить> Вставить ссылку. Откроется диалоговое окно «Вставить ссылку».
6. Скопируйте ссылку другой страницы в поле URL.
7. Щелкните Ok. Текст ссылки станет синим.Когда вы щелкаете по нему, вы попадаете в верхнюю часть этой страницы.

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

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

1. Скопируйте ссылку на нужный заголовок в ссылку нужной страницы. Например, вы можете скопировать гиперссылку страницы из оглавления вики, а затем добавить знак решетки и текст привязки для заголовка
.
2. Введите текст.
3. Выделите текст.
4. На панели инструментов расширенного текстового редактора нажмите Вставить> Вставить ссылку. Откроется диалоговое окно «Вставить ссылку».
5. Скопируйте ссылку другой страницы, включая хэштег и название заголовка, в поле URL ссылки или страницы.
6. Щелкните Ok. Текст ссылки станет синим. Когда вы щелкаете по нему, вы попадаете в этот заголовок на этой странице.

Дополнительная информация

Текстовый редактор ссылок и привязок

Разработка меню в контакте.Основы оформления группы ВКонтакте с использованием вики-разметки. Как создать графическое меню

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

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

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

Быстрая навигация:

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

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

Создание группового меню Вконтакте онлайн

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

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

Принцип создания меню можно разделить на несколько шагов:

Шаг 1. Определитесь с шаблоном дизайна.

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

Шаг 2. Определите количество кнопок.

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

Шаг 3. Укажите ссылки и метки.

Шаг 4. Проверка и экспорт.

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

Шаг 5. Внесение изменений.

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

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

Баннер для группы Вконтакте, создайте бесплатно!

Есть специализированные сайты, где без особых усилий и софта можно сделать себе красивый баннер для группы Вконтакте.Например https://bannermakers.ru/banners-vk/.
Кроме создания меню таким способом, есть еще способы сделать меню в группе ВК и другим способом. Об этом читайте ниже.

Меню ВКонтакте вики-разметка

Wiki — отличный помощник в построении красивого и эффективного сообщества! Это очень удобный и эффективный способ оформить паблик в популярной сети ВКонтакте. Эта разметка очень похожа на html-код по своему действию. Но для тех, кто не имеет отношения к программированию,

будет достаточно нагляднее за счет простоты реализации.Свое название эта разметка получила благодаря «Википедии», где многочисленные пользователи впервые получили возможность ознакомиться с основными особенностями ее функций. Разметка Wiki позволяет людям без навыков программирования легко и быстро создавать группы:

· Графическое создание спойлеров и таблиц.

· Форматирование изображений и текста.

Итак, перейдем к разбору, как сделать меню для сообщества ВК?

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

Давайте немного остановимся на его истории, а потом поговорим о технологиях. Уорд Каннингем впервые познакомил людей с понятием «вики», что на гавайском означает «быстрый». Таким образом он выразил простоту и скорость использования разметки.

Быстрая регистрация

Теперь рассмотрим вопросы: «Как сделать меню в группе в ВК», и проясним, как это эффективно реализовать.В процессе можно пойти несколькими путями, каждый из которых имеет свое направление и приводит к конечной цели — наличию качественного группового меню.

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

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

Тематические картинки и фото позволят вам создать меню группы ВК, красивое и интересное.Важно знать, что во «ВКонтакте» можно вставить нужную фотографию или картинку с помощью вики-разметки только тогда, когда они уже были загружены в альбомы сайта. Итак, зайдите в альбом, определитесь с желаемой фотографией и скопируйте ее адрес. Допустим, пусть будет так: photo14523_. Теперь нужно заключить его в двойные квадратные скобки. Должен быть такой результат: []. Но что, если вам нужно прикрепить ссылку или текст к картинке или фотографии? А может есть необходимость редактировать внешнее изображение? Тогда здесь поможет следующее действие: вам нужно, чтобы файл выглядел так — [[photo14523_ | варианты | текст / ссылка]], а вместо последних трех слов нужно подставить то, что вам нужно.Текст — введите то, что вам нужно. Дополнительные пояснения здесь, вероятно, будут неуместными. Ссылка переводится с английского как «ссылка». Обозначается, чтобы машина посетителя понимала, куда ей нужно ехать. Параметры — здесь задаются эти значения:

Noborder — убирает рамку вокруг фотографии. Коробка — изображение находится в окне.

Nopadding — пробелы между картинками не отображаются.

NNNxYYYpx или NNNpx — укажите размер картинки (в пикселях).

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

(| — обозначение начала таблицы. Без этого символа при создании таблицы не обойтись, это обязательный атрибут.

| — используется для придания ячейкам эффекта прозрачности.

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

| — — так обозначаются новые строки (также для ячеек).

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

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

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

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

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

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

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

1.Откройте изображение меню в Photoshop или другом графическом редакторе.

2. Изучите размер картинки и если он превышает 600 пикселей по ширине — измените размер на 600, высота картинки изменяется пропорционально, мы не устанавливаем вручную!

3. Используем инструмент «вырезка» и вырезаем наше изображение на пуговицы.

4. Сохраните картинку в параметре «для WEB». Теперь работа в фотошопе окончена. Пойдем в сообщество.

5. Зайдите в настройки сообщества в разделе «Материалы», выберите «Ограничено» и нажмите «Сохранить».

6. Зайдите на главную страницу, в подразделе «последние новости» нажмите «редактировать».

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

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

Теперь у нас есть код для нашего меню, но его нужно немного изменить, чтобы убрать пробелы между изображениями.Теперь наш код выглядит так: [] [-] [-] [-] [-]

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

8. Исправьте код: По умолчанию ВК имеет встроенное разрешение для максимального размера изображения по ширине 400 пикселей, первая кнопка оказывается 600, измените параметры первой кнопки с 400x89px на 600px, вы не Не нужно указывать высоту. Также в каждую строку вводим следующий тег: nopadding должен разделяться точкой с запятой.

Важно! Не нажимайте ENTER после строк кода, если вы хотите, чтобы две кнопки были рядом, в одной строке меню. Редактор автоматически перенесет на новую строку те параметры, которые не подходят! Этот код должен быть после редактирования:

[] [-] [-] [-] [-]

Теперь, перейдя в «превью», мы видим, что все на своих местах. Добавьте необходимые ссылки на каждую из кнопок в коде; в качестве наглядного примера ссылка на первую кнопку здесь не нажимается! Не забудьте убрать лишний пробел между | а также ].

[] [-] [-] [-] [-]

Убедившись, что все сделано по плану, нажмите «сохранить» и вернитесь на страницу. Обратите внимание, что в новой версии 2018 нет кнопки «вернуться на страницу», поэтому вам просто нужно нажать на название страницы вверху.

9. Теперь нам нужно закрепить наше меню. Для этого скопируйте ссылку на страницу из нашего меню и вернитесь на главную страницу группы.

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

11. Теперь поправим меню, обновим страницу и оценим наш результат. Вся работа, медленно, занимает около 15-20 минут.

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

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

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

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

1.После редактирования кода сохраните и нажмите «вернуть».

2. Проверить правильность отображения первого меню.

3. Если все в порядке, еще раз нажимаем «редактировать».

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

Пока ваша вновь созданная страница еще пуста, нажмите «изменить» или «заполнить содержимым»

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

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

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

Таким образом, при нажатии на кнопку «Отзывы» откроется наше второе меню.

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

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

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

Шаблоны группового меню Вконтакте

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

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

Здравствуйте, друзья!

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

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

В общем сделал простое меню для одной из страниц ВКонтакте:

Потратил буквально 30 минут, чего нельзя сказать о написанной статье 😀

Прежде всего, сразу оговоримся — это меню всплывающее, публичное (не в группе).

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

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

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

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

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

Не будем останавливаться на группе подробно. Он формируется примерно так же, как и для паблика с теми же кодами Wiki. Но не пугайтесь. Необязательно углубляться в дебри символов. Например, я сделал это, не заходя во вкладку редактирования кода.

Более подробно объясню, как я делал меню на своей странице:

Итак, о пабликах. Все работает для старых и новых пабликов. Делаем следующие шаги:
1. Выполняем запрос типа: // vk.com / pages? oid = -XXX & p = YYY
где XXX — ваш публичный номер; ГГГ — название нужной страницы
Если все сделано правильно, перед вами появится новая страница. Нажмите «Редактировать» и создайте вики-меню или что-то еще
2. Всплывающая страница вызывается с помощью команды:
//vk.com/publicXXX?w=page-XXX_YYY

Внимание! Все минусы, вопросительные знаки и прочие знаки обязательны. Измените только XXX и YYY.
Все! Теперь нужно придать ссылке «красивый вид» — с помощью vk.cc — сокращателя ссылок ВКонтакте.

Например — у моей страницы адрес: //vk.com/sf_kontakt, чтобы узнать XXX (id страницы) перейдите в пункт «управление страницей»

//vk.com/pages?oid=- 34016644 & p = Здесь мы вводим имя

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

В моем примере все ссылки были на внешние ресурсы. При нажатии на первый значок открывается сайт статуса, при нажатии на второй значок (буклет) открывается страница подписки. Также можно не отправлять пользователя на внешние ресурсы, а обвести его внутри контакта. Либо в новые (другие) группы, либо на страницы описания, созданные по тому же принципу.

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

она взяла этот адрес: //vk.com/sf_kontakt?w=page-34016644_44405134

И в конце: Основная группа или паблик / Название созданной страницы

Надеюсь, с этим не возникнет сложностей.

Создаем главное меню в контакте:

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

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

Чтобы сделать такое меню без понимания кода, достаточно просто перейти по ссылке и подобрать готовое меню. Вот группа, в которой можно найти шаблоны: //vkontakte.ru/club93

1. Нажимаем «Меню» -> «Коллекции меню»
2. Выберите свое любимое меню
3. Скопируйте код выбранного вами меню
4. Зайдите в свою группу и отредактируйте страницу Последние новости , в разделе исходного кода вставьте код нашего меню для контакта.

Меню для группы ВКонтакте

Теперь у нас есть страница с точками навигации, которая имеет адрес: //vk.com/page-34016644_44405134, чтобы отобразить ее в верхней части вашего паблика, мы делаем следующее:

• Добавить новость
• Прикрепляем основную картинку, нажав на которую, пользователь откроет наше меню.
• Вставить ссылку созданной страницы в новость
• И последний шаг — «починка столбов». Напишите пост с фото / видео / музыкой, затем опубликуйте, затем нажмите дату публикации — и нажмите «Закрепить».

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

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

И на сегодня все. Спасибо, что зашли! 😉 До следующего раза …

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

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

Итак, вот три способа создания меню:

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

Кстати, для тех, кто предпочитает получать информацию через видео, а не читать длинные тексты, есть видео:

Path # 1.Заказать создание меню у специалиста-дизайнера

Преимущества этого метода — относительная скорость и минимальное участие с вашей стороны. Минусы — самая высокая цена и шанс получить красивое, но неправильное меню (про основные ошибки при создании меню мы подготовили). К тому же еще нужно найти исполнителя. Здесь мы можем порекомендовать поискать его на сервисе kwork.ru, в разделе «Дизайн групп в социальных сетях».

Путь # 2. Использование онлайн-конструктора

Здесь мы, конечно же, порекомендуем наш конструктор, на сайте которого вы сейчас находитесь.Вы можете попробовать это бесплатно. Оплата производится только в том случае, если результат вас устраивает и вы решили загрузить получившееся меню в свою группу. Преимущества этого пути в том, что он самый быстрый. Кроме того, при необходимости вы всегда можете быстро отредактировать и перезагрузить свое меню за половину стоимости создания. Это удобнее, чем искать дизайнера каждый раз, когда нужно, например, добавить или удалить элемент из меню. Недостатки метода — здесь придется немало сделать, но поработать самостоятельно.

Путь № 3. Делай все сам

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

• Уметь уверенно пользоваться графическим редактором. Например, Фотошоп. При составлении меню вам нужно будет сначала сделать изображение нужного размера (до пикселя, без «примерно»!), А потом правильно его обрезать (разбить на фрагменты)
• Уметь понимать инструкцию и читать их внимательно
• Не сдавайтесь и не отчаивайтесь, если что-то не получится с первого раза

Если вы думаете, что справитесь со всем, тогда приступим.

Шаг №0. Общие сведения о том, как устроены групповые меню ВКонтакте

Меню для группы составляются из вики-страниц, создание которых поддерживает ВК. Вики-страницы — это специальные страницы, которые можно создавать только публично. Они отличаются от обычных сообщений тем, что могут использовать так называемую вики-разметку. Эта разметка представляет собой специальный код, который преобразуется в дополнительные объекты форматирования. Чтобы было понятнее, поясним. Например, в обычных сообщениях вы можете использовать только обычный текст, в то время как разметка вики позволяет выделить части текста жирным шрифтом или курсивом.То есть вводит дополнительные варианты дизайна. В частности — возможность размещать изображения, при нажатии на которые пользователь будет перенаправлен на ссылку. Именно эти дополнительные параметры форматирования используются для того, чтобы сделать общедоступное меню ВКонтакте. Как именно это сделать, мы расскажем ниже.

Шаг 1. Подготовительный этап

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

Итак, вы создали новую группу. Давайте теперь узнаем идентификатор (ID) вашей группы. ID группы — это ее уникальный номер ВКонтакте. Зайдите в свою группу и нажмите «Сообщения сообщества» (если в группе нет сообщений, то вместо «Сообщения сообщества» будет «Нет сообщений»). Вы будете перенаправлены на новую страницу с адресом следующего типа:

https://vk.com/wall- XXX ? own = 1

Вместо XXX у вас будет набор цифр (и только цифры!).Это ваш идентификатор сообщества. Например, в нашей тестовой группе это 154457305.

Теперь давайте создадим новую вики-страницу в группе. Для этого создайте ссылку следующего типа:

http://vk.com/pages?oid=- Group_id & p = Имя_страницы

http://vk.com/pages?oid= — 154457305 & p = Меню

Откройте полученную ссылку в браузере (скопируйте ее в адресную строку браузера и перейдите по адресу). Вот и все, вы создали вики-страницу с названием «Меню» (если, конечно, вы указали «Меню» в качестве имени страницы в ссылке).Вы должны увидеть такой текст: «Страница меню пуста. Наполните содержанием. «В правом верхнем углу есть значок карандаша (). Щелкните по нему, чтобы перейти к редактированию страницы.

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

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

http://vk.com/page- Group_id _ XXX ? act = edit & section = edit

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

Шаг №2. Делаем простое меню для группы ВКонтакте

Итак, мы создали вики-страницу «Меню». Переключитесь в режим разметки редактора и добавьте следующий код:

Нажмите кнопку «Предварительный просмотр», которая находится в нижней части редактора.Вы должны увидеть список из трех ссылок. Первые два являются внешними и ведут на главные страницы Яндекс и Гугл соответственно. Третья ссылка внутренняя. Выводит в паблик ВК с идентификатором «1» (это официальная группа ВК для разработчиков). Если в предварительном просмотре отображается код, а не ссылки (по которым можно щелкнуть) — , значит, вы ввели код в режиме визуального редактирования , а не в режиме макета. Будь осторожен!

Обращаем ваше внимание, что внешние ссылки в вики-коде ВКонтакте оформляются одинарными скобками, а внутренние — двойными.При этом внутренние ссылки ВКонтакте указываются не как обычный адрес сайта, а как указатель на конкретный объект ВКонтакте. Например, указатель на группу имеет такое обозначение:

club Group_id

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

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

А теперь разберемся, как и где можно использовать вики-страницы.

Шаг № 3. Где я могу разместить вики-страницы ВКонтакте

Есть два основных места: вы можете создать сообщение со ссылкой на вики-страницу или разместить его в разделе «Контент» вашего сообщества.

Начнем с первого варианта. Начните добавлять новый пост на стену вашей группы. Сначала прикрепите к нему любую фотографию. Лучше сделать снимок достаточно большого размера, шириной больше высоты. Затем вставьте в текст сообщения, которое вы создаете, ссылку на вики-страницу, которую вы создали, с помощью простого меню. Мы просили вас записать это немного раньше. Напомним, ссылка выглядит так ( у вас будут разные номера ):

http://vk.com/page-121237693_72827423

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

Нажмите на фото в закрепленном посте: должна появиться ваша вики-страница с простым групповым меню.

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

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

Перейти к этой новинке.Щелкните по пластине «Редактировать». В результате вы попадете в уже знакомый вам редактор вики-страниц. Единственное отличие состоит в том, что есть поле для ввода заголовка страницы. Измените его с «Свежие новости» на «Меню2». V режим редактирования разметки введите следующий код:

«» «Пункт меню для раздела» Материалы «» «»

[]

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

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

Мы узнали, что меню можно размещать в двух местах.Желательно делать это как в виде фиксированной записи, так и в разделе «Материалы». Запомните два нюанса:

• Закрепленный пост увидят 98% ваших посетителей, и только 25-40% самых любопытных, а также лояльных старых пользователей вашей группы, которые знают, что есть что-то полезное, получат в раздел материалов.
• Закрепленный пост с картинкой для вызова меню можно дополнить текстом. Таким образом, вы не потеряете функцию закрепленной записи. Но и переборщить не стоит: чем больше текста, тем ниже будет ссылка для открытия вашего меню.

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

Кстати. Вы можете переходить с одной вики-страницы на другую.Это работает так: пользователь открывает (например, используя ссылку на изображение в сообщении) первую вики-страницу. Он также содержит ссылки на другие вики-страницы. При нажатии на эти ссылки откроется соответствующая вики-страница. Таким образом можно создавать довольно сложные и многоуровневые меню и, например, инструкции. Однако мы не советуем вам слишком увлекаться этим без надобности.

Шаг №4. Как сделать меню в группе ВКонтакте. Graphic

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

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

А во-вторых, как мы уже говорили, вики-разметка ВКонтакте появилась в то время, когда о мобильных приложениях мало кто слышал. Наше условно «простое» меню будет максимально корректно и качественно работать везде: в браузерной версии ВКонтакте, в мобильных браузерах и, наконец, в приложении. Многие «сложные» меню этим похвастаться не могут. Более того, в большинстве случаев «простое» меню будет работать лучше, чем «сложное», которое «разваливается» при просмотре в официальном приложении «ВКонтакте».Чаще всего лучше остановиться на этом пункте меню. Да, есть несколько довольно богатых реализаций меню. С ними тоже можно поэкспериментировать. Но наш опыт говорит, что реальной выгоды — конверсий, покупок и репутации они вряд ли добавят. И у них вполне могут быть проблемы.

Наше тестовое меню будет выглядеть так:

Всего две кнопки. Первый будет вести на главную страницу «Яндекса», а второй — в группу VK Team ВКонтакте.

Вертикальное графическое меню в ВК представляет собой изображение, разрезанное на полосы.Эти полосы расположены друг под другом на странице вики. Некоторым из этих «бэндов» присвоены ссылки. При нажатии на такую ​​ссылку-изображение, собственно, и происходит переход по этой ссылке. Одна полоса — это одно звено. Некоторым бэндам (например, промежуточным, которые расположены между точками) наоборот присваивается отсутствие звена. Такие полосы становятся «не кликающими».

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

• Первым делом нужно нарисовать меню.Ширина должна быть строго 600px (пикселей). Рекомендуем делать меню не более 900 пикселей в высоту. Результат лучше всего сохранить в формате PNG, в крайнем случае -JPG. Воспользуйтесь знакомыми и удобными инструментами рисования (такими как Photoshop или GIMP). Результат здесь на 95% зависит от ваших творческих и технических навыков. Даже если вы совсем не умеете пользоваться графическими редакторами, не отчаивайтесь. Навыков, которых хватит, можно приобрести максимум за пару часов. В Интернете огромное количество справочной и обучающей информации.Кроме того, возможность хоть немного использовать графический редактор очень и очень полезна для публичных администраторов. Вы не будете тратить зря время.
• Далее картинка с меню нарезается на горизонтальные полосы. Сделать это можно любым удобным для вас способом: от привычного многим Photoshop до различных онлайн-сервисов. Если вы не знаете, как это сделать, просто задайте вопрос своей любимой поисковой системе. Мы не будем подробно описывать техническую часть процесса резки: существует десятки способов, одни подходят для одних, а для других не подходят.При обрезке необходимо соблюдать одно простое правило: высота одной полосы не должна быть меньше 60px … В противном случае у вас могут возникнуть проблемы с отображением меню в приложении и в мобильных браузерах: т.н. «Белые полосы» между изображениями.
• Нарезанные «полоски» загружаются в альбом или альбом группы на странице администратора группы. Мы рекомендуем второй вариант. В любом случае альбом с нарезанными частями меню должен быть в открытом доступе … Иначе те пользователи, для которых недоступны изображения альбомов, не увидят ваше меню!
• Код разметки Wiki создается и вставляется на нужную страницу вики.
• Группа содержит закрепленное сообщение с изображением-ссылкой на вики-страницу с меню. Выше мы подробно писали, как делается такой пост. Кроме того, код (с небольшими изменениями) можно добавить на корневую вики-страницу (элемент справа от элемента «Информация» появляется при включении раздела «Материалы».Подробнее см. Выше).

Теперь давайте более подробно рассмотрим загрузку частей меню и кода вики. Мы подготовили для вас. Он содержит два каталога: «1» и «2». Первый содержит части самого примитивного и простого варианта нарезки для нашего меню — на две части. Скачайте архив, загрузите изображения (1.png и 2.png) из каталога «1» в новый альбом (на свою страницу или в группу).

У нас две «полоски»: верхняя (с кнопкой Яндекс) и нижняя (с кнопкой ВКонтакте).Оба будут ссылочными изображениями. В вики-разметке это делается с помощью следующего кода:

«ССЫЛКА» — целевая ссылка. Например, https://yandex.ru/. Помимо обычных внешних ссылок , это может быть указание на объект ВКонтакте: пост, страницу пользователя или группу. Например, чтобы после нажатия на кнопку происходил переход в сообщество «Команда ВКонтакте», вы можете указать как его адрес (https://vk.com/team), так и указатель на него (club22822305). В принципе разницы не будет.Внешние ссылки (те, которые не ведут на ресурсы ВК) мы рекомендуем уменьшить на

Здравствуйте, мои любимые!

Сегодня подробно расскажу, как сделать меню для группы ВКонтакте … По моему опыту меню в группе в контакте увеличивает количество звонков и заявок на 20%. Важно ответственно подойти к вопросу создания группового меню. Поэтому я подготовил для вас шаблон меню PSD, чтобы облегчить вашу работу.

Начнем с того, что сегодня есть два пункта меню:

Вариант 1: Меню закрытой группы

Закрытое меню, открывается при переходе по ссылке. В приведенном ниже примере меню открывается при нажатии на ссылку «ОТКРЫТЬ МЕНЮ ГРУПП!»

Вариант 2: Открыть групповое меню (закрепленный пост)

Открытое меню — это закрепленный пост с активной ссылкой.

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

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

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

Разберем процесс создания меню на примере Варианта 2, т.е. открытого меню.

Чтобы вам было проще ориентироваться, я подготовил для вас шаблон PSD меню : [Внимание. Изменился дизайн ВКонтакте. Новый макет и другая соответствующая информация в моей книге]

PSD шаблон группового меню

Для создания внешнего меню вам понадобятся 2 картинки: аватар (справа) и центральная (картинка действия).

Размеры аватара: 200 x 332 пикселей

Размеры центрального изображения: 395 x 282 пикселей

Шаг 1.

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

Шаг 2.

Зайдите в свою группу в «Управление сообществом» (справа под аватаркой). Найдите пункт «Материалы» (на вкладке «Информация») и сделайте их «Ограниченными».

Шаг 3.

Теперь вернитесь на главную страницу своей группы и нажмите «Редактировать» в появившемся блоке «Материалы» (я уже переименовал его в меню «Группа»).

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

Шаг 4.

В моем примере https://vk.com/page-42211349_47355854,

Первые цифры 42211349 — это идентификатор вашей группы

Вторые цифры 47355854 — это идентификатор страницы

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


https: // vk.com / pages? oid = -хххххххх & p = pagename
где,
xxxxxxxxx — id вашей группы
pagename — имя вашей страницы

Шаг 5.

И опубликуйте пост.

Шаг 6.

Теперь загрузите аватар группы (рисунок справа). На стене появится дубликат изображения аватара — удалите его.

Шаг 7.

А теперь внимание. Нажмите ЗАПИСАТЬ ВРЕМЯ ПУБЛИКАЦИИ (нижний левый угол сообщения).

И нажмите «Исправить».Закрываем это окно и обновляем страницу вашей группы (F5).

Шаг 8.

Пишем статус группы (используем только 1 строку) для выравнивания картинок, если рисунок на вашем аватаре не начинается с самого верха (в моем шаблоне аватар — вариант 2). И вот что у нас получилось:

ИТОГО.

Меню готово! Теперь, когда вы нажимаете на центральную картинку, открывается ваше меню:

Здесь можно редактировать, перемешивать фото, видео, создавать новые разделы, размещать ссылки.

В главном меню можно также создать графическое меню (подменю). Его ширина не должна превышать 600 пикселей. Размер неограничен по высоте. Это позволяет создавать отличные лендинги ВКонтакте.

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

Напишите свои вопросы или мнения в комментариях ниже.

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

Посмотрите видеоверсию этого вопроса:

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

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

Факторы ухода гостей:

• аватар;
• описание;
• название;
• красивое и практичное меню;
• красочность;
• содержание.

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

Какое должно быть меню

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

Три основные цели групп:

1. продажи;
2. увеличен трафик;
3. рост активных посетителей.

Для продаж групповая навигация заменяет витрину.

Самые важные кнопки должны быть здесь:

1. каталог;
Цена
2. ;
3. доставка;
4. рекламных предложений;
5. отзывов.

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

Примерный вариант набора кнопок:

видео: меню для общественности

Работаем с фотошопом

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

Алгоритм действий:

Это делается с помощью инструмента «Прямоугольная область»:

Работа с графикой:

Должно получиться так:

Сохраните прямоугольник справа как отдельное изображение, установив размер 200×500 пикселей. Это готовый аватар, загружаемый через кнопку «Загрузить фото» в группе ВК.

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

Сначала нужно сделать разметку:

Создать фрагменты:

Сохранение изображений:

Техническая часть

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

Важно! Заполнение меню отличается от обычной загрузки фотографий или картинок.

Все в порядке:

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

1. найдите нужную запись;
2. щелкните по нему левой кнопкой мыши;
3. скопируйте URL-адрес в адресную строку.

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

Сохраните изменения, нажав соответствующую кнопку внизу окна.

Внимание! Изменения могут появиться не сразу. Рекомендуется выйти из своего основного профиля, а затем снова войти в группу.

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

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

Этот инструмент позволяет создавать:

• эффектов;
• необычных меню;
• тарелок;
• элементов навигации;
• формат текста.

Одним словом, эта разметка позволяет создать мини-сайт ВКонтакте. Это здорово, особенно для продаж и набора подписчиков.

Такой дизайн интуитивно заставляет посетителя остаться, нажав на кнопку. То есть затягивает и побуждает к действию — а это как раз то, что нужно.

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

Видео: меню с поиском по категории

Нюансы создания

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

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

Как это: []

Основные теги представлены в таблице ниже:

Фото: теги, используемые для разметки

Работа с картинками

Где опции заменены на:

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

Создание таблицы

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

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

• {| символ начала таблицы, без него не может быть таблицы. Всегда использовал;
• | + отвечает за центрирование имени таблицы. Ставится после символов начала таблицы. Используется по желанию;
• | обозначает начало новой строки и ячейки;
• | символ, делающий ячейку прозрачной;
• ! делает ячейку темнее.При его отсутствии в обязательном порядке применять предыдущий знак;
• |} означает конец таблицы. Однако необязательный символ используется для предотвращения возникновения ошибки.

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

Функции разметки

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

Во избежание основных ошибок следует ознакомиться с основными:

1. нужно быть осторожным при изменении размера картинки — если он будет меньше 131 пикселя, его качество значительно ухудшится;
2. ширина изображения не должна превышать 610 пикселей;
3. запрещается размещать более 17 незакрытых тегов на одной вики-странице;
4. при изменении ширины картинки ее высота изменяется автоматически и пропорционально;
5. список внутри таблицы должен быть создан с использованием тега
   ;
6. в одной строке разметки должно быть не более 8 пунктов списка.

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

Важно! Проверьте закрытие всех тегов. Сохраняйте последовательность.

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

Основатель крупнейшей социальной сети России потерял свою компанию стоимостью 2 миллиарда долларов из-за политики. Вот что он узнал — Quartz

Этот элемент был исправлен.

Павел Дуров все еще был лидером мира на технической конференции DLD в Мюнхене в январе 2012 года. В беседе у камина с Джимми Уэйлсом, основателем Википедии, он объявил, что пожертвует 1 миллион долларов в пользу интернет-энциклопедии. -прибыльная материнская компания. Дуров был основателем и генеральным директором ВКонтакте, крупнейшей социальной сети в России.Это сделало его международной знаменитостью и богатым человеком.

К 2014 году он потерял контроль над основанной им компанией. Сочетание высокомерия, политических интриг, цензуры и непонятной непрозрачности, присущей работе в России, сговорилось изгнать Дурова из компании и, в конечном итоге, из России (у Mashable есть подробный график событий здесь).

Дуров теперь запускает Telegram, приложение для обмена сообщениями, в основе которого лежит шифрование, безопасность и конфиденциальность. По словам Дурова, около 62 миллионов человек пользуются им каждый месяц, отправляя 2 миллиарда сообщений каждый день.По его словам, это наиболее популярно в Узбекистане и Иране — странах, которые обычно не славятся своей защитой свободы слова.

Выступая перед журналистами на пресс-конференции в Хельсинки, Дуров сказал, что он извлек два важных урока из разгрома ВКонтакте.

Будьте глобальными

ВКонтакте — крупнейшая социальная сеть в России и некоторых частях бывшего Советского Союза, но практически отсутствует на Западе. (Это, пожалуй, самое известное в США, где осужденный за бомбардировку Бостонского марафона Джохар Царнаев сохранил свое присутствие в Интернете.)

В результате Дуров не смог просто закрыть бизнес в России и двигаться дальше. По его словам, с Telegram такой ситуации не возникнет. «Правительство Великобритании запросило у нас информацию о человеке, который, по их утверждениям, был сторонником [ИГИЛ], но мы не смогли ничего предоставить», потому что Telegram ничего не хранит, — сказал он.

«Это позволило нам отказаться от сотрудничества с британцами, оставаясь при этом послушными законам», — добавляет он. «Все может измениться в будущем, если они изменят закон.Но если это изменится, мы можем прекратить предоставлять услуги, которые мы предоставляем, на территории Соединенного Королевства ».

С другой стороны, закрытие VKontake в России из-за давления правительства было бы равносильно убийству компании. Более половины его пользователей проживают в России. Он утверждает, что главное — обеспечить, чтобы бизнес не зависел от одного места.

Но Россия, загадочно говорит он, «не самая плохая юрисдикция».

Будьте осторожны с акционерами

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

В то время компания оценивалась примерно в 2,2 миллиарда долларов. К 2014 году он продал свои скудные оставшиеся акции и вскоре официально ушел из фирмы. В Telegram Дуров говорит: «Я просто использую свои деньги».

Исправление: В более ранней версии этого поста говорилось, что пользователи Telegram отправляют 2 миллиона сообщений каждый день.Фактически они отправляют 2 миллиарда сообщений ежедневно. Это было исправлено.

Команды для разметки вики ВК. Разметка Wika для ВКонтакте. Редактирование фото на вики-разметке

На вопрос «Как создать меню для группы ВКонтакте» есть три основных варианта ответа: заказать у специалиста, создать с помощью онлайн-дизайнера или мастера, вникнуть в какие-то тонкости вопроса и все делать самому.

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

Итак, вот три пути создания меню:

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

Кстати, для тех, кто предпочитает получать информацию через видео, а не читать длинные тексты, есть видео:

Path # 1.Заказать Создание меню у специалиста-дизайнера

Преимущества этого метода — относительная скорость и минимальное участие с вашей стороны. Минусы — самая высокая цена и шанс получить красивое, но некорректное меню (основные ошибки мы подготовили при создании меню). Кроме того, нужно найти исполнителя. Здесь мы можем порекомендовать поискать его на сервисе KWORK.RU, в разделе «Дизайн-группы в сообществах».

Путь # 2. Использование онлайн-дизайнера

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

Путь № 3. Делай все сам

Преимущества этого пути очевидны: он бесплатный, и ты конвертируешь новые навыки. Минусы такие: нужны навыки и довольно долго (на первое время). Вот что вам понадобится:

• Чтобы уверенно пользоваться графическим редактором. Например, фотошоп. При оформлении меню нужно будет сначала сделать изображение правильных размеров (до пикселя, никакого «примерно»!), А потом правильно его обрезать (разбить на фрагменты)
• Уметь вникать в инструкцию и читать их внимательно
• Не сдавайтесь и не отчаивайтесь, если что-то не сработает с первого раза

Если вы думаете, что вам всем по плечу, то приступим.

Шаг №0. Общие сведения о том, как устроено меню

Меню для группы составляется из вики-страниц, создание которых поддерживает ВК. Wiki-страницы — это специальные страницы, которые можно создавать только публично. От обычных постов они отличаются тем, что могут использовать так называемую разметку Wiki. Эта разметка представляет собой специальный код, который преобразуется в дополнительные объекты форматирования. Чтобы было понятнее объясните. Например, в обычных сообщениях можно использовать только простой текст, а разметка вики позволяет выделять части текста жирным шрифтом или курсивом.То есть вводит дополнительные возможности дизайна. В частности, возможность размещать изображения, при нажатии на которые пользователь будет перенаправлен по ссылке. Именно эти дополнительные возможности форматирования используются для создания общедоступного меню ВКонтакте. Как именно мы расскажем ниже.

Шаг 1. Подготовительный этап

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

Итак, вы создали новую группу. Давайте теперь узнаем идентификатор (ID) вашей группы. ID группы — это ее уникальный номер ВКонтакте. Зайдите в свою группу и нажмите «записи сообщества» (если в группе нет записей, то вместо «записей сообщества» будет «нет записей»). Вы перейдете на новую страницу с адресом этого типа:

https://vk.com/wall Xxx ? Собственный = 1

Вместо Xxx У вас будет набор цифр (и только цифр!).Это идентификатор вашего сообщества. Например, в нашей тестовой группе это 154457305.

Теперь давайте создадим новую вики-страницу в группе. Для этого сделайте ссылку такого типа:

http://vk.com/pages?Oid=- ID_Group & p =. Navigation_strant

http://vk.com/pages?Oid=- 154457305 & p =. Меню

Откройте полученную ссылку в браузере (скопируйте ее в адресную строку браузера и перейдите по адресу).Все, вы создали вики-страницу с заголовком «Меню» (если, конечно, не указали «Меню» в качестве имени страницы в ссылке). Вы должны увидеть такой текст: «Страница меню пуста. Заполните содержимое». В правом верхнем углу есть значок «карандаш» (). Щелкните по нему, чтобы перейти к редактированию страницы.

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

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

http://vk.com/page- ID_Group _ Xxx ? ACT = Edit & section = Edit

Часть адреса перед знаком «?» — Это адрес вашей вики-страницы. Запишите где-нибудь: В ВК нет возможности увидеть список своих вики и ссылки на них. Чтобы перейти к желаемой, вам необходимо знать ее адрес или снова воспользоваться ссылкой на Wiki-страницу.При использовании последнего способа имейте в виду, что страницы, если они уже существуют, не воссоздаются.

Шаг №2. Делаем простое меню для VKontakte Group

Итак, у нас есть вики «Меню». Переключитесь в режим разметки редактора и добавьте следующий код:

Нажмите кнопку «Предварительный просмотр», расположенную под редактором. Вы должны увидеть список из трех ссылок. Первые два являются внешними и ведут на главные страницы «Яндекса» и Google соответственно. Третья ссылка внутренняя. Она ведет в Паблик ВК с ID «1» (это официальная группа ВК для разработчиков).Если у вас в превью отображается код, а не ссылки (которые можно нажимать) — значит вы ввели код в режиме визуального редактирования , а не в режиме разметки. Будь осторожен!

Обращаем ваше внимание, что внешние ссылки на код Viki-VC оформляются одинарными скобками, а внутренние — двойными. В этом случае внутренние ссылки ВК указываются не как обычный адрес сайта, а как указатель на конкретный объект ВК. Например, указатель на группу имеет такую ​​запись:

club ID_Group

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

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

А теперь давайте разберемся, как и где можно использовать вики-страницы.

Шаг №3. Где можно разместить вики-страницы vkontakte

Основных мест два: вы можете создать сообщение со ссылкой на вики-страницу или разместить его в разделе «Материалы» вашего сообщества.

Начнем сначала. Начните добавлять новую запись на стене вашей группы. Сначала прикрепите к нему любую фотографию. Лучше сделать большую фотографию, ширина которой больше высоты. Затем вставьте ссылку на созданную запись на созданную вами вики-страницу с помощью простейшего меню. Именно ее мы попросили вас записать чуть раньше.Напомним, ссылка имеет такой вид ( у вас будут другие номера ):

http://vk.com/page-121237693_72827423.

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

Кликните по фото в фиксированном посте: появится ваша вики с простейшим меню группы.

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

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

Перейти к этой новинке. Нажмите на крик «Редактировать». В результате вы попадете в уже знакомый вам редактор Wiki-страниц. Единственное отличие — есть поле для ввода названия страницы. Измените его из «Свежих новостей» в «Меню2». В режиме режим редактирования изображения Введите следующий код:

«» «Версия меню для раздела» Материал «» «

[]

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

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

Мы узнали, что меню можно разместить в двух местах.Желательно сделать это и в виде фиксированной записи и в разделе «Материалы». Запомните два нюанса:

• Фиксированную запись увидят 98% ваших посетителей, а в раздел Материалы попадут только 25-40% самых любопытных, а также приверженцев старых пользователей вашей группы, знающих что там есть что-то полезное.
• Фиксированная запись с картинкой для вызова меню может быть дополнена текстом. Так вы не потеряете эту особенность закрепленной записи.Но и перебарщивать тоже не стоит: чем больше текста, тем ниже ссылка на открытие вашего меню.

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

Кстати. Вы можете делать ссылки с одних вики-страниц на другие. Это работает так: пользователь открывает (например, используя ссылку на изображение в сообщении) первую вики-страницу. И у него есть ссылки на другие вики-страницы. При нажатии на эти ссылки откроется соответствующая вики-страница. Таким образом можно создавать довольно сложные и многоуровневые меню и, например, инструкции. Однако мы не советуем вам слишком сильно заниматься этим без необходимости.

Шаг №4. Как сделать меню в группе ВКонтакте.Graphic

Итак, основные принципы усвоены. Перейдем к оформлению графического меню. Сразу оговорюсь, что нас устроит простое меню: вертикальный ряд кнопок со ссылками. Но не спешите говорить «Нет, я хотел меню суперустановки» и закрывайте это руководство. Теперь объясните почему.

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

А во-вторых, как мы уже говорили, маркировка Wiki-VK была введена в то время, когда мало кто слышал о мобильных приложениях. Наше условно «простое» меню будет одинаково корректно и качественно работать везде: в браузерной версии ВКонтакте, в мобильных браузерах и, наконец, в приложении. Многие «сложные» меню этим похвастаться не могут. Более того, в большинстве случаев «простое» меню будет работать лучше «сложного», которое «разваливается» при просмотре в официальном приложении ВКонтакте. Чаще всего будет лучше остановиться на таком варианте меню.Да, есть вполне подходящие реализации меню. Вы можете поэкспериментировать с ними. Но наш опыт показывает, что они практически не добавляют реальной выгоды в виде конверсий, покупок и репутации. А проблемы — вполне могут.

Наше тестовое меню будет выглядеть так:

Всего две кнопки. Первый будет вести на главную страницу Яндекса, а второй — в группу VKontakte Team.

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

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

• Для начала нужно нарисовать меню.Его ширина должна быть строго , 600px, (пикселей). По высоте рекомендуется делать меню не более 900 пикселей. Результат лучше всего сохранить в формате PNG, на крайний случай — JPG. Воспользуйтесь знакомыми и удобными инструментами для рисования (например, Photoshop или GIMP). Результат здесь на 95% зависит от ваших творческих и технических навыков. Даже если вы совсем не умеете пользоваться графическими редакторами — не отчаивайтесь. Навыков хватит максимум на пару часов. В Интернете огромное количество справочной и обучающей информации.Кроме того, возможность хотя бы использовать графический редактор очень и очень полезна для публичных администраторов. Зря не потратишь.
• Далее рисунок из меню нарезается горизонтальными полосами. Сделать это можно любым удобным для вас способом: от обычного множества фотошопов до различных онлайн-сервисов. Если у вас нет идей, как это делается — просто задайте вопрос любимой поисковой системе. Не будем подробно описывать техническую часть процесса резки: способов десятки, одни подходят для одних пользователей, а для других не подходят.При резке необходимо соблюдать одно простое правило: высота одной полосы не должна быть меньше 60px . В противном случае у вас могут возникнуть проблемы с отображением меню в приложении и в мобильных браузерах: т. Н. «Белые полосы» между изображениями.
• Нарезанные «полоски» загружаются в альбом или альбом группы на странице администратора группы. Мы рекомендуем второй вариант. В любом случае альбом с нарезанными частями меню должен быть в открытом доступе .В противном случае те пользователи, для которых недоступны изображения из альбома, не увидят ваше меню!
• Компилируется код вики-разметки, который вставляется на нужную вики-страницу.
• В группе размещен фиксированный пост со ссылкой на вики-страницу с меню. О том, как делается такой пост. Подробно мы писали выше. Кроме того, код (с небольшими изменениями) можно добавить на корневую вики-страницу (пункт справа от пункта «Информация» появляется при разрешении раздела «Материалы».Подробнее — см. Выше).

А теперь займемся загрузкой частей меню и кода Wiki подробнее. Мы подготовили для вас. Имеет два каталога: «1» и «2». Первый содержит части самого примитивного и простого варианта слайсера для нашего меню — на две части. Скачайте архив, скачайте изображения (1.png и 2.png) из каталога «1» в новый альбом (дома или в группе).

У нас две «полоски»: верхняя (с кнопкой «Яндекс») и нижняя (с кнопкой «ВКонтакте»).Оба являются эталонными изображениями. В разметке вики это делается с помощью кода этого типа:

«ССЫЛКА» — Это целевая ссылка. Например, https://yandex.ru/. Помимо обычного внешнего вида Эти ссылки могут быть указанием на объект ВКонтакте: пост, страницу пользователя или группу. Например, после нажатия кнопки переход в Сообщество ВКонтакте можно указать как его адрес (https://vk.com/team) и указатель на него (Club22822305). В принципе разницы не будет.Внешние ссылки (те, которых нет на ресурсах ВК) у нас рекомендуем вырезать через

Для оформления группы в социальной сети есть удобная и простая вики-разметка Для группы в контакте. Он действует аналогично HTML-коду, но интуитивно проще и понятнее для простого пользователя, владельца группы. Такая разметка используется в Википедии (свободной энциклопедии), и отсюда ее название ушло. Разметка
Wiki может быть оформлена группой своеобразно или традиционно, пока лезть в мусор HTML, где можно неделями застрять, не надо.Маркировку вики настолько легко изучить, что она покорит даже самого неопытного пользователя всего за один час. Эта разметка отлично справляется с форматированием рисунка и текста, анкеров, спойлеров, ссылок, графических таблиц и других элементов, способных качественно изменить внешний вид любой группы.

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

Wiki отлично подходит для работы с фотографиями или любыми изображениями, но при соблюдении нескольких уловок. Изображение, вставленное с помощью вики-разметки, появится только в том случае, если оно присутствует в альбоме. Простыми манипуляциями фотография (например: Photo55775_55775) сразу появится на странице. Для этого нужно скопировать его адрес и добавить к нему двойные квадратные скобки.

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

Для этого нужно применить такую ​​вики-разметку — []. Слово «Параметры» можно заменить другими значениями, каждое из которых изменит вид фотографии. А значения следующие:

• NOBORDER сделает картину без рамки;
• nopadding соединяет между собой изображения, удаляя промежутки между ними;
• plain сделает ссылку с картинки;
• NNNPX позволит вам изменить размер картинки;
Коробка
• откроется в новом окне.

Работа с таблицами с вики-разметкой?

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

• (| Без этого начального символа невозможно создать таблицу;
• | + необязательный символ, при котором стол расположен по центру
• | — С этого символа начинается новая строка;
• | Этот символ отвечает за прозрачность ячейки;
• ! С помощью этого символа можно сделать ячейку темного цвета;
• |) Этот необязательный символ завершает таблицу.

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

{|
| —
|

[[Пазлы]]

[[Квесты]]

[[Аркады]]

[[Обсуждения игр]]

Ссылки с wiki

В контакте для регистрации группы Wiki-разметки можно использовать три типа ссылок.

• Ссылка в виде картинок: []

Работа с графическим меню?

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

• Вырезать в редакторе необходимую графику и «Сохранить для Интернета»;
• Скачать графику как обычные картинки, без использования Flash, чтобы не ухудшать их качество;
• Собрать меню с помощью специального тега «nopadding»;
• Зарегистрируйте внимательно все ссылки;
• Красивое меню для вашей развлекательной группы готово.

Несколько секретов разметки вики

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

• Допустимая ширина рисунка не более 610px;
• При изменении ширины автоматически изменяется высота изображения;
• Фигуры меньше 134px меняют качество в худшую сторону;
• В строке разметки может присутствовать только 7 пунктов списка;
• Более 18 незакрытых тегов на одной странице приведут к искажениям и ошибкам.

Приложения программистов для разметки Wiki

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

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

Что такое Маркировка Вики ВКонтакте?

Wiki-разметка — это специальный язык для дизайна информационных веб-страниц в созданной вами группе. Разметка Wika считается ценным инструментом, поскольку с ее помощью можно создавать меню, теги, таблицы, дополнительно организовывать структуру элементов навигации, перемещать объекты в группе, формировать текст.

Что такое Wiki-разметка?

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

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

Групповое оформление с помощью вики-разметки

Хочу сразу отметить, что разметка системы редактирования Wiki очень похожа на HTML-верстку.

Главное преимущество разметки Wiki в том, что ее может изучить каждый, даже не очень «продвинутый» сетевой пользователь.

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

Как выучить язык вики-разметки и разобраться во всех мелочах?

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

Как создавать страницы

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

Страница формируется автоматически при указании текста:
[[Название статьи]] или [[Название статьи | Текст для справки]]

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

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

Хотите получить место, где можно разместить примеры работ, вести блог и рекламировать свои услуги? Обычно для этих целей создают сайт. Но есть другой, более простой выход — группа ВКонтакте с Wiki-разметкой. В этой статье я объясню, как его создать.

Практика и еще раз практики! Опишу процесс на примере реальной группы — футуристического копирайтинга.

Работаю с новым дизайном ВКонтакте. Старое скоро уйдет — поэтому рассматривать не буду. В любом случае процесс не сильно отличается.

Первое, что вам нужно сделать, это создать новую группу:

• Откройте раздел «Группы».
• Щелкните по кнопке «Создать сообщество».

Создать новое сообщество

• Введите заголовок. Уточняйте кого угодно — его можно в любой момент изменить максимально.
• Теперь выберите вид сообщества: группу или публичную страницу. Разница описана выше.

Группа или публичная страница?

• Нажмите «Создать сообщество».
• Здесь вы можете изменить указанное имя и выбрать тип страницы (его также можно изменить в любой момент).
• Не забудьте принять Условия использования.

Выбрать тип страницы

Ура, Сообщество создано!

Редактирование информации сообщества

Сразу после создания новой группы вы попадете на страницу «Редактирование информации».Что там:

• Имя . Думаю, объяснять не стоит. Единственное обязательное поле.
• Описание сообщества . Напишите несколько слов о себе и своей группе. Не стоит писать — никто не прочитает.

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

Настройки неподвижного изображения

Когда закончите с настройками — нажмите «Сохранить».

Группа создана

Теперь вы можете скачать основной образ.Нажмите «Загрузить фото» справа.

Давай прогоним страницу за страницей

Укажите путь на изображении. Разместите свой логотип, фото или нарисуйте (закажите) что-нибудь особенное. С помощью рамки выделите область, которая станет главной картинкой сообщества.

Выделите желаемую область рамкой

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

Размер круга также можно изменить

Вот что мы сделали.Страница стала привлекательной на 35%!

Красота!

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

На этом подготовительные работы заканчиваются и начинается самое сложное — вики-разметка.

Как узнать ID группы

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

Для скрипта вам нужно будет узнать ID вашей группы. Если вы не меняли его адрес — то это цифры в адресной строке, которые идут после слова «Клуб». Я уже поменял, поэтому у меня такой простой способ скрыть ID недоступен.

Щелкните любой пост на стене, чтобы открыть его. Если нет ничего — напишите что-нибудь. Что-нибудь.

Создайте любой пост и щелкните по нему.

Новые данные появятся в адресной строке. Что находится посередине между «Wall-» и «_» (нижнее подчеркивание) — это идентификатор вашей страницы. Сохраните его где-нибудь.

Мой ID — 124301131

Создание вики-страницы

Теперь вы можете использовать скрипт для создания новых страниц с вики-разметкой.

http://vk.com/pages?Oid=-124301131&p=dima

Скопируйте его и вставьте браузером в адресную строку. Вместо моего ID укажите свой.И вместо слова «имя» напишите название создаваемой страницы. Можно использовать русский язык, пробелы, цифры. Затем нажмите ENTER, чтобы перейти по ссылке и запустить скрипт.

Будьте осторожны! Название вики-страниц не может быть изменено. Если допустили опечатки — придётся создать новую.

Сначала сделаем главную страницу. Я назвал ее «Меню».

Скопируйте скрипт в адресную строку

Щелкните «Заполнить содержимое».

Редактор открытых страниц

Вот редактор страниц.Но нам еще не нужна, но ссылка. Посмотрите на адресную строку. Вам нужно все, что находится перед словами «? Act = edit & section = edit».

Обязательно сохраните идентификатор страницы и ссылку на него.

Это очень важный момент. Новая страница еще не исправлена ​​и никакие ссылки на нее не ведут. Если закроете — проиграете.

Советую создать отдельный файл, в котором будет храниться структура вашей группы. Возьмите его в виде «Заголовок — ссылка — ID страницы».Идентификатор: Page-124301131_50771728. Он вам понадобится.

Вот, например, «подслушал» состав моей группы. Меню и еще 2 страницы. Это тоже закинуло скрипт для создания новых страниц. Чтобы его было легко найти.

Сохраните все ссылки и идентификаторы в отдельном файле, чтобы не потерять

Что делать, если вы сохранили только идентификатор страницы, но забыли о ссылках? Введите адрес «https://vk.com/page-124301131_50771728» в адресную строку. Естественно подставьте ID своей страницы.

Исправление вики-страниц в группе

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

Просто скопируйте ссылку на страницу поста

Кнопка останется, даже если вы удалите текстовую ссылку

Загрузите изображение. Максимальная ширина стены — 510 пикселей. Максимальная высота также 510 пикселей. В рамках этих значений вы можете делать все, что угодно.Квадрат 510х510 — самый большой баннер, который вы можете сделать. Это верно для любых постов, а не только для фиксированных.

Я сделал это

Щелкните Отправить. Теперь нажмите на значок в виде трех точек в правом верхнем углу поста. И нажмите «Стоп».

Теперь закрепите столб со ссылкой.

Таким же образом можно делать анонсы статей в своем Wiki-блоге. Только исправлять их не надо.

Обновите страницу.Информация о группе исчезла. Вместо этого вместо него появился пост со ссылкой и изображением.

Нажмите на картинку, чтобы открыть прикрепленную вики-страницу

Если нажать на картинку или по кнопке «Просмотр» — откроется Wiki-страница.

Пока она пуста

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

Вики-страницы ВКонтакте

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

Я покажу, как применить знания из этой группы на практике. Будем следить за страницей «Обо мне». Для начала создайте его с помощью скрипта, запишите ID и перейдите на страницу редактирования.

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

Перейти в режим маркировки Wika

Что должно быть на странице «Обо мне»? Некоторая информация, список преимуществ перед другими копировальными аппаратами, возможно, фото. Давай сделаем это.

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

Теперь добавим фото. Щелкните значок в виде камеры и укажите путь к изображению.

Щелкните значок в виде камеры на панели инструментов

Вот наше фото

Я хочу, чтобы текст обтекал картинку, поэтому я добавлю для него параметр «Влево». И я не хочу, чтобы люди открывали полную версию фото, поэтому добавил атрибут Nolink. Подробнее об атрибутах в группе, на которую я давал ссылку выше.

Добавьте параметры «NOLINK» и «LEFT»

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

Не очень красиво

Уменьшим фото. Просто напишите желаемый размер в режиме разметки. Я указал значения вдвое меньшие.

Укажите нужные размеры в режиме вики-разметки

Теперь разместите список. Выделите нужную строку и щелкните значок списка.

Эта кнопка устанавливает тег *, который создает элемент списка

Перед ним появляется символ «*». Это тег списка.Вы можете поставить его вручную или воспользоваться кнопкой на панели инструментов. Отметьте остальные элементы списка.

Красивее

Теперь нужно выделить заголовки. На панели инструментов есть кнопки для создания заголовков h2-h4.

Используйте кнопки или вставьте теги вручную

«Обо мне» Сделаю рубрику первого уровня. А фраза перед списком — третий уровень.

Почти готово

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

Добавить пустую строку

Если вам нужно пропустить только 1 строку —
Для этого вам не нужно. Используется, если вы хотите получить подряд 2 и более пустых строки.

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

Комбинация CTRL + B также работает

Вот что в итоге и произошло.

На мой взгляд неплохо

Регистрационное портфолио Вконтакте

Теперь сделайте удобное портфолио для клиентов. Я вижу 2 пути:

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

Например, я выполню в портфолио 2 работы — каждый раз.

Альбом-портфолио

Чтобы создать альбом, откройте меню «Управление сообществом».

Перейти в настройки сообщества

Здесь поставьте галочку напротив пункта «Фотоальбомы». Теперь вы можете их создавать. Сохраните изменения.

Добавить блок с фотоальбомами

На странице сообщества нажмите кнопку «Добавить фото» и укажите путь к нужным файлам.

Добавьте скриншоты наших работ в альбом

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

Зачем? Потому что в противном случае текст на изображении будет слишком маленьким и не будет прочитан. Смысла от такого портфолио немного. И так я разбил его на кучу отдельных фрагментов нормального размера и добавлю в отдельный альбом ВКонтакте.

Получил 4 куска текста и миниатюру. Наведите курсор на любое изображение и щелкните значок «Переместить фото».

Перенести новые изображения в новый альбом

Создайте новый альбом.

Нажмите «В новом альбоме»

Дайте альбому то же имя, что было у статьи. Чтобы его было легко найти. Описание не нужно. Также поставьте галочки напротив пунктов «Фотографии могут добавлять только редакторы и администраторы» и «Отключить комментарии к альбому». Нажмите «Создать альбом и перенести».

Дайте название альбому и запретите остальным пользователям его изменять.

Аналогично перенесите остальные скриншоты. Только теперь не нужно создавать новый альбом — он уже есть.

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

Вот что мы в итоге сделали.

Альбом с фрагментами текста

Для последующих альбомов такого геморроя с переносом не будет. Щелкните «Фотоальбомы».

Открыть список альбомов вашей группы

Теперь нажмите кнопку «Создать альбом» в правом верхнем углу. Дайте ему имя и загрузите новую порцию снимков экрана с помощью кнопки «Добавить фото».

Создать альбом для нового текста в портфолио

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

2 альбома со скриншотами

Создайте страницу «Портфолио» и запишите ее идентификатор. Работы по нему размещать не будем — только названия, миниатюры и краткие описания.

Щелкните значок «Добавить фото».

Добавить новое изображение на страницу

Щелкните «Выбрать из фотографий сообщества».Откройте нужный альбом и выберите миниатюру.

Найдите миниатюру, добавленную в альбом

В новой вкладке откройте альбом или первый в нем снимок экрана. И копируем по ссылке (целиком). Вам нужно вставить его в фотометку между вертикальной чертой | и закрывающие квадратные скобки]].

Вставьте ссылку между символами | и]]

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

Портфолио Страница

Ну тут все намного проще. Создайте новую вики-страницу и не забудьте записать ее ID. Щелкните значок «Добавить фото» и загрузите снимок экрана с текстом, предварительно нарезанным на мелкие кусочки. В идеале 1 изображение — это 1 абзац.

Зачем? Потому что ВКонтакте довольно сжимает изображения. Если скачать весь скриншот, а потом вырастить на всю страницу — качество будет омерзительным. Мелкие осколки не так сильно пострадают.

Теперь выключите режим разметки вики (если он включен).

Вернуться в стандартный режим для просмотра результата

Неплохо, но этого будет мало. Щелкните первое изображение. В открывшихся настройках выставляем ширину (левая ячейка) — 607 пикселей. Это максимально допустимый размер изображения на странице. Высота изменится автоматически.

Установите ширину картинки — 607 пикселей,

Вот что случилось. Таким же образом увеличиваем все остальные фрагменты текста.

Первый фрагмент стал значительно больше

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

Полный скриншот текста на вики-странице

Наконец, нам понадобится ID записанных вами страниц. Откройте страницу своего портфолио.

Загрузите на него миниатюру (из созданного альбома или с компьютера). Теперь вставьте идентификатор страницы с текстом между закрывающими квадратными скобками]] и вертикальным элементом |.

Копировать идентификатор страницы с текстом между символами | и]]

Собственно, все.Теперь при нажатии на миниатюру посетитель перейдет к тексту с текстом.

2 Артикулы наших миниатюр

Оформление списка работ

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

Добавьте информацию о каждом задании

Оформление страницы «Услуги и цены»

У нас уже есть страничка «О себе» и красивое портфолио.Пожалуй, пора показать покупателям ценник. Думаю, мы разместим его в виде таблицы. Просто и понятно. Создайте новую вики-страницу, сохраните ID — и поехали.

Подробно про все бирки, которые нужны при сервировке стола, можете прочитать

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

Вот несколько примеров, чтобы все понять, что это такое.

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

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

Объясняю на пальцах. Паблик — Это блог кое-что сравните. Лента новостей. Другими словами, мы рассказываем нашим подписчикам о некоторых вещах, и они не смогут написать на стене нашего сообщества.Максимум — комментарий.

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

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

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

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

Довольного моря, начинаем воплощать идею жизни!

Создание группы

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

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

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

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

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

Все. Группа создана!

Теперь можно приступить к разложению.

Регистрация группы ВКонтакте

Этот этап можно разделить на 2 части: графическую и техническую. Для работы нам понадобится шаблон для создания группового аватара и меню, а также немного фантазии и базовые фото фотошопа (это Adobe Photoshop).

Шаблон разметки

Какой шаблон от себя и что это вообще такое? Шаблон представляет собой нечто вроде пустого. В данном случае в формате * .psd мы отметили области для меню и группы аватарок.

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

Для наглядности приведу пример.

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

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

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

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

На левом фрагменте (там, где надпись «Меню») тоже можно добавить несколько триггеров.В этом случае я решил обойтись без них. Все. Дизайн аватара готов. Нажимаем в Photoshop SHIFT + Ctrl + Alt + S разрушающие горячие клавиши и сохраняем наши фрагменты в папку на жестком диске.

Первый этап работы с графикой завершен. Вернуться к контакту.

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

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

Добавьте изображение.Указываем поля и выбираем эскиз. Здесь все просто и проблем возникнуть не должно.

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

Эти числа после «? Gid =» — это ID желаемой группы.Вставляем полученное значение в форму скрипта и пишем имя страницы, которую хотим создать. В этом случае я вожу «Меню».

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

Если все сделано правильно, откроется эта страница.

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

Написал «Меню» и моя страничка после сохранения стала выглядеть вот так.

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

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

Щелкните «Отправить». После этого нажмите на время отправки сообщения и выберите там среди всех опций пункт «Безопасность». Обновляем страницу (клавиша F5 на клавиатуре) и, если все сделано правильно, получаем первый результат: группа получила аватар и ссылку для перехода в раздел меню.

Wiki-разметка меню группы ВКонтакте

Теперь займемся непосредственно самим меню. Снова заходим в Photoshop и создаем дизайн для нашего меню. При разработке интерфейса нужно помнить о людях, которые будут заходить в ВК через приложение с мобильных телефонов. Другими словами, у нас не должно быть мелких элементов и, тем более, нужно постараться сделать все максимально понятным. Чтобы не пришлось гадать, как здесь все устроено и куда нажимать… и просто ткните в нужный пункт и изучите нужную информацию.

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

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

Разрезаем изображение на фрагменты и сохраняем их.

Все. Пришло время финального аккорда — собираем меню уже в самой группе.

Для этого возвращаемся на главную страницу группы (куда ведет в меню лента и наша ссылка-картинка). Нажмите на изображение меню и попадете на ту же страницу, которая ранее была создана для меню.

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

Далее переходим в режим Wiki-разметки (под кнопкой закрытия в правом верхнем углу страницы рисуется такая рамка с внутренней). Когда желаемый режим активирован, эта кнопка отображается серым цветом.

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

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

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

В моем случае код меню следующий.

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

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

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

После этого вставьте ссылки на новые страницы в код вики-кода на новые страницы в виде страницы 102302049_51013384, где первое число — это идентификатор группы, а второе — номер страницы. Хотя это вообще не важно. Ведь нам просто нужно скопировать этот фрагмент URL и вставить в разметку.

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

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

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

Шаблон: серия Infobox / документ — Liquipedia Age of Empires Wiki

Организатор:

Июль
Восторг

Информационное окно — одна из стандартных функций любой страницы Liquipedia, и она ничем не отличается от серии турниров. Этот шаблон предназначен для предоставления базовой информации о серии и должен располагаться до начала текста статьи, но после других шаблонов, таких как вкладки или NavBoxes.Ниже приводится объяснение кода и некоторые шаблоны, которые вы можете использовать на странице серии.

Параметры [править]

Пример [править]

Приведенный ниже код создает информационное окно на этой странице.

 {{Серия Infobox
| name = Серия турниров Liquipedia
| изображение =
| организатор = Julmust
| organer2 = Восторг
| спонсор = [https://www.liquiddota.com/ Liquid Dota]
| спонсор2 = [https://www.twitch.tv/team/teamliquid Twitch]
| web = http: //www.teamliquidpro.com/
| twitter = teamliquid
| facebook = teamliquid
}}
 

Шаблоны копирования и вставки [править]

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

 {{Серия Infobox
| имя =
| изображение =
| организатор =
| страна =
| спонсор =
| спонсор2 =
| сеть =
| twitter =
| facebook =
}}
 

 {{Серия Infobox
| имя =
| изображение =
| caption =
| организатор =
| организатор2 =
| организатор3 =
| организатор4 =
| страна =
| город =
| спонсор =
| спонсор2 =
| спонсор3 =
| спонсор4 =
| спонсор5 =
| спонсор6 =
| спонсор7 =
| спонсор8 =
| спонсор9 =
| сеть =
| twitter =
| facebook =
| weibo =
| tencent =
| vk =
| instagram =
| twitch =
| twitch3 =
| twitch4 =
| twitch5 =
| twitch5 =
| поток =
| youtube =
| youtube2 =
| youtube3 =
| youtube4 =
| youtube5 =
| Reddit =
}}
 

В.1. Сторонние библиотеки · ololoepepe / ololord.js Wiki · GitHub

ololord.js использует следующие сторонние библиотеки JavaScript:

• Promise-polyfill Легкий полифил ES6 Promise для браузера и узла. Соответствует A +. Ссылка.
• doT.js Самый быстрый и лаконичный механизм шаблонов javascript для Node.js и браузеров. Ссылка.
• merge Используется для объединения нескольких объектов в один объект. Ссылка.
• uuid RFC-совместимый UUID lib. Ссылка.
• Moment.js Библиотека для анализа, проверки, управления и отображения дат. Ссылка.
• JSZip Библиотека для создания, чтения и редактирования файлов .zip с прекрасным и простым API. Ссылка. Плюс надстройка jszip-utils . Ссылка.
• FileSaver HTML5 saveAs () реализация FileSaver. Ссылка.
• crypto-js Сборник стандартных и безопасных криптографических алгоритмов.Используется только часть SHA-1. Ссылка. Примечание: Доступно только на страницах форума / темы / каталога / архива.
• CodeMirror Универсальный текстовый редактор. Используется только разметка JavaScript и CSS. Ссылка. Примечание: Доступно, только если включена подсветка пользовательского JS / CSS (по умолчанию она отключена).
• React Библиотека для создания пользовательских интерфейсов. Используется для Буквально Canvas . Используется версия с аддонами. Ссылка. Примечание: Доступно, только если включено рисование (по умолчанию).
• Буквально Canvas Расширяемый виджет рисования HTML5 с открытым исходным кодом. Ссылка. Примечание: Доступно, только если включено рисование (по умолчанию).
• Underscore.js Библиотека служебных программ для JavaScript, которая обеспечивает поддержку обычных функциональных подозреваемых без расширения каких-либо основных объектов JavaScript. Ссылка.
• mobile-detect.js Обнаружение устройства. Свободный перенос Mobile-Detect на JavaScript. Ссылка.
• SockJS Библиотека JavaScript браузера, которая предоставляет объект, подобный WebSocket.Ссылка.
• jQuery v1.11.3. Плюс следующие плагины:

• isInViewport Ультралегкий плагин jQuery, который сообщает вам, находится ли элемент в области просмотра, но с изюминкой. Ссылка.
• jQuery UI Кураторский набор взаимодействий, эффектов, виджетов и тем пользовательского интерфейса, созданный на основе jQuery. Ссылка.
• Ручка jQuery Хороший, обратно совместимый, сенсорный, набор jQuery. Ссылка. Примечание: Доступно только на страницах форума / темы / каталога / архива.
• jQuery DateTimePicker плагин jQuery выберите дату и время. Ссылка. Примечание: Доступно, только если пользователь вошел в систему как модератор.
• jQuiteLight jQuery Подключаемый модуль для интеллектуального поиска по запросу. Ссылка. Примечание: Доступно только на странице /search.html .
• jQueryFileTree Настраиваемый плагин для браузера файлов AJAX для jQuery. Ссылка.

API встраивания Twitter и Vkontakte и скрипты также доступны на страницах форума / треда / каталога / архива.

Примечание. jQuery использует версию обещаний, несовместимую с ES6. Метод $ .ajax () заключен в обещание, поэтому его необходимо использовать со стандартными методами .then () и .catch () . Вы можете использовать $ ._ ajax , если вам нужны обещания jQuery по умолчанию.