Администратору или модератору группы просто жизненно необходимо знать, как создать вики страницу ВКонтакте, ведь это один из самых простых способов красиво оформить пост и привлечь максимальное внимание к опубликованной информации. Фактически, для паблика вики страницы – огромный шаг вперед в борьбе за аудиторию.
Wiki разметка, ставшая основой для создания вики страницы, – особый язык верстки. Изначально он использовался для структуризации статей Википедии. Но наиболее популярным стал, когда выяснилось, что в ВКонтакте тоже можно его использовать.
Основы вики разметки настолько понятные, что изучить их может пользователь, понятия не владеющий навыками программирования.
Какие возможности дает знание wiki разметки?
Освоив способ форматирования текста легко:
Создание вики страницы ВКонтакте может стать источником дополнительного заработка. Вики разметка открыла просто бескрайние просторы для оформления постов, позволив воплощать самые смелые фантазии. А чем оригинальнее дизайн для группы, тем выше шанс, что ее заметят среди сотен конкурентов. Но прежде чем вы научитесь делать действительное стоящие странички, придется потратить время на обучение. Нанимать учителей или ходить на специализированные курсы не обязательно.
В интернете легко найти учебник для чайников по wiki разметке и изучить ее самостоятельно.
Для человека, в жизни не сталкивавшегося с подобным способом оформления контента, задача кажется невозможной. Но на самом деле ничего сверхсложного нет. Единожды изучив теорию, подтвердив знания недолгой практикой, не захочется пользоваться обычными записями. Они выглядят безликими на фоне ярких возможностей вики разметки.
Как сделать wiki страницу для паблика?
Текст «название страницы» замените на заголовок, который вы хотите видеть на вике-странице. А ID паблика узнаете, открыв любую запись со стены. В адресной строке вы увидите ссылку, в которой после букв id будут нужные вам цифры. Скопируйте их и приступайте к наполнению страницы.
Чтобы страничка отличалась от других, тщательно продумайте оформление. В этом вам помогут специальные теги:
Чтобы вики-странички были доступны другим пользователям, разместите ссылки на них на стене или в меню.
Добавить вики-меню в группу легко. Необходимо отредактировать раздел «Свежие новости». Он располагается в шапке сообщества и лучше всего подходит для наших целей. Как сделать красивое меню? Без wiki разметки не обойтись. Вам уже известно, что с ее помощью можно вставлять изображения в текст и анкорные ссылки. Если вам с легкостью удаются эти манипуляции, то вопросов с реализацией идеи возникнуть не должно.
Вики меню Вконтакте – красиво оформленный перечень ссылок на страницы с важной информацией.
Поэтому перед тем как делать само меню, следует задуматься, к чему именно вы хотите привлечь внимание пользователей. Определились? Тогда не мешкайте, ведь все знания необходимы для создания вики страниц и меню Вконтакте у вас уже есть.
Все чаще используются для ведения бизнеса, продажи товаров или услуг. Отличным инструментом, который упрощает работу с группой – это меню, созданное при помощи wiki-разметки.
В последнее время число пабликов, которые используют wiki-список, значительно выросло. Ведь это отличный способ придать группе более приятный и эстетичный вид, а также помогает участникам проще ориентироваться по всем разделам.
В данной статье мы расскажем Вам, как сделать вики страницу Вконтакте для группы, как в группе вк сделать меню, какие существуют виды, как создать и многое другое.
Создание кликабельной вики страницы осуществимо благодаря тому, что в текстовом редакторе ВК есть возможность использования wiki-разметки. Она позволяет при помощи специальных команд вставлять картинки, ссылки на них, видео и другие элементы.
Список позволяет создавать прямые ссылки на каждую категорию товаров/услуги или на различные разделы/обсуждения сообщества (например, портфолио, как заказать, о компании и т.д.). Любой пользователь сможет найти необходимую информацию нажатием всего лишь 1 кнопки.
Такое решение является навигатором для обычных посетителей и служит красивым и стильным оформлением сообщества. Это интерактивный инструмент, пользуясь которым, люди останутся довольны .
К сожалению, разработчики ВК еще не создали возможность размещать wiki-список на главной вике странице паблика (пока оно есть только в новой вкладке). Поэтому люди вынуждены изощряться и создавать отдельные посты, которые ведут на страницу с меню.
Функционал вики страницы и очень широкий. С его помощью Вы сможете сделать Ваше меню визуально приятным, хорошо читаемым и структурированным.
К сожалению, абсолютно все команды мы не сможем уместить в нашем материале, поэтому расскажем лишь о некоторых.
Осуществляется при помощи специальных кнопок.
В текстовом виде медиа файлы представляют собой: [].
Где media XXXX_YYYY – сам медиа-файл, options – различные настройки (для фото и видео), link–надпись, которая будет отображена при наведении курсора на фото/видео.
Для фото options бывают:
Для видео:
Добавьте знаки «==» в начале и конце заголовка. Пример смотрите на скриншоте:
Вы также можете использовать следующие параметры текста: курсив, жирный или серый, зачеркнутый или подчеркнутый, верхний или нижний индекс. Также есть возможность выравнивания текста по центру или правому краю. Ниже представлена таблица с командами:
Использование тега позволит красиво оформить чью-нибудь цитату.
Для нумерованного списка используйте символ «#» перед каждым новым пунктом.
Для маркированного списка аналогично предыдущему, только со знаком «*».
Для того, чтобы сделать отступ допишите перед словом знак «:». В зависимости от количества знаков отступ будет увеличиваться или уменьшаться.
Это ссылки на внутренние ресурсы соц. сети «ВКонтакте» (ссылку на человека, сообщество, обсуждение, приложение, страницу, видео и изображение). Их добавление осуществляется при помощи следующей конструкции: [].
С помощью вики страницы и разметки можно также создать и таблицу. Смотрите скриншот:
С его помощью можно сделать информацию, скрывающуюся или раскрывающуюся по одному щелчку. Хорошо подходит, если Вам необходимо сделать раздел с «Часто задаваемыми вопросами».
Создается спойлер при помощи конструкции:
{{Hider|Названиеспойлера
Текст
}}
И будет иметь следующий вид:
Таким образом, команды помогут сделать полноценный список со всеми элементами оформления.
Вики страницы во ВКонтакте можно разделить по разным критериям:
По отображению (зависят от используемой картинки):
Не зависимо от выбранного Вами типа, работают они все по одному принципу.
Также не бойтесь комбинировать эти типы. Например, можно сначала сделать графическую часть с кнопками (фон, стиль, дизайн), а после дополнить ее различной текстовой информацией (например, «Часто задаваемые вопросы», использовав спойлеры).
Менее популярным и простым является текстовый список на вики странице. Оно не содержит каких-либо изображений и кнопок. Это просто список анкорных ссылок.
Ниже представлена пошаговая инструкция, как сделать текстовый список для группы ВК:
Сделайте все необходимые пункты. Каждый новый пункт с новой строки. Здесь можно использовать различные команды, о которых мы говорили выше.
Для примера мы напишем простую и небольшую конструкцию:
Здесь мы использовали знаки «==» для выделения заголовка и знаки «*», чтобы выделить подпункты. В результате мы получили следующее:
Таким образом, проделав всего несколько шагов, мы получили вполне понятное wiki-меню, где каждый пункт позволит быстро перейти на нужную страницу.
Вы же сможете добавить что угодно, на что хватит фантазиии возможностей wiki-разметки.
Чтобы создать графическое меню, Вам необходимо иметь хотя бы базовые навыки работы с графическими редакторами (такие как, фотошоп, GIMP, различные приложения и т.д.). Если же Вы ими не обладаете, тогда мы можем посоветовать воспользоваться помощью профессионалов или ресурсами с готовыми шаблонами (подробнее читайте ниже).
Здесь же мы поговорим о том, как создать меню вики страницы самостоятельно. Ниже приведена пошаговая инструкция:
Все три картинки являются частью одной большой. Поэтому, когда мы будем создавать навигацию,данные изображения будут выглядеть как одна целая картинка с расположенными на ней кнопками.
В итоге мы получили вот такое меню:
Приложив немного усилий и смекалки, Вы сможете создать оригинальное оформление, которое будет вписываться в общий дизайн группы.
Чтобы созданное wiki-меню отображалось на главной странице сообщества, необходимо проделать следующие шаги:
Сначала добавьте изображение, смотри картинку ниже.
Теперь опубликуйте и закрепите пост.
Здесь Вам придется хорошо поработать над изображением. Ведь оно будет постоянно на виду.Также оно должно вписываться в общий дизайн паблика и говорить пользователям, что нажав, он попадет в меню.
Удаление wiki-меню не является сложной задачей. Достаточно просто перейти в «Управление сообществом», раздел «Разделы» и выключить материалы.
Важно помнить, что если Вы использовали закрепленный пост, то он останется. Поэтому его также необходимо будет удалить (или хотя бы убрать из закрепленных).
Также мы хотели бы представить Вашему вниманию сервисы, с помощью Вы сможете скачать готовые шаблоны либо создать новые всего за несколько кликов.
Также к готовым решениям можно отнести и найм профессионала. В этом случае Вам также не придется делать все самостоятельно, но придется заплатить.
Мы рассмотрели, что представляет собой wiki-меню в сообществах ВКонтакте. Научились создавать его и пользоваться различными командами.
Мы считаем, что меню еще не оценили по достоинству. Для большого количества людей эта «wiki-разметка» является чем-то сверхсложным и страшным. Они даже не хотят браться за это. Но на деле, как мы видим, все довольно просто.
Не бойтесь экспериментировать и будьте оригинальны!
Давайте поговорим о том, что такое вики и для чего придумана эта система. Ввёл данный термин Уорд Каннингем в 1995 году. В то же время появилась первая вики-среда. Кстати, слово «вики» было заимствовано у гавайцев, а означает оно «быстрый».
Термин «вики» имеет несколько значений:
Вы хотите знать, как делать вики-разметку "ВКонтакте"? Но перед тренировкой обязательно нужно просмотреть наш теоретический материал, в котором мы вам предлагаем все сведения о вики.
Сегодня самым известным вики-сайтом является огромная «Википедия». Второе место занимает многопользовательский проект «Викия», а за ним следуют различные небольшие энциклопедии. Но каким образом организованы такие ресурсы? Из каких компонентов они состоят? Давайте разберёмся в этом!
Электронная энциклопедия может иметь множество страниц, рубрик, разделов и т. п. Все эти составляющие сплетаются в одну общую сеть, образуют общее пространство. Создать такой огромный ресурс помогает особый инструмент - вики-разметка. Важно то, что с её помощью можно не только делать разного рода энциклопедии, но и оформлять всевозможные сообщества «ВКонтакте».
Вики-разметка - особые теги, позволяющие создать индивидуальное оформление для вашей группы. Данный инструмент даёт возможность присоединять к сообществу множество дополнительных страниц и ссылок. Таким образом, можно организовать небольшую энциклопедию внутри своего сообщества. По сути своей вики является аналогом HTML-языка, но такая разметка намного легче и проще собственного сородича.
Нам с вами предстоит узнать о том, что такое вики-разметка "ВКонтакте", а также научиться её использовать. Но сначала давайте посмотрим, какую пользу может принести данный инструмент для "ВК".
Этот вид разметки позволяет создавать оригинальное меню, метки, таблички, а также добавлять новые навигационные элементы. Таким образом, вы должны придумать красивое неповторимое оформление, которое выделит ваше сообщество из множества конкурентов.
Важно! Перед тем, как менять дизайн группы, научитесь пользоваться её составными элементами. К ним относятся «Видео», «Фотографии», «Стена» и другое. Необходимо также подбирать интересную и полезную информацию, иначе ваше сообщество не сможет привлекать и удерживать новых подписчиков.
Мы хотим выяснить, как сделать вики-разметку "ВКонтакте". Но для начала посмотрим, чем же так хорош этот инструмент.
Во-первых, вики намного легче HTML-языка. Это значит, что любой желающий без проблем сможет освоить её. Вторым преимуществом является то, что вики-разметка сохраняет все изменения, которые вы проводили на различных страничках. Вы можете в любой момент сравнить все варианты одного и того же материала и выбрать лучший.
Для того чтобы стать профессионалом вики-разметки, надо потратить много времени. Однако кое-что надо знать при первых шагах в данной системе.
К примеру, картинки с размером, меньшим 131 пикселя, становятся некачественными. Одна страничка должна вмещать до 17 тегов, а строка - не более 8 компонентов. Если вы проставили ширину рисунка, высота его изменится самостоятельно с учётом всех пропорций. отвечает за создание списков.
Для того чтобы создать свежую страницу в своём сообществе, достаточно указать в тексте ссылку на новую статью. Кроме того, дополнительные странички появляются сразу же после набора нового текстового материала.
За ввод ссылок в вики-разметке отвечают вот такие скобочки []. Символы внутри этих скобок обязательно станут ссылкой, перейдя по которой, вы сразу же попадёте на новую страничку. Теперь её надо наполнить и отредактировать. Новая страница готова! Вики-разметка "ВКонтакте" позволяет создавать множество таких страниц. Результатом может стать миниатюрный сайт внутри вашей группы.
Обратите внимание на то, что красиво оформленный текст имеет особую важность. Это удобно для чтения и восприятия. Обязательно проработайте заголовки, выравнивание, начертания букв и т. п. Для каждого вида форматирования у вики есть собственные теги. Но можно воспользоваться также некоторыми символами из HTML. Объясняется это тем, что вики-разметка использует не только особые теги, но и многие знаки из HTML-языка. А это в свою очередь означает, что в большинстве случаев вы можете использовать двоякое обозначение тех или иных функций.
Интересно то, что вики - вещь умная. Заметив в вашем тексте элементы из HTML-разметки, она может заменить их знаками из своего языка.
Ссылки могут стать симпатичными кнопочками или серьёзными якорями. Вики-разметка "ВКонтакте" позволяет создавать и то и другое. Но запомните одно важное правило! Текст всегда ставится справа от ссылки, а картинка - слева от неё.
Далее нам с вами предстоит научиться присоединять к ссылке анкор. Открываем и вставляем нужную ссылочку. Далее ставим знак разделения элементов - ǀ, а после него пишем требуемый текст. Теперь можно закрыть скобки.
Теперь создадим кнопочку. Для добавления картинки будем использовать слово «photo» и его номер в альбоме вашего сообщества. Вновь заключаем всю информацию в скобочки. Сначала прописываем фотографию, а потом ссылочку.
У вас должна получиться, например, такая кнопочка: [].
Обратите внимание на функции, доступные для работы с нашей картинкой!
Эти функции нужно вставлять перед ссылочкой, чередуя их со знаком разделения. Вместе с данными элементами можно вставлять также подпись к картинке, не забывая отделять её от остальных символов.
Что ещё умеет вики-разметка "ВКонтакте"? Таблицы она может создавать. Делается это столь же легко, как со всеми остальными объектами. Для вставки в текст таблиц также используются специальные символы.
Сначала посмотрим, из чего состоит сама табличка:
Две предпоследние операции являются вариативными! Если вы, например, сделали тёмную ячейку, применять к ней функцию «Прозрачность» нельзя!
Теперь наполним получившуюся табличку:
В итоге получится что-то вроде этого (табличка размером 1*3):
|’’’Красота’’’||’’’Здоровье’’’||’’’Спорт’’’
В свою таблицу вы можете вставлять всё, что угодно: картинки, ссылки, тексты. Важно только учитывать правила, которые нам предлагает вики разметка "ВКонтакте".
Давайте посмотрим, как делается вики-разметка меню "ВКонтакте". Для этого нам понадобится красивый рисунок и знания.
Обратите внимание на то, что меню бывает:
Предварительно подготовьте картинку, ширина которой должна быть не более 610 пикселей. Обратите внимание на то, что такая ширина обусловлена размерами стены вашей группы. Раскроите изображение в "Фотошопе" или другом редакторе так, чтобы получилось нужное количество кнопочек. Надпишите на каждой кнопке название того или иного пункта меню.
Перейдите в свою группу. Здесь надо зайти в панель управления и подключить инструмент «Материалы». Если вы вернётесь на главную страницу, увидите над обсуждениями ссылку «Свежие новости». Отредактировав «Новости», вы сможете создать на их основе красивое меню.
Теперь можно заняться редактированием «Новостей». Для этого из надо переключиться в режим «Вики-разметка "ВКонтакте"» (кнопка «<->»). Далее, учитывая всё описанное выше, со ссылками на различные элементы меню.
«ВКонтакте» есть официальная группа, полностью посвящённая вики-разметке. Там можно прочесть учебные материалы, получить дельные советы. решили максимально облегчить своим пользователям применение вики-языка. Для этого созданы разнообразные приложения, на которых можно потренироваться в оформлении группы.
Есть здесь также образцы дизайна для сообществ. С их помощью можно быстро оформить группу, если у вас совсем нет времени. Кроме того, редактирование шаблонов - неплохая практика для начинающих администраторов групп. Вы пока плохо понимаете, что такое вики-разметка "ВКонтакте"? Шаблоны оформления в этом случае станут для вас отличным помощником. Такие образцы дизайна вы сможете найти не только в официальном сообществе вики-разметки, но и на просторах Всемирной сети.
Для тех, кто испытывает сложности в изучении вики, имеется также множество учебных пособий и справочников. Кроме того, вы можете посоветоваться с более опытными пользователями. В итоге вы получите оригинальный дизайн для своего сообщества!
Хотите получить место, в котором можно разместить примеры работ, вести блог и рекламировать свои услуги? Обычно для этих целей создают сайт. Но есть и другой, более простой выход - группа Вконтакте с wiki-разметкой. В этой статье я объясню, как ее создать.
Практика и еще больше практики! Я буду описывать процесс на примере реальной группы - Футуристичный копирайтинг.
Я работаю с новым дизайном Вконтакте. Старый скоро отживет свое - поэтому его рассматривать не буду. В любом случае, процесс мало чем отличается.
Первое, что вы должны сделать - создать новую группу:
- Откройте раздел «Группы».
- Нажмите на кнопку «Создать сообщество».
Создаем новое сообщество
- Введите название. Указывайте любое - его можно менять в любой момент сколько угодно раз.
- Теперь выберите вид сообщества: группа или публичная страница. Разница описана выше.
Группа или публичная страница?
- Нажмите «Создать сообщество».
- Здесь вы можете изменить указанное название и выбрать тип страницы (его тоже можно менять в любой момент).
- Не забудьте принять Правила пользования сайтом.
Выбираем тип страницы
- Нажмите «Создать страницу».
Ура, сообщество создано!
Редактирование информации о сообществе
Сразу после создания новой группы вы попадете на страницу «Редактирование информации». Что здесь есть:
- Название . Думаю, объяснять не надо. Единственное обязательное для заполнения поле.
- Описание сообщества . Напишите пару слов о себе и своей группе. Много писать не стоит - никто не станет это читать.
Все поля, кроме названия, можно вообще не заполнять
Еще настройки
Когда закончите с настройками - нажмите «Сохранить».
Группа создана
Теперь можно загрузить основное изображение. Нажмите на «Загрузить фотографию» справа.
Давайте загрузим изображение для страницы
Укажите путь в изображению. Поставьте туда ваш логотип, фотографию или нарисуйте (закажите) что-нибудь особенное. С помощью рамки выделите ту область, которая и станет главной картинкой сообщества.
Выделите нужную область с помощью рамки
Теперь выберите небольшую круглую область, которая станет миниатюрой вашей группы.
Размер круга тоже можно менять
Вот, что у нас получилось. Страница стала на 35% привлекательней!
Красота!
Не забывайте про статус. Там тоже можно написать что-нибудь интересное. Например, ваш слоган или контактные данные. Или объявление о том, что сегодня у вас выходной.
На этом подготовительные работы заканчиваются и начинается самое сложное - wiki-разметка.
Как узнать ID группы
Меню, запись в блоге, список с примерами работ - все это мы будем создавать с помощью wiki-страниц. Вконтакте - отвратительный сервис, в котором нет инструментов для создания новой страницы. Вместо этого придется использовать скрипты. Не пугайтесь, это просто, хоть и неудобно.
Для скрипта вам понадобится узнать ID вашей группы. Если вы не меняли ее адрес - то это цифры в адресной строке, которые идут после слова «club». Я уже поменял, поэтому мне такой простой способ выцепить ID недоступен.
Кликните по любому посту на стене, чтобы открыть его. Если ничего нет - напишите что-нибудь. Что угодно.
Создайте любой пост и нажмите на него
В адресной строке появятся новые данные. То, что находится посередине между «wall-» и «_» (нижним подчеркиванием) - и есть ID вашей страницы. Сохраните его где-нибудь.
Мой ID - 124301131
Создание wiki-страницы
Теперь вы можете использовать скрипт для создания новых страниц с вики-разметкой.
http://vk.com/pages?oid=-124301131&p=Имя
Скопируйте это и вставьте в адресную строку браузера. Вместо моего ID укажите свой. А вместо слова «Имя» напишите название создаваемой страницы. Можно использовать русский язык, пробелы, цифры. А затем нажмите Enter, чтобы перейти по ссылке и запустить скрипт.
Будьте внимательны! Название вики-страницы изменять нельзя. Если будут опечатки - придется создавать новую.
Давайте для начала сделаем главную страницу. Я назвал ее «Меню».
Скопируйте скрипт в адресную строку
Нажмите «Наполнить содержанием».
Откройте редактор страницы
Здесь находится редактор страницы. Но нам пока что нужен не он, а ссылка. Посмотрите на адресную строку. Вам нужно все, что расположено до слов «?act=edit§ion=edit».
Обязательно сохраните ID страницы и ссылку на нее
Это очень важный момент. Новая страница еще нигде не закреплена и на нее не ведут никакие ссылки. Если вы закроете ее - то потеряете.
Я советую создать отдельный файл, в котором будет храниться структура вашей группы. Оформите его в виде «Название - ссылка - ID страницы». ID - это «page-124301131_50771728». Оно вам еще понадобится.
Вот, например структура моей группы «Подслушано». Меню и еще 2 страницы. Сюда же закинул скрипт для создания новых страниц. Чтобы его было легко найти.
Сохраните все ссылки и ID в отдельном файле, чтобы не потерять
Что делать, если вы сохранили только ID страницы, но забыли про ссылки? Введите в адресную строку адрес «https://vk.com/page-124301131_50771728». Естественно, подставьте ID своей страницы.
Закрепление вики-страницы в группе
Саму главную страницу вы уже создали. Теперь ее нужно закрепить в самом верху сообщества. Для этого скопируйте ссылку на страницу и вставьте в сообщение на стене. Вконтакте автоматически создаст ссылку-кнопку и прикрепит ее под постом.
Просто скопируйте ссылку на страницу в пост
Кнопка останется, даже если удалить текстовую ссылку
Загрузите изображение. Максимальная ширина картинки - 510 px. Максимальная высота - тоже 510 px. В пределах этих значений можно делать что угодно. Квадрат 510х510 - самый большой баннер, какой вы можете сделать. Это справедливо для любых постов, не только для закрепленных.
Я сделал вот такую штуку
Нажмите отправить. Теперь кликните по значку в виде трех точек в правом верхнем углу поста. И нажмите «Закрепить».
Теперь закрепите пост со ссылкой
Таким же образом можно делать анонсы статей в вашем wiki-блоге. Только закреплять их не надо.
Обновите страницу. Информация о группе исчезла. Вместо нее появился созданный вами пост с ссылкой и картинкой.
Клик по картинке откроет прикрепленную вики-страницу
Если кликнуть по картинке или по кнопке «Посмотреть» - откроется wiki-страница.
Пока что она пустая
Главную пока что трогать не будем. У нас ведь еще нет остальных страниц. Ссылки давать не на что. Сначала займемся другими вещами.
Верстка вики-страницы Вконтакте
Я не буду описывать все существующие теги для верстки. Все уже давно написано до меня. Есть официальная группа Вконтакте , посвященная вики-разметке. В ней можно найти что угодно. Там все рассортировано по темам - бери да применяй.
Я покажу, как применять знания из этой группы на практике. Давайте сверстаем страницу «Обо мне». Для начала создайте ее с помощью скрипта, запишите ID и перейдите на страницу редактирования.
На странице редактирования есть 2 режима: обычный и режим разметки. Обычный почему-то нещадно глючит - постоянно ломает ссылки. И большинство функций в нем недоступны. Поэтому я стараюсь в нем не работать. Чтобы перейти в режим wiki-разметки, кликните по значку <> справа вверху.
Перейдите в режим вики-разметки
Что должно быть на странице «Обо мне»? Немного информации, список преимуществ перед другими копирайтерами, возможно, фотография. Давайте это и сделаем.
Для начала напишите текст. Лично мне удобнее писать в любимом , а затем копировать в редактор Вконтакте. Не забывайте нажимать «Сохранить страницу» после каждого изменения.
Теперь добавим фотографию. Кликните по значку в виде фотоаппарата и укажите путь к изображению.
Нажмите на значок в виде фотоаппарата на панели инструментов
Вот и наша фотография
Я хочу, чтобы текст обтекал картинку, поэтому добавлю ей параметр «left». И я не хочу, чтобы люди могли открывать полную версию фотографии, поэтому добавил атрибут «nolink». Подробнее об атрибутах почитайте в группе, на которую я дал ссылку выше.
Добавляем параметры «nolink» и «left»
Чтобы посмотреть на результат - перейдите в обычный режим с помощью кнопки <>.
Не очень красиво
Давайте уменьшим фотографию. Просто пропишите нужные размеры в режиме разметки. Я указал значения вдвое меньше изначальных.
Укажите нужные размеры в режиме вики-разметки
Теперь оформим список. Выделите нужную строку и нажмите на значок списка.
Эта кнопка ставит тег *, который создает пункт списка
Перед ним появится символ «*». Это и есть тег списка. Вы можете ставить его вручную или пользоваться кнопкой на панели инструментов. Отметьте остальные пункты списка.
Уже красивее
Теперь нужно выделить заголовки. На панели инструментов есть кнопки для оформления заголовков H1-H3.
Используйте кнопки или поставьте теги вручную
«Обо мне» я сделаю заголовком первого уровня. А фразу перед списком - третьего уровня.
Почти готово
Все почти хорошо, но второй заголовок немного вылез на картинку. Нужно добавить пустую строку. В режиме вики-разметки это делается с помощью тега
.
Добавляем пустую строку
Если вам нужно пропустить только 1 строку -
для этого не нужен. Он используется, если вы хотите получить 2 и больше пустых строк подряд.Пожалуй, можно выделить жирным отдельные слова. Выделите нужный фрагмент и нажмите на кнопку «B» или используйте комбинацию клавиш Ctrl+B.
Комбинация Ctrl+B тоже работает
Вот что получилось в итоге.
По-моему, неплохо
Оформление портфолио Вконтакте
Теперь сделаем удобное портфолио для клиентов. Я вижу 2 способа:
- Создать альбомы со скриншотами и страницу-список с ссылками на каждый них.
- Создать отдельную страницу для каждой работы и страницу-список.
Для примера я оформлю 2 работы в портфолио - каждую своим способом.
Портфолио-альбом
Чтобы создать альбом, откройте меню «Управление сообществом».
Зайдите в настройки сообщества
Здесь установите галочку напротив пункта «Фотоальбомы». Теперь вы сможете их создавать. Сохраните изменения.
Добавьте блок с фотоальбомами
На странице сообщества нажмите на кнопку «Добавить фотографии» и укажите путь к нужным файлам.
Добавим в альбом скриншоты наших работ
Предположим, я хочу добавить в портфолио статью о том, как делать скриншоты текстов, которые не помещаются на экран. Для этого я делаю скриншот статьи и разрезаю его на небольшие кусочки в графическом редакторе.
Зачем? Потому что иначе текст на изображении получится слишком мелкий, и его нельзя будет прочитать. Толку от такого портфолио немного. А так я разбил его на кучу отдельных фрагментов нормального размера и добавлю в отдельный альбом Вконтакте.
У меня получилось 4 кусочка текста и миниатюра. Наведите курсор на любое изображение и нажмите на значок «Переместить фотографию».
Переместим новые изображения в новый альбом
Создайте новый альбом.
Нажмите «В новый альбом»
Дайте альбому такое же название, какое было у статьи. Чтобы его легко было найти. Описание вам не нужно. Также поставьте галочки напротив пунктов «Фотографии могут добавлять только редакторы и администраторы» и «Отключить комментирование альбома». Нажмите «Создать альбом и перенести».
Дайте альбому название и запретите остальным пользователям его изменять
Точно также перенесите остальные скриншоты. Только теперь не нужно создавать новый альбом - он уже есть.
Выбираем уже созданный альбом из списка
Вот что у нас получилось в итоге.
Альбом с кусочками текста
Для последующих альбомов такого геморроя с переносом уже не будет. Нажмите на «Фотоальбомы».
Откройте список альбомов своей группы
Теперь кликните по кнопке «Создать альбом» в правом верхнем углу. Дайте ему название и загрузите туда новую порцию скриншотов с помощью кнопки «Добавить фотографии».
Создайте альбом для нового текст в портфолио
Все, теперь у нас есть 2 альбома, в которых хранятся скриншоты 2 статей. Хватит, пожалуй.
2 альбома со скриншотами
Создайте страницу «Портфолио» и запишите ее ID. На ней мы не будем размещать сами работы - только названия, миниатюры и короткие описания.
Кликните по значку «Добавить фотографию».
Добавляем новую картинку на страницу
Нажмите на «Выбрать из фотографий сообщества». Откройте нужный альбом и выберите свою миниатюру.
Найдите свою миниатюру, добавленную в альбом
В новой вкладке откройте альбом или первый скриншот в нем. И скопируйте его ссылку (целиком). Ее вам нужно вставить в тег фотографии между вертикальной чертой | и закрывающимися квадратными скобками ]].
Вставьте ссылку между символами | и ]]
Так вы получите миниатюру, при клике на которую откроется нужный альбом или скриншот с началом текста (смотря на что вы укажете ссылку).
Портфолио-страница
Ну, здесь все гораздо проще. Создайте новую вики-страницу и не забудьте записать ее ID. Нажмите на значок «Добавить фотографию» и загрузите скриншот своего текста, предварительно порезанный на небольшие кусочки. В идеале 1 изображение - 1 абзац.
Зачем? Потому что Вконтакте довольно сильно сжимает изображения. Если вы загрузите целый скриншот, а затем растянете его на всю страницу - качество будет отвратительным. Маленькие же фрагменты пострадают не так сильно.
Теперь выключите режим вики-разметки (если он был включен).
Вернитесь в стандартный режим, чтобы посмотреть результат
Неплохо, но маловато будет. Кликните по первой картинке. В открывшихся настройках задайте ширину (левая ячейка) - 607 px. Это максимально допустимый размер изображения на странице. Высота изменится автоматически.
Задайте ширину картинки - 607 px
Вот что получилось. Точно так же увеличьте все остальные фрагменты текста.
Первый фрагмент стал ощутимо больше
Таким образом вы можете засунуть на вики-страничку текст любой длины. Главное, чтобы его можно было прочитать при ширине 607 px.
Целый скриншот текста на вики-странице
Наконец-то нам понадобятся ID страниц, которые вы записывали. Откройте свою страницу «Портфолио».
Загрузите на нее миниатюру (из созданного альбома или с компьютера). Теперь вставьте ID страницы с текстом между закрывающимися квадратными скобками ]] и вертикальной чертой |.
Скопируйте ID страницы с текстом между символами | и ]]
Собственно, все. Теперь при клике по миниатюре посетитель перейдет на страницу с текстом.
2 наши миниатюры-ссылки
Оформление списка работ
Теперь давайте сделаем наше портфолио более презентабельным и удобным. Я добавлю на него заголовок, названия работ, небольшие описания и ссылки на сайт, где они опубликованы. Вот что получилось.
Добавьте немного информации о каждой работе
Оформление страницы «Услуги и цены»
У нас уже есть страница «О себе» и красивое портфолио. Пожалуй, самое время показать клиентам ценник. Думаю, что мы оформим его в виде таблицы. Просто и понятно. Создавайте новую вики-страничку, сохраняйте ID - и поехали.
Подробно обо всех тегах, которые нужны при верстке таблицы, можно почитать
Данная статья будет представлять собой подробный мануал и я расскажу, как сделать меню для группы вконтакте. Красиво оформленное меню группы ВК способствует реальному увеличению посетителей и рост продаж на сайте.
Здравствуйте, мои уважаемые читатели. Давайте сегодня я расскажу, как сделать красивое меню для группы ВКонтакте и совершенно бесплатно. Кстати научившись создавать такие темы можно немного заработать на этом -))). Уже ни один коммерческий сайт не работает без создания своего сообщества в социальных сетях в особенности ВК, что гарантированно помогает привести новых клиентов, а также раскрутить свой бизнес.
Но если Ваше сообщество будет не привлекательно и как у всех то, кто захочет там остаться? Я думаю никто!!! Так давайте украсим свои группы качественным дизайном и научимся делать это очень быстро. Перед тем как начать создавать графику и наше будущее меню необходимо установить программу фотошоп на свой компьютер для дальнейшей нарезки картинок. Многие спросят зачем вообще нужно нарезать картинки. Тут дело в том, что для каждой ссылки меню мы должны будем создать отдельную полоску из общего баннера.
Существует на сегодня несколько видов создаваемого меню:
Суть создания обоих вариантов одна и та же. Только основное отличие в дополнительных элементах и типов записи и об этом подробнее будет в этой статье.
Для работы с меню нам поможет wiki-разметка , которая встроена сегодня в текстовый редактор ВКонтакте. От обычного она отличается тем, что для нее будут использоваться стандартные команды для вывода той или иной картинки и вставки ссылок на нужные элементы. Сама wiki-разметка дает возможность вставки кода для отображения изображений, видео и прочих элементов.
В данном случае мы будем наблюдать слева от основной аватарки группы гиперссылку в виде надписи «меню группы» при нажатии на которую у нас будет открываться наше меню с активными пунктами и изображениями.
Вид меню, будет следующим:
Суть заключается в создании уже открытых пунктов меню, которые будут отображаться в описание самой группы, где обычно и отображается по всем условиям. В описание будет закреплена наша картинка, которую мы подготовим заранее и свяжем ее со страницей, на которой у нас будут активные пункты. Данное меню стало очень популярно в последнее время и пользуется спросом у заказчиков. Выглядит они следующим образом:
Итак, в первую очередь нам необходимо будет создать главную аватарку группы которую мы разместим справа и заглушку нашего меню в виде баннера.
Как вы могли заметить высота изображений отличается и это сделано для того, чтобы картинки не съезжали по высоте и были на одном уровне так как высота названия сообщества и статус занимают около 50 px и как раз эту величину нам необходимо будет убрать из высоты меню.
Чтобы было понятно если высота главной аватарки группы 332, то от нее мы отнимаем 50 и получаем высоту основного меню равную 282. Если же размеры не имеют значения, то высоту можно будет выставлять произвольную.
Следующим шагом после создания сообщества будет настройка материалов и тут нам необходимо запретить участникам создавать дополнительные страницы и блоки, а только писать на стене. Для этого необходимо будет перейти в раздел под аватаркой группы под названием «управление сообществом» где нам необходимо сделать наши материалы «ограниченными» как показано ниже.
Теперь давайте займемся созданием общей композиции. Можно конечно просто вставить картинку вместо аватарки и в описание, но не будем дилетантами и покажу как сделать профессионально, чтобы это была одна полноценная картинка, переходящая одна в другую.
Создадим новое полотно в фотошопе размерами 600х350 пикселей которое мы будем использовать в качестве трафарета вырезав в нем проемы для наших картинок. Для работы нам необходимо перевести размеры всех элементов и линеек в пикселе и делается это по следующему пути: «Редактировать-установка-основное» и тут уже выставляем пиксели.
Следующим шагом создания, открытого меню необходимо сделать вырезки под баннер и аватарку которые мы потом получим для загрузки. Для этого переходим в раздел левого вертикального меню и выбираем раскройка.
Используя левую кнопку мыши, как будто вы выделяете область, необходимо выделить блоки нужных нам размеров и после каждого выделения нажимаем кнопку удалить «Delete» и выбираем 50% серого . Такие действия приведут к тому, что блоки будут нужных размеров и выделены цветом отличным от основного фона.
Должно получиться следующее:
А теперь просто выбираем ластик и функцией «волшебный ластик» жмем на каждый серый блок и получим трафарет с вырезами. Следующим шагом мы выбираем наше основное изображение и подкладываем под фон и получим готовые картинки на который можно будет написать текст с названием меню ли прочие рекламные элементы.
Отлично. После того как вы поместили картинку нашего дизайна нам остается выбрать «сохранить для Web» и на выходи мы получаем 2 наши картинки. Теперь идем снова в нашу группу и можем заливать главную аватарку (вертикальную). Баннер для меню мы будем использовать чуть позже при работе с кодом wiki-разметки.
Давайте создадим само меню, с активными пунктами, которые будут перенаправлять пользователя на нужные разделы стороннего сайта или же на альбомы и каталоги в самой группе. Использовать будем новое изображение для разнообразия -))).
Итак, переходим снова в фотошоп и создаем новый холст с размерами 400х300 пикселей. После чего выбираем в разделе: файл-поместить и выбираем картинку для фона меню.
На картинке размещаем кнопки нашей будущей менюшки и нарезаем картинку как мы делали выше путем выделения нужных блоков. После чего также выбираем «сохранить для web» и получаем папку с нашими нарезками. В моем случае получилось 4 картинки в отдельной папке.
Теперь нам необходимо выгруженные из фотошопа картинки залить в отдельный альбом и скрыть от посторонних глаз. После загрузки каждая картинка получит свое новое название и уникальный id.
Обратите внимание что у вас должно быть:
Теперь остается настроить нашу страницу где и будет отображаться на менюшка. Для этого переходим на главную страницу сообщества и выбираем свежие материалы и редактировать и называем «НАШЕ МЕНЮ».
Далее нам необходимо вставить картинки, которые мы получили при нарезке в фотошопе. Кто-то использует коды разметки, но, чтобы не мудрить голову предлагаю просто выбрать вставку картинки нажав на иконку фотоаппарата и поочередно загрузить друг за другом.
Работая в текстовом редакторе если после загрузки картинок, мы нажмем на иконку в виде скобок в правом верхнем углу то должны увидеть вот такой код:
Совет: Важным моментом после загрузки изображений является удаление отступов. Решается это вставкой «nopadding» перед размерами изображений.
Для пояснения ниже расписано что откуда берется, но учитывая, что все будет вставлено автоматически и не нужно мудрить, и открывать как некоторые пишут каждую картинку и брать id, то просто загружаем и сохраняем.
[]
где xxxxx - id вашей картинки
yyyyy - ширина в пикселях (не более 388)
Должно в итоге получиться вот так:
Теперь наши картинки собраны в отдельный баннер. А для того, чтобы добавить каждому пункту ссылку просто нажимаем при отключенной разметке на картинку и в разделе ссылка вставляем скопированный url.
И вот мы подошли к самому важному и последнему пункту создания нашего меню вконтакте. Теперь нам необходимо сохранить нашу страницу с картинками и скопировать ее адрес. В моем случае он выглядит вот так:
http://vk.com/page-116682062_51411604?act=edit&hid=183950676§ion=edit
Помните мы в начале статьи делали заглушку меню, которое будет являться продолжением нашей главной аватарки и под нее как раз и делали трафарет. Вот как раз сейчас нам и понадобится.
Переходим на главную страницу и делаем следующее:
Шаг №1.
Вставляем адрес станицы в текстовое поле для новой записи на стене, после чего она преобразуется в ссылку.
Шаг №2.
К записи прикрепляем изображение нашей заглушки для меню и нажимаем отправить.
Шаг №3.
Теперь после публикации записи нажимаем на время создания в нижней левой части записи и выбираем «ЗАКРЕПИТЬ».
Отлично!!! На этом заканчиваем. Теперь вы умеете создавать классные меню и можете зарабатывать на этом неплохие деньги. Советую все делать в следующем порядке:
В итоге работы мы получим вот такое меню.
А вот само меню при нажатии оно будет выскакивать с активными ссылками. Стоит поиграть с размерами и подогнать под свой экран, но не забываем и про отображение в мобильных устройствах.
ВАЖНО: После смены дизайна ВК в 2016 году внесены новые изменения при создании изображений и требования к картинкам о которых .
Надеюсь материал был полезен, и вы с легкостью теперь поняли, как сделать красивое меню для группы ВКонтакте. Подписывайтесь на обновления блога и до скорых встреч в новых постах. Если остались вопросы пишите их в комментариях, и я обязательно помогу Вам.
Прикладываю видеоролик для закрепления прочитанного -))).
