Grafické menu pro šablony skupiny VKontakte. Obal pro skupinu ve VK: cíle, použití, technické body

Dobrý den, moji milí!

Dnes vám to řeknu podrobně jak vytvořit menu pro skupinu vkontakte. Z mé zkušenosti menu ve skupině v kontaktu zvyšuje počet hovorů a žádostí o 20 %. Je důležité zodpovědně přistupovat k problematice tvorby skupinového menu. Proto jsem pro vás připravil šablonu menu PSD, která vám usnadní práci.

Pro začátek jsou dnes k dispozici dvě možnosti nabídky:

Možnost 1: Zavřete nabídku skupiny

Zavřená nabídka, otevře se po kliknutí na odkaz. V níže uvedeném příkladu se nabídka otevře kliknutím na odkaz "OTEVŘÍT MENU SKUPINY!".



Možnost 2: Otevřít nabídku skupiny (připnutý příspěvek)

Otevřená nabídka je v podstatě připnutý příspěvek s aktivním odkazem.



Druhá možnost nabídky se objevila relativně nedávno, když bylo možné připnout příspěvky ze zdi do záhlaví skupiny nebo veřejnosti. Nyní je nejúčinnější.

Obě verze používají označení wiki. Wiki značení umožňuje snadno a rychle upravit vzhled skupiny, vytvářet grafické tabulky a spoilery, formátovat text a pracovat s obrázky, odkazy a kotvami. Nebudu se popisováním podrobně zabývat, protože. vkontakte má vestavěný vizuální editor, který automaticky překládá váš obsah do značek wiki. Zde uvedu pouze hlavní kódy, bez kterých nelze udělat jídelníček.

Jak vytvořit otevřenou nabídku VKontakte

Proces tvorby menu rozebereme na příkladu Varianty 2, tzn. otevřít menu.

Abychom vám usnadnili orientaci, připravil jsem pro vás Šablona nabídky PSD: [Pozornost. Design VKontakte se změnil. Nové rozvržení a další relevantní informace v ]

Šablona nabídky skupiny PSD

K vytvoření externího menu jsou zapotřebí 2 obrázky: avatar (vpravo) a jeden centrální (obrázek-akce).

Rozměry avataru: 200 x 332 px

Rozměry středového obrázku: 395 x 282 px



Krok 1.

Pomocí šablony PSD nabídky skupiny stažené výše vytvořte dva obrázky správných velikostí.

Krok 2

Přejděte do své skupiny v „Správě komunity“ (vpravo pod avatarem). Najděte položku "Materiály" (na kartě "Informace") a nastavte je jako "Omezené".



Krok 3

Nyní se vraťte na hlavní stránku vaší skupiny a klikněte na „Upravit“ v bloku „Materiály“, který se objeví (již jsem jej přejmenoval na Group Menu).



Při úpravě stránky nastavte název, pomocí panelu nástrojů můžete vytvářet sekce nebo jakékoli jiné informace. Klikněte na „Uložit stránku“ a „Zpět na stránku“



Krok 4



V mém příkladu https://vk.com/page-42211349_47355854,

První číslice 42211349 jsou vaše ID skupiny

Druhé číslice 47355854 jsou ID stránky

Funkce: Další stránky můžete vytvořit ručně. Chcete-li to provést, klikněte na odkaz ve formuláři:
https://vk.com/pages?oid=-хххххххх&p=název stránky
Kde,
xxxxxxxxx je id vaší skupiny
pagename – název vaší stránky

Krok 5



A zveřejněte příspěvek.

Krok 6

Nyní nahrajte avatar skupiny (obrázek vpravo). Na zdi se objeví duplicitní obrázek avatara - smažte jej.

Krok 7

Nyní pozornost. Klikněte na ZÁZNAM DOBA PUBLIKACE (levý dolní roh příspěvku).



A klikněte na „Připnout“. Zavřete toto okno a obnovte stránku skupiny (F5).



Krok 8

Zapíšeme stav skupiny (použijte pouze 1 řádek), abychom zarovnali obrázky, pokud obrázek na vašem avataru nezačíná úplně shora (v mé šabloně avataru možnost 2). A tady je to, co jsme dostali:



CELKOVÝ.

Menu je připraveno! Nyní, když kliknete na centrální obrázek, otevře se vaše nabídka:



Zde jej můžete upravovat, zveřejňovat fotky, videa, vytvářet nové sekce, zveřejňovat odkazy.

Uvnitř hlavního menu lze také vytvořit grafické menu (podmenu). Jeho šířka by neměla přesáhnout 600 px. Výška je neomezená. Co vám umožňuje vytvářet vynikající přistání VKontakte.



Ale o tom budu mluvit podrobněji v dalších článcích. Přihlaste se k odběru aktualizací blogu, abyste měli přehled o nových čipech. Lajkujte a sdílejte článek se svými přáteli.

Své dotazy nebo názory pište do komentářů níže.

Krásný design komunity VKontakte není rozmar, ale důležitý prvek, který utváří důvěru uživatelů ve vás a vaši společnost. Pokud je veřejná stránka nebo skupina navržena neprofesionálně, mohou vaši potenciální zákazníci zcela logicky usoudit, že jste ve své práci také nedbalí. Abyste tomu zabránili, ujistěte se, že vaše stránka VKontakte je krásná, čistá a snadno použitelná. Jak to udělat? Čtěte níže.

Skutečné velikosti obrázků "VKontakte"

Před časem vývojáři sociální sítě VKontakte spustili nový design. To vedlo k tomu, že se změnily velikosti a principy zobrazování obrázků. Poznámka, která bude uvedena níže, odpovídá všem inovacím a obsahuje rozměry, které jsou v daném okamžiku relevantní.

Nyní se na jednotlivé položky podíváme blíže.

Velikost avatara VK

Minimální velikost avatara je 200 x 200 pixelů. Pokud se pokusíte nahrát obrázek, který je méně než 200 pixelů široký nebo dlouhý, zobrazí se tato chyba:

Maximální velikost avatara je 200 x 500 pixelů. V zásadě ale můžete nahrát větší obrázky – až 7000 pixelů na každou stranu. Hlavní věc je, že poměr jejich stran nepřesahuje 2 ku 5.

Ukážu vám to na příkladu.

Mám obrázek. Jeho velikost: 200 x 800 pixelů (poměr 2:8). Při načítání nedochází k žádným chybám. Tento obrázek však stále nemohu použít, protože „Kontakt“ mi neumožňuje jej úplně vybrat.

Pokrýt

Velikost obalu pro plnou verzi webu je 1590 x 400 pixelů.

Upozornění: v mobilní verzi a aplikacích se nezobrazuje plná verze obalu, ale pouze jeho část o velikosti 1196 x 400 pixelů. Podívejte se, jak je oříznut v mobilní aplikaci:

Abyste tomu zabránili, umístěte hlavní prvky krytu v rozmezí 1196 x 400 pixelů.

Přiložené obrázky

V aktualizovaném designu "Kontakt" byla pevně stanovena šířka kanálu novinek. To znamená, že obrázky připojené ke sloupku již nejsou roztažené, ale zůstávají tak, jak jsou. Pokud tedy chcete, aby váš obrázek zaplnil celý prostor v News Feedu, musí být široký alespoň 510 pixelů. Nejlepší je, aby to byl čtverec nebo obdélník v orientaci na šířku.

Zní to trochu zmateně :) Proto vám to ukážu na příkladu.

Řekněme, že máme čtvercový obrázek se stranami 510 pixelů. Pokud jej připneme k našemu příspěvku, bude vypadat skvěle ve zpravodajském kanálu na všech zařízeních:

A takto vypadá horizontální obrázek v orientaci na šířku (šířka 510 pixelů):

Jak vidíte, čím užší je obrázek (na výšku), tím menší vypadá ve feedu smartphonu. Chcete-li to ověřit, podívejte se na obrázek níže:

Je jasné, že rozdíl zde není nijak zvlášť kritický a uživatelé smartphonů budou stále brát v úvahu váš obrázek, jen ve druhém případě budou o něco pohodlnější.

Obrázky pro příspěvky s odkazy

Všechna tato data jsou převzata z kódu značky Open Graph:

Pokud není zadán Open Graph, je název převzat z metaznačky Title a obrázek je převzat z článku. Zároveň jej můžete snadno změnit – nebo pomocí speciálních šipek vybrat jiný obrázek z článku:

Nebo nahrajte vlastní:

Minimální velikost obrázku, který můžete použít jako oznámení pro svůj článek, je 537 x 240 pixelů. Můžete však nahrát větší obrázky, pokud je dodržen poměr stran.

Obrázek pro článek vytvořený v editoru

Velikost obrázku pro obálku článku vytvořeného v editoru je 510 x 286 pixelů. Je lepší, když je tmavé barvy a víceméně jednobarevné, protože na světlém pozadí se ztrácí název článku a komunity.

Dobrý příklad:

Ne moc dobrý příklad:

Velikost fotografie a videa pro příběhy

Velikost fotografií je 1080 x 1920 pixelů. Velikost videa je 720 x 1280 pixelů.

Specifikace pro nahrávání videa:

• až 15 sekund;
• ne více než 5 MB;
• kodek h.264;
• Zvuk AAC.

V příbězích musíte použít fotky a videa ve vertikálním formátu.

Vezměte prosím na vědomí: v tuto chvíli mohou příběhy jménem komunit přidávat pouze velké komunity, pro které vývojáři VKontakte tuto funkci otevřeli. A to pomocí oficiální aplikace. Nelze to provést z počítače.

Velikost obalu fotoalba

Velikost obrazu videa

1280 x 720 pixelů.

Wiki stránka

Oblast obsahu wiki je široká 607 pixelů. Pokud nahrajete větší obrázek, automaticky se načte o šířce 400 pixelů. Příklad: Mám obrázek o rozměrech 1366 x 768. Pokud jej přidám na stránku wiki, vypadá takto:

Chcete-li změnit velikost obrázku, musíte na něj kliknout a nastavit požadované hodnoty:

Jak pracovat s wiki stránkami, popíšu podrobně níže. Proto se zde tímto bodem nebudeme zabývat.

Jak zajistit, aby se obrázky VKontakte nezmenšovaly? Vliv pozadí a velikosti na kvalitu obrazu.

Pokud jste někdy zkoušeli nahrát obrázky na VKontakte (ať už to byl obrázek avatara nebo jen fotografie z vašeho výletu), pravděpodobně už víte, že mají tendenci se zmenšovat. To je patrné zejména na tmavém (a zejména červeném) pozadí a při nepříliš velkém obrázku. Příklad:

Jak zajistit, aby se kvalita snímků nezhoršila?

Aby se obrázek nezmenšil (přesněji se zmenší, ale v mnohem menší míře), je nutné jej 2–3x zvětšit, než je požadovaná velikost. Pokud například potřebujeme vytvořit avatara o velikosti 200 x 500 pixelů, pořídíme snímek o velikosti 400 x 1000 pixelů. Pokud potřebujete vytvořit menu o velikosti 510 x 400 pixelů, vezmeme - 1020 x 800.

Tmavě modrý obrázek, který jsem zveřejnil výše, je 510 x 350. Udělal jsem jej dvakrát větší (1020 x 700) a uložil. Vyplynulo z toho toto:

jak to opravit? Odpověď je velmi jednoduchá – je potřeba zvolit jiné pozadí. Pixely jsou totiž na tmavém pozadí vidět lépe než na světlém. Pokud tedy chcete dosáhnout dokonalé kvality (ačkoli obrázek výše již vypadá docela normálně), musíte trochu změnit barevné schéma. Udělejte například pozadí bílé a text modrý:

Jak navrhnout záhlaví stránky

Záhlaví vaší veřejné stránky nebo skupiny je první věc, kterou uživatelé uvidí, když vás navštíví. Ve většině případů je na tomto místě umístěno navigační menu založené na veřejných materiálech, některých zajímavých příspěvcích nebo důležitých oznámeních. Podívejme se na příklady, jak různé společnosti tento prostor využívají.

Pokrýt

Není to tak dávno, co VKontakte představil aktualizaci - nyní můžete na stránky nahrávat velké a krásné obaly (1590 x 400 pixelů). Chcete-li to provést, přejděte do nastavení a klikněte na tlačítko "Stáhnout".

Na obálku můžete umístit cokoli: od názvu a motta vaší společnosti po nejrůznější propagační akce, nabídky a dokonce i soutěže.

Doporučuji věnovat zvláštní pozornost možnostem dynamického krytí. Přečtěte si náš článek o tom, jak to funguje, k jakým účelům jej lze použít a s jakými službami jej nainstalovat.

Příklady dynamických krytů:

Obálka + popis komunity + odkaz na stránky

Některé společnosti konkrétně neopravují žádné příspěvky v záhlaví, aby uživatelé měli možnost přečíst si základní informace o stránce a okamžitě přejít na web.

Popis s hashtagy

Některé společnosti přidávají ke standardnímu popisu stránky hashtagy, které ji charakterizují. Děje se tak proto, aby stránka měla jasnější relevanci a díky tomu byla výše ve vyhledávání relevantních dotazů. Abych byl upřímný, nevím, jestli tato metoda funguje nebo ne. Případy na toto téma jsem neviděl, takže pokud někdo ví, budu vděčný, když nasdílíte odkaz.

Připnutý příspěvek sdělující, o čem stránka je

Pokud chcete o své stránce mluvit podrobněji (s fotografiemi, odkazy a krásným rozložením), můžete do záhlaví připojit wiki příspěvek nebo článek vytvořený v editoru s jasným obrázkem na oznámení, který uživatele povzbudí, aby Klikněte na to. Příklad takového příspěvku:

A zde je to, co uživatel uvidí po kliknutí na odkaz:

Otevře se nabídka skupiny

Otevřenému menu říkám takové menu, které hned ukazuje, z jakých položek se skládá. To znamená, že obrazové oznámení příspěvku na wiki zcela duplikuje jeho obsah. Uživatelé tak okamžitě vidí, co je uvnitř čeká. Ukážu vám to na příkladu.

Takto vypadá připnutý příspěvek v záhlaví stránky Flatro:

Skupinové menu zavřeno

Uzavřené menu je stejný wiki příspěvek jako v předchozím odstavci, pouze oznámení obsahuje obrázek bez položek menu. Obvykle na něj píší: „Nabídka“, „Navigační nabídka“ nebo „Navigace ve veřejných materiálech“.

Když na něj klikneme, uvidíme:

Mimochodem, stojí za zmínku, že to nejsou zdaleka jediné možnosti. Ve skutečnosti si na tento obrázek můžete napsat, co chcete. Hlavní je, že uživatel na to chce kliknout a chápe, co ho potom čeká. Příklad:

Skupinové menu

Sloučené menu je, když obrázek na oznámení vašeho menu je jeden obrázek s avatarem. O něco níže vám podrobně řeknu, jak si takové menu udělat, ale zatím se jen podívejte, jak krásně to vypadá.

GIF a avatar v jednom obrázku

Ale tento design klobouku mě opravdu hodně zaujal. Automaticky hrající gif se spojí s avatarem do jediné kompozice a přitahuje pozornost uživatelů, i když na něm nejsou vůbec žádné informace.

Mimochodem, tento příklad jsem viděl ve skupině obchodníka SMM Sergeje Šmakova. Takže děkuji za nález :)

Skryté menu

Skryté menu je dostupné pouze pro skupiny (stránky takovou funkcionalitu nemají). Chcete-li jej zobrazit, musíte kliknout na příslušný odkaz. Výhodou této metody návrhu je, že uživatelé vidí hlavní informace o komunitě, a pokud chtějí použít nabídku, stačí udělat jedno kliknutí. Zde je však malá nevýhoda – ne všichni uživatelé si jsou vědomi existence této funkce, takže vašemu menu může být věnována menší pozornost, než kdyby byla připnuta v horní části stránky.

Automatické přehrávání videa

Na konci listopadu 2015 se na sociální síti VKontakte objevila zajímavá novinka – jakmile uživatel vstoupí na vaši stránku, automaticky se spustí video připojené k záhlaví. Pomocí této techniky můžete upoutat ještě větší pozornost uživatelů (zejména těch, kteří vaši stránku navštívili jako první) a zároveň neobtěžovat ty, kteří nemají rádi, když je jim vnucován jejich obsah, protože video se přehrává bez zvuku a prakticky neruší .

Jak přidat toto video do záhlaví vaší stránky?

K tomu je třeba splnit tři podmínky:

• Připojte video k příspěvku a připněte tento příspěvek na začátek komunity.
• Kromě videa by k záznamu nemělo být připojeno nic dalšího. Volitelné pouze video a text.
• Video musí nahrát VKontakte – přehrávače třetích stran nejsou podporovány.

Příspěvek, který má spoustu repostů

Dalším způsobem, jak produktivně využít prostor v záhlaví vaší stránky, je připnout na ni jeden ze svých nejúspěšnějších příspěvků – takový, který již získal a stále získává velké množství lajků a sdílení. Proč to dělat, myslím, že každý chápe - čím více repostů, tím větší pokrytí, tím více odběrů stránka získává.

Oznámení o nových klipech, albech, událostech

Prezentace nových produktů/služeb

Slevy a akce

Případy, recenze zákazníků

Reklama aplikací

Praktické vtipy

Pravidla komunity

Odkazy na jiné sociální sítě

Vyjmenoval jsem zdaleka ne všechny možnosti designu čepice. Ve skutečnosti můžete na obálce a v připnutém příspěvku zveřejňovat jakékoli informace: pracovní místa, oznámení, odkazy na nejprodávanější produkty atd. Neomezujte se tedy na výše uvedené příklady. Zapněte svou představivost a použijte design své komunity k dosažení svých cílů.

Jaký by měl být avatar

