Grafisch menu in de VKontakte-groep. Hoe u een menu maakt voor een VKontakte-groep

Aangezien dit menu niet in een groep staat, maar op een VKontakte-pagina (openbaar), heb ik besloten je te laten zien hoe het allemaal werkt! Er worden mij al een hele tijd vragen gesteld: hoe maak je een menu op een openbare pagina, hoe maak je het menu open, hoe maak je het sticky, etc.. Hier zijn de instructies voor jou!

Dus hoe is het überhaupt mogelijk maak een menu op een openbare pagina in contact? We weten allemaal dat het mogelijk is om een ​​ingebouwd wikimenu toe te voegen alleen in groep, Ik heb hier ook over geschreven. Maar hoe kun je een menu op een openbare pagina maken als een dergelijke functie niet in de instellingen zit? Er zijn geen beperkingen voor een onderzoekende geest! Zo ziet het menu eruit op onze zakelijke openbare pagina:

Menukaart openbaar? Zo eenvoudig als taart!

Bekijk de artikelen nog eens: en nu hebben we deze kennis nodig!

In 3 stappen naar een prachtig publieksmenu!

Je raadt het waarschijnlijk al: de basis van zo’n menu is... vastgezet bericht met binnenpagina! Persoonlijk vind ik deze methode erg leuk, zelfs in mijn bloggroep heb ik het insluiten opgegeven en gebruik ik het “vastgezette menu”. En nu zal ik je duidelijke instructies geven over “hoe je het moet doen”!

Stap 1: Maak een interne menupagina

Om een ​​menu in onze groep te laten verschijnen, moet het dus op een aparte interne pagina worden gemaakt. En zoals u zich herinnert, hebben we op openbare pagina's niet de mogelijkheid om een ​​menu toe te voegen, maar gaan we de andere kant op en maken we een interne pagina. Om het te maken, moeten we het adres correct invoeren in de browserregel. Hier is een linksjabloon:

Optie 1: (regulier)

http://vk.com/pages?oid=- XXX &p= Paginanaam

waarbij XXX de ID is van uw openbare pagina,

en “Paginanaam” is elk woord dat wordt gebruikt om de pagina een naam te geven

Optie 2: (lichtgewicht, maar)

We maken dus een wikipagina en vullen deze op dezelfde manier in als wanneer we een menu voor een groep invullen. Dat wil zeggen, we schrijven daar alle afbeeldingen en overgangen. We zouden zoiets als dit moeten krijgen:

Dit is de wiki-menucode

Aandacht! Als je nog niet weet hoe je visuele menu's in contact kunt maken, dan herhaal ik het artikel! Als alles in orde is. dan krijg je een plaatje als dit:

En dit is de voltooide menupagina

Stap 2: Maak een bericht aan de muur

Nu moeten we ons menu toevoegen aan de VKontakte-communitymuur. Om dit te doen kopiëren we link naar interne pagina en voeg het als volgt toe aan het bericht:

Je weet waarschijnlijk al dat een link naar een bericht automatisch wordt bijgevoegd en nadat de link vanuit het bericht zelf is bijgevoegd, kan het paginaadres worden verwijderd. Als u een link publiceert, verschijnt het menu niet aan de muur, maar komt er eenvoudigweg een link, door erop te klikken, wordt iemand naar ons menu geleid. Dit is slechts het halve werk! We willen dat het menu opvalt en in een speld hangt, d.w.z. op de meest zichtbare plaats.

Dus nu moeten we wel koppeling verwijderen uit de “body” van het bericht (de bijgevoegde pagina blijft behouden) en voeg deze toe aan het bericht afbeelding, die abonnees te zien krijgen. De truc is dat als er een link en een afbeelding in één bericht staan, en je vervolgens op de afbeelding klikt, een link volgen! Alles wat ingenieus is, is eenvoudig!
De afbeelding kan het menu zelf gedeeltelijk of volledig herhalen, het is aan jou om te beslissen. Bestel je een menukaart voor publiek, dan heb je ook een banner nodig, bv. een foto die in een clip hangt. Dit is wat we krijgen als we een bericht publiceren:

De afbeelding herhaalt het menu en trekt de aandacht van paginabezoekers

Stap 3: Zet het bericht vast

