How to make a beautiful menu in the group Vkontakte

By | 10.12.2018

How to make a beautiful menu in the group Vkontakte

The purpose of the Creator of the group in the social. network to attract more visitors. It is important that the guest wanted to join, to sign, to read the information, leave a comment or order merchandise. The need in the final result differs from the directions.

The first seconds of stay form the future actions of the guest. Therefore, the interface plays a big role.

Factors leaving the guest:

  • avatar;
  • description;
  • name;
  • beautiful and practical menu.
  • beauty;
  • content.

Как сделать красивое меню в группе вконтакте

To create a usable menu, encouraging not only to the action easily. But first you should understand how it should be.

What should be the menu

Using well-arranged menu, the visitor can easily navigate it and quickly get answers to their questions. Navigation allows you to create the right impression about the project.

Three main target groups:

  1. sale;
  2. increase traffic;
  3. the increase in active posetiteley.

For sales navigation group replaces the display in the store.

Как сделать красивое меню в группе вконтакте

Here should be most important buttons:

  1. directory;
  2. cost;
  3. shipping;
  4. promotional offers;
  5. reviews.

To increase attendance, the focus is on the content and flavor of the website or blog.

Как сделать красивое меню в группе вконтакте

Approximation of a common set of buttons:

  • interesting article;
  • helpful information;
  • subscribe;
  • reviews.

To increase the activity participants should encourage their promotions, polls and interesting and unusual content.

We offer the following buttons:

  • subscribe to news;
  • ask interesting thematic question;
  • shares;
  • questionnaire;
  • the vote.

Как сделать красивое меню в группе вконтакте

Consider how to create a menu for the group in contact, all the technical issues, which require a minimum knowledge of the graphic editor and basics of working with Facebook.

Create in stages

The creation of navigation – the process exciting, challenging, and lengthy. But the result is worth it.

The whole process is conditionally divided into 2 stages:

  • working with photoshop;
  • technical Appendix.

video: menu for the public

Working with photoshop

Before proceeding, it is necessary to visualize the design or overall appearance and its components. Special knowledge is required, simply follow the steps of the user.

Algorithm of actions:

  • install and run the program «Photoshop»;
  • under «File» choose «Create»;
  • in the resulting window, specify:
  1. a maximum width of 630 pixels;
  2. the altitude of 725 pixels;
  3. content background is white.

    Как сделать красивое меню в группе вконтакте

Next you need to divide the workspace into 2 Windows. They will then attract the attention of visitors and will make sure to move around the group.

This is done by using the tool «Rectangular area»:

  • click on the icon with the right mouse button;

    Как сделать красивое меню в группе вконтакте

  • select the tool «Rectangle»;
  • using vertical and horizontal rulers as a guide, select the rectangle size 200х710 pixels using the left button of the mouse.
  • Attention! Make sure that the ruler measure in pixels and not other units.

  • after, click Delete;

    Как сделать красивое меню в группе вконтакте

  • in the window that appears, set the use to 50% gray;
  • click OK;
  • likewise, create a rectangle the size 382х442 peaks, as shown:

    Как сделать красивое меню в группе вконтакте

Work with graphics:

  1. below this layer, place your design:

    Как сделать красивое меню в группе вконтакте

  2. next, write the desired text.
  3. using the tools drawing shapes, draw buttons:

Approximately should look like this:

Как сделать красивое меню в группе вконтакте

Save the rectangle located to the right of the individual picture by setting the size 200х500 pixels. Avatar is ready to be loaded via the button «Upload photo» in the VC group.

Second image must also be divided by the number of points. This is done so that each button assign link.

The first step is to make a layout:

  1. the shortcut «CTR+R» turn on the ruler;
  2. hover the cursor over the top ruler;
  3. holding the left mouse button, drag down to the lower border of a button;
  4. repeat for each button.

    Как сделать красивое меню в группе вконтакте

Create the fragments:

  • take the tool Slice Tool;

    Как сделать красивое меню в группе вконтакте

  • at the top there is a button «Fragments on rails»;

    Как сделать красивое меню в группе вконтакте

  • should look like this:

    Как сделать красивое меню в группе вконтакте

Save images:

  1. click File – Save for web;

    Как сделать красивое меню в группе вконтакте

  2. enter the name;
  3. specify the format JPEG;
  4. put the best quality;
  5. mark a tick «Progressive and Embedded profile»;
  6. the last button «Save».

How to clean the computer from unnecessary programs? Manual here.

Then proceed to the technical part. You need to upload the images created in the group.

The technical part

The finished image must be transferred to the group. Performing the steps below, this task can be easily overcome.

Important! The fill menu is different from usually download the photos or pictures.

All in order:

  1. go to the group;
  2. turn on the news;

    Как сделать красивое меню в группе вконтакте

  3. near strip «latest news» click on «Edit»;
  4. change the name on the menu or something like that;

    Как сделать красивое меню в группе вконтакте

  5. using the button with the camera, add pictures;

    Как сделать красивое меню в группе вконтакте

  6. the result will be about such:

    Как сделать красивое меню в группе вконтакте

Now the most important, actually what all of this was done. Add functionality menu. Individual picture, you need to assign «his» link.

By clicking on the link, the visitor will quickly get the necessary information.

If you want to insert a link to write on the wall:

  1. find the desired entry;
  2. click on it with the left mouse button;
  3. copy the URL in the address bar.

To insert a link to another website, group, landing page and others:

  • go to the source where you want to send the visitor;
  • copy the desired address.

Как сделать красивое меню в группе вконтакте

Then just paste the link to the corresponding picture. Here is the code of a picture that appeared in the download window pictures: [[photo37602118_351733570|400x90px;noborder|]].

After the «|» symbol just paste your link. It will look like this: [[photo37602118_351733570|400x90px;noborder| link]]

Save changes button at the bottom.

Attention! Changes may not immediately appear. It is recommended to go to your main profile and then re-enter group.

How to create menu in JavaScript wiki markup

Wiki markup is a special language used for creating web pages in social network groups.

This tool allows you to create:

  • effects;
  • unusual menu;
  • signs;
  • navigation elements;
  • to format the text.

In short, the markup allows you to create a mini site Vkontakte. It is very convenient, especially for sales and recruitment of followers.

This design intuitively makes the visitor to stay, click on the button. That is, restrains and stimulates to action – and this is something that you need.

Visually it is very similar to HTML layout. But it does not require long training and a special mindset.

Video: menu with search by category

Nuances of creation

In fact, what has been done above (sharing and uploading pictures) has elements of a markup. This is an advantage of this tool. Automatic conversion to tags, with a simple download of pictures.

However, it is important to know the specific tags that help to make even more functions and beauty. For example, when you fill individual parts of the image between them can form white stripes. Remove them just by adding a tag noborder.

Here it is: [[photo37602118_351733570|400x90px;noborder| link]]

The basic tags presented in the table below:

Как сделать красивое меню в группе вконтакте

Work with pictures

In order to attach a link or text to your image with the option to slightly modify it, enter the following code:


Where options is replaced with:

  • noborder — removal of the frame around the image;
  • nopadding — removing the gaps between the image;
  • plain — insert a link to an image. Is made in the form of text, without graphics;
  • nolink — the removal of the reference picture;
  • box — opening the image in the window;
  • NNNxYYYpx or NNNpx — specifies the size of the photo in pixels.

Create table

No matter what menu (text or graphic) you create, without inserting the table, you are unlikely to do. Otherwise, you can just paste the text in the box news and do not format it, spending so much time.

Как сделать красивое меню в группе вконтакте

Create a table using a special set of symbols, where each of them is responsible for a certain part of the table:

  • {| symbol of the beginning of the table, without it the table can not be. Used always;
  • |+ is responsible for the location of the name table in the center. Put characters after the beginning of the table. Is optional;
  • | denotes the start of a new row and cell.
  • | symbol that makes the cell transparent;
  • ! makes the cell dark color. In the absence of the need to apply the previous sign;
  • |} to mean the end of the table. An optional symbol, however, is used to prevent the occurrence of errors.

When completing the table, the contents of each cell must be placed after the |, and when you split cells, you need to duplicate the string types like so: || or !!.

Layout features

There are a lot of unwritten rules, it is a lot of hassle for novice programmers. As a rule, all is learned in practice. Each finds their own loopholes, each has its own specific challenges.

Как сделать красивое меню в группе вконтакте

In order to avoid the major mistakes you should know the basic of them:

  1. you need to be careful when changing the image size – if it is less than 131 pixel, its quality will deteriorate significantly;
  2. width of the picture must not exceed 610px;
  3. on one wiki page, it is forbidden to place more than 17 unclosed tags;
  4. if you change the image width, the height changes proportionally and automatically;
  5. a list inside of a table should be created using the tag

  6. in one line of markup should not be more than 8 list items.

To create beautiful and functional navigation, you need to know the basics of photoshop and wiki markup. However, the latter contains its own nuances, faced with which the novice, can be permanently stuck and confused.

Important! Check the closing of all tags. Save the sequence.

The main assistant in this case is the care and strict adherence to instructions. Help can always come to the official page of VK, which is called wiki markup.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *