Your repairman.  Finishing work, exterior, preparatory

I think that everyone who actively uses the social network Vkontakte has already met beautifully designed groups and publics. Many of them, in addition to the menu, also have a lot of stylized nested pages, directories, and so on, which essentially creates a small site right inside the social network.

Here are a few examples so that everyone understands what I'm talking about.




Such groups allow you to stand out from your competitors and attract more users. Especially if the content is interesting too :)
In this article, we will talk about how this is all done. In order to analyze everything in more detail and delve into all the subtleties, let's take a specific example. There will be a small master class on the design of groups.

The very first stage of our work is an idea. We need to understand what we want to tell and to whom. In contact there are several formats of communities and it is worth choosing taking into account the tasks set. Although in the future the group can be transferred to the public format and vice versa.

I explain with my fingers. Public It's something like a blog. Newsline. In other words, we tell our subscribers about some things and they will not be able to write on the wall of our community. Maximum comment.

Group allows you to create a community that is more open to conversation and discussion, where people can make posts in the feed on their own behalf. You can also add friends from your list to it. There is no such option in public. In addition, the group has a little more options for integrating wiki markup (there is a section "News" in which you can integrate the menu).

Globally, you can argue like this: if we need to create a community for the store, then I would take the “public” format. If we are talking, for example, about fishing enthusiasts, then it is better to take a “group”. Although, everyone is free to do as he sees fit. After all, at any time the format can be changed. However, keep in mind that Vkontakte introduces a restriction on changing the community format again and after the first time you will have to wait a few days until you can return everything back if necessary. Therefore, it is better to test the functionality before the group begins to fill with content.

As part of this master class, I will take the Mad Max game based on the movie of the same name, which was released just a couple of weeks ago, as a starting point and create a community for players with various materials on this game. The main goal is to drain traffic to your gaming site.

The format will be “Group”, as it is necessary to create a natural influx of the audience and maximize communication within the community. I’ll clarify right away that I will use a universal technique that can be used both in a group format and in public. It works everywhere.

Sea of ​​content, we begin to bring the idea to life!

Create a group

To create a group, go to "My groups" in the right menu of your Vkontakte account and click on the blue button at the top "Create community".

A window like this should appear where we enter a name for our group and select a format.

After entering the necessary information, the control panel for our community opens in front of us. In my case, it looks like this.

As you can see, I added a few options: I included video, audio recordings, discussions, and a number of other features that will be useful to me in my future work when collecting content. All this can be changed in the future without any restrictions. I also wrote down the address of my website. If you do not have a website, or if its subject does not correspond to the community format (they are about different things and are not related to each other in any way), then this line can be left empty.

In this case, I set the age limits from 18, by analogy with those that the developers set for the game. Although I have little doubt that children also play.

Everything. The group has been created!

Now you can start shaping it.

Making a Vkontakte group

This stage can be divided into 2 components: graphic and technical. To work, we need a template for creating a group avatar and menu, as well as a little imagination and basic knowledge of Photoshop (aka Adobe Photoshop).

Markup template

What is a template and what is it all about? A template is a kind of blank. In this case, in the *.psd format, we marked out the areas for the picture under the menu and the group's avatars.

As you can see in the second example at the beginning of this article, we can make the design in the same style for the avatar and menu picture. At the same time, it is visually cut into 2 parts. So the template allows you to form an image in such a way as to eliminate the graphics shift and fit the pictures as much as possible to one level.

To make it clearer, here is an example.

We can see that on both parts of the picture there is a strip with a view of the residential area. Without using a template, it is almost impossible to do exactly the first time. It will be necessary to adjust the pictures, measuring out discrepancies up to 1px. While when using a template, we simply add graphics to it within the markup and immediately get the desired result.

I want to note that this template is designed for 1 line in the explanation. In the screenshot of the example, there are phones. If a second line appears, then you will need to use a different template, or fix the design manually.

In the meantime, we proceed directly to the graphic design of our new group. Here I take the path of least resistance and go to Google Images to find the parts of the design. You can also use Yandex. Who likes what.

I don’t have a design education, so we won’t dwell on the selection of fonts and other trifles. After a bit of tweaking in Photoshop, I got this result.

On the left fragment (where the inscription "Menu") you can also add several triggers. In this case, I decided to do without them. Everything. The avatar design is ready. We press the combination of hot keys Shift + Ctrl + Alt + S in Photoshop and save our fragments to a folder on our hard drive.

The first stage of work with graphics is completed. Let's get back in touch.

Setting the avatar and menu for the group

We click on the two types in place of the ava of our group and upload our image there. Here are these guys, below them it says “Upload a photo.”

We add an image. Specify the fields and select the thumbnail. Everything is simple here and there should be no problems.

