Grafisch groepsmenu. Een menu maken voor een VKontakte-groep

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 er 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 verduidelijken 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-configuratiescherm 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 met elkaar te maken), dan kunt u deze regel leeg laten.

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 passen.

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 breng de breedte 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 snijden 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 een 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

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. Hierdoor 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.

Hallo mijn lieverds!

Vandaag zal ik je in detail vertellen: hoe je een menu maakt voor een VKontakte-groep. In mijn ervaring menu in de groep waarmee contact is verhoogt het aantal oproepen en verzoeken met 20%. Het is belangrijk om op een verantwoorde manier om te gaan met het maken van een groepsmenu. Daarom heb ik een menu-PSD-sjabloon voor u opgesteld om uw werk gemakkelijker te maken.

Laat ik beginnen met het feit dat er vandaag de dag twee menu-opties zijn:

Optie 1: Gesloten groepsmenu

Gesloten menu, wordt geopend wanneer u op de link klikt. In het onderstaande voorbeeld wordt het menu geopend wanneer u op de link “OPEN GROUP MENU!” klikt.



Optie 2: Groepsmenu openen (vastgezet bericht)

Een open menu is in wezen een vastgezet bericht met een actieve link.



De tweede menuoptie verscheen relatief recent, toen het mogelijk werd om berichten van de muur vast te zetten in de koptekst van een groeps- of openbare pagina. Het is nu het meest effectief.

Beide opties gebruiken wiki-opmaak. Wiki-opmaak Hiermee kunt u eenvoudig en snel het uiterlijk van de groep ontwerpen, grafische tabellen en spoilers maken, tekst opmaken en werken met afbeeldingen, links en ankers. Ik zal niet in detail op de markeringen ingaan, omdat... VKontakte heeft een ingebouwde visuele editor die uw inhoud automatisch vertaalt naar wiki-opmaak. Hier zal ik alleen de basiscodes geven, zonder welke het onmogelijk is om een ​​menu te maken.

Hoe maak je een open menu op VKontakte

We zullen het proces van het maken van een menu analyseren aan de hand van het voorbeeld van Optie 2, d.w.z. menu openen.

Om het voor u gemakkelijker te maken om te navigeren, heb ik een voorbereiding voor u gemaakt Menu PSD-sjabloon: [Aandacht. Het ontwerp van VKontakte is veranderd. Nieuwe lay-out en andere relevante informatie in ]

Groepsmenusjabloon PSD

Om een ​​extern menu te maken heb je 2 afbeeldingen nodig: een avatar (rechts) en een centrale (actiefoto).

Avatar-afmetingen: 200 x 332 px

Afmetingen van de centrale afbeelding: 395 x 282 px



Stap 1.

Maak met behulp van de hierboven gedownloade PSD-sjabloon voor het groepsmenu twee afbeeldingen van de vereiste formaten.

Stap 2.

Ga in jouw groep naar “Community Management” (rechts onder de avatar). Zoek het item 'Materialen' (op het tabblad 'Informatie') en maak ze 'Beperkt'.



Stap 3.

Keer nu terug naar de hoofdpagina van je groep en klik op “Bewerken” in het blok “Materialen” dat verschijnt (ik heb het al hernoemd naar Groepsmenu).



Wanneer u de pagina bewerkt, stelt u de titel in. U kunt secties of andere informatie maken met behulp van de werkbalk. Klik op 'Pagina opslaan' en 'Terug naar pagina'



Stap 4.



In mijn voorbeeld https://vk.com/page-42211349_47355854,

De eerste cijfers 42211349 zijn uw groeps-ID

De tweede cijfers 47355854 zijn de pagina-ID

De truc: u kunt handmatig extra pagina's maken. Om dit te doen, volgt u de link zoals:
https://vk.com/pages?oid=-хххххххх&p=pagename
Waar,
xxxxxxxxxx – dit is uw groeps-ID
paginanaam – de naam van uw pagina

Stap 5.



En publiceer het bericht.

Stap 6.

Upload nu de groepsavatar (foto rechts). Er verschijnt een dubbele avatarafbeelding aan de muur - verwijder deze.

Stap 7

Nu aandacht. Klik op POST-PUBLICATIETIJD (linksonder in het bericht).



En klik op “Vastzetten”. Sluit dit venster en ververs uw groepspagina (F5).



Stap 8

We schrijven de groepsstatus (gebruik slechts 1 regel) om de afbeeldingen uit te lijnen als de tekening op je avatar niet helemaal bovenaan begint (in mijn avatarsjabloon, optie 2). En dit is wat we kregen:



