How to work with wiki markup on VKontakte. Creating wiki pages on VKontakte - wiki markup for dummies

Hello my dears!

Today I will tell you in detail, how to make a menu for a VKontakte group. In my experience menu in the group in contact increases the number of calls and requests by 20%. It is important to take a responsible approach to creating a group menu. Therefore, I have prepared a menu PSD template for you to make your work easier.

Let me start with the fact that today there are two menu options:

Option 1: Closed group menu

Closed menu, opens when you click on the link. In the example below, the menu opens when you click on the “OPEN GROUP MENU!” link.



Option 2: Open group menu (pinned post)

An open menu is essentially a pinned post with an active link.



The second menu option appeared relatively recently, when it became possible to pin posts from the wall to the header of a group or public page. It is now the most effective.

Both options use wiki markup. Wiki markup allows you to easily and quickly design the appearance of the group, creating graphic tables and spoilers, formatting text and working with images, links and anchors. I will not dwell on the markings in detail, because... VKontakte has a built-in visual editor that automatically translates your content into wiki markup. Here I will give only the basic codes, without which it is impossible to create a menu.

How to make an open menu on VKontakte

We will analyze the process of creating a menu using the example of Option 2, i.e. open menu.

To make it easier for you to navigate, I have prepared for you Menu PSD template: [Attention. The design of VKontakte has changed. New layout and other relevant information in]

Group Menu Template PSD

To create an external menu, you need 2 pictures: an avatar (on the right) and a central one (action picture).

Avatar dimensions: 200 x 332 px

Dimensions of the central image: 395 x 282 px



Step 1.

Using the group menu PSD template downloaded above, make two pictures of the required sizes.

Step 2.

In your group, go to “Community Management” (on the right under the avatar). Find the “Materials” item (on the “Information” tab) and make them “Restricted”.



Step 3.

Now return to the main page of your group and click “Edit” in the “Materials” block that appears (I have already renamed it to Group Menu).



When editing the page, set the title, you can create sections or any other information using the toolbar. Click "Save Page" and "Return to Page"



Step 4.



In my example https://vk.com/page-42211349_47355854,

The first numbers 42211349 are your group id

The second digits 47355854 are the page id

The trick: you can create additional pages manually. To do this, follow the link like:
https://vk.com/pages?oid=-хххххххх&p=pagename
Where,
xxxxxxxxxx – this is your group id
pagename – the name of your page

Step 5.



And publish the post.

Step 6

Now upload the group avatar (picture on the right). A duplicate avatar picture will appear on the wall - delete it.

Step 7

Now attention. Click on POST PUBLICATION TIME (lower left corner of the post).



And click “Pin”. Close this window and refresh your group page (F5).



Step 8

We write the group status (use only 1 line) to align the pictures if the drawing on your avatar does not start from the very top (in my avatar template, option 2). And this is what we got:



RESULT.

The menu is ready! Now, when you click on the central image, your menu opens:



Here you can edit it, post photos, videos, create new sections, place links.

You can also create a graphical menu (submenu) inside the main menu. Its width should not exceed 600 px. The height is unlimited. Which allows you to create excellent VKontakte landing pages.



But I will talk about this in more detail in the following articles. Subscribe to blog updates to stay up to date with new features. Like and share the article with your friends.

Post your questions or opinions in the comments below.

The article will talk about what a wiki is and why they are provided by the system. This term was coined by Ward Cunningham in 1995. It was at this time that the first wiki environment appeared. It is worth noting that the word "wiki" is borrowed from the Hawaiians. It means “fast” in translation.

1. A unique look for pages and posts. They can be edited by any site visitor. You can change both texts with pictures and the structure of the portal itself.
2. A constructor designed for creating extensive virtual encyclopedias.
3. Philosophical theory and special technologies.

What is wiki markup?

If you want to learn how to make wiki markup on the VKontakte social network, before training you must familiarize yourself with the presented material, which contains information about the wiki. Today, the most common wiki site is considered to be the huge Wikipedia. In second place is the multi-user project “Wikia”. Following him are small encyclopedias.

What is the organization of such resources?

What components do they contain? This should definitely be sorted out. An electronic encyclopedia can contain many pages, headings, sections, and other things. These components are intertwined into a single network, forming a common space. A special tool called wiki markup is capable of developing such a huge resource. It allows you not only to create various encyclopedias, but also to create VKontakte communities.

Wiki markup consists of special tags that make it possible to develop an individual design for your own group. This tool allows you to add various additional pages and links to the community. Thanks to this, it is possible to create a small encyclopedia within a specific community. Thus, a wiki is an analogue of the HTML language, but this markup is much lighter and simpler.

What is the connection between the wiki and VKontakte?

First, we should raise this question: what benefits does this tool bring to the VKontakte social network? This markup allows you to do the following:

Create an original menu;
make marks;
develop signs;
add new navigation components.

The user must come up with a beautiful, unique design that can distinguish a certain community from many others. Before changing the design of a group, it is worth learning how to use its constituent elements. This applies to “Video”, “Photos”, “Wall” and others. In addition, you should select interesting and valuable information so that the community can attract and retain new subscribers.

Advantages of a wiki

Surely, most users will want to know how to make a wiki markup for VKontakte. But first of all, it’s worth saying a few words about the advantages of the tool. It should be noted that it is much lighter than the HTML language. This means that anyone can master it without any problems. Another advantage is the ability to save all changes that were previously made on various pages. In addition, at any time you can compare all options and choose the best one.

Wiki secrets

To become a professional wiki markup, you need to spend a lot of time. But first, the user needs to know certain points about this system. For example, images with a size that does not exceed 131 pixels become low-quality. There are certain rules: one page must contain up to 17 tags, and a line must have no more than 8 components. When you set the width of the image, its height changes automatically in accordance with all proportions.

To develop a new page in the community, you will need to provide a link to the article in the text. It is worth noting that additional pages appear immediately after typing fresh material. To enter links in wiki markup, special brackets are used - []. Inside it is the link itself. If you click on it, you will be taken to a new page. Then it should be filled out and edited. That's it, the new page is ready.

Using the VKontakte wiki markup, you can create many such pages. As a result, you will get a kind of miniature website located inside the group. It is worth noting that beautifully designed text is of particular importance. It is convenient not only for reading, but also for perception. It is recommended to pay due attention to headings, alignment, lettering, etc.

Each type of formatting on a wiki has its own tags. However, it is possible to use some characters from HTML. After all, wiki markup uses not only special tags, but also most of the various characters from the HTML language. This means that you can use double notation for certain functions. It’s also interesting that wikis are quite a smart tool. If elements from HTML markup are found in the text, it is able to independently replace them with characters from its own language.

Creating an Anchor Link

As for links, they may vary. There are not only cute buttons, but also serious anchors. Using the VKontakte wiki markup, it is possible to create both. In this case, you need to remember one important rule: the text should be placed only to the right of the link, and the image - to the left. After this, you should learn how to attach an anchor. To do this, you need to open the square brackets and insert the required link. Then the sign for separating elements is set - ǀ, then we write the text itself. After this, you are allowed to close the brackets. Approximately the following is obtained: [[link.ru ǀ My site]].

First you need to create a button. To add an image, you can use the word “photo” by typing its number in the group album. Then you need to put all the information back in brackets. First you should enter a photo, and then a link. The result should be something like this button: []. You should pay due attention to the functions that are available for working with this image:

Plain – text link to a photo without a picture;
noborder – remove the border from the image;
box – open the picture in a new window;
nolink – remove a link to a photo;
nopadding – remove spaces between images;
NNNpx – image width;
NNNxYYYpx – photo dimensions.

These functions must be inserted before the link, alternating them with a separation sign. In addition, you can insert a caption to the image, separating it from the rest of the characters.

Creating tables using a wiki This task is quite simple to complete. To insert into table text, special characters are used. First you need to look at what it consists of. You can see the following:

(| — opening the table;
|+ - title, center aligned;
|- — new line;
| — creating transparency;
! — dark cells;
|) - closing the table.

As for the last two symbols, they are variable. For example, if a dark cell is created, you cannot use the Transparency function. You can insert anything into the table. These can be pictures, links or texts.

Menu design

It’s worth seeing how the wiki markup for the VKontakte menu is created. First you need a beautiful drawing and some knowledge. Please note that there are several types of menus:

You should prepare a drawing in advance, the width of which should be up to 610 pixels. This is due to the size of the group wall on the social network. It is necessary to cut the picture in Photoshop or any other editor designed to perform similar functions. The result should be the required number of buttons. On each of them you should write the name of a specific menu item. After this, you can go to your group. In it you will need to find the control panel and connect the “Materials” tool.

When you return to the main page, you will see a “Latest News” link above the discussions. Once they are edited, you can use them as a basis when creating a beautiful menu. Then you should upload the pictures prepared in advance to the group. You can save images to any community album and insert them into a News article using the built-in visual editor. To start editing “News”, you need to switch from this tool to the “VKontakte Wiki Markup” mode. You can then connect the pictures with links to different menu items.

Where can I learn how to create wiki markup?

There is an official group on the VKontakte social network that is entirely dedicated to wiki markup. In it you can familiarize yourself with educational materials and also get valuable advice. Various applications have been created to use the wiki language, where you can practice creating a community. There are also design samples for groups. They will help you complete quick registration if you have absolutely no free time. For beginners, templates and advice from experienced users will be excellent helpers.

I think everyone who actively uses the VKontakte social network has already come across beautifully designed groups and public pages. Many of them, in addition to the menu, also have many stylized sub-pages, catalogs, etc., which essentially creates a small website right inside the social network.

Here are a few examples so everyone understands what we're talking about.

Such groups allow you to stand out among your competitors and attract more users. Especially if the content is also interesting :)
In this article we will talk about how this is all done. 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 group design.

The very first stage of our work is the idea. We need to understand what we want to tell and to whom. There are several community formats in VKontakte, and you should choose based on your goals. Although in the future the group can be transferred to a public format and vice versa.

I explain with my fingers. Public- this is something like a blog. News feed. In other words, we tell our subscribers about certain things and they will not be able to write on the wall of our community. The maximum is to comment.

Group allows you to create a community 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 “News” section into which you can integrate a menu).

Globally, we can think like this: if we need to create a community for a 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 they see fit. After all, the format can be changed at any time. However, keep in mind that VKontakte introduces a restriction on changing the community format again and after the first time you will need to wait several 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 as a starting point the game Mad Max based on the film of the same name, which was released just a couple of weeks ago, and will 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 audience and maximize communication within the community. Let me clarify right away that I will use a universal technique that can be used both in a group format and in public. This works everywhere.

There is a lot of content, let's start bringing 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 a community”.

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

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

As you can see, I added a few parameters: I included video, audio recordings, discussions and a number of other features that will be useful to me in 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 don’t have a website, or its topic does not correspond to the format of the community (they are about different things and are in no way related to each other), then this line can be left blank.

In this case, I set the age restrictions from 18, similar to those that the developers set for the game. Although I have little doubt that children also play.

All. The group has been created!

Now you can start to design it.

Formatting a VKontakte group

This stage can be divided into 2 components: graphic and technical. To work, we will 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 even? A template is a kind of blank. In this case, in *.psd format we have marked out areas for the image under the menu and the group avatar.

As you can see in the second example at the beginning of this article, we can design the avatar and menu image in the same style. 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 displacement of graphics and fit the pictures to the same level as much as possible.

To make it clearer, here is an example.

We see that in both parts of the picture there is a strip overlooking a residential area. Without using a template, it is almost impossible to do it exactly the first time. You will need to adjust the pictures, measuring discrepancies up to 1px. Whereas when using a template, we simply add graphics to it within the markup and immediately get the desired result.

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

In the meantime, we are proceeding directly to the graphic design of our new group. This is where I take the path of least resistance and head to Google Images to find parts of the design. You can also use Yandex. Who likes what more?

I don’t have a design education, so we won’t dwell in detail on the issues of choosing fonts and other details. After doing a little magic in Photoshop, I got this result.

On the left fragment (where it says “Menu”) you can also add several triggers. In this case, I decided to do without them. All. The avatar design is ready. In Photoshop, press the hotkey combination Shift+Ctrl+Alt+S and save our fragments to a folder on your hard drive.

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

Setting an avatar and menu for a group

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

Add a picture. Specify the fields and select a thumbnail. Everything is simple here and there should be no problems.

As we can see, you need to know the community id. It's very easy to recognize him. Find the menu in your group (immediately under the avatar) and open “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 paste the resulting value into the script form and write the name for the page that we want to create. In this case, I type in “Menu”.

It is worth noting that the page will be created only if the window with the group is open in the adjacent tab. Simply put, you must be logged in to VK in the same browser. After all, only the group administrator and the people appointed by him have access to such manipulations. A random passerby will not be able to easily go and change the settings of a group to which he does not have access to the admin panel.

If everything is done correctly, a page like this will open.

This is the same window where we will later create a wiki markup and create an internal menu for our group. For now, all we have to do is write something here. Then click the blue “Save Page” button and click on the Return to page link at the top.

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

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

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

Click send. Then click on the time the message was sent and select “Pin” from among all the options. We update the page (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 VKontakte group menu

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

I won’t go into detail now about exactly how I put together the menu. Here's what I got.

Minimum fields. Vertical layout. Ideal 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 to 500 px, so that later nothing will shrink and I won’t lose the quality of the image twice. Height is not important.

We cut the image into fragments and save them.

All. The time has come for the final chord - we are collecting the menu in the group itself.

To do this, we return to the main page of the group (where the feed is and our picture link leading to the menu). We click on the menu image and get to the same page that we 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. Let's click on it.

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

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

I want to position the menu in the center and so that there are no gaps between the fragments. Therefore, we wrap each of the elements in a tag

The first and last menu elements should not be buttons - in my picture they are just a graphic element without a link to the internal page, so we add the “nolink” parameter to them. This will remove the ability to click on this element to open a piece of the picture in a separate window. Now nothing will happen with a mouse click. This is the normal page background. Inactive.

In my case the menu code looks like this.

Separately, I would like to note the fact that after importing pictures into VK, the built-in system sometimes incorrectly indicates the image sizes. Therefore, we need to carefully monitor this and display exactly those that we planned at the design stage. Otherwise, everything may fall apart and the puzzle will not come together 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 - we need to create the very pages where our menu will send people. To do this, let’s turn again to the script for generating wiki pages and this time order three pages at once. In this case, you also need to write something on each one 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 wiki code of the menu in the form page-102302049_51013384, where the first number is the group id, and the second is the page number. Although, in general, this is not important. 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 specifically dedicated to this matter. The guys described all the key points and in their catalog you can easily find the necessary element and figure out how to add it to your wiki page.

Before diving into the wiki markup, creating interactive menu, you need to do some preparatory steps, first of all, change some settings in the group. Click on “Community Management”, open “Discussions”, and connect “Materials”.

Now let's move on to preparing the images. If you do not work with graphic editors, you will have to turn to freelancers. Further work will be shown using Photoshop, but can also be done in other editors.

We prepare sample for the VKontakte group according to the image.

The dimensions of window A, in which the menu will be placed, may differ from those indicated. It all depends on what sizes you set for the menu buttons. The proposed option provides one button per line. If you need to place two buttons in a line, then the width of window A needs to be reduced to a maximum of 377 px. The height of this window in most cases is selected empirically. In the proposed version, a height of 377 px was chosen when placing each element of information on one line on the front page of the group.

Next, we prepare a suitable image, write inscriptions and cut the entire drawing into sections, taking into account the fact that each individual section, with the corresponding inscription, will serve as a menu button. We won’t go into depth here on how to do all this, since this article is not a Photoshop lesson.

Having saved and deleted unnecessary fragments (Photoshop cuts and saves the entire image and the white fields too), we will rename the fragments, numbering them in the order of their location in the menu.

Now let's move directly to the group. After adjusting the settings, two tabs appeared on the wall: “Latest News” and “Discussions”. Click on “New Topic” in the discussions tab and create the first page of our menu.

You need to name it according to the name on the graphic menu and fill in the description field. After filling out all the necessary information, click “Create topic”.

The created message will appear on the wall. In the same way, we create the number of pages we need (in accordance with the menu sections).

After completing the preparatory operations, we can move on to editing our menu. To do this, we need the “Latest News” tab. Place the cursor over it and click on “Edit”.

Next, something already familiar will be revealed to us. While in visual editing mode, by clicking on the camera icon in the editor, we load all the fragments in the sequence in which they are located in the overall image. We are also changing the name to something more understandable for our visitors. After that, switch to wiki markup mode and edit the code.

Sample code for the menu in question:

[]
[]
[]
[]

It is important to keep in mind that for fragments that do not serve as a button, you must enter “nolink” instead of a link to the page. Otherwise, the fragment will be clickable, and each time you click on it, the fragment itself will open as a separate image.

If everything is done correctly and there are no errors in the code, then when you return to our group and after clicking on the name of the tab (Group Main Menu), the menu we created will open, which looks like one with the avatar. The interactive menu and graphic design of the group represent a single composition. When you click on menu sections, we are taken to the corresponding sections of the group.

If the menu does not coincide at the bottom level with the avatar, in the code in the bottom fragment, changing the height in px, achieve alignment. If this is reflected in the quality of the drawing, then in the original graphic editor template, make changes to the size of the desired fragment and redraw the layout.

We looked at how to do interactive menu or create a group in wiki style. If you have any questions about the preparation process itself, write in the comments and we’ll try to solve them together.

This article will be a detailed manual and I will tell you how to make a menu for a VKontakte group. A beautifully designed VK group menu contributes to a real increase in visitors and sales growth on the site.

Hello my dear readers. Let me tell you today how to make a beautiful menu for a VKontakte group and completely free. By the way, having learned to create such topics, you can earn a little money from this -))). Not a single commercial website operates without creating its own community on social networks, especially VK, which is guaranteed to help bring in new clients, as well as promote your business.

But if your community is not attractive and like everyone else, who will want to stay there? I think no one!!! So let's decorate our groups with high-quality design and learn how to do it very quickly. Before you start creating graphics and our future menu, you need to install the Photoshop program on your computer for further cutting of pictures. Many will ask why you need to cut pictures at all. The point here is that for each menu link we will have to create a separate strip from the general banner.

Today there are several types of created menus:

• Open with active items;
• Closed as a pinned post;
• With individual pictures or a common adjacent picture of the banner and menu.

The essence of creating both options is the same. The only main difference is in the additional elements and record types, and this will be discussed in more detail in this article.

To work with the menu it will help us wiki markup, which is built into the VKontakte text editor today. It differs from the usual one in that it will use standard commands to display a particular image and insert links to the necessary elements. The wiki markup itself allows you to insert code to display images, videos and other elements.

VK group closed menu

In this case, we will see to the left of the main group avatar a hyperlink in the form of the inscription “group menu”, when clicked on, our menu with active items and images will open.

The menu will look like this:

Open group menu (pinned material)

The idea is to create already open menu items that will be displayed in the description of the group itself, where it is usually displayed for all conditions. Our picture will be attached to the description, which we will prepare in advance and link it to the page on which we will have active items. This menu has become very popular recently and is in demand among customers. They look like this:

How to make a beautiful menu for a VKontakte group: step-by-step instructions

So, first of all, we will need to create the main avatar of the group, which we will place on the right, and the stub for our menu in the form of a banner.

• For an avatar 200x332 pixels;
• For the main menu banner, 395x282 pixels.

As you may have noticed, the height of the images is different and this is done so that the images do not move down in height and are at the same level since the height of the community name and status takes up about 50 px and we will need to remove this value from the height of the menu.

To make it clear, if the height of the main avatar of a group is 332, then we subtract 50 from it and get the height of the main menu equal to 282. If the dimensions do not matter, then the height can be set arbitrarily.

The next step after creating a community will be setting up materials, and here we need to prohibit participants from creating additional pages and blocks, but only writing on the wall. To do this, you will need to go to the section under the group avatar called “community management” where we need to make our materials “restricted” as shown below.

Now let's start creating the overall composition. You can, of course, simply insert a picture instead of an avatar and into the description, but let’s not be amateurs and I’ll show you how to do it professionally, so that it is one full-fledged picture, turning into one another.

Let's create a new canvas in Photoshop with dimensions of 600x350 pixels, which we will use as a stencil by cutting out openings in it for our pictures. To work, we need to convert the sizes of all elements and rulers into pixels and this is done along the following path: “Edit-installation-main” and here we set the pixels.

The next step in creating an open menu is to make cutouts for the banner and avatar, which we will then receive for downloading. To do this, go to the section of the left vertical menu and select cutting.

Using the left mouse button, as if you were selecting an area, you need to select blocks of the sizes we need and after each selection, press the “Delete” button and select 50% gray. Such actions will lead to the blocks being of the required size and highlighted in a color different from the main background.

It should look like this:

Now we just select the eraser and use the “magic eraser” function to click on each gray block and get a stencil with cutouts. The next step is to select our main image and place it under the background and get ready-made pictures on which you can write text with the name of the menu or other advertising elements.

Great. After you have placed a picture of our design, we just have to select “save for Web” and as a result we get 2 of our pictures. Now we go back to our group and can fill in the main avatar (vertical). We will use the banner for the menu a little later when working with the wiki markup code.

Let's create the menu itself, with active items that will redirect the user to the necessary sections of a third-party site or to albums and catalogs in the group itself. We will use a new image for variety -))).

So, let's go back to Photoshop and create a new canvas with dimensions of 400x300 pixels. Then select in the section: file-place and select a picture for the menu background.

We place the buttons of our future menu on the picture and cut the picture as we did above by selecting the necessary blocks. After which we also select “save for web” and get a folder with our cuts. In my case, I got 4 pictures in a separate folder.

Now we need to upload the pictures downloaded from Photoshop into a separate album and hide them from prying eyes. After loading, each picture will receive its new name and unique id.

Please note that you must have:

• Materials are opened in “restricted” mode;
• Discussions included;
• The folder with photos is open to everyone.

Now all that remains is to configure our page where the menu will be displayed. To do this, go to the main page of the community and select fresh materials and edit and call “OUR MENU”.

Next, we need to insert the pictures that we received when cutting in Photoshop. Some people use markup codes, but in order not to overthink it, I suggest that you simply select inserting a picture by clicking on the camera icon and upload one after another.

Working in a text editor, if after loading the pictures, we click on the icon in the form of brackets in the upper right corner, we should see this code:

Advice: An important point after loading images is to remove the padding. This can be solved by inserting “nopadding” before the image sizes.

For clarification, it is written below what comes from where, but considering that everything will be inserted automatically and there is no need to be clever, and open as some write each picture and take the id, then we simply download and save.

[]
where xxxxx is the id of your image
yyyyy - width in pixels (maximum 388)

It should end up looking like this:

Now our pictures are collected in a separate banner. And in order to add a link to each item, simply click on the image with markup disabled and in the link section paste the copied url.

And now we come to the most important and final point in creating our VKontakte menu. Now we need to save our page with pictures and copy its address. In my case it looks like this:

http://vk.com/page-116682062_51411604?act=edit&hid=183950676§ion=edit

Remember, at the beginning of the article we made a stub menu, which will be a continuation of our main avatar, and we made a stencil for it. This is exactly what we need now.

Go to the main page and do the following:

Step #1.

We paste the address of the page into the text field for a new post on the wall, after which it will be converted into a link.

Step #2.

We attach an image of our menu placeholder to the post and click send.

Step #3.

Now, after publishing the post, click on the creation time in the lower left part of the post and select “PIN”.

Great!!! Let's finish here. Now you know how to create cool menus and you can earn good money from it. I advise you to do everything in the following order:

• We come up with a structure and order the design of menu images;
• We resize and cut all images;
• Insert pictures into albums;
• We edit all the cuts in the editor and publish them on the main pages of the group.

As a result of our work, we will get this menu.

But the menu itself, when clicked, will pop up with active links. It’s worth playing with the sizes and adjusting them to fit your screen, but don’t forget about display on mobile devices.

IMPORTANT: After changing the VK design in 2016, new changes were made when creating images and requirements for pictures about which.

Download VK group menu template + all lesson sources

I hope the material was useful, and you now easily understand how to make a beautiful menu for a VKontakte group. Subscribe to blog updates and see you soon in new posts. If you have any questions, write them in the comments, and I will definitely help you.

I am attaching a video to reinforce what you read -))).