As we can see, you need to know the community id. It is very easy to recognize him. We find the menu in our group (immediately under the avatar) and open the "Community Statistics". In this case, something similar will appear in the address bar of the browser (the numbers will be different).

These numbers after "?gid=" are the desired group id. We insert the received value into the script form and write the name for the page we want to create. In this case, I drive in "Menu".

It should be noted that the page will be created only if the window with the group is open in the next tab. Simply put, you must be logged into VK in the same browser. After all, only the administrator of the group and the people assigned to them have access to such manipulations. A random passer-by will not be able to easily take and change the settings of a group to the admin panel of which he does not have access.

If everything is done correctly, the following page will open.

This is the same window where we will make a wiki markup a little later and create an internal menu for our group. For now, it is enough for us to write something here. Then click the blue button "Save page" and at the top click on the link Back to the page.

I wrote a “Menu” for myself and after saving my page began to look like this.

There is no design yet, but for now we just need a link to this page. We pick it up in the address bar of the browser and return to the main page of our group. To tape.

Here we create a post with the following content: we insert an image there and a link to the menu page for the group.

We press send. Then we click on the time the message was sent and select the “Pin” item among all the options. We refresh the page (the F5 key on the keyboard) and, if everything is done correctly, we get the first result: the group has found an avatar and a link to go to the menu section.

Wiki markup for the Vkontakte group menu

Now let's deal with the design of the menu itself. Again we go to Photoshop and create a design for our menu. When designing the interface, you need to remember those people who will enter VK through the application from mobile phones. In other words, we should not have small elements, and in addition, we should try to make everything as clear as possible. So that you don’t have to guess how everything works here and where we can click ... but just poke at the right item and study the information you are looking for.

I will not now dwell on how exactly I assembled the menu. That's what I did.

Minimum fields. Vertical layout. The perfect format for a responsive menu. That is, nothing will go anywhere on mobile phones. Everything will be exactly as on the screens of computers and tablets. I take the width of 500 px, so that later nothing shrinks and does not lose image quality twice. Height is not important.

We cut the image into fragments and save them.

Everything. It's time for the final chord - we collect the menu already in the group itself.

To do this, we return to the main page of the group (where the feed is and our link-image leading to the menu). We click on the menu image and get to the very page that was previously created for the menu.

If you are an administrator or the creator of a group (in our case, this is the case), then at the top of the page there will be an "Edit" link. We click on it.

Then we switch to the wiki markup mode (under the close button in the upper right corner of the page, such a frame is drawn with<>inside). When the desired mode is activated, this button is circled in gray.

Then we poke into the camera icon and add all the fragments of our menu at once. In the wiki mode, we will not see the pictures themselves, only the code of these images with sizes and parameters.

I want to center the menu and not have any gaps between the fragments. Therefore, each of the elements is wrapped in a tag

and to the already nested parameter "noborder" I add the second parameter "nopadding". The first disables the stroke of fragments and borders for table cells. The second removes the margins from the edge.

The first and last menu items should not be buttons - in my picture it is just a graphic element without a link to the internal page, so we add the “nolink” parameter to them. This will remove the possibility of clicking on this element to open a piece of the picture in a separate window. Clicking the mouse won't do anything at all. This is the normal page background. Inactive.

In my case, the menu code looks like this.

Separately, I want to note the fact that after importing pictures into VK, the built-in system sometimes incorrectly indicates the size of the images. Therefore, we need to carefully monitor this and expose exactly those that we planned at the design stage. Otherwise, everything may fall apart and the puzzle will not work out in the end.

When we have written the code and aligned all the elements, we save the page and see the same thing that was in Photoshop.

The final touch remains - you need to create the very pages where our menu will send people. To do this, we again turn to the script for generating wiki pages and this time we order three pages at once. At the same time, it is also necessary to write something on each and do not forget to save their addresses somewhere from the address bar of the browser.

Then we insert links to new pages into the menu wiki code in the form page-102302049_51013384, where the first number is the group id, and the second is the page number. Although, in general, it doesn't matter. After all, we just need to copy this URL fragment and paste it into the markup.

As a result, the menu code takes the following form.

Outwardly, nothing has changed. But when we click on the menu items, we can see that now it works!

As for the markup itself and the rules by which the code is written, I advise you to read the Vkontakte group specially dedicated to this matter. The guys described all the key points and you can easily find the necessary element in their catalog and figure out how to add it to your wiki page.

I think that everyone who actively uses the social network Vkontakte has already met beautifully designed groups and publics. Many of them, in addition to the menu, also have a lot of stylized nested pages, directories, and so on, which essentially creates a small site right inside the social network.

Here are a few examples so that everyone understands what I'm talking about.




Such groups allow you to stand out from your competitors and attract more users. Especially if the content is interesting too :)
In this article, we will talk about how this is all done. In order to analyze everything in more detail and delve into all the subtleties, let's take a specific example. There will be a small master class on the design of groups.

The very first stage of our work is an idea. We need to understand what we want to tell and to whom. In contact there are several formats of communities and it is worth choosing taking into account the tasks set. Although in the future the group can be transferred to the public format and vice versa.

I explain with my fingers. Public It's something like a blog. Newsline. In other words, we tell our subscribers about some things and they will not be able to write on the wall of our community. Maximum comment.

Group allows you to create a community that is more open to conversation and discussion, where people can make posts in the feed on their own behalf. You can also add friends from your list to it. There is no such option in public. In addition, the group has a little more options for integrating wiki markup (there is a section "News" in which you can integrate the menu).

Globally, you can argue like this: if we need to create a community for the store, then I would take the “public” format. If we are talking, for example, about fishing enthusiasts, then it is better to take a “group”. Although, everyone is free to do as he sees fit. After all, at any time the format can be changed. However, keep in mind that Vkontakte introduces a restriction on changing the community format again and after the first time you will have to wait a few days until you can return everything back if necessary. Therefore, it is better to test the functionality before the group begins to fill with content.

As part of this master class, I will take the Mad Max game based on the movie of the same name, which was released just a couple of weeks ago, as a starting point and create a community for players with various materials on this game. The main goal is to drain traffic to your gaming site.

The format will be “Group”, as it is necessary to create a natural influx of the audience and maximize communication within the community. I’ll clarify right away that I will use a universal technique that can be used both in a group format and in public. It works everywhere.

Sea of ​​content, we begin to bring the idea to life!

Create a group

To create a group, go to "My groups" in the right menu of your Vkontakte account and click on the blue button at the top "Create community".

A window like this should appear where we enter a name for our group and select a format.

After entering the necessary information, the control panel for our community opens in front of us. In my case, it looks like this.

As you can see, I added a few options: I included video, audio recordings, discussions, and a number of other features that will be useful to me in my future work when collecting content. All this can be changed in the future without any restrictions. I also wrote down the address of my website. If you do not have a website, or if its subject does not correspond to the community format (they are about different things and are not related to each other in any way), then this line can be left empty.

In this case, I set the age limits from 18, by analogy with those that the developers set for the game. Although I have little doubt that children also play.

Everything. The group has been created!

Now you can start shaping it.

Making a Vkontakte group

This stage can be divided into 2 components: graphic and technical. To work, we need a template for creating a group avatar and menu, as well as a little imagination and basic knowledge of Photoshop (aka Adobe Photoshop).

Markup template

What is a template and what is it all about? A template is a kind of blank. In this case, in the *.psd format, we marked out the areas for the picture under the menu and the group's avatars.

As you can see in the second example at the beginning of this article, we can make the design in the same style for the avatar and menu picture. At the same time, it is visually cut into 2 parts. So the template allows you to form an image in such a way as to eliminate the graphics shift and fit the pictures as much as possible to one level.

To make it clearer, here is an example.

We can see that on both parts of the picture there is a strip with a view of the residential area. Without using a template, it is almost impossible to do exactly the first time. It will be necessary to adjust the pictures, measuring out discrepancies up to 1px. While when using a template, we simply add graphics to it within the markup and immediately get the desired result.

I want to note that this template is designed for 1 line in the explanation. In the screenshot of the example, there are phones. If a second line appears, then you will need to use a different template, or fix the design manually.

In the meantime, we proceed directly to the graphic design of our new group. Here I take the path of least resistance and go to Google Images to find the parts of the design. You can also use Yandex. Who likes what.

I don’t have a design education, so we won’t dwell on the selection of fonts and other trifles. After a bit of tweaking in Photoshop, I got this result.

On the left fragment (where the inscription "Menu") you can also add several triggers. In this case, I decided to do without them. Everything. The avatar design is ready. We press the combination of hot keys Shift + Ctrl + Alt + S in Photoshop and save our fragments to a folder on our hard drive.

The first stage of work with graphics is completed. Let's get back in touch.

Setting the avatar and menu for the group

We click on the two types in place of the ava of our group and upload our image there. Here are these guys, below them it says “Upload a photo.”

We add an image. Specify the fields and select the thumbnail. Everything is simple here and there should be no problems.

As we can see, you need to know the community id. It is very easy to recognize him. We find the menu in our group (immediately under the avatar) and open the "Community Statistics". In this case, something similar will appear in the address bar of the browser (the numbers will be different).

These numbers after "?gid=" are the desired group id. We insert the received value into the script form and write the name for the page we want to create. In this case, I drive in "Menu".

It should be noted that the page will be created only if the window with the group is open in the next tab. Simply put, you must be logged into VK in the same browser. After all, only the administrator of the group and the people assigned to them have access to such manipulations. A random passer-by will not be able to easily take and change the settings of a group to the admin panel of which he does not have access.

If everything is done correctly, the following page will open.

This is the same window where we will make a wiki markup a little later and create an internal menu for our group. For now, it is enough for us to write something here. Then click the blue button "Save page" and at the top click on the link Back to the page.

I wrote a “Menu” for myself and after saving my page began to look like this.

There is no design yet, but for now we just need a link to this page. We pick it up in the address bar of the browser and return to the main page of our group. To tape.

Here we create a post with the following content: we insert an image there and a link to the menu page for the group.

We press send. Then we click on the time the message was sent and select the “Pin” item among all the options. We refresh the page (the F5 key on the keyboard) and, if everything is done correctly, we get the first result: the group has found an avatar and a link to go to the menu section.

Wiki markup for the Vkontakte group menu

Now let's deal with the design of the menu itself. Again we go to Photoshop and create a design for our menu. When designing the interface, you need to remember those people who will enter VK through the application from mobile phones. In other words, we should not have small elements, and in addition, we should try to make everything as clear as possible. So that you don’t have to guess how everything works here and where we can click ... but just poke at the right item and study the information you are looking for.

I will not now dwell on how exactly I assembled the menu. That's what I did.

Minimum fields. Vertical layout. The perfect format for a responsive menu. That is, nothing will go anywhere on mobile phones. Everything will be exactly as on the screens of computers and tablets. I take the width of 500 px, so that later nothing shrinks and does not lose image quality twice. Height is not important.

We cut the image into fragments and save them.

Everything. It's time for the final chord - we collect the menu already in the group itself.

To do this, we return to the main page of the group (where the feed is and our link-image leading to the menu). We click on the menu image and get to the very page that was previously created for the menu.

If you are an administrator or the creator of a group (in our case, this is the case), then at the top of the page there will be an "Edit" link. We click on it.

Then we switch to the wiki markup mode (under the close button in the upper right corner of the page, such a frame is drawn with<>inside). When the desired mode is activated, this button is circled in gray.

Then we poke into the camera icon and add all the fragments of our menu at once. In the wiki mode, we will not see the pictures themselves, only the code of these images with sizes and parameters.

I want to center the menu and not have any gaps between the fragments. Therefore, each of the elements is wrapped in a tag

and to the already nested parameter "noborder" I add the second parameter "nopadding". The first disables the stroke of fragments and borders for table cells. The second removes the margins from the edge.

The first and last menu items should not be buttons - in my picture it is just a graphic element without a link to the internal page, so we add the “nolink” parameter to them. This will remove the possibility of clicking on this element to open a piece of the picture in a separate window. Clicking the mouse won't do anything at all. This is the normal page background. Inactive.

In my case, the menu code looks like this.

Separately, I want to note the fact that after importing pictures into VK, the built-in system sometimes incorrectly indicates the size of the images. Therefore, we need to carefully monitor this and expose exactly those that we planned at the design stage. Otherwise, everything may fall apart and the puzzle will not work out in the end.

When we have written the code and aligned all the elements, we save the page and see the same thing that was in Photoshop.

The final touch remains - you need to create the very pages where our menu will send people. To do this, we again turn to the script for generating wiki pages and this time we order three pages at once. At the same time, it is also necessary to write something on each and do not forget to save their addresses somewhere from the address bar of the browser.

Then we insert links to new pages into the menu wiki code in the form page-102302049_51013384, where the first number is the group id, and the second is the page number. Although, in general, it doesn't matter. After all, we just need to copy this URL fragment and paste it into the markup.

As a result, the menu code takes the following form.

Outwardly, nothing has changed. But when we click on the menu items, we can see that now it works!

As for the markup itself and the rules by which the code is written, I advise you to read the Vkontakte group specially dedicated to this matter. The guys described all the key points and you can easily find the necessary element in their catalog and figure out how to add it to your wiki page.

If you are actively promoting your group and want to make it more, then you probably know that a beautifully designed group is a very important aspect of developing your brand, but before you think about the design of your Vkontakte public, you should think about the purpose of your VK group!

As a rule, an SMM specialist, after completing the creation of a VK group, begins filling it. It is the content that can keep people in the group. But you just need to do it efficiently and competently! After the group will have: descriptions, wall posts, photo and video albums, audio recordings, you should start implementing the functional menu. And let the menu at the beginning of the journey not be super beautiful, as we used to see at the beginning of work, but rather simple. First of all, the usefulness of the existing content is important!

In this article you will find information on how to create a VK group menu yourself! Therefore, if you are puzzled by the question: how to make a VKontakte group menu, this review is for you!

Quick navigation:

What is a group menu

The menu can be considered a list of all available public functions. Using the menu, you can put all the important elements in one neat and beautiful list, set an individual icon or image for a specific link, send alerts to visitors about planned changes quickly and easily. The menu can display the following elements: all kinds of links to third-party sites, callouts to discussions, music, albums and other subsections within the VK site, images and the usual structure of your public. Based on the instructions below, you can make a menu for your Vkontakte community with your own efforts.

Creating a Vkontakte group menu online

If earlier, to create a menu, you had to bother entering various codes, which is quite difficult for people who do not have programming skills, now you can create a high-quality and beautiful group menu in contact online using specialized series.

So, now let's take a closer look at how such constructors work. It is worth noting that all of them have identical functionality, so having understood one, you can freely work in any of them.

The principle of creating a menu can be divided into several steps:

Step 1. Decide on a design template.

On sites that allow you to create a group according to templates, professional designers work, who draw dozens of templates of different styles and colors with high quality. You can choose the one that suits your group. In the future, you will have the opportunity to change the template at any time.

Step 2 Determine the number of buttons.

Decide how many button links to different pages will be on your menu.

Step 3. Specify links and inscriptions.

Step 4. Check and export.

Make sure that the completed menu works the way you wanted it to and then upload it to your community. The services will independently produce all the necessary pictures, generate the code, and, with your permission, upload everything to your public.

Step 5. Making changes.

If you need to make changes, for example, add new buttons, fix links and labels, change the design, just go to your account, make changes and export the menu again.

As you have already seen for yourself, creating a high-quality, affordable and beautiful menu using special servers is the best option for VK administrators. It is worth noting that such servers offer free services only for one time - trial. The subsequent use of resources of this kind must be paid. But, despite this, the result of using the functionality will undoubtedly justify your investment.

Banner for the Vkontakte group, create for free!

There are specialized sites where, without much effort and software, you can make yourself a beautiful banner for the Vkontakte group. For example https://bannermakers.ru/banners-vk/ .
In addition to creating a menu in this way, there are also ways to make a menu in a VK group in another way. Read about it below.

Menu VK wiki markup

Wiki markup is a great helper in creating a beautiful and effective community! This is a very convenient and effective way to create a public on the popular VKontakte network. This markup is very similar to the html code in terms of its action scheme. But for those who are not related to programming,

it will be clearer enough due to the ease of implementation. This markup got its name thanks to Wikipedia, where for the first time numerous users got the opportunity to get acquainted with the main features of its functions. Wiki markup allows people without programming skills to easily and quickly design a group:

· Create spoilers and tables graphically.

· Format images and text.

So, let's move on to the analysis of how to make a menu for the VK community?

Of course, in the process of designing the group menu, additional recommendations may be required, but in general, you can figure out the principle of creation using this guide. If we consider html, then to study it and work with it, we need to spend several days or about a week. Working with Wiki markup with a good memory will only take some time. How should it be created? What approaches should be taken?

Let's dwell a little on its history, and then we'll talk about technology. Ward Cunningham first introduced people to the concept of "wiki", which in translation from the Hawaiian language means "quick". In this way, he expressed the simplicity and speed in using the markup.

Fast clearance

Now we will consider the questions: “How to make a menu in a group in VK”, and clarify how to implement it effectively. In the process, you can go several ways, each of which has its own direction and leads to the ultimate goal - the presence of a quality group menu.

We will understand in order. If the group carries the meaning of a social direction, then a text menu can be introduced. Its advantages lie in a serious appearance. It is desirable for communities of commercial and entertainment type to determine the bet on the menu - graphics. Do not forget that there are ready-made templates for the VK group menu. The use of images will draw the attention of visitors to what should be visible. Using this approach will give you the opportunity to make being in a group more fun and relaxing. Wiki markup allows you to make a group menu with pictures and photos, make tables, embed and open links, and much more. Of course, this is not the whole list of functions, but designing the menu of your community is easy and on a rather impressive scale.

Basics of Wiki markup in creating a menu for a VK group

Thematic pictures and photographs will allow you to create a VK group menu, beautiful and interesting. It is important to know that it is possible to insert the necessary photo or picture using wiki markup on VKontakte only when they have already been uploaded to the site's albums. So, go to the album, decide on the desired photo and copy its address. Let's say it will be like this: photo14523_90678. Now you need to capture it in double square brackets. It should end up like this: []. But what if you need to attach a link or text to a picture or photo? Or maybe there is a need to edit the external image? Then the following action will help here: you need the file to look like this - [[ photo14523_90678|options|text/link]], and instead of the last three words, you need to substitute what you need. Text - enter what you need. Here, for sure, additional explanations will be inappropriate. Link in translation from English - "link". It is indicated so that the visitor's car understands where it needs to go. Options - here the following values ​​\u200b\u200bare set:

Noborder - the frame located near the photo is removed. Box - the image is located in the window.

Nopadding - spaces between images are not displayed.

NNNxYYYpx or NNNpx - indicate the size of the picture (in pixels).

As a rule, it is necessary to embed an element in the text and graphic menu of the VK group that allows you to present information in a form convenient for the visitor, namely tables. Few communities on VKontakte can do without it. To create a table using wiki markup, you need to apply a certain list of characters. Next, you will find out what functionality this or that symbol is responsible for:

(| - designation of the beginning of the table. It is impossible to do without this symbol when creating a table, it is a mandatory attribute.

| - used to give cells a transparent effect.

|+ - using this set of characters, the table name is centered. This is not a mandatory attribute at all, but it should be placed immediately after the signs that characterize the beginning.

|- - this is how new lines are denoted (also for cells).

Gives a dark color. In the absence of this symbol, the sign from paragraph No. 2 must be used.

|) is a character set that marks the end of the table. This is an optional attribute. But it is still recommended to use it to prevent the occurrence of an error.

Now let's look at how the cell is filled. All information that must be entered into them is placed after the signs |. If you need to separate the cells one from the other, you just need to duplicate this way: ||.

Now you have gradually studied the information on how to make a menu in a VK group using wiki markup. Using the example of compiling a menu for your public, it will become even clearer to you.

How to make a menu in a VK group with a new design 2018

The new design of VK not only brought convenience to the functionality of the site, but also some confusion for public administrators. In this section, we'll take a step-by-step look at how to create a menu for a group in a new design.

So, a guide on how to make a menu in the new version of VK quickly and, most importantly, without errors in the code is in front of you. By following the instructions exactly, you will be able to create the menu yourself, correctly and quickly! Let's start!

1. Open the menu image in Photoshop or another graphic editor.

2. We examine the size of the picture and if it exceeds 600 pixels in width, change the size to 600, the height of the picture changes proportionally, do not set it manually!

3. Use the cutting tool and cut our image into buttons.

4. Save the picture in the "for WEB" parameter. Photoshop work is now complete. Let's go to the community.

5. Go to the community settings in the "Materials", select "Restricted" and click "Save".

6. Go to the main page, in the subsection "fresh news" click "edit".

7. So we ended up in the Wiki editor, now the main activity will begin. We change the column "fresh news" to "menu" or any other and click on the camera icon, implement all the cut pieces from the saved folder.

If instead of the code images appear immediately after entering the wiki markup editor, you need to switch the wiki markup mode!

Now we have the code for our menu, but it needs to be tweaked a bit to remove the spaces between the images. Now our code looks like this: [][-][-][-][-]

Moving to the preview, we will notice that the images are not where they should be, and, in addition, there are spaces between them.

8. We edit the code: By default, VK has a built-in resolution for the maximum image size in width of 400px, the first button is 600, we change the parameters of the first button 400x89px to 600px, you do not need to specify the height. We also enter the following tag in each line: nopadding must be separated by a semicolon.

Important! Don't click ENTER after lines of code if you want two buttons side by side on the same menu bar. The editor will automatically transfer to a new line those parameters that do not fit! This code should be after editing:

[][-][-][-][-]

Now, going to the "preview" we see that everything is in place. We add the necessary links to each of the buttons to the code, for a good example, the link to the first button is not clickable here! Don't forget to remove the extra space between | and ].

[][-][-][-][-]

After making sure that everything is done as planned, click "save" and return to the page. Please note that in the new 2018 version there is no “back to page” button, so you just need to click on the page name at the top.

9. Now we need to fix our menu. To do this, copy the link to the page from our menu and return to the main page of the group.

10. Paste the copied link into the new message field. After a piece of the menu is displayed, the link must be removed! And using the camera icon, you need to add a pre-prepared image for the banner. We put "on behalf of the community" by clicking on the circle to the left of the "send" button, and click on "send"

11. Now we fix the menu, refresh the page and evaluate our result. For the whole job, slowly, it takes about 15-20 minutes.

How to make a menu in a VK group with transitions

Now let's look at how you can make a VK group menu with transitions.

So, how do you make one wiki menu inside another? First of all, the first menu should be ready. We will start from the picture already cut into buttons. Add cut pieces of the image through the camera stash in the wiki editor. If images appear instead of the code, then the markup wiki mode is not enabled, before adding an image, click<>

Don't forget to click "Save" at the bottom of the page! If necessary, you can resize the image and add the nopadding tag to the code, it is absent by default, and the image size should be a maximum of 400 pixels in width, if the image is larger, you need to correct it to the desired size!

1. After editing the code, save and click "return".

2. Check if the first menu is displayed correctly.

3. If everything is as it should, click "edit" again.

Now we need to create a new wiki page where the second menu will be located. At the very end of the code, we write the menu value for public VK 2, well, or any text you need. Save and return. An active link with a new name should be formed at the bottom. For the greatest convenience, open it in another browser tab.

While your newly formed page is still empty, click "edit" or "fill with content"

Just like we did at the very beginning, we add segments of the second menu, save and see how the new menu looks like.

If everything is as it should, copy the link to the new menu page in the address bar of your browser.

Let's say a new menu should open when you click on the "Reviews" button of the first menu. You need to go to the tab where we formed the first menu and find the third line and paste the link from the buffer, save and return.

Thus, when you click on the "Reviews" button, our second menu will open.

How to make a VK group menu from your phone

If you are “lucky” to work as an administrator of VK groups or create your own group with only a phone available, then if you adapt, it is quite possible to make a group menu from your phone without experiencing much effort.

Everyone knows that the creators of VK offer their user a fairly convenient mobile version, and earlier you have already learned about different ways to create a menu. But, manually entering codes using wiki markup is possible, but not very convenient. But downloading a template from the sites of specialized services and inserting it into the necessary columns is quite simpler and more convenient, and it will not take you very much time. Thus, you can administer Vkontakte groups simply and conveniently.

Vkontakte group menu templates

All of the above methods to create a VK group menu are quite simple, and if you put them into practice, you can make sure that there is absolutely nothing complicated about this. Adapting to the introduction of pictures and tables using wiki markup is quite simple and fast. But it is even faster and more convenient to use ready-made templates for the group menu, which can be found either on the resources mentioned above, or downloaded from blogs and websites of the same users.

It is worth noting that the templates imply the presence of pictures and images of various topics. They also have versatile designs. If you do not have time to search for images, or do not have enough imagination to create a bright menu, you are better off using ready-made menus.

Social networks have long entered the life of most people and are an important component in it. Many people even manage to create their own virtual businesses in them: cheat likes, subscribers, sell goods both from other countries and copyright. Almost all of them have a group. And how can users quickly convey what a person or even an entire organization is doing? Create a special menu that will contain the most necessary information. And this is where we need Wiki markup. How to make a VK group menu? What to add to it? The article will discuss the creation rules and examples.

What is Wiki markup?

How to make a VK group menu? Wiki markup is a good helper! This is a very effective and convenient way to design a group on the VKontakte social network. This markup is very similar to html code in terms of its action. But for people who are not related to programming, it will be more understandable due to the ease of implementation. Wiki markup got its name from Wikipedia, where for the first time many users were able to get acquainted with the main features of its functioning. Wiki markup allows people without programming knowledge to quickly and easily style the look and feel of a group:

  1. Create graphic spoilers and tables.
  2. Format text and images.
  3. Work with anchors and links.

How to make a menu for a VK group? Recommendations are so necessary, but in general, you can figure it out with the help of a good guide. If we talk about html, then to study it and work with it, it was necessary to sit for several days or even a week. Wiki markup with a good memory requires only a very little time. How can it be created? What are the approaches? Here we will talk about technology, but who made it? We will figure out how to make a menu for a VK group. Ward Cunningham was the first to introduce the concept of "wiki" (translated from Hawaiian means "fast").

Ways to create wiki markups

You need to ask yourself not only the question: “How to make a menu in a group in VK”, but also clarify how to implement it. You can select multiple paths. Each of them depends on the direction and purpose of the group. So what could be:

  1. If the group has a social direction, then you can create a text menu. Advantages are given to him due to a more serious appearance.
  2. It is advisable for groups of commercial and entertainment nature to rely on a graphic menu. Using images in it will draw the attention of users to what should be visible. Taking this approach will also make your time in the group more enjoyable and relaxing.

As an example of work, work with pictures and photographs, how to make tables, insert links, open and much more will be considered. Of course, this is far from all the functionality, but it will be easy and on a fairly large scale to arrange the menu of your group in this way.

Working with images

How to make a menu in a group in VK that would be beautiful? In the VKontakte social network, it is possible to insert a photo or picture using wiki markup only if they are uploaded to the site's photo albums. So, we go into it, select the desired photo and copy its address. For example, let it be like this: photo12345_67890. Now you need to take it into doubles. You should get the following result: []. But what if you need to attach text or a link to a photo or picture? Or maybe there is a desire to edit the appearance a little? Then the following will help with this: it is necessary that the file looks like this - [[ photo12345_67890|options|text/link]]. Instead of the last three words, what is needed is substituted. Text - write what you need. I don't think any special explanation is needed. Link is translated from English as "link". Specified so that the user's machine knows where it needs to go. Options - the following values ​​\u200b\u200bare set here:

  1. Plain - the link to the image is formatted as text, there is no picture in it.
  2. Noborder - removes the frame around the photo.
  3. Box - the image opens in a window.
  4. Nolink - the link to the photo is removed.
  5. Nopadding - spaces between images are not displayed.
  6. NNNxYYYpx or NNNpx - specify the size of the image in pixels. The first option provides width and height. If desired, you can "compress" the picture. And the second option involves editing the width.

How to create tables using wiki markup?

Usually, both graphic and text menus need an element that allows you to present data in a convenient form, namely tables. Few groups on VKontakte manage without them. To create a table in wiki markup, you must use a specific character set. We offer you to familiarize yourself with what functionality they are responsible for:

  1. (| - this is the beginning of the table. It is impossible to do without it when creating this element, it is a mandatory attribute.
  2. | - used to give cells a transparent effect.
  3. |+ - using this character set, the table name is centered. This is not a required attribute, but it must be placed immediately after the characters that indicate the start.
  4. |- - this is how new lines are denoted (including for cells).
  5. ! - gives a dark color. In the absence of an ego, it is necessary to use the sign from paragraph No. 2.
  6. |) is a set of characters that marks the end of the table. It is an optional attribute. However, it is still recommended to use it to prevent the error from occurring.

How is the cell filled? All data that must be entered into them is placed after the signs |. If you want to separate cells from one another, you just need to duplicate it like this: ||. Everything said up to this point may not look very clear, but this will now be corrected with the help of an example.

Creating a group menu in the VKontakte social network using wiki markup: an implementation example

The noborder and nolink options will be used here. They will remove the picture frame and the link. Also, the images will be resized, and the second row of table cells will have a dark fill, thanks to the use of the ! attribute. And here is the example itself:

{|
|-
|

”’New in Science”’
||
|-
!
[]
!!
|-
|

[[Science news|News]]

[[Discoveries]]

|

[[Conferences]]

[[Developments]]

[[Books]]

[[Symposia]]

|

Sections:

[[Medicine|1]] | [[Physics|2]] | [[Math|3]] | [[Economy|4]]

[[Chemistry|5]] | [[Biology|6]] | [[Programming|7]] | [[Electrical Engineering|8]]

|-
|}

As you can see, the answer to the question: “How to make a menu in a group in VK?” very light.

The importance of Wiki markup when promoting your project

Using these developments allows you to give the group its atmospheric look and create a feeling of comfort. Of course, for a full-fledged design, one should also be able to set the theme of the page, but this has not yet been implemented in the social network. Therefore, those who read these lines, know that you are not in vain interested in how to make a menu in a group in VK.

Conclusion

Now, readers know how to make a menu in the VK group so that it is beautiful. As you can see, this functionality is useful and at the same time quite easy to implement. But before you create a menu, you need to think about what should be organized and how, and what should be highlighted. After all, the wrong optimization can only make things worse.

Vkontakte wiki markup designed to enable users to create original and beautifully designed . With wiki markup, you can design a group menu, create quick links to various objects, and make your community stand out from the rest.

The specific wiki markup language is very similar to html layout, however, in order to understand and apply it, it is not necessary to be a professional webmaster. This step can be carried out by a person far from programming. This is a significant plus of wiki markup. In order to start creating a beautiful and original menu in your group, you need to open the community management section and enable group materials. If you have an entry attached to the main page of the group, it is best to unpin it, then you will see the markup area.

It will be in the latest news section. Before you create a menu, you will need to make preparations in Photoshop. Select an image and cut it into equal parts, the width of each image should not exceed 388 pixels. Then save the resulting parts in web format and upload them to the band's album. Next, go to the "recent news" section and turn on the wiki mode. You will see an icon in the top right corner.

Where, photo-674830572_6789900 is a link to a photo that you previously uploaded to the album. Accordingly, in the place where there should be a link to the section in VK, you need to insert a link to the page in the group where you want the user to go when clicking on the picture. Insert this design as many times as you want to create sections in the menu in your community. Also, through wiki markup, you can create a page in VK. Typically, pages are used when a group administrator wants to provide any useful information or answers to current questions.

In order to make a page, you need to write the title in double square brackets. For example, [[Answers to your questions]. The page will be automatically generated. You will be able to follow the created link and edit it.

Wiki markup Vkontakte table

To create a table using wiki markup, special characters are required.

  1. Initially, put the icon (| it marks the beginning of your table, then press enter and on the next line enter the sign | + using this tag defines the title.
  2. If you want to put a new line, you need to enter the |- sign and after it write the main lines.
  3. Use an exclamation mark to make the table borders darker.
  4. For a transparent cell, you must put a vertical bar |.
  5. To close a table, use the | tag.

Tables are very handy if you're running a contest in your community and want to show who gets what results. Also, with the help of tables, it is easy to organize information so that people can quickly need and to your page.

Wiki markup Vkontakte templates

If you want to immediately get the finished result, and there is no time to understand all the tags, you can download the finished Vkontakte wiki markup template. At the moment, there are a sufficient number of resources that allow you to do this.

If you notice an error, select a piece of text and press Ctrl + Enter
SHARE:
Your repairman.  Finishing work, exterior, preparatory