RESULTAAT.

De menukaart is klaar! Wanneer u nu op de centrale afbeelding klikt, wordt uw menu geopend:



Hier kun je het bewerken, foto's en video's plaatsen, nieuwe secties maken, links plaatsen.

U kunt ook een grafisch menu (submenu) maken in het hoofdmenu. De breedte mag niet groter zijn dan 600 px. De hoogte is onbeperkt. Hiermee kunt u uitstekende VKontakte-bestemmingspagina's maken.



Maar ik zal hier in de volgende artikelen meer in detail over praten. Abonneer u op blogupdates om op de hoogte te blijven van nieuwe functies. Like en deel het artikel met je vrienden.

Plaats uw vragen of meningen in de reacties hieronder.

), maak een menu.

Nu zal ik het je laten zien hoe je een menu maakt in een VKontakte-groep en het correct ontwerpt.

Mooie graphics maken

In het nieuwe ontwerp van de VKontakte-website zijn de afmetingen voor afbeeldingen gewijzigd. Hieronder vindt u de huidige waarden.

• Avatar voor de groep - 200x300 px
• Banner in beschrijving - 510x271 px

Bereid afbeeldingen voor in de vereiste formaten. Ik zal kant-en-klare foto's maken om u een voorbeeld te laten zien.

Laten we dus een mooi ontwerp maken door het totaalbeeld in twee delen te verdelen. Als gevolg hiervan krijgen we één ontwerp.

Upload eerst uw avatar. Ga naar de groep en klik "Foto uploaden".

U ziet een formulier waarin u een bestand op de harde schijf van uw computer moet selecteren. Doe het. Als gevolg daarvan kregen we het volgende.

Laten we nu het tweede deel van de afbeelding toevoegen. Om dit te doen, moet je een foto aan de muur hangen en deze vervolgens opnemen, en deze in het bovenste gedeelte bevestigen.

Laten we naar de muur gaan. Hier op het blok "Invoer toevoegen", tik op het fotopictogram.

Upload de tweede voorbereide afbeelding. Zorg ervoor dat u ervoor kiest om als community te posten. En klik vervolgens op "Verzenden".

Nu moet de toegang worden beveiligd (zie). We keren terug naar het nieuwe item en vouwen het menu in de rechterbovenhoek uit. Hier klikken we op “Pin”.

Vernieuw nu de pagina en bekijk het resultaat.

Het enige negatieve is dat de foto's zich op verschillende niveaus bevinden. Maar dit komt doordat ze niet de juiste maat hebben. De avatar moet verticaal groter zijn. Dan zitten ze op hetzelfde niveau.

Hoe een menu te maken in een VKontakte-groep

Laten we teruggaan naar ons voorbeeld en ons voorstellen dat we een knop 'Meer details' moeten maken. Ze staat al op de foto. Hoe kunnen we er een knop van maken, zodat iemand die erop klikt, naar onze hoofdsite wordt geleid? Ik zal het je nu laten zien.

Om actieve menuknoppen te maken, moeten we ze uitknippen als afzonderlijke afbeeldingen. Hiervoor hebben we Photoshop nodig.

Open onze foto in de editor en activeer de tool “Snijden”.

Knip het onderste gedeelte af met de knoop. Houd de linkermuisknop ingedrukt en teken een horizontale lijn, waardoor de afbeelding in twee delen wordt gesneden.

Druk nu op Alt+Ctrl+Shift+S om de voltooide afbeeldingen op te slaan.

Https://vk.com/pages?oid=-120208137&p=menu

Kijk, na de symbolen "odi=- ", moet je de ID van je groep invoegen (zie). En schrijf helemaal aan het einde van de link de naam voor uw menupagina. In het voorbeeld laten we “Menu” zoals het is.

Hier klikken we op het camerapictogram en uploaden de voorbereide afbeeldingen.

Laten we nu verder gaan met het maken van een menu voor de groep op VK. Het zou er ongeveer hetzelfde uit moeten zien.

Vervolgens gaan we naar de sectie "Bewerken". Hier moeten we voor elke afbeelding de opvulling verwijderen, zodat ze samenvloeien tot één afbeelding. Om dit te doen, voegt u de volgende waarde toe aan de code: “nopadding;” . En voeg een link toe naar de gewenste pagina of site, waarbij u de waarde “https://site.ru/page.html” invoert (geef uw adressen aan!). In ons voorbeeld zou de knop ‘Meer details’ naar de website moeten leiden. Dit is wat er zou moeten gebeuren.

