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

Hallo lieve vrienden, als je het misschien gemerkt hebt, schrijf ik de laatste tijd veel over het sociale netwerk VKontakte en zijn wijsheid! Wees niet verrast, ik ga mijn hoofdrichting nog niet veranderen - een blog zijn voor mezelf, en voor mensen natuurlijk! 🙂

Ik schreef eenvoudigweg een reeks artikelen en ik begon veel brieven met verschillende vragen te ontvangen. Nu moet ik het onderwerp van het maken van menu's in VKontakte-groepen en openbare pagina's een beetje ontwikkelen om mijn kostbare tijd te besparen en niet herhaaldelijk antwoorden op dezelfde vragen van mijn lezers af te drukken.

Dus vandaag wil ik je vertellen - hoe u uw VKontakte-account vakkundiger kunt beheren, en natuurlijk,hoe je elk menu in een VKontakte-groep en openbaar kunt maken. Nog niet zo lang geleden, dankzij één goed persoon - Marina Lazareva en haar artikel “ VKopt - wat is het en waarom hebben VKontakte-beheerders het nodig? , Ik leerde over een klein gratis script (VkOpt is een afkorting voor de volledige naam Vkontakte Optimizer), dat is gemaakt om het gebruik van het sociale netwerk Vkontakte gemakkelijker te maken.

De installatie is eenvoudig en duurt slechts een minuut. Er worden een hele reeks mogelijkheden en nieuwe functies geopend die voorheen niet beschikbaar waren op VKontakte. Ik ga naar de officiële website Vkontakte Optimize, selecteer mijn browser en installeer de extensie van dit script.

Ik vergeet niet de browser te sluiten en te openen om het VKontakte-script te starten. Ik log in op mijn VKontakte-account, waar een bord verschijnt dat me bedankt voor het installeren van het script en me vraagt ​​een interfacetaal te kiezen.

Het is interessant dat dit script oorspronkelijk in 2007 werd gemaakt voor het downloaden van video's op het toen steeds populairder wordende sociale netwerk Vkontakte.

Op dit moment kan het VkOpt-script veel dingen doen, en is het vooral gericht op het verbeteren van interfacefuncties voor gewone gebruikers, zoals het downloaden van muziek en video's, het sorteren van vrienden, de mogelijkheid om bepaalde informatie op Vkontakte-pagina's toe te voegen en te wijzigen, inclusief verborgen pagina's. Hier kunt u alle functies van het script lezen.

Maar ik was meer geïnteresseerd in enkele van de mogelijkheden die dit script biedt om aan VKontakte te werken, ik zal proberen ze in afbeeldingen met commentaar op te sommen.

Het is geweldig dat ik nu niet elke keer met de muis op het scherm hoef te klikken om foto's te bekijken; ik hoef alleen maar met het muiswiel te scrollen om naar de volgende foto te gaan. Het is erg snel en handig, vooral als je door duizenden foto's bladert en daartussen zoekt naar de foto's die je op dat moment nodig hebt.

Verder verschenen er dankzij Vkontakte Optimizer op hetzelfde tabblad hieronder links; door erop te klikken, krijg ik toegang tot alle formaten van een bepaalde afbeelding of foto gemaakt door Vkontakte, van een klein pictogram tot de maximaal geüploade afbeelding. In het dagelijks leven presenteert VKontakte foto's met een breedte van 604 pixels. Alle exemplaren worden op volledige grootte geopend, waar ze eenvoudig kunnen worden gedownload.

Er verschenen meteen verschillende knoppen, waaronder het zoeken naar exemplaren van Google. Door erop te klikken kun je hoogstwaarschijnlijk de echte auteur van deze foto of foto vinden, bijvoorbeeld door op mijn foto te klikken - Google vond een kopie van deze foto, alleen in mijn artikel over het noorden van Thailand op onze reisblog. Op dezelfde manier kunt u informatie krijgen over ongeoorloofd gebruik van uw foto door andere mensen. En het is ook grappig: Google probeert afbeeldingen te vinden die qua kleur vergelijkbaar zijn met de gepresenteerde foto.

Vervolgens ga ik naar het tabblad mijn groepen, hier zijn ook innovaties verschenen, in de rechterbovenhoek zag ik een nieuwe knop, blijkbaar voor die mensen die alles beu zijn, of hongerig zijn naar grote veranderingen. Er is een knop genaamd Alles verlaten, d.w.z. Met één klik kun je alle groepen tegelijk verlaten.

Hier klik ik om updates en het laatste nieuws te zien, er is een nieuwsfilterknop verschenen, je kunt nieuws verwijderen dat video's, foto's, graffiti, polls, links, etc. bevat. Dit kan erg handig zijn bij het zoeken naar iets in het nieuws, om niet afgeleid te worden door onnodige dingen.

Hierboven stonden gewone functies die ik persoonlijk gewoon leuk vond, en nu dichter bij het punt! Ik vind een voorbeeld VKontakte-groepen met prachtig ontwerp. Laten we zeggen dat ik naar de broncode voor het ontwerp van deze groep moet kijken en iets soortgelijks voor mezelf moet doen. Als je op het menu van deze groep klikt, krijg je een schattige foto - dit is een van de opties. Maar aan de rechterkant van de groep verscheen, dankzij het Vkontakte Optimizer-script, een knop -> Lijst met Wiki-pagina's.

Ik klik op de lijst met Wiki-pagina's en krijg de broncode van de wiki-opmaak die werd gebruikt om het menu voor deze VKontakte-groep te maken.

Zoals je begrijpt, heb ik de code al om een ​​soortgelijk menu voor een VKontakte-groep te maken, en hoef ik niet eens de wiki-markeringen te bestuderen, hoewel dit nog nooit iemand heeft gestoord!

En nu heb ik bijvoorbeeld niet genoeg bronafbeeldingen voor dit menu. In dezelfde groep vind ik een album met foto's, waar de menubronnen zich bevinden.

Elk van de afbeeldingen kan worden gedownload in de originele grootte die in het menu wordt weergegeven. Als ik alle menubronnen heb, kan ik alleen maar mentaal mijn diepe dankbaarheid uiten aan de mensen die het menu in deze groep hebben gemaakt, en in Photoshop aan mijn bronnen met dezelfde afmetingen gaan werken.

Zoals je begrijpt is er hier geen sprake van plagiaat, omdat ik de broncode van wiki-opmaak van een bepaalde auteur neem, het idee met de grootte en rangschikking van afbeeldingen in het menu dat hij heeft gemaakt in een groeps- of openbare pagina op VKontakte. Ik leer alleen van deze auteur van zijn specifieke voorbeeld. Daarna maak ik mijn foto's in Photoshop en mijn menu.

Het blijkt dat om een ​​​​menu in een VKontakte-groep of publiek van enige complexiteit te maken, het voldoende is om theoretisch te weten, een voorbeeld te vinden van een complex menu in een VKontakte-publiek of -groep, en natuurlijk moet je kennis hebben van de basiscreatie en lay-out van afbeeldingen in Photoshop. Alle Photoshop-tutorials kunnen u hierbij helpen - stel Yandex deze vraag, u zult duizenden antwoorden vinden.

Ik wilde ook op één vraag ingaan: er is mij al verschillende keren gevraagd of het mogelijk is om van een openbare VKontakte-groep een VKontakte-groep te maken? Ik antwoord - nu kun je, dankzij het Vkontakte Optimizer-script, een nieuwe knop verschijnen op de openbare pagina - overbrengen naar een groep. Ik heb deze kans niet geprobeerd; ik had hem niet nodig. Nou, zoals ik het begrijp, zul je alle abonnees voor de groep opnieuw moeten uitnodigen, en als er duizenden zijn, is dit niet erg handig!

Hoogwaardig ontwerp van de VKontakte-communitypagina is al de helft van het succes bij het bereiken van het doel waarvoor de groep is gemaakt. Statistieken tonen aan dat de aanwezigheid van navigatie het paginaverkeer aanzienlijk verhoogt en ook het aantal abonnees verhoogt. De communitypagina, waar alle informatie is gestructureerd, wekt de indruk van de serieuze benadering van het bedrijfsleven van de beheerders, evenals hun praktische vaardigheden in het leiden van een groep en betrouwbaarheid. In dit artikel zullen we het hebben over het menu voor de VKontakte-groep, hoe je het kunt maken en hoe je het het gemakkelijkst kunt navigeren.

Soorten menu's voor de VKontakte-gemeenschap

Nu zijn er twee soorten VKontakte-groepsmenu's. Hun sjablonen zijn natuurlijk beschikbaar op internet en je kunt alles strikt volgens hen doen. Het resultaat zal echter niet creatief en origineel zijn, wat betekent dat het geen groot aantal abonnees zal aantrekken.

Er is dus een gesloten menu en een open menu.

Gesloten krijgt zijn naam omdat de abonnee het zelf moet openen. Om dit te doen, hoeft u alleen maar op de link te klikken. Elk woord kan als link worden gebruikt, meestal 'open' of 'menu'. Hoewel sommige mensen creatief worden en met originele links komen.

Open is een bericht dat is vastgezet. Het bevat een geldige link naar het menu. Dit type is nog vrij jong; het verscheen nog niet zo lang geleden, of liever gezegd met de komst van de functie om een ​​bericht aan de muur van een pagina vast te zetten. Een open menu is veruit het meest effectief en aantrekkelijker dan een gesloten menu. De eerste optie is minder productief, omdat groepsbezoekers de link ernaar eenvoudigweg niet opmerken.

Dus VKontakte? Het antwoord is vrij eenvoudig. Om beide soorten menu's voor de VKontakte-groep te maken, wordt wiki-opmaak gebruikt. Dit is een zeer handig hulpmiddel; u kunt er tabellen en grafieken mee maken, afbeeldingen opmaken en bewerken, met koppelingen werken, enz. Nu is alles echter veel eenvoudiger voor de makers van de VKontakte-gemeenschap dan enkele jaren geleden. Het sociale netwerk zet alle inhoud automatisch om in wiki-opmaak.

Het open menu voor de VKontakte-groep is nu populairder, maar het gesloten menu wordt praktisch niet meer gebruikt. Daarom zou het redelijk zijn om het creëren van een open type nader te bekijken. Vervolgens leert u hoe u een menu maakt in de VKontakte-groep (stapsgewijze instructies worden hieronder weergegeven).

Fase één

In dit stadium moet u afbeeldingen selecteren. Ze zorgen voor een presentabel uiterlijk van de pagina. Afbeeldingen zijn te vinden op internet of zelf gemaakt met foto-editors. De tweede optie is alleen geschikt voor degenen die goed zijn in tekenen op een computer en bedreven zijn in Photoshop.

De eerste foto is een avatar. De tweede (centrale) is de beeldactie. De avatarparameters moeten minimaal 200 x 330 pixels zijn. De centrale afbeelding is minimaal 390 x 280 pixels.

Fase twee

Open de groepspagina en zoek "Communitybeheer". De link bevindt zich onder de voorfoto van de pagina aan de rechterkant. Nadat u de link heeft gevolgd, zoekt u het gedeelte 'Materialen' in de informatie en klikt u vervolgens op 'Beperkt' in deze paragraaf.

Op de hoofdpagina klikt u op Bewerken in de regel “Materialen”. Geef in het editorformulier dat verschijnt de naam en secties op en klik vervolgens op de onderstaande knop om op te slaan. Keer daarna terug naar de pagina via de knop in de rechterbovenhoek.

Fase drie

Kopieer het paginaadres. De eerste rij cijfers na het woord “pagina” is het gemeenschapsnummer, de tweede is het groepspaginanummer. U moet dit weten als u nadenkt over het maken van een menu in de VKontakte-groep. Het adres moet samen met de centrale afbeelding op de muur worden geplaatst. Om een ​​foto bij te voegen, klikt u op “bijvoegen” en “foto”. Selecteer en plak vervolgens. Klik vervolgens op verzenden - hierdoor wordt het bericht gepubliceerd.