Eindelijk hebben we alles klaar en hangt de post met een foto en een link aan de muur! Nu moeten we het naar de groepskop verplaatsen, het bericht op de hoofdpagina vastzetten, het vastzetten... Om dit te doen, klikt u op de datum/tijd van het bericht (onder elk bericht staat een publicatiedatum), we krijgen naar de interne pagina van het bericht, scroll naar beneden en zoek daar naar de knop "pin" " Kijk naar de afbeelding om te zien wat je moet vinden:

Klik op deze knop en ververs de pagina. Voila, je bent klaar! Geniet van de prachtige menukaart!

vk.com/frilkacom

Je kunt zelfs een foto kiezen die een voortzetting van je avatar zou worden - dit ontwerp ziet er erg mooi uit.

Dat is alles, met behulp van drie eenvoudige stappen zijn we erin geslaagd een prachtig menu te creëren dat in elke VK-gemeenschap kan worden gebruikt!

Dat is alles wat ik ervoor heb! Deel het artikel met je vrienden, voeg het toe aan je favorieten en volg de blogupdates om geen nieuwe interessante artikelen te missen!

Op de vraag "hoe je een menu maakt voor een VKontakte-groep" zijn er drie hoofdantwoordopties: bestellen bij een specialist, maken met behulp van een online ontwerper of sleutelen, je verdiepen in enkele van de fijne kneepjes van het probleem en alles zelf doen.

In dit artikel zullen we alle drie de opties één voor één bekijken. Trouwens, als je nog steeds twijfelt aan de noodzaak van een menu voor je groep of publiek, lees dan zeker even.

Hier zijn dus drie manieren om een ​​menu te maken:

Elk van hen heeft natuurlijk zijn eigen voor- en nadelen. Hieronder zullen we wat meer in detail over de eerste twee praten. En voor degenen die nog steeds besluiten het derde pad te volgen en alles zelf te doen, hebben we een gedetailleerde gids (instructies) geschreven.

Voor degenen die liever informatie ontvangen via video's dan lange teksten lezen, is er trouwens een video:

Pad #1. Bestel menucreatie bij een gespecialiseerde ontwerper

De voordelen van deze methode zijn relatieve snelheid en minimale deelname van uw kant. Nadelen - de hoogste prijs en de kans op een mooi, maar onjuist menu (we hebben ons voorbereid op de belangrijkste fouten bij het maken van een menu). Bovendien moet je nog steeds een artiest vinden. Hier kunnen we aanbevelen ernaar te zoeken op de kwork.ru-service, in het gedeelte 'Ontwerp van groepen in sociale netwerken'.

Pad #2. Met behulp van de online constructor

Hier zullen we uiteraard onze ontwerper aanbevelen, op wiens website u zich momenteel bevindt. Je kunt het gratis proberen. Betaling vindt alleen plaats als het resultaat bij u past en u besluit het resulterende menu naar uw groep te uploaden. De voordelen van deze route zijn dat deze de snelste is. Bovendien kunt u, indien nodig, uw menu altijd snel bewerken en herladen tegen de helft van de aanmaakkosten. Dit is handiger dan elke keer naar een ontwerper te zoeken als u bijvoorbeeld een item aan een menu wilt toevoegen of verwijderen. De nadelen van deze methode zijn dat je behoorlijk wat alleen zult moeten werken.

Pad #3. Doe het allemaal zelf

De voordelen van dit pad liggen voor de hand: het is gratis en je verwerft nieuwe vaardigheden. De nadelen zijn: je hebt wat vaardigheden nodig en best veel tijd (voor de eerste keer). Dit is wat je nodig hebt:

  • Met vertrouwen een grafische editor kunnen gebruiken. Bijvoorbeeld PhotoShop. Als je een menu maakt, moet je eerst een afbeelding maken met de juiste afmetingen (tot op de pixel, geen “ongeveer”!), en deze vervolgens op de juiste manier knippen (in fragmenten opdelen)
  • Instructies kunnen begrijpen en aandachtig kunnen lezen
  • Geef niet op en wanhoop niet als iets de eerste keer niet lukt

Als je denkt dat je dit allemaal aankunt, laten we dan aan de slag gaan.

Stap #0. Algemene informatie over hoe de VK-groepsmenu's zijn gestructureerd

