Interactive menu in contact. How to create a menu for a VKontakte group

After the image size and vertical stick values, insert a link to the page where the person will go by clicking on the corresponding menu item. As I already wrote, the link can be to some VKontakte page or to a third-party resource on the Internet.

This is what the code will look like after you add “nopadding;” and a link.

The result should be like this: the name of the tab (MENU) has been changed, spaces between lines have been removed, spaces between images have been removed (nopadding;), links have been added. Click “Save Page” and return to the main page in the group.

This completes the process of creating navigation for the VKontakte group. I did it like this. The avatar image and the menu are one. By going to the “MENU” tab, the user can select what interests him and follow the link I provided.

If you are worried that the menu in the group may not be visible, then attach a photo in which, for example, use arrows to indicate the presence of a tab. If you have questions, ask them in the comments.

High-quality design of the VKontakte community page is already half the success in achieving the goal for which the group is created. Statistics show that the presence of navigation significantly increases page traffic and also increases the number of subscribers. The community page, where all the information is structured, creates the impression of the administrators’ serious approach to business, as well as their practical skills in leading a group and reliability. In this article we will talk about the menu for the VKontakte group, how to create it and make it most convenient to navigate.

Varieties of menus for the VKontakte community

Now there are two types of VKontakte group menus. Their templates, of course, are available on the Internet, and you can do everything strictly according to them. However, the result will not be creative and original, and therefore will not attract large number subscribers.

So there is closed menu and open.

Closed gets its name because the subscriber needs to open it themselves. To do this you just need to click on the link. Any word can be used as a link, usually “open” or “menu”. Although, some people get creative and come up with original links.

Open is a post that has been pinned. It contains a valid link to the menu. This type is still quite young, it appeared not so long ago, or rather with the advent of the function of pinning a post to the wall of a page. An open menu is the most effective by far and is more attractive than a closed one. The first option is less productive, since group visitors may simply not notice the link to it.

So, VKontakte? The answer is quite simple. To create both types of menus for the VKontakte group, wiki markup is used. This is very handy tool, it allows you to create tables, graphs, format and edit images, work with links, and more. However, now everything is much simpler for the creators of the VKontakte community than several years ago. IN social network There is one that automatically translates all content into wiki markup.

The open menu for the VKontakte group is now more popular, but the closed menu is practically not used anymore. Therefore, it would be reasonable to consider in more detail the creation of open type. Next, you will learn how to make a menu in the VKontakte group ( step by step instructions presented below).

Stage one

At this stage you need to select images. They will create a presentable appearance pages. Pictures can be found on the Internet or made yourself using photo editors and Second option will do only for those who are good at drawing on a computer and have knowledge of Photoshop.

The first picture is an avatar. The second (central) is the image-action. The avatar parameters must be at least 200 x 330 pixels. The central image is at least 390 x 280 pixels.

Stage two

Open the group page and find "Community Management". The link is located under the front photo of the page on the right. After following the link, find the “Materials” section in the information, and then click “Restricted” in this paragraph.

On the main page, click on edit in the “Materials” line. In the editor form that appears, specify the name, sections, and then be sure to click the button below to save. After that, return to the page using the button in the upper right corner.

Stage three

Copy the page address. The first row of numbers after the word “page” is the community number, the second is the group page number. You need to know this when thinking about how to create a menu in the VKontakte group. The address must be inserted on the wall along with the central image. To attach a picture, click “attach” and “photo”. Next, select and paste. Then click send - this will publish the post.

Stage four

Place the first picture in place of the main community photo. A record of this action along with a picture will appear on the wall. It has no use there, so it needs to be removed.

This is all. When users click on the central image, the group menu will open to them.

How to create a table in the menu?

Every administrator thinks about how to make a menu in the VKontakte group. The instructions presented above can only help you create a basic menu. Further it needs to be improved.

The table is very convenient for navigating the menu for the VKontakte group. Creating a table requires knowledge of certain symbols.

• (| means beginning;
• |+ central location;
• |- from new line;
• | transparency;
• ! dark cell fill;
• |) denotes the end.

How to create links?

In the question of how to make a menu in the VKontakte group, there is important point regarding links. They can be designed in different ways:

• Just leave a link. To do this, take the link in square brackets.
• Make a link with a word or phrase. Open, paste the link, after the link put the sign | and close the square bracket.
• Image link. You can do this using this example: [].

Most often, everyone learns on their own how to create a menu in the VKontakte group. Knowledge comes with experience through trial and error. However, beginners can still be given a few recommendations.

• The image size should not be less than 130 pixels. This will significantly degrade the appearance of the menu.
• The width of the image is no more than 610 pixels.
• A wiki page cannot contain more than 17 unclosed tags.
• When you set the width indicator, the height automatically changes according to the proportions.
• You can create a list inside a table using />.
• A maximum of 8 list units can be placed on one line.

Besides everything else, there are special programs for easier use of wiki markup. These are both educational applications and real assistants that will do everything for you.

For example, the Interactive FAQ (beta) application allows you to test your abilities in wiki programming.

Its operation is simple: the user is presented with a ready-made menu, and is required to enter the markup code. At the end, the result is compared with the original.

The Wiki Editor program does not teach or train its users anything. With its help, you can create a menu even without basic programming skills. The easy-to-use editor writes the codes itself - all the user needs to do is control it.

Thus, anyone who plans to use the group to promote their business or just for fun can create a VKontakte menu. The menu makes business promotion much more effective and attracts users to the group page. A menu makes a community look presentable and more professional than its competitors who don't have one.

Today I will continue my “Immersion in VK groups”. In the third part of the “series”, I told and showed. Today, let's talk about designing the VKontakte group menu!

In the first article about creating a menu, there were a lot of questions in the comments, so before you start new topic, I will answer frequently asked questions.

Question 1: The first and most common: “Where is the code in the menu?” or “if there is no bookmark when editing “Source Code”, how to add an internal page?” or “I still don’t understand what to do if the code doesn’t appear!”

Answer 1: VK has changed the editor, now to switch between visual editor and the code is just one click (right top corner editor):

To check which editor you are in: move your mouse over this button, write some text and highlight it in bold - if unusual characters appear, then this is code

Question 2: The second, really problematic: “ how to remove spaces between pictures?»

Answer 2: I admit, I was scared myself when the client’s menu started working for the first time. Now I quickly edit it, but then it was not fun. See:

Add the nopadding tag; and everything will fall into place!

Space creeps in between the pictures and the menu looks broken. For the ignorant, this may not be normal, but for the ignorant, this is at least unprofessional. So what's the big deal? Ah, it's very simple! In VK, some updates are constantly happening, new algorithms are being introduced... and even the editor is crooked... sometimes, for no apparent reason, important tags drop out of the code and then we see this picture. To fix this, you need to look into the code and make the necessary adjustments. The code format should be like this:

Template: [] Example: []

Usually menu pictures are expanded because the code leaves out nopadding; — we put it in place and everything is aligned. Before saving the result, click on the “Preview” button to make sure that everything is smooth.

Question 3: News. In October 2012, VKontakte forcibly cut off the avatars of groups and public pages. Now their size has a common standard of 200x500 pixels. So, if you had a larger avatar in your group, then make an update (update the avatar).

By the way, along with cropping, VK introduced another innovation regarding group photos: now by clicking on the avatar, we, just like in the account, will be able to see all the albums of the community. It's convenient! And from this, new functionality is drawn in the group’s communications.

Soooo, we're done with the questions... now let's move on to creating the menu itself!

Step 1. How to create a menu in contact and make nested pages:

First of all, let’s make sure that you know how to create a group menu in contact and go through a few instructions:

What do you think of my cheat sheet?

This is the cheat sheet I came up with! For greater clarity, I will write down each number:

Do this operation with all subpages and your menu will be ready.

Eat! The menu has been created internal pages done, filled them out, now let's move on to creating a beautiful graphical menu.

Step 2. How to create a beautiful graphic menu in Contact and install it:

The whole theory about how it works wiki markup in contact, I won’t give it to you, we have other goals now. To create a visual menu in a VK group, you don’t need to know all the wiki markup. Let's move on to creating a visual menu!

First, I’ll show you the code and result of my menu:

I admit, I made it specifically to write this article. Everyone “didn’t get around to it,” you know, like “a shoemaker without boots.” But now I have a visual menu in the VK group!

I won’t tell you how to draw a picture for the menu, that’s up to the designers, I draw it myself, but not so professionally. , at the end of the article, I gave a video on how to draw a simple menu in Photoshop, check it out, maybe you can do it on your own. If not, order the menu picture from .

I'll show you a moderately complex menu installation option. The difference is in the number of elements. A menu that is simply cut into strips is the simplest implementation. The more clickable buttons in a line, the more complex its execution. Although, knowing the peculiarity, everything is simple! It's just a matter of time. So, the width of the image should be:

370 px – if you have two or more objects in a line, like I have social network buttons

And max 388 px – if we cut the picture in a simple way, only into lines, without dividing it into small objects. This is the feature you need to know when cutting a menu into buttons. My image size for the entire menu turned out to be 370x456 px.

After the picture is cut into the required number of objects and saved in a separate album, we upload this album to VK. We upload to the account profile, not to the group! Since in group albums there is no longer an option to hide albums. A technical album in a corporate (for example) group is not needed at all, so we hide the menu items in the account album:

Technical album VK

Once you have set up the "Only Me" privacy. Let's move on to installing the menu itself. I’ll give you a code example that would be a template for you and let’s look at what it consists of:

[]

Where, photo7632142_296911699– this is the address of the picture! We look at it in the address bar of the picture:

From the first picture, let's start inserting a menu into the VKontakte group

You need a short address of the image, to do this go to the album itself:

Go to the album itself to get required address pictures!

...and starting from the first picture, move them to the group menu.

Adding image size to the menu code!

So, the address of the picture has been added, the size has been indicated, now we put the tag nopadding;- it is needed so that our pictures fit tightly to each other. And the last step is to put a link to the page where the visitor will go after clicking on the picture.

Here small clarification! We write external links, links to VK albums and discussions in full, and links to internal pages in the format page-32734125_44298120. At the beginning and end of the line, do not forget to put two square quotes and no spaces.

Clarification 2: when we link to internal pages without pictures, then for discussions, albums and external links put single square quotes.

Lines in which you have two or more elements are inserted into the code without spaces. Insert each line of the picture one after the other. Because if you press Enter after the line with the picture, the picture will jump to new line and the menu will move. We need the menu to be displayed as a whole, so no extra spaces and we don’t need “interters”!

After you have transferred all the pictures to the menu and designed them (size, link), save the result and admire your work! All! Ready!

Step 1
First, go to your group and in the “Latest News” block (in in this case I renamed it “Menu”), click the “Edit” link that appears when you hover over it. Important! Firstly, you must have exactly Open group, not Page. Because there is simply no such item on the Page. And second, in the Community Management > Information > Materials menu, the “Open” item should be selected.

Step 2
In the “Editing” tab, write the phrase [[Web design theory]], enclosed in double square brackets. Then click on the “Save Page” button.

Step 3
After that, a “Preview” link will appear next to the button, click on it. A preview of our menu will open below, where we see the link “Web design theory” appearing below.

Step 4
Click on this link and go to the created page called “Web Design Theory”. Then click on the “Fill with content” link. Next, edit the text as usual text editor— insert pictures, texts, videos and other objects. In this case, our created page will have a URL like https://vk.com/page-15865937_43819846.

Alternative way to create an internal page
Eat alternative way page creation. It is mainly suitable for public ( public pages), since the method described above is not suitable for them. To do this we will use the following code
http://vk.com/pages?oid=-XXX&p=Page_Name
where instead of XXX we will substitute the id of our group, and instead of the text “Page Name” we will write Menu. Now we need to find out the group id. How to do this? We go to the main page of the group and look at our posts on the wall - right under the “Add post” block it will say “All posts” - click on this link.

We go to the page and see a URL like this https://vk.com/wall-78320145?own=1, where the numbers are 78320145 in in this example and there is the group id. We substitute our data into source code and we get a record like this: http://vk.com/pages?oid=-78320145&p=Menu(with your numbers!). Paste this line into address bar browser and press Enter. This is how we created new page VKontakte.

As you know, when a person reads or lands on a particular web resource, he pays attention to the design and interface for the first 8 seconds. At the same time, he makes sure of good or bad usability (ease of use). A menu in a group on the VKontakte social network, which we will talk about today and look at the principle of its construction using an example, allows you not only to colorfully present information and “distinguish yourself” from your competitors for the better, but also to identify exactly those items and make changes to them accents that are needed.

Just look at a few examples to understand how beautiful and convenient it is:

Let's get started. To begin with, it should be noted that if you want to make the menu yourself from scratch, then you will need all of the following information. If you already have a design, you can skip part of the article and go directly to its placement and wiki markup.

Menu design

Allows you to complete the basis for a future project. To complete this part of the work, knowledge of a program such as “ Adobe Photoshop" This is what the size template looks like in which we will implement the future beautiful menu.

The width of the avatar is 200 pixels, the height is 500. The main menu image is 510*308. As a result, we will get such a beautiful “menu” at the end.

Please note that depending on the information written after the group name, the height of the picture on the right (avatar) may change, and accordingly, everything located nearby may shift!

This PSD layout source was implemented as an example. Download .

We will not focus on how the template was made; we will immediately begin preparing it for placement in a new or existing group. Open the file in Photoshop.

First of all, save the avatar. One way quick save, if everything in the file is structured and there are few elements (as in our case). Turn off the visibility of layers we don't need.

Go to the “Image” section and select the “Trimming” operation.

At the output we get:

If the resulting image is large, you can use the “Save for Web” tool. The command is also located in the "File" section.

We perform a similar operation with the image that will be displayed when the menu is initially displayed. In our case, we leave visible the “open menu” folder and the “menu background” in the “menu with car” folder. The output is:

Now you need to save and cut the second level of the menu. To do this, leave the “menu background” visible in the “menu with car” folder and add “Second level menu” to it.

Then we will use the “Cutting” tool, which can be found in the menu on the left.

We “cut” our picture into appropriate parts. In our case there will be three of them.

This completes the preparatory part. Let's move on to the main stage.

Wiki markup of the finished menu on VKontakte.

First of all, you need to upload a group photo or avatar by clicking on the link of the same name and selecting the file we need.

Then be sure to perform the following sequence of actions. Go to “Community Management” and in the “Sections” item opposite the “Materials” button, select “Restricted”.

This must be done so that users and group members cannot change and/or edit additional items, including menus.

After the operation is completed, we upload our cut pictures to the community album.

Go to the “Latest News” section, select “Edit” and get to the editor menu.

To speed up the process, use the “Camera” key and click “Select from community photos.”

After adding, go back to the editor menu and press the “<>", in which we will produce further editing. We also immediately rename the section and instead of “Latest news” we write in our case “GROUP MENU”.

The general structure of each sliced ​​part looks like this in the markup - [], where:

id – identifier (number) of the picture you uploaded;

X and Y – horizontal and vertical image size in pixels;

Looking at the template, we edit our wiki markup and periodically go to the “Preview” section, which visually displays the changes we have made.

All images must be closed with a tag at once (and not, as is the default, each image)

Since we have already left the tag centering the image alone, in order to get rid of the “unpleasant” distances between parts of the overall image, we should insert the “nopadding” tag as follows: []

This is what happens in the end.

Now you should click on the “GROUP MENU” tab, then “edit”.

Important! To copy required address, in our version, click on the “GROUP MENU” and copy the “correct link” from there.

Go to the main page and click “Add entry”. Don't forget to immediately change the author of the post!

Click on the “ellipses” to the right of the entry and click on the “Pin” tab.

After that, refresh the page and enjoy the resulting result, which looks like this:

When you click on "Open menu".

As you can see, making a menu on the VKontakte social network is quite easy and simple. It is enough to have a light level of knowledge of using Photoshop and wiki markup. The better and more understandable the design, the more willingly and often the potential user will come and return to your group.

If you want a truly unique and stunning group design in compliance with the corporate identity and accompanying elements, then contact professional designer, or you can test the scope of your talents yourself first. Good luck to you in all your endeavors!