Fase vier

Plaats de eerste foto in plaats van de hoofdfoto van de community. Er verschijnt een verslag van deze actie samen met een foto aan de muur. Het heeft daar geen nut, dus het moet worden verwijderd.

Dit is alles. Wanneer gebruikers op de centrale afbeelding klikken, wordt het groepsmenu voor hen geopend.

Hoe maak ik een tabel in het menu?

Elke beheerder denkt na over het maken van een menu in de VKontakte-groep. De bovenstaande instructies kunnen u alleen helpen bij het maken van een basismenu. Verder moet het verbeterd worden.

De tabel is erg handig om door het menu voor de VKontakte-groep te navigeren. Het maken van een tabel vereist kennis van bepaalde symbolen.

• (| betekent begin;
• |+ centrale ligging;
• |- vanaf nieuwe regel;
• | transparantie;
• ! donkere celvulling;
• |) geeft het einde aan.

Hoe koppelingen maken?

Bij de vraag hoe je een menu kunt maken in de VKontakte-groep, is er een belangrijk punt met betrekking tot links. Ze kunnen op verschillende manieren worden ontworpen:

• Laat gewoon een link achter. Om dit te doen, plaatst u de link tussen vierkante haakjes.
• Maak een link met een woord of zin. Open, plak de link, zet na de link het teken | en sluit de vierkante beugel.
• Afbeeldingslink. U kunt dit doen met behulp van dit voorbeeld: [].

Meestal leert iedereen zelf hoe hij een menu kan maken in de VKontakte-groep. Kennis komt met ervaring door middel van vallen en opstaan. Beginners kunnen echter nog steeds een paar aanbevelingen krijgen.

• De afbeeldingsgrootte mag niet minder zijn dan 130 pixels. Dit zal het uiterlijk van het menu aanzienlijk verslechteren.
• De breedte van de afbeelding is niet meer dan 610 pixels.
• Een wikipagina kan niet meer dan 17 niet-gesloten tags bevatten.
• Wanneer u de breedte-indicator instelt, verandert de hoogte automatisch volgens de verhoudingen.
• U kunt een lijst in een tabel maken met />.
• Er kunnen maximaal 8 lijsteenheden op één regel worden geplaatst.

Er zijn onder andere speciale programma's voor eenvoudiger gebruik van wiki-markeringen. Dit zijn zowel educatieve applicaties als echte assistenten die alles voor je doen.

Met de toepassing Interactieve FAQ (bèta) kunt u bijvoorbeeld uw vaardigheden op het gebied van wiki-programmering testen.

De bediening is eenvoudig: de gebruiker krijgt een kant-en-klaar menu te zien en moet de opmaakcode invoeren. Aan het einde wordt het resultaat vergeleken met het origineel.

Het Wiki Editor-programma leert of traint zijn gebruikers niets. Met zijn hulp kun je een menu maken, zelfs zonder basisprogrammeervaardigheden. De eenvoudig te gebruiken editor schrijft de codes zelf; het enige wat de gebruiker hoeft te doen is deze te controleren.

Iedereen die van plan is de groep te gebruiken om zijn bedrijf te promoten of gewoon voor de lol, kan dus een VKontakte-menu maken. Het menu maakt bedrijfspromotie veel effectiever en trekt gebruikers naar de groepspagina. Een menu zorgt ervoor dat een community er presentabeler en professioneler uitziet dan haar concurrenten die er geen hebben.

Dit artikel zal een gedetailleerde handleiding zijn en ik zal je vertellen hoe je een menu maakt voor een VKontakte-groep. Een prachtig vormgegeven menukaart van de VK-groep draagt ​​bij tot een echte bezoekersaantallen en omzetgroei op de site.

