Ik denk dat iedereen die actief gebruik maakt van het sociale netwerk VKontakte al prachtig ontworpen groepen en openbare pagina's is tegengekomen. Velen van hen hebben, naast het menu, ook veel gestileerde subpagina's, catalogi, enz., waardoor in feite een kleine website binnen het sociale netwerk ontstaat.

Hier zijn een paar voorbeelden, zodat iedereen begrijpt waar we het over hebben.

Met dergelijke groepen kunt u zich onderscheiden van uw concurrenten en meer gebruikers aantrekken. Vooral als de inhoud ook interessant is :)
In dit artikel zullen we praten over hoe dit allemaal wordt gedaan. Laten we een specifiek voorbeeld nemen om alles in meer detail te analyseren en in alle subtiliteiten te duiken. Er zal een kleine masterclass plaatsvinden over groepsontwerp.

De allereerste fase van ons werk is het idee. We moeten begrijpen wat we willen vertellen en aan wie. Er zijn verschillende communityformaten in VKontakte, en u moet kiezen op basis van uw doelen. Hoewel de groep in de toekomst kan worden overgedragen naar een openbaar formaat en omgekeerd.

Ik leg het uit met mijn vingers. Openbaar- dit is zoiets als een blog. Nieuwsfeed. Met andere woorden, we vertellen onze abonnees over bepaalde dingen en zij zullen niet in staat zijn om op de muur van onze gemeenschap te schrijven. Het maximum is om commentaar te geven.

Groep Hiermee kunt u een community creëren die meer openstaat voor conversatie en discussie, waar mensen namens zichzelf berichten in de feed kunnen plaatsen. Je kunt er ook vrienden uit je lijst aan toevoegen. In het openbaar bestaat zo'n optie niet. Bovendien heeft de groep iets meer opties voor het integreren van wiki-markeringen (er is een sectie "Nieuws" waarin u een menu kunt integreren).

Wereldwijd kunnen we als volgt denken: als we een community voor een winkel moeten creëren, dan zou ik het ‘openbare’ formaat nemen. Als we het bijvoorbeeld over visliefhebbers hebben, is het beter om een ​​​​"groep" te nemen. Hoewel iedereen vrij is om te doen wat hij of zij wil. Het formaat kan immers op elk moment worden gewijzigd. Houd er echter rekening mee dat VKontakte een beperking introduceert voor het opnieuw wijzigen van het communityformaat en dat u na de eerste keer enkele dagen moet wachten totdat u alles indien nodig kunt terugsturen. Daarom is het beter om de functionaliteit te testen voordat de groep zich begint te vullen met inhoud.

Als onderdeel van deze masterclass neem ik als uitgangspunt het spel Mad Max, gebaseerd op de gelijknamige film, die pas een paar weken geleden is uitgebracht, en zal ik een community voor spelers creëren met verschillende materialen over dit spel . Het belangrijkste doel is om verkeer naar uw gamingsite af te leiden.

Het formaat zal 'Groep' zijn, omdat het noodzakelijk is om een ​​natuurlijke toestroom van publiek te creëren en de communicatie binnen de gemeenschap te maximaliseren. Laat ik meteen duidelijk maken dat ik een universele techniek zal gebruiken die zowel in groepsverband als in het openbaar kan worden gebruikt. Dit werkt overal.

Er is veel inhoud, laten we het idee tot leven brengen!

Maak een groep

Om een ​​groep aan te maken, ga je naar “Mijn Groepen” in het rechtermenu van je VKontakte-account en klik je op de blauwe knop bovenaan “Een community aanmaken”.

Een venster als dit zou moeten verschijnen, waarin we de naam voor onze groep invoeren en het formaat selecteren.

Nadat we de nodige informatie hebben ingevoerd, wordt ons community-controlepaneel voor ons geopend. In mijn geval ziet het er zo uit.

Zoals je kunt zien, heb ik een paar parameters toegevoegd: ik heb video-, audio-opnamen, discussies en een aantal andere functies toegevoegd die voor mij nuttig zullen zijn bij toekomstig werk bij het verzamelen van inhoud. Dit alles kan in de toekomst zonder enige beperking worden gewijzigd. Ik heb ook het adres van mijn website opgeschreven. Als u geen website heeft, of als het onderwerp niet overeenkomt met het format van de community (ze gaan over verschillende dingen en hebben op geen enkele manier verband met elkaar), dan kan deze regel leeg worden gelaten.

In dit geval heb ik de leeftijdsbeperkingen ingesteld vanaf 18 jaar, vergelijkbaar met de leeftijdsbeperkingen die de ontwikkelaars voor de game hebben ingesteld. Al twijfel ik er niet aan dat kinderen ook spelen.