[] []

Sla de pagina op. Vergeet niet haar adres uit de adresbalk te kopiëren. Het zou er zo uit moeten zien:

https://vk.com/page-120208137_52523487

We keren terug naar de groepsmuur en maken een nieuwe vermelding. Daarin voegen we een link naar de pagina in en voegen de originele afbeelding toe. Wij publiceren en pinnen.

Dit is het menu waar we uiteindelijk mee uitkwamen.

Hallo vrienden!

Ik vroeg me af of ik een menu wilde maken voor mijn openbare VKontakte-pagina. Maar op zoek naar een oplossing voor het probleem raakte ik een beetje verdwaald op internet.

Zo nu en dan bemoeilijkt iedereen het maken van menu's door speciale opmaakcodes in te voegen en uit te leggen. Zoals later bleek, hadden we het over Wiki-opmaak 😉. In principe is er niets ingewikkelds aan. Een paar speciale codes, waarvan de essentie gemakkelijk te begrijpen is als je 10 minuten vrije tijd besteedt.

Over het algemeen heb ik een eenvoudig menu gemaakt voor een van de VKontakte-pagina's:

Ik heb letterlijk 30 minuten besteed, wat niet gezegd kan worden over het artikel dat ik schreef 😀

Allereerst wil ik meteen een reservering maken - Dit menu is een pop-up, openbaar (niet in de groep).

Het verschil is dat u voor een openbare pagina geen menu kunt maken op de hoofdcontactpagina. Het wordt alleen gevormd door een nieuwe pagina te maken, waarin we het benodigde menu maken. Je kunt het doen met Photoshop door een foto te knippen, of je kunt het doen met een eenvoudig menu, zonder Photoshop te gebruiken :), wat ongeveer met mij is gebeurd...

Hoe je een menu maakt in een VKontakte-groep

Het is misschien een beetje onjuist om het maken van een menu op basis van een openbare pagina te beschrijven. Maar ik werk uitsluitend met openbare pagina's. Het is gemakkelijker om menukoppen in een groep te maken; u hoeft niet eens een nieuwe pagina te maken, tenzij u besluit de bezoeker binnen de pagina's te verplaatsen.

Alleen voor de openbare pagina. u moet eerst de pagina openen en pas dan verschijnt er een menu... maar je kunt niet rechtstreeks naar de hoofdpagina gaan! Ik heb in ieder geval geen oplossing voor het probleem gevonden.

Voor een groep is alles eenvoudiger. Direct onder de hoofdbeschrijving bevindt zich een menu-item en een link "bewerken" (zoals weergegeven in de afbeelding). Als je zo'n inscriptie niet hebt, heb je hoogstwaarschijnlijk eenvoudigweg geen materialen in je groep aangesloten, ga naar de groepsinstellingen en klik op het selectievakje naast het woord materialen.

We zullen niet in detail op de groep ingaan. Het wordt op ongeveer dezelfde manier gevormd als voor een openbare pagina met dezelfde Wiki-codes. Maar wees niet ongerust. Het is niet nodig om de jungle van symbolen in te gaan. Ik deed het bijvoorbeeld zonder naar het tabblad Codebewerking te gaan.

Ik zal in meer detail uitleggen hoe ik het menu op mijn pagina heb gemaakt:

Dus over het publiek. Alles werkt voor oud en nieuw publiek. Wij ondernemen de volgende stappen:
1. Voer een verzoek uit zoals: //vk.com/pages?oid=-XXX&p=YYY
waarbij XXX uw openbare nummer is; JJJ is de naam van de vereiste pagina
Als alles correct is gedaan, verschijnt er een nieuwe pagina voor je. Klik op "Bewerken" en maak een Wiki-menu of iets anders
2. De pop-uppagina wordt opgeroepen met de opdracht:
//vk.com/publicXXX?w=pagina-XXX_YYY

Aandacht! Alle minnen, vraagtekens en andere tekens zijn vereist. Wijzig alleen XXX en YYY.
Alle! Nu moet je de link een "aangename uitstraling" geven - met behulp van vk.cc - een VKontakte linkverkorter.

Mijn pagina heeft bijvoorbeeld het adres: //vk.com/sf_kontakt,Om XXX (pagina-ID) te achterhalen, gaat u naar het item “Paginabeheer”.

//vk.com/pages?oid=- 34016644 &p= Vul hier de naam in