Hallo mijn lieve lezers. Laat me het je vandaag vertellen hoe je een mooi menu maakt voor een VKontakte-groep en volledig gratis. Trouwens, nadat je hebt geleerd dergelijke onderwerpen te maken, kun je hier wat geld mee verdienen -))). Geen enkele commerciële website werkt zonder een eigen community op sociale netwerken te creëren, vooral VK, die gegarandeerd nieuwe klanten zal helpen werven en uw bedrijf zal promoten.

Maar als uw gemeenschap niet aantrekkelijk is en net als iedereen, wie wil daar dan blijven? Ik denk niemand!!! Laten we dus onze groepen inrichten met een hoogwaardig ontwerp en heel snel leren hoe we dat moeten doen. Voordat u begint met het maken van afbeeldingen en ons toekomstige menu, moet u het Photoshop-programma op uw computer installeren om verder afbeeldingen te kunnen knippen. Velen zullen vragen waarom je überhaupt foto's moet knippen. Het punt hier is dat we voor elke menulink een aparte strip van de algemene banner moeten maken.

Tegenwoordig zijn er verschillende soorten gemaakte menu's:

• Openen met actieve items;
• Gesloten als vastgezette post;
• Met individuele afbeeldingen of een gemeenschappelijke aangrenzende afbeelding van de banner en het menu.

De essentie van het creëren van beide opties is hetzelfde. Het enige grote verschil zit in de aanvullende elementen en recordtypen, en dit wordt in dit artikel gedetailleerder besproken.

Het zal ons helpen om met het menu te werken wiki-opmaak, dat tegenwoordig in de VKontakte-teksteditor is ingebouwd. Het verschilt van de gebruikelijke doordat het standaardopdrachten gebruikt om een ​​bepaalde afbeelding weer te geven en koppelingen naar de benodigde elementen in te voegen. Met de wiki-opmaak zelf kunt u code invoegen om afbeeldingen, video's en andere elementen weer te geven.

VK-groep gesloten menu

In dit geval zien we links van de hoofdgroepavatar een hyperlink in de vorm van het opschrift "groepsmenu". Wanneer erop wordt geklikt, wordt ons menu met actieve items en afbeeldingen geopend.

Het menu ziet er als volgt uit:

Groepsmenu openen (vastgezet materiaal)

Het idee is om reeds geopende menu-items te maken die worden weergegeven in de beschrijving van de groep zelf, waar deze doorgaans voor alle voorwaarden wordt weergegeven. Onze foto wordt bij de beschrijving gevoegd, die we van tevoren voorbereiden en koppelen aan de pagina waarop we actieve items zullen hebben. Dit menu is de laatste tijd erg populair geworden en er is veel vraag naar bij klanten. Ze zien er zo uit:

Hoe je een mooi menu maakt voor een VKontakte-groep: stapsgewijze instructies

We zullen dus allereerst de hoofdavatar van de groep moeten maken, die we aan de rechterkant zullen plaatsen, en de stomp voor ons menu in de vorm van een banner.

• Voor een avatar 200x332 pixels;
• Voor de hoofdmenubanner: 395 x 282 pixels.

Zoals je misschien hebt gemerkt, is de hoogte van de afbeeldingen anders en dit wordt gedaan zodat de afbeeldingen niet in hoogte naar beneden bewegen en zich op hetzelfde niveau bevinden, aangezien de hoogte van de communitynaam en -status ongeveer 50 px in beslag neemt en dat zullen we doen moet deze waarde uit de hoogte van het menu worden verwijderd.

Om het duidelijk te maken: als de hoogte van de hoofdavatar van een groep 332 is, trekken we er 50 van af en krijgen we de hoogte van het hoofdmenu gelijk aan 282. Als de afmetingen er niet toe doen, kan de hoogte willekeurig worden ingesteld .

De volgende stap na het creëren van een community is het opzetten van materialen, en hier moeten we deelnemers verbieden extra pagina's en blokken te maken, maar alleen op de muur te schrijven. Om dit te doen, moet je naar de sectie onder de groepsavatar gaan genaamd “communitybeheer”, waar we ons materiaal “beperkt” moeten maken, zoals hieronder weergegeven.

