How to make wallpaper for a group on VK. New VKontakte design - horizontal group cover
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 empty.
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 telephones. 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 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 should 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.
First of all, you need to decorate it beautifully. After all, as you know, we judge everything “by our clothes.” This article will help you beautifully design a VKontakte group on one's own.
How to formalize the name of a VKontakte group?
The first thing you need to pay attention to when creating a VKontakte group is Name. There are three main parameters to consider when choosing a name:
The search for the VKontakte social network works in the following way: there are two groups with the names “Work on the Internet” and “Work on the Internet without investments.” When a VKontakte user enters the query “work on the Internet,” the group with the corresponding name will be higher, even if the number of subscribers is equal or the second group has a slight advantage.
Let's conclude: the owners of the famous online store Ali Express, when creating a group for it, do not have to indicate its topic in the name; most already know it. For a less popular site, online store, forum, when creating a group, it is better to indicate the topic in the name, as we did above..
How to register a status for a VKontakte group?
The status of a VKontakte group is less important than its name, but it is worth paying attention to. Let's figure out how to do it right create a status for a VKontakte group? The main thing is not to overload it too much; it should contain only the most important information:
If at the moment you do not know how to register the status of a VKontakte group, then it is better to postpone it. You shouldn't put just anything in it. The absence of a status will not harm the design of your group, but meaningless information in it may confuse visitors. By the way, For public pages, status is more important, because it appears in the "Pages of Interest" menu as a description.
How to write a description of a VKontakte group?
Now we'll figure it out how to write a description of a VKontakte group, or rather the text that can be entered in the community settings. There are several solutions for this:
In addition, VKontakte has a limit on the size of text in the group description that will be displayed without collapsing - 600 characters with spaces. After exceeding this limit, the description will be minimized, which will make it look unsightly. You can see this situation in the picture below.
In this regard, I recommend using pinned messages in the header when creating a description of a VKontakte group, creating a picture for them with a description, emoticons, text and even a menu. This will all add color to your community.
How to make an avatar for a VKontakte group?
Now we will try to figure out one of the most important aspects of designing a VKontakte group - how to make an avatar? For those who have their own money, you can register on a freelance exchange and order an avatar and other elements for the group (banner, menu, etc.) from an experienced web designer. But you can go another way, make an avatar for the VKontakte group yourself.
First of all, you need to decide what size you will need to create an avatar for the VKontakte group. The maximum width of a group avatar is 200 pixels (hereinafter simply px), and the maximum height is 500 px. Larger avatars will be scaled down according to the specified proportions. Avatars that are smaller than the specified sizes will, on the contrary, be enlarged and distorted in the display. Therefore, create an avatar for the VKontakte group with a width of 200 px and a height of 200 to 500 px.
When creating an avatar for a VKontakte group, you should remember its miniature, which is 200 px in width and height. So the main information load of the avatar (name or description of the group, motto, call to action, etc.) needs to be placed in one area that will correspond to the given dimensions.
The easiest way make an avatar for a VKontakte group in Photoshop. Moreover, it is not necessary to know it and be able to use all the functions. It is enough to learn how to use basic tools (selecting elements, working with layers, etc.). Below you can see an example of an avatar I made for a VKontakte group.
This avatar consists of two combined pictures, a text element and a background. It didn't take much time or effort to create it. Each group owner can cope with such a task, if desired.
And if you want to create complex and beautiful avatars for VKontakte groups, drawing every detail from scratch, then learn Photoshop and learn how to use it professionally. This can be done in several ways:
- Try everything yourself through trial and error.
- Read articles about this program and watch videos.
- Read a book or watch a training course.
The first option is ineffective, since few people have the patience to achieve results in this way. The second option is possible. There are now many websites and YouTube channels on the Internet that are aimed at teaching Photoshop.
However, it will be difficult to structure the information received in this way. In addition, constantly searching for information will take a lot of time. But it’s free, just like the first method.
The easiest way to learn Photoshop is through a video course. Since in it all the information will be presented from simple to complex, describing in detail and teaching you all the basics of the program. And I can recommend a similar video course to you.
"" – training video course for beginners. With it, at any time convenient for you, at home at your computer, you can start learning Photoshop.
In this course you will learn in detail how to use all the functions of Photoshop. After which you can easily create avatars from scratch and beautifully design VKontakte groups. If you were interested in this article, be the first to receive new information.
Today I will continue my “Immersion in VK groups”. In the third part of the “series”, I told and showed. Today, let's talk about designing the VKontakte group menu!
In the first article about creating a menu, there were a lot of questions in the comments, so before starting a new topic, I will answer frequently asked questions.
Question 1: The first and most common: “Where is the code in the menu?” or “if there is no bookmark when editing “Source Code”, how to add an internal page?” or “I still don’t understand what to do if the code doesn’t appear!”
Answer 1: VK has changed the editor, now you can switch between the visual editor and the code with just one click (upper right corner of the editor):
To check which editor you are in: move your mouse over this button, write some text and highlight it in bold - if unusual characters appear, then this is code
Question 2: The second, really problematic: “ how to remove spaces between pictures?»
Answer 2: I admit, I was scared myself when the client’s menu started working for the first time. Now I quickly edit it, but then it was not fun. See:
Add the nopadding tag; and everything will fall into place!
Space creeps in between the pictures and the menu looks broken. For the ignorant, this may not be normal, but for people, this is at least unprofessional. So what's the big deal? Ah, it's very simple! In VK there are constantly some updates, new algorithms are introduced... and even the editor is crooked... sometimes, for no apparent reason, important tags drop out of the code and then we see this picture. To fix this, you need to look into the code and make the necessary adjustments. The code format should be like this:
Template: [] Example: []
Usually menu pictures are expanded because the code leaves out nopadding; — we put it in place and everything is aligned. Before saving the result, click on the “Preview” button to make sure that everything is smooth.
Question 3: News. In October 2012, VKontakte forcibly cut off the avatars of groups and public pages. Now their size has a common standard of 200x500 pixels. So, if you had a larger avatar in your group, then make an update (update the avatar).
By the way, along with cropping, VK introduced another innovation regarding group photos: now by clicking on the avatar, we, just like in the account, will be able to see all the albums of the community. It's comfortable! And from this, new functionality is drawn in the group’s communications.
Soooo, we're done with the questions... now let's move on to creating the menu itself!
Step 1. How to create a menu in contact and make nested pages:
First of all, let’s make sure that you know how to create a group menu in contact and go through a few instructions:
What do you think of my cheat sheet?
This is the cheat sheet I came up with! For greater clarity, I will describe each number:
Do this operation with all subpages and your menu will be ready.
Eat! We created the menu, created the internal pages, filled them in, now let's move on to creating a beautiful graphic menu.
Step 2. How to create a beautiful graphic menu in Contact and install it:
I won’t give you the whole theory of how wiki markup works in contact, we have other goals now. To create a visual menu in a VK group, you don’t need to know all the wiki markup. Let's move on to creating a visual menu!
First, I’ll show you the code and result of my menu:
I admit, I made it specifically to write this article. Everyone “didn’t get around to it,” you know, like “a shoemaker without boots.” But now I have a visual menu in the VK group!
I won’t tell you how to draw a picture for the menu, that’s up to the designers, I draw it myself, but not so professionally. , at the end of the article, I gave a video on how to draw a simple menu in Photoshop, check it out, maybe you can do it on your own. If not, order the menu picture from .
I'll show you a moderately complex menu installation option. The difference is in the number of elements. A menu that is simply cut into strips is the simplest implementation. The more clickable buttons in a line, the more complex its execution. Although, knowing the peculiarity, everything is simple! It's just a matter of time. So, the width of the image should be:
370 px – if you have two or more objects in a line, like I have social media buttons
And max 388 px – if we cut the picture in a simple way, only into lines, without dividing it into small objects. This is the feature you need to know when cutting a menu into buttons. My image size for the entire menu turned out to be 370x456 px.
After the picture is cut into the required number of objects and saved in a separate album, we upload this album to VK. We upload to the account profile, not to the group! Since in group albums there is no longer an option to hide albums. A technical album in a corporate (for example) group is not needed at all, so we hide the menu items in the account album:
Technical album VK
Once you have set up the "Only Me" privacy. Let's move on to installing the menu itself. I’ll give you a code example that would be a template for you and let’s look at what it consists of:
[]
Where, photo7632142_296911699– this is the address of the picture! We look at it in the address bar of the picture:
From the first picture, let's start inserting a menu into the VKontakte group
You need a short address of the image, to do this go to the album itself:
Go to the album itself to get the desired image address!
...and starting from the first picture, move them to the group menu.
Adding image size to the menu code!
So, the address of the image has been added, the size has been indicated, now we put the tag nopadding;- it is needed so that our pictures fit tightly to each other. And the last step is to put a link to the page where the visitor will go after clicking on the picture.
A little clarification here! We write external links, links to VK albums and discussions in full, and links to internal pages in the format page-32734125_44298120. At the beginning and end of the line, do not forget to put two square quotes and no spaces.
Clarification 2: when we link to internal pages without pictures, we use single square quotes for discussions, albums and external links.
Lines in which you have two or more elements are inserted into the code without spaces. Insert each line of the picture one after the other. Because if you press Enter after the line with the picture, the picture will jump to a new line and the menu will move. We need the menu to be displayed as a whole, so we don’t need any extra spaces or “interters”!
After you have transferred all the pictures to the menu and designed them (size, link), save the result and admire your work! All! Ready!
Some tips on how to make VKontakte group design effective. Learn the principles of properly designing the elements of a commercial community so that it becomes a stable source of profit for your business.
You will learn how to correctly set tasks for developing the design of a VKontakte group for your employees or freelancers. You will be able to control the work process and evaluate the final result not only from an aesthetic point of view, but also taking into account the ability of the created design to convert visitors into clients.
Where to start working on design?
Start developing a VKontakte group design from defining the target audience, identifying their wants and needs. You must have clear ideas about who and how you will sell a certain product or service.
Study your competitors. It is logical that competitors have already passed the stage of searching for the target audience. You need to analyze their websites and social media groups. This will help determine the audience that the texts on your competitors' websites are aimed at.
Identify the strengths and weaknesses of your proposal compared to those on the market. Write down 3-5 advantages that your business has. These could be: free shipping, 5-year warranty, experienced specialists, wide range, etc.
Make your trade proposal, based on research of the target audience and competitors’ sites. This is the title of the avatar or cover of the VKontakte group. It plays a huge role in deciding whether to further explore community content. Your proposal should clearly define the topic, be simple and understandable to any visitor. When drafting it, think about the customer's benefit, not the product.
People don't want to buy a product/service - they want a solution to their problems.
All these are preparatory stages that must be completed before starting work on the design of the VKontakte group. They are the ones who determine the content that needs to be placed on the design layout.
Important elements in the design of VKontakte groups
We’ve decided on the content, now it’s time to find out recommendations for the design of group elements. We will analyze only the most necessary: an avatar and a thumbnail, a cover, a banner for a pinned post and a menu.
Avatar
Place your sales offer on it to provoke visitors to take a targeted action. In addition, the avatar should contain contact information where you can be contacted, an image of a product or a thematic illustration for services.
Use only high-quality images and forget about clipart from free stock photos. The search for images for effective VKontakte group design should be done on the sites pinterest.com, freepik.com, flaticon.com, or, as a last resort, google.ru. But it’s better to select images from paid photo stocks. Enter search queries only in English. If you have difficulties with English, then feel free to use Google translator.
To make it easier for you to make the right decision, we We’re giving away 500 rudds for menu design to everyone who follows the specified link. To receive a discount, simply enter the code HWC1817-500-menu when submitting an application.
The same question arises before starting work - how to properly set up a VKontakte group for sales and how to formalize it correctly? There is no clear answer to this question. There are many factors that influence the success of closing a deal between you and a buyer through a social network. Let's look at setting up a VK group in order.
How to register a group in VK? This is the first thing you should pay attention to! Imagine that you are a person who wants to purchase a product or order a service. So you see an advertising post, go to the community to learn more about the proposed offer and... you find yourself in an unknown place.
The description is incomprehensible, there are no contacts, photo albums are chaotically filled with hackneyed photos from the Internet. The desire to buy immediately disappears.
This can be avoided. If you follow simple rules.
- Band cover VC introduces you to clients and should only convey minimal, useful information! This is a contact phone number, website name, brand name. The cover size is 1590x400 for the desktop and 200 pixels smaller for the mobile version.
- Group avatar. It is purely visual in nature and should be remembered by subscribers. There is no need to write mountains of text there, or insert low-quality pictures that are impossible to see. An excellent option for a group avatar would be a brand logo, an icon characterizing the type of activity. The group avatar size is 500x500.
- Album cover. For the cover, sizes 1000x700 are suitable. Place a bright, catchy picture and, most importantly, readable text that will reflect the content of the album. The main thing when creating a cover is not to go beyond the band's style. If the group is made in dark colors, do not create a bright color cover.
- Goods. Complete the block of products in the same style and prepare a high-quality description and photographs of the offered product.
How to name a group on VK? The name of the community reflects the meaning of the project. In my projects I use the following formula: Brand + service, product. Ask why this was done? The answer is simple. To attract free traffic to the group.
More than 97,000,000 people use VKontakte every month. Some of these people use a search engine to find a service or product.
For example, Ivan sells apartments in St. Petersburg. After analyzing the statistics of requests in wordstat.yandex.ru, Ivan found that the most common request is to buy an apartment in St. Petersburg. (172,688 impressions per month).
Based on this, Ivan creates a group: Company name | Buy an apartment in St. Petersburg. Thus, when a person searches to buy an apartment in St. Petersburg, he will see the group in the results.
Status. Here you need to briefly indicate important, relevant information. This could be a feedback number, promotions, website, special offer.
Description of the group. Here describe your advantages over competitors, tell us about the company, type of activity, contacts, delivery information. Show how the business solves a customer problem.
Content. No matter how much you like to write, you can’t live without it now. Share useful materials with your subscribers, organize competitions, congratulate them on the holidays, write with concern for who reads you.
The mistake of most communities is to sell directly. It’s unlikely that you would be interested in seeing a community that everywhere says: “Buy from us, well, buy!”
The best way to sell without selling is to show the client his own problem, reinforce its significance and offer a solution. Tell a story, share a problem with readers and make it clear how the product will help solve the problem.
Discussions. Publish reviews and question-answer sections for feedback from the audience. Reviews are the face of a business, they increase trust and encourage you to make a purchase or sign up for a service.
Bots and applications VKontakte. Assistants for processing applications and supporting audience feedback. Spend enough time setting up applications and sending newsletters. Install the widget in the group, greet the client and encourage a call to action.
Result: A group is a picture assembled from small parts that need to be put together. By following these tips, you can correctly set up a VK group, set up a community and offer services and goods to receive orders through VKontakte.
Prepared the article
