Comment créer un menu ouvert pour un groupe VKontakte. Instructions détaillées sur la façon de créer un menu dans un groupe "en contact"

Aujourd'hui, je vais continuer mon « Immersion dans les groupes VK ». Dans la troisième partie de la « série », j'ai raconté et montré. Aujourd'hui, parlons de la conception du menu du groupe VKontakte !

Dans le premier article sur la création d'un menu, il y avait beaucoup de questions dans les commentaires, donc avant de commencer un nouveau sujet, je répondrai aux questions fréquemment posées.

Question 1: Le premier et le plus courant : « Où est le code dans le menu ? ou « s'il n'y a pas de signet lors de l'édition du « Code Source », comment ajouter une page interne ? ou « Je ne comprends toujours pas quoi faire si le code n’apparaît pas ! »

Réponse 1: VK a changé l'éditeur, vous pouvez désormais basculer entre l'éditeur visuel et le code en un seul clic (coin supérieur droit de l'éditeur) :

Pour vérifier dans quel éditeur vous vous trouvez : déplacez votre souris sur ce bouton, écrivez du texte et surlignez-le en gras - si des caractères inhabituels apparaissent, alors c'est du code

Question 2: La seconde, vraiment problématique : « comment supprimer les espaces entre les images ?»

Réponse 2 : J’avoue que j’ai moi-même eu peur lorsque le menu du client a commencé à fonctionner pour la première fois. Maintenant, je l'édite rapidement, mais ce n'était pas amusant. Voir:

Ajoutez la balise nopadding ; et tout se mettra en place !

L'espace s'insinue entre les images et le menu semble cassé. Pour les ignorants, cela n’est peut-être pas normal, mais pour les ignorants, ce n’est pour le moins pas professionnel. Alors, quel est le problème ? Ah, c'est très simple ! Dans VK, il y a constamment des mises à jour, de nouveaux algorithmes sont introduits... et même l'éditeur est tordu... parfois, sans raison apparente, des balises importantes disparaissent du code et nous voyons alors cette image. Pour résoudre ce problème, vous devez examiner le code et effectuer les ajustements nécessaires. Le format du code devrait ressembler à ceci :

Modèle : [] Exemple : []

Habituellement, les images du menu sont développées car le code laisse de côté pas de rembourrage; — nous l'avons mis en place et tout est aligné. Avant d'enregistrer le résultat, cliquez sur le bouton « Aperçu » pour vous assurer que tout se passe bien.

Question 3: Nouvelles. En octobre 2012, VKontakte a coupé de force les avatars des groupes et des pages publiques. Désormais, leur taille a une norme commune de 200 x 500 pixels. Donc, si vous aviez un avatar plus grand dans votre groupe, effectuez une mise à jour (mettez à jour l'avatar).

D'ailleurs, en plus du recadrage, VK a introduit une autre innovation concernant les photos de groupe : désormais en cliquant sur l'avatar, nous pourrons, comme dans le compte, voir tous les albums de la communauté. C'est confortable! Et de là naissent de nouvelles fonctionnalités dans la communication du groupe.

Alors, nous en avons fini avec les questions... passons maintenant à la création du menu lui-même !

Étape 1. Comment créer un menu en contact et créer des pages imbriquées :

Tout d’abord, assurons-nous que vous savez créer un menu de groupe en contact et suivons quelques instructions :

Que pensez-vous de mon aide-mémoire ?

C'est l'aide-mémoire que j'ai imaginé ! Pour plus de clarté, je décrirai chaque numéro :

Faites cette opération avec toutes les sous-pages et votre menu sera prêt.

Manger! Nous avons créé le menu, créé les pages internes, les avons remplies, passons maintenant à la création d'un beau menu graphique.

Étape 2. Comment créer un magnifique menu graphique dans Contact et l'installer :

Toute la théorie sur son fonctionnement balisage wiki en contact, je ne vous le donnerai pas, nous avons d'autres objectifs maintenant. Pour créer un menu visuel dans un groupe VK, vous n'avez pas besoin de connaître tout le balisage wiki. Passons à la création d'un menu visuel !

Tout d’abord, je vais vous montrer le code et le résultat de mon menu :

J’avoue, je l’ai fait spécifiquement pour écrire cet article. Tout le monde « ne s’y est pas mis », vous savez, comme « un cordonnier sans bottes ». Mais maintenant j'ai un menu visuel dans le groupe VK !

Je ne vous dirai pas comment dessiner une image pour le menu, c'est aux designers de décider, je la dessine moi-même, mais pas de manière aussi professionnelle. , à la fin de l'article, j'ai donné une vidéo sur la façon de dessiner un menu simple dans Photoshop, regardez-la, vous pourrez peut-être le faire vous-même. Sinon, commandez l'image du menu sur .

Je vais vous montrer une option d'installation de menu moyennement complexe. La différence réside dans le nombre d'éléments. Un menu simplement découpé en bandes est la mise en œuvre la plus simple. Plus il y a de boutons cliquables dans une ligne, plus son exécution est complexe. Même si, connaissant la particularité, tout est simple ! C'est juste une question de temps. Ainsi, la largeur de l'image doit être :

370 px – si vous avez deux objets ou plus sur une ligne, comme j'ai des boutons de réseaux sociaux

Et max 388 px – si nous découpons l’image de manière simple, uniquement en lignes, sans la diviser en petits objets. C'est la fonctionnalité que vous devez connaître lorsque vous découpez un menu en boutons. La taille de mon image pour l'ensemble du menu s'est avérée être de 370 x 456 px.

Une fois l'image découpée en nombre d'objets requis et enregistrée dans un album séparé, nous téléchargeons cet album sur VK. Nous téléchargeons sur le profil du compte, pas sur le groupe ! Puisque dans les albums de groupe, il n’y a plus d’option pour masquer les albums. Un album technique dans un groupe d'entreprise (par exemple) n'est pas du tout nécessaire, nous masquons donc les éléments de menu dans l'album du compte :

Album technique VK

Une fois que vous avez configuré la confidentialité « Only Me ». Passons à l'installation du menu lui-même. Je vais vous donner un exemple de code qui serait un modèle pour vous et regardons en quoi il consiste :

[]

Où, photo7632142_296911699– c'est l'adresse de la photo ! On le regarde dans la barre d'adresse de l'image :

Dès la première image, commençons à insérer un menu dans le groupe VKontakte

Vous avez besoin d'une courte adresse de l'image, pour cela allez sur l'album lui-même :

Accédez à l'album lui-même pour obtenir l'adresse de l'image souhaitée !

...et à partir de la première image, déplacez-les vers le menu groupe.

Ajout de la taille de l'image au code du menu !

Ainsi, l'adresse de l'image a été ajoutée, la taille a été indiquée, maintenant on met le tag pas de rembourrage ;- il est nécessaire pour que nos images s'emboîtent parfaitement les unes dans les autres. Et la dernière étape consiste à mettre un lien vers la page où le visiteur se rendra après avoir cliqué sur l'image.

Une petite précision ici ! Nous écrivons des liens externes, des liens vers des albums et des discussions VK dans leur intégralité, et des liens vers des pages internes au format page-32734125_44298120. Au début et à la fin de la ligne, n’oubliez pas de mettre deux guillemets carrés et sans espaces.

Clarification 2 : lorsque nous établissons des liens vers des pages internes sans images, alors pour les discussions, les albums et Liens externes mettre des guillemets simples.

Les lignes dans lesquelles vous avez deux éléments ou plus sont insérées dans le code sans espaces. Insérez chaque ligne de l'image l'une après l'autre. Parce que si vous appuyez sur Entrée après la ligne avec l'image, l'image passera à une nouvelle ligne et le menu se déplacera. Nous avons besoin que le menu soit affiché dans son ensemble, nous n'avons donc pas besoin d'espaces supplémentaires ou d'« interteurs » !

Après avoir transféré toutes les images dans le menu et les avoir conçues (taille, lien), enregistrez le résultat et admirez votre travail ! Tous! Prêt!

Bonjour mes chéris !

Aujourd'hui, je vais vous le dire en détail, comment créer un menu pour un groupe VKontakte. Dans mon expérience menu dans le groupe en contact augmente le nombre d'appels et de demandes de 20%. Il est important d'adopter une approche responsable dans la création d'un menu de groupe. Par conséquent, j’ai préparé pour vous un modèle de menu PSD afin de faciliter votre travail.

Permettez-moi de commencer par le fait qu'il existe aujourd'hui deux options de menu :

Option 1 : menu de groupe fermé

Menu fermé, s'ouvre lorsque vous cliquez sur le lien. Dans l'exemple ci-dessous, le menu s'ouvre lorsque vous cliquez sur le lien « OUVRIR LE MENU GROUPE ! »



Option 2 : Ouvrir le menu du groupe (post épinglé)

Un menu ouvert est essentiellement une publication épinglée avec un lien actif.



La deuxième option de menu est apparue relativement récemment, lorsqu'il est devenu possible d'épingler des publications du mur vers l'en-tête d'un groupe ou d'une page publique. C'est désormais le plus efficace.

Les deux options utilisent le balisage wiki. Balisage wiki rend le traitement facile et rapide apparence groupes, création de tableaux graphiques et de spoilers, formatage du texte et travail avec des images, des liens et des ancres. Je ne m'étendrai pas sur les marquages ​​en détail, car... VKontakte a un éditeur visuel, qui traduit automatiquement votre contenu en balisage wiki. Ici je ne donnerai que les codes de base, sans lesquels il est impossible de créer un menu.

Comment créer un menu ouvert sur VKontakte

Nous analyserons le processus de création d'un menu en utilisant l'exemple de l'option 2, c'est-à-dire ouvrir le menu.

Pour vous faciliter la navigation, j'ai préparé pour vous Modèle PSD de menu: [Attention. Le design de VKontakte a changé. Nouvelle mise en page et autres informations réelles V ]

Modèle de menu de groupe PSD

Pour créer un menu externe, vous avez besoin de 2 images : un avatar (à droite) et une centrale (image d'action).

Dimensions de l'avatar : 200 x 332 px

Dimensions de l'image centrale : 395 x 282 px



Étape 1.

À l’aide du modèle PSD de menu de groupe téléchargé ci-dessus, réalisez deux images des tailles requises.

Étape 2.

Dans votre groupe, rendez-vous dans « Community Management » (à droite sous l’avatar). Recherchez l'élément « Matériaux » (dans l'onglet « Informations ») et rendez-les « restreints ».



Étape 3.

Maintenant, retourne à page d'accueil de votre groupe et cliquez sur « Modifier » dans le bloc « Matériaux » qui apparaît (je l'ai déjà renommé Menu Groupe).



Lors de l'édition de la page, définissez le titre, vous pouvez créer des sections ou toute autre information à l'aide de la barre d'outils. Cliquez sur « Enregistrer la page » et « Revenir à la page »



Étape 4.



Dans mon exemple https://vk.com/page-42211349_47355854,

Les premiers chiffres 42211349 sont votre identifiant de groupe

Les deuxièmes chiffres 47355854 sont l'identifiant de la page

L'astuce : vous pouvez créer des pages supplémentaires manuellement. Pour ce faire, suivez le lien comme :
https://vk.com/pages?oid=-хххххххх&p=pagename
Où,
xxxxxxxxxx – ceci est votre identifiant de groupe
pagename – le nom de votre page

Étape 5.



Et publiez le message.

Étape 6.

Téléchargez maintenant l'avatar du groupe (image à droite). Une image d'avatar en double apparaîtra sur le mur - supprimez-la.

Étape 7

Maintenant attention. Cliquez sur POST PUBLICATION TIME (coin inférieur gauche de l’article).



Et cliquez sur « Épingler ». Fermez cette fenêtre et actualisez la page de votre groupe (F5).



Étape 8

Nous écrivons le statut du groupe (utilisez 1 seule ligne) pour aligner les images si le dessin sur votre avatar ne commence pas tout en haut (dans mon modèle d'avatar, option 2). Et voici ce que nous avons obtenu :



RÉSULTAT.

Le menu est prêt ! Désormais, lorsque vous cliquez sur l'image centrale, votre menu s'ouvre :



Ici, vous pouvez le modifier, publier des photos, des vidéos, créer de nouvelles sections, placer des liens.

Vous pouvez également créer un menu graphique (sous-menu) à l'intérieur du menu principal. Sa largeur ne doit pas dépasser 600 px. La hauteur est illimitée. Ce qui vous permet de créer d'excellentes pages de destination VKontakte.



Mais j'en parlerai plus en détail dans les articles suivants. Abonnez-vous aux mises à jour du blog pour rester informé des nouvelles fonctionnalités. Aimez et partagez l'article avec vos amis.

Postez vos questions ou opinions dans les commentaires ci-dessous.

MISE À JOUR IMPORTANTE: cet article est très obsolète, puisqu'un service spécial est apparu MenuMake, qui permet de créer automatiquement un menu pour un groupe. L'approche manuelle n'est plus nécessaire. Cependant, je laisse cet article pour l'histoire.

Les groupes de VKontakte sont le lieu où leurs utilisateurs rassemblent la plus grande concentration. C’est pourquoi beaucoup tentent de mieux les concevoir afin d’en attirer le maximum. Il est préférable pour le créateur de penser au graphisme avant l’immédiat, en même temps que le développement du futur.

Il est important de comprendre que la conception d'un groupe est son visage, qui Nouvel utilisateur voit immédiatement dès qu'il entre dans la page, seulement après cela, il commence à se familiariser avec le contenu. Cette phrase, en fait, reflète tout son poids. De plus, le menu graphique est également une fonctionnalité de groupe, car il vous permet de trouver rapidement et facilement les informations dont vous avez besoin.

Parlons d'idéologie

Avant de commencer à dessiner et à disposer quoi que ce soit, il est important de réfléchir à ce que doit dire votre menu ? Pour comprendre cela, il convient également de décider de l'objectif principal du groupe : divertir, informer ou vendre. L'apparence et la fonctionnalité du futur menu en dépendent en grande partie.

Menu pour attirer les visiteurs

Si vous envisagez de publier du contenu divertissant, informatif et éducatif, vous devez créer un menu qui affichera les principaux sujets. Par exemple, il peut s'agir de sections : les dernières publications, les plus populaires, sur la mode, l'alimentation saine, les enfants, etc. Cela servira à accroître la fidélité, car il sera pratique pour les utilisateurs de naviguer dans la masse de contenus.

Menu des ventes

Au contraire, si le but de la page est de vendre, le menu doit aider les utilisateurs à naviguer parmi un grand nombre de produits. Il est préférable d'y placer des sections qui dirigent le visiteur vers le catalogue ou une partie spécifique de celui-ci, parlent de la livraison, des contacts, de l'entreprise, des promotions et, bien sûr, vers la page de contact.

La première étape – nous travaillons dans Photoshop

Les menus des contacts commencent à être créés non pas sur un réseau social, mais à l'aide de éditeurs graphiques. Pour cela, il est préférable d'utiliser Photoshop, même si même des connaissances minimales suffisent amplement. Par conséquent, ouvrez le programme et créez un modèle de menu. La taille du nouveau document dépend directement du nombre de sections dont vous avez besoin.

Ensuite, vous aurez besoin d'un arrière-plan. Il peut s'agir simplement d'un fond blanc, d'une couleur ou d'une image spécifique. Téléchargez depuis Internet et collez-le dans le modèle. Ensuite, écrivez les éléments de menu que vous avez prévus sur l'image d'arrière-plan. Ces étiquettes se transformeront ensuite en liens qui dirigeront l'utilisateur vers une section spécifique.

Mais pour que cette image se transforme et se transforme facilement en liens, il faut la couper. Cela se fait dans le même Photoshop à l'aide de l'outil « découpe ».

Mais pour que cela se fasse en douceur et en beauté, il est important d'utiliser des lignes auxiliaires, qui sont activées par la combinaison de touches CTRL+R. Des lignes bleues apparaîtront que vous pourrez faire glisser pour définir les limites de la coupe. Ensuite, cliquez sur l'outil « Découpe » et sélectionnez « fragments le long des guides » dans le menu supérieur, ce qui permet de diviser clairement l'image en plusieurs sections de menu distinctes.

Cet article sera un manuel détaillé et je vais vous expliquer comment créer un menu pour un groupe VKontakte. Un menu de groupe VK magnifiquement conçu contribue à une réelle augmentation du nombre de visiteurs et à une croissance des ventes sur le site.

Bonjour mes chers lecteurs. Laisse-moi te dire aujourd'hui comment faire beau menu pour le groupe VKontakte et totalement gratuit. À propos, après avoir appris à créer de tels sujets, vous pouvez gagner un peu d'argent grâce à cela -))). Déjà aucun site commercial ne fonctionne sans créer sa propre communauté dans dans les réseaux sociaux en particulier VK, qui vous aidera à attirer de nouveaux clients et à promouvoir votre entreprise.

Mais si votre communauté n’est pas attractive et comme tout le monde, qui voudra y rester ? Je pense que personne !!! Décorons donc nos groupes avec un design de haute qualité et apprenons à le faire très rapidement. Avant de commencer à créer des graphiques et notre futur menu, vous devez installer le programme Photoshop sur votre ordinateur pour découper davantage les images. Beaucoup se demanderont pourquoi vous devez couper des images. Le point ici est que pour chaque lien de menu, nous devrons créer une bande distincte de la bannière générale.

Il existe aujourd'hui plusieurs types de menus créés :

• Ouvrir avec les éléments actifs ;
• Fermé en tant que message épinglé ;
• Avec des images individuelles ou une image commune adjacente de la bannière et du menu.

L’essence de la création des deux options est la même. La seule différence principale est éléments supplémentaires et les types d'enregistrements, et cela sera abordé plus en détail dans cet article.

Travailler avec le menu cela nous aidera balisage wiki, qui est aujourd'hui intégré à l'éditeur de texte VKontakte. Il diffère de l'habituel en ce qu'il utilisera des commandes standards pour afficher une image particulière et insérer des liens vers les éléments nécessaires. Le balisage wiki lui-même vous permet d'insérer du code pour afficher des images, des vidéos et d'autres éléments.

Menu fermé du groupe VK

Dans ce cas, nous verrons à gauche de l'avatar principal du groupe un lien hypertexte sous la forme de l'inscription « menu de groupe », lorsque vous cliquerez dessus, notre menu avec les éléments actifs et les images s'ouvrira.

Le menu ressemblera à ceci :

Ouvrir le menu du groupe (matériel épinglé)

L'idée est de créer des éléments de menu déjà ouverts qui seront affichés dans la description du groupe lui-même, où il est généralement affiché pour toutes les conditions. Notre photo sera jointe à la description, que nous préparerons à l'avance et la relierons à la page sur laquelle nous aurons les articles actifs. Ce menu est devenu très populaire dans Dernièrement et est très demandé par les clients. Ils ressemblent à ceci :

Comment créer un beau menu pour un groupe VKontakte : instructions étape par étape

Donc, tout d'abord, nous devrons créer l'avatar principal du groupe, que nous placerons à droite, et le stub de notre menu sous forme de bannière.

• Pour un avatar 200x332 pixels ;
• Pour la bannière du menu principal, 395x282 pixels.

Comme vous l'avez peut-être remarqué, la hauteur des images est différente et ceci est fait pour que les images ne descendent pas en hauteur et soient au même niveau puisque la hauteur du nom et du statut de la communauté prend environ 50 px et nous le ferons il faut supprimer cette valeur de la hauteur du menu.

Pour être clair, si la hauteur de l'avatar principal d'un groupe est de 332, alors nous en soustrayons 50 et obtenons la hauteur du menu principal égale à 282. Si les dimensions n'ont pas d'importance, alors la hauteur peut être définie arbitrairement. .

La prochaine étape après la création d'une communauté sera la mise en place du matériel, et ici nous devons interdire aux participants de créer des pages et des blocs supplémentaires, mais uniquement d'écrire sur le mur. Pour ce faire, vous devrez vous rendre dans la section sous l'avatar du groupe appelée « gestion de la communauté » où nous devons rendre notre matériel « restreint », comme indiqué ci-dessous.

Commençons maintenant à créer la composition globale. Vous pouvez, bien sûr, simplement insérer une image au lieu d'un avatar et dans la description, mais ne soyons pas des amateurs et nous vous montrerons comment le faire de manière professionnelle pour qu'il s'agisse d'une image à part entière, se transformant l'une en l'autre.

Créons une nouvelle toile dans Photoshop de dimensions 600x350 pixels, que nous utiliserons comme pochoir en y découpant des ouvertures pour nos images. Pour fonctionner, nous devons convertir les tailles de tous les éléments et règles en pixels et cela se fait en suivant le chemin suivant : « Edit-installation-main » et ici nous définissons les pixels.

La prochaine étape dans la création d'un menu ouvert consiste à réaliser des découpes pour la bannière et l'avatar, que nous recevrons ensuite en téléchargement. Pour ce faire, rendez-vous dans la section du menu vertical de gauche et sélectionnez découpe.

En utilisant bouton gauche souris, comme si vous sélectionniez une zone, vous devez sélectionner des blocs des tailles dont nous avons besoin et après chaque sélection, appuyez sur le bouton « Supprimer » et sélectionnez 50% gris. De telles actions conduiront à ce que les blocs aient la taille requise et soient mis en évidence dans une couleur différente de l'arrière-plan principal.

Ça devrait ressembler à ça:

Maintenant, nous sélectionnons simplement la gomme et utilisons la fonction « gomme magique » pour cliquer sur chaque bloc gris et obtenir un pochoir avec des découpes. L'étape suivante consiste à sélectionner notre image principale et à la placer sous l'arrière-plan et à obtenir des images prêtes à l'emploi sur lesquelles vous pouvez écrire du texte avec le nom du menu ou d'autres éléments publicitaires.

Super. Après avoir placé une photo de notre design, il nous suffit de sélectionner « enregistrer pour le Web » et nous obtenons ainsi 2 de nos photos. Nous retournons maintenant dans notre groupe et pouvons remplir l'avatar principal (vertical). Nous utiliserons la bannière du menu un peu plus tard lorsque nous travaillerons avec le code de balisage wiki.

Créons le menu lui-même, avec des éléments actifs qui redirigeront l'utilisateur vers sections requises un site tiers ou aux albums et catalogues du groupe lui-même. Nous utiliserons une nouvelle image pour plus de variété -))).

Revenons donc à Photoshop et créons une nouvelle toile de dimensions 400x300 pixels. Sélectionnez ensuite dans la section : file-place et sélectionnez une image pour le fond du menu.

Nous plaçons les boutons de notre futur menu sur l'image et découpons l'image comme nous l'avons fait ci-dessus en sélectionnant les blocs nécessaires. Après quoi, nous sélectionnons également « enregistrer pour le Web » et obtenons un dossier avec nos coupes. Dans mon cas, j'ai 4 photos dans un dossier séparé.

Nous devons maintenant télécharger les images téléchargées depuis Photoshop dans un album séparé et les cacher des regards indiscrets. Après le chargement, chaque image recevra son nouveau nom et son identifiant unique.

Veuillez noter que vous devez avoir :

• Les documents sont ouverts en mode « restreint » ;
• Discussions incluses ;
• Le dossier avec les photos est ouvert à tous.

Il ne reste plus qu'à configurer notre page où le menu sera affiché. Pour ce faire, rendez-vous sur la page principale de la communauté, sélectionnez du matériel frais, modifiez et appelez « NOTRE MENU ».

Ensuite, nous devons insérer les images que nous avons reçues lors de la découpe dans Photoshop. Certaines personnes utilisent des codes de balisage, mais pour ne pas trop y penser, je vous suggère simplement de sélectionner l'insertion d'une image en cliquant sur l'icône de l'appareil photo et de la télécharger l'une après l'autre.

Travaille dans éditeur de texte si, après avoir chargé les images, nous cliquons sur l'icône en forme de parenthèses dans le coin supérieur droit, nous devrions voir ce code :

Conseil: Un point important après le chargement des images est de supprimer le remplissage. Cela peut être résolu en insérant « nopadding » avant la taille de l'image.

Pour plus de clarté, il est écrit ci-dessous ce qui vient d'où, mais étant donné que tout sera inséré automatiquement et qu'il n'est pas nécessaire d'être malin, et d'ouvrir comme certains écrivent chaque image et prennent l'identifiant, alors nous téléchargeons et sauvegardons simplement.

[]
où xxxxx est l'identifiant de votre image
aaaaa - largeur en pixels (maximum 388)

Cela devrait finir par ressembler à ceci :

Désormais, nos photos sont rassemblées dans une bannière distincte. Et pour ajouter un lien vers chaque élément, cliquez simplement sur l'image avec le balisage désactivé et dans la section lien, collez l'URL copiée.

Et maintenant, nous arrivons au point le plus important et final de la création de notre menu VKontakte. Nous devons maintenant enregistrer notre page avec des images et copier son adresse. Dans mon cas, cela ressemble à ceci :

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

N'oubliez pas qu'au début de l'article, nous avons créé un menu tronqué, qui sera une continuation de notre avatar principal, et nous avons réalisé un pochoir pour celui-ci. C'est exactement ce dont nous avons besoin maintenant.

Accédez à la page principale et procédez comme suit :

Étape 1.

Collez l'adresse de la page dans le champ de texte pour nouvelle entrée sur le mur, après quoi il est converti en lien.

Étape 2.

Nous attachons une image de notre espace réservé de menu à la publication et cliquons sur envoyer.

Étape 3.

Maintenant, après avoir publié l'article, cliquez sur l'heure de création dans la partie inférieure gauche de l'article et sélectionnez « PIN ».

Super!!! Finissons ici. Vous savez maintenant comment créer des menus sympas et vous pouvez gagner beaucoup d'argent grâce à cela. Je vous conseille de tout faire dans l'ordre suivant :

• Nous élaborons une structure et ordonnons la conception des images de menu ;
• Nous redimensionnons et coupons toutes les images ;
• Insérez des images dans des albums ;
• Nous éditons toutes les coupes dans l'éditeur et les publions sur les pages principales du groupe.

Grâce à notre travail, nous obtiendrons ce menu.

Mais le menu lui-même, lorsque vous appuyez dessus, apparaîtra avec liens actifs. Cela vaut la peine de jouer avec les tailles et de les ajuster en fonction de votre écran, mais n'oubliez pas l'affichage sur les appareils mobiles.

IMPORTANT: Après avoir modifié la conception de VK en 2016, de nouvelles modifications ont été apportées lors de la création d'images et des exigences relatives aux images.

Téléchargez le modèle de menu du groupe VK + toutes les sources de cours

J'espère que le matériel vous a été utile et que vous comprenez maintenant facilement comment créer un beau menu pour un groupe VKontakte. Abonnez-vous aux mises à jour du blog et à bientôt dans de nouveaux articles. Si vous avez des questions, écrivez-les dans les commentaires et je vous aiderai certainement.

Je joins une vidéo pour renforcer ce que vous lisez -))).

L'objectif du créateur d'un groupe sur les réseaux sociaux. réseaux pour attirer plus de visiteurs. Il est important que le client veuille s'inscrire, signer, lire des informations, laisser un commentaire ou commander un produit. La nécessité du résultat final diffère de la direction de l'activité.

Les premières secondes du séjour façonnent les actions ultérieures du client. C'est pourquoi l'interface joue un grand rôle.

Facteurs qui laissent un invité :

• avatar;
• description;
• Nom;
• menu beau et pratique;
• couleur;
• contenu.

Il est facile de créer un menu pratique qui motive plus que la simple action. Mais vous devez d’abord déterminer ce que cela devrait être.

À quoi devrait ressembler le menu ?

Grâce à un menu bien conçu, le visiteur peut facilement y naviguer et obtenir rapidement des réponses à ses questions. La navigation vous permet également de créer la bonne impression du projet.

Trois objectifs principaux des groupes :

1. ventes;
2. augmentation du trafic;
3. augmentation du nombre de visiteurs actifs.

Pour les soldes, la navigation par groupe remplace l’affichage en magasin.

Les boutons les plus importants devraient être ici :

1. catalogue;
2. prix;
3. livraison;
4. offres promotionnelles;
5. Commentaires.

Pour augmenter le trafic, l’accent est mis sur le contenu et la saveur du site ou du blog.

Un ensemble approximatif de boutons :

vidéo : menu pour le public

Travailler avec Photoshop

Avant de commencer, vous devez visualiser visuellement le design ou Forme générale, ainsi que ses composants. Aucune connaissance particulière n'est requise, suivez simplement les étapes des instructions.

Algorithme d'actions :

Cela se fait à l'aide de l'outil Rectangle de sélection :

Travailler avec des graphiques :

Ça devrait ressembler a quelque chose comme ca:

Enregistrez le rectangle situé à droite en tant qu'image distincte, en définissant la taille sur 200x500 pixels. Il s'agit d'un avatar prêt à l'emploi, téléchargé via le bouton « Télécharger une photo » du groupe VK.

La deuxième image doit encore être divisée par le nombre de points. Ceci est fait afin d'attribuer un lien à chaque bouton.

Vous devez d'abord faire le balisage :

Créez des fragments :

Sauvegarde des images :

Partie technique

Les images terminées doivent être transférées au groupe. En suivant les étapes ci-dessous, cette tâche peut être facilement accomplie.

Important! Le téléchargement d'un menu diffère du téléchargement habituel de photos ou d'images.

Tout est en ordre :

Maintenant, le plus important est de savoir pourquoi tout cela a été fait. Ajoutez une fonctionnalité de menu. Une image distincte doit se voir attribuer son propre lien.

1. trouver l'entrée requise ;
2. faites un clic gauche dessus ;
3. copiez l'URL dans la barre d'adresse.

• accédez à la source où vous devez transférer le visiteur ;
• copiez l'adresse requise.

Enregistrez les modifications à l'aide du bouton correspondant en bas de la fenêtre.

Attention! Les modifications peuvent ne pas être reflétées immédiatement. Il est recommandé de vous déconnecter de votre profil principal puis de vous reconnecter au groupe.

Comment créer un menu dans un balisage wiki de groupe VKontakte

Le balisage wiki est un langage spécial utilisé pour concevoir des pages Web dans des groupes de réseaux sociaux.

Cet outil vous permet de créer :

• effets;
• menus insolites ;
• panneaux;
• éléments de navigation ;
• formater le texte.

En un mot, ce balisage vous permet de créer un mini site Web VKontakte. C'est très pratique, notamment pour les ventes et le recrutement d'abonnés.

Cette conception oblige intuitivement le visiteur à rester et à cliquer sur le bouton. Autrement dit, cela retarde et stimule l'action - et c'est exactement ce qui est nécessaire.

Visuellement, un tel système est très similaire à la mise en page HTML. Mais cela ne nécessite pas de longue formation ni un état d’esprit particulier.

Vidéo : menu avec recherche par catégorie

Nuances de création

En fait, ce qui a été fait ci-dessus (diviser et charger l'image) sont déjà des éléments de balisage. C'est l'avantage de cet outil. Transformation automatique en tags lors du simple chargement des images.

Cependant, il est important de connaître les balises individuelles pour ajouter encore plus de fonctionnalités et de beauté. Par exemple, lorsque nous remplissons des parties individuelles de l'image, des bandes blanches peuvent se former entre elles. Vous pouvez les supprimer en ajoutant simplement la balise noborder.

Comme ça: []

Les principales balises sont présentées dans le tableau ci-dessous :

Photo : étiquettes utilisées pour le marquage

Travailler avec des images

Où options est remplacé par :

• pas de frontière- supprimer le cadre autour de l'image ;
• pas de rembourrage- supprimer les espaces entre les images ;
• plaine- insérer un lien vers l'image. Conçu sous forme de texte, sans graphiques ;
• pas de lien- supprimer le lien vers l'image ;
• boîte- ouvrir une image dans une fenêtre ;
• NNNxYYYpx ou NNNpx- définit la taille de la photo en pixels.

Création d'un tableau

Quel que soit le type de menu (texte ou graphique) que vous créez, il est peu probable que vous puissiez vous passer d'insérer un tableau. Sinon, vous pouvez simplement coller le texte dans le champ d'actualités et ne pas le formater, ce qui vous fera perdre beaucoup de temps.

Un tableau est créé à l'aide d'un ensemble spécial de caractères, chacun d'eux étant responsable d'une partie spécifique du tableau :

• {| symbole du début du tableau, sans lui il ne peut y avoir de tableau. Toujours utilisé ;
• |+ est chargé de positionner le titre du tableau au centre. Placé après les caractères au début du tableau. Utiliser comme vous le souhaitez ;
• | désigne le début nouvelle ligne et les cellules ;
• | un caractère qui rend la cellule transparente ;
• ! rend la cellule plus sombre. S'il est absent, le signe précédent doit être utilisé ;
• |} signifie la fin du tableau. Le caractère facultatif est cependant utilisé pour éviter qu’une erreur ne se produise.

Lorsque vous remplissez un tableau, le contenu de chaque cellule doit être placé après le signe |, et lors de la séparation des cellules, vous devez dupliquer les types de lignes comme ceci : || ou!!.

Fonctionnalités de balisage

Il existe de nombreuses règles non écrites, ce qui cause beaucoup de problèmes aux programmeurs débutants. En règle générale, tout s’apprend par la pratique. Chacun trouve ses propres failles, chacun fait face à ses propres difficultés.

Afin d'éviter les erreurs fondamentales, vous devez vous familiariser avec les principales :

1. vous devez être prudent lorsque vous redimensionnez l'image - si elle fait moins de 131 pixels, sa qualité se détériorera considérablement ;
2. La largeur de l'image ne doit pas dépasser 610 px ;
3. Il est interdit de placer plus de 17 balises non fermées sur une même page wiki ;
4. lors de la modification de la largeur de l'image, sa hauteur change automatiquement et proportionnellement ;
5. une liste à l'intérieur d'un tableau doit être créée à l'aide d'une balise
   ;
6. Il ne doit pas y avoir plus de 8 éléments de liste sur une seule ligne de balisage.

Pour créer une navigation belle et fonctionnelle, vous devez connaître les bases de Photoshop et du balisage wiki. Cependant, ce dernier contient ses propres nuances qui, lorsqu'elles sont confrontées à un débutant, peuvent rester bloquées et confuses pendant longtemps.

Important! Vérifiez que toutes les balises sont fermées. Gardez-le cohérent.

L'assistant principal en la matière est l'attention et le strict respect des instructions. La page officielle VK, appelée balisage wiki, peut toujours vous aider.