Avatar není jen krásný obrázek s logem vaší firmy, ale pro obchodníka pracovní nástroj, se kterým dosahuje svých cílů. Pojďme se blíže podívat na to, jak by to mělo být, aby upoutal pozornost uživatelů a povzbudil je k dokončení cílové akce. Začněme miniaturou.

Miniatura avatara

1. Text na miniatuře avatara musí být dostatečně velký, aby byl čitelný.







2. Text nesmí přesahovat miniaturu.







3. Uživatelům by mělo být jasné, co je zobrazeno na profilovém obrázku.







4. Pokud je to možné, je nejlepší nepoužívat obrázky z akcií, protože často snižují důvěryhodnost společnosti.




5. Je nežádoucí, aby miniatura avatara byla příliš vybledlá a nudná, jinak se ztratí na pozadí jasnějších avatarů konkurentů.



6. Pokud chcete, aby váš avatar vypadal moderně, vytvořte jej v minimalistickém stylu: méně textu, stínů, přechodů a prvků, které nenesou žádný sémantický význam. Váš avatar by měl být co nejjednodušší a nejúhlednější. Tento styl je momentálně trendy.







7. Pokud je vaším cílem upoutat pozornost uživatelů a odlišit se od ostatních avatarů ve feedu, budete muset zapnout fantazii. Přemýšlejte o tom, na co si sami dáváte pozor při hledání zajímavých komunit? Tady mě například vícekrát zaujaly avatary s hořícím světlem, které většinou značí, že přišla nová zpráva. Jde o velmi starou techniku, ale z nějakého důvodu na mě stále působí – až uvidím takové světlo, určitě na něm nechám oči.

Neříkám, že tento trik bude fungovat i na vaší stránce. Pointa, kterou chci zdůraznit, je, že existuje tolik způsobů, jak vyniknout, stačí si položit otázku a být trochu kreativní. Zde je například další zajímavý nápad, který by mě jen stěží napadl:

Avatar je černý kruh: velký a malý. Zdálo by se, proč to vůbec dělat? Když ale listujete seznamem komunit, takoví avataři přitahují pozornost, protože se velmi liší od všech ostatních.

Jaké informace lze umístit na miniaturu avatara

Ačkoli je miniatura avatara velmi malá, může (a měla by) být použita k přilákání sledujících do vaší komunity. Jak to udělat? Podívejme se na několik možností:

Oznámení o novém produktu/službě/události

Výhody společnosti/služby/stránky

Telefonní číslo společnosti

Výhodné ceny

Doprava zdarma

Mimochodem, velmi často se k názvu samotné skupiny přidává informace o tom, že společnost poskytuje dopravu zdarma, takže tomu budou uživatelé určitě věnovat pozornost.

Skladem

Soutěže

Pracovní místa

Jaký by měl být samotný avatar?

Zvažoval jsem, jaká by měla být miniatura avatara a jaký text na ni lze umístit. Nyní přejděme k samotnému avatarovi. Plná verze avatara se zobrazí pouze v komunitě, která nemá nastavenou obálku. Právě pro takové případy jsem napsal tuto část. Jak by tedy měl vypadat váš komunitní avatar, aby uživatelé okamžitě pochopili, že vaše společnost přistoupila k tvorbě stránky zodpovědně a profesionálně.

1. Avatar musí mít vysokou kvalitu. O tom, jak toho dosáhnout, jsem psal o něco výše. Pro ty, kterým tato část unikla, řeknu ve zkratce – velikost avatara by měla být 2-3x větší, než jste plánovali.
2. Je žádoucí, aby byl avatar kombinován s nabídkou: být stejného barevného schématu, mít stejné fonty, prvky atd. Díky tomu bude vaše záhlaví stránky vypadat úhledněji a profesionálněji. Příklad:
3. Samotný avatar a miniatura avatara se mohou lišit. Můžete například na avatara nakreslit kruh, upravit jej podle libosti, vybrat tuto oblast jako miniaturu a upravit zbytek avatara v jiném stylu.




Další možností je rozdělit avatara na dvě části. Jeden pro miniaturu a jeden pro zbytek avatara.




4. Chcete-li povzbudit uživatele, aby se přihlásili k odběru vaší stránky nebo napsali zprávu zástupci společnosti, můžete umístit příslušnou výzvu k akci úplně dole na profilový obrázek a doplnit ji šipkou směřující k tlačítku.




5. Snažte se na avatar nedávat příliš mnoho informací, jinak bude vypadat přetíženě a neupraveně. Přidejte do něj jen ty nejdůležitější body a ujistěte se, že mezi nimi je „vzduch“.

Jaké informace lze umístit na avatar?

Ve skutečnosti lze na avatara umístit cokoli. Na rozdíl od miniatury je opravdu kam se toulat. Hlavně to nezneužívat :)

Doména webu

Telefon / adresa / otevírací doba

Soutěže/propagační akce

Nejčastěji nakupované produkty/novinky

informace o doručení

Reklama v mobilních aplikacích

Hlavní výhody firmy / stránky / produktu atd.

Obnovení sortimentu/nové výtvory atd.

Informace, že vaše komunita je oficiální

Informace o nadcházejících akcích

Adresy účtů v jiných sociálních sítích

Rozšířený popis stránky

chlubí se

Obecně lze na avatara umístit naprosto jakékoli informace. Zahrnul jsem jen několik nápadů, abyste viděli, co dělají ostatní, a inspirovali se jejich příklady. Mějte na paměti hlavní doporučení: avatar by měl být vysoce kvalitní, písmo by mělo být velké a mezi prvky by mělo být více „vzduchu“.

Jak vytvořit sloučený avatar a menu

Chcete-li vytvořit sloučený avatar a nabídku, budete potřebovat Adobe Photoshop nebo jeho ekvivalent. Vysvětlím celý proces pomocí Photoshopu jako příklad. Tak pojďme.

1. Stáhněte si šablonu pro Photoshop, kterou jsem speciálně připravil pro tento článek. V normální velikosti (nabídka - šířka 510 pixelů, avatar - 200) nebo zvětšená (nabídka - šířka 1020 pixelů, avatar - 400).
2. Otevřete obrázek, který chcete použít jako základ.
3. Zkopírujte ji, vložte do šablony a umístěte ji tak, jak chcete, aby byla vyříznuta.

