Jak vytvořit a zaregistrovat skupinu v kontaktu. Vytvořte pro své příspěvky individuální styl. Jak zajistit, aby se obrázky VKontakte nezmenšovaly? Vliv pozadí a velikosti na kvalitu obrazu

Grafický návrh skupiny v kontaktu se skládá z několika obrázků různých velikostí. Každý z nich plní svou vlastní roli, proto se provádí podle samostatné technické specifikace.
  • Avatar.
  • Až do nedávného vzhledu horní obálky sloužila v komunitě hlavní roli. Ale přívrženci starého stylu jej mohou stále používat jako základ. Avatar by měl obsahovat základní informace o společnosti: logo, název společnosti, kontaktní údaje a pár slov o směru činnosti. Jednou z nejdůležitějších částí avatara je miniatura, která je viditelná ve vyhledávači kontaktu a v kanálu zpráv. Šířka avatara je 200 pixelů.
  • Pokrýt. Obálka se v novém designu stala hlavním prvkem grafického designu komunity. Při vstupu do skupiny je první věcí, které člověk věnuje pozornost, obal, proto by měl co nejvíce odrážet vaše aktivity. Měli byste tam také umístit kontaktní údaje a logo společnosti. Doporučená velikost obalu je určena v nastavení skupiny při nahrávání. Banner přechodu nabídky.
  • Přechodový obrázek tradičně obsahuje tlačítko nabídky navržené v komunitním stylu. Dále doporučujeme umístit tam nabídku, která by mohla být pro zákazníky zajímavá. Obrázek s položkami nabídky.
  • Navigační prvek, který uživatelům umožňuje procházet obsahem skupiny. Nabídka může obsahovat všechny informace, které účastníci potřebují: doručení, platba, kontakty, o firmě, katalog a mnoho dalšího. Při vytváření obrázku je lepší jej zvolit tak, abyste mohli snadno přidávat nová tlačítka do nabídky nebo si položky nabídky předem promyslet, abyste se vyhnuli dalšímu přepracování. Navigační obrázky pro interní stránky.

Tyto prvky slouží k pohodlnému pohybu uživatele v komunitních sekcích a poskytují příjemný vzhled vnitřním stránkám.

Dozvíte se, jak správně nastavit úkoly pro vývoj designu skupiny VKontakte pro vaše zaměstnance nebo nezávislé pracovníky. Budete mít možnost kontrolovat pracovní proces a hodnotit konečný výsledek nejen z estetického hlediska, ale také s přihlédnutím ke schopnosti vytvořeného návrhu přeměnit návštěvníky v klienty.

Kde začít pracovat na designu?

Začněte vyvíjet návrh skupiny VKontakte od definování cílového publika, identifikovat jejich přání a potřeby. Musíte mít jasnou představu o tom, kdo a jak budete prodávat určitý produkt nebo službu.

Studujte své konkurenty. Je logické, že konkurenti již prošli fází hledání cílového publika. Musíte analyzovat jejich webové stránky a skupiny sociálních médií. To pomůže určit publikum, na které jsou texty na webových stránkách vašich konkurentů zaměřeny.

Identifikujte silné a slabé stránky vašeho návrhu ve srovnání s těmi na trhu. Napište 3-5 výhod, které má vaše firma. Mohou to být: doprava zdarma, záruka 5 let, zkušení specialisté, široký sortiment atd.

Udělejte svůj obchodní návrh na základě průzkumu cílového publika a konkurenčních webů. Toto je název avatara nebo obalu skupiny VKontakte. Hraje obrovskou roli při rozhodování, zda dále zkoumat komunitní obsah. Váš návrh by měl jasně definovat téma, být jednoduchý a srozumitelný pro každého návštěvníka. Při jeho koncipování myslete na prospěch zákazníka, nikoli na produkt.

Lidé nechtějí kupovat produkt/službu – chtějí řešení svých problémů.

To vše jsou přípravné fáze, které je třeba dokončit před zahájením prací na návrhu skupiny VKontakte. Jsou to oni, kdo určuje obsah, který je třeba umístit do rozvržení návrhu.

Důležité prvky v návrhu skupin VKontakte

O obsahu jsme rozhodli, nyní je čas zjistit doporučení pro navrhování skupinových prvků. Budeme analyzovat pouze to nejnutnější: ​​avatar a miniaturu, obal, banner pro připnutý příspěvek a menu.

Avatar

Umístěte na něj svou prodejní nabídku, abyste návštěvníky vyprovokovali k cílené akci. Kromě toho by avatar měl obsahovat kontaktní informace, kde vás lze kontaktovat, obrázek produktu nebo tématické ilustrace služeb.

Používejte pouze vysoce kvalitní obrázky a zapomeňte na kliparty z bezplatných fotografií. Vyhledávání obrázků pro efektivní návrh skupiny VKontakte by mělo být provedeno na stránkách pinterest.com, freepik.com, flaticon.com nebo jako poslední možnost google.ru. Ale je lepší vybrat obrázky z placených fotobank. Zadávejte vyhledávací dotazy pouze v angličtině. Máte-li potíže s angličtinou, použijte překladač Google.

Abychom vám usnadnili správné rozhodnutí, my Rozdáváme 500 ruddů za návrh menu každému, kdo sleduje zadaný odkaz. Pro získání slevy stačí zadat kód HWC1817-500-menu při podání žádosti.

Ahoj ještě jednou. Tohle mě nikdy neomrzí) V našem studiu milujeme bezplatnou komunikaci s našimi uživateli, tedy. když si nejste zmateni rámcem, do kterého jste byli vloženi, abyste mohli napsat potřebný článek. Na tomto webu komunikujeme pouze o tématech, která jsou pro nás zajímavá a vyprávíme vám o nich. A tak jsme v předchozím článku ze série školících materiálů o VKontakte vytvořili skupinu VK a mluvili trochu o její propagaci. Ale abych byl upřímný, to není všechno, funkce sociálních skupin, které nám byly poskytnuty. Síť vám umožňuje navrhnout skupinu nebo veřejnou stránku velmi zajímavým a dokonce profesionálním způsobem. V tomto článku vám tedy řekneme, jak krásně navrhnout skupinu VK a vytvořit pro ni krásné menu.

Značení WIKI se používá k vytváření skupin. V tomto článku se do toho nebudeme pouštět příliš hluboko, protože... Pokud vše smícháme do jednoho článku, tak vás, přátelé, úplně zmateme, ale náš úkol je jiný. Více o značkování wiki vám řekneme v příštím článku, ano? Pak pokračujme.

V tomto článku se bez Wiki také neobejdeme, ale zde ji využíváme minimálně, takže se v ní příliš nehrabejte)). Nejprve musíme vytvořit interaktivní menu pro vaši skupinu, k tomu musíme provést přípravné kroky. Nejprve změňme některá nastavení ve skupině. Jdeme do „Community Management“, poté do „Diskuse“ a zde musíme propojit „Materiály“ a otevřít diskuse, jak je znázorněno na obrázku

Připraveno! Dále se pustíme do přípravy obrázků. V této fázi je vhodné umět pracovat s grafickými editory, jinak se budete muset obrátit na freelancery a to jsou vyhozené peníze. Je samozřejmě lepší se to naučit; není to vůbec těžké, a co víc, budete to potřebovat více než jednou. Ukážeme vám, jak tento krok provést ve Photoshopu, i když totéž můžete udělat v jakémkoli jiném editoru.

Vyrábíme šablonu pro skupinu VK jako na obrázku níže.

Nabídka bude umístěna v okně A a její rozměry se mohou lišit od rozměrů na obrázku. Vše závisí na velikosti tlačítek nabídky. V naší verzi jsme navrhli vytvořit jedno tlačítko na řádek. Pokud potřebujete vytvořit 2 tlačítka na řádek, musí být šířka okna A zmenšena na maximálně 377 pixelů. Obvykle volíme výšku empiricky. V této možnosti se při umístění každého prvku na hlavní stránku skupiny na jeden řádek zvolí výška 377px.

Fáze značení je u konce, nyní uděláme vhodný obrázek, rozřežeme náš výkres na zóny a zapíšeme nápisy, které potřebujeme, a nezapomeňte, že každá samostatná zóna obrázku s nápisem, který napíšete, bude vaším tlačítkem nabídky . Myslím, že nemá cenu psát, jak to všechno udělat, protože... to se změní na samostatnou lekci o Photoshopu, možná o tom napíšeme, i když nemohu slíbit - stránka má špatný profil. Ale pokud bude mnoho požadavků, myslím, že přidáme článek))

Když uložíte projekt ve Photoshopu, odstraníte všechny nepotřebné prvky (Photoshop vyřízne a uloží všechny obrázky a bílá pole spolu s nimi), musíte změnit názvy obrázků, nejlépe je pro pohodlí očíslujte podle pořadí jak budou umístěny v nabídce .

Fuuuhhhh, i s touto etapou jsme skončili)) Moc toho nezbývá! Dále přejdeme k samotné skupině. Poté, co jsme změnili některá nastavení (na začátku tohoto článku), uvidíme na zdi nové karty: „Diskuse“ a „Nejnovější zprávy“. Klikněte na slova „Nové téma“ na kartě diskuse a vytvořte stránku nabídky.

Musí se jmenovat stejně jako v grafické nabídce a poté vyplnit pole popisu. Po zadání všech nezbytných informací klikněte s jistotou na „Vytvořit téma“.

Vytvořenou zprávu uvidíte na zdi. Poté stejným způsobem vytvoříte potřebný počet stránek (v závislosti na tom, kolik sekcí nabídky máte).

Je vše připraveno? pokud ano, pak začneme upravovat naše menu. K tomu nám slouží záložka „Nejnovější zprávy“. Opět můžete kliknout na „Upravit“.

Opět vidíme okno editoru, kterého se již nebojíme)), s tím jsme se již setkali. Po přepnutí do režimu vizuální úpravy (k tomu použijte ikonu fotoaparátu v editoru VK) načteme všechny naše obrázky (fragmenty nabídky) v pořadí, v jakém se nacházejí v celém obrázku. Změníme název na srozumitelný pro návštěvníky. Poté přepneme do režimu značkování wiki a upravíme kód (o značkování wiki si podrobně povíme v příštím článku, řeknu vám zajímavou věc.

Ukázkový kód pro navrhované menu:

Zde je velmi důležitý jeden bod - pro fragmenty, které neslouží jako tlačítko, musíte místo odkazu na stránku napsat značku „nolink“. Jinak na fragment bude možné kliknout, a když na něj uživatel klikne, fragment se otevře jako nezávislý obrázek, ale potřebujete to?

Pokud je něco špatně, s největší pravděpodobností jste udělali chybu v kódu, vše pečlivě zkontrolujte a více než jednou. A pokud jste vše udělali správně, tak po kliknutí na název záložky hlavního menu skupiny se vám zobrazí hotové grafické menu, které spolu s avatarem skupiny VK vypadá jako jeden celek.

Pokud se vaše nabídka na nižší úrovni neshoduje s avatarem skupiny VKontakte, dosáhněte zarovnání v kódu ve spodním fragmentu změnou výšky v px. Při velkých změnách to může ovlivnit kvalitu obrazu. V tomto případě proveďte v původní šabloně grafického editoru (v našem případě Photoshop) změny velikosti požadovaného fragmentu a v případě potřeby překreslete celé rozložení. To je vše, přátelé, registrace skupiny VK je dokončena! Nyní jste vlastníkem profesionálně navržené skupiny.

V dalším článku ze série školení o VKontakte jsme vám řekli, jak vytvořit interaktivní menu a profesionálně navrhnout skupinu VKontakte. V našem dalším článku se blíže podíváme na značkování wiki a pokusíme se navrhnout skupinu tím, že se do tohoto značkování dostaneme hlouběji.

Jako vždy jsme velmi rádi za jakékoli vaše komentáře, pište častěji, přátelé))

VKontakte potěší své uživatele velkým množstvím zajímavě navržených skupin. Mnohé z nich nejsou svým vzhledem nižší než plnohodnotné webové stránky. Tento efekt je zajištěn správným návrhem skupin, zejména menu a avatarů. Zkušení uživatelé se s tímto úkolem snadno vyrovnají, ale pokud jste začátečník, bude vám článek užitečný.

Jak krásně navrhnout skupinu na VKontakte

Vytvoření banneru