Laten we nu beginnen met het maken van de algehele compositie. Je kunt natuurlijk gewoon een foto invoegen in plaats van een avatar en in de beschrijving, maar laten we geen amateurs zijn en laten zien hoe je het professioneel moet doen, zodat het één volwaardige foto is die in elkaar overgaat.

Laten we in Photoshop een nieuw canvas maken met afmetingen van 600x350 pixels, dat we als stencil zullen gebruiken door er openingen in uit te snijden voor onze afbeeldingen. Om te werken moeten we de afmetingen van alle elementen en linialen omzetten in pixels en dit gebeurt langs het volgende pad: “Edit-installation-main” en hier stellen we de pixels in.

De volgende stap bij het maken van een open menu is het maken van uitsparingen voor de banner en avatar, die we vervolgens zullen ontvangen om te downloaden. Om dit te doen, gaat u naar het gedeelte van het linker verticale menu en selecteert u knippen.

Met de linkermuisknop, alsof u een gebied selecteert, moet u blokken selecteren van de grootte die we nodig hebben en na elke selectie op de knop "Verwijderen" drukken en selecteren 50% grijs. Dergelijke acties zullen ertoe leiden dat de blokken de vereiste grootte hebben en worden gemarkeerd in een andere kleur dan de hoofdachtergrond.

Het zou er zo uit moeten zien:

Nu selecteren we gewoon de gum en gebruiken we de "magische gum" -functie om op elk grijs blok te klikken en een stencil met uitsnijdingen te krijgen. De volgende stap is het selecteren van onze hoofdafbeelding en deze onder de achtergrond plaatsen en kant-en-klare afbeeldingen krijgen waarop u tekst kunt schrijven met de naam van het menu of andere reclame-elementen.

Geweldig. Nadat je een foto van ons ontwerp hebt geplaatst, hoeven we alleen maar “opslaan voor web” te selecteren en als resultaat krijgen we 2 van onze foto’s. Nu gaan we terug naar onze groep en kunnen we de hoofdavatar (verticaal) invullen. We zullen de banner voor het menu iets later gebruiken als we met de wiki-opmaakcode werken.

Laten we het menu zelf maken, met actieve items die de gebruiker doorverwijzen naar de benodigde secties van een site van derden of naar albums en catalogi in de groep zelf. We zullen een nieuwe afbeelding gebruiken voor variatie -))).

Laten we dus teruggaan naar Photoshop en een nieuw canvas maken met afmetingen van 400x300 pixels. Selecteer vervolgens in de sectie: file-place en selecteer een afbeelding voor de menuachtergrond.

We plaatsen de knoppen van ons toekomstige menu op de afbeelding en knippen de afbeelding zoals we hierboven deden door de benodigde blokken te selecteren. Daarna selecteren we ook “opslaan voor web” en krijgen we een map met onze bezuinigingen. In mijn geval kreeg ik 4 foto's in een aparte map.

Nu moeten we de vanuit Photoshop gedownloade foto's naar een apart album uploaden en ze voor nieuwsgierige blikken verbergen. Na het laden krijgt elke foto een nieuwe naam en unieke ID.

Houd er rekening mee dat u moet beschikken over:

• Materialen worden geopend in de “beperkte” modus;
• Discussies inbegrepen;
• De map met foto's is voor iedereen toegankelijk.

Nu hoeft u alleen nog maar onze pagina te configureren waar het menu wordt weergegeven. Om dit te doen, gaat u naar de hoofdpagina van de community en selecteert u nieuw materiaal, bewerkt u en roept u “ONS MENU” op.

Vervolgens moeten we de afbeeldingen invoegen die we hebben ontvangen bij het knippen in Photoshop. Sommige mensen gebruiken opmaakcodes, maar om er niet te veel over na te denken, stel ik voor dat u eenvoudigweg selecteert om een ​​afbeelding in te voegen door op het camerapictogram te klikken en de ene na de andere te uploaden.

Als we in een teksteditor werken en we na het laden van de afbeeldingen op het pictogram in de vorm van haakjes in de rechterbovenhoek klikken, zouden we deze code moeten zien:

Advies: Een belangrijk punt na het laden van afbeeldingen is het verwijderen van de opvulling. Dit kan worden opgelost door “nopadding” vóór de afbeeldingsformaten in te voegen.

Ter verduidelijking staat hieronder geschreven wat waar vandaan komt, maar aangezien alles automatisch wordt ingevoegd en het niet nodig is om slim te zijn, en te openen zoals sommigen elke foto schrijven en de id nemen, dan downloaden en bewaren we gewoon.

[]
waarbij xxxxx de id van uw afbeelding is
jjjjj - breedte in pixels (maximaal 388)

Het zou er uiteindelijk zo uit moeten zien:

Nu zijn onze foto's verzameld in een aparte banner. En om een ​​link aan elk item toe te voegen, klikt u eenvoudigweg op de afbeelding met de opmaak uitgeschakeld en plakt u de gekopieerde URL in het linkgedeelte.

En nu komen we bij het belangrijkste en laatste punt bij het maken van ons VKontakte-menu. Nu moeten we onze pagina met afbeeldingen opslaan en het adres kopiëren. In mijn geval ziet het er zo uit:

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

Vergeet niet dat we aan het begin van het artikel een stub-menu hebben gemaakt, dat een voortzetting zal zijn van onze hoofdavatar, en dat we er een stencil voor hebben gemaakt. Dit is precies wat we nu nodig hebben.

Ga naar de hoofdpagina en doe het volgende:

Stap 1.

We plakken het adres van de pagina in het tekstveld voor een nieuw bericht aan de muur, waarna het wordt omgezet in een link.

Stap 2.

We voegen een afbeelding van onze menu-placeholder toe aan het bericht en klikken op verzenden.

Stap 3.

Klik nu, na het publiceren van het bericht, op de aanmaaktijd linksonder in het bericht en selecteer “PIN”.

Geweldig!!! Laten we hier eindigen. Nu weet je hoe je coole menu's maakt en kun je er goed geld mee verdienen. Ik raad je aan om alles in de volgende volgorde te doen:

• Wij bedenken een structuur en geven opdracht tot het ontwerp van menuafbeeldingen;
• We passen het formaat aan en knippen alle afbeeldingen;
• Afbeeldingen in albums plaatsen;
• We bewerken alle fragmenten in de editor en publiceren ze op de hoofdpagina's van de groep.

Als resultaat van ons werk krijgen we dit menu.

Maar het menu zelf zal, wanneer erop wordt geklikt, verschijnen met actieve links. Het is de moeite waard om met de formaten te spelen en ze aan te passen aan je scherm, maar vergeet de weergave op mobiele apparaten niet.

BELANGRIJK: Na het wijzigen van het VK-ontwerp in 2016 zijn er nieuwe wijzigingen aangebracht bij het maken van afbeeldingen en vereisten voor afbeeldingen waarover.

Download VK groepsmenusjabloon + alle lesbronnen

Ik hoop dat het materiaal nuttig was, en je begrijpt nu gemakkelijk hoe je een mooi menu kunt maken voor een VKontakte-groep. Abonneer je op blogupdates en tot snel in nieuwe berichten. Als je vragen hebt, schrijf ze dan in de reacties en ik zal je zeker helpen.

Ik voeg een video toe om te versterken wat je leest -))).

Zoals u weet is VKontakte niet alleen een sociaal netwerk waarin we actuele onderwerpen bespreken. VKontakte is een enorm bedrijfsplatform waar u uw merk kunt promoten, geld kunt verdienen met advertenties en verschillende goederen en diensten kunt promoten. Een uitstekende mogelijkheid om zaken te doen worden geboden door VK-gemeenschappen die zich bezighouden met verschillende onderwerpen en een basis hebben van honderdduizenden abonnees. Tegelijkertijd kan een helder, kwalitatief hoogstaand menu van een dergelijke groep het werk ermee verbeteren en tegelijkertijd vereenvoudigen, waardoor deze groep nog handiger en aantrekkelijker wordt in de ogen van gebruikers. In dit artikel zal ik je vertellen hoe je een menu maakt in een VK-groep, welke tools ons hierbij zullen helpen en hoe je ermee kunt werken.

Om een ​​menu te maken in een groep van het sociale netwerk VK, zal ik allereerst opmerken dat de methoden en hulpmiddelen die werden gebruikt voordat VKontakte vandaag overschakelde naar een nieuw ontwerp, voor het grootste deel niet meer werken. Ik raad aan om die technieken te gebruiken (en ook die video's te bekijken) die de nieuwe “VK”-interface ondersteunen, en om gespecialiseerde programma's te gebruiken die de functies van de nieuwe interface ondersteunen.

Laten we nu verder gaan met een directe beschrijving van methoden voor het maken van een groepsmenu in VK.

Methode 1. Photoshop + VKontakte-functionaliteit (DIY-menu)

Om een ​​menu in een VK-groep te maken, heb je de redelijk populaire grafische editor "Photoshop" nodig (als je deze niet hebt, moet je deze vinden, downloaden en installeren). Dan raad ik aan om het volgende te doen:

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

Als u uw pagina-ID niet weet, gaat u naar uw communitypagina en selecteert u 'Communityposts'. In de adresbalk ziet u vóór het vraagteken een reeks cijfers. Deze vormen de identificatie (ID) van uw community.

1. Bij het bewerken van inhoud is het beter om over te schakelen naar “wikicode” (een handige pagina-opmaaktaal), die wordt geactiveerd door op het overeenkomstige pictogram rechtsboven te klikken;
2. Klik op het pictogram "Camera" en voeg onze foto's toe. Na elke foto voegen we de nodige “option; nopadding”-tag in (moet worden geplaatst voordat de grootte van onze foto's wordt aangegeven), deze zal als een spatie fungeren;
3. Onder elk menu-item voegen we links in naar de bijbehorende inhoud (bijvoorbeeld foto's);
4. Sla de resultaten op en zet uw bericht bovenaan vast. Hiermee kunt u een menu maken in de VKontakte-groep.

Hoe het er visueel uitziet, kun je hier zien:

Methode 2. “Menumake”-service - helpt u snel een menu te maken

Met deze service kun je tegen een redelijk kleine vergoeding een menu voor de VK-gemeenschap maken. Hiermee kunt u het proces automatiseren en letterlijk in slechts een paar minuten een geweldig menu voor uw groep samenstellen, zonder dat u hoeft te betalen voor de diensten van professionele ontwerpers.

Het programma heeft een reeks kant-en-klare sjablonen voor VK, de afmetingen van items, hun uiterlijk, lettertype, kleur, enzovoort - alles kan worden aangepast met de tools die beschikbaar zijn in de Menumake-service.

Om een ​​sjabloon naar een groep te posten, moet u op de knop "Menu uploaden naar groep" klikken, een kleine vergoeding overmaken naar de dienst voor de opgegeven actie, en het door u gekozen menu wordt in uw groep geplaatst.

Conclusie

Wanneer u de taak overweegt om een ​​menu in een VK-groep te maken, moet u eerst beslissen over de keuze van een grafische sjabloon (de afbeelding moet de juiste grootte en hoge kwaliteit hebben) en vervolgens de afbeelding in componenten knippen plaats met behulp van Photoshop de grafische componenten in uw groep met behulp van wiki-opmaak. Tegelijkertijd, als wat wordt beschreven u te ingewikkeld lijkt, zal het gemakkelijker zijn om de tools van de overeenkomstige programma's te gebruiken (bijvoorbeeld "Makemenu"), waarmee u een menu van hoge kwaliteit kunt maken en aanpassen voor uw VK-gemeenschap tegen een relatief kleine vergoeding.