1. Přidejte efekty, text, grafiku a další.

1. Pokud nechcete, aby se část obrázku ztratila (v této mezeře, která je 50 pixelů), přesuňte ji doprava, jak je znázorněno na následujícím obrázku:

1. Vyberte nástroj "Vnoření" a klikněte na tlačítko "Fragmenty podél vodítek".

1. Odstraňte nepotřebné fragmenty (klikněte pravým tlačítkem - "Odstranit fragment") a upravte stávající (klikněte pravým tlačítkem - klikněte na prázdné místo - vezměte požadovanou oblast a roztáhněte ji na požadovanou velikost).

1. Přejděte do sekce "Soubor" a vyberte příkaz "Uložit pro web".

1. Přejděte na místo, kam jste uložili obrázky (na plochu nebo do nějakého konkrétního adresáře) a najděte tam složku s názvem „Images“. Zde budou vaše obrázky. Nyní zbývá pouze vyplnit je na stránce.

P.S. Výšku avatara lze změnit podle vašeho uvážení. Vzal jsem maximální velikost - 500 pixelů, ale můžete mít tuto hodnotu méně. Například jako na stránce „Značky Wiki“:

Jak používat widgety

Widgety jsou také součástí designu komunity VK. S jejich pomocí může uživatel: zadat objednávku, přihlásit se k odběru newsletteru, zúčastnit se soutěže, číst a zanechat recenze, otevřít komunitní vyhledávání, získat dárek, slevový kupón atd.

Zde je několik příkladů toho, jak vypadají widgety na stránce VKontakte:

Jak vkládat obrázky

Pokud jste webdesignér nebo máte umělecký vkus a smysl pro krásu, pak pro vás nebude těžké vymyslet firemní identitu pro vaše obrázky. Zdá se mi však, že takových lidí bude v tomto článku menšina (mimochodem ani já mezi ně nepatřím). Pojďme se proto na příkladech úspěšných firem podívat blíže, jak se to dělá.

Mimochodem, mějte na paměti, že téměř všechny známé společnosti VKontakte označují své obrázky, to znamená, že přidávají malé logo, adresu své stránky nebo vodoznak. To zvyšuje povědomí o značce a chrání vaše obrázky před kopírováním. Jestli to za to stojí, to si každý posoudí sám. Jediné, co bych chtěl poradit, je, že pokud se pro to rozhodnete, snažte se ujistit, že vaše logo není příliš světlé a nezabírá příliš mnoho místa, jinak bude veškerý důraz kladen na něj a obrázek ztratí svou přitažlivost.

Kde mohu získat dobré obrázky?

Na našem blogu máme dobrý článek na toto téma - "". Všechny jsou zdarma, ale některé vyžadují registraci. Pokud nenajdete nic vhodného pro sebe, zkuste hledat podle klíčového slova + tapeta (nebo, pokud v angličtině, tapeta). Takový požadavek obvykle vytváří vysoce kvalitní obrázky. Zde je ale potřeba být obezřetný a zkontrolovat typ licence, jinak, pokud máte seriózní podnikání, můžete se dostat do problémů.

A co ti, kteří nevědí, jak pracovat ve Photoshopu?

Pokud jste nikdy nepracovali ve Photoshopu (ani v jiných grafických editorech) a ještě si nejste připraveni věnovat čas jeho zvládnutí, můžete využít služeb, které již mají hotové obrazové šablony pro různé sociální sítě:

1. Fotor.com

Poté na levé straně obrazovky vyberte šablonu, která nás zajímá. Vezměte prosím na vědomí, že pouze ty šablony, které nemají ikonu diamantu, jsou poskytovány zdarma.

Vložte ji do šablony, vyberte ji levým tlačítkem myši, vyberte příkaz Vrstva (ikona sendviče) a klikněte na Přesunout dolů. Náš obrázek tedy půjde na pozadí a všechny nápisy se na něj překryjí.

Poté změníme text, písmo, velikost písma, polohu nápisu atd.

Poté klikněte na ikonu v podobě diskety, vyberte název, formát obrázku, kvalitu a klikněte na tlačítko Přihlásit se ke stažení.

2.Canva.com

Další služba, která vám pomůže krásně uspořádat váš obrázek. Funguje na stejném principu jako předchozí. Registrujeme se do služby (můžete použít svůj Google+ účet nebo e-mail).

Vyberte si pole působnosti. Přeskočíme krok, ve kterém budete požádáni o pozvání přátel. Dostaneme se do hlavní nabídky, kde vybereme příspěvek na Facebooku, pokud potřebujeme obdélníkovou fotku, nebo příspěvek na Instagramu, pokud potřebujeme čtvercovou.

Vyberte šablonu (pokud je šablona označena „FREE“, pak je zdarma), změňte text.

V případě potřeby nahrajte svůj obrázek, upravte velikost, změňte text, font a polohu nápisu. Poté klikněte na tlačítko "Stáhnout", vyberte formát obrázku a uložte jej do počítače nebo jiného zařízení.

Jak formátovat články v editoru

Od nedávné doby může VKontakte sázet články ve speciálním editoru. Chcete-li vytvořit článek, musíte kliknout na písmeno "T":

Jak používat značky wiki

No a tady se dostáváme k nejzajímavějšímu a zároveň nejtěžšímu úseku. Možná jsou mezi čtenáři lidé, kteří nevědí, co je označení wiki, a obecně tento termín slyší poprvé. Proto, speciálně pro vás, uvedu definici, kterou dává samotný "Kontakt".

Wiki markup je značkovací jazyk, který se používá ke zdobení textu na webových stránkách (obvykle související s třídou wiki projektů) a usnadňuje přístup k funkcím jazyka HTML. Na našem webu jsou wiki stránky dobrou alternativou k běžným příspěvkům a textové navigaci. Pokud potřebujete vytvořit velký článek s různým formátováním textu (tučné, podtržené, nadpisy atd.) nebo do něj přidat grafiku, nebo jen vytvořit barevné navigační menu pro vaši komunitu, wiki je nepostradatelná.

Stejně jako Wordpress (nebo jakýkoli jiný CMS) má HTML editor, pomocí kterého vytváříte články, Contact má svůj vlastní editor pro tvorbu a úpravu wiki stránek. Vypadá to takto:

Pomocí tohoto editoru se vytvářejí navigační nabídky a také články s obrázky, videy a zvukovými nahrávkami. O něco níže podrobně rozeberu, jak pracovat v tomto editoru, ale nejprve vás žádám, abyste si pro sebe uložili dva odkazy. Hodně vám pomohou při učení wiki značek.

Tento článek bude podrobným manuálem a řeknu vám, jak vytvořit nabídku pro skupinu VKontakte. Krásně navržené menu skupiny VK přispívá ke skutečnému nárůstu návštěvníků a růstu prodeje na webu.

Ahoj moji milí čtenáři. Dnes vám to povím jak vytvořit krásné menu pro skupinu VKontakte a zcela zdarma. Mimochodem, když jste se naučili vytvářet taková témata, můžete na tom trochu vydělat -))). Už ani jeden komerční web nefunguje bez vytvoření vlastní komunity na sociálních sítích, zejména VK, která zaručeně pomůže přivést nové zákazníky a také propagovat vaše podnikání.

Ale pokud vaše komunita není atraktivní a jak je na tom každý, kdo tam chce zůstat? Myslím, že nikdo!!! Vyzdobme si tedy naše skupiny kvalitním designem a naučme se, jak na to velmi rychle. Než začnete vytvářet grafiku a naši budoucí nabídku, musíte si do počítače nainstalovat Photoshop pro další řezání obrázků. Mnozí se budou ptát, proč vůbec potřebujete obrázky stříhat. Jde o to, že pro každý odkaz na menu budeme muset vytvořit samostatný pruh z obecného banneru.

Dnes existuje několik typů vytvořeného menu:

• Otevřít s aktivními položkami;
• Zavřeno jako připnutý sloupek;
• Se samostatnými obrázky nebo společným sousedním obrázkem banneru a menu.

Podstata vytvoření obou možností je stejná. Pouze hlavní rozdíl je v dalších prvcích a typech záznamů a tento článek bude podrobněji popsán v tomto článku.

Práce s menu nám pomůže označení wiki, který je dnes zabudován do textového editoru VKontakte. Od běžného se liší tím, že použije standardní příkazy k zobrazení konkrétního obrázku a vložení odkazů na potřebné prvky. Samotné označení wiki vám umožňuje vložit kód pro zobrazení obrázků, videí a dalších prvků.

Nabídka uzavřená skupina VK

V tomto případě uvidíme vlevo od avatara hlavní skupiny hypertextový odkaz ve formě nápisu „skupinové menu“, po kliknutí se otevře naše nabídka s aktivními položkami a obrázky.

Menu bude vypadat takto:

Otevřít nabídku skupiny (připnuté záběry)

Spodním řádkem je vytvoření již otevřených položek menu, které se zobrazí v popisu samotné skupiny, kde se obvykle zobrazuje podle všech podmínek. K popisu bude připojen náš obrázek, který si předem připravíme a propojíme se stránkou, na které budeme mít aktivní předměty. Toto menu je v poslední době velmi oblíbené a je mezi zákazníky žádané. Vypadají takto:

Jak vytvořit krásné menu pro skupinu VKontakte: pokyny krok za krokem

Nejprve si tedy budeme muset vytvořit avatara hlavní skupiny, kterého umístíme vpravo, a útržek našeho menu ve formě banneru.

• Pro avatara 200x332 pixelů;
• Pro hlavní menu banner 395x282 pixelů.

Jak vidíte, výška obrázků je různá a je to provedeno tak, aby se obrázky nepohybovaly na výšku a byly na stejné úrovni, protože výška názvu komunity a stavu trvá asi 50 px a budeme potřebovat pro odstranění této hodnoty z výšky nabídky.

Aby bylo jasno, pokud je výška avatara hlavní skupiny 332, tak od ní odečteme 50 a dostaneme výšku hlavního menu rovnou 282. Pokud na rozměrech nezáleží, pak lze výšku nastavit na libovolnou.

Dalším krokem po vytvoření komunity bude nastavení materiálů a zde musíme účastníkům zakázat vytváření dalších stránek a bloků, ale pouze psaní na zeď. K tomu bude nutné přejít do sekce pod skupinovým avatarem nazvané „správa komunity“, kde potřebujeme učinit naše materiály „omezené“, jak je uvedeno níže.

Nyní se pustíme do tvorby celkové kompozice. Samozřejmě můžete místo avatara a do popisu vložit obrázek, ale nebuďme amatéři a ukažme si, jak to udělat profesionálně, aby to byl jeden plnohodnotný obrázek, který se změní v druhý.

Vytvořme si ve Photoshopu nové plátno o rozměrech 600x350 pixelů, které použijeme jako šablonu tím, že do ní vyřízneme otvory pro naše obrázky. Abychom fungovali, musíme přeložit velikosti všech prvků a pravítek v pixelech, a to se provádí následující cestou: „Edit-Setting-Basic“ a zde již nastavujeme pixely.

Dalším krokem při vytváření otevřené nabídky je zhotovení výstřižků pro banner a avatar, které následně obdržíme ke stažení. Chcete-li to provést, přejděte do části levého vertikálního menu a vyberte řezání.

Pomocí levého tlačítka myši, jako když vybíráte oblast, musíte vybrat bloky o velikostech, které potřebujeme, a po každém výběru stisknout tlačítko mazání „Odstranit“ a vybrat 50% šedá. Takové akce povedou k tomu, že bloky budou mít požadovanou velikost a budou zvýrazněny jinou barvou než hlavní pozadí.

Měli byste získat následující:

A teď už jen vyberte gumu a pomocí funkce „magická guma“ klikněte na každý šedý blok a získáte šablonu s výřezy. V dalším kroku vybereme náš hlavní obrázek a dáme jej pod pozadí a získáme hotové obrázky, na které můžeme napsat text s názvem menu nebo jinými reklamními prvky.

Skvělý. Poté, co vložíte obrázek našeho návrhu, stačí vybrat "uložit pro web" a získáme 2 naše obrázky jako výstup. Nyní se vrátíme k naší skupině a můžeme vyplnit hlavního avatara (vertikální). Banner pro menu využijeme o něco později při práci s kódem wiki.

Vytvořme samotné menu s aktivními položkami, které uživatele přesměrují na potřebné sekce webu třetí strany nebo do alb a adresářů v samotné skupině. Pro změnu použijeme nový obrázek -))).

Vraťte se tedy do Photoshopu a vytvořte nové plátno o rozměrech 400x300 pixelů. Poté vybereme v sekci: file-place a vybereme obrázek na pozadí nabídky.

Na obrázek umístíme tlačítka naší budoucí nabídky a obrázek ořízneme, jak jsme to udělali výše, výběrem potřebných bloků. Poté také vybereme „uložit pro web“ a získáme složku s našimi řezy. V mém případě jsem dostal 4 obrázky v samostatné složce.

Nyní musíme vyplnit obrázky vyložené z Photoshopu do samostatného alba a skrýt se před zvědavýma očima. Po nahrání získá každý obrázek svůj nový název a jedinečné ID.

Upozorňujeme, že musíte mít:

• Otevřené materiály v "omezeném" režimu;
• Zahrnuty diskuse;
• Složka s fotografiemi je otevřená všem.

Nyní zbývá nastavit naši stránku, kde se bude zobrazovat v nabídce. Chcete-li to provést, přejděte na hlavní stránku komunity a vyberte čerstvé materiály a upravte a zavolejte „NAŠE MENU“.

Dále musíme vložit obrázky, které jsme získali při řezání ve Photoshopu. Někdo používá značkovací kódy, ale abych nebyl chytřejší, doporučuji jednoduše zvolit vložení obrázku kliknutím na ikonu fotoaparátu a nahrát jeden po druhém jeden po druhém.

Při práci v textovém editoru, pokud po načtení obrázků klikneme na ikonu závorek v pravém horním rohu, měli bychom vidět následující kód:

Rada: Důležitým bodem po nahrání obrázků je odstranění odsazení. Řeší se to vložením „nopaddingu“ před velikosti obrázků.

Pro upřesnění, co se odkud bere, je popsáno níže, ale vzhledem k tomu, že se vše vloží automaticky a nemusíte být chytří, otevřete si, jak někteří lidé píší každý obrázek a vezmou si ID, pak stačí načíst a uložit.

[]
kde xxxxx je id vašeho obrázku
yyyyy – šířka v pixelech (ne více než 388)

Mělo by to skončit takto:

Nyní jsou naše obrázky shromážděny v samostatném banneru. A chcete-li ke každé položce přidat odkaz, jednoduše klikněte na obrázek s deaktivovaným označením a vložte zkopírovanou adresu URL do sekce odkazu.

A tak se dostáváme k nejdůležitějšímu a poslednímu bodu při vytváření našeho menu VKontakte. Nyní musíme uložit naši obrázkovou stránku a zkopírovat její adresu. V mém případě to vypadá takto:

http://vk.com/page-116682062_51411604?act=edit&hid=183950676§ion=edit

Pamatujte, že na začátku článku jsme vytvořili útržek menu, který bude pokračováním našeho hlavního avatara, a udělali jsme pro něj jen šablonu. To je přesně to, co právě teď potřebujeme.

Přejděte na hlavní stránku a proveďte následující:

Krok 1.

Adresu stránky vložíme do textového pole pro nový záznam na zdi, poté bude převedena na odkaz.

Krok 2.

K záznamu připojíme obrázek našeho útržku pro menu a klikneme na odeslat.

Krok č. 3.

Nyní po zveřejnění příspěvku klikněte na čas vytvoření v levé dolní části příspěvku a vyberte „PIN“.

Skvělý!!! Tady končíme. Nyní víte, jak vytvořit skvělá menu, a můžete na tom vydělat slušné peníze. Doporučuji vám udělat vše v následujícím pořadí:

• Vymyslíme strukturu a objednáme návrh obrázků menu;
• Provádíme změny velikosti a řezání všech obrázků;
• Vkládání obrázků do alb;
• Všechny střihy upravujeme v editoru a zveřejňujeme na hlavních stránkách skupiny.

V důsledku práce získáme následující nabídku.

Ale samotná nabídka po stisknutí vyskočí s aktivními odkazy. Vyplatí se pohrát si s velikostí a přizpůsobit se vaší obrazovce, ale nezapomeňte na displej na mobilních zařízeních.

DŮLEŽITÉ: Po změně designu VK v roce 2016 byly provedeny nové změny při vytváření obrázků a požadavky na obrázky o kterých.

Stáhněte si šablonu menu skupiny VK + všechny zdroje lekcí

Doufám, že materiál byl užitečný a nyní můžete snadno pochopit, jak vytvořit krásné menu pro skupinu VKontakte. Přihlaste se k odběru aktualizací blogu a brzy se uvidíme u nových příspěvků. Pokud máte nějaké dotazy, napište je do komentářů a já vám určitě pomůžu.

Přikládám video, abych si upevnil to, co jsem četl.

Čím lépe je vaše skupina navržena, tím více pozornosti může přitáhnout. Pokud jde o spolupráci s komerční komunitou, design by měl být propracován důkladně. Faktem je, že krásný design skupiny VKontakte zvyšuje důvěru v komunitu ze strany předplatitelů a také zvyšuje konverzní poměr pro nové členy. V článku se dozvíte, co to je. Noví členové se rovnají novým objednávkám a prodeji. Více lidí znamená více peněz.

Jedním z příkladů, jak změna designu ve skupině zvýšila nárůst odběratelů, je veřejnost věnovaná zdravému stravování – vk .com/goodiet. Jsou zde zveřejňovány různé recepty pro sportující a hlídající si jídelníček.

V současné době má komunita více než 360 000 odběratelů. V počátečních fázích vývoje administrativa skupiny nevěnovala příliš pozornosti designu svého webu.

Komunita se rozvinula prostřednictvím zveřejňování šťavnatých fotografií a správných článků, stejně jako prostřednictvím reklamy na jiných publikách. Zde je příklad vkusně navrženého obsahu z jejich skupiny.

vk.com/goodiet - Jedná se o vynikající kuřecí řízky ze zelí. Užitečná výživa pro sport.

Průměrné náklady na předplatitele byly pravděpodobně 3-4 rubly. Po dosažení prvních 50 000 účastníků se administrátoři rozhodli změnit svůj design a objednali od designérů obal a avatara.

Díky tomu se zvýšilo procento konverze na předplatitele a také se snížila cena na účastníka na 1,5 rublů.

Návrh skupiny

Než začnete navrhovat svou komunitu, musíte vědět, co je součástí návrhu skupiny.

Pokrýt

Jeden z hlavních designových prvků. Obal dává první dojem z kapely. Proto je důležité věnovat jeho tvorbě velkou pozornost.

Návrh skupinového avatara

Druhý nejdůležitější designový prvek. V novém designu obalu je avatar téměř neviditelný. To ale neznamená, že byste se s jeho tvorbou neměli obtěžovat.

Když kliknete na ava, otevře se v novém okně v plné velikosti.

Pokud použijete klasický styl vzhledu bez obalu, zobrazí se avatar takto:

Návrh menu

Velmi užitečný nástroj pro navigaci veřejnosti. Velmi často se používá v komerčních skupinách nebo komunitách, které potřebují kategorizovat obsah. Například menu je velmi užitečné ve veřejných knihách.

Produktové karty

Používá se u veřejnosti prodávající zboží nebo služby.

K dnešnímu dni používá nový formát obalu 90 % skupin. Pokud jste také dali přednost tomuto stylu, pak věnujte velkou pozornost vytvoření krásného krytu.

Jak změnit design skupiny VK?

Nejprve se rozhodněte, které prvky budete měnit.

Pokud chcete nainstalovat nový kryt, přejděte do nabídky správy komunity.

V okně „Základní informace“ klikněte na tlačítko „Stáhnout“ vedle části „Obálka komunity“.

Po nastavení obalu přejdeme k přidání nového avatara. Chcete-li to provést, přesuňte kurzor myši nad oblast avatara a klikněte na tlačítko stahování.

Vyberte požadovanou fotografii z počítače.

Chcete-li nastavit obrázek na kartě produktu, musíte je nejprve povolit v nastavení komunity.

Chcete-li to provést, přejděte do sekce správy a otevřete nabídku "Sekce".

V nabídce, která se otevře, zapněte sekci produktů.

Nastavte obrázek.

Optimální rozměry

Obal - 1590 x 400 pixelů.

Avatar – 200 x 200 pixelů.

Banner pro menu - 510 x 510 pixelů.

Obrázek na kartě produktu je 834x834 pixelů.

Hotové šablony pro obaly a avatary pro navrhování skupin VKontakte

Pokud nechcete trávit čas vytvářením designu a peněz pro návrháře, můžete si stáhnout šablony pro nový design skupin Vkontakte ve formátu psd.

Zvažte 5 nejoblíbenějších webů, kde můžete najít šablony:

1. FreePSD. Public VK, jehož autor umísťuje šablony skupinových návrhů ke stažení zdarma. Zde si můžete stáhnout zdroje psd pro nejoblíbenější témata a změnit je tak, aby vyhovovaly vašemu stylu.

1. Vy-PS.en. Web, který hostuje bezplatné šablony obálky, avatary a nabídky pro Vkontakte. Také zde najdete podrobné návody na práci se zdrojovými soubory ve Photoshopu.

1. Erohovec.en. Velký výběr šablon pro nový design Vkontakte pro nejoblíbenější témata.

1. Všechno-Pro-Vkontakte. Stránka poskytuje obrovský výběr obrázků pro menu, avatary a bannery.

1. Volný, uvolnitpsd šablony. Další veřejnost VKontakte, kde jsou pravidelně zveřejňovány šablony pro obálky, bannery, avatary a příspěvky.

Úprava šablony

Po stažení šablon návrhů musíte pochopit, jak je upravit. K tomu potřebujeme program Photoshop, protože právě ona pracuje s formátem psd.

Spusťte Photoshop, otevřete nabídku "Soubor" a vyberte "Otevřít".

Otevřete požadovaný zdroj z počítače.

Protože používáme šablonu, stačí změnit pouze textové prvky.

Chcete-li to provést, vyberte nástroj s ikonou "T" a klikněte na některý z textových prvků.

Zadejte svůj text.

Příklad vytvoření banneru.

Po úplném dokončení úprav uložte výsledek ve formátu png nebo jpg.

Chcete-li to provést, otevřete nabídku "Soubor" a klikněte na "Uložit jako ...".

V okně, které se otevře, změňte typ souboru z psd na ten, který potřebujete.

Možné problémy

Při vytváření návrhu můžete zaznamenat potíže, takže při práci s návrhem skupiny musíte zvážit možné problémy.

Špatná kvalita obrazu

Velmi častým problémem je, když uživatelé při vytváření avatara nebo obalu používají obrázky s nízkým rozlišením a roztahují je na optimální velikost. Zkuste jako hlavní fotografii na pozadí použít fotografie s rozlišením 1280x720 pixelů nebo vyšším.

Nedostatek nápadů

Pokud nevíte, jak navrhnout komunitu, podívejte se na pár příkladů konkurentů. Zkuste načerpat inspiraci a najít zajímavá designová řešení. Hlavní věcí není kopírovat všechny jejich prvky, protože jakýkoli design by měl být jedinečný.

Výsledek

V důsledku toho stojí za zmínku, že design skupiny VK je nejdůležitější součástí propagace. Krásný design může zvýšit úvodní konverze a také zvýšit důvěru předplatitelů.

Pro vytvoření kvalitního obalu, avatara nebo menu není nutné hledat pomoc profesionálního designéra, vždy můžete použít bezplatné šablony.