Ils sont de plus en plus utilisés pour faire des affaires, vendre des biens ou des services. Excellent outil, ce qui simplifie le travail avec le groupe - il s'agit d'un menu créé à l'aide du balisage wiki.

DANS Dernièrement le nombre de publics qui utilisent la liste wiki a considérablement augmenté. Après tout, ceci très bon moyen donne au groupe une apparence plus agréable et esthétique, et aide également les participants à naviguer plus facilement dans toutes les sections.

Dans cet article, nous vous expliquerons comment créer une page wiki VKontakte pour un groupe, comment créer un menu dans un groupe VK, quels types il existe, comment le créer et bien plus encore.

Créer une page wiki cliquable est possible grâce au fait que éditeur de texte VK a la possibilité d'utiliser le balisage wiki. Il vous permet d'utiliser équipes spéciales insérez des images, des liens vers celles-ci, des vidéos et d'autres éléments.

La liste vous permet de créer des liens directs vers chaque catégorie de produit/service ou vers différentes sections/discussions de la communauté (par exemple, portfolio, comment commander, sur l'entreprise, etc.). Tout utilisateur peut trouver information nécessaire en appuyant sur un seul bouton.

Cette solution est un navigateur pour les visiteurs ordinaires et constitue un design magnifique et élégant pour la communauté. Il s'agit d'un outil interactif grâce auquel, les gens seront satisfaits.

Malheureusement, les développeurs de VK n'ont pas encore créé la possibilité de publier une liste wiki sur la page wiki principale du public (pour l'instant, elle n'est disponible que dans un nouvel onglet). Par conséquent, les gens sont obligés d’être sophistiqués et de créer des publications distinctes menant à une page de menu.

Commandes et fonctionnalités de base du menu wiki

La fonctionnalité de la page wiki est très large. Avec son aide, vous pouvez rendre votre menu visuellement agréable, facile à lire et structuré.

Malheureusement, nous ne pourrons pas intégrer absolument toutes les équipes dans notre matériel, nous n’en parlerons donc que de quelques-unes.

Créer un menu à l'aide de fichiers multimédias

Cela se fait à l'aide de boutons spéciaux.

DANS forme de texte les fichiers multimédias sont : [​].

Où média XXXX_YYYY est le fichier multimédia lui-même, les options sont divers paramètres(pour les photos et vidéos), lien–inscription qui s’affichera lorsque vous passerez le curseur sur la photo/vidéo.

Pour les options photo, il y a :

Pour la vidéo :

Nous créons des titres de différents niveaux en utilisant les signes ==

Ajoutez des signes "==" au début et à la fin du titre. Voir la capture d'écran pour un exemple :

Travailler avec le texte du titre pour concevoir un menu de groupe VKontakte

Vous pouvez également utiliser les options de texte suivantes : italique, gras ou gris, barré ou souligné, exposant ou indice. Il est également possible d'aligner le texte au centre ou à droite. Vous trouverez ci-dessous un tableau avec les commandes :

Utiliser des citations pour attirer l'attention

L’utilisation d’une balise vous permettra de concevoir magnifiquement la citation de quelqu’un.

Les listes peuvent être numérotées ou à puces.

Pour une liste numérotée, utilisez le symbole "#" avant chaque nouvel élément.

Pour une liste à puces, similaire à la précédente, uniquement avec le signe « * ».

Travailler avec des indentations

Pour mettre en retrait, ajoutez un signe « : » avant le mot. Selon le nombre de caractères, l'indentation augmentera ou diminuera.

Liens internes dans le menu du groupe

Ce sont des liens vers des ressources sociales internes. Réseau VKontakte (lien vers personne, communauté, discussion, application, page, vidéo et image). Ils sont ajoutés en utilisant la construction suivante : [].

Liens externes dans la création d'un menu VKontakte.

Le balisage wiki crée un menu de table

En utilisant la page wiki et le balisage, vous pouvez également créer un tableau. Voir capture d'écran :

Spoiler informatif

Avec son aide, vous pouvez masquer ou révéler des informations en un seul clic. Bien adapté si vous avez besoin de créer une section avec « Questions fréquemment posées ».

Un spoiler est créé en utilisant le design :

((Caseur|Nom du spoiler
Texte
}}

Et cela ressemblera à ceci :

Ainsi, les équipes contribueront à dresser une liste complète avec tous les éléments de conception.

Types de menus : quels sont-ils ?

Les pages wiki sur VKontakte peuvent être divisées selon différents critères :

• Texte (texte uniquement) ;
• Graphique (utilisant des images de boutons, d'arrière-plans, etc.).

Par affichage (selon l'image utilisée) :

• Z couvert (la structure elle-même n'est pas visible) ;

• Ouvert (tous les éléments sont visibles en même temps) ;

• Avec une bannière adjacente ou commune (peut être ouverte ou fermée).

Quel que soit le type que vous choisissez, ils fonctionnent tous sur le même principe.

N’ayez pas non plus peur de combiner ces types. Par exemple, vous pouvez d'abord réaliser une partie graphique avec des boutons (fond, style, design), puis la compléter avec divers informations textuelles(par exemple, « Questions fréquemment posées », en utilisant des spoilers).

Comment créer un menu texte

Moins populaire et plus simple est liste de textes sur la page wiki. Il ne contient aucune image ni bouton. Ceci est juste une liste de liens d'ancrage.

Ci-dessous se trouve instruction étape par étape comment créer une liste de textes pour un groupe VK :

1. Vous devez d’abord créer une communauté. Pour cela, rendez-vous dans « Community Management » et sélectionnez la section « Sections ». Recherchez la ligne « Matériaux », sélectionnez « Restreint » et enregistrez les paramètres.

1. Ensuite, sur la page principale de la page publique apparaîtra « Dernières nouvelles" Allez-y et cliquez sur "Modifier".

1. Entrez le nom.
2. Vous trouverez ci-dessous l'éditeur de texte VK. C'est ici que nous allons créer notre liste.
3. Utilisez la construction suivante :

Effectuez toutes les démarches nécessaires. Chaque nouvel article avec nouvelle ligne. Ici, vous pouvez utiliser diverses commandes, dont nous avons parlé plus haut.

Par exemple, nous écrirons une construction simple et petite :

1. Cliquez sur Enregistrer.

Ici, nous avons utilisé les signes « == » pour mettre en évidence le titre et les signes « * » pour mettre en évidence les sous-clauses. En conséquence, nous avons obtenu ce qui suit :

Ainsi, après avoir effectué seulement quelques étapes, nous avons reçu un menu wiki tout à fait compréhensible, où chaque élément vous permettra d'accéder rapidement à la page souhaitée.

Vous pouvez ajouter tout ce que vous voulez, à condition que votre imagination et vos capacités de balisage wiki soient suffisantes.

Comment créer un menu graphique

Pour créer un menu graphique, vous devez avoir au moins des compétences de base pour travailler avec des éditeurs graphiques (tels que Photoshop, GIMP, diverses applications etc.). Si vous ne les avez pas, nous pouvons vous conseiller de faire appel à des professionnels ou à des ressources avec modèles prêts à l'emploi(lire la suite ci-dessous).

Ici, nous parlerons de la façon de créer vous-même un menu de page wiki. Vous trouverez ci-dessous des instructions étape par étape :

1. Suivez les étapes 1 à 3 des instructions précédentes.
2. Il est nécessaire de créer des images vierges avec des boutons. Nous ne parlerons pas en détail du travail dans les éditeurs graphiques, car il existe de nombreuses leçons sur l'utilisation de Photoshop et d'autres programmes sur Internet.
   Nous prendrons les images suivantes.

Les trois images font partie d’une seule grande. Par conséquent, lorsque nous créons une navigation, ces images ressembleront à une seule image entière avec des boutons situés dessus.

1. Téléchargez des images dans l'éditeur de texte VKontakte.

1. En cliquant sur chaque image, vous pouvez sélectionner des options et fournir un lien.

1. Sur la droite, il y a un commutateur entre le visuel et modes texteédition.

1. Sous forme de texte, nos images ressemblent à ceci :

1. Nous changeons l'inscription « noborder » en « nopadding » pour supprimer la distance entre les images et les rapprocher. Et après le signe « | » ajouter un lien.

1. Cliquez sur « Enregistrer la page ».

En conséquence, nous avons obtenu ce menu :

Avec un peu d'effort et d'ingéniosité, vous pouvez créer un design original qui s'intégrera dans la conception globale du groupe.

Comment sécuriser

Pour que le menu wiki créé soit affiché sur la page principale de la communauté, vous devez suivre les étapes suivantes :

1. Créez un nouveau message.
2. Copiez le lien de votre menu. Pour ce faire, accédez à nouveau à l'édition et copiez l'URL depuis la barre d'adresse du navigateur.

Ajoutez d’abord une image, voir l’image ci-dessous.

Maintenant, publiez et épinglez le message.

Ici, vous devrez travailler dur sur l'image. Après tout, il sera visible en permanence, il devra également s'intégrer dans la conception globale du public et indiquer aux utilisateurs qu'en cliquant, ils seront redirigés vers le menu.

Comment supprimer

Supprimer le menu wiki n'est pas tâche difficile. Allez simplement dans la section « Gestion de la communauté », « Sections » et désactivez les documents.

Il est important de se rappeler que si vous avez utilisé une publication épinglée, elle restera. Par conséquent, il devra également être supprimé (ou au moins supprimé de ceux épinglés).

Modèles prêts à l'emploi

Nous souhaitons également présenter à votre attention des services qui vous aideront à télécharger des modèles prêts à l'emploi ou à en créer de nouveaux en quelques clics.

• You-ps.ru est un service avec des modèles de menu wiki prêts à l'emploi et d'autres éléments de conception communautaire prêts à l'emploi.

• Vkmenu.com est un constructeur en ligne. Il vous permet de créer facilement et rapidement des menus élégants.

Aussi pour solutions prêtes à l'emploi Cela inclut l’embauche d’un professionnel. Dans ce cas, vous n'êtes pas non plus obligé de tout faire vous-même, mais vous devrez payer.

Conclusion

Nous avons examiné ce qu'est un menu wiki dans les communautés VKontakte. Nous avons appris à le créer et à utiliser diverses commandes.

Nous pensons que le menu n'a pas encore été pleinement apprécié. Pour grande quantité Pour les gens, ce « balisage wiki » est quelque chose de super complexe et effrayant. Ils ne veulent même pas s'en charger. Mais en réalité, comme on le voit, tout est assez simple.

N'ayez pas peur d'expérimenter et d'être original !

Bonjour chers amis, ces derniers temps, si vous l'avez peut-être remarqué, j'écris beaucoup sur le réseau social VKontakte et sa sagesse ! Ne soyez pas surpris, je ne vais pas encore changer d'orientation principale : être un blog pour moi et pour les gens, bien sûr ! 🙂

Simplement, j'ai écrit une série d'articles et j'ai commencé à recevoir beaucoup de lettres avec diverses questions. Maintenant, je dois développer un peu le sujet de la création de menus dans les groupes VKontakte et les pages publiques afin de gagner un temps précieux et de ne pas imprimer à plusieurs reprises les réponses aux mêmes questions de mes lecteurs.

Alors aujourd'hui, je veux vous dire - comment gérer plus habilement votre compte VKontakte, et bien sûr,comment créer n'importe quel menu dans un groupe VKontakte et public. Il n'y a pas si longtemps, grâce à un à 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 découvert un petit script gratuit (VkOpt est l'abréviation de nom et prénom Vkontakte Optimizer), créé pour faciliter l'utilisation du réseau social Vkontakte.

L'installation est simple et ne prend qu'une minute, tout un tas d'opportunités et de nouvelles fonctions jusqu'alors indisponibles sur VKontakte s'ouvrent. Je vais sur le site officiel Vkontakte Optimize, sélectionne mon navigateur et installe l'extension de ce script.

Je n'oublie pas de fermer et d'ouvrir le navigateur pour démarrer le script VKontakte. Je me connecte à mon compte VKontakte, où un panneau apparaît me remerciant d'avoir installé le script et me demandant de choisir une langue d'interface.

Il est intéressant de noter que ce script a été créé en 2007 pour télécharger des vidéos, qui gagnaient déjà en popularité. réseau social En contact avec.

Sur ce moment le script VkOpt peut faire beaucoup de choses et vise principalement à améliorer les fonctions de l'interface pour utilisateurs ordinaires, comme le téléchargement de musique et de vidéos, le tri des amis, la possibilité d'ajouter et 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 possibilités offertes par ce script pour travailler sur VKontakte, je vais essayer de les lister en images avec des commentaires.

C’est génial de ne plus avoir à cliquer avec la souris sur l’écran à chaque fois pour voir les photos ; il me 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 que parmi elles vous cherchez celles dont vous avez besoin en ce moment.

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 d'une image donnée ou d'une photo créée par Vkontakte, d'une petite icône à l'image maximale téléchargée. Au quotidien, 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 permettant de rechercher des copies de Google. En cliquant dessus, vous pourrez très probablement trouver le véritable auteur de cette image ou photographie, 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 renseigner 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 similaires dans Schéma de couleur sur la photo présentée.

Ensuite, je vais dans l'onglet mes groupes, des innovations sont également apparues ici, dans le coin supérieur droit j'ai remarqué un nouveau bouton, apparemment pour ces gens qui en ont marre de tout, ou qui ont faim de grands changements. Il y a un bouton appelé 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 actualités, un bouton de filtrage des actualités est apparu, vous pouvez supprimer les actualités qui contiennent des vidéos, des photos, des graffitis, des sondages, des liens, etc. Cela peut être très pratique lorsque vous recherchez quelque chose dans l'actualité, afin de ne pas vous laisser distraire par des choses inutiles.

Ci-dessus se trouvaient des fonctions ordinaires que j'ai personnellement appréciées, et maintenant, plus près du sujet ! je trouve un exemple Groupes VKontakte avec un beau design. Supposons que je doive examiner le code source pour la conception de ce groupe et faire quelque chose de similaire pour moi-même. Si vous cliquez sur le menu de ce groupe, vous obtenez une jolie 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 source Balisage wiki, qui a été utilisé pour créer le menu de ce groupe VKontakte.

Comme vous l'avez compris, pour créer un menu similaire pour un 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 jamais dérangé personne !

Et maintenant, je n’ai tout simplement pas assez d’images sources pour ce menu par exemple. Dans le même groupe, je trouve un album avec des photos, où se trouvent les sources du menu.

Chacune des images peut être téléchargée dans sa taille originale présentée dans le menu. Quand j'ai toutes les sources du menu, tout ce que je peux faire c'est exprimer mentalement ma profonde gratitude aux personnes qui ont réalisé le menu de ce groupe, et commencer à travailler dans Photoshop sur mes sources de 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 de la taille et de la disposition des images dans le menu qu'il a créé dans un groupe ou une page publique sur VKontakte. J'apprends juste de cet auteur sur son exemple spécifique. 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 connaître 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 de base 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 aussi aborder une question, on m'a déjà demandé à plusieurs reprises s'il était possible de faire d'un groupe public VKontakte un groupe VKontakte ? Je réponds - il est désormais possible, grâce au script Vkontakte Optimizer, d'apparaître en public nouveau bouton- transfert en groupe. Je n’ai pas tenté cette opportunité, je n’en avais pas besoin. Bon, si je comprends bien, vous devrez réinviter tous les abonnés au groupe, et s'il y en a des milliers, ce n'est pas très pratique !

Étape 1
Tout d’abord, allez dans votre groupe et dans le bloc « Dernières nouvelles » (dans ce cas, je l’ai renommé « Menu ») cliquez sur le lien « Modifier », qui apparaît lorsque vous le survolez. Important! Tout d'abord, vous devez avoir exactement Groupe ouvert, pas Page. Parce qu’il n’existe tout simplement aucun élément de ce type sur la page. Et deuxièmement, dans le menu Community Management > Information > Materials, l’élément « Ouvrir » doit être sélectionné.

Étape 2
Dans l'onglet « Édition », écrivez la phrase [[Théorie de la conception Web]], entre doubles crochets. Cliquez ensuite sur le bouton « Enregistrer la page ».

Étape 3
Après cela, un lien « Aperçu » apparaîtra à côté du bouton, cliquez dessus. Un aperçu de notre menu s'ouvrira ci-dessous, où nous voyons le lien « Théorie de la conception Web » apparaître ci-dessous.

Étape 4
Cliquez sur ce lien et accédez à la page créée intitulée « Web Design Theory ». Cliquez ensuite sur le lien « Remplir avec du contenu ». Ensuite, nous modifions le texte comme dans un éditeur de texte classique - insérons des images, des textes, des vidéos et d'autres objets. Dans ce cas, notre page créée aura une URL comme https://vk.com/page-15865937_43819846.

Manière alternative de créer une page interne
Manger manière alternative création de pages. Il s'adresse principalement au public ( pages publiques), puisque la méthode décrite ci-dessus ne leur convient pas. Pour ce faire, nous utiliserons le code suivant
http://vk.com/pages?oid=-XXX&p=Page_Name
où au lieu de XXX nous remplacerons l'identifiant de notre groupe, et au lieu du texte « Nom de la page », nous écrirons Menu. Nous devons maintenant connaître l'identifiant du groupe. Comment faire? Allons à page d'accueil groupe et regardez nos messages sur le mur - juste sous le bloc "Ajouter un message", il sera écrit "Tous les messages" - cliquez sur ce lien.

Nous allons à la page et voyons une URL comme celle-ci https://vk.com/wall-78320145?own=1, où les chiffres sont 78320145 dans dans cet exemple et il y a l'identifiant du groupe. Nous remplaçons nos données dans le code source et obtenons un enregistrement comme celui-ci : http://vk.com/pages?oid=-78320145&p=Menu(avec vos numéros !). Collez cette ligne dans la barre d'adresse du navigateur et appuyez sur Entrée. C'est ainsi que nous avons créé nouvelle page En contact avec.

Désormais, les groupes VKontakte et les pages publiques utilisent des outils de conception visuelle. Grâce à cette opportunité apparence et la conception du groupe devient plus esthétique. Ce matériel décrira en détail comment créer un menu dans un groupe VKontakte.

Pourquoi avez-vous besoin d'un menu de groupe ?

Tout d'abord, le menu est élément utile pour les groupes commerciaux. Avec son aide, les utilisateurs n'auront aucun problème de navigation. Toutes les informations nécessaires seront placées dans ce bloc. Sur le réseau social VKontakte, la gestion du groupe est structurée de telle manière que tout le matériel précédemment publié soit contenu dans le flux. Le seul possibilité de trier est de créer des sujets dans la section « Discussion ». Mais ce n'est pas non plus tout à fait pratique, car le sujet ne se limite pas à un seul article, où toutes les informations sont collectées, et pour trouver l'article nécessaire, vous devez faire défiler les pages pendant longtemps.

Il est beaucoup plus pratique de construire une structure claire où tous information utile et divisé en blocs thématiques séparés. Cette capture d'écran est un bon exemple de menu graphique interactif, où toutes les publications utiles sont placées dans un bloc séparé. Ceci est pratique et ne nécessite pas que l'utilisateur effectue des actions supplémentaires sur la page.

En résumé, nous pouvons conclure que le menu est une nécessité pour une communauté en développement. C'est pratique aide à la navigation, qui permet aux utilisateurs de trouver les informations nécessaires sans faire défiler le flux et d'accéder rapidement à la section souhaitée du groupe. Il est préférable d'utiliser un menu cliquable pour les groupes vendant des biens et services.

Menu fermé et ouvert

Pour le moment, le menu VKontakte peut être divisé en plusieurs types et types, nous examinerons ensuite chacun d'eux plus en détail.

Les types:

• texte (la structure est constituée de liens texte) ;
• graphique (utilise le multimédia, les boutons actifs, etc.).

Types :

Créer un menu texte

Ce type de menu ne nécessite aucune connaissance ni outil supplémentaire. Créer un menu texte dans un groupe sur VK est assez simple, pour cela nous utiliserons la fonctionnalité du réseau social. Il n'utilise pas de boutons, de styles, etc. Le menu texte est une liste composée de liens d’ancrage.

Instructions étape par étape :

La procédure de création d'un menu texte ne nécessitera pas connaissances particulières et des compétences. Par conséquent, cette option convient particulièrement aux utilisateurs inexpérimentés. Avant de placer une section sur la page principale, assurez-vous de testez-le et optimisez-le pour que la navigation fonctionne correctement.

Menu graphique

Passons à l'un des plus des moyens compliqués création. Pour ce faire, nous devrons utiliser outils supplémentaires– graphique Éditeur Photoshop. Nous donnerons ensuite Description détaillée processus étape par étape création d'un menu graphique à l'aide d'un logiciel supplémentaire.

Instructions étape par étape :

• Vous devez d'abord lancer l'éditeur graphique Photoshop ;
• puis cliquez sur « Fichier » et « Créer" Nous précisons les paramètres suivants : « Largeur » (Wight) 610 pixels, « Height » (Hauteur) 450 pixels et « Résolution » (Résolution) 100 pixels par pouce ;
  
• après cela, il apparaîtra nouveau document, à l'endroit où vous souhaitez faire glisser l'image d'arrière-plan ;
  
• vous devrez ensuite étirer l'image pour couvrir la zone blanche ;
• plus loin dans le panneau " Couches" Cliquez sur clic-droit passez la souris sur l'image et dans la fenêtre contextuelle sélectionnez " FusionnerVisible» (fusionner les visibles) ;
• Rectangle» et créez des boutons en déplaçant le curseur sur l'image et en traçant les limites de la figure ;
• dans la partie supérieure de la zone de travail, vous pouvez sélectionner un remplissage pour le bouton, le paramètre « Remplissage » ;
• après cela, revenez à la barre d'outils et sélectionnez " Texte»;
• puis cliquez sur le bouton pour ajouter un champ pour saisie de texte et entrez un nom pour le bouton. À votre discrétion, vous pouvez choisir la police, sa taille et sa couleur pour rendre la section plus élégante ;
  
• à centrer le texte selon l'image, sélectionnez le calque avec le texte et l'image souhaitée en maintenant la touche « Ctrl » enfoncée, et cliquez alternativement sur les boutons d'alignement sur panneau du haut outils;
• après cela, nous devons couper l'image résultante ;
• dans la barre d'outils, sélectionnez " Recadrage"(Recadrage) et "Coupe" ;
• Sélectionnez chaque bouton et ouvrez « Fichier », « Exporter », « Enregistrer pour le Web ». Définissez le format de fichier enregistré sur « PNG24 » ;
  

C'est le travail dans éditeur graphique complètement terminé. Nous revenons à l'éditeur de texte du réseau social, où nous avons configuré le menu texte dans la section précédente.

Instructions pour travailler avec menu graphique En contact avec:

Le menu créé est épinglé comme une entrée normale. En cliquant sur le bouton Épingler.

Bases du balisage wiki

Ensuite, nous examinerons les bases de l'utilisation du balisage Wiki dans le développement d'un menu pour un groupe sur un réseau social. Le balisage wiki VKontakte est un langage utilisé pour formater le texte sur les sites Web et permet un accès plus facile aux fonctionnalités. Langage HTML. Examinons ensuite les principales commandes disponibles sur le réseau social.

Conception de menus utilisant le multimédia

La commande texte pour les fichiers multimédia est la suivante : « [​]. Regardons cela plus en détail : « mediaXXXX_YYYY » (le fichier lui-même), « options » (paramètres spécifiés), « lien » (est un texte contextuel qui s'affichera lorsque vous passerez le curseur sur un objet).

Possibilités pour le multimédia sont affichés dans la capture d'écran :

Possibilités pour la vidéo ressemble à ca:

Titres (H1, H2, H3)

Afin d'ajouter un titre, vous devez mettre les signes « == » suivants au début et à la fin du texte. Voir la capture d'écran pour un exemple :

Formatage du texte

Pour le formatage du texte, VKontakte propose les options suivantes : caractère gras, italique, aligné à droite et à gauche, aligné au centre, liste à puces, titres, exposants, indices, soulignés et barrés. Plus paramètres détaillés sont présentés dans la capture d'écran.

Citations

Pour attirer l'attention du public, vous pouvez utiliser des citations, une balise pour ce paramètre Ressemble à ça: "".

Exemple d'utilisation dans l'éditeur de texte VKontakte :

Listes

Les utilisateurs peuvent utiliser des listes à puces et numérotées. Une liste numérotée est indiquée par un "#" suivi d'un "*".

Exemple numéroté liste:

Exemple étiqueté liste:

Comment mettre en retrait

Tout ici est assez simple, avant avec le bon mot il faut ajouter le signe « : ». Plus il y a de caractères placés, plus l'indentation sera grande.

Liens internes

Les liens internes sont des transitions vers d'autres éléments du réseau social : profil utilisateur, communauté tierce, chat, photo, vidéo, article, etc. L’ajout d’un lien interne se fait à l’aide de la balise « []. Regardons de plus près : « lien » est un lien, « texte » est le texte affiché.

Exemple:

Comment créer un tableau

En utilisant le balisage wiki, les utilisateurs peuvent créer objet de table, les commandes suivantes sont utilisées pour cela :

Ajout d'un spoiler

Cet élément peut masquer des informations qui seront révélées en cliquant de manière appropriée sur un bouton spécial. Cette option de publication d'informations est parfaite pour la section groupe « Règles », « Foire aux questions », etc.

Pour créer un objet, utilisez la construction suivante :

((Cacher|Texte du titre ))

Comment supprimer un menu

La suppression s'effectue comme suit :

Suppression via le formatage de la page :

De nombreuses demandes de mes lecteurs persistants et simplement utilisateurs curieux ont fait leur effet. J'ai enfin créé une leçon dans laquelle nous allons apprendre à créer un menu VKontakte dynamique avec l'effet de boutons enfoncés ! Par analogie avec les sites Internet ordinaires, lorsqu'un lien visité est marqué d'une manière particulière (bouton enfoncé, souligné, etc.) - nous créerons le même design sur VKontakte, en utilisant les pages créées et la conception graphique. Pour commencer, nous créerons des modèles graphiques dans Photoshop - nous créerons un en-tête de menu et deux types de boutons. Ensuite, nous créerons plusieurs pages VKontakte, en fonction des éléments de notre menu. Et enfin, nous ferons une astuce délicate, qui, en fait, créera l’illusion de suivre le lien. La leçon est assez complexe et convient à ceux qui ont confiance dans les fonctionnalités de Vkontakte. Je vais effectuer toutes les manipulations à l'aide d'un exemple votre groupe VKontakte, où cet effet est réalisé en direct. Alors, mettons-nous au travail !

Étape 1. Créez un en-tête de menu dans Photoshop
Créez un document dans Photoshop d'une largeur de 600 pixels. La hauteur peut être différente, à votre discrétion. Vous pouvez placer n'importe quelle photographie, collage, bannière d'information, etc. spécifique dans l'en-tête. images graphiques. Dans ce cas, j'ai utilisé celui-ci bannière publicitaire taille 600x172 pixels.

Étape 2. Créez une barre de navigation dans Photoshop
Nous devons maintenant créer une barre de navigation. Dans cet exemple, j'ai utilisé uniquement du texte comme boutons. Mais à votre discrétion, vous pouvez créer des boutons colorés et écrire du texte dessus. Nous faisons ceci : créez un rectangle de 600 x 56 pixels dans Photoshop et dans ce cas, remplissez-le de blanc. Ensuite, nous écrivons des éléments de menu sur la ligne - environ 5 à 6 éléments, pas plus. Grande quantité les articles auront l’air pressés.

Étape 3. Créez une barre de navigation enfoncée dans Photoshop
Nous devons maintenant créer des liens actifs, comme si on avait cliqué dessus. J'ai utilisé un soulignement normal, mais vous pouvez utiliser un texte ou une couleur d'arrière-plan différente pour marquer le lien visité.

Étape 4. Découpez des images prêtes à l'emploi
Sur à ce stade nous devons couper les images des étapes 2 et 3. Nous devrions avoir deux ensembles de cinq boutons chacun - un bouton sans soulignement, l'autre bouton avec soulignement. Les boutons de chaque élément individuel (avec et sans soulignement) doivent être même taille. L'image ci-dessous montre tous nos conception graphique- dix boutons et un en-tête de menu.

Étape 5. Créez une page de menu VKontakte
Passons maintenant à VKontakte. Notre tâche est de créer page séparée appelé "Menu". Pour ce faire, nous utiliserons le code suivant
http://vk.com/pages?oid=-XXX&p=Page_Name
où au lieu de XXX nous remplacerons l'identifiant de notre groupe, et au lieu du texte « Nom de la page », nous écrirons Menu. Nous devons maintenant connaître l'identifiant du groupe. Comment faire? Nous allons sur la page principale du groupe et regardons nos publications sur le mur - juste sous le bloc "Ajouter une publication", il sera écrit "Tous les publications" - cliquez sur ce lien.

Étape 6. Déterminez l'identifiant du groupe et modifiez le code
Nous allons à la page et voyons une URL comme celle-ci https://vk.com/wall-78320145?own=1, où les nombres 78320145 dans cet exemple sont l'identifiant du groupe. Nous remplaçons nos données dans le code source et obtenons un enregistrement comme celui-ci :
http://vk.com/pages?oid=-78320145&p=Menu(avec vos numéros !). Collez cette ligne dans la barre d'adresse du navigateur et appuyez sur Entrée. Nous avons donc créé une nouvelle page VKontakte et au départ elle ressemble à ceci.

Étape 7. Créez les pages de navigation VKontakte restantes
De la même manière, nous créons quatre pages de navigation supplémentaires : Prix, Comment commander, Spécifications techniques et Questions. C'est-à-dire que nous copions le code correspondant quatre fois de plus dans la barre d'adresse du navigateur (avec vos numéros d'identification dans l'exemple ci-dessous, mes numéros) :

http://vk.com/pages?oid=-78320145&p=Prix

http://vk.com/pages?oid=-78320145&p=How_to commander

http://vk.com/pages?oid=-78320145&p=Spécifications techniques

http://vk.com/pages?oid=-78320145&p=Questions
Attention, dans le titre de la page de deux mots (Comment commander), l'espace entre les mots est remplacé par souligner Comment commander. Nous disposons désormais de cinq pages prêtes à l'emploi pour chaque élément de menu. Nous n'avons pas créé de page Portfolio car elle se trouve sur la page Menu

Étape 8. Téléchargez des photos sur la première page du menu
Sur celui créé, pas encore page blanche(voir étape 6) Menu cliquez sur le lien Modifier ou sur le lien Remplir avec du contenu. Après cela, nous voyons le panneau d'édition. Ici, nous devons cliquer sur l'icône de l'appareil photo avec la fonction Télécharger une photo. Important! Veuillez vous assurer que vous êtes en mode de balisage wiki. Le changement de mode est régulé par l'icône sur le bord droit de la page.

Étape 9. Résultat après chargement des images
Nous chargeons nos images que nous avons créées aux étapes 1 et 2. Après le chargement, nous voyons le code comme dans l'image ci-dessous et le menu lui-même ressemble à ceci. Après chaque modification de code, n'oubliez pas de cliquer sur Enregistrer la page, puis sur Aperçu pour afficher le résultat.

Étape 10. Modification du code de l'image
Notre tâche consiste maintenant à remplacer toutes les propriétés noborder par la propriété nopadding. Et mettez les dimensions réelles sur la première image, puisque VKontakte a réduit l'image à 400 pixels lors du téléchargement. Après tous les changements, nous devrions obtenir le code et le menu suivants.

Étape 11. Ajouter des liens vers des images
Nous devons maintenant mettre des liens pour chaque image. Le lien doit être inséré après nopadding| au lieu d'un espace avant les parenthèses fermantes. Pour la première image (en-tête de menu de l'étape 1), vous pouvez donner un lien vers la page principale du groupe, ou vous pouvez utiliser la propriété nolink (passée ; après nopadding sans espaces). Pour la deuxième carte, insérez l'adresse de la page de format page-78320145_49821289. C'est-à-dire l'URL complète de l'image https://vk.com/page-78320145_49821289, la première partie avec le domaine peut être omise. Mais pour les liens vers des sites externes, l’URL du lien doit être précisée au complet.

Étape 12. Copiez le code sur les pages de navigation restantes
C'est assez étape simple, nous copions le dernier code de l'étape précédente et le collons sur les pages créées restantes - Prix, Comment commander, Termes de référence et Questions. Nous sommes sur la page, cliquez sur Modifier ou Remplir avec du contenu (nous sommes en mode balisage wiki), collez le code et cliquez sur Enregistrer. Et puis aussi sur page suivante. Autrement dit, nous avons maintenant cinq pages sur chacune desquelles le menu est exactement le même. Mais vous pouvez déjà naviguer dans le menu - lorsque vous cliquez sur un lien, par exemple Prix, nous serons déplacés vers la page Prix, etc.

Étape 13. Créer un effet de bouton enfoncé
Nous devons maintenant changer une image sur chacune des cinq pages (remplacer le bouton sans soulignement par un bouton souligné). Par exemple, sur la première page du Menu, nous chargeons une nouvelle image puis remplaçons l'adresse de l'ancienne image dans le code par une nouvelle (soulignée en rouge). Ensuite, nous allons sur la page Prix, téléchargeons une photo avec les prix soulignés et modifions le code par l'adresse de la nouvelle photo. Ensuite on se rend sur les pages Comment commander, Termes de référence et Questions et on fait la même opération de la même manière.

Le final.
En conséquence, nous obtenons un effet de navigation lorsque vous cliquez sur un lien de menu et qu'il devient actif. Mais comme la conception graphique sur toutes les pages est presque la même, à l'exception du lien actif, l'illusion de navigation est créée, bien qu'il s'agisse en fait d'une transition vers une autre page.

Le menu ainsi conçu n'est pas adapté à appareils mobiles. Lorsque la taille de l'écran diminue, les images commencent à glisser les unes sous les autres. Afin de créer une conception réactive, vous devez utiliser des tables en version rigide. Mais ceci est une autre histoire et une technique plus avancée. En attendant, regardez diverses options conception graphique du menu.