Alle. De groep is aangemaakt!

Nu kunt u beginnen met het ontwerpen ervan.

Een VKontakte-groep formatteren

Deze fase kan worden onderverdeeld in 2 componenten: grafisch en technisch. Om te werken hebben we een sjabloon nodig voor het maken van een groepsavatar en -menu, evenals een beetje fantasie en basiskennis van Photoshop (ook wel Adobe Photoshop genoemd).

Opmaaksjabloon

Wat is een sjabloon en wat is het zelfs? Een sjabloon is een soort blanco. In dit geval hebben we in *.psd-formaat gebieden voor de afbeelding gemarkeerd onder het menu en de groepsavatar.

Zoals je kunt zien in het tweede voorbeeld aan het begin van dit artikel, kunnen we de avatar en de menuafbeelding in dezelfde stijl ontwerpen. Tegelijkertijd wordt het visueel in 2 delen gesneden. Met de sjabloon kunt u dus een afbeelding zodanig vormen dat de verplaatsing van afbeeldingen wordt geëlimineerd en de afbeeldingen zoveel mogelijk op hetzelfde niveau worden geplaatst.

Om het duidelijker te maken, is hier een voorbeeld.

We zien dat er in beide delen van de foto een strook is met uitzicht op een woonwijk. Zonder een sjabloon te gebruiken is het bijna onmogelijk om het precies de eerste keer te doen. U moet de afbeeldingen aanpassen en afwijkingen tot 1px meten. Terwijl we bij het gebruik van een sjabloon er eenvoudig afbeeldingen aan toevoegen binnen de opmaak en onmiddellijk het gewenste resultaat krijgen.

Ik wil er rekening mee houden dat dit sjabloon is ontworpen voor 1 regel uitleg. In het voorbeeldscreenshot zijn er telefoons. Als er een tweede regel verschijnt, moet u een ander sjabloon gebruiken of het ontwerp handmatig corrigeren.

Intussen gaan we direct over tot de grafische vormgeving van onze nieuwe groep. Dit is waar ik de weg van de minste weerstand bewandel en naar Google Afbeeldingen ga om delen van het ontwerp te vinden. Je kunt ook Yandex gebruiken. Wie vindt wat nog leuker?

Ik heb geen ontwerpopleiding, dus we zullen niet in detail ingaan op de kwesties van het kiezen van lettertypen en andere details. Na een beetje magie in Photoshop te hebben gedaan, kreeg ik dit resultaat.

Op het linkerfragment (waar ‘Menu’ staat) kun je ook meerdere triggers toevoegen. In dit geval besloot ik het zonder hen te doen. Alle. Het avatarontwerp is klaar. Druk in Photoshop op de sneltoetscombinatie Shift+Ctrl+Alt+S en sla onze fragmenten op in een map op uw harde schijf.

De eerste fase van het werken met afbeeldingen is voltooid. Laten we weer contact opnemen.

Een avatar en menu instellen voor een groep

We klikken op de twee typen in plaats van de ava van onze groep en uploaden onze afbeelding daar. Hier zijn deze jongens, eronder staat ook 'Upload een foto'.

Voeg een afbeelding toe. Geef de velden op en selecteer een miniatuur. Alles is hier eenvoudig en er zouden geen problemen moeten zijn.

Zoals we kunnen zien, moet je de community-ID weten. Het is heel gemakkelijk om hem te herkennen. Zoek het menu in jouw groep (direct onder de avatar) en open “Communitystatistieken”. In dit geval verschijnt er iets soortgelijks in de adresbalk van de browser (de cijfers zullen anders zijn).

Deze cijfers na “?gid=” zijn het gewenste groeps-ID. We plakken de resulterende waarde in het scriptformulier en schrijven de naam voor de pagina die we willen maken. In dit geval typ ik “Menu”.

Het is vermeldenswaard dat de pagina alleen wordt gemaakt als het venster met de groep geopend is op het aangrenzende tabblad. Simpel gezegd: u moet in dezelfde browser bij VK zijn ingelogd. Alleen de groepsbeheerder en de door hem aangewezen personen hebben immers toegang tot dergelijke manipulaties. Een willekeurige voorbijganger zal niet gemakkelijk de instellingen kunnen wijzigen van een groep waartoe hij geen toegang heeft tot het beheerderspaneel.

Als alles correct is gedaan, wordt een pagina als deze geopend.

Dit is hetzelfde venster waarin we even later een wiki-opmaak zullen maken en een intern menu voor onze groep zullen creëren. Voorlopig hoeven we hier alleen maar iets te schrijven. Klik vervolgens op de blauwe knop ‘Pagina opslaan’ en klik bovenaan op de link Terug naar pagina.

Ik schreef "Menu" en mijn pagina begon er na het opslaan zo uit te zien.

Er is nog geen ontwerp, maar nu hebben we alleen een link naar deze pagina nodig. We selecteren het in de adresbalk van de browser en keren terug naar de hoofdpagina van onze groep. Naar het voer.

Hier maken we een bericht met de volgende inhoud: voeg een afbeelding in en een link naar de menupagina voor de groep.

Klik op verzenden. Klik vervolgens op het tijdstip waarop het bericht is verzonden en selecteer 'Pin' uit alle opties. We werken de pagina bij (F5-toets op het toetsenbord) en als alles correct is gedaan, krijgen we het eerste resultaat: de groep heeft een avatar gevonden en een link om naar het menugedeelte te gaan.

Wiki-opmaak voor VKontakte-groepsmenu

Laten we nu beginnen met het ontwerpen van het menu zelf. Laten we opnieuw naar Photoshop gaan en een ontwerp voor ons menu maken. Bij het ontwerpen van de interface moet u de mensen onthouden die via de applicatie vanaf mobiele telefoons toegang hebben tot VK. Met andere woorden: we mogen geen kleine elementen hebben en bovendien moeten we proberen alles zo duidelijk mogelijk te maken. Zodat we niet hoeven te raden hoe alles hier werkt en waar we moeten klikken... maar gewoon het juiste item aanwijzen en de informatie bestuderen die we zoeken.

Ik zal nu niet in detail treden over hoe ik het menu precies heb samengesteld. Dit is wat ik heb.

Minimale velden. Verticale indeling. Ideaal formaat voor een responsief menu. Dat wil zeggen dat niets op mobiele telefoons ergens naartoe gaat. Alles zal precies zijn zoals op de schermen van computers en tablets. Ik heb de breedte ingesteld op 500 px, zodat er later niets zal krimpen en ik de kwaliteit van de afbeelding niet twee keer zal verliezen. Hoogte is niet belangrijk.

We knippen de afbeelding in fragmenten en bewaren deze.

Alle. Het is tijd voor het slotakkoord: we verzamelen het menu in de groep zelf.

Om dit te doen, keren we terug naar de hoofdpagina van de groep (waar de feed staat en onze fotolink die naar het menu leidt). We klikken op de menuafbeelding en komen op dezelfde pagina die we eerder voor het menu hebben gemaakt.

Bent u beheerder of maker van een groep (in ons geval is dit het geval), dan vindt u bovenaan de pagina een link 'Bewerken'. Laten we erop klikken.

