Оформлення вконтакте. Як створити і встановити графічне меню.
- Крок 1. Як створити меню в контакті і зробити вкладені сторінки:
- Крок 2. Як створити гарне графічне меню в контакті і поставити його:
Рада, що ви читаєте мою фрілочку ! Сьогодні я продовжу свій пост-серіал «Занурення в групи ВК». У третій частині «серіалу», я розповідала і показувала, як створити меню групи в контакті . Сьогодні ж, поговоримо про оформлення меню групи вконтакте!
У першій статті про створення менюшки, в коментах було багато питань, тому перш ніж почати нову тему, відповім на часті питання.
Питання 1: Перший і найпоширеніший: «де код в меню?» Або «якщо немає закладки при редагуванні« Вихідний код »як додати внутрішню сторінку?» Або «Я все одно не розумію, що зробити, якщо не з'являється код!»
Відповідь 1: ВК змінив редактор, тепер для перемикання між візуальним редактором і кодом всього один клік (правий верхній кут редактора):
Що б перевірити в якому ви редакторі: підведіть мишкою на цю кнопку, напишіть який-небудь текст і виділіть його жирним - якщо з'являються не звичайні символи, значить - це код
Питання 2: Другий, реально проблематичний: «а як прибрати пробіли між картинками ?? »
Відповідь 2: Визнаю, сама злякалася, коли вперше у клієнта «поїхала» менюшка. Зараз я це швидко правлю, а тоді було не весело. дивіться:
Додай тег nopadding; і все стане на свої місця!
Між картинками вкрадається простір і меню виглядає битим. Для необізнаних, може це і не нормально, а для SMM фахівця , Це як мінімум непрофесійно. Так в чому ж тут справа? А, все дуже просто! У ВК постійно відбуваються якісь оновлення, вводяться нові алгоритми ... та ще й редактор кривуватий ... буває ні з того, ні з сього з коду випадають важливі теги і тоді ми бачимо таку картину. Що б виправити це, потрібно заглянути в код і внести необхідні корективи. Формат коду, повинен бути ось таким:
Шаблон: [[photoціфри_ціфри | шірінаxвисотаpx; nopadding; | посилання на внутрішню сторінку]] Приклад: [[photo7632142_296911703 | 370x45px; nopadding; | page-32734125_44298120]]
Зазвичай картинки меню розсуваються тому, що з коду випадає nopadding; - вставляємо його на місце і все вирівнюється. Перед тим як зберігати результат, тисніть на кнопку «Предпросмотр», що б переконатися в тому, що все рівно стало.
Питання 3: Новина. У жовтні 2012р., В примусовому порядку, Вконтакте обрізав автара груп та паблік. Тепер їх розмір має загальний стандарт 200х500 пікселів. Так, що якщо у вас в групі аватар був більше, то зробіть апдейт (поновіть аватар).
До речі, вшити з обрізанням, ВК ввів ще одне нововведення щодо фотографій груп: тепер клікнувши на аватар, ми так само як в акаунті, зможемо побачити всі альбоми спільноти. Це зручно! І з цього малюється новий функціонал в комунікаціях групи.
Та-а-ак, з питаннями закінчили ... тепер переходимо до самого створення меню!
Крок 1. Як створити меню в контакті і зробити вкладені сторінки:
Насамперед переконаємося в тому, що ви знаєте, як створити меню групи в контакті і пробіжить по невеликій інструкції:
Ось така шпаргалка у мене вийшла! Для більшої ясності, розпишу кожну цифру:
- Управління співтовариством. Переходимо в налаштування групи.
- Включаємо матеріали. Зберігаємо зміни (якщо ще не включили).
- Тепер на головній сторінки групи, з'явилася додаткова вкладка «Новини групи». Наведемо мишкою в правий кут, натиснемо на стрілку «Редагувати».
- Змінимо назву вкладки. Тут буде у нас меню, тому напишемо, щось відповідне і привертає.
- Ця кнопочки перемикання між візуальним редактором і кодом. Ми будемо робити все роботи з кодом wiki розмітки, тому перейдіть саме в цей режим.
- Створимо внутрішні, вкладені сторінки. Для цього визначимося зі списком меню, кожне слово меню, візьмемо в подвійні квадратні лапки - [[слово]].
- Натиснемо кнопку «Предпросмотр».
- Слова стануть посиланнями!
- Збережемо результат. Не перемикайтеся в інший режим, поки не зберегли результат. До речі, рекомендую періодично зберігати код меню до себе на комп'ютер.
- Відступ. Доступ до сторінки. Для відкритих груп, ця функція більше не працює.
- Тепер заповнимо вкладені сторінки контентом. Відкриємо посилання меню в новому вікні. Переконаємося, що ми потрапили саме на ту сторінку. Додавши потрібну нам слово в квадратні лапки, ми вже дали вкладеної сторінці назву.
- Наповнимо змістом цю сторінку. Тут можна додати як звичайний текст, так і нові вкладені сторінки, що веде відвідувача вглиб міні сайту. У будь-якому випадку, вибір за вами!
- Додавши потрібний контент на сторінку, збережемо результат.
- Тепер нам потрібно, прописати адресу цієї сторінки. Інакше, якщо цього не зробити, в адресі сторінки будуть кракозябрікі і в якийсь момент, ви можете втратити всі свої вкладені сторінки. Для цього копіюємо підкреслені цифри - від слеша до знаку ...
- ... і несемо цю адресу сторінки в наше меню! Пам'ятайте, воно відкрито у вас в сусідній вкладці ?! Вставляємо адресу в потрібне місце.
Проробіть, цю операцію з усіма вкладеними сторінками і ваше меню буде готово.
Є! Меню створили, внутрішні сторінки зробили, заповнили їх, тепер перейдемо до створення красивого графічного меню.
Крок 2. Як створити гарне графічне меню в контакті і поставити його:
Всю теорію про те, як влаштована wiki розмітка в контакті, я вам давати не буду, у нас зараз інші цілі. Для створення візуального меню в групі ВК, всієї вікі-розмітки знати не потрібно. Перейдемо до створення візуального меню!
Для початку покажу вам код і результат свого меню:
Зізнаюся, я його зробила спеціально, що б написати цю статтю. Всі «руки не доходили», знаєте, як «швець без чобіт». Але тепер і я з візуальним меню в групі ВК!
Як малювати картинку для меню, я розповідати не буду, це справа дизайнерів, я сама малюю, але не настільки професійно. тут , В кінці статті, я давала відео про те, як в фотошопі малювати простеньке меню, ознайомтеся, можливо ви впораєтеся своїми силами. Якщо немає замовте картинку меню у фрілансера .
Я покажу вам середній за складністю варіант установки меню. Різниця в кількості елементів. Меню, яке розрізається просто на смужки, є найпростішим його виконанням. Чим більше клікабельних кнопок в рядку, тим складніше його виконання. Хоча, знаючи особливість, все просто! Справа лише в часі. Отже, ширина картинки повинна бути:
- 370 px - якщо в рядку у вас буде два і більше об'єктів, як у мене кнопочки соціальних мереж
- і max 388 px - якщо розрізаємо картинку по-простому, тільки на рядки, не розділяючи на дрібні об'єкти. Ось це та особливість, яку потрібно знати, при нарізанні меню на кнопки. У мене розмір картинки за все меню вийшов 370х456 px.
Після того як картинка розрізана на потрібну кількість об'єктів і збережена в окремий альбом, завантажуємо цей альбом в ВК. Завантажуємо в профіль аккаунта, а не в групу! Так як в альбомах групи більше немає можливості приховувати альбоми. Технічних альбом в корпоративної (наприклад) групі, зовсім не потрібен, тому ховаємо елементи меню в альбом аккаунта:
Технічний альбом ВК
Після того як ви налаштували конфіденційність «Тільки Я». Переходимо до установки самого меню. Дам вам приклад коду, що б був для вас шаблоном і розберемо з чого він складається:
[[Photo7632142_296911699 | 370x101px; nopadding; | http: //frilka.com]]
де, photo7632142_296911699 - це адреса картинки! Його ми дивимося в адресному рядку картинки:
З першої картинки, почнемо вставляти меню в групу вконтакте
Вам потрібен короткий адресу картинки, для цього перейдіть в сам альбом:
Перейдіть в сам альбом, що б отримати потрібну адресу картинки!
... і починаючи з першої картинки, переносите їх в меню групи.
Далі, йде розділова риса «|» і розмір картинки 370x101px; - що б його дізнатися, треба відкрити альбом на комп'ютері, виділити потрібну картинку і подивитися якого вона розміру:
Додаємо розмір картинки в код меню!
Отже, адреса картинки додали, розмір вказали, тепер ставимо, тег nopadding; - він потрібен для того, що б наші картинки щільно прилягали один до одного. І останнім етапом ставимо ссилочку на сторінку, куди потраплятиме відвідувач, після того як клацне на картинку.
Тут невелике уточнення! Зовнішні посилання, посилання на альбоми ВК і обговорення пишемо повністю, а посилання на внутрішні сторінки в форматі page-32734125_44298120. На початку і наприкінці рядка, не забуваємо ставити по дві квадратні лапки і без пробілів.
Уточнення 2: коли ми посилаємося на внутрішні сторінки без картинок, то для обговорень, альбомів і зовнішніх посилань ставимо одинарні квадратні лапки.
Рядки, в яких у вас два і більше елементів, в код вставляємо без пробілів. Вставляйте кожен рядок картинки один за одним. Тому, що якщо ви натиснете Enter після рядка з картинкою, то картинка перестрибне на новий рядок і меню зрушиться. Нам потрібно, що б меню відображалося цільним, тому ніяких зайвих прогалин і «іртеров» нам не треба!
Після того як ви перенесли всі картинки в меню і оформили їх (розмір, посилання), зберігаємо результат і милуємося своєю роботою! Усе! Готово!
Буду рада, якщо я змогла вам донести інформацію. Розкажіть, як у вас вийшло з установкою меню! Чи відповіла я на ваші запитання чи ні? Може хто, що хоче додати? Буду рада спілкуванню в коментарях.
---
Читайте Пост-Серіал «Занурення в групи ВК»:
З повагою і Любов'ю, Марина Лазарєва !
Схожі записи:
Так в чому ж тут справа?Пам'ятайте, воно відкрито у вас в сусідній вкладці ?
Чи відповіла я на ваші запитання чи ні?
Може хто, що хоче додати?