Při prohlížení skupiny uživatel v první řadě věnuje pozornost avataru a nabídce. Níže budeme hovořit o tom, jak vytvořit dva obrázky ve Photoshopu, jeden z nich správně vyříznout a napsat speciální kód označující

Fáze 1

Otevřete Photoshop a vytvořte nový dokument o rozměrech 630x725 pixelů. Naplňte ji bílou. Ve vrstvě vyřízněte dvě okna. Prostřednictvím těchto oken bude vidět grafický design Kontaktu. Nejprve vyberte obdélníkovou oblast o rozměrech 200x710 pixelů a stiskněte tlačítko „Del“. Dále vyberte obdélníkovou oblast o rozměrech 382x442 pixelů, spojte výsledné obdélníky ve spodní části a stiskněte klávesu "Del".

Fáze 2

Pod výslednou vrstvu umístíme grafický návrh skupiny. Nejlepší je napsat požadovaný text předem na obrázek s hlavním pozadím a navíc vytvořit požadovaný počet položek menu.

Fáze 3

Následuje pravá obdélníková oblast o rozměrech 200x710 pixelů. uložit jako samostatný obrázek. Výsledkem je kompletně hotový výkres pro návrh skupiny. Je potřeba jej načíst do bloku, který se nachází v pravém horním rohu stránky. Chcete-li to provést, klikněte na tlačítko "Nahrát fotografii".

K čemu je levý obrázek? Nakrájíme na několik částí (v závislosti na počtu položek menu). Například naše nabídka má 5 položek, což znamená, že výstupem bude 5 obrázků 382x50 pixelů.

Fáze 4

Pět obdržených obrázků musí být nahráno do skupinového alba. Dále přejděte na stránku skupiny a vyberte blok „Novinky“, přejmenujte jej na „Nabídka skupiny“ a poté klikněte na „Upravit“.

Fáze 5

Takže jsme se dostali do závěrečné fáze průvodce „Jak krásně navrhnout skupinu na VKontakte“. Otevřete záložku s názvem „Zdroj, který je ve spodním okně, musíte zkopírovat a poté vložit do „Zdrojového kódu“ V textu kódu nahraďte fotografii názvy souborů a označte výšku souboru (382 pixelů). Nyní vložte adresy odkazů nabídky. Název souboru je převzat z alba.

Fáze 6

Pro dokonalé spojení obrázků musí být splněno několik podmínek:

Název skupiny se musí vejít na jeden řádek;

Adresa webu je také jeden řádek.

Popis musí obsahovat 10 řádků.

Wiki značky VKontakte

Abyste pochopili, jak to krásně navrhnout, musíte se také seznámit s konceptem označení Wiki.

Co je to?

Wiki markup je tedy systém navržený k úpravě stránek podobným způsobem jako HTML. Než začnete vytvářet skupinu VKontakte, rozhodněte se o jejím typu. Design může být grafický a textový.

Návrh textového menu

Kód pro menu bude vypadat takto:

Začátek a konec kódu jsou označeny značkami. Každá ikona bude vypadat jako [] a poté popis.

Grafické menu

Kód pro takové menu bude sestaven podle následujícího principu:

! !! !!

Tyto informace samozřejmě pouze poškrábou povrch tématu označení Wiki. Více se o tom můžete dozvědět návštěvou oficiální skupiny VKontakte. Existuje mnoho užitečných informací a videonávodů, jak krásně navrhnout

Myslím, že každý, kdo aktivně používá sociální síť VKontakte, již narazil na krásně navržené skupiny a veřejné stránky. Řada z nich má kromě menu i mnoho stylizovaných podstránek, katalogů apod., což v podstatě tvoří malý web přímo uvnitř sociální sítě.

Zde je pár příkladů, aby každý pochopil, o čem mluvíme.




Takové skupiny vám umožní vyniknout mezi vašimi konkurenty a přilákat více uživatelů. Zvlášť když je zajímavý i obsah :)
V tomto článku budeme hovořit o tom, jak se to všechno dělá. Abychom vše analyzovali podrobněji a ponořili se do všech jemností, uveďme konkrétní příklad. Proběhne malá mistrovská třída o skupinovém designu.

Úplně první fází naší práce je nápad. Musíme pochopit, co a komu chceme říct. Ve VKontakte existuje několik formátů komunity a měli byste si vybrat na základě svých cílů. I když v budoucnu může být skupina převedena na veřejný formát a naopak.

vysvětluji prsty. Veřejnost- to je něco jako blog. Informační kanál. Jinými slovy, našim předplatitelům říkáme o určitých věcech a nebudou moci psát na zeď naší komunity. Maximálně komentovat.

Skupina umožňuje vytvořit komunitu, která je otevřenější konverzaci a diskuzi, kde lidé mohou přidávat příspěvky do kanálu svým vlastním jménem. Můžete do něj také přidat přátele ze svého seznamu. Na veřejnosti taková možnost neexistuje. Kromě toho má skupina trochu více možností pro integraci značek wiki (je zde sekce „Novinky“, do které můžete integrovat nabídku).

Globálně můžeme uvažovat takto: pokud potřebujeme vytvořit komunitu pro obchod, pak bych vzal „veřejný“ formát. Pokud mluvíme například o rybářských nadšencích, pak je lepší vzít „skupinu“. I když, každý si může dělat, co uzná za vhodné. Koneckonců, formát lze kdykoli změnit. Mějte však na paměti, že VKontakte zavádí omezení pro opětovnou změnu formátu komunity a po prvním použití budete muset počkat několik dní, než budete moci v případě potřeby vše vrátit. Proto je lepší funkčnost otestovat, než se skupina začne plnit obsahem.

V rámci této mistrovské třídy vezmu jako výchozí bod hru Mad Max podle stejnojmenného filmu, který vyšel jen před pár týdny, a vytvořím komunitu pro hráče s různými materiály k této hře. . Hlavním cílem je odvést provoz na váš herní web.

Formát bude „Skupina“, protože je nutné vytvořit přirozený příliv publika a maximalizovat komunikaci v rámci komunity. Hned upřesním, že použiji univerzální techniku ​​použitelnou jak ve skupinovém formátu, tak na veřejnosti. Tohle funguje všude.

Obsahu je hodně, začněme ten nápad oživovat!

Vytvořte skupinu

Chcete-li vytvořit skupinu, přejděte na „Moje skupiny“ v pravé nabídce svého účtu VKontakte a klikněte na modré tlačítko v horní části „Vytvořit komunitu“.

Mělo by se objevit okno, jako je toto, kde zadáme název naší skupiny a vybereme formát.

Po zadání potřebných informací se před námi otevře náš komunitní ovládací panel. V mém případě to vypadá takto.

Jak vidíte, přidal jsem pár parametrů: zařadil jsem video, audio nahrávky, diskuze a řadu dalších funkcí, které se mi budou hodit při budoucí práci při sbírání obsahu. To vše lze v budoucnu bez omezení měnit. Zapsal jsem si i adresu svého webu. Pokud nemáte web nebo jeho téma neodpovídá formátu komunity (jsou o různých věcech a nijak spolu nesouvisí), můžete tento řádek nechat prázdný.

V tomto případě jsem nastavil věkové omezení od 18 let, podobné těm, které u hry nastavili vývojáři. I když moc nepochybuji, že si hrají i děti.

Vše. Skupina byla vytvořena!

Nyní můžete začít navrhovat.

Formátování skupiny VKontakte

Tuto fázi lze rozdělit na 2 složky: grafickou a technickou. K práci budeme potřebovat šablonu pro vytvoření skupinového avatara a menu a také trochu fantazie a základní znalosti Photoshopu (alias Adobe Photoshop).

Šablona značek

Co je to šablona a co je to dokonce? Šablona je druh prázdného místa. V tomto případě jsme ve formátu *.psd označili oblasti pro obrázek pod nabídkou a avatarem skupiny.

Jak můžete vidět ve druhém příkladu na začátku tohoto článku, můžeme avatar a obrázek nabídky navrhnout ve stejném stylu. Zároveň je vizuálně rozřezán na 2 části. Šablona vám tedy umožňuje vytvořit obrázek tak, aby se eliminovalo přemístění grafiky a aby se obrázky co nejvíce přizpůsobily stejné úrovni.

Aby to bylo jasnější, zde je příklad.

Vidíme, že v obou částech obrázku je pruh s výhledem na obytnou čtvrť. Bez použití šablony je téměř nemožné to udělat přesně napoprvé. Budete muset upravit obrázky, měření nesrovnalostí až do 1px. Zatímco při použití šablony k ní jednoduše přidáme grafiku v rámci označení a okamžitě získáme požadovaný výsledek.

Rád bych poznamenal, že tato šablona je určena pro 1 řádek vysvětlení. Na ukázkovém snímku obrazovky jsou telefony. Pokud se objeví druhý řádek, budete muset použít jinou šablonu nebo opravit návrh ručně.

Mezitím přistupujeme přímo ke grafickému návrhu naší nové skupiny. Zde se vydávám cestou nejmenšího odporu a mířím do Google Images, abych našel části návrhu. Můžete také použít Yandex. Komu se co líbí víc?

Nemám designérské vzdělání, takže se nebudeme podrobně zabývat otázkami výběru písem a dalšími detaily. Po malém kouzlení ve Photoshopu jsem dostal tento výsledek.

Na levém fragmentu (kde je napsáno „Menu“) můžete také přidat několik spouštěčů. V tomto případě jsem se rozhodl obejít se bez nich. Vše. Návrh avatara je připraven. Ve Photoshopu stiskněte kombinaci kláves Shift+Ctrl+Alt+S a uložte naše fragmenty do složky na vašem pevném disku.

První fáze práce s grafikou je dokončena. Pojďme zpět do kontaktu.

Nastavení avatara a menu pro skupinu

Klikneme na dva typy místo ava naší skupiny a nahrajeme tam náš obrázek. Tady jsou tito kluci, pod nimi je také napsáno „Nahrát fotku“.

Přidejte obrázek. Zadejte pole a vyberte miniaturu. Všechno je zde jednoduché a neměly by být žádné problémy.

Jak vidíme, musíte znát ID komunity. Poznat ho je velmi snadné. Najděte nabídku ve své skupině (ihned pod avatarem) a otevřete „Statistiky komunity“. V tomto případě se něco podobného objeví v adresním řádku prohlížeče (čísla se budou lišit).

Tato čísla za „?gid=“ představují požadované ID skupiny. Výslednou hodnotu vložíme do formuláře skriptu a napíšeme název stránky, kterou chceme vytvořit. V tomto případě zadám „Menu“.

Stojí za zmínku, že stránka bude vytvořena pouze v případě, že je na sousední kartě otevřeno okno se skupinou. Jednoduše řečeno, musíte být přihlášeni do VK ve stejném prohlížeči. K takovým manipulacím má totiž přístup pouze správce skupiny a jím jmenovaní lidé. Náhodný kolemjdoucí nebude moci snadno přejít a změnit nastavení skupiny, do které nemá přístup do admin panelu.

Pokud je vše provedeno správně, otevře se stránka jako tato.

Toto je stejné okno, kde později vytvoříme označení wiki a vytvoříme interní nabídku pro naši skupinu. Zatím nám nezbývá než sem něco napsat. Poté klikněte na modré tlačítko „Uložit stránku“ a nahoře klikněte na odkaz Návrat na stránku.

Napsal jsem „Menu“ a moje stránka po uložení začala vypadat takto.

Zatím neexistuje žádný design, ale nyní potřebujeme pouze odkaz na tuto stránku. Vybereme ji v adresním řádku prohlížeče a vrátíme se na hlavní stránku naší skupiny. Ke krmení.

Zde vytvoříme příspěvek s následujícím obsahem: vložte obrázek a odkaz na stránku menu pro skupinu.

Klikněte na odeslat. Poté klikněte na čas odeslání zprávy a ze všech možností vyberte „Připnout“. Aktualizujeme stránku (klávesa F5 na klávesnici) a pokud je vše provedeno správně, dostaneme první výsledek: skupina našla avatara a odkaz na přechod do sekce nabídky.

Wiki označení pro nabídku skupiny VKontakte

Nyní se pustíme do návrhu samotného menu. Pojďme znovu do Photoshopu a vytvoříme návrh našeho menu. Při navrhování rozhraní si musíte pamatovat ty lidi, kteří budou přistupovat k VK prostřednictvím aplikace z mobilních telefonů. Jinými slovy, neměli bychom mít malé prvky a navíc se musíme snažit, aby bylo vše co nejjasnější. Abychom nemuseli hádat, jak to tady všechno funguje a kam máme kliknout... ale stačí ukázat na správnou položku a studovat informace, které hledáme.

Nebudu se nyní rozepisovat o tom, jak přesně sestavuji menu. Tady je to, co jsem dostal.

Minimální pole. Vertikální rozložení. Ideální formát pro responzivní menu. To znamená, že na mobilních telefonech nikam nic nepůjde. Vše bude přesně jako na obrazovkách počítačů a tabletů. Šířku nastavím na 500 px, aby se mi později nic nezmenšovalo a neztratil jsem dvakrát kvalitu obrázku. Výška není důležitá.

Obrázek jsme rozřezali na fragmenty a uložili je.

Vše. Nadešel čas na závěrečný akord – sbíráme menu v samotné skupině.

K tomu se vrátíme na hlavní stránku skupiny (kde je feed a náš obrázkový odkaz vedoucí do menu). Klikneme na obrázek menu a dostaneme se na stejnou stránku, kterou jsme dříve pro menu vytvořili.

Jste-li správcem nebo tvůrcem skupiny (v našem případě je to tento případ), pak v horní části stránky bude odkaz „Upravit“. Pojďme na to kliknout.

Poté přejdeme do režimu značkování wiki (pod tlačítkem Zavřít v pravém horním rohu stránky je takový rámeček s<>uvnitř). Když je aktivován požadovaný režim, je toto tlačítko zvýrazněno šedou barvou.

Poté klikneme na ikonu fotoaparátu a přidáme všechny fragmenty naší nabídky najednou. V režimu wiki neuvidíme samotné obrázky, pouze kód těchto obrázků s rozměry a parametry.

Chci umístit nabídku do středu a tak, aby mezi fragmenty nebyly žádné mezery. Každý z prvků proto zabalíme do tagu

a k již vnořenému parametru „noborder“ přidávám druhý parametr „nopadding“. První z nich zakáže obrys fragmentů a ohraničení buněk tabulky. Druhý odstraní okraje od okraje.

Prvním a posledním prvkem menu by neměla být tlačítka - na mém obrázku jsou to jen grafický prvek bez odkazu na vnitřní stránku, takže k nim přidáme parametr „nolink“. Tím odeberete možnost kliknutím na tento prvek otevřít část obrázku v samostatném okně. Nyní se kliknutím myši nic nestane. Toto je normální pozadí stránky. Neaktivní.

V mém případě vypadá kód nabídky takto.

Samostatně bych rád poznamenal, že po importu obrázků do VK vestavěný systém někdy nesprávně uvádí velikosti obrázků. Proto to musíme pečlivě sledovat a zobrazovat přesně ty, které jsme plánovali ve fázi návrhu. V opačném případě se může vše sesypat a hlavolam se nakonec nesejde.

Když máme napsaný kód a zarovnáme všechny prvky, uložíme stránku a uvidíme to samé, co bylo ve Photoshopu.

Zbývá poslední dotek – musíme vytvořit právě ty stránky, kam bude naše menu posílat lidi. Abychom to udělali, vraťme se znovu ke skriptu pro generování wiki stránek a tentokrát si objednejte tři stránky najednou. V tomto případě je také potřeba na každý něco napsat a jejich adresy si nezapomenout uložit někam z adresního řádku prohlížeče.

Následně do wiki kódu menu vložíme odkazy na nové stránky ve tvaru stránka-102302049_51013384, kde první číslo je id skupiny a druhé číslo stránky. I když obecně to není důležité. Koneckonců, stačí zkopírovat tento fragment adresy URL a vložit jej do označení.

V důsledku toho má kód nabídky následující podobu.

Navenek se nic nezměnilo. Ale když klikneme na položky nabídky, vidíme, že to nyní funguje!

Pokud jde o samotné značení a pravidla, podle kterých je kód napsán, doporučuji vám přečíst si skupinu VKontakte speciálně věnovanou této záležitosti. Kluci popsali všechny klíčové body a v jejich katalogu můžete snadno najít potřebný prvek a přijít na to, jak ho přidat na svou wiki stránku.




Nahoru