Vervolgens brengt de contactpersoon ons naar een nieuw gemaakte pagina, die we moeten bewerken voor het toekomstige menu. Er is niets ingewikkelds; u hoeft de code niet eens te bewerken, maar voegt eenvoudigweg de benodigde pictogrammen of tekst in.

In mijn voorbeeld waren alle links naar externe bronnen. Wanneer u op het eerste icoon klikt, wordt de statussite geopend, wanneer u op het tweede icoon (boek) klikt, wordt de abonnementspagina geopend. Je kunt de gebruiker ook niet naar externe bronnen sturen, maar hem binnen het contact omcirkelen. Hetzij naar nieuwe (verschillende) groepen, hetzij naar beschrijvingspagina's die volgens hetzelfde principe zijn gemaakt.

Het blijkt dat u een interne site binnen uw pagina kunt maken. In dit geval hebben we een tweede pagina gemaakt ten opzichte van de hoofdpagina:

ze accepteerde het volgende adres: //vk.com/sf_kontakt?w=page-34016644_44405134

En uiteindelijk: Hoofdgroep of publiek/Naam van de aangemaakte pagina

Ik hoop dat hier geen problemen mee zullen optreden.

We maken het hoofdmenu in contact:

De eenvoudigste manier om een ​​menu op een pagina te maken, is door gewone tekstlinks te maken (elk op een nieuwe regel). Maar als je de wiki-opmaak niet bewerkt, staan ​​alle links of ingevoegde afbeeldingen in één kolom. In principe is dit voldoende voor een eenvoudig menu.

Maar als u elementen op verschillende plaatsen op de pagina wilt verspreiden, moet u de code een beetje bewerken. Ik vond verschillende kant-en-klare tabellen en plaatste mijn afbeelding voor het menu in de gewenste cel. Aan de linkerkant staat dus een pictogram met een beschrijving, in het midden zijn er gewone tekstlinks en aan de rechterkant is er nog een leerboekpictogram.

Om zo'n menu te maken zonder de code te begrijpen, kun je eenvoudig de link volgen en een kant-en-klaar menu selecteren. Hier is een groep waar je sjablonen kunt vinden: //vkontakte.ru/club9390683

1. Klik “Menu” -> “Menuverzamelingen”
2. Kies uw favoriete menu
3. Kopieer de code van uw gekozen menu
4. Ga naar uw groep en paginabewerking Laatste nieuws, in het broncodegedeelte voegen we de code van ons menu voor het contact in.

Menu voor VKontakte-groep

Nu hebben we een pagina met navigatiepunten, die het adres heeft: //vk.com/page-34016644_44405134. Om deze bovenaan uw openbare pagina weer te geven, doen we het volgende:

• Nieuw nieuws toevoegen
• We voegen de hoofdafbeelding toe en klikken erop om ons menu voor de gebruiker te openen.
• Plaats de link van de gemaakte pagina in het nieuws
• En de laatste stap is het ‘vastzetten van berichten’. Schrijf een bericht met een foto/video/muziek, publiceer het, klik vervolgens op de publicatiedatum en klik op ‘Vastzetten’.

Nadat je het nieuws hebt vastgezet, wordt het bericht automatisch bovenaan geplaatst. Als je erop klikt, wordt er een menu geopend.

In principe niets ingewikkelds! En voor velen hoop ik dat dit artikel zal helpen. Ook maken ze op een vergelijkbare manier een verborgen vermelding, bijvoorbeeld een raadsel, om een ​​antwoord te krijgen waarop de abonnee zich bij het publiek moet aansluiten. Het is alleen zo dat u in dit geval op de gemaakte pagina de rechten moet aangeven voor wie deze beschikbaar zal zijn. Maar dit is een iets ander onderwerp :), dat we in een van de komende berichten zullen bespreken.

Dat is alles voor vandaag. Bedankt voor het langskomen! 😉 Tot de volgende keer...

Talrijke verzoeken van mijn aanhoudende lezers en gewoon nieuwsgierige gebruikers hebben hun effect gehad. Ik heb eindelijk een les gemaakt waarin we zullen leren hoe we een dynamisch VKontakte-menu kunnen maken met het effect van ingedrukte knoppen! Naar analogie met gewone internetsites, wanneer een bezochte link op een speciale manier wordt gemarkeerd (ingedrukte knop, onderstreping, enz.) - zullen we hetzelfde ontwerp maken op VKontakte, met behulp van de gemaakte pagina's en grafisch ontwerp. Om te beginnen zullen we grafische sjablonen maken in Photoshop - we zullen een menukop en twee soorten knoppen maken. Vervolgens zullen we verschillende VKontakte-pagina's maken, volgens de items in ons menu. En ten slotte zullen we een lastige truc doen, die in feite de illusie wekt de link te volgen. De les is vrij complex en is geschikt voor degenen die vertrouwen hebben in de functionaliteit van Vkontakte. Ik zal alle manipulaties uitvoeren aan de hand van een voorbeeld uw VKontakte-groep, waar dit effect live wordt gerealiseerd. Dus laten we aan de slag gaan!

Stap 1. Maak een menukop in Photoshop
Maak een document in Photoshop met een breedte van 600 pixels. De hoogte kan naar eigen inzicht verschillen. U kunt elke specifieke foto, collage, informatiebanner en andere grafische afbeeldingen in de header plaatsen. In dit geval heb ik deze reclamebanner van 600x172 pixels gebruikt.

Stap 2. Maak een navigatiebalk in Photoshop
Nu moeten we een navigatiebalk maken. In dit voorbeeld heb ik alleen tekst als knoppen gebruikt. Maar naar eigen goeddunken kunt u gekleurde knoppen maken en er tekst op schrijven. We doen dit: maak een rechthoek van 600x56 pixels in Photoshop en vul deze in dit geval met wit. Vervolgens schrijven we menu-items op de regel - ongeveer 5-6 items, niet meer. Een groter aantal punten zal er uitgeknepen uitzien.

Stap 3. Maak een ingedrukte navigatiebalk in Photoshop
Nu moeten we actieve links maken, alsof erop wordt geklikt. Ik heb een gewone onderstreping gebruikt, maar je kunt een andere tekst- of achtergrondkleur gebruiken om de bezochte link te markeren.

Stap 4. Knip kant-en-klare afbeeldingen
In dit stadium moeten we de afbeeldingen uit stap 2 en stap 3 knippen. We zouden twee sets van elk vijf knoppen moeten hebben: één knop zonder onderstreping, de andere knop met een onderstreping. De knoppen voor elk afzonderlijk item (met en zonder onderstreping) moeten dezelfde grootte hebben. De onderstaande afbeelding toont al ons grafisch ontwerp: tien knoppen en één menukop.

Stap 5. Maak een VKontakte-menupagina
Laten we nu naar VKontakte gaan. Onze taak is om een ​​aparte pagina te maken met de naam "Menu". Om dit te doen zullen we de volgende code gebruiken
http://vk.com/pages?oid=-XXX&p=Paginanaam
waar we in plaats van XXX de ID van onze groep zullen vervangen, en in plaats van de tekst “Paginanaam” zullen we Menu schrijven. Nu moeten we de groeps-ID achterhalen. Hoe dit te doen? We gaan naar de hoofdpagina van de groep en bekijken onze berichten aan de muur - direct onder het blok 'Post toevoegen' staat 'Alle berichten' - klik op deze link.

Stap 6. Bepaal het groeps-ID en bewerk de code
We gaan naar de pagina en zien een URL zoals deze https://vk.com/wall-78320145?own=1, waarbij de nummers 78320145 in dit voorbeeld de groeps-ID zijn. We vervangen onze gegevens in de broncode en krijgen een record als dit:
http://vk.com/pages?oid=-78320145&p=Menu(met jouw cijfers!). Plak deze regel in de adresbalk van de browser en druk op Enter. Daarom hebben we een nieuwe VKontakte-pagina gemaakt en in eerste instantie ziet deze er zo uit.

Stap 7. Maak de resterende VKontakte-navigatiepagina's
Op vergelijkbare wijze creëren we nog vier navigatiepagina's: Prijzen, Hoe te bestellen, Technische specificaties en Vragen. Dat wil zeggen dat we de bijbehorende code nog vier keer kopiëren naar de adresbalk van de browser (met uw ID-nummers in het onderstaande voorbeeld, mijn nummers):

http://vk.com/pages?oid=-78320145&p=Prijzen

http://vk.com/pages?oid=-78320145&p=Hoe_bestellen

http://vk.com/pages?oid=-78320145&p=Technische specificaties

http://vk.com/pages?oid=-78320145&p=Vragen
Houd er rekening mee dat in de paginatitel van twee woorden (Hoe bestellen) de ruimte tussen de woorden wordt vervangen door een onderstrepingsteken Hoe_volgorde. Nu hebben we voor elk menu-item vijf kant-en-klare pagina's. We hebben geen Portfolio-pagina gemaakt omdat deze zich op de Menu-pagina bevindt

Stap 8. Upload foto's naar de eerste pagina van het menu
Klik in het aangemaakte, nog lege paginamenu (zie stap 6) op de link Bewerken of de link Vullen met inhoud. Hierna zien we het bewerkingspaneel. Hier moeten we op het camerapictogram klikken met de functie Foto uploaden. Belangrijk! Zorg ervoor dat u zich in de wiki-opmaakmodus bevindt. Het wisselen tussen modi wordt geregeld door het pictogram aan de rechterrand van de pagina.

Stap 9. Resultaat na het laden van afbeeldingen
We laden onze afbeeldingen die we in stap 1 en stap 2 hebben gemaakt. Na het laden zien we de code zoals in de onderstaande afbeelding, en het menu zelf ziet er zo uit. Vergeet na elke codewijziging niet op Pagina opslaan te klikken en vervolgens op Voorbeeld om het resultaat te bekijken.

Stap 10. De afbeeldingscode bewerken
Nu is het onze taak om alle noborder-eigenschappen te vervangen door de nopadding-eigenschap. En plaats de echte afmetingen op de eerste foto, aangezien VKontakte de foto bij het uploaden verkleinde tot 400 pixels. Na alle wijzigingen zouden we de volgende code en menu moeten krijgen.

Stap 11. Voeg links naar afbeeldingen toe
Nu moeten we links voor elke foto plaatsen. De link moet worden ingevoegd na nopadding| in plaats van een spatie vóór de afsluitende haakjes. Voor de eerste afbeelding (menukop uit stap 1) kunt u een link geven naar de hoofdpagina van de groep, of u kunt de eigenschap nolink gebruiken (doorgezet; na nopadding zonder spaties). Voer voor de tweede kaart het adres van de opmaakpagina in pagina-78320145_49821289. Dat wil zeggen, de volledige URL van de afbeelding https://vk.com/page-78320145_49821289, kan het eerste deel met het domein worden weggelaten. Maar voor links naar externe sites moet de URL van de link volledig worden opgegeven.

Stap 12. Kopieer de code naar de overige navigatiepagina's
In deze vrij eenvoudige stap kopiëren we de laatste code uit de vorige stap en plakken deze op de resterende gemaakte pagina's - Prijzen, Hoe te bestellen, Referentievoorwaarden en Vragen. We zijn op de pagina, klik op Bewerken of Vullen met inhoud (we bevinden ons in de wiki-opmaakmodus), plak de code en klik op Opslaan. En dan ook op de volgende pagina. Dat wil zeggen, nu hebben we vijf pagina's, op elk waarvan het menu er precies hetzelfde uitziet. Maar u kunt al door het menu navigeren - wanneer u op een link klikt, bijvoorbeeld Prijzen, worden we verplaatst naar de pagina Prijzen, enz.

Stap 13. Een ingedrukt knopeffect maken
Nu moeten we op elk van de vijf pagina's één afbeelding wijzigen (vervang de knop zonder onderstreping door een knop met een onderstreping). Op de eerste pagina van het menu laden we bijvoorbeeld een nieuwe afbeelding en vervangen we vervolgens het adres van de oude afbeelding in de code door een nieuwe (rood onderstreept). Vervolgens gaan we naar de pagina Prijzen, uploaden een foto met onderstreepte Prijzen en veranderen deze in de code naar het adres van de nieuwe foto. Vervolgens gaan we naar de pagina's Hoe bestellen, Algemene voorwaarden en Vragen en voeren dezelfde handeling op dezelfde manier uit.

Finale.
Als gevolg hiervan kregen we een navigatie-effect wanneer u op een menulink klikt en deze actief wordt. Maar omdat de grafische vormgeving op alle pagina's vrijwel hetzelfde is, met uitzondering van de actieve link, ontstaat de illusie van navigatie, terwijl het in feite een overgang naar een andere pagina is.

Het op deze manier ontworpen menu is niet aangepast voor mobiele apparaten. Wanneer de schermgrootte kleiner wordt, beginnen de afbeeldingen onder elkaar te schuiven. Om een ​​responsief ontwerp te maken, moet u tabellen met een rigide versie gebruiken. Maar dit is een ander verhaal en een geavanceerdere techniek. Bekijk ondertussen de verschillende opties voor grafisch menuontwerp.