Bonjour les amis!

Vous souhaitez rendre le groupe VKontakte le plus attractif possible pour vos abonnés ? Vous ne savez pas par où commencer ? Si vous disposez déjà d’un contenu de haute qualité, concentrez votre attention sur la conception de la communauté. Je ne parle pas simplement de choisir un avatar. La création d'un menu dans un groupe VKontakte est l'un des principaux points à prendre en compte lors de la conception. C'est ce point que nous examinerons aujourd'hui.

Qu'est-ce que le menu VKontakte et à quoi sert-il ?

Le menu est le visage du groupe. La première chose que rencontre tout visiteur de votre communauté est le menu. Par conséquent, votre tâche est de le considérer de la manière la plus pratique et la plus attrayante possible. Tout d’abord, vous devez décider exactement ce que vous souhaitez transmettre à vos abonnés. Cela dépend de la mission de la communauté elle-même. Après tout, il existe des objectifs complètement différents pour créer un groupe : éducatif, divertissant ou l'objectif de vendre un produit/service. À partir de là, décidez quelles informations sont les plus importantes pour vos futurs abonnés.

Par exemple, si vous souhaitez divertir les utilisateurs ou les informer sur quelque chose, concentrez-vous peut-être sur la facilité de trouver les informations dont ils ont besoin. Cela s'applique aux groupes dont le contenu peut être divisé en sujets distincts, par exemple la santé, la mode, etc.

Si votre communauté est créée sous la forme d'une boutique en ligne, alors l'approche doit être complètement différente. La commodité de rechercher des biens ou des services doit bien sûr être présente, mais également se concentrer sur les promotions, les nouveaux produits, les conditions de livraison ainsi que vos contacts.

Assurez-vous donc de garder le thème de la communauté à l’esprit lors de la création de votre menu.

Méthodes de création de menus pour les groupes VKontakte

La première étape consiste à décider comment créer votre menu : automatiquement ou manuellement. Si vous avez choisi une méthode simple et rapide, mais en même temps de haute qualité, je présente à votre attention un service de création d'un menu pour les communautés VK WikiMaker, vous le comprendrez rapidement et facilement, rendant votre groupe plus pratique. Si vous souhaitez prendre le contrôle total de la création de menus, voici des instructions étape par étape.

Comment réaliser un design attrayant ?

Je souhaite combiner la création de deux éléments de groupe importants dans les instructions : un menu et un avatar. Car il n’est pas conseillé de les créer séparément, car l’utilisateur doit voir l’harmonie entre ces deux éléments graphiques.

1. Tout d’abord, vous devez installer Photoshop, si vous n’avez pas déjà installé ce programme sur votre ordinateur.
2. Ouvrez Photoshop et créez deux fichiers modèles pour l'avatar et pour le menu. Définissez les dimensions requises. Par exemple, pour un avatar - 200x500 pixels et un menu - 389x600 pixels. Remplissez-les d'une seule couleur pour qu'ils soient clairement visibles et enregistrez les deux fichiers séparés créés.
3. Chargez le modèle dans le groupe à la place de l'avatar, en sélectionnant toute la zone.
4. Le chargement du menu est un peu plus compliqué. Pour ce faire, vous devrez activer le contenu dans « Gestion de communauté ». Après cela, la possibilité d'ajouter un menu deviendra disponible. Allez dans l'onglet qui apparaît sous la description du groupe « Dernières nouvelles » et cliquez sur le bouton dans la barre d'outils en forme de caméra et téléchargez le fichier depuis votre ordinateur. Arrivé?
   
5. Immédiatement après le téléchargement, un lien sera à votre disposition, qu'il faudra modifier un peu. Après le mot « noborder », entrez le signe « ; » et le mot "nopadding". Cette fonctionnalité empêchera votre menu de descendre lors de l'ajout de nouvelles à la communauté.
6. Nous réalisons Prnt Scrn de la page principale de votre groupe. Pour quoi? Pour comprendre vos erreurs. Le fait est qu'il s'agit maintenant d'une version brouillon - tout n'est ni fluide ni si beau. Votre objectif est que les bordures inférieures du menu et de l'avatar correspondent parfaitement. Alors vous vous demandez peut-être : « Pourquoi est-ce que je ne vous donne pas les mesures exactes ? » Mais le fait est que chaque administrateur utilise une quantité différente de texte dans la description du groupe, ce qui modifie la hauteur du menu, et la largeur du menu est une question de goût et, comme nous le savons, elle est différente pour chacun.
7. Nous allons dans Photoshop et créons un nouveau fichier en y insérant une capture d'écran.
8. Maintenant, en travaillant avec ce fichier, nous sélectionnons la zone de l'avatar à l'aide d'une "sélection rectangulaire" - vous pouvez l'utiliser pour sélectionner une zone spécifique aussi précisément que possible. Ensuite, faites un clic droit et sélectionnez « couper vers un nouveau calque ».
   
9. Nous travaillons sur la même chose avec l'image du menu, seulement lors de sa sélection, nous devons couper ce qui est inutile en bas. Assurez-vous que le bas du menu et l'avatar correspondent parfaitement.
10. Maintenant, en maintenant le bouton Ctrl enfoncé, sélectionnez les deux calques que nous avons créés. Faites un clic droit dessus et sélectionnez la fonction « Fusionner les calques ». Deux de nos modèles, parfaitement adaptés l'un à l'autre, apparaissent devant nous sur une seule page.
11. L'étape suivante consiste à télécharger la photo de couverture. Il apparaît au-dessus de nos modèles. Maintenant, dans les outils de calque à droite, cliquez sur le fichier de couverture tout en maintenant la touche Alt enfoncée. Après cette procédure, la couverture sera visible uniquement sur les modèles et deviendra invisible au-delà de leurs bordures. Mais cela ne vous empêchera pas de déplacer le couvercle et d'en sélectionner la partie visible souhaitée.
12. Maintenant, le point important de la création d’un menu, ce sont les boutons. Vous devriez déjà connaître les noms exacts des futurs boutons. Par exemple, « Santé », « Enfants », « Nos contacts ». Pour faciliter la tâche, nous créons le premier bouton, les suivants nous dupliquons simplement et modifions le texte.
13. Nous ajoutons un logo à l'avatar ou un appel verbal, ou les deux. Cela ajoutera du dynamisme ainsi qu’une particularité à votre groupe.
    
14. Enregistrez le fichier partagé sous forme d'image sur votre ordinateur. Et après?
15. Ouvrez le fichier que nous venons de créer dans Photoshop. Ensuite, nous créons un nouveau fichier vide avec les dimensions exactes de notre avatar, y insérons l'image que nous avons créée avec le logo et les boutons. Nous sélectionnons la zone dont nous avons besoin pour l'avatar et l'ajustons parfaitement aux dimensions sélectionnées. Ensuite, nous sauvegardons notre création.
16. Nous faisons de même avec le menu. Mais encore une fois, il y a un ajout ici. Tout d’abord, vous devez connaître la hauteur du menu, car elle ne correspond pas à la version brouillon. À l’aide d’une règle, on mesure la hauteur à un seul pixel (il est préférable de la mesurer plusieurs fois pour ne pas se tromper). Créez un nouveau fichier avec l'ancienne largeur et la nouvelle hauteur, ajustez l'image à la taille et cliquez sur le bouton « Enregistrer ».
    
17. Chargez un nouvel avatar, sélectionnez toute la zone et sélectionnez une vignette.
18. Téléchargez le menu via le bouton « Dernières nouvelles ». Nous supprimons le lien précédent, téléchargeons une nouvelle photo et ajoutons « ;nopadding ».
19. Décrivons maintenant la disposition de notre menu. Nous utilisons l’outil « Découpe » ou « Couteau » de Photoshop. Il est appelé différemment selon les versions de Photoshop. Nous traçons une ligne sous chaque bouton pour créer des rectangles séparés sur lesquels l'utilisateur peut survoler pour accéder à des liens spécifiques à l'avenir.
20. Nous allons éditer le menu via « Dernières nouvelles » et charger tour à tour chacune de nos coupures de menu. Lors de la visualisation, des écarts entre nos images seront affichés. Afin de vous en débarrasser, vous devez ajouter le mot « nopadding » à chaque lien.
    
21. Maintenant, pour que vos liens soient actifs et que vous puissiez insérer les informations dont vous avez besoin, écrivez ensuite sur les liens des images dans le menu d'édition - le nom d'un de vos boutons - par exemple, Livraison. Mais ce mot doit être écrit clairement selon des règles établies ; il doit ressembler à ceci [[Livraison]]. Ensuite, enregistrez la page, suivez ce lien et remplissez-la avec le contenu nécessaire.
22. La dernière étape pour que tout fonctionne consiste à insérer une copie du lien vers la page Livraison dans le lien du bouton, par exemple - page-123456_456789, c'est-à-dire les informations entre les mots « vk.com/ » et « ? Voilà, concevez maintenant chaque bouton de la même manière et votre menu réussira à attirer votre public cible.

Abonnez-vous aux mises à jour du blog et partagez des informations avec vos amis. Créez plus de beauté dans votre vie !

La conception de haute qualité de la page de la communauté VKontakte représente déjà la moitié du succès dans la réalisation de l'objectif pour lequel le groupe est créé. Les statistiques montrent que la présence de la navigation augmente considérablement le trafic des pages et augmente également le nombre d'abonnés. La page communautaire, où toutes les informations sont structurées, donne l'impression de l'approche sérieuse des administrateurs en matière d'affaires, ainsi que de leurs compétences pratiques dans la direction d'un groupe et de leur fiabilité. Dans cet article, nous parlerons du menu du groupe VKontakte, de la façon de le créer et de le rendre plus pratique à naviguer.

Variétés de menus pour la communauté VKontakte

Il existe désormais deux types de menus de groupe VKontakte. Bien entendu, leurs modèles sont disponibles sur Internet et vous pouvez tout faire strictement selon eux. Cependant, le résultat ne sera pas créatif et original, ce qui signifie qu'il n'attirera pas un grand nombre d'abonnés.

Il existe donc un menu fermé et un menu ouvert.

Closed tire son nom du fait que l'abonné doit l'ouvrir lui-même. Pour ce faire, il vous suffit de cliquer sur le lien. N'importe quel mot peut être utilisé comme lien, généralement « ouvrir » ou « menu ». Cependant, certaines personnes font preuve de créativité et proposent des liens originaux.

Ouvrir est un message qui a été épinglé. Il contient un lien valide vers le menu. Ce type est encore assez jeune, il est apparu il n'y a pas si longtemps, ou plutôt avec l'avènement de la fonction d'épinglage d'un post au mur d'une page. Un menu ouvert est de loin le plus efficace et plus attrayant qu’un menu fermé. La première option est moins productive, car les visiteurs du groupe peuvent tout simplement ne pas remarquer le lien vers celle-ci.

Alors, VKontakte ? La réponse est assez simple. Pour créer les deux types de menus pour le groupe VKontakte, le balisage wiki est utilisé. C'est un outil très pratique ; il vous permet de créer des tableaux, des graphiques, de formater et d'éditer des images, de travailler avec des liens, etc. Cependant, tout est désormais beaucoup plus simple pour les créateurs de la communauté VKontakte qu'il y a plusieurs années. Le réseau social convertit automatiquement tout le contenu en balisage wiki.

Le menu ouvert du groupe VKontakte est désormais plus populaire, mais le menu fermé n'est pratiquement plus utilisé. Par conséquent, il serait raisonnable d'envisager plus en détail la création d'un type ouvert. Ensuite, vous apprendrez comment créer un menu dans le groupe VKontakte (des instructions étape par étape sont présentées ci-dessous).

Première étape

A ce stade, vous devez sélectionner des images. Ils créeront une apparence présentable de la page. Les images peuvent être trouvées sur Internet ou réalisées vous-même à l'aide d'éditeurs de photos. La deuxième option ne convient qu'à ceux qui savent bien dessiner sur un ordinateur et maîtrisent Photoshop.

La première image est un avatar. La seconde (centrale) est l’image-action. Les paramètres de l'avatar doivent être d'au moins 200 x 330 pixels. L'image centrale fait au moins 390 x 280 pixels.

Deuxième étape

Ouvrez la page du groupe et recherchez « Gestion de la communauté ». Le lien se trouve sous la photo de couverture de la page à droite. Après avoir suivi le lien, recherchez la section « Matériaux » dans les informations, puis cliquez sur « Limité » dans ce paragraphe.

Sur la page principale, cliquez sur modifier dans la ligne « Matériaux ». Dans le formulaire d'éditeur qui apparaît, spécifiez le nom, les sections, puis assurez-vous de cliquer sur le bouton ci-dessous pour enregistrer. Après cela, revenez à la page en utilisant le bouton dans le coin supérieur droit.

Troisième étape

Copiez l'adresse de la page. La première rangée de chiffres après le mot « page » est le numéro de la communauté, la seconde est le numéro de la page du groupe. Vous devez le savoir lorsque vous réfléchissez à la façon de créer un menu dans le groupe VKontakte. L'adresse doit être insérée sur le mur avec l'image centrale. Pour joindre une photo, cliquez sur « joindre » et « photo ». Ensuite, sélectionnez et collez. Cliquez ensuite sur envoyer – cela publiera le message.

Quatrième étape

Placez la première photo à la place de la photo principale de la communauté. Un enregistrement de cette action accompagné d’une image apparaîtra sur le mur. Il ne sert à rien là-bas, il faut donc le supprimer.

C'est tout. Lorsque les utilisateurs cliquent sur l'image centrale, le menu du groupe s'ouvrira à eux.

Comment créer un tableau dans le menu ?

Chaque administrateur réfléchit à la manière de créer un menu dans le groupe VKontakte. Les instructions présentées ci-dessus ne peuvent que vous aider à créer un menu de base. De plus, il doit être amélioré.

Le tableau est très pratique pour naviguer dans le menu du groupe VKontakte. Créer un tableau nécessite la connaissance de certains symboles.

• (| signifie début ;
• |+ emplacement central;
• |- à partir d'une nouvelle ligne ;
• | transparence;
• ! remplissage de cellules sombres ;
• |) désigne la fin.

Comment créer des liens ?

Dans la question de savoir comment créer un menu dans le groupe VKontakte, il y a un point important concernant les liens. Ils peuvent être conçus de différentes manières :

• Laissez simplement un lien. Pour ce faire, mettez le lien entre crochets.
• Faites un lien avec un mot ou une phrase. Ouvrez, collez le lien, après le lien mettez le signe | et fermez le crochet.
• Lien d'image. Vous pouvez le faire en utilisant cet exemple : [].

Le plus souvent, chacun apprend seul à créer un menu dans le groupe VKontakte. La connaissance vient avec l’expérience par essais et erreurs. Quelques recommandations peuvent néanmoins être données aux débutants.

• La taille de l'image ne doit pas être inférieure à 130 pixels. Cela dégradera considérablement l’apparence du menu.
• La largeur de l'image ne dépasse pas 610 pixels.
• Une page wiki ne peut pas contenir plus de 17 balises non fermées.
• Lorsque vous réglez l'indicateur de largeur, la hauteur change automatiquement en fonction des proportions.
• Vous pouvez créer une liste dans un tableau en utilisant />.
• Un maximum de 8 unités de liste peuvent être placées sur une ligne.

Entre autres choses, il existe des programmes spéciaux pour une utilisation plus facile du balisage wiki. Ce sont à la fois des applications pédagogiques et de véritables assistants qui feront tout pour vous.

Par exemple, l'application Interactive FAQ (bêta) vous permet de tester vos capacités en programmation wiki.

Son fonctionnement est simple : l'utilisateur se voit présenter un menu prêt à l'emploi et doit saisir le code de balisage. A la fin, le résultat est comparé à l'original.

Le programme Wiki Editor n’enseigne ni ne forme rien à ses utilisateurs. Avec son aide, vous pouvez créer un menu même sans compétences de base en programmation. L'éditeur facile à utiliser écrit lui-même les codes - tout ce que l'utilisateur a à faire est de le contrôler.

Ainsi, toute personne envisageant d'utiliser le groupe pour promouvoir son entreprise ou simplement pour s'amuser peut créer un menu VKontakte. Le menu rend la promotion commerciale beaucoup plus efficace et attire les utilisateurs vers la page du groupe. Un menu donne à une communauté un aspect présentable et plus professionnel que ses concurrents qui n'en ont pas.

5 voix

Bonjour, chers lecteurs de mon blog. Avec cet article, j'ouvre une série de publications sur le thème du beau design des groupes VKontakte. Nous allons maintenant travailler sur la création d'un menu, puis nous passerons à la création d'une image unique élégante et, à la fin, nous apprendrons comment rendre les images cliquables.

En fin de compte, vous vous retrouverez avec une communauté qui ressemble à ceci. Lorsque vous cliquez sur le bouton de transition, une page élégante supplémentaire s'ouvre.

Le travail à venir n'est pas si difficile, je vais vous expliquer en détail comment procéder. Le travail ne prendra pas plus de quelques heures. Parlons de tout dans l'ordre.

1. Préparation au travail. Des outils dont vous ne pouvez pas vous passer

Donc, avant d'arriver à la question principale et de commencer à voir comment créer un menu dans un groupe VKontakte, parlons de ce dont vous aurez besoin.

1.1. Photoshop

Bien sûr, vous pouvez vous passer de Photoshop, regardez cette vidéo qui explique tout en détail. Si tu veux. Cependant, si vous n'avez pas les compétences, je vous recommande fortement de vous embêter et de parcourir mes trois publications.

Si vous voulez un groupe normal, vous n’avez d’autre choix que d’apprendre Photoshop. Vous ne pouvez aller nulle part sans images de haute qualité. je peux vous recommander cours de Zinaida Lukyanova . Vous vous habituerez rapidement et sans vous ennuyer à votre nouveau métier et pourrez même gagner de l'argent grâce à vos compétences en design. Assez de connaissances !

Alors bon, continuons. Est-ce que tout ce dont vous avez besoin est disponible ? Ensuite, vous êtes prêt à passer à autre chose.

2. Travailler dans Photoshop ou dans des menus de bricolage

Eh bien, vous pouvez maintenant suivre les instructions étape par étape directement pour créer le menu. Ouvrez Photoshop, puis l'illustration avec le menu. J'espère qu'il n'y aura pas de problèmes. Dans le coin supérieur droit, sélectionnez « Fichier » puis « Ouvrir ». On retrouve le document sur l'ordinateur. Et après?

L'image doit être découpée. Sélectionnez l'outil « Découpe ». Comme vous pouvez le voir, il est caché sous le « Frame ». Cliquez simplement dessus et maintenez le bouton gauche de la souris enfoncé pendant quelques secondes jusqu'à ce qu'un menu supplémentaire apparaisse.

Maintenant sur l'image elle-même, faites un clic droit et recherchez « Fragment divisé ».

Dans ce cas particulier, je diviserai l'image en 4 parties. Pourquoi cela est-il ainsi? Tout bouton sur Internet est une image à laquelle est attribué un code spécifique. Vous pointez la flèche sur le fragment souhaité de l'illustration et votre navigateur transmet l'information à l'ordinateur : « Garçon, il y a des fonctionnalités supplémentaires ici. »

Parfois, c’est toute l’image qui change. Par exemple, les boutons qui coulent lorsqu'on appuie dessus ne sont que la deuxième image, il n'y a pas d'animation là-bas.

Dans mon cas, une image doit être divisée en plusieurs parties et chacune d'elles doit se voir attribuer sa propre action. Quelque part se trouve un lien vers une liste de produits, quelque part se trouve un lien vers le site Web. Il y a aussi une partie de l'image intitulée « Menu ». Rien ne devrait se passer lorsque vous passez la souris.

Dans le bon sens, j'aurais dû mettre en évidence 5 parties afin de séparer plus uniformément les boutons, mais je me justifie en disant que si une personne rate, elle fera toujours ce qu'elle voulait, et si elle appuie correctement, elle ne le saura pas rien.

Ce n'est pas un problème de créer plus de catégories ou de les organiser sur deux colonnes. Si vous comprenez les informations de base, vous pouvez gérer tout le reste.

J'ai déplacé les lignes pour que ce soit plus fluide. Ce n'est pas difficile, cela se fait à l'aide d'un curseur.

Assurez-vous que les images sont enregistrées au format JPEG (catégorie la plus haute à droite). Ensuite, cliquez sur « Enregistrer ».

OK, c'est fini maintenant.

Nous en avons terminé, nous pouvons maintenant passer au groupe lui-même et travailler avec le code.

3. Mise en page en VK pour les nuls

Avant, je pensais que le balisage wiki n'était applicable qu'aux communautés. Je ne sais pas si quelque chose a changé ou si cela a toujours été ainsi, mais maintenant, peu importe que vous créiez un groupe ou une page publique. Les pages peuvent être créées ici et là.

Eh bien, il ne reste plus qu'une petite question de mise en page. Ouvrez la « Liste des pages Wiki ».

Et ajoutez-en un nouveau.

Donne lui un nom. Dans notre cas, le menu.

Et passez au montage.

La première étape consiste à ajouter toutes les parties de notre image.

Chargement.

Faites-le à partir du dossier de bas en haut de la liste. Du tout dernier (celui du bas, dans mon cas « Écrire à l'administrateur ») jusqu'à celui du haut (« Menu »), alors tout s'adaptera correctement, même s'il n'est pas si difficile de faire glisser des fragments avec la souris. Selon ce qui vous convient le mieux.

Nous devons maintenant supprimer l'indentation et créer des liens entre différents fragments, et à certains endroits, supprimer complètement la possibilité de cliquer. Passons en mode code.

Les balises « center » indiquent que la photo et ses fragments sont situés au centre. Je les supprimerai pour vous permettre de mieux percevoir l'information.

Si vous le souhaitez, vous pouvez faire de même, mais gardez à l'esprit que l'illustration se déplacera vers la droite.

Nous revenons au code pour supprimer les retraits entre les fragments de l'image.

Pour unifier à nouveau l'image après le redimensionnement, mettez un point-virgule et écrivez la balise nopadding (;nopadding).

Il ressemblera à ceci.

Naturellement, il ne doit pas y avoir d'indentation après chaque fragment et les balises doivent donc être dupliquées.

L’illustration semble désormais unifiée. Si cela ne fonctionne pas, vérifiez si vous avez correctement orthographié le mot et mettez un point-virgule, supprimez les espaces si nécessaire pour que ce soit comme dans mon exemple. Chaque petit détail est important pour le résultat.

Désormais, lorsque vous cliquez sur différentes parties de l'image, elles s'ouvrent dans une nouvelle fenêtre.

Pour éviter que cela ne se produise, vous aurez besoin d'une autre balise. Pas de lien. N'oubliez pas le point-virgule.

Il n'y aura pas de transition uniquement dans la première image, mais vous pouvez remplacer vos propres URL pour le reste.

Vous pouvez rediriger les lecteurs vers d'autres pages wiki, articles, blogs et autres réseaux sociaux. Maintenant, ce n’est pas difficile à faire, vous pouvez tout faire. Il ne reste plus qu'à économiser.

Voilà à quoi ressemble notre menu.

Et voici le lien souhaité.

4. Dernière étape de l'inscription

Enfin, le moment est venu de décider si vous avez une page publique ou un groupe. La stratégie future en dépend.

Si vous ne savez pas ce que vous avez, rendez-vous dans la section gestion depuis la catégorie « Mes groupes ».

Si vous voulez faire comme moi et le mettre au menu, alors passez à la deuxième partie et nous continuerons à magnifiquement concevoir le public. Le résultat sera quelque chose comme ceci.

Je ne suis pas fan de faire du menu simplement une image de statut, mais c'est exactement ce que veulent certaines personnes. Je n'ai le droit de critiquer personne, et si vous formez un groupe, vous pouvez alors réaliser votre tâche.

5. Instructions vidéo

Regardez la vidéo, nous avons déjà fait tout le travail principal, il ne reste qu'une petite affaire.

6. Une méthode alternative pour les nuls pour 100 roubles.

Si vous rencontrez des difficultés pour créer vous-même un menu, n'hésitez pas à utiliser ce service - VkMenu.ru , où pour un prix modique de 100 roubles. (aujourd'hui c'est comme ça), vous pouvez créer un menu via un constructeur en ligne.

À mon avis, c’est une excellente alternative au travail manuel et au fait de maudire tout le monde et tout si rien ne sort avec le balisage wiki.

Sur ce, je vous dis au revoir, mais pas pour longtemps. Reposez-vous un peu et passez à la partie suivante.

Abonnez-vous à mon Groupe VKontakte . Amusez-vous et à bientô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 vous permet de concevoir facilement et rapidement l'apparence du groupe, en créant des tableaux graphiques et des spoilers, en formatant le texte et en travaillant avec des images, des liens et des ancres. Je ne m'étendrai pas sur les marquages ​​en détail, car... VKontakte dispose d'un éditeur visuel intégré 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 pertinentes dans]

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.

Revenez maintenant à la page principale 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 et publier 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.

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 :

Je ne vais pas vous donner toute la théorie du fonctionnement du balisage wiki en contact, 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 ira 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, nous utilisons des guillemets simples pour les discussions, les albums et les liens externes.

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!