Het menu voor de groep is gemaakt van wikipagina's, waarvan de creatie wordt ondersteund door VK. Wiki-pagina's zijn speciale pagina's die alleen op openbare pagina's kunnen worden gemaakt. Ze verschillen van gewone berichten doordat ze zogenaamde wiki-markeringen kunnen gebruiken. Deze opmaak is speciale code die wordt omgezet in aanvullende opmaakobjecten. Om het duidelijker te maken, laten we het uitleggen. In gewone berichten kun je bijvoorbeeld alleen platte tekst gebruiken, maar met wiki-opmaak kun je delen van de tekst vet of cursief markeren. Dat wil zeggen, het introduceert extra ontwerpopties. In het bijzonder de mogelijkheid om afbeeldingen te plaatsen; wanneer erop wordt geklikt, wordt de gebruiker doorgestuurd naar een link. Het zijn deze extra opmaakopties die worden gebruikt om het openbare VK-menu te maken. Hoe u dit precies doet, vertellen wij u hieronder.

Stap 1. Voorbereidende fase

Als u een bestaande groep heeft, raden wij u aan een nieuwe aan te maken. Voor testen en experimenten. Anders loop je tijdens het leerproces het risico dat je je abonnees overspoelt met vreemde en onnodige updates.

Je hebt dus een nieuwe groep gemaakt. Laten we nu de identificatie (ID) van uw groep achterhalen. De groeps-ID is het unieke VKontakte-nummer. Ga naar je groep en klik op “Community Posts” (als er geen posts in de groep zijn, dan verschijnt “Geen Posts” in plaats van “Community Posts”). U wordt doorgestuurd naar een nieuwe pagina met een adres als dit:

https://vk.com/wall- XXX?eigen=1

In plaats van XXX je hebt een reeks cijfers (en alleen cijfers!). Dit is uw community-ID. In onze bijvoorbeeld test groep dit is 154457305.

Laten we nu een nieuwe wikipagina in de groep maken. Om dit te doen, zullen we een link als deze maken:

http://vk.com/pages?oid=- groep_id&p= Paginanaam

http://vk.com/pages?oid=- 154457305 &p= Menu

Open de resulterende link in uw browser (kopieer deze naar de adresbalk van uw browser en ga naar het adres). Dat is alles, u heeft een wikipagina gemaakt met de naam “Menu” (als u natuurlijk “Menu” hebt opgegeven als paginanaam in de link). Je zou de volgende tekst moeten zien: “De menupagina is leeg. Vul het met inhoud." In de rechterbovenhoek bevindt zich een potloodpictogram (). Klik erop om naar het bewerken van de pagina te gaan.

De VK-wikipagina-editor heeft twee modi: grafische modus en opmaakmodus. U kunt tussen modi wisselen met de knop rechtsboven in de editor (). Wanneer de knop blauw gemarkeerd is, betekent dit dat de markeringsmodus is ingeschakeld. De visuele bewerkingsmodus is handiger, omdat stelt je in staat om het te doen zonder kennis van de syntaxis van wiki-markeringen, maar de functionaliteit ervan is uiterst beperkt: je kunt er alleen de eenvoudigste dingen in doen. In principe zul je te maken krijgen met de opmaakmodus.

Let op twee dingen. Ten eerste bevindt zich links van de knop voor het wisselen van bewerkingsmodus een knop voor het oproepen van helpinformatie over wiki-markeringen (). Een heel handig ding, vooral voor beginners. Het tweede punt waar u op moet letten is het adres van de wikipagina. U ziet zoiets als dit in de adresbalk van uw browser:

http://vk.com/page-groep_id _XXX?act=bewerken§ion=bewerken

Een deel van het adres vóór de "?" - dit is het adres van uw wikipagina. Schrijf het ergens op: in VK is er geen manier om een ​​lijst met je wikipagina's en links ernaar te zien. Om naar degene te gaan die je nodig hebt, moet je het adres weten of de link gebruiken om opnieuw een wikipagina te maken. Wanneer u de laatste methode gebruikt, houd er dan rekening mee dat de pagina's, als ze al bestaan, worden niet opnieuw gemaakt.

Stap 2. Een eenvoudig menu maken voor een VKontakte-groep

Daarom hebben we een wikipagina “Menu” gemaakt. Ga naar de opmaakmodus van de editor en voeg de volgende code toe:

Klik op de knop ‘Voorbeeld’, die zich onderaan de editor bevindt. U zou een lijst met drie links moeten zien. De eerste twee zijn extern en leiden naar respectievelijk de hoofdpagina's van Yandex en Google. De derde link is intern. Het leidt naar een openbare VK met ID “1” (dit is de officiële VK-groep voor ontwikkelaars). Als uw voorbeeld uw code weergeeft en geen links (waar u op kunt klikken) - het betekent dat je de code hebt ingevoerd in de visuele bewerkingsmodus, en niet in de opmaakmodus. Wees voorzichtig!

