• Ready-made VKontakte group design. Wiki markup to help. What is wiki markup

    In this article we will look at how to beautifully and correctly design a group in contact so that it is as convenient as possible for visitors.
    Consider, how to beautifully and correctly design a VK group we will not be from a design point of view, but from the point of view of the goals that the group faces.
    The main goal of any group– to win over the visitor so that he immediately understands what the group is about and wants to become a member. To make the group as convenient as possible, you need to minimize the number of actions on the part of the visitor. That is, ideally, for the user to understand what the group is about, he should not make any additional clicks or scroll the page.

    In order to figure out how to properly structure a group in contact, let’s look at its structure according to its main elements.
    I have prepared a special visual diagram with explanations.

    A diagram of how to beautifully and correctly organize a group in VK.


    You can see the diagram live follow the link.

    1. Avatar.
    The main graphic element of the group. Its structure may vary depending on the topic of the group. One example suitable for a sales group is shown in the diagram. Key recommendations for avatar design:
    A) Conveying the essence. The main purpose of an avatar is to convey key features group, tell what it is about and for whom. Not only the picture itself, but also the text inscriptions will help you with this. However, it is advisable to keep the text as small as possible.
    B) High quality image. The graphics should be of high quality and beautiful, but nothing more. The avatar should not distract excessively from the main content.
    IN) Use every possible space. Maximum size avatars output is 200 by 449, it is not advisable to do less. If you do more, then maintain the proportions.

    2. Group status.
    Despite the fact that this is a relatively small page element, it is quite important. The status should briefly convey the most significant information about your group. The maximum status volume is 140 characters.
    Try to make the status as clear and local as possible. Use icons. Icon codes for insertion can be found, for example, .
    Examples of icon codes for selling groups:
    Phone - code: _9742;
    Icon send message code: _9993;
    Pointer - code: _128073; or code: _10145;

    3. Description of the group with a menu or pinned post.
    Below the status in the very center of the page is the main content. There are 2 main options for what can be in the content. This is a description of the group with a menu and a pinned post from the wall.
    The menu is quite convenient in terms of navigation, but requires an additional click to expand, so we will not dwell in detail on creating a menu for a group. Materials on the topic wiki markup there are plenty on the net.
    For computer version In our opinion, it is better to make a pinned post the main content of a group, since it can take up the entire usable area, is quite convenient and does not require additional clicks from the user.
    General guidelines for creating a pinned post:
    A. The main text should be as easy to read as possible. Make heavy use of icons and badges.
    B. The total height of the pinned post should not go beyond the bottom border of the avatar. Experimentally, you can select the optimal amount of text content.
    B. The recommended size of the attached picture is 395 by 289. These sizes are optimal for placing key information in it.

    In addition to the main elements, there are also others that are no less significant, namely: group wall, discussions, albums, videos, documents and contacts.
    These elements are essentially group content. Content– this is the main reason why a visitor subscribes to the group. Content should be formatted according to the group's basic style. But the design is not so important as the content of the content itself.
    If the group is empty and, apart from the design, does not contain anything valuable, it is unlikely that anyone will subscribe to it. We will not write in detail about the content in this article. An article about how to beautifully and correctly design a VKontakte group. If you need help writing content, you can contact us as part of the “ ” service
    That's all for today regarding group design. Write your questions about the article in the comments below.
    For questions about ordering services, write to icq 275129,

    In this article we will take a step-by-step look at how to properly create, configure and properly design the VKontakte community.

    Community creation

    You can create a VKontakte community by going to the “groups”, “management”, “create community” tab.

    Type of community and topic

    First, you will need to decide on the type of community, depending on your goals, and choose the topic of the community.

    Group registration

    After choosing the type of community, you can move on to the most important thing, this is the design. The design of your community is a kind of business card of the company; depending on how high-quality the design is, your potential subscribers will draw conclusions about your work.
    You can download the cover by going to “settings”, then clicking “download”.

    On the cover you can place:

    • Name
    • logo
    • motto
    • contact information
    • promotions or call to action
      Important point:       The cover is the first thing a client will see when they go to your group, so the cover should be bright and attract attention.

    Cover in the MTS community

    Cover in the Tinkoff Bank community

    Cover in the HeadShot community
    Image sizes for VKontakte community design.
    Cover size for VKontakte group 1590x400px
    Avatar thumbnail size is a circle with a diameter of 200px

    Also, VKontakte recently introduced dynamic covers for communities.
    Dynamic covers have very rich functionality, with which you can display the last subscriber, the best commentator on the cover, set the background to change at your request, add a weather widget, time and much more.

    Community Description

    In the description, the main thing is to describe as briefly as possible the main advantages of the company.
    Important point: there is no need to describe everything that your company has done, is doing or will do. No one will read a long description. You have a few seconds to attract attention before the client starts looking at posts on the community wall. Therefore, the description should contain only key points that reflect the essence of the community/company.

    Lifehack: In order to make a description of the community in more detail (with photos, links and beautiful layout), you need to put a wiki post in the pinned post, in which there will be bright picture and a call to action.

    Examples of wiki posts:


    Group avatar

    The community avatar is an important detail in general construction quality design, in this article we have highlighted several very important points that need to be taken into account when creating a community avatar.
    Taking into account the fact that now they mainly use community covers, the avatar itself in the group is displayed as a miniature. Therefore, here we will talk about how important it is to design the avatar miniature. As mentioned above, the avatar thumbnail size is a circle with a diameter of 200px.

      1. Text
        If you place text on an avatar thumbnail, it is important that it is large and does not extend beyond the avatar.
      2. Understanding
        It is necessary to place an image on the avatar that will make it clear what is depicted.
      3. Minimalism
        To make your avatar look relevant, you can make it in a minimalist style: fewer words and unnecessary elements that carry virtually no semantic meaning. The avatar thumbnail must be as simple and readable as possible.
      4. Attract attention
        So that the avatar miniature attracts attention. You need to design it so that it is not too white and boring, otherwise it will get lost against the background of the more colorful avatars of competitors.

    What should I put on my avatar thumbnail?

    Let's consider options for using an avatar thumbnail to attract subscribers to the community.


    Community Settings

    By going to the “community management” tab, you can come up with a short page address and indicate additional information.

    Next, in the “links” tab, provide links to your page on other social networks and a link to your website.

    In the “sections” tab, enable the necessary ones. It is more convenient to set up a limited community wall, so as not to rake it in the future from posts by spam bots.

    Include products if your community is for selling products or services.

    You can also add applications to the community and customize them for your purposes. For example, the Applications application is the most convenient for working with leads. This is online registration and acceptance of orders. Or, for example, the Maps application, with the addresses of your stores, offices, events. Using the Buy Ticket application, you can sell tickets to events directly on the community page, i.e. subscribers/customers will be able to buy a ticket without going to your website.

    Wiki menu - beautiful and informative

    This is another way to show the uniqueness of your community, attract the attention of customers, and also structure services, products and all information about the page. Plus, using the wiki menu, you can set up direct links to go directly to the company’s website.

    Wiki menu examples:



    You can see a detailed guide to creating a wiki menu here -

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

    Hello my dear readers. Let me tell you today how to do beautiful menu for VKontakte group and completely free. By the way, having learned to create such topics, you can earn a little money from this -))). Already not a single commercial site works without creating its own community in 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 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 we click on it, 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 in lately 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 write 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 will 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 open menu It is necessary to make clippings for the banner and avatar, which we will then receive for downloading. To do this, go to the section on the left vertical menu and select cutting.

    Using left button mouse, 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 we go to home page communities 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 text editor if after loading the pictures, we click on the icon in the form of brackets in the right top corner then you should see this code:

    Advice: An important point After loading images, the padding is removed. 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 -))).

    ), make a menu.

    Now I'll show you how to make a menu in a VKontakte group and design 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.

    • Avatar for the group - 200x300 px
    • Banner in description - 510x271 px

    Prepare images in the right sizes. I will take ready-made pictures to show you an 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 "Upload 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 post a picture on the wall, and then record it with it, fix it in the upper area.

    Let's go to the wall. Here on the block "Add entry", tap the Photo icon.

    Upload the second prepared image. Be sure to select to post as a community. And then click "Submit".

    Now the entry needs to be secured (see). We return to the new entry and expand the menu in the upper right corner. Here we click “Pin”.

    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 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 "More details" button. She's already in the picture. How can we make it a button, so that when clicked, a person will be taken to our main site? I'll show you now.

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

    Open our picture in the editor and activate the “Cutting” tool.

    Cut off the bottom part with the button. Hold down the left mouse button and drag 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

    Look, after the symbols "odi=- ", you need to insert the id of your group (see). And at the very end of the link, write the name for your menu page. In the example, we will leave “Menu” as is.

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

    Now let's move on to creating a menu for the group on VK. It should look something similar.

    Next we go to the section "Editing". Here, for each image, we need to remove the padding so that they merge into a single picture. To do this, add the following value in the code: “nopadding;” . And add a link to desired page or a website, entering the value “https://site.ru/page.html” (indicate your addresses!). In our example, the “More details” button should lead to the website. This is what should happen.

    [] []

    Save the page. Don't forget to copy her address from address bar. It should look like:

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

    We return to the group wall and create new entry. In it we insert a link to the page and attach the original image. We publish and pin.

    This is the menu we ended up with.

    Hello! I am Adel Davletshin, head of SMM projects at the FriendMedia bureau

    Personal messages from the community

    Surely everyone has already seen the “Write a message” button and knows about community messages. This function allows you to establish feedback with the community administration. While administrators might not notice a comment under a news story a month ago or in one of a dozen discussions, it’s hard not to notice a +1 in community messages.

    To start using this feature, you must enable it. The settings for this section are located in the “messages” tab in community management.

    It's cool that you can write a greeting message. You can also add a group to left menu social networks, where +1 will appear opposite the community when you receive a new message in the group.

    Description, info

    Tabs with information about the community and wiki pages are now always visible, even if news is pinned to the group. Therefore, it is important to complete the description and wiki section so that followers can understand the benefits of the group. It will be sad if someone wants to read the description of the group, but there is emptiness there.

    The section that we call “articles” can be called anything you like. We go to this section, click “edit” and write any suitable name for the content. This could be advice, interesting news, menus or articles from experts.

    We have already written tips for writing a group description in this article:

    Wiki menu

    The functionality and benefits of the wiki menu have not changed in any way. But we want to remind you of the importance of having a menu to help subscribers navigate the group. If you design the menu in the style of the community cover, it will be absolutely beautiful :)

    You can learn how to work with wiki markup here: vk.com/wiki

    Applications

    In groups, applications are highlighted in a separate block on the right. Conveniently, the name of the button can be changed in the “community management” settings. But the disappointing thing is that you can only add one application to the community. Therefore, you have to choose which one suits you best.

    Even if you don't sell tickets, sign up for an event, or accept requests, it's worth adding a questionnaire or humorous survey to engage your subscribers in conversation and get feedback.

    Goods

    The group is decorated with the completed “Products” section. Place the products or services you sell in this section. This way, subscribers can quickly navigate, select and order what they need. You can add current promotions and discounts to products.

    Don't forget to select suitable images for product design, add a description, price and channel for feedback. Users will see all this by clicking on a specific product and will be able to contact you.

    And if you don't sell anything and your services are free, it's still worth talking about your capabilities and adding them to your products with a call to action. For example, this could be a search for an employee, or some kind of comic product, like a survey in an application to involve subscribers in communication.

    Discussions

    Links

    Share links to your website, accounts on other social networks and links to other useful sources in the “links” block. It’s sad to see in groups a link to Instagram with the caption “Our Instagram!” or without a signature at all. What's your Instagram? What should I do with it? Why go there? It is important to label these links in a way that generates interest. This can be done with a short description and call to action. For example, “choose from a convenient catalog on our website.” Short, useful and understandable.

    Albums

    Contacts

    There were also those who asked, “Why register contacts when there are community messages?” Counter question: “Then why not turn off all comments and delete discussions?” Because community messages are one of the feedback tools. And social networks are created for communication. Agree that it is more pleasant to communicate with a person than with an impersonal community. By writing to a person from the “contacts” block, we understand with whom we are conducting a dialogue, who this person is and what questions we can contact him about. Therefore, you should not hide behind the name of the group and give subscribers the opportunity to see you and communicate in person.

    Here are some examples of well-designed groups:

    • Good cover and product section

    • Short and clear description

    • Usefully filled section with wiki pages

    • Interesting test

    • Simple and clear menu

    • Useful discussions

    • Bright album covers

    Over the past year, VKontakte has been actively changing and introducing more and more new tools and capabilities. It's important to keep up with innovations to make your social media community effective for your business or brand.

    Have all the sections in your group been filled out? In order not to forget anything or get confused, we have compiled a special checklist for community design. Print, follow and check your employees against the checklist. Then you will be sure that you have not missed anything. You can download the checklist for community design

    Read more: