Interaktivní menu v kontaktu. Jak vytvořit nabídku pro skupinu VKontakte

Za velikost obrázku a svislou tyč vložte odkaz na stránku, kam se osoba dostane, kliknutím na odpovídající položku nabídky. Jak jsem již napsal, odkaz může být na nějakou stránku Vkontakte nebo na zdroj třetí strany na internetu.

Takto bude kód vypadat po přidání "nopadding;" a odkaz.

Ve výsledku by to mělo vypadat takto: byl změněn název záložky (MENU), odstraněny mezery mezi řádky, odstraněny mezery mezi obrázky (nopadding;), přidány odkazy. Klikněte na „Uložit stránku“ a vraťte se na hlavní stránku ve skupině.

Tím je dokončen proces vytváření navigace pro skupinu Vkontakte. Mám to takhle. Obrázek avatara a nabídka jsou jedno. Přechodem na záložku "MENU" si uživatel může vybrat, co ho zajímá, a následovat odkaz, který jsem uvedl.

Pokud se obáváte, že nabídky ve skupině nemusí být vidět, opravte fotografii, na které například pomocí šipek označujte přítomnost karty. Pokud máte dotazy, zeptejte se jich v komentářích.

Kvalitní design komunitní stránky VKontakte je již polovinou úspěchu v dosažení cíle, pro který skupina vzniká. Jak ukazují statistiky, přítomnost navigace výrazně zvyšuje návštěvnost stránky a také zvyšuje počet odběratelů. Komunitní stránka, kde jsou strukturovány všechny informace, působí dojmem seriózního přístupu k podnikání, stejně jako jejich praktických dovedností v řízení skupiny a spolehlivosti. Tento článek se zaměří na nabídku pro skupinu VKontakte, jak ji vytvořit a co nejpohodlněji navigovat.

Odrůdy nabídky pro komunitu VKontakte

Nyní existují dva typy nabídek pro skupinu VKontakte. Jejich šablony jsou samozřejmě na internetu a vše můžete dělat striktně podle nich. Výsledek však nebude kreativní a originální, což znamená, že nepřitáhne velké množství předplatitelů.

Existuje tedy uzavřené a otevřené menu.

Zavřeno získalo své jméno, protože jej předplatitel musí otevřít sám. Chcete-li to provést, stačí kliknout na odkaz. Jako odkaz lze použít libovolné slovo, obvykle „otevřít“ nebo „nabídka“. I když některé jsou sofistikované a vymýšlejí originální odkazy.

Otevřený příspěvek je příspěvek, který byl připnutý. Obsahuje platný odkaz na nabídku. Tento typ je ještě docela mladý, objevil se ne tak dávno, respektive s příchodem funkce připnutí příspěvku na zeď stránky. Otevřené menu je zdaleka nejúčinnější a atraktivnější než zavřené. První možnost je méně produktivní, protože návštěvníci skupiny si odkaz na ni jednoduše nevšimnou.

Takže "VKontakte"? Odpověď je docela jednoduchá. K vytvoření obou typů nabídek pro skupinu VKontakte se používá označení wiki. Jedná se o velmi šikovný nástroj, umožňuje vytvářet tabulky, grafy, formátovat a upravovat obrázky, pracovat s odkazy a další. Nyní je však pro tvůrce komunity VKontakte vše mnohem jednodušší než před několika lety. Sociální síť má stroj, který překládá veškerý obsah do značek wiki.

Otevřená nabídka pro skupinu VKontakte je nyní populárnější a uzavřená se již prakticky nepoužívá. Proto by bylo rozumné uvažovat podrobněji o vytvoření otevřeného typu. Dále se dozvíte, jak vytvořit nabídku ve skupině VKontakte (podrobné pokyny jsou uvedeny níže).

První fáze

V této fázi je třeba vybrat obrázky. Vytvoří reprezentativní vzhled stránky. Obrázky lze nalézt na internetu nebo si je vyrobit sami pomocí fotoeditorů a druhá možnost je vhodná pouze pro ty, kteří dobře kreslí na počítači a vlastní Photoshop.

První obrázek je avatar. Druhý (ústřední) je obraz-akce. Parametry avatara musí mít alespoň 200 x 330 pixelů. Centrální obrázek má alespoň 390 x 280 pixelů.

Druhá fáze

Otevřete stránku skupiny a najděte "Správa komunity". Odkaz je umístěn pod přední fotografií stránky vpravo. Po kliknutí na odkaz najděte v informacích sekci „Materiály“ a v tomto odstavci klikněte na „Omezeno“.

Na hlavní stránce klikněte v řádku "Materiály" na upravit. Ve formuláři editoru, který se zobrazí, zadejte název, sekce a poté kliknutím na tlačítko níže uložte. Poté se vraťte na stránku pomocí tlačítka v pravém horním rohu.

Třetí fáze

Zkopírujte adresu stránky. První řada čísel za slovem „stránka“ je číslo komunity, druhá je číslo stránky skupiny. Musíte to vědět, když přemýšlíte o tom, jak vytvořit nabídku ve skupině VKontakte. Adresa musí být nalepena na zeď spolu s centrálním obrázkem. Chcete-li připojit obrázek, klikněte na "připojit" a "fotografie". Poté vyberte a vložte. Poté klikněte na Odeslat – tím se příspěvek publikuje.

Čtvrtá fáze

Umístěte první obrázek na místo hlavní fotografie komunity. Záznam o této akci spolu s obrázkem se objeví na zdi. Není tam, takže je třeba ho odstranit.

To je vše. Když uživatelé kliknou na centrální obrázek, otevře se jim nabídka skupiny.

Jak vytvořit tabulku v menu?

Každý správce přemýšlí o tom, jak vytvořit nabídku ve skupině VKontakte. Výše uvedené pokyny vám mohou pomoci vytvořit pouze základní menu. Dále je potřeba to zlepšit.

Tabulka je velmi pohodlná v navigaci v nabídce pro skupinu VKontakte. K vytvoření tabulky je nutná znalost určitých symbolů.

• (| znamená začátek;
• |+ umístění centra;
• |- z nového řádku;
• | průhlednost;
• ! výplň tmavé buňky;
• |) označuje konec.

Jak vytvořit odkazy?

V otázce, jak vytvořit nabídku ve skupině VKontakte, je důležitý bod týkající se odkazů. Uspořádat je můžete různými způsoby:

• Nechte to jako odkaz. Chcete-li to provést, použijte odkaz v hranatých závorkách.
• Udělejte z odkazu slovo nebo frázi. Otevřít vložte odkaz, za odkaz vložte znak | a zavřete hranatou závorku.
• Obrázek odkazu. Můžete to udělat takto: [].

Nejčastěji se každý sám naučí, jak vytvořit menu ve skupině VKontakte. Znalosti přicházejí se zkušenostmi prostřednictvím pokusů a omylů. Začátečníci však mohou dát několik doporučení.

• Velikost obrázku by neměla být menší než 130 pixelů. To značně znehodnotí vzhled menu.
• Šířka obrázku - ne více než 610 pixelů.
• Stránka wiki nemůže obsahovat více než 17 neuzavřených značek.
• Když nastavíte indikátor šířky, výška se automaticky změní podle proporcí.
• Uvnitř tabulky můžete vytvořit seznam pomocí />.
• Na jeden řádek lze umístit maximálně 8 položek seznamu.

Mimo jiné existují speciální programy pro snazší použití značek wiki. Jedná se jak o vzdělávací aplikace, tak o skutečné asistenty, kteří vše udělají za vás.

Například aplikace „Interactive FAQ (beta)“ vám umožní otestovat své dovednosti v programování wiki.

Jeho práce je jednoduchá: uživatel má k dispozici hotové menu a je nutné zaregistrovat značkovací kód. Na konci je výsledek porovnán s originálem.

Wiki Editor své uživatele neučí ani neškolí. S jeho pomocí si uděláte jídelníček i bez počátečních programátorských znalostí. Snadno ovladatelný editor píše kódy sám – uživatel musí pouze spravovat.

Takže každý, kdo plánuje využít skupinu k propagaci svého podnikání nebo jen pro zábavu, může vytvořit nabídku VKontakte. Nabídka dělá propagaci podnikání mnohem efektivnější a přitahuje uživatele na stránku skupiny. Díky nabídce vypadá komunita reprezentativně a profesionálněji než její konkurenti, kteří ji nemají.

Dnes budu pokračovat ve svém „Ponoření do skupin VK“. Ve třetím díle "seriálu" jsem řekl a ukázal,. Dnes si promluvme o designu nabídky skupiny VKontakte!

V prvním článku o tvorbě jídelníčku bylo v komentářích hodně dotazů, takže před založením nového tématu odpovím na často kladené otázky.

Otázka 1: První a nejčastější: "Kde je kód v nabídce?" nebo "Pokud při úpravě "Zdrojového kódu" není žádná záložka, jak přidat interní stránku?" nebo "Stále nechápu, co dělat, když se kód neobjeví!"

Odpověď 1: VK změnil editor, nyní pouze jedním kliknutím přepnete mezi vizuálním editorem a kódem (pravý horní roh editoru):

Chcete-li zkontrolovat, v jakém editoru se nacházíte: najeďte myší na toto tlačítko, napište nějaký text a zvýrazněte jej tučným písmem – pokud se neobjeví běžné znaky, pak je to kód

Otázka 2: To druhé je opravdu problematické: jak odstranit mezery mezi obrázky?»

Odpověď 2: Přiznám se, že sám jsem byl vyděšený, když poprvé „šel“ menu pro klienta. Teď to rychle opravuji, ale tehdy to nebyla legrace. Vidět:

Přidejte značku nopadding; a všechno zapadne na své místo!

Mezi obrázky se vkrádá mezera a menu vypadá rozbitě. Pro neznalé to možná není normální, ale pro, alespoň ne profesionální. Tak o co tady jde? Ach, to je velmi jednoduché! Ve VK neustále probíhají nějaké aktualizace, zavádějí se nové algoritmy ... a dokonce i editor je pokřivený ... občas bezdůvodně z kódu vypadnou důležité značky a pak vidíme takový obrázek. Chcete-li to opravit, musíte se podívat do kódu a provést potřebné úpravy. Formát kódu by měl být tento:

Vzor: [] Příklad: []

Obvykle jsou obrázky nabídky posunuty od sebe, protože kód vypadne žádné vycpávky; - vložte jej na místo a vše je zarovnáno. Před uložením výsledku klikněte na tlačítko "Náhled", abyste se ujistili, že je vše hladké.

Otázka 3: Zprávy. V říjnu 2012 Vkontakte násilně odřízl autory skupin a veřejnosti. Nyní má jejich velikost běžný standard 200x500 pixelů. Pokud jste tedy měli ve skupině více avatarů, proveďte aktualizaci (aktualizujte avatara).

Mimochodem, spolu s ořezáváním VK zavedl další novinku týkající se skupinových fotografií: nyní kliknutím na avatar budeme moci, stejně jako v účtu, vidět všechna alba komunity. Je to pohodlné! A z toho je v komunikaci skupiny nakreslena nová funkce.

Tak a tak, s otázkami jsme skončili ... nyní přejděme k samotné tvorbě jídelníčku!

Krok 1. Jak vytvořit nabídku v kontaktu a vytvořit vnořené stránky:

Nejprve se ujistěte, že víte, jak vytvořit skupinové menu v kontaktu, a projděte si malý návod:

Jak se vám líbí můj cheat sheet?

Toto je cheat, který jsem vytvořil! Pro větší přehlednost si každý obrázek zapíšu:

Proveďte tuto operaci se všemi vnořenými stránkami a vaše nabídka bude připravena.

Jíst! Menu je vytvořeno, vnitřní stránky vyrobeny, vyplněny, nyní přejdeme k vytvoření krásného grafického menu.

Krok 2. Jak vytvořit krásné grafické menu v kontaktu a nainstalovat jej:

Nebudu vám dávat celou teorii o tom, jak funguje značkování wiki v kontaktu, teď máme jiné cíle. Chcete-li vytvořit vizuální nabídku ve skupině VK, nemusíte znát celé označení wiki. Pojďme k vytvoření vizuálního menu!

Nejprve vám ukážu kód a výsledek mého menu:

Přiznám se, že jsem se rozhodl napsat tento článek schválně. Všechny „ruce nedosáhly“, víte, jako „obuvník bez bot“. Ale teď jsem s vizuálním menu ve skupině VK!

Neřeknu vám, jak nakreslit obrázek pro menu, to je věc designérů, kreslím sám, ale ne tak profesionálně. , na konci článku jsem dal video, jak nakreslit jednoduché menu ve Photoshopu, mrkněte na to, třeba to zvládnete sami. Pokud ne, objednejte si obrázek menu z .

Ukážu vám průměrnou možnost nastavení nabídky. Rozdíl je v počtu prvků. Menu, které je jednoduše nakrájeno na proužky, je nejjednodušší implementací. Čím více klikatelných tlačítek v řadě, tím obtížnější je provedení. I když s vědomím této funkce je vše jednoduché! Je to jen otázka času. Šířka obrázku by tedy měla být:

370 px – pokud máte dva nebo více objektů za sebou, jako moje tlačítka sociálních sítí

A max 388 px - pokud obrázek nařežeme jednoduchým způsobem, pouze na čáry, aniž bychom jej rozdělovali na drobné předměty. Toto je funkce, kterou potřebujete vědět, když rozdělujete nabídku na tlačítka. Moje velikost obrázku celého menu byla 370x456 px.

Poté, co je obrázek rozřezán na požadovaný počet objektů a uložen do samostatného alba, nahrajeme toto album do VK. Nahráváme do profilu účtu, ne do skupiny! Protože již není možnost skrýt alba ve skupinových albech. Technické album ve firemní (například) skupině není vůbec potřeba, takže položky nabídky v albu účtu skryjeme:

Technické album VK

Jakmile nastavíte soukromí „Pouze já“. Pokračujeme k instalaci samotného menu. Dám vám příklad kódu, který by pro vás byl šablonou, a analyzuji, z čeho se skládá:

[]

Kde, foto7632142_296911699 je adresa obrázku! Podíváme se na to v adresním řádku obrázku:

Od prvního obrázku začneme vkládat nabídku do skupiny VKontakte

Potřebujete krátkou adresu obrázku, k tomu přejděte do samotného alba:

Přejděte do samotného alba a získejte požadovanou adresu obrázku!

…a počínaje prvním obrázkem je přeneste do skupinového menu.

Přidání velikosti obrázku do kódu nabídky!

Byla tedy přidána adresa obrázku, byla uvedena velikost, nyní vložíme značku žádné vycpávky;- je potřeba, aby naše obrázky těsně přiléhaly k sobě. A posledním krokem je vložení odkazu na stránku, kam se návštěvník dostane po kliknutí na obrázek.

Zde je malé upřesnění! Externí odkazy, odkazy na alba a diskuze VK píšeme v plném znění a odkazy na interní stránky ve formátu strana-32734125_44298120. Na začátek a konec řádku nezapomeňte dát dvě hranaté uvozovky a žádné mezery.

Upřesnění 2: když odkazujeme na interní stránky bez obrázků, vkládáme jednoduché čtvercové uvozovky pro diskuze, alba a externí odkazy.

Řádky, ve kterých máte dva nebo více prvků, se do kódu vkládají bez mezer. Vložte každý řádek obrázku jeden po druhém. Protože pokud po řádku s obrázkem stisknete Enter, obrázek přeskočí na nový řádek a nabídka se přesune. Potřebujeme, aby se menu zobrazovalo jako celek, takže nepotřebujeme žádné další mezery a „irtery“!

Poté, co přenesete všechny obrázky do nabídky a navrhnete je (velikost, odkaz), uložte výsledek a obdivujte svou práci! Všechno! Připraveno!

Krok 1
Chcete-li začít, přejděte do své skupiny a v bloku „Nejnovější zprávy“ (v tomto případě jsem jej přejmenoval na „Nabídka“) klikněte na odkaz „Upravit“, který se zobrazí po najetí myší. Důležité! Nejprve musíte mít otevřenou skupinu, nikoli stránku. Protože na stránce prostě žádná taková položka není. A za druhé, v menu Správa komunity > Informace > Obsah musí být vybrána položka „Veřejné“.

Krok 2
Na záložce "Úpravy" napíšeme frázi [[Teorie webového designu]], uzavřenou ve dvojitých hranatých závorkách. Poté klikněte na tlačítko „Uložit stránku“.

Krok 3
Poté se vedle tlačítka zobrazí odkaz „Náhled“ a klikněte na něj. Níže se otevře náhled naší nabídky, kde vidíme odkaz „Teorie webového designu“, který se objeví zespodu.

Krok 4
Klikněte na tento odkaz a přejděte na vytvořenou stránku s názvem „Teorie webového designu“. Poté klikněte na odkaz „Vyplnit obsah“. Dále upravujeme text jako v běžném textovém editoru – vkládáme obrázky, texty, videa a další objekty. V tomto případě bude mít naše vytvořená stránka URL jako https://vk.com/page-15865937_43819846.

Alternativní způsob vytvoření interní stránky
Existuje alternativní způsob vytvoření stránky. V zásadě je vhodný pro veřejnost (veřejné stránky), protože pro ně výše popsaný způsob není vhodný. K tomu použijeme následující kód
http://vk.com/pages?oid=-XXX&p=Název_stránky
kde místo XXX dosadíme id naší skupiny a místo textu „Název stránky“ napíšeme Menu. Nyní musíme zjistit ID skupiny. Jak to udělat? Jdeme na hlavní stránku skupiny a podíváme se na naše příspěvky na zdi – hned pod blokem „Přidat příspěvek“ bude napsáno „Všechny příspěvky“ – klikněte na tento odkaz.

Přejděte na stránku a podívejte se na adresu URL takto https://vk.com/wall-78320145?own=1, kde čísla 78320145 v tomto příkladu jsou id skupiny. Nahradíme naše data ve zdrojovém kódu a získáme záznam takto: http://vk.com/pages?oid=-78320145&p=Menu(s vašimi čísly!). Vložte tento řádek do adresního řádku prohlížeče a stiskněte Enter. Vytvořili jsme tedy novou stránku Vkontakte.

Jak víte, člověk, který čte konkrétní webový zdroj nebo se k němu dostává, věnuje pozornost designu a rozhraní prvních 8 sekund. Paralelně je přesvědčen o dobré nebo špatné použitelnosti (použitelnosti). Nabídka ve skupině na sociální síti VKontakte, o které budeme dnes mluvit a zvážit princip jejího designu na příkladu, vám umožňuje nejen barvitě prezentovat informace a „odlišovat se“ od konkurence k lepšímu, ale také identifikovat přesně ty body a zvýraznit je, co je potřeba.

Podívejte se na několik příkladů, abyste pochopili, jak krásné a pohodlné to je:

Začněme. Pro začátek je třeba poznamenat, že pokud si chcete udělat menu sami od začátku, budete potřebovat všechny níže uvedené informace. V případě, že návrh již existuje, můžete část článku přeskočit a přejít přímo k jeho umístění a označení wiki.

Návrh menu

Umožňuje dokončit základ pro budoucí projekt. Pro provedení této části práce je vítána znalost programu jako je Adobe Photoshop. Takto vypadá šablona velikosti, do které budeme implementovat budoucí krásné menu.

Šířka avatara je 200 pixelů, výška je 500. Obrázek hlavního menu je 510*308. Výsledkem je, že na konci dostaneme takové krásné „menu“.

Vezměte prosím na vědomí, že v závislosti na informacích napsaných za názvem skupiny se může změnit výška obrázku vpravo (avatar) a podle toho se může posunout vše, co se nachází poblíž!

Tento zdroj rozvržení PSD byl implementován jako příklad. Stažení .

Nebudeme se věnovat tomu, jak byla šablona vyrobena, rovnou přistoupíme k její přípravě pro umístění do nové nebo stávající skupiny. Otevřete soubor ve Photoshopu.

Nejprve uložte avatara. Jedna z možností, jak rychle uložit, pokud je vše v souboru strukturované a prvků je málo (jako v našem případě). Vypněte viditelnost vrstev, které nepotřebujeme.