Houd er rekening mee dat externe links in de VK-wikicode zijn opgemaakt met enkele haakjes, en interne links met dubbele haakjes. In dit geval worden interne VK-links niet aangegeven als het gebruikelijke websiteadres, maar als verwijzing naar een bepaald VK-object. Een verwijzing naar een groep heeft bijvoorbeeld de volgende vorm:

club groep_id

Op VKontakte zijn er niet alleen verwijzingen naar groepen, maar ook naar individuele foto's, berichten, wikipagina's, gebruikerspagina's, audio-opnamen, enz. Elke index heeft zijn eigen registratievorm. We zullen er later een paar gebruiken en ze in meer detail bekijken.

Zorg ervoor dat u de pagina opslaat. Kortom, we hebben zojuist een heel eenvoudige navigatiepagina gemaakt. Dat is niets meer dan het eenvoudigste menu voor VKontakte-groep. Dit is natuurlijk nog geen grafisch menu, maar zelfs het kan de hoofdtaak van het menu aan: gebruikers snel naar de gewenste openbare locatie leiden. We zullen later bekijken hoe je een grafisch menu kunt maken.

Laten we nu eens kijken hoe en waar u wikipagina's kunt gebruiken.

Stap 3. Waar kan ik VKontakte-wikipagina's plaatsen?

Er zijn twee hoofdplaatsen: u kunt een bericht maken met een link naar de wikipagina of dit plaatsen in de sectie “Materialen” van uw community.

Laten we beginnen met de eerste optie. Begin met het toevoegen van een nieuw bericht aan je groepsmuur. Voeg eerst een foto eraan toe. Het is beter om een ​​vrij grote foto te maken waarvan de breedte groter is dan de hoogte. Voeg vervolgens in de tekst van het item dat u aan het maken bent een link in naar de wikipagina die u hebt gemaakt met een eenvoudig menu. Dit is wat we u iets eerder hebben gevraagd op te schrijven. Laten we u eraan herinneren dat de link er zo uitziet ( je zult verschillende nummers hebben):

http://vk.com/page-121237693_72827423

Nu tekst verwijderen koppelingen uit het invoerveld. De link zelf onder de foto zal niet verdwijnen. Maar als u het linkadres in het tekstveld laat staan, verschijnt het als tekst in het bericht. Publiceer het bericht, laad de browserpagina opnieuw met de hoofdpagina van uw groep en zet het gemaakte bericht vast. Laad de pagina opnieuw. Als resultaat van deze manipulaties zou je zoiets als dit moeten krijgen:

Klik op de foto in het vastgezette bericht: uw wikipagina zou moeten verschijnen met een eenvoudig groepsmenu.

We hebben dus geleerd dat wikipagina's aan berichten kunnen worden toegevoegd. In het bijzonder - naar de toegewezen post. De tweede plaats waar je wiki-opmaak kunt gebruiken is het gedeelte 'Materialen'.

Ga naar de community-instellingen en vind daar het beheer van communitysecties (diensten). Markeer 'Materialen' als 'Beperkt'. Er verschijnt nu een nieuw item bovenaan de startpagina van uw community. Het bevindt zich rechts van het item "Informatie". Wanneer je materialen in een groep voor het eerst aanzet, heet dit item standaard “Laatste Nieuws”. Dit is hoe het eruit ziet:

Ga naar dit nieuwe artikel. Klik op het selectievakje "Bewerken". Als gevolg hiervan bevindt u zich in de wikipagina-editor waarmee u al vertrouwd bent. Het enige verschil is dat er een invoerveld is voor de paginanaam. Verander het van "Laatste Nieuws" naar "Menu2". IN bewerkingsmodus voor markeringen voer de volgende code in:

"""Menuoptie voor de sectie "Materialen""""


[]

Maak een voorbeeld (links die ons al bekend zijn, zouden moeten verschijnen) en sla de pagina op. In wezen is deze pagina de hoofdwikipagina (root) van uw groep. Het is waar dat dit verschil met andere wikipagina's geen speciale praktische betekenis heeft.

Ga naar de hoofdpagina van je groep, laad deze opnieuw en kijk wat er gebeurt. We raden u aan uw groep te bekijken vanuit een mobiele browser en vanuit de VK-applicatie. Je zult merken dat de rangschikking van de elementen en de bedieningslogica overal iets anders zijn. Je moet goed begrijpen wat bij wat hoort en waar het getoond wordt.

We hebben geleerd dat het menu op twee plaatsen kan worden geplaatst. Het verdient de voorkeur om het zowel als een vastgezette post als in de sectie “Materialen” te maken. Onthoud twee dingen:

  • Het vastgezette bericht zal door 98% van uw bezoekers worden gezien, en slechts 25-40% van de meest nieuwsgierigen zal naar de materialensectie gaan, evenals loyale oude gebruikers van uw groep die weten dat daar iets nuttigs is.
  • Een vastgezet item met een afbeelding om het menu te openen kan worden aangevuld met tekst. Op deze manier raak je deze vastgezette berichtfunctie niet kwijt. Maar je moet het ook niet overdrijven: hoe meer tekst, hoe lager de link om je menu te openen.

Wiki-opmaak is niet het krachtigste hulpmiddel en niet het handigste. De functionaliteit ervan is zeer beperkt. Bovendien werd het ontwikkeld aan het begin van de ontwikkeling van VKontakte en exclusief voor de browserversie op desktopcomputers en laptops. Daarom kan het werk ervan in de applicatie en op mobiele apparaten het beste worden omschreven met de uitdrukking ‘zoals God het wil’. Helaas is er nog niets beters in VK.

Trouwens. U kunt van de ene wikipagina naar de andere linken. Het werkt ongeveer zo: de gebruiker opent (bijvoorbeeld door een linkafbeelding in een bericht te gebruiken) de eerste wikipagina. En het bevat links naar andere wikipagina's. Als u op deze links klikt, wordt de bijbehorende wikipagina geopend. Op deze manier kunt u vrij complexe menu's met meerdere niveaus en bijvoorbeeld instructies maken. Wij raden u echter niet aan om u hier onnodig mee te laten meeslepen.

Stap 4. Hoe je een menu maakt in een VKontakte-groep. Grafisch

De basisprincipes zijn dus onder de knie. Laten we verder gaan met het ontwerpen van een grafisch menu. Laten we meteen zeggen dat we een vrij eenvoudig menu gaan maken: een verticale rij knoppen met links. Maar zeg niet te snel “nee, ik wilde een supercomplex menu” en sluit deze handleiding. Nu zullen we uitleggen waarom.

Ten eerste is de overgang van eenvoudig naar complex meestal de meest effectieve manier om nieuwe kennis onder de knie te krijgen. Door te leren hoe je een relatief eenvoudig menu kunt maken, leer je 90% van de technieken voor het maken van menu's voor VK-groepen.

En ten tweede, zoals we al hebben gezegd, werd VK-wiki-opmaak geïntroduceerd in een tijd dat nog maar weinig mensen zelfs maar van mobiele applicaties hadden gehoord. Ons voorwaardelijk “eenvoudige” menu zal overal zo correct en efficiënt mogelijk werken: in de browserversie van VK, in mobiele browsers en ten slotte in de applicatie. Veel "complexe" menu's kunnen hier niet over opscheppen. Bovendien zal in de meeste gevallen een "eenvoudig" menu beter werken dan een "complex", dat "uit elkaar valt" wanneer het wordt bekeken in de officiële VKontakte-applicatie. Meestal is het beter om u op deze menuoptie te concentreren. Ja, er zijn een aantal behoorlijk sierlijke menu-implementaties. Je kunt er ook mee experimenteren. Maar onze ervaring leert dat ze vrijwel geen echt voordeel zullen toevoegen: conversies, aankopen en reputatie. Maar het kan best zijn dat er problemen zijn.

Ons testmenu ziet er als volgt uit:

Slechts twee knoppen. De eerste leidt naar de hoofdpagina van Yandex en de tweede leidt naar de VK-groep "VKontakte Team".

Het verticale grafische menu in VK is een afbeelding die in stroken is gesneden. Deze strepen worden met markeringen onder elkaar op de wikipagina geplaatst. Aan sommige van deze "rijstroken" zijn links toegewezen. Wanneer u op zo’n linkafbeelding klikt, volgt u feitelijk deze link. Eén pagina is één link. Aan sommige banden (bijvoorbeeld tussenliggende banden, die zich tussen punten bevinden), wordt daarentegen de afwezigheid van een link toegewezen. Dergelijke strepen worden ‘niet-klikbaar’.

Het maken van een verticaal grafisch menu voor een VK-groep komt neer op de volgende reeks acties:

  • Het eerste dat u hoeft te doen, is een menu tekenen. De breedte moet strikt zijn 600px(pixels). We raden aan om het menu niet meer dan 900 px hoog te maken. Het is het beste om het resultaat op te slaan in PNG-formaat, of in extreme gevallen - JPG. Gebruik tekengereedschappen die u vertrouwd en handig vindt (zoals Photoshop of GIMP). Het resultaat hangt hierbij voor 95% af van jouw creatieve en technische vaardigheden. Zelfs als u helemaal niet weet hoe u grafische editors moet gebruiken, wanhoop dan niet. De vaardigheden die voldoende zijn, kunnen in maximaal een paar uur worden verworven. Er is een enorme hoeveelheid referentie- en educatieve informatie op internet. Bovendien is de mogelijkheid om een ​​grafische editor op zijn minst een beetje te gebruiken heel erg handig voor openbare beheerders. Je zult je tijd niet verspillen.
  • Vervolgens wordt de afbeelding met het menu in horizontale strepen gesneden. Dat kan op elke manier die voor jou handig is: van het vertrouwde Photoshop tot diverse online diensten. Als je geen idee hebt hoe je dit moet doen, vraag het dan gewoon aan je favoriete zoekmachine. We zullen het technische deel van het snijproces niet in detail beschrijven: er zijn tientallen methoden, sommige zijn geschikt voor sommige gebruikers, maar niet voor andere. Bij het snijden moet u één eenvoudige regel volgen: de hoogte van één strook mag niet minder zijn dan 60px. Anders kunt u problemen ondervinden met de weergave van het menu in de applicatie en in mobiele browsers: zogenaamde. "witte strepen" tussen afbeeldingen.
  • De geknipte "strips" worden geüpload naar het groepsalbum of album op de groepsbeheerderspagina. Wij raden de tweede optie aan. In ieder geval zou een album met uitgesneden delen van het menu er moeten zijn in het publieke domein. Anders zullen de gebruikers voor wie geen albumafbeeldingen beschikbaar zijn, uw menu niet zien!
  • Wiki-opmaakcode wordt gecompileerd en ingevoegd op de gewenste wikipagina.
  • De groep bevat een vastgezet bericht met een afbeeldingslink naar een wikipagina met een menu. We schreven hierboven in detail over hoe zo'n bericht wordt gemaakt. Bovendien kan de code (met kleine wijzigingen) worden toegevoegd aan de hoofdwikipagina (het item rechts van het item “Informatie” verschijnt wanneer de sectie “Materialen” is ingeschakeld. Zie hierboven voor meer details).

Laten we nu eens meer gedetailleerd kijken naar het laden van delen van het menu en de wikicode. Wij hebben ons voor u voorbereid. Het heeft twee mappen: “1” en “2”. De eerste bevat delen van de meest primitieve en eenvoudige snijoptie voor ons menu - in twee delen. Download het archief, upload afbeeldingen (1.png en 2.png) van map “1” naar een nieuw album (op uw pagina of in een groep).

We hebben twee "strips": de bovenkant (met de "Yandex" -knop) en de onderkant (met de "VK Team" -knop). Beide zullen linkafbeeldingen zijn. In de wiki-opmaak wordt dit gedaan met code als deze:

"KOPPELING"- dit is de doellink. Bijvoorbeeld https://yandex.ru/. Naast het gebruikelijke extern links kunnen een indicatie zijn van een VKontakte-object: bericht, gebruikerspagina of groep. Om er bijvoorbeeld voor te zorgen dat er na het klikken op een knop een overgang plaatsvindt naar de community "VKontakte Team", kunt u zowel het adres (https://vk.com/team) als een verwijzing ernaar (club22822305) opgeven. In principe zal er geen verschil zijn. Externe links (de links die niet naar VK-bronnen leiden) wij wij raden aan om te verminderen door het gebruiken van

Om een ​​menu in een VKontakte-groep te maken, heb je een soort grafische editor nodig. De meest voorkomende is Adobe Photoshop. Met zijn hulp is het mogelijk om een ​​menu voor een VKontakte-groep te maken.

Er zijn veel sjablonen en lege plekken op internet, u kunt ze gebruiken als u ze niet zelf kunt maken.

Een menu maken in een grafische editor

Eerst moet u een menusjabloon maken en deze pas daarna toevoegen aan VKontakte. De breedte van de menuachtergrond mag niet meer dan 370 pixels zijn. Als het groter is, zal het nog steeds tot dit formaat krimpen. Je kunt nu de hoogte instellen in verhouding tot de breedte, zodat alles erin past, en tegelijkertijd niet heel lang is. Voordat u een menu maakt, moet u nadenken over de achtergrond en tekst die op de menuknoppen moet staan.

Start Photoshop, maak een nieuw document (bestand - creëren of ctrl+N). We stellen de parameters van het gemaakte bestand in. Maximale breedte 370 px, ik heb er 200 px van gemaakt, hoogte 250 px. Je kunt hem veel kleiner en compacter maken. Voeg een afbeelding toe aan het gemaakte bestand, dat als achtergrond zal dienen. Laten we nu de tekst maken. Mijn voorbeeld is het eenvoudigste, je kunt het veel mooier en compacter maken.

Ik heb zo'n menu gemaakt. Ik selecteerde het snijgereedschap en gebruikte het om drie delen in de afbeelding uit te snijden, aangegeven door de cijfers 1,2,3 - het zullen knoppen zijn. Nadat u hebt geknipt, slaat u het gemaakte menu op. Klik op Bestand - opslaan voor internet en apparaten.

In het venster dat verschijnt, verander niets, klik op Opslaan. Selecteer een opslaglocatie en klik op opslaan.

Dat is alles, het werk in Photoshop is voltooid.

Een menu aan een contact toevoegen

Nu staan ​​de gemaakte afbeeldingen, na het opslaan, in de map afbeeldingen. We uploaden ze naar contact met behulp van een standaard foto-uploader. U kunt deze bestanden uploaden naar het groepsfotoalbum. In eenvoudige bewoordingen wordt het toegevoegd als een gewone foto die u naar een contact heeft geüpload. Zorg er nu voor dat het volgende is ingeschakeld in uw groepsinstellingen. Ga naar je groep en klik op Communitybeheer (onder de hoofdfoto van de groep, aan de rechterkant). Vervolgens vinden we onderaan het materiaalitem, het zou daar moeten worden aangesloten. Nadat u verbonden heeft geselecteerd, klikt u op Opslaan. Als u niet op Opslaan klikt, worden de wijzigingen niet van kracht.

Ga daarna naar de hoofdpagina van uw groep en waar informatie over de groep zich bevindt (beschrijving, locatie), is er een regel voor het laatste nieuws. We wijzen het laatste nieuws op de inscriptie en klikken op bewerken aan de linkerkant.

In het venster dat verschijnt, moet u de code [] opgeven. U kunt het rechtstreeks vanuit het artikel kopiëren en plakken. Nu hoeft u het alleen nog maar in uw gegevens te wijzigen.

foto-40781312_285935465 – fotocode. Deze kunt u bekijken in de adresbalk. Deze code is zichtbaar als u de foto bezoekt. Het adres zelf is veel groter, maar je moet dat deel van de code kopiëren dat begint met het woord foto en eindigt met cijfers. Meestal staat er na de cijfers bijvoorbeeld een procentteken.

Nopadding – deze opdracht verwijdert spaties tussen afbeeldingen.

100px – menubreedte (als dit een aparte knop is, dan is dit de breedte van de knop).

club40781312 - een link naar de sectie waar iemand naartoe gaat door op deze knop te klikken (afbeelding). Het bevindt zich ook in de adresbalk van de browser, op het moment dat u zich in het gedeelte bevindt waar iemand naartoe moet gaan als hij op de knop klikt. Je hebt alleen het laatste deel van de code nodig, dat komt na de laatste slash / (ook wel een slash genoemd). Wanneer ik in dit geval op een knop (afbeelding) in mijn groep klik, gaat deze naar de hoofdpagina van de groep. U plaatst uw code, die in uw sectie staat.

Je kunt ook de titel wijzigen. In plaats van het laatste nieuws schreef ik bijvoorbeeld het groepsmenu. Je schrijft wat je wilt. Nadat u klaar bent met het bewerken van uw code, klikt u op Opslaan. Dit doen wij bij elke knop die je hebt aangemaakt voor het menu in contact. Als u de code onder de code plaatst, bevinden de knoppen zich op dezelfde locatie. Als u de volgende code rechts van de code plaatst, komen de menuknoppen ook precies op de plek te staan ​​waar u de code heeft ingevoerd

