Конструктор wiki страниц вконтакте

Обновлено: 22.04.2024

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

Вики Постер - конструктор виджетов и wiki запись закреплена

Молодцы, но написали бы откуда подтягивается курс, как добавить переменные или интегрировать в общих красках с другим листингом через режим разработчика. Зачем столько пустого места справа? + По дефолту стоило написать, что курс в $ в шапке

Вики Постер - конструктор виджетов и wiki запись закреплена

Добавили в переменные курсы криптовалют

Что еще добавить?

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

Вики Постер - конструктор виджетов и wiki запись закреплена

Теперь вы можете добавить курс валют в ваше сообщество

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

А какие еще переменные вы бы хотели видеть в нашем конструкторе?

Ярослав Цивка

Вики Постер - конструктор виджетов и wiki запись закреплена

Ярослав Цивка ответил Нате

Вики Постер - конструктор виджетов и wiki запись закреплена

Мы обновились и запустили конструктор виджетов для сообществ вконтакте!

Алексей Кутсаманов

А что дает платная функция в виджете? Нет нигде описания.

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

Елена Ольхович

Вики Постер - конструктор виджетов и wiki запись закреплена

Полина Бакиева

Есть в этом редакторе ограничения — минимальная высота, соотношение сторон? Если сделать высокие узкие элементы, то будут разрывы. При большой ширине нужно соблюдать соотношение 2 к 1, высота меньше 27 (а лучше 31px) будет приводить к разрывам строк.

Всё ноги не доходят затестить самостоятельно ответ на эти вопросы

Ярослав Цивка ответил Сергею

Вики Постер - конструктор виджетов и wiki запись закреплена

Важное обновление на Вики Постер!

Теперь вы можете делать вики страницы с дизайном полноценного сайта, всего в несколько кликов! Загрузите картинку с дизайном вашей страницы, а все остальное сделает wikiposter! Все просто:

- Рисуем дизайн вики-страницы (или отдельного элемента страницы), в любом графическом редакторе (например photoshop) и сохраняем как обычную картинку;
Показать полностью.
- Загружаем картинку в блок "Нарезка";
- Проставляем ссылки в нужные участки картинки;
- Жмем "создать страницу".

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

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

Вики Постер - конструктор виджетов и wiki запись закреплена

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

А как на счет редактирования страниц?) Я сделал новые, и их нельзя редактировать. И желательно бы подумать о том, как удалять старые страницы. Спасибо

Вики Постер - конструктор виджетов и wiki запись закреплена

Добавили в переменные курсы криптовалют

Что еще добавить?

Вики Постер - конструктор виджетов и wiki запись закреплена

Теперь вы можете добавить курс валют в ваше сообщество

А какие еще переменные вы бы хотели видеть в нашем конструкторе?

Ярослав Цивка

Вики Постер - конструктор виджетов и wiki запись закреплена

Ярослав Цивка ответил Нате

Вики Постер - конструктор виджетов и wiki запись закреплена

Мы обновились и запустили конструктор виджетов для сообществ вконтакте!

Алексей Кутсаманов

А что дает платная функция в виджете? Нет нигде описания.

Елена Ольхович

Вики Постер - конструктор виджетов и wiki запись закреплена

Полина Бакиева

Всё ноги не доходят затестить самостоятельно ответ на эти вопросы

Ярослав Цивка ответил Сергею

Вики Постер - конструктор виджетов и wiki запись закреплена

Важное обновление на Вики Постер!

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

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

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

Что такое Wiki – разметка

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

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

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

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

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

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

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

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

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

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

Как создать вики пост Вконтакте

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

1. Создайте вики страницу, как это было описано ранее. Учтите, что название страницы - заголовок вашего поста. Именно заголовок проходит индексацию поисковыми системами в первую очередь.

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

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

Давайте рассмотри наиболее популярные параметры изображений, предусмотренные для вики-постов:

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

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

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

Создание таблиц с помощью вики

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

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

Наименование и последовательность расположения символов:

Как сделать вики меню Вконтакте

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

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