Přejděte do části "Obrázek" a vyberte operaci "Ořezání".

Na výstupu dostaneme:

Pokud je výsledný obrázek velký, můžete použít nástroj Uložit pro web. Příkaz se také nachází v sekci "Soubor".

Podobnou operaci provedeme s obrázkem, který se zobrazí při prvním zobrazení nabídky. V našem případě ponecháme viditelné - složku "otevřít menu" a "pozadí menu" ve složce "menu s autem". Výstup jako výsledek:

Nyní je třeba uložit a vyjmout druhou úroveň nabídky. Chcete-li to provést, ponechte ve složce "menu s autem" viditelné "pozadí menu" a přidejte do něj "Menu druhé úrovně".

Poté použijeme nástroj „Vnoření“, který najdeme v menu vlevo.

"Nastříhejte" náš obrázek na příslušné části. V našem případě budou tři.

Tím je přípravná část dokončena. Pokračujeme do hlavní fáze.

Wiki-značka hotového menu ve Vkontakte.

Nejprve musíte nahrát skupinovou fotografii nebo avatar kliknutím na stejnojmenný odkaz a výběrem souboru, který potřebujeme.

Pak nezapomeňte provést následující posloupnost akcí. Jdeme do „Správa komunity“ a v položce „Sekce“ naproti tlačítku „Materiály“ vybereme „Omezeno“.

Toto musí být provedeno tak, aby uživatelé a členové skupiny nemohli měnit a/nebo upravovat další položky, včetně nabídky.

Po operaci nahrajeme naše nakrájené obrázky do komunitního alba.

Přejděte do sekce "Nejnovější zprávy", vyberte "Upravit" a přejděte do nabídky editoru.

Pro urychlení procesu použijeme klávesu „Fotoaparát“ a klikneme na „Vybrat z fotografií komunity“.

Po přidání se opět dostaneme do nabídky editoru a stiskneme tlačítko "<>“, ve kterém provedeme další úpravy. Okamžitě také přejmenujeme sekci a místo „Nejnovější novinky“ napíšeme v našem případě „SKUPINOVÉ MENU“.

Obecná struktura každé nakrájené části vypadá takto v označení - [], kde:

id - identifikátor (číslo) vámi nahraného obrázku;

X a Y - velikost obrázku vodorovně a svisle v pixelech;

Při pohledu na šablonu upravujeme naše označení wiki a pravidelně přecházíme do sekce „Náhled“, která vizuálně zobrazuje změny, které jsme provedli.

Všechny obrázky musí být uzavřeny štítkem najednou (a ne jak je zpočátku ve výchozím nastavení každý obrázek)

Protože jsme již nechali jednu značku vycentrovat obrázek, abychom se zbavili „nepříjemných“ vzdáleností mezi částmi celkového obrázku, měli bychom vložit značku „nopadding“ následovně: []

Zde je to, co se stane na konci.

Nyní byste měli kliknout na záložku „NABÍDKA SKUPIN“ a poté na „upravit“.

Důležité! Pro zkopírování požadované adresy klikněte v naší verzi na "NABÍDKA SKUPIN" a zkopírujte odtud "správný odkaz".

Přejděte na hlavní stránku, klikněte na „Přidat záznam“. Nezapomeňte okamžitě změnit autora příspěvku!

Klikněte na "elipsu" napravo od záznamu a klikněte na záložku "Připnout".

Poté stránku obnovíme a užijeme si výsledek, který vypadá takto:

Kliknutím na „Otevřít nabídku“.

Jak vidíte, vytvoření menu na sociální síti Vkontakte je poměrně snadné a jednoduché. Stačí mít lehkou úroveň znalostí používání Photoshopu a značek wiki. Čím kvalitnější a srozumitelnější design, tím ochotněji a častěji bude potenciální uživatel přicházet a vracet se do vaší skupiny.

Pokud chcete skutečně jedinečný a ohromující design kapely, který respektuje firemní styl a související prvky, pak se obraťte na profesionálního designéra, nebo si před tím můžete sami vyzkoušet rozsah svých talentů. Hodně štěstí ve všech vašich snahách!