Mocht u geen antwoord hebben gekregen op de vraag hoe u een groepsmenu maakt

Het was niet mogelijk om een ​​antwoord te krijgen op de vraag hoe je een menu kunt maken in een VKontakte-groep volgens de instructies die je leest, schrijf ons door op te klikken Een vraag stellen. Schrijf uw probleem op en de stappen die u heeft ondernomen. Wij zullen persoonlijk antwoorden.

  • Video over het maken van een groepsmenu

Om een ​​open menu te maken, hebben we dus een afbeelding nodig die de rol van een open menu zal spelen. De afbeeldingen die we hebben toegevoegd in het artikel over het maken van een grafisch menu zullen niet werken, omdat je een afbeelding van het uitgebreide menu nodig hebt, en niet elk item afzonderlijk. Bovendien kunt u absoluut elke afbeelding gebruiken die aangeeft dat het groepsmenu wordt verborgen. Bijvoorbeeld een afbeelding met het onderschrift: 'Groepsmenu'. Of zoiets.

Nadat we de afbeelding hebben geselecteerd die we gaan gebruiken. Bovendien kan het afbeeldingsformaat vrijwel elk formaat zijn, dat kan worden geüpload naar een fotoalbum. (UPD: Dit is niet geheel nauwkeurige informatie. In de onderstaande opmerking kunt u preciezer lezen over de maten. Klik hiervoor op de link: /otkrytoe-menyu-gruppy-vkontakte/#comment-7633)

Laten we naar de VKontakte-groep gaan. En klik met de rechtermuisknop om het menu, als het al is gemaakt, op een nieuw tabblad te openen.

Hierna moet u op de menupagina op de link "Bewerken" klikken.

Maar u hoeft de code niet te wijzigen. Klik gewoon op de link ‘Terug naar pagina’. Dit is nodig om een ​​link naar de menupagina te ontvangen.

Nu we weer op de menupagina zijn. In de adresbalk zien we een link naar deze pagina, zonder diverse toevoegingen aan het adres. Met andere woorden: een schone link. Dat is wat we nodig hebben.

We laten deze pagina open en keren terug naar de VKontakte-groep. Hier moeten we een record maken waaraan we een afbeelding toevoegen die de rol van een open . Om dit te doen, selecteert u hieronder “foto bijvoegen”. En selecteer een afbeelding uit het album of upload deze vanaf uw computer.

Zodra een afbeelding aan een bericht is toegevoegd, publiceren we deze nog niet.

En we keren terug naar de menupagina en kopiëren het adres van de VKontakte-groepsmenupagina uit de adresbalk. En plak het gekopieerde menuadres in het item dat we nog niet hebben opgeslagen. Het eindresultaat zou er ongeveer zo uit moeten zien:

Nadat we de link hadden toegevoegd, verschenen de naam van de pagina en het adres hieronder. Zodra de pagina onderaan verschijnt, kunnen we de link verwijderen die we zojuist in het bericht hebben geplaatst. Klik daarna op de knop "Verzenden". Daarom hebben we ons bericht op de groepsmuur gepubliceerd.

Klik nu op de nieuwsdatum.

Sluit daarna het item en werk de VKontakte-groepspagina bij. Als alles correct is gedaan, hebt u helemaal bovenaan een menuafbeelding die de rol speelt van een open VKontakte-menu. Tegelijkertijd zijn de links in het menu inactief. En één link naar dit bericht is actief.

Wanneer de gebruiker zich nu in onze groep bevindt, ziet hij een imitatie van het menu. En nadat u op het open menu van de VKontakte-groep hebt geklikt, verschijnt het in het menu zelf, dat naar behoren zal functioneren.

Helaas ken ik geen andere manieren om het contactmenu open te maken. Maar toch is deze optie veel beter dan alleen een link om het volledige menu te openen.

Ik hoop dat dit artikel je zal helpen erachter te komen hoe je een open VKontakte-menu kunt maken. En dat is alles voor mij.

Je kunt zien hoe het open groepsmenu eruit ziet in mijn groep.

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 hetzelfde formaat 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 je dat doet? 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 te bestellen) de ruimte tussen de woorden wordt vervangen door een onderstrepingsteken Hoe_te bestellen. 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 sluitende haakjes. Voor de eerste afbeelding (menukop uit stap 1) kun je een link geven naar de hoofdpagina van de groep, of je kunt de nolink eigenschap 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.

De laatste.
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.