Выбираем необходимую фотографию или картинку и копируем её адрес. Допустим, пускай он будет следующий: photo14346_67691. Теперь необходимо заключить его в двойные скобки. Это должно выглядеть так: [[photo14346_67691]]. А если возникнет желание немного отредактировать качество, или чем-то дополнить? Тогда с этим нужно сделать следующее: нужно чтобы файл имел такой вид — [[photo14346_67691|options|text/link]]. Заместо трех последних надписей прописывается то, что нужно. Text — прописываем то, что нужно. Link в переводе с английского - «ссылка». Присутствует для того, чтобы машина посетителя знала свое направление. Options — здесь могут прописываться такие значения: Plain — ссылка на изображение оформлена в виде текста, в ней нет картинки. Noborder — стирается рамка, расположенная около фотографии. Box — картинка открывается в окне. Nolink — фото ссылка убирается. Nopadding — пробелы между картинками не отображаются. NNNxYYYpx или NNNpx — обозначают, какого размера будет картинка(пиксель).

Сегодня говорим о крутой альтернативе обычным постам в ВК – wiki-публикациях. Научим, как создавать вики-страницы, делать таблицы в вики-разметке Вконтакте. Для наших читателей — готовый алгоритм работы.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как работает вики-разметка

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

Ширина любой вики-страницы — 607px. Высота ограничивается только количеством знаков, всего их может быть около 16 000.

Вся вики-разметка держится на тегах, как и HTML. Есть одиночные теги (например,
— перенос строки) и парные (например, жирный текст).

Как работают типографские знаки в вики-разметке

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

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

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

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

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

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

Стандартный

Для группы. Зайдите в «Управление сообществом» → «Разделы» → «Материалы» и выберите пункт «Открытые» или «Ограниченные».

Как включить «Материалы» в группе

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

Искомое id группы — это все цифры после «gid=».

Теперь нужно ввести в адресную строку браузера такой код:

Вместо ХХХ подставляем id паблика, вместо «Нaзвание_страницы» — то название, которое вы придумали. В названии можно использовать кириллицу, латиницу и цифры. Специальные символы использовать не запрещено, но лучше не рисковать: из-за них у вас может пропасть возможность редактирования страницы. Вставляем все данные на нужные места, нажимаем Enter, и браузер откроет созданную страницу.

С помощью приложения

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

В этом руководстве мы возьмем для примера приложение «Мобивик». В ноябре 2017 года оно получило второй приз в программе ВКонтакте по поддержке стартапов (Start Fellows). Работает без установки и дополнительной регистрации в десктопной, мобильной версии ВКонтакте и в приложении для телефона (разработчик рекомендует использовать версии не ранее Android 5.1, iOS 9 и Windows Phone 8.1).

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

Как создать новую страницу с помощью приложения «Мобивик»

После этого вы получите 3 ссылки. Действуйте в зависимости от предпочтений: можно начать редактировать страницу в стандартном интерфейсе вики-разметки или в приложении «Мобивик».

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

Когда пользователь нажмет на него, он попадет в приложение «Мобивик», которое покажет аккуратную мобильную версию вашей страницы.

Слева — страница меню сообщества LIVE, открытая на мобильном,
справа — она же, но открытая через «Мобивик»

Как получить ссылку на вики-страницу

Как найти страницу, созданную ранее? Самый простой и надежный метод — заранее скопировать все адреса вики-страниц в отдельный файл, например, в Google Таблицах. Другой способ — через любое приложение для работы с вики-страницами. Например, зайдите в «Мобивик», выберите название сообщества и нужную страницу, кликните «Получить ссылку» и скопируйте адрес из пункта «Ссылка на вики-страницу».

Как сделать пост со ссылкой на вики-страницу

Текст

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

Текст по центру .

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

На одну страничку можно поместить около 16 тысяч знаков.

Ссылки

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

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

Чтобы вместо адреса был виден текст, добавляем название ссылки:

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

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

А вот пример кода картинки со ссылкой на внутренние страницы ( ХХХ заменить на соответствующее id).

[[photo12345_12345|idXXX]] — на профиль пользователя

[[photo12345_12345| clubXXX ]] — на главную страницу сообщества

[[photo12345_12345|page- XXX ]] — на другую вики-страницу

[[photo12345_12345| event XXX]] — на встречу ВКонтакте

Картинки

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

С помощью загрузчика в верхнем меню редактора.

С помощью кода. Загружаем картинку в отдельный альбом группы, открываем ее, в адресной строке видим длинный код наподобие этого

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

Что дальше? Отредактируйте выравнивание, обтекание текстом, размер, привяжите ссылку. Для этого напишите нужные параметры после вертикальной черты и через точку с запятой. Например, в таком коде мы задали для картинки размер 300x100px и обтекание текстом справа:

Видео

Для начала нужно загрузить видео в видеозаписи сообщества. После загрузки открыть видео и скопировать из адресной строки его id (выделено жирным).

Обрамляем это квадратными скобками и получаем такой код:

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

Но здесь мы получаем непропорциональную черную рамку вокруг видео:

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

Мы получили видео без черных рамок, оно будет воспроизводиться прямо на странице

Таблицы

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

При работе с таблицами можно использовать 4 тега: noborder (делает рамки таблицы невидимыми), nomargin (делает таблицу во всю ширину вики-страницы), nopadding (убирает отступы в ячейках) и fixed (позволяет создать таблицу фиксированных размеров). Сколько ячеек вы укажете в строке, столько столбцов будет в таблице.

Вот пример таблицы 2×2 без отступов сверху и снизу текста внутри ячеек:

Ширина первого столбца — 200px, ширина второго — 300px.

Вот что из этого получилось:

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

Как сделать вики-меню

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

Готовим обложку для меню. Можно взять любую подходящую картинку и нанести на нее текст. А можно нанять дизайнера, который отрисует вам красивые блоки и кнопки. У нас будет меню на 6 кнопок. Для этого нам нужна картинка, где будут обозначены эти кнопки. Определимся с ее размером.

При подготовке картинки для меню помните, что ширина вики-страницы — 607 px, Ширина картинки не должна быть больше, иначе изображение ужмется и потеряет в качестве. Для примера мы взяли изображение размером 510х300 px.

Режем эту картинку на 6 частей (по части на каждую кнопку). Это удобно делать в Adobe Photoshop инструментом «Раскройка». Если не хотите заморачиваться, воспользуйтесь, например, онлайн-сервисом IMGonline (режет картинки на равные части). Мы же сделали все в Photoshop.

При активном инструменте «Раскройка» кликаем правой кнопкой мыши по картинке и выбираем «Разделить фрагмент», указываем нужное количество фрагментов и нажимаем «ОК».

Как разрезать картинку в Photoshop

Чтобы сохранить все отдельные фрагменты, нажимаем «Файл» → «Экспортировать» → «Сохранить для Web». Полученные части картинки загружаем в отдельный альбом сообщества.

Наше меню будет оформлено в виде таблицы из 6 ячеек: в три строки и два столбца. Для этого мы нарезали картинку для меню на 6 равных частей размером 255×100 px. Такой же размер нужно будет проставить для каждой ячейки.

Создаем каркас для таблицы. Заходим в режим редактирования новой страницы и делаем таблицу. Открываем ее тегом <| и сразу задаем три важных параметра:

nopadding — разрешит картинкам соприкасаться
noborder — скроет видимые границы таблицы
fixed — позволит задать точные размеры ячеек.

Указываем фиксированную ширину ячеек — 255px 255px (два раза, потому что столбцов тоже два). Дальше устанавливаем места для начала новых строк тегом |- и новых ячеек (столбцов) тегом | . Закрываем таблицу тегом |> и получаем такой каркас:

Помещаем картинки в ячейки и задаем для них ссылки . Поочередно открываем в альбоме сообщества нужные части картинки, копируем из строки браузера их id ( photo-12345_12345) , заключаем в двойные квадратные скобки, прописываем размеры 255x100px и тег nopadding для склеивания картинок. После вертикальной черты назначаем ссылку для каждой кнопки. Получаем такой код.

Готово! Нажимаем «Сохранить страницу» — и получаем удобное меню для сообщества.

Как закрепить меню сообщества

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

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

Как сделать пост со ссылкой на меню в паблике

Как закрепить меню сообщества

Новый редактор статей ВКонтакте и вики-разметка

Администрация ВКонтакте объявила о запуске редактора статей 22 декабря 2017 года и позиционирует его как инструмент для публикации лонгридов.

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

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

Так выглядит интерфейс нового редактора статей ВКонтакте

Что запомнить о вики-разметке

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

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

Читайте также: