How to make a navigation menu in a VKontakte group. How to design and create a menu for a VKontakte group

Step 1
To get started, go to your group and in the "Latest News" block (in this case, I renamed it to "Menu"), click the "Edit" link that appears on hover. Important! First, you must have an Open group, not a Page. Since there is simply no such item on the Page. And second, in the menu Community Management > Information > Content, the item "Public" must be selected.

Step 2
In the "Editing" tab, we 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, and click on it. Below, a preview of our menu will open, where we see the link “Web Design Theory” that appears from the bottom.

Step 4
Click on this link and go to the created page called "Web Design Theory". Then click on the "Fill content" link. Next, we edit the text as in a regular text editor - we 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
There is an alternative way to create a page. Basically, it is suitable for publics (public pages), since the method described above is not suitable for them. For 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 the Menu. Now we need to find out the group id. How to do it? 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.

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

The selling design of the VKontakte menu begins with the right choice. Do you have an online store, a construction company, are you a coach or a beauty master? Every business is unique and requires a different approach to wiki menu design. From our article you will find out what types of menus exist for the VKontakte group, what are their features and differences, as well as which menu to choose for your business.

This is the most common and cheapest type of menu. Allows you to create convenient navigation through the sections of the group or to external resources: discussions, photo albums, product catalog, person, video, company website or pages on social networks. The design of the navigation menu is usually no longer than 1000px and fits on one monitor screen.

Navigation menu types:

This menu has simple functionality and is installed on only one wiki page. The menu buttons lead directly to the desired section of the group or external sites, without opening additional navigation pages. This is a convenient menu option if you do not have a large number of services / goods and you are not positioned as a large company.

The one-page menu is suitable for small online stores, photographers, coaches and beauty masters.

Multi-page menu

This is a type of navigation menu in which the transition through the sections of the group is carried out according to the structure. As an example: the "products" button leads to a new wiki page, which displays a list of sections "children's clothing", "for women", "for men", etc. Each wiki page can have its own unique design, active buttons, or duplicate the design of the main menu page.

Multi-Page Menu - Main Wiki Page

A multi-page menu will be convenient for online stores when you need to help customers quickly and easily find the desired section in a group.

Multi-page menu - additional wiki page

Wiki-landing VKontakte

Wiki landing or as it is also called landing VKontakte is the most popular type of menu. The love for this menu design among our customers is not surprising - it is a beautiful, structured design, all the most important information about your group is on one page, active order buttons (lead to the administrator's PM or group messages) and a product catalog. Whatever sections you want to create in a wiki landing, it is possible.

• Description of the company and its activities
• Categories of services or goods
• Customer feedback through graphic design
• Video recordings and promotional videos
• Benefits of working with you
• Promotions and special offers
• Description of services or goods
• Popular articles in the group
• Contacts to contact you
• Active card with company address
• Answers to frequently asked questions

Wiki Landing is the best choice for large service companies, niche online stores and coaches

We answer frequently asked questions about the wiki menu:

The main factor in choosing a design for the VKontakte group is the theme of your business and the budget for design development. If you have a young company or you have just decided to create a group and want to test the popularity of your services on the Internet, you should give preference to the navigation menu. For those who want to create a beautiful graphic design for the group and receive more applications, we recommend choosing the VKontakte landing page.

When the group menu is already drawn by the designer and installed on the wiki page, you can easily attach it to any post or banner in the pinned post. To do this, you need to open the link to the wiki menu in a new browser tab, copy it, return to your group and paste the copied link into a new post. When the preview of the link is loaded, its text should be removed from the post. You can write any information in this publication, a call to action and contacts, then attach a picture (photo) and click the "Publish" button. Now click "Pin" and the banner with the active link to the group menu will always be in sight.

How to make a menu in a VKontakte group?

To do this, you will need skills in graphic editors such as Adobe Photoshop (psd format), Adobe Illustrator (ai or eps format) or CorelDRAW (cdr format). Each of these programs will perfectly cope with this task. Create a new document with dimensions of 607 px (we recommend creating a 608 px document) in width and set the desired menu length (document height). Now you can start designing. On the Internet, you will find many videos on how to create a VKontakte menu on your own, and if you want to make a beautiful, professional design, it is better to contact an experienced designer.

The layout of the graphic menu also has its own subtleties. For example: You will need to understand the VKontakte wiki markup, learn how to switch between the editor's features, work with linking links to each design fragment, and correctly set the menu sizes. For an inexperienced person, this work can take up to several days, when a designer can draw a graphic menu and layout it into a group in a couple of hours.

What is the difference between the menu for the public and the VKontakte group?

There are no differences in the graphic design of the menu for a public, group or event. The only difference is setting the menu on the wiki page. In events and publics, the function of including "Materials" is not available. It is through this section that a link is created to the wiki page on which the group menu will be installed. Nevertheless, there is a way out of this situation through the publication of a wiki code that will open access to the creation of a wiki page.

For an experienced designer, creating a VKontakte menu is not a problem!

Are you tired of the menu in the VKontakte group or do you want to hide it? This can be done in several ways: turn off the "Contents" in the group settings, remove the pinned post with a link to the menu, or remove the menu code on the wiki page. The fastest and easiest way is to turn off the "Materials" section - the menu in the group will no longer be visible and, if desired, you can always return it. The VKontakte wiki page itself cannot be deleted.

Examples of beautiful menu design

Only a designer can make a beautiful design of the VKontakte group menu, and this is not surprising. To develop a beautiful design, you need skills in graphic editors and good taste, and this comes with experience. Using our examples, you can compare how the navigation menu looks like and the wiki landing page in VKontakte groups, as well as get ideas for design.

Order the design of the VKontakte group - designer Irina Filipenko

Order a menu design for a VK group

We have been working in the design of VKontakte groups since 2012 and during this time we have completed more than 200 design projects. The most popular service among our clients is turnkey group design with a wiki landing. This expensive service in our studio is provided without huge extra charges, since you work directly with the designer and we do not charge any additional payments - for edits, time spent or purchase of graphics. Interested in our offer? Contact us through the section on this site.

Increasingly, they are used to conduct business, sell goods or services. A great tool that makes it easier to work with a group is a menu created using wiki markup.

Recently, the number of publics that use the wiki list has grown significantly. After all, this is a great way to give the group a more pleasant and aesthetic look, and also helps participants to navigate through all sections more easily.

In this article, we will tell you how to make a Vkontakte wiki page for a group, how to make a menu in a VK group, what types exist, how to create, and much more.

Creating a clickable wiki page is feasible due to the fact that the VK text editor has the ability to use wiki markup. It allows you to insert pictures, links to them, videos and other elements using special commands.

The list allows you to create direct links to each category of goods/services or to various sections/discussions of the community (for example, portfolio, how to order, about the company, etc.). Any user can find the necessary information by pressing just 1 button.

This solution is a navigator for ordinary visitors and serves as a beautiful and stylish design for the community. It is an interactive tool that people will be happy.

Unfortunately, the VK developers have not yet created the ability to place a wiki list on the main wiki page of the public (so far it is only in a new tab). Therefore, people are forced to innovate and create separate posts that lead to a page with a menu.

Basic commands and features of the wiki menu

The functionality of the wiki page is very wide. With it, you can make your menu visually pleasing, well readable and structured.

Unfortunately, we will not be able to fit absolutely all the teams in our material, so we will only talk about a few.

Making a menu using media files

It is carried out using special buttons.

In text form, media files are: [​].

Where media XXXX_YYYY is the media file itself, options are various settings (for photos and videos), link is the caption that will be displayed when you hover over the photo/video.

For photo options are:

For video:

We create headings of various levels using the signs ==

Add "==" signs at the beginning and end of the title. See the screenshot for an example:

We work with the text of headings for the design of the menu of the VKontakte group

You can also use the following text options: italic, bold or gray, strikethrough or underline, superscript or subscript. It is also possible to align the text to the center or right. Below is a table with commands:

Using quotes to grab attention

Using the tag will allow you to beautifully frame someone's quote.

Lists can be used both numbered and bulleted.

For a numbered list, use the "#" symbol before each new item.

For a bulleted list, it is similar to the previous one, only with the “*” sign.

Working with indents

To indent, add a ":" before the word. Depending on the number of characters, the indent will increase or decrease.

Internal links in the group menu

These are links to internal social resources. network "VKontakte" (link to a person, community, discussion, application, page, video and image). They are added using the following construction: [].

External links in the creation of the VKontakte menu.

Wiki markup creates a table menu

You can also create a table using the wiki page and markup. See screenshot:

Informative spoiler

With it, you can make information hidden or revealed with one click. Well suited if you need to make a section with "Frequently Asked Questions".

A spoiler is created using the construction:

((Hider|Spoiler name
Text
}}

And it will look like this:

Thus, the teams will help to make a complete list with all the design elements.

Menu types: what are they?

Wiki pages on VKontakte can be divided according to different criteria:

• Text (text only);
• Graphical (using button images, backgrounds, etc.).

By display (depending on the image used):

• W covered (the structure itself is not visible);

• Open (all items are visible at once);

• With an adjacent or common banner (can be both open and closed).

Regardless of the type you choose, they all work on the same principle.

Also, don't be afraid to combine these types. For example, you can first make a graphic part with buttons (background, style, design), and then supplement it with various text information (for example, "Frequently Asked Questions" using spoilers).

How to create a text menu

Less popular and simpler is the text list on a wiki page. It does not contain any images or buttons. It's just a list of anchor links.

Below is a step-by-step instruction on how to make a text list for a VK group:

1. First you need to set up a community. To do this, go to "Community Management" and select the "Sections" section. Find the line "Materials", select the item "Restricted" and save the settings.

1. Further, "Latest news" will appear on the main page of the public. Go to them and click "Edit".

1. Enter a name.
2. Below is a text editor VK. This is where we will create our list.
3. Use the following construct:

Make all the necessary points. Each new item on a new line. Here you can use the various commands that we talked about above.

For example, we will write a simple and small construction:

1. Click save.

Here we have used "==" signs to highlight the heading and "*" signs to highlight sub-items. As a result, we got the following:

Thus, having done just a few steps, we got a completely understandable wiki menu, where each item will allow you to quickly go to the desired page.

You can add anything, as long as your imagination and the possibilities of wiki markup are enough.

How to create a graphical menu

To create a graphic menu, you need to have at least basic skills in working with graphic editors (such as Photoshop, GIMP, various applications, etc.). If you do not have them, then we can advise you to use the help of professionals or resources with ready-made templates (read more below).

Here we will talk about how to create a wiki page menu yourself. Below is a step by step guide:

1. Follow steps 1-3 from the previous instructions.
2. You need to create blank images with buttons. We will not talk in detail about working in graphic editors, since there are many lessons on working with Photoshop and other programs on the network.
   We will take the following images.

All three pictures are part of one big one. Therefore, when we create a navigation, these images will look like one whole picture with buttons located on it.

1. We upload images to the text editor VKontakte.

1. By clicking on each picture, you can select options and provide a link.

1. On the right there is a switch between visual and text editing modes.

1. In the text version, our images look like this:

1. Change the inscription "noborder" to "nopadding" to remove the distance between the pictures and close them. And after the sign "|" add a link.

1. Click "Save Page".

As a result, we got this menu:

With a little effort and ingenuity, you can create an original design that will fit into the overall design of the group.

How to fix

In order for the created wiki menu to be displayed on the main page of the community, you need to do the following steps:

1. Create a new post.
2. Copy your menu link. To do this, go to edit again and copy the URL from the browser's address bar.

First add an image, see the picture below.

Now publish and pin the post.

Here you will have to work hard on the image. After all, it will be constantly in sight. It should also fit into the overall design of the public and tell users that by clicking, they will be taken to the menu.

How to delete

Removing a wiki menu is not a difficult task. Simply go to "Community Management", section "Sections" and turn off the materials.

It is important to remember that if you used a pinned post, it will remain. Therefore, it will also need to be deleted (or at least removed from the pinned ones).

Ready templates

We would also like to present to your attention services, with the help of which you can download ready-made templates or create new ones in just a few clicks.

• You-ps.ru is a service with ready-made wiki menu templates and other ready-made community design elements.

• Vkmenu.com is an online designer. It allows you to easily and quickly create stylish menus.

Also, hiring a professional can be attributed to ready-made solutions. In this case, you also do not have to do everything yourself, but you will have to pay.

Outcome

We examined what a wiki menu is in VKontakte communities. We learned how to create it and use various commands.

We believe that the menu has not yet been appreciated. For a large number of people, this "wiki markup" is something super complex and scary. They don't even want to take it on. But in reality, as we see, everything is quite simple.

Don't be afraid to experiment and be original!

How to make the VKontakte group menu useful

How to create a VKontakte group menu: technical stage

So, we figured out the purpose of the group menu, let's get down to the technical part. Go to settings: Community management>Materials>Connect:

Save the changes and go to the group. Under the description of the group, the "Latest news" tab will appear, let's start editing it:

Switch to the “Editing” tab (1), change the menu name (2), enter your information (3), save it and return to the page (4).

Since 2011 editing vkontakte group menu became much easier, VK admins added a visual editor, so it became even easier to figure it out. I will make a reservation that the VK servers may not work as smoothly as you would like, or you may forget something when working with the code, so save the source code to text files on your PC. To do this, go to "Source code" and copy the result code.

If something is missing or you want to go back a few steps, go to the "History" tab and return to the desired save:

As I said above, we will start studying wiki markup a little later, right now we will fill our VKontakte group menu to a minimum. I'll give you an example from my group. I need traffic, so the content of the group menu is as follows:

As you can see, I prepared the information in a Word document, made text editing (highlights), added links and simply pasted this text into the "Edit" menu of VKontakte groups.

You can stop at this, but remember that the user does not really want to leave his "warm place" and go to the pages of our site. Therefore, for the comfort of our readers, we will add internal pages of the group that will lead to the article. Let this article be incomplete, but before going to our site, a person needs to understand that he wants this, and we are not “dragging” him there, i.e. need intrigue, interest.

If you go to the menu of my Vkontakte group, you will see that some links lead to internal pages (2), others to external ones (1):

I will add in real time, one more internal page:

So we have a new (internal) page in our VKontakte group. Now we need to fill it in:

1. Click the "Fill Content" button.
2. We fill the group with content. Let's edit it.
3. Set up page access. If you check "only members of the group can view the page", then this will motivate visitors to join the group. We save the page.
4. We copy the necessary numbers in the address bar of the page that we just saved. To do this, go to the "View" mode and copy the page ID - these will be the numbers that we need.
5. We return to the "Source code" page of the VKontakte group menu (I recommend not closing it while creating a new page ... although it should have been open for you anyway) and insert the numbers in the correct line. Between the text of the link (Marina Lazareva (video)) and the link itself (43820829), set the icon "|" (it is on the English keyboard layout, the keyboard shortcut is Shift+\).
VKontakte group design, which does not require additional knowledge of editors such as Photoshop. In the following articles, I will show how to create more beautiful VKontakte groups. Now, for those who can't wait to create beautiful design of the VKontakte group I recommend watching this video:

This is the video that made me realize how to make a vkontakte group menu on one's own. The author, using a real example, shows how to create a VKontakte group menu.

A little later, we will dive into the wiki markup of VKontakte groups in more detail, but for now, make your groups as functional and useful as possible.

Dropbox, read about it on the DragonBlog pages.

With respect and love, !

), make a menu.

Now I'll show you how to make a menu in a VKontakte group, and arrange it correctly.

Making beautiful graphics

In the new design of the Vkontakte website, the dimensions for graphics have been changed. Below you will find the current values.

• Group avatar — 200×300 pix
• Description banner — 510×271 pixels

Prepare the images in the right sizes. I will take ready-made pictures to show you on their example.

So, let's make a beautiful design by dividing the overall picture into two parts. As a result, we will get a single design.

First, upload your avatar. Go to the group and click "To upload a photo".

You will see a form in which you need to select a file on your computer's hard drive. Do it. As a result, we got the following.

Now let's add the second part of the image. To do this, you need to put the picture on the wall, and then record with it, fix it in the upper area.

I'm going to the wall. Here in the block "Add a note", click the Photo icon .

Upload the second prepared image. Be sure to choose to post on behalf of the community. And then click Submit.

Now the record needs to be fixed (see). We return to the new record, and expand the menu in the upper right corner. Here we click "Fix".

Now refresh the page and see the result.

The only negative is that the pictures are at different levels. But this is due to the fact that they are not the correct size. The avatar should be larger vertically. Then they will be on the same level.

How to create a menu in a VKontakte group

Let's go back to our example and imagine that we need to make a "Details" button. She's already in the picture. How can we make it a button so that when clicked, a person gets to our main site? I'll show you now.

To make menu buttons active, we need to cut them out as separate pictures. For this we need Photoshop.

Open our picture in the editor, and activate the tool "Cutting".

Cut off the lower part with the button. Hold down the left mouse button and draw a horizontal line, cutting the picture into two parts.

Now press Alt+Ctrl+Shift+S to save the finished images.

https://vk.com/pages?oid=-120208137&p=menu

See, after the characters "odi=- " , you need to insert your group id (see ). And at the very end of the link, write a title for your menu page. In the example, we will leave "Menu".

Here we click on the camera icon, and upload the prepared images.

Now we go directly to creating a menu for a group in VK. It should turn out something similar.

Next, go to the section "Editing". Here, for each image, we need to remove the padding so that they merge into a single image. To do this, in the code, add the following value "nopadding;" . And add a link to the desired page or site by writing the value "https://site.ru/page.html" (specify your addresses!). In our example, the button "Details", should lead to the site site. Here's what should happen.

[] []

We save the page. Don't forget to copy its address from the address bar. It should be of the form:

https://vk.com/page-120208137_52523487

We return to the wall of the group, and create a new post. In it we insert a link to the page, and attach the original image. Publish and fix.

This is the menu we ended up with.