Vervolgens gaan we naar de wiki-opmaakmodus (onder de knop Sluiten in de rechterbovenhoek van de pagina staat zo'n frame met<>binnen). Wanneer de gewenste modus is geactiveerd, wordt deze knop grijs omlijnd.

Vervolgens klikken we op het camerapictogram en voegen we alle fragmenten van ons menu in één keer toe. In de wikimodus zien we niet de afbeeldingen zelf, alleen de code van deze afbeeldingen met afmetingen en parameters.

Ik wil het menu in het midden plaatsen, zodat er geen gaten tussen de fragmenten zitten. Daarom verpakken we elk van de elementen in een tag

en aan de reeds geneste parameter “noborder” voeg ik de tweede parameter “nopadding” toe. De eerste schakelt de omtrek van fragmenten en randen van tabelcellen uit. De tweede verwijdert de marges van de rand.

De eerste en laatste menu-elementen mogen geen knoppen zijn - in mijn afbeelding zijn ze slechts een grafisch element zonder een link naar de interne pagina, dus voegen we er de parameter "nolink" aan toe. Hiermee wordt de mogelijkheid verwijderd om op dit element te klikken om een ​​deel van de afbeelding in een apart venster te openen. Nu gebeurt er niets met een muisklik. Dit is de normale pagina-achtergrond. Inactief.

In mijn geval ziet de menucode er zo uit.

Afzonderlijk zou ik willen opmerken dat het ingebouwde systeem na het importeren van afbeeldingen in VK soms de afbeeldingsformaten verkeerd aangeeft. Daarom moeten we dit zorgvuldig in de gaten houden en precies degene weergeven die we in de ontwerpfase hadden gepland. Anders valt alles misschien uit elkaar en komt de puzzel uiteindelijk niet samen.

Wanneer we de code hebben geschreven en alle elementen hebben uitgelijnd, slaan we de pagina op en zien we hetzelfde als in Photoshop.

De laatste hand blijft nog: we moeten de pagina's maken waar ons menu mensen naartoe zal sturen. Om dit te doen, gaan we opnieuw naar het script voor het genereren van wikipagina's en bestellen we deze keer drie pagina's tegelijk. In dit geval moet u ook iets op elk ervan schrijven en vergeet niet om hun adressen ergens in de adresbalk van de browser op te slaan.

Vervolgens voegen we links naar nieuwe pagina's in de wikicode van het menu in de vorm page-102302049_51013384, waarbij het eerste nummer de groeps-ID is en het tweede het paginanummer. Hoewel dit over het algemeen niet belangrijk is. We hoeven tenslotte alleen maar dit URL-fragment te kopiëren en in de markup te plakken.

Als gevolg hiervan heeft de menucode de volgende vorm.

Uiterlijk is er niets veranderd. Maar als we op de menu-items klikken, kunnen we zien dat het nu werkt!

Wat betreft de markup zelf en de regels waarmee de code wordt geschreven, raad ik u aan de VKontakte-groep te lezen die specifiek aan deze kwestie is gewijd. De jongens hebben alle belangrijke punten beschreven en in hun catalogus kun je gemakkelijk het benodigde element vinden en uitzoeken hoe je het aan je wikipagina kunt toevoegen.

Wil je weten hoe je in 2018 een groep op VKontakte maakt? En ontwerp het niet alleen, maar doe het zelf correct en mooi! Als je antwoord “Ja” is, dan is dit artikel speciaal voor jou!

Het sociale netwerk "VKontakte" is een van de meest populaire. Daarom kunt u hier meer communicatie, gelijkgestemde mensen en alleen vrienden vinden, en uw diensten en producten promoten. Dankzij de gecreëerde communities kun je snel alles vinden over een interessant evenement, product, dienst etc..

Op de beheerpagina klikt u op “Uploaden” en selecteert u een afbeelding. Het ziet er als volgt uit: groepsnaam, vervolgens avatarminiatuur, status.

Helaas ondersteunt mobiel deze functie nog niet. Maar aangezien deze innovatie nog niet zo lang geleden plaatsvond, zal ze net zo relevant zijn voor promotie als al het andere.

Om gemakkelijker toegang te krijgen tot de voorgestelde materialen, kunt u een menu maken. En de volgende keer vertellen we je hoe je het zelf kunt maken.

Vastgezet bericht

Geheimen van het creëren van een VK-groep

Als bonus delen we de geheimen van het ontwerpen van een VK-groep en onze persoonlijke ervaring, waardoor je het ontwerp meteen op een gevorderd niveau zelf kunt voltooien. Zo kun je bijvoorbeeld zo’n mooi blok van diverse applicaties opzetten, waardoor de betrokkenheid meerdere malen toeneemt!

Gratis apps. Ga naar communitybeheer en ga naar "Toepassingen" om de instellingen te bewerken.

Hier kunt u ervoor kiezen om een ​​applicatie toe te voegen die een uitstekende aanvulling zal zijn op de functionaliteit van de groep. In onze groep, die gratis nuttige inhoud maakt, is er bijvoorbeeld een knop 'Steun de gemeenschap', door erop te klikken kunt u een bedrag vanaf 100 roebel doneren ten behoeve van de gemeenschap. Het kan ook een productwinkel zijn, een vragenlijst, tests, online chat, een nieuwsbriefabonnement, etc.

Andere handige widgets en applicaties:

• vragenlijsten;
• testen;
• inschrijving voor diensten;
• het verzenden van berichten;
• goederen winkel;
• enzovoort.

Discussies. Maak meerdere onderwerpen tegelijk over de belangrijkste kwesties die van belang zijn voor klanten of abonnees. Als dit een commerciële community is, dan zijn dit reviews, veelgestelde vragen, informatie over betaling, garanties en levering. Als de gemeenschap informatief is, moeten de belangrijkste discussielijnen gewijd zijn aan onderwerpen die de groep behandelt.

Conclusie

Als je wilt dat het een succes wordt, neem dan de tijd om het correct en mooi te ontwerpen. Hoe grondiger u dit probleem benadert en alle scenario's van gebruikersgedrag doordenkt nadat u naar de groepspagina bent gegaan, hoe hoger de conversie naar abonnement en vervolgens naar aankoop zal zijn.

Allereerst moet je het prachtig versieren. Zoals u weet beoordelen we tenslotte alles ‘aan de hand van onze kleding’. Dit artikel zal je helpen ontwerp prachtig een VKontakte-groep op eigen houtje.

Hoe de naam van een VKontakte-groep formaliseren?

Het eerste waar u op moet letten bij het maken van een VKontakte-groep is Naam. Er zijn drie belangrijke parameters waarmee u rekening moet houden bij het kiezen van een naam:

Het zoeken naar het sociale netwerk VKontakte werkt als volgt: er zijn twee groepen met de namen 'Werk op internet' en 'Werk op internet zonder investeringen'. Wanneer een VKontakte-gebruiker de vraag 'werk op internet' invoert, zal de groep met de bijbehorende naam hoger zijn, zelfs als het aantal abonnees gelijk is of de tweede groep een klein voordeel heeft.

Laten we concluderen: de eigenaren van de beroemde online winkel Ali Express hoeven bij het maken van een groep ervoor het onderwerp niet in de naam aan te geven; Voor een minder populaire site, online winkel, forum is het bij het aanmaken van een groep beter om het onderwerp in de naam aan te geven, zoals we hierboven deden..

Hoe registreer ik een status voor een VKontakte-groep?

De status van een VKontakte-groep is minder belangrijk dan de naam, maar het is de moeite waard om op te letten. Laten we uitzoeken hoe we het goed kunnen doen maak een status voor een VKontakte-groep? Het belangrijkste is om het niet te veel te overbelasten; het mag alleen de belangrijkste informatie bevatten:

Als u op dit moment niet weet hoe u de status van een VKontakte-groep moet registreren, is het beter om deze uit te stellen. Je moet er niet zomaar iets in stoppen. Het ontbreken van een status zal het ontwerp van uw groep niet schaden, maar betekenisloze informatie daarin kan bezoekers in verwarring brengen. Trouwens, Voor openbare pagina's is status belangrijker, omdat het als beschrijving in het menu 'Interessante pagina's' verschijnt.

Hoe schrijf je een beschrijving van een VKontakte-groep?

Nu gaan we het uitzoeken hoe je een beschrijving van een VKontakte-groep schrijft, of beter gezegd de tekst die kan worden ingevoerd in de community-instellingen. Hiervoor zijn verschillende oplossingen:

Bovendien heeft VKontakte een limiet voor de tekstgrootte in de groepsbeschrijving die zonder samenvouwen wordt weergegeven: 600 tekens met spaties. Na overschrijding van deze limiet wordt de beschrijving geminimaliseerd, waardoor deze er lelijk uitziet. Je kunt deze situatie op de onderstaande afbeelding zien.

In dit opzicht raad ik aan vastgezette berichten in de koptekst te gebruiken bij het maken van een beschrijving van een VKontakte-groep, door er een afbeelding voor te maken met een beschrijving, emoticons, tekst en zelfs een menu. Dit alles zal kleur toevoegen aan uw gemeenschap.

Hoe maak je een avatar voor een VKontakte-groep?

Nu zullen we proberen een van de belangrijkste aspecten van het ontwerpen van een VKontakte-groep te achterhalen: hoe maak je een avatar? Voor degenen die over eigen geld beschikken, kunt u zich inschrijven op een freelance-uitwisseling en een avatar en andere elementen voor de groep (banner, menu, etc.) bestellen bij een ervaren webdesigner. Maar je kunt ook een andere kant op gaan, maak zelf een avatar voor de VKontakte-groep.

Allereerst moet je beslissen welke maat je nodig hebt om een ​​avatar voor de VKontakte-groep te maken. De maximale breedte van een groepsavatar is 200 pixels (hierna eenvoudigweg px) en de maximale hoogte is 500 px. Grotere avatars worden verkleind volgens de opgegeven verhoudingen. Avatars die kleiner zijn dan de opgegeven formaten worden daarentegen vergroot en vervormd weergegeven in de weergave. Maak daarom een ​​avatar voor de VKontakte-groep met een breedte van 200 px en een hoogte van 200 tot 500 px.

Wanneer u een avatar voor een VKontakte-groep maakt, moet u de miniatuur onthouden, die 200 px breed en hoog is. De belangrijkste informatie van de avatar (naam of beschrijving van de groep, motto, call-to-action, etc.) moet dus in één gebied worden geplaatst dat overeenkomt met de gegeven afmetingen.

De gemakkelijkste manier maak een avatar voor een VKontakte-groep in Photoshop. Bovendien is het niet nodig om het te kennen en alle functies te kunnen gebruiken. Het is voldoende om de basishulpmiddelen te leren gebruiken (elementen selecteren, met lagen werken, enz.). Hieronder zie je een voorbeeld van een avatar die ik heb gemaakt voor een VKontakte-groep.

Deze avatar bestaat uit twee gecombineerde afbeeldingen, een tekstelement en een achtergrond. Het kostte niet veel tijd of moeite om het te maken. Elke groepseigenaar kan, indien gewenst, een dergelijke taak aan.

En als u complexe en prachtige avatars voor VKontakte-groepen, teken elk detail helemaal opnieuw, leer vervolgens Photoshop en leer hoe u het professioneel kunt gebruiken. Dit kan op verschillende manieren:

• Probeer alles zelf met vallen en opstaan.
• Lees artikelen over dit programma en bekijk video's.
• Lees een boek of bekijk een training.

De eerste optie is niet effectief, omdat maar weinig mensen het geduld hebben om op deze manier resultaten te bereiken. De tweede optie is mogelijk. Er zijn inmiddels veel websites en YouTube-kanalen op internet die gericht zijn op het aanleren van Photoshop.

Het zal echter lastig zijn om de ontvangen informatie op deze manier te structureren. Bovendien kost het voortdurend zoeken naar informatie veel tijd. Maar het is gratis, net als de eerste methode.

De eenvoudigste manier om Photoshop te leren is via een videocursus. Omdat daarin alle informatie wordt gepresenteerd van eenvoudig tot complex, wordt het in detail beschreven en leert u alle basisprincipes van het programma. En ik kan je een soortgelijke videocursus aanbevelen.

"" – trainingsvideocursus voor beginners. Hiermee kunt u op elk gewenst moment, thuis achter uw computer, beginnen met het leren van Photoshop.

In deze cursus leert u gedetailleerd alle functies van Photoshop gebruiken. Waarna je eenvoudig helemaal opnieuw avatars kunt maken en VKontakte-groepen prachtig kunt ontwerpen. Als je geïnteresseerd was in dit artikel, ontvang dan als eerste nieuwe informatie.

Ik raakte onlangs verbaasd over het ontwerp van mijn VKontakte-groep. Ik zag veel mooi ontworpen groepen en wilde iets soortgelijks doen. Na enkele uren Wiki-markeringen te hebben bestudeerd, heb ik eindelijk een prachtige banner voor mezelf gemaakt en vervolgkeuzemenu grafisch, die rechtstreeks naar de pagina's van mijn site leidt. In een notendop hoe het moet. Eerst worden in Photoshop tegelijkertijd twee afbeeldingen gemaakt, waarna een ervan in verschillende delen wordt geknipt. Vervolgens wordt op de bewerkingspagina's van VKontakte een speciale code met externe links ingevoegd. Laten we nu alles in volgorde bespreken.

Ik maak VKontakte-groepen
Hoogwaardig ontwerp van VK-groepen en openbare pagina's, vastgezet menu, vervolgkeuzemenu, intern grafisch menu, catalogi, interne navigatie - prijzen En portefeuille.

Aandacht!
Vanwege de volgende VKontakte-update van 31 oktober 2016 is deze optie voor groepsontwerp irrelevant geworden. Een enigszins soortgelijk menu kan worden geïmplementeerd op het tabblad Laatste Nieuws in het blok onder de statusregel. Maar dit wordt een apart menu, en geen enkele compositie met een avatar.

Stap 1.
Maak een nieuw document in Photoshop van ongeveer 850 x 700 pixels groot en vul het met wit. In dit voorbeeld heb ik voor de duidelijkheid onmiddellijk de VKontakte-interface er bovenop gelegd. Nu moeten we twee vensters in de laag uitknippen, waardoor het daadwerkelijke grafische ontwerp zelf zichtbaar zal zijn. Selecteer eerst een rechthoek van 200x500 pixels en druk op Del. Selecteer vervolgens een rechthoek van formaat 510x309 en druk ook op Del.

Lijn de rechthoeken uit met de onderrand, de afstand tussen de vormen is 50 pixels. Dit ontwerp is ontworpen voor één regel groepsnaam, één regel status en drie regels beschrijving en technische informatie. Als u een ander aantal lijnen heeft, pas dan de hoogte van de linkerafbeelding aan op basis van de locatie.

Stap 2.
Onder deze laag plaatsen we nu al ons grafisch ontwerp. In dit geval heb ik een afbeelding met de hoofdachtergrond geplaatst, vervolgens de tekst geschreven en vervolgens in de linkerrechthoek.

Stap 3.
Nu slaan we de juiste rechthoek (avatar) meteen op als een aparte afbeelding van 200x500 pixels. Dit is een kant-en-klare afbeelding voor groepsontwerp. Het wordt in het blok in de rechterbovenhoek van de groep geladen, waar 'Foto bijwerken' staat. En de linkerafbeelding moet in verschillende afbeeldingen worden geknipt, afhankelijk van het aantal menu-items. In dit geval zijn dit 5 afbeeldingen met een breedte van 510 pixels.

Stap 4.
Bij deze stap moeten we onze geknipte VKontakte-foto's uploaden. Om dit te doen, selecteer je direct onder de groepsbeschrijving het blok ‘Laatste nieuws’. Ik denk dat dit in het origineel zo heet. Ik heb het omgedoopt tot "Menu". Klik op “Bewerken”. Belangrijk! Ten eerste moet u een open groep hebben en geen pagina. Omdat er eenvoudigweg niet zo'n item op de pagina staat. En ten tweede moet in het menu Communitybeheer > Informatie > Materialen het item "Openen" worden geselecteerd.

Stap 5.
Dus op het tabblad "Bewerken" klikken we op het camerapictogram en laden we onze vijf geknipte menuafbeeldingen. VKontakte uploadt ze op zijn eigen manier, waarbij de grootte wordt verkleind tot 400 pixels breed en de noborder-tag aan de afbeelding wordt toegewezen. In de volgende stap moeten we de code enigszins corrigeren.

Stap 6.
We stellen namelijk de originele afbeeldingsformaten in en veranderen de noborder-tag in de nopadding-tag. We moeten ook de URL van de links van elk menu-item invoeren. In dit geval leidt de eerste link naar de interne VKontakte-pagina en de overige vier links leiden rechtstreeks naar de pagina's van mijn website.

Hieronder vindt u de originele werkende code voor mijn menu. Je kunt het als basis gebruiken. Daarin kunt u de afbeeldingen naar uw eigen smaak veranderen, uw maten vervangen en uw links toevoegen. En zorg ervoor dat er geen spaties tussen de vierkante haakjes in de code staan, en ook geen regeleinden, anders bevat de grafische afbeelding spaties tussen de afbeeldingen.

[][][]

Stap 7
Ik herhaal nogmaals: om dit menu te openen, moet je op de inscriptie "Menu" klikken. En zo is het altijd gevouwen. Lees de reacties op het bericht, daar worden veel vragen beantwoord. Sluit je aan bij mijn VKontakte-groep.

Vandaag keren we weer terug naar het onderwerp het ontwerpen van VKontakte-groepen. We hebben het al eerder geleerd. Vandaag zullen we leren hoe we grafisch kunnen maken menu met vaste topbanner en een link naar een interne pagina met uitgebreide menu-items. Over het algemeen kan alle informatie op de interne pagina staan. Het is vooral handig om daar bijvoorbeeld catalogi met een assortiment producten te plaatsen. Zowel vervolgkeuzemenu's als vastgezette menu's hebben hun voor- en nadelen. Het grootste nadeel van een vervolgkeuzemenu is dat het standaard gesloten is. Maar je kunt er wel meerdere links tegelijk op plaatsen.

Vastgezet menu het ziet er indrukwekkender uit vanwege de algemene indruk, maar het kan maar één link hebben, die naar de interne VKontakte-pagina of naar een externe site leidt (en de link naar de externe site komt niet van de afbeelding, maar van de tekstlink onder de foto). Een van de voor de hand liggende nadelen is ook dat op mobiele apparaten het grafische menu wordt weergegeven als een normaal item in de feed, bovenaan staat, en niet als vastgezet naast de avatar. Over het algemeen moet u bij het kiezen van een ontwerp rekening houden met deze nuances. Laten we dus eens kijken hoe we een plakkerig hoofdmenu kunnen maken met een link naar een interne pagina.

Ik maak VKontakte-groepen
Hoogwaardig ontwerp van VK-groepen en openbare pagina's, vastgezet menu, vervolgkeuzemenu, intern grafisch menu, catalogi, interne navigatie - prijzen En portefeuille.

Stap 1
Maak een nieuw document in Photoshop van ongeveer 900 x 700 pixels groot en vul het met wit. Nu moeten we twee vensters in de laag uitknippen, waardoor het daadwerkelijke grafische ontwerp zelf zichtbaar zal zijn. Selecteer eerst een rechthoek van 200x500 pixels (avatar) en druk op Del. Selecteer vervolgens een rechthoek van 510x352 (lijn deze uit op de onderste regel van de avatar en maak de afstand tussen de vormen 50 pixels) en druk ook op Del.
Na de volgende ontwerpupdate door VKontakte (31 oktober 2016) werden de bannerafmetingen 510x307 (niet 510x352).

Stap 2
Nu plaatsen we onder de witte laag een enkele afbeelding, die de basis van het ontwerp zal vormen.

Stap 3
Daarna vullen we de afbeelding aan met verschillende elementen: een logo, tekstinscripties en een knop die u uitnodigt om op het menu te klikken. Vervolgens slaan we twee afzonderlijke afbeeldingen op de computer op: de ene is een avatar (aan de rechterkant), de tweede is een menu met een klikknop (aan de linkerkant).

Stap 4
Ook maken we in Photoshop een grafisch menu bestaande uit verschillende items. De breedte van dit menu moet 600 pixels zijn, de hoogte is optioneel, afhankelijk van het aantal items. Gebruik de les ““ om u te helpen.

Stap 5
Afhankelijk van het aantal menu-items snijden we onze menukaart in verschillende horizontale stroken. Opslaan als afzonderlijke bestanden.

Stap 6
We gaan naar onze VKontakte-groep, klikken op "Communitybeheer" (door op de drie stippen onder de auteur te klikken wordt een vervolgkeuzemenu geopend) en controleren of de instellingen correct zijn. De groep moet open zijn en de materialen moeten ook open zijn.

Stap 7
Nu uploaden we een nieuwe avatar. Beweeg uw muis naar de locatie van de avatar en selecteer 'Foto bijwerken' in het pop-upmenu. Laad de juiste foto uit stap 3, rek het selectiegebied op en neer tot aan de randen van de afbeelding, klik op “Opslaan” en selecteer vervolgens het gebied voor de ronde miniatuur.

Stap 8
Nu moet je een interne pagina maken. Hoe u dit doet, wordt in de les gedetailleerd beschreven. Een andere alternatieve manier om een ​​interne pagina te maken wordt beschreven in de les “” in stap 5 en 6.

Stap 9
Zodra we de interne pagina hebben gemaakt, kunnen we ernaartoe gaan. Om dit te doen, klikt u op het vervolgkeuzemenu van de groep (standaard heet dit item "Laatste nieuws" - ik heb het hernoemd naar "Menu") en klik daar op de link "Menu". Hierna gaan we naar de nieuw gemaakte lege pagina.

Stap 10
Nu moeten we een grafisch menu met vijf items maken. Om dit te doen, uploaden we onze vijf foto's uit stap 5 naar het groepsalbum. We klikken op het camerapictogram en uploaden de geknipte foto's vanaf de computer. De foto's worden ergens op VKontakte-servers opgeslagen en aan de groep gekoppeld, dus het is niet nodig om een ​​apart album aan te maken voor uitgeknipte foto's. Je moet afbeeldingen uploaden in de Wiki-opmaakmodus.

Stap 11
Nu zullen we in de wiki-opmaakmodus een grafisch menu maken. Het is erg belangrijk om te creëren in de wiki-opmaakmodus (het pictogram in de rechterbovenhoek van twee driehoekige haakjes), en niet in de visuele bewerkingsmodus. Meer informatie over het maken van code in wiki-opmaak wordt beschreven in stap 4 en stap 5 van de les ““. Er is ook een codesjabloon om in te voegen. Als alles correct is gedaan, zou u een kant-en-klaar grafisch menu moeten krijgen, zoals in de onderstaande afbeelding.

Stap 12
Nu keren we terug naar de hoofdpagina van de groep, nemen de URL van onze interne pagina (deze zou er zo uit moeten zien https://vk.com/page-78320145_49821289) en plakken deze in het venster waar nieuws wordt gemaakt. Er zou automatisch een venster met een link naar deze zeer interne pagina moeten worden bijgevoegd. Daarna verplaatsen we de cursor naar de inscriptie "Bijvoegen" en voegen een foto toe aan het bericht, namelijk onze foto aan de linkerkant uit stap 3. Daarna wissen we de regel van de URL van de interne pagina, waardoor er lege ruimte overblijft. Belangrijk! Bij deze stap moet u het vakje ‘Namens de groep’ aanvinken (als u over dergelijke rechten beschikt, geldt dit vooral voor groepen met een open muur). Als u dit vakje niet aanvinkt, wordt de invoer niet vastgezet. Klik ten slotte op “Verzenden”.

Stap 13
Verplaats de cursor naar de drie stippen naast de titel van het bericht en selecteer 'Vastzetten' in het vervolgkeuzevenster. Dienovereenkomstig wordt het nieuws indien nodig ook afstandelijk gemaakt.

Stap 14
Er is één voorbehoud. Soms, nadat je een nieuwsbericht hebt losgemaakt, komt het ver in de feed terecht, afhankelijk van de aanmaakdatum, en kan het behoorlijk moeilijk zijn om het weer te vinden. Daarom is het beter om de URL van het vastgezette nieuws meteen ergens op te schrijven. Verplaats hiervoor de cursor naar het tijdstip waarop het nieuws is gemaakt en klik op de link.

Stap 15
Nu werken we de hoofdpagina van de groep bij. Ons grafische menu bevindt zich bovenaan naast de avatar. En als we op de foto klikken, worden we naar een interne pagina geleid met een menu met vijf items.