Et je suis ravie de vous accueillir à nouveau !
Dans l'article d'aujourd'hui, nous nous concentrerons exclusivement sur le groupe VKontakte, bien que pour la plupart, je préfère travailler avec des pages publiques. Mais quand dans le dernier article j'évoquais l'exemple de mon public, beaucoup se posaient des questions, notamment sur le menu pour le groupe.
Comment créer un menu dans un groupe VKontakte
C'est ce que j'ai fait.
Fait le menu juste par exemple. Afin d'y faire face pour les groupes, examinez plus en détail toutes les subtilités pour vous.
Alors. Voici les étapes de base:
- Considérez le menu principal
- Sélectionner une image
- Photoshop (sans photoshop, comme toujours, nulle part 🙂)
- Découpe d'images
- Télécharger une image dans un album de contacts
Activer Entrées récentes(pour votre futur menu), vous devez vous rendre dans la gestion de la communauté et activer l'élément - "Matériaux"
Une fois les matériaux inclus, l'élément "Dernières nouvelles" apparaîtra en haut du groupe, dans lequel vous devrez créer un menu. Comme pour toute page de contact, nous entrons dans l'éditeur, dans lequel vous pouvez soit remplir manuellement des images ou des boutons de menu, soit via le balisage wiki (le bouton dans le coin supérieur droit).
Comme vous l'avez deviné, le moyen le plus simple consiste d'abord à dessiner l'image nécessaire dans Photoshop et à y placer des boutons à l'avance. À l'avenir, ce seront des liens.
Dans mon exemple, j'ai utilisé le fond d'une fille et placé 3 boutons à sa gauche. Chaque bouton a son propre nom.
Mon menu était composé des éléments suivants :
Pour introduire l'image finie en contact, vous devez d'abord la couper. Pour cela, dans Photoshop, utilisez l'outil "Découpage". Je ne pense pas qu'il y aura des problèmes avec cela. Tout y est simple... Au cas où, j'ai pris une photo 🙂
Sélectionnez cet outil et commencez à couper. J'ai 4 parties. (la chose la plus simple que j'ai trouvée :), bien que vous puissiez la couper en morceaux)
Tout le travail nécessaire à la création du menu est terminé. Vous pouvez maintenant commencer à créer le menu VKontakte. Pour ce faire, téléchargez alternativement des images sur le contact. Voici ce qui s'est passé à la fin :
Maintenant, nous cliquons sur chaque bouton (ou partie de l'image) et attribuons l'adresse nécessaire (lien). Pour supprimer les espaces supplémentaires, vous devez utiliser la balise "nopadding" (dans le menu de balisage Wiki)
La balise "nopadding" supprime les espaces entre les images, c'est-à-dire qu'elle aide à les "joindre" les unes aux autres.
Suite à l'ajout de la balise, le résultat est le suivant :
Tout semble clair et il n'y a rien de compliqué. Et si vous décidez soudainement de le créer pour vous-même, alors allez-y, vous le rendrez probablement plus beau ... Dans mon exemple, cela ne s'est pas avéré très cool, comme je le voudrais, mais j'ai considéré la partie de travail pour vous. Certes, si vous passez plus de temps et que vous vous tournez même vers des pigistes, vous pouvez créer un menu très sympa.
J'ai vu beaucoup qu'ils font une continuation de l'avatar principal. Il s'avère comme une image entière. Cela semble bon. Mais pour créer cela, vous devez mieux comprendre Photoshop 🙂 .
De plus, j'ai remarqué que beaucoup s'intéressent à la question - comment ouvrir le menu du groupe, c'est-à-dire que le menu ouvert du groupe VKontakte était initialement lors de l'entrée dans le groupe.
Réponse: Cette fonctionnalité, pour autant que je sache, a été supprimée par les administrateurs de Vkontakte. Auparavant, il y avait un bouton séparé pour que le menu soit fixe - ouvert. Ensuite, cette fonction a été supprimée, et maintenant les menus doivent être ouverts séparément.
Bien que j'en ai rencontré quelques-uns ouverts par défaut ... et quelqu'un a même dit qu'il y avait une sorte de code qui résout ce problème. Mais je ne recommanderais pas de l'utiliser. A en juger par les discussions sur de nombreux forums, les admins n'apprécient pas cela !
Et c'est tout pour aujourd'hui. À bientôt!
Je pense que tous ceux qui utilisent activement le réseau social Vkontakte ont déjà rencontré des groupes et des publics magnifiquement conçus. Beaucoup d'entre eux, en plus du menu, ont également de nombreuses pages imbriquées stylisées, des répertoires, etc., ce qui crée essentiellement un petit site directement à l'intérieur du réseau social.
Voici quelques exemples pour que tout le monde comprenne de quoi je parle.
De tels groupes vous permettent de vous démarquer de vos concurrents et d'attirer plus d'utilisateurs. Surtout si le contenu est intéressant aussi :)
Dans cet article, nous allons parler de la façon dont tout cela est fait. Afin de tout analyser plus en détail et d'approfondir toutes les subtilités, prenons un exemple précis. Il y aura une petite classe de maître sur la conception des groupes.
La toute première étape de notre travail est une idée. Nous devons comprendre ce que nous voulons dire et à qui. En contact, il existe plusieurs formats de communautés et il vaut la peine de choisir en tenant compte des tâches définies. Bien qu'à l'avenir, le groupe puisse être transféré au format public et vice versa.
J'explique avec mes doigts. Publique C'est quelque chose comme un blog. Ligne d'actualité. En d'autres termes, nous informons nos abonnés de certaines choses et ils ne pourront pas écrire sur le mur de notre communauté. Commentaire maximal.
Grouper vous permet de créer une communauté plus ouverte à la conversation et à la discussion, où les gens peuvent publier des messages dans le fil en leur propre nom. Vous pouvez également y ajouter des amis de votre liste. Il n'y a pas une telle option en public. De plus, le groupe a un peu plus d'options pour intégrer le balisage wiki (il y a une section "Actualités" dans laquelle vous pouvez intégrer le menu).
Globalement, on peut raisonner ainsi : s'il faut créer une communauté pour le magasin, alors je prendrais le format « public ». Si l'on parle par exemple d'amateurs de pêche, alors il vaut mieux prendre un « groupe ». Même si chacun est libre de faire ce qu'il veut. Après tout, à tout moment, le format peut être modifié. Cependant, gardez à l'esprit que Vkontakte introduit à nouveau une restriction sur la modification du format de la communauté et qu'après la première fois, vous devrez attendre quelques jours jusqu'à ce que vous puissiez tout retourner si nécessaire. Par conséquent, il est préférable de tester la fonctionnalité avant que le groupe ne commence à se remplir de contenu.
Dans le cadre de cette classe de maître, je prendrai le jeu Mad Max basé sur le film du même nom, sorti il y a quelques semaines à peine, comme point de départ et créerai une communauté pour les joueurs avec divers matériaux sur ce jeu. L'objectif principal est de drainer le trafic vers votre site de jeux.
Le format sera « Groupe », car il est nécessaire de créer un afflux naturel de public et de maximiser la communication au sein de la communauté. Je précise tout de suite que je vais utiliser une technique universelle utilisable aussi bien en groupe qu'en public. Cela fonctionne partout.
Mer de contenu, nous commençons à donner vie à l'idée!
Créer un groupe
Pour créer un groupe, allez dans "Mes groupes" dans le menu de droite de votre compte Vkontakte et cliquez sur le bouton bleu en haut "Créer une communauté".
Une fenêtre comme celle-ci devrait apparaître où nous entrons un nom pour notre groupe et sélectionnons un format.
Après avoir entré les informations nécessaires, le panneau de contrôle de notre communauté s'ouvre devant nous. Dans mon cas, ça ressemble à ça.
Comme vous pouvez le voir, j'ai ajouté quelques options : j'ai inclus des vidéos, des enregistrements audio, des discussions et un certain nombre d'autres fonctionnalités qui me seront utiles dans mon travail futur lors de la collecte de contenu. Tout cela peut être modifié à l'avenir sans aucune restriction. J'ai également noté l'adresse de mon site Web. Si vous n'avez pas de site web, ou si son sujet ne correspond pas au format communautaire (ils traitent de choses différentes et n'ont aucun rapport entre eux), alors cette ligne peut être laissée vide.
Dans ce cas, j'ai fixé les limites d'âge à partir de 18 ans, par analogie avec celles que les développeurs ont fixées pour le jeu. Même si j'ai peu de doute que les enfants jouent aussi.
Tout. Le groupe est créé !
Vous pouvez maintenant commencer à le façonner.
Créer un groupe Vkontakte
Cette étape peut être divisée en 2 volets : graphique et technique. Pour travailler, nous avons besoin d'un modèle pour créer un avatar de groupe et un menu, ainsi qu'un peu d'imagination et des connaissances de base de Photoshop (alias Adobe Photoshop).
Modèle de balisage
Qu'est-ce qu'un modèle et de quoi s'agit-il ? Un modèle est une sorte de blanc. Dans ce cas, au format *.psd, nous avons délimité les zones pour l'image sous le menu et les avatars du groupe.
Comme vous pouvez le voir dans le deuxième exemple au début de cet article, nous pouvons faire le design dans le même style pour l'avatar et l'image du menu. En même temps, il est visuellement coupé en 2 parties. Ainsi, le modèle vous permet de former une image de manière à éliminer le décalage graphique et à adapter les images autant que possible à un niveau.
Pour que ce soit plus clair, voici un exemple.
Nous pouvons voir que sur les deux parties de l'image, il y a une bande avec vue sur le quartier résidentiel. Sans utiliser de modèle, il est presque impossible de faire exactement la première fois. Il sera nécessaire d'ajuster les images, en mesurant les écarts jusqu'à 1px. Lors de l'utilisation d'un modèle, nous y ajoutons simplement des graphiques dans le balisage et obtenons immédiatement le résultat souhaité.
Je tiens à noter que ce modèle est conçu pour 1 ligne dans l'explication. Dans la capture d'écran de l'exemple, il y a des téléphones. Si une deuxième ligne apparaît, vous devrez utiliser un modèle différent ou corriger le design manuellement.
En attendant, nous procédons directement à la conception graphique de notre nouveau groupe. Ici, je prends le chemin de moindre résistance et vais sur Google Images pour trouver les parties du dessin. Vous pouvez également utiliser Yandex. Qui aime quoi.
Je n'ai pas de formation en design, nous ne nous attarderons donc pas sur le choix des polices et autres bagatelles. Après quelques ajustements dans Photoshop, j'ai obtenu ce résultat.
Sur le fragment de gauche (où l'inscription "Menu"), vous pouvez également ajouter plusieurs déclencheurs. Dans ce cas, j'ai décidé de m'en passer. Tout. La conception de l'avatar est prête. Nous appuyons sur la combinaison de touches de raccourci Maj + Ctrl + Alt + S dans Photoshop et enregistrons nos fragments dans un dossier sur notre disque dur.
La première étape du travail avec les graphiques est terminée. Reprenons contact.
Définir l'avatar et le menu du groupe
Nous cliquons sur les deux types à la place de l'ava de notre groupe et y téléchargeons notre image. Voici ces gars, en dessous d'eux, il est écrit "Téléchargez une photo".
Nous ajoutons une image. Spécifiez les champs et sélectionnez la vignette. Tout est simple ici et il ne devrait y avoir aucun problème.
Comme nous pouvons le voir, vous devez connaître l'identifiant de la communauté. Il est très facile de le reconnaître. Nous trouvons le menu dans notre groupe (immédiatement sous l'avatar) et ouvrons les "Statistiques communautaires". Dans ce cas, quelque chose de similaire apparaîtra dans la barre d'adresse du navigateur (les chiffres seront différents).
Ces nombres après "?gid=" sont l'identifiant de groupe souhaité. Nous insérons la valeur reçue dans le formulaire de script et écrivons le nom de la page que nous voulons créer. Dans ce cas, je roule dans "Menu".
A noter que la page ne sera créée que si la fenêtre avec le groupe est ouverte dans l'onglet suivant. En termes simples, vous devez être connecté à VK dans le même navigateur. Après tout, seuls l'administrateur du groupe et les personnes qui lui sont assignées ont accès à de telles manipulations. Un passant au hasard ne pourra pas facilement prendre et modifier les paramètres d'un groupe au panneau d'administration dont il n'a pas accès.
Si tout est fait correctement, la page suivante s'ouvrira.
C'est la même fenêtre où nous ferons un balisage wiki un peu plus tard et créerons un menu interne pour notre groupe. Pour l'instant, il nous suffit d'écrire quelque chose ici. Cliquez ensuite sur le bouton bleu "Enregistrer la page" et en haut cliquez sur le lien Retour à la page.
J'ai écrit un "Menu" pour moi-même et après avoir enregistré ma page, j'ai commencé à ressembler à ceci.
Il n'y a pas encore de design, mais pour l'instant nous avons juste besoin d'un lien vers cette page. Nous le récupérons dans la barre d'adresse du navigateur et revenons à la page principale de notre groupe. Enregistrer.
Ici, nous créons un article avec le contenu suivant : nous y insérons une image et un lien vers la page de menu du groupe.
Nous appuyons sur envoyer. Ensuite, nous cliquons sur l'heure à laquelle le message a été envoyé et sélectionnons l'élément «Pin» parmi toutes les options. On rafraîchit la page (la touche F5 du clavier) et, si tout est fait correctement, on obtient le premier résultat : le groupe a trouvé un avatar et un lien pour aller dans la section menu.
Balisage Wiki pour le menu du groupe Vkontakte
Passons maintenant à la conception du menu lui-même. Encore une fois, nous allons dans Photoshop et créons un design pour notre menu. Lors de la conception de l'interface, vous devez vous souvenir des personnes qui entreront dans VK via l'application à partir de téléphones mobiles. En d'autres termes, nous ne devrions pas avoir de petits éléments, et en plus, nous devrions essayer de rendre tout aussi clair que possible. Pour que vous n'ayez pas à deviner comment tout fonctionne ici et où nous pouvons cliquer ... mais il suffit de pousser le bon élément et d'étudier les informations que vous recherchez.
Je ne vais pas m'attarder maintenant sur la manière exacte dont j'ai assemblé le menu. C'est ce que j'ai fait.
Champs minimaux. Disposition verticale. Le format parfait pour un menu responsive. Autrement dit, rien n'ira nulle part sur les téléphones mobiles. Tout se passera exactement comme sur les écrans d'ordinateurs et de tablettes. Je prends la largeur de 500 px, pour que rien ne rétrécisse plus tard et ne perde pas deux fois la qualité de l'image. La hauteur n'est pas importante.
Nous coupons l'image en fragments et les sauvegardons.
Tout. Il est temps pour l'accord final - nous récupérons le menu déjà dans le groupe lui-même.
Pour ce faire, nous retournons à la page principale du groupe (où se trouve le flux et notre lien-image menant au menu). Nous cliquons sur l'image du menu et arrivons à la page même qui a été précédemment créée pour le menu.
Si vous êtes administrateur ou créateur d'un groupe (dans notre cas, c'est le cas), alors en haut de la page il y aura un lien "Modifier". Nous cliquons dessus.
Ensuite, nous passons au mode de balisage wiki (sous le bouton de fermeture dans le coin supérieur droit de la page, un tel cadre est dessiné avec<>à l'intérieur). Lorsque le mode souhaité est activé, ce bouton est entouré en gris.
Ensuite, nous pénétrons dans l'icône de la caméra et ajoutons tous les fragments de notre menu à la fois. En mode wiki, nous ne verrons pas les images elles-mêmes, seulement le code de ces images avec des tailles et des paramètres.
Je veux centrer le menu et ne pas avoir d'espace entre les fragments. Par conséquent, chacun des éléments est enveloppé dans une balise
Les premier et dernier éléments de menu ne doivent pas être des boutons - dans mon image, il s'agit simplement d'un élément graphique sans lien vers la page interne, nous leur ajoutons donc le paramètre "nolink". Cela supprimera la possibilité de cliquer sur cet élément pour ouvrir un morceau de l'image dans une fenêtre séparée. Cliquer sur la souris ne fera rien du tout. C'est le fond de page normal. Inactif.
Dans mon cas, le code du menu ressemble à ceci.
Séparément, je tiens à noter le fait qu'après avoir importé des images dans VK, le système intégré indique parfois de manière incorrecte la taille des images. Par conséquent, nous devons surveiller attentivement cela et exposer exactement ceux que nous avons prévus au stade de la conception. Sinon, tout peut s'effondrer et le puzzle ne fonctionnera pas à la fin.
Lorsque nous avons écrit le code et aligné tous les éléments, nous enregistrons la page et voyons la même chose que dans Photoshop.
La touche finale reste - vous devez créer les pages mêmes où notre menu enverra les gens. Pour ce faire, nous nous tournons à nouveau vers le script de génération de pages wiki et cette fois nous commandons trois pages à la fois. Dans le même temps, il est également nécessaire d'écrire quelque chose sur chacun et n'oubliez pas de sauvegarder leurs adresses quelque part dans la barre d'adresse du navigateur.
Ensuite, nous insérons des liens vers de nouvelles pages dans le code du menu wiki sous la forme page-102302049_51013384, où le premier numéro est l'identifiant du groupe et le second est le numéro de page. Même si, en général, cela n'a pas d'importance. Après tout, nous avons juste besoin de copier ce fragment d'URL et de le coller dans le balisage.
En conséquence, le code de menu prend la forme suivante.
Extérieurement, rien n'a changé. Mais lorsque nous cliquons sur les éléments du menu, nous pouvons voir que maintenant cela fonctionne !
En ce qui concerne le balisage lui-même et les règles selon lesquelles le code est écrit, je vous conseille de lire le groupe Vkontakte spécialement dédié à cette question. Les gars ont décrit tous les points clés et vous pouvez facilement trouver l'élément nécessaire dans leur catalogue et comprendre comment l'ajouter à votre page wiki.
Aujourd'hui, nous revenons à nouveau sur le thème de la conception des groupes VKontakte. Nous avons déjà appris auparavant. Aujourd'hui, nous allons apprendre à faire du graphisme menu avec bannière supérieure épinglée et un lien vers une page interne avec des éléments de menu étendus. En général, il peut y avoir n'importe quelle information sur la page interne. Il est particulièrement pratique d'y avoir, par exemple, des catalogues avec une gamme de produits. Le menu déroulant et le menu collant ont tous deux leurs avantages et leurs inconvénients. Le principal inconvénient du menu déroulant est qu'il est fermé par défaut. Mais d'un autre côté, vous pouvez placer plusieurs liens à la fois dessus.
Menu épinglé semble plus impressionnant en raison de l'impression générale, mais il ne peut avoir qu'un seul lien menant soit à la page interne de Vkontakte, soit à un site externe (de plus, le lien vers le site externe ne partira pas de l'image, mais du lien texte sous l'image). De plus, l'un des inconvénients évidents est que sur les appareils mobiles, le menu graphique est présenté sous la forme d'une entrée régulière dans la bande, debout sur le dessus, et non sous la forme d'un épinglé à côté de l'avatar. En général, lors du choix d'un design, il convient de prendre en compte ces nuances. Voyons donc comment un menu supérieur collant est créé avec un lien vers une page interne.
Je fais des groupes Vkontakte
Conception de haute qualité des groupes et publics VK, menu épinglé, menu déroulant, menu graphique interne, répertoires, navigation interne — des prix et portefeuille.
Étape 1
Créez un nouveau document dans Photoshop d'environ 900x700 pixels, remplissez-le de blanc. Nous devons maintenant découper deux fenêtres dans le calque, à travers lesquelles la conception graphique elle-même apparaîtra. Tout d'abord, sélectionnez un rectangle de 200x500 pixels (avatar) et appuyez sur Suppr. Sélectionnez ensuite un rectangle de 510x352 (alignez-le sur la ligne du bas de l'avatar et faites en sorte que la distance entre les chiffres soit de 50 pixels) et appuyez également sur Suppr.
Après une autre mise à jour de conception par VKontakte (31 octobre 2016), les tailles de bannière sont devenues 510x307 (au lieu de 510x352).
Étape 2
Maintenant, sous la couche blanche, nous mettons une seule image, qui formera la base de la conception. 
Étape 3
Après cela, nous complétons l'image avec divers éléments - un logo, des inscriptions de texte et un bouton qui appelle à cliquer sur le menu. Ensuite, nous enregistrons deux images distinctes sur l'ordinateur - un avatar (à droite), le second est un menu avec un bouton de clic (à gauche). 
Étape 4
Toujours dans Photoshop, nous créons un menu graphique composé de plusieurs éléments. La largeur de ce menu doit être de 600 pixels, la hauteur est facultative, en fonction du nombre d'éléments. Utilisez la leçon "" pour vous aider. 
Étape 5
Nous découpons notre menu en plusieurs bandes horizontales en fonction du nombre d'éléments du menu. Enregistrez en tant que fichiers séparés. 
Étape 6
Nous allons dans notre groupe Vkontakte, cliquez sur "Gestion de la communauté" (en cliquant sur les trois points sous l'auteur, un menu déroulant s'ouvre) et vérifions l'exactitude des paramètres. Le groupe doit être ouvert et les matériaux sont également ouverts. 
Étape 7
Téléchargez maintenant un nouvel avatar. Passez votre souris sur l'emplacement de votre avatar et sélectionnez "Mettre à jour la photo" dans le menu contextuel. Chargez la photo de droite à partir de l'étape 3, faites glisser la sélection de haut en bas vers les bords de l'image, appuyez sur Enregistrer, puis sélectionnez une zone pour la vignette ronde. 
Étape 8
Nous devons maintenant créer la page intérieure. Comment faire cela est décrit en détail dans la leçon. Une autre manière alternative de créer une page intérieure est décrite dans la leçon "" aux étapes 5 et 6. 
Étape 9
Après avoir créé la page interne, nous pouvons y accéder. Pour ce faire, cliquez sur le menu déroulant du groupe (par défaut, cet élément s'appelle "Dernières nouvelles" - je l'ai renommé "Menu") et cliquez sur le lien "Menu". Après cela, nous irons à la page vierge nouvellement créée. 
Étape 10
Nous devons maintenant créer un menu graphique de cinq éléments. Pour ce faire, nous téléchargeons dans l'album de groupe nos cinq photos de l'étape 5. Nous cliquons sur l'icône de l'appareil photo et téléchargeons les images découpées depuis l'ordinateur. Les images seront stockées quelque part sur les serveurs VKontakte en référence au groupe, il n'est donc pas nécessaire de créer un album séparé pour les images coupées. Vous devez télécharger des images en mode de balisage Wiki. 
Étape 11
Maintenant en mode balisage wiki, nous allons créer un menu graphique. Il est très important de le créer en mode de balisage wiki (l'icône dans le coin supérieur droit de deux crochets triangulaires), et non en mode d'édition visuelle. Pour plus d'informations sur la création de code dans le balisage wiki, consultez les étapes 4 et 5 de la leçon "". Il existe également un modèle de code d'intégration. Si tout est fait correctement, vous devriez obtenir un menu graphique prêt à l'emploi, comme dans la figure ci-dessous. 
Étape 12
Maintenant, nous revenons à la page principale du groupe, prenons l'URL de notre page interne (elle devrait ressembler à ceci https://vk.com/page-78320145_49821289) et collez-la dans la fenêtre où les nouvelles sont créées. Une fenêtre devrait automatiquement être attachée avec un lien vers cette page très intérieure. Après cela, nous déplaçons le curseur sur l'inscription «Joindre» et attachons une photo au message, à savoir notre image à gauche de l'étape 3. Après cela, nous effaçons la ligne de l'URL de la page interne, en laissant un espace vide . Important! À cette étape, vous devez cocher la case (si de tels droits existent, cela s'applique principalement aux groupes avec un mur ouvert) dans la case "Au nom du groupe". Si cette case n'est pas cochée, l'enregistrement ne pourra pas être corrigé. À la fin, cliquez sur "Soumettre". 
Étape 13
Survolez les trois points à côté du titre du message et sélectionnez "Épingler" dans la liste déroulante. En conséquence, les nouvelles sont également détachées, si nécessaire. 
Étape 14
Il y a une nuance. Parfois, après avoir désépinglé une actualité, elle descend loin dans le fil, selon la date de création, et il peut être assez difficile de la retrouver. Par conséquent, il est préférable d'écrire immédiatement l'URL de la nouvelle épinglée quelque part. Pour cela, déplacez le curseur sur l'heure de création de la news et cliquez sur le lien. 
Étape 15
Maintenant, nous mettons à jour la page principale du groupe. Notre menu graphique sera à côté de l'avatar en haut. Et quand on clique sur l'image, on arrive sur la page interne avec un menu de cinq items. 
Et aujourd'hui, j'ai décidé de continuer ce sujet et de parler de la façon de créer Menu graphique VKontakte. Après tout, tous les webmasters qui souhaitent concevoir magnifiquement leur groupe ne seront pas satisfaits du menu textuel. Maintenant, peut-être, un menu graphique est plus pertinent, puisque diverses images sont bien mieux perçues par les visiteurs que des liens textuels. Oui, et avec l'aide de graphiques, vous pouvez vraiment modeler quelque chose de beau et de coloré.
Où commencer?
Eh bien, bien sûr, cela vaut la peine de commencer par la sélection de graphiques appropriés ou de dessiner un menu à partir de zéro. Bien sûr, tout le monde ne peut pas dessiner un menu à partir de zéro. Mais le problème est résoluble, car le World Wide Web regorge de divers graphiques, gratuits et payants, avec lesquels vous pouvez mettre en œuvre votre plan. A ce stade, je n'entrerai pas dans les détails, car il n'est pas difficile de trouver des images sur le net, et je ne sais pas dessiner. Je vais commencer tout de suite par le fait que nous avons déjà des graphismes adaptés, mais que faire ensuite n'est pas clair ?
Après avoir téléchargé ou dessiné le menu, vous devez le couper. Pourquoi est-ce? Ceci est nécessaire pour créer des liens séparés pour une image particulière. Puisque, si notre menu est mis complètement dans un groupe, alors plus d'un lien ne peut pas être fait, ou je ne sais pas quelque chose. De plus, notre menu doit être redimensionné, c'est-à-dire qu'il convient immédiatement de considérer que la largeur visible maximale est de 388 pixels (une image), et le reste sera soit recadré, soit ajusté aux tailles que vous spécifiez lors de la création du menu dans le groupe, tandis que l'image peut s'étirer ou se rétrécir, ce qui peut ruiner l'idée originale. Il convient également de considérer que, par exemple, pour un menu horizontal, il faudra se concentrer sur une largeur égale à 370 pixels, sinon le menu ne s'alignera pas horizontalement.
Donc, je vais montrer, par exemple, les boutons les plus courants. Je ferai toutes les manipulations avec les graphiques à l'aide de Photoshop, je vous recommande donc de l'utiliser. Après avoir déterminé les dimensions, il reste à couper le menu. Pour ce faire, vous pouvez utiliser l'outil pratique "coupe".
Sélectionnez simplement les zones nécessaires avec ces outils, par exemple :
Et économisez, pour les appareils Web.
Dans la fenêtre qui apparaît, nous pouvons sélectionner le format de l'image, sa qualité et bien plus encore. Dans ce cas, je choisirai le format : JPEG et la meilleure qualité, et laisserai le reste tel quel, et enregistrerai le menu graphique de VKontakte.
Allons à notre page de groupe. Et nous faisons quelques actions préparatoires : Dans le community management, connectez les "matériels", sauvegardez. Si quelque chose n'est pas clair à ce stade, alors lisez l'article sur le menu texte de VKontakte, tout y est détaillé, on en parle.
Après cela, nous devons télécharger nos photos que nous avons reçues lors de la coupe du menu. Autrement dit, cliquez sur "ajouter des photos".
Une fois les images chargées, nous pouvons commencer à créer le menu. Pour cela, cliquez sur "modifier", à côté des dernières actualités.
Et maintenant, nous pouvons ajouter notre code de menu. Dans mon cas, cela ressemblera à ceci:
Alors, regardons de plus près ce qui est quoi ici:
photo-48249652_297601976 - le chemin vers notre photo. Le chemin est formé comme suit : numéro d'album_numéro de la photo elle-même. Comment trouver le chemin vers notre image ? Tout est très simple. Nous allons dans l'album photo dans lequel se trouvent nos images et cliquez sur l'image souhaitée. Ensuite, dans la barre d'adresse, nous verrons le chemin complet vers notre image.
130x46px;pas de rembourrage; - options d'image : 130x46px ; - la largeur et la hauteur de notre image (peuvent différer de la taille de l'image elle-même) - il n'est pas nécessaire de spécifier pour le menu vertical dans VKontakte ; pas de rembourrage ; — pas d'espaces — lorsque vous utilisez cette option, tous les espaces (retraits) sont supprimés et les images sont fusionnées en une seule.
C'est ce que j'ai fait:
Le menu horizontal de VKontakte est fait à cause du même principe. La seule différence est que lors de l'écriture de code, les nouveaux éléments de menu n'ont pas besoin d'être enveloppés sur une nouvelle ligne. Et aussi, n'oubliez pas qu'avec cet agencement d'images, on ne peut utiliser que 370 pixels de largeur. J'ai légèrement corrigé le code ci-dessus et voici ce que j'ai:
[][][]
Et voici à quoi ça ressemble:
Et je voudrais également ajouter : Il y a des situations où nous devons insérer une image dans le menu, mais cela ne devrait pas être un lien. Il doit servir de décoration. Pour ce faire, utilisez simplement l'option "nolink". Voici un bon exemple : Le même menu horizontal, seul le premier bouton n'est pas un lien actif, mais une simple image.
[][][]
Eh bien, c'est essentiellement tout. Comme vous pouvez le constater, créer un menu graphique VKontakte n'est pas difficile, le plus important est de le dessiner. Et puis, en utilisant toutes les connaissances acquises dans cet article, vous pouvez créer le meilleur menu pour votre groupe VKontakte. Et je tiens à noter que les menus horizontaux et verticaux peuvent être combinés, obtenant ainsi une unicité absolue.
Désormais, toutes les manipulations dans les groupes Vkontakte (menu, navigation, pagination, actualités, etc.) seront beaucoup plus faciles à effectuer, pour cela, il suffit d'étudier mon VidéoCours sur les secrets techniques des groupes Vkontakte. Vous avez demandé des cours vidéo et j'ai enregistré tout un cours vidéo - prenez-le !!!
Expériences réussies !
Bonjour chers amis, ces derniers temps, si vous avez pu le remarquer, j'ai beaucoup écrit sur le réseau social Vkontakte et sa sagesse ! Ne soyez pas surpris, je ne vais pas encore changer ma direction principale - être une feuille de triche pour moi-même, et pour les gens, bien sûr ! 🙂
Simplement, j'ai écrit une série d'articles, et j'ai commencé à recevoir de nombreuses lettres avec diverses questions. Maintenant, je dois développer un peu le sujet de la création de menus en groupes et publics sur Vkontakte, afin d'économiser mon temps précieux et de ne pas imprimer plusieurs fois les réponses aux mêmes questions de mes lecteurs.
Donc, aujourd'hui, je veux dire - comment gérer votre compte Vkontakte plus habilement, et bien sûr,comment vous pouvez faire n'importe quel menu dans le groupe et public Vkontakte. Il n'y a pas si longtemps, grâce à une bonne personne - Marina Lazareva et son article " VKopt - qu'est-ce que c'est et pourquoi les administrateurs de VKontakte en ont-ils besoin ? , j'ai entendu parler d'un petit script gratuit (VkOpt est l'abréviation du nom complet de Vkontakte Optimizer), qui a été créé pour faciliter l'utilisation du réseau social Vkontakte.
L'installation est élémentaire et ne prend qu'une minute de temps, des opportunités et de nouvelles fonctions qui n'étaient auparavant pas disponibles sur Vkontakte, tout un tas s'ouvre. Je vais sur le site officiel Vkontakte Optimize, choisis mon navigateur et installe l'extension de ce script.
Je n'oublie pas de fermer et d'ouvrir le navigateur pour lancer le script Vkontakte. Je me connecte à mon compte Vkontakte, où un signe apparaît avec gratitude pour l'installation du script et une offre pour sélectionner la langue de l'interface.
Il est intéressant de noter que ce script a été créé à l'origine en 2007 pour télécharger des vidéos, sur le réseau social Vkontakte, qui gagnait déjà en popularité.
Pour le moment, le script VkOpt peut faire beaucoup de choses et vise principalement à améliorer les fonctions d'interface pour les utilisateurs ordinaires, telles que le téléchargement de musique et de vidéos, le tri des amis, la possibilité d'ajouter, de modifier certaines informations sur les pages Vkontakte, y compris celles masquées. . Vous pouvez lire toutes les fonctions du script ici.
Mais j'étais plus intéressé par certaines des opportunités que ce script offre pour travailler sur Vkontakte, je vais essayer de les lister en images avec des commentaires.
C'est super que maintenant je n'ai plus besoin de cliquer sur l'écran à chaque fois pour voir les photos, il suffit de faire défiler avec la molette de la souris pour passer à la photo suivante. C'est très rapide et pratique, surtout lorsque vous faites défiler des milliers de photos et recherchez celles dont vous avez besoin en ce moment parmi elles.
De plus, sur le même onglet ci-dessous, grâce à Vkontakte Optimizer, des liens sont apparus, en cliquant dessus, j'ai accès à toutes les tailles de cette image ou photo créée par Vkontakte d'une petite icône à l'image maximale téléchargée. Dans la vie de tous les jours, Vkontakte présente des photos d'une largeur de 604 pixels. Toutes les copies s'ouvrent en taille réelle, où elles peuvent être facilement téléchargées.
Immédiatement, plusieurs boutons sont apparus, l'un d'eux est la recherche de copies Google. En cliquant dessus, vous pouvez très probablement trouver le véritable auteur de cette image ou photo, par exemple en cliquant sur ma photo - Google a trouvé une copie de cette photo, uniquement dans mon article sur le nord de la Thaïlande sur notre blog de voyage. De la même manière, vous pouvez vous informer sur l'utilisation non autorisée de votre photo par d'autres personnes. Et c'est aussi drôle - Google essaie de trouver des images de couleur similaire à la photo présentée.
Ensuite, je vais dans l'onglet mes groupes, des innovations sont également apparues ici, j'ai remarqué un nouveau bouton dans le coin supérieur droit, apparemment pour les personnes qui en ont marre de tout, ou qui aspirent à de grands changements. Il y a un bouton Quitter tout, c'est-à-dire. En un clic, vous pouvez quitter tous les groupes en même temps.
Ici, je clique pour voir les mises à jour et les dernières nouvelles, un bouton pour filtrer les nouvelles est apparu, vous pouvez supprimer les nouvelles qui contiennent des vidéos, des photos, des graffitis, des sondages, des liens, etc. Cela peut être très pratique lorsque vous cherchez quelque chose dans l'actualité, afin de ne pas être distrait par des choses inutiles.
Ci-dessus, il y avait des fonctions ordinaires que j'aimais personnellement, et maintenant, plus au point ! Trouver un exemple Groupes Vkontakte avec un beau design. Supposons que j'ai besoin de regarder les sources de conception de ce groupe et de faire quelque chose de similaire pour moi-même. Si vous cliquez sur le menu de ce groupe, vous obtenez une belle image - c'est l'une des options. Mais sur le côté droit du groupe, grâce au script Vkontakte Optimizer, un bouton est apparu -> Liste des pages Wiki.
Je clique sur la liste des pages Wiki, et j'obtiens le code source du balisage wiki, qui a été utilisé pour créer le menu de ce groupe Vkontakte.
Comme vous l'avez compris, afin de créer un menu similaire pour le groupe Vkontakte, j'ai déjà le code, et je n'ai même pas besoin d'étudier le balisage wiki, même si cela n'a encore dérangé personne !
Et maintenant, je n'ai tout simplement pas assez d'images source pour ce menu par exemple. Dans le même groupe, je trouve un album avec une photo, où se trouvent les sources du menu.
Chacune des images peut être téléchargée dans la taille originale présentée dans le menu. Quand j'ai toutes les sources du menu, il ne me reste plus qu'à exprimer ma reconnaissance mentale aux personnes qui ont fait le menu dans ce groupe, et commencer à travailler dans Photoshop sur mes sources aux mêmes dimensions.
Comme vous le comprenez, il n'y a pas de plagiat ici dans la mesure où je prends le code source du balisage wiki d'un certain auteur, l'idée avec la taille et l'emplacement des images dans le menu qu'il a créé dans le groupe ou public Vkontakte. Je n'apprends de cet auteur que sur son exemple précis. Après cela, je crée mes images dans Photoshop et mon menu.
Il s'avère que pour créer un menu dans un groupe ou un public Vkontakte de toute complexité, il suffit de savoir théoriquement, de trouver un exemple de menu complexe dans un public ou un groupe Vkontakte, et bien sûr, vous devez avoir des connaissances de création élémentaire et de mise en page d'images dans Photoshop. Tous les didacticiels Photoshop peuvent vous aider - posez cette question à Yandex, vous trouverez des milliers de réponses.
Je voulais également soulever une question, on m'a déjà demandé à plusieurs reprises s'il était possible de rendre public un Vkontakte un groupe Vkontakte? Je réponds - maintenant c'est possible, grâce au script Vkontakte Optimizer, un nouveau bouton apparaît dans le public - transfert vers un groupe. Je n'ai pas essayé cette opportunité, je n'en ai pas besoin. Bon, si j'ai bien compris, là il va falloir réinviter tous les abonnés au groupe, et s'il y en a des milliers, ce n'est pas très pratique !