Group design on VKontakte: menus, animated covers, image sizes and other subtleties. Dynamic cover for the VKontakte group. Do it yourself Time on the cover of VK

Pictures in SMM decide. If not all, then a lot. Do you want your group cover to attract attention and not look artisanal?

Registration in the service

Format selection

Canva comes pre-loaded with the right image formats for various social media platforms, from covers to posts. You can also set your own layout size, but you cannot change the size of an already created layout in the free version.

Since Canva is a foreign service, it has not yet fully adapted to the Russian audience. Therefore, you can find a ready-made layout for the cover of VKontakte in a special section, and not in "Create a design". The layout we need has dimensions of 1590x400 pixels - twice the actual size of the cover in order to achieve the best image display quality (VKontakte experts themselves recommend doubling the proportions).
On the left you will see a number of ready-made layouts designed by professional designers - these can be used as templates so as not to start creating a design from scratch. Any element of the template can be changed, so when choosing, do not focus on the original color palette and fonts. You can customize the color, text, number of elements and their location on the image yourself. However, choose a style that best reflects your band's message: with a photo in the background, with a solid background, a photo collage, a strong pattern, and so on. For our example, we will choose a template without ready-made elements, which is a "grid" for a collage.

Uploading our own elements

Before you start editing, upload your own logo or photos that you would like to use into the editor. Go to the "My" tab and select the desired files from the computer. It is advisable to upload a logo with a transparent background. It's even better if you have options for dark and light backgrounds (such as a black and white version of the logo) so that it can be used in any illustration.
To insert an uploaded image into a new layout, simply drag it to the right with the mouse and place it in the desired part of the grid. Here the photo can be "framed" - that is, placed inside the selected window in the right way and at the right scale.

Filling the layout with content

If you're working from a pre-made layout, you'll need to edit it to make the cover unique and reflect your brand's style. Editing is intuitive - you need to right-click the desired element (for example, a background or a text block) and all available settings will appear in the top panel of the editor - a color palette, a font menu, and so on. What exactly can be changed in the cover design?

• Background color (available as a solid fill, as well as various textures and ornaments);
• Text, font, font size and color;
• The location of the elements (changes by simply "dragging" the selected elements across the canvas);
• The number of elements (unnecessary parts can be removed, and the necessary ones, on the contrary, can be inserted into the layout in any quantity).

In our example, we filled four photo fields, except for the central one, with frames and applied the same photo filter to all of them to bring the photos to a "common denominator" - so they look better together.

As for additional details, such as drawings, shapes or icons, some of them are available in the "Elements" menu on the left (in our example, we replaced the central photo with a solid background to insert the store name). And some can be found by keywords in the built-in catalog of clipart and stock photos. For example, you do not have enough of your own pictures for a travel-themed photo collage. Enter the word "travel" in the search bar and you will get a whole set of dozens of photos or drawings on the topic of tourism (some of them are free, others are available for $1).

Working with text

Through the "Text" tab, you can add a text element or a ready-made block with a combination of several fonts to the layout. It should be borne in mind that the set of fonts for the Russian language is significantly smaller than for the Latin alphabet, but, nevertheless, there is plenty to choose from.
Here, in the top panel, you can change the size, color, centering, text transparency, line and letter spacing.

Download the finished cover for the group

When the design is ready, click "Download", it is located in the upper right corner, and select the desired format. PNG or JPG is suitable for uploading to a VKontakte group. In other cases, for example, when creating a postcard, booklet or flyer, the printing of which you are going to order from a printer, you need to select "PDF for printing".

Uploading a cover to a group

The design of the VKontakte group is not as intuitive as we would like. To upload your cover, you need to go to the "Community Management" menu - the download link is in the "Basic Information" block.
You can upload the cover to the VKontakte group through the "Community Management" section

Outcome

Most of Canva's layouts are more or less minimalist for a reason.

Firstly, these are the trends of modern web design - the interfaces of sites, applications, the design of branded channels, as a rule, are performed using a limited set of colors to keep the emphasis on the most important thing.

Secondly, simple images are easier to perceive on small screens of mobile devices, which make up an increasing share of the traffic of most companies and web projects.

Therefore, when creating a cover for a page on a social network or YouTube channel, you should not “overload” it with additional details. Take a design pattern as a basis and make it “your own”, while maintaining ease of perception. And the positive response of subscribers to high-quality graphics that clearly convey the necessary information will not keep you waiting.

Here are a couple more VK covers we made using Canva layouts:

By the same principle, you can create a cover for pages in other social networks or images for their content. And you don't need a designer.

How to work in Canva was told and shown by the regional service manager Oleg Burkov.

On the Callibri blog, you can find useful resources for entrepreneurs and marketers. Professionals and narrow specialists in various areas of Internet marketing share their thoughts, views, practical experience and tell how to make your business more successful.

Do you have an interesting topic and want to become our author? Write us!

What image sizes to choose, how to install an animated cover and make a menu, what else was invented for the design of social networks - about this in the article. Bonus cover template for download. Updated material.

Why does a group need decoration

• indicate the theme and direction of the group;
• save users time to study the community;
• display contacts for communication in a conspicuous place;
• create the right mood and thematic atmosphere;
• motivate for comments and likes;
• perform other special functions.

Features of Vkontakte

In this social network, to design a group or a public page, you can use an avatar, a cover, a menu ribbon, a menu in wiki format, just a wiki post, icons for products and illustrations for posts. If you choose the wrong size, the picture quality may deteriorate or be too small. The appearance of the group affects how users perceive it, and there are also versions that the size affects the reach of posts. Let's take a closer look at each design element.

Cover

Dimensions: 1590×400 px, viewable area for mobile version 1196×400 px.

This is an elongated horizontal image in the community header, it is not clickable.

Cover of our group vk.com/prcyru

The cover art is optional for the community, if it is not set, the group avatar will open in full format on the right.

Band without cover

So that the quality of the cover does not deteriorate, the Vkontakte administration advises uploading an image sized 1590 × 400 px. But in the mobile version, the entire cover does not fit on the screen, the edges on the right and left are cut off at 197px, so it is better to place all data, texts and images that cannot be cut in the visible zone, this is 1196 × 400 px. And on top, about 83 px is occupied by a strip with indicators of communication, charge level, and others.

Cover scheme with markup

So that you do not mark the areas yourself, we made a template in psd format with guides delimiting the areas. It can be downloaded.

The inscriptions fit in the visible zone, the settings icon overlaps the text only for community administrators Part of the title on the cover was cut off

Many advise to make arrows on the cover, prompting you to click on a subscription or write a message.

The arrow points to the submit button
The arrow points to the button with the message Screenshot of the statistics of the PR-CY group

If the audience is more likely to watch the group from mobile, then there is no point in such an icon, because in the mobile application it shifts and points to the avatar thumbnail, and not to the subscribe button or message.

The arrow points to the avatar

The arrow points to an empty field

Dynamic cover

Dimensions: the same as the regular cover.

Vkontakte introduced the function of dynamic covers, which means that the cover will have changing data and be updated after a certain period of time. Such a cover is convenient because you can display almost anything on it: city portals may need time, exchange rates, traffic jams or weather, groups that hold promotions or organize events will benefit from a countdown timer, and the display of avatars of the most active Users can be encouraged to leave comments or like posts.

An example with the display of avatars of active participants on the cover
New subscriber avatar on the cover

For a dynamic cover, you need a regular picture, on which inserts with avatars, weather and other things will be attached, a script linked to a group, and hosting with CronTAB support, where the script will be installed. If you set the cover update too often, every second, for example, then you may need an anti-captcha.

Petr Samokhin talked about how to write a script on his own on HabraHabre. If you don’t want to figure it out on your own, there are paid designer services to which you can connect a group and customize the cover with the necessary applications for a small monthly fee.

The functionality can be different, for example, the design of the community can change completely after clicking on a subscription. Additional functions are developed separately, you can write something yourself, you can find groups in the search for Vkontakte itself, where they develop and sell such applications.

Animated cover on mobile

Dimensions: vertical photos and videos 1080×1920 px or others in 9:16 aspect ratio.

In January 2019, all groups had the opportunity to design a separate cover for mobile viewing. It can include up to five large photos or videos without sound, which will work as a slideshow. It looks like this:

Group cover in mobile view Group cover on click in mobile view

This feature is enabled in Community Settings:

Group settings
Adding photos

What material size to choose:

Avatar

Dimensions: no less than 200x500 px and no more than 7000 px, aspect ratio 2 to 5.

If the cover is set in the group, the avatar will be presented only as a thumbnail, the full version can be viewed by clicking. If there is no cover, it will be displayed in full. For comparison, the PR-CY group with a cover and avatar and a version of the same group without a cover:

With cover and avatar Only with avatar

The avatar can be of any size, not less than 200x500 px and not more than 7000 px on each side, but the maximum aspect ratio is 2 to 5. That is, it will not work to install a very elongated image, we tried:

The editor does not allow you to select a more elongated field.

Menu with buttons

Dimensions: button image from 376x266 pixels.

Groups have recently added the ability to add a menu ribbon. It looks like a horizontal block with buttons, a maximum of seven buttons. The administrator can attach a link to them, but only within the social network - to an article, post, products, application, something else. External links are not allowed, so you can't make a "Go to site" button.

Menu ribbon in a group

You can manage the menu in the group settings - adjust the number of buttons, add a title, cover and link.

Customizing Menu Buttons

The name of the button cannot be more than 20 characters, but even these characters cannot fit on a smartphone, so additionally check that the name is understandable:

Menu on smartphone

The minimum size of the button cover is 376x266 pixels, but it is better to make it larger in the same proportions. Menu buttons are a rather small rectangle, especially on smartphones, so use all the design space and don't add labels.

Wiki menu

Dimensions: inner page width 607 px, cover at least 600 px wide.

The VKontakte wiki format implies a page with the ability to format text, make lists and subheadings, insert clickable images with links to VKontakte sections and third-party sites.

In wiki format, they often make a menu and pin it in the group header to make it easier to navigate the community and give all the important information in one place. Navigation in the group will attract attention, but you will not be able to pin other important posts in the header.

With the advent of menu buttons, the need for a pinned wiki menu has been eliminated, but it can still be done if you need to put more than seven links in the menu.

For a wiki menu, you will need a cover, which will be an illustration for the link to the menu page, and internal sections.

Menu cover
Fragment of sections inside the menu

The field width of the wiki pages is 607 pixels. Pictures can be stretched or made smaller by specifying the size in the editor, which opens by clicking on the image. But when stretched and reduced, the quality deteriorates. Images are automatically loaded with a height of 400 px.

Wiki image editor

A wiki page with menu sections is configured in the editor. Next, a link to the page is inserted into a post on the wall, it is not necessary, but an image is desirable. It is selected as a regular illustration for the post. We attach and save the post, now the wiki page will open by clicking on "View" or on the illustration.

Test post with wiki menu

Posts

Dimensions: at least 700 px wide for regular posts, at least 510x288 px for an article in the editor.

Feed posts support any image, but different posts have their own limitations. There is an opinion on the Internet that the size of the image affects the ranking in the smart feed, so it should be at least 1024 px. We asked support and found out that the size does not affect the main content.

Support answer about the effect of image size on the position in the search results

Founder of Cerebro Target

Hello, dear friends and guests of the blog site! In this article, I will tell you about how to make a dynamic cover in VK in two simple ways. First- This is a special designer of dynamic VK covers. Second- script dynamic VK cover. Both methods are available even for a beginner and will not cause you much difficulty in creating a dynamic cover for a Vkontakte group. Well? Go …

First, let's figure out why you need to make dynamic Vkontakte covers at all? Maybe you shouldn't worry about it? I will immediately answer the second question - Worth it! And now we will answer the first question together with you - Why make a dynamic VK cover?

Dynamic Vkontakte cover or you can also call it a live VK cover so that your visitors to the VK group, both new and already subscribed to you, see the necessary information immediately on this cover. Indeed, on your live cover, you can display a variety of data that will interest and attract many new subscribers and friends to your Vkontakte group.

Thus, the dynamic VK cover will increase the conversion of your group and increase the number of its active subscribers. I think this is a good incentive to create a dynamic cover for the Vkontakte group ?! Now let's find out...

How to make a dynamic cover in VK in the first way - Designer of dynamic VK covers!

There is a very wonderful service that will solve our problem of creating dynamic covers for Vkontakte groups. This service is free and feature rich…

Dynamic Cover- this is the same designer of dynamic covers in VK, which will create a cover for you of any complexity and according to your needs. You can work in it for free by creating a dynamic cover for your Vkontakte group. If you need to create several dynamic covers for VK, then you will need to fork out for this, but the prices there are reasonable and they will pleasantly surprise you. Let's see how this constructor works:

This is how the page that you get to after clicking on the link that I gave you above looks like.

Then you need to register on the service, or rather, it will be said - log in using your Vkontakte account. After you get into your personal account, where you are already given the opportunity to create your first dynamic VK cover. To do this, in the upper right corner of your personal account in the service, select "". And click next Create a new cover«:

Then in the "Empty Template" field, click the left mouse button and a page will open in front of you, where you will enter the name of the cover. And then click on the "" button:

Now you are in the designer of dynamic covers for Vkontakte groups. Here, almost everything is like in Photoshop. Just like working in Photoshop, you can create anything that will be acceptable to you. First, choose a background on which to place everything that the designer provides you with in free mode. This is what it looks like Vkontakte cover designer:

I think that you should not have any particular difficulties in creating your first dynamic cover, and if this suddenly happens ... Then watch the video tutorial at the end of the article, where there are detailed instructions for creating a dynamic cover for the VK group.

In continuation of the article about, we consider how to make a dynamic cover for a group in VK. We understand the principles of this option, explore the possibilities and create a test version of the page header for free. By studying the materials presented, everyone can transform their public, attract new subscribers and motivate them to be active. And all this is possible with zero budget.

Principle of operation

The familiar classic design represents the company as a whole and is designed for a wide audience. The new solution from Vkontakte personalizes the content and shows users the most relevant information. From weather forecast to statistics from CRM and other databases. There are two ways to accomplish this task.

VK dynamic cover scripts

This option is suitable only for programmers. It is necessary to make a special module through the API. Using the Access Token, access the data and substitute the necessary values ​​in the site header layout. For simple tasks, there are ready-made universal solutions. But you can create something original only by writing the necessary program code yourself.

The finished application is installed on the server. It can be a third party hosting or your own computer. In the first case, you have to pay a monthly fee to the hoster. Lastly, keep your PC on all the time. Otherwise, the "animated" image becomes static.

Online Services

After the innovations of Vkontakte, web resources began to appear that automate the design process. With the help of dynamic cover designers in VK, you can design a community for free and without involving expensive specialists. It is enough to drag the necessary modules with the mouse into the workspace and configure them. Thanks to an intuitive interface, even beginners can cope with this task. And most importantly, the price of such automation is ten times lower compared to programmers' scripts written to order.

LetsCover and DyCover sites proved to be simple and reliable. To work with one public, they provide basic tools for free. At the same time, for a nominal fee, you can use the full functionality.

Why you need a dynamic cover

Many theme groups set up "live" artwork just for decoration. But commercial publics exist through advertising and the sale of goods. For them, properly selected widgets provide more benefits:

1. Subscriber loyalty. A useful module in the header of the page informs the visitor about discounts, promotions, news, product availability, etc. This solves the problem of existing customers and brings new ones.
2. Increase in conversion. The stock balance plugin and a ticking timer provoke visitors to a quick purchase.
3. Reducing the advertising budget. People are actively liking and reposting. This increases organic growth and saves money on promotion.

Popular Widgets

Each design element is a floating block. Variables can be:

• time;
• the activity of the participants;
• background images;
• CRM statistics;
• RSS feed data, etc.

Consider common modules.

Subscriber

Perhaps the most popular dynamic cover block for the Vkontakte group. With it, you can broadcast any activity. In the header of the public, a photo of new users, the best commentators, people who made the most likes or reposts appears. This is a great way to revitalize your audience, grow your subscription base with contests, and take your community higher in organic search results.

Timer

In the commercial realm, time constraints spur potential buyers to a targeted action. So customers learn about a sale or promotion not only from a post on the wall. And if we add that the competition is held only for group members, the subscription base grows along with sales.

Weather

The module broadcasts weather conditions in a given region. Such a dynamic cover is indispensable in VK communities dedicated to tourism, travel, fishing and city events. It not only benefits subscribers, but also increases traffic. Instead of going to the site of the hydrometeorological center, users return to the public.

Exchange rates

The plugin is relevant for banks, microfinance institutions and brokerage houses. Allows visitors to receive information without switching to third-party resources. Clients stay with you. This not only saves time, but also increases conversions.

Link text

The widget displays any textual information from external sources. This is perhaps the most powerful tool for personalizing the public. You can place a single line or group a block. The module is suitable for real-time display of news, the number of sold or remaining products, the number of subscribers or reposts on the page.

An example of creating a dynamic cover in VK

Consider designing a community using the DyCover service.

There is no classic registration on the site. By clicking the "Login" button, the internal application requests permission to access the profile in Vkontakte.

Immediately after authorization, the system displays a dialog box for selecting the pages under your control. If another message appears, go to the "open constructor" tab and select the public you want to connect.

If you just created a group and it doesn't appear on the service, click Refresh List. So all changes will take effect.

Confirm action:

We sequentially perform the following steps:

1. Click "Create New".
2. Select "Blank Template".
3. Enter the name of the project.
4. We confirm it.

Loading background image. You can take it from a photo stock, pre-prepare a unique design, or use the internal library.

In the previous article, we discussed in detail the requirements for images: orientation, padding, blind spots, etc. Let me remind you that the recommended size is 1590 x 400 px.

You can adjust the substrate to the specified parameters in any graphic editor. But if you do not have such an opportunity, it is enough to use the built-in tools. In this case, you can use one static background or several, changing with the required time interval.

And now let's figure out how to make the dynamic cover of Vkontakte "movable". From the control panel, add the widgets we need. For example, we use "Most active" and "Last subscriber". So we welcome the newcomer. At the same time, we put him as an example of a user who excelled. Not superfluous is the reward for the activity!

To correctly display the public header on all devices, check the "Grid for mobile" checkbox. It shows the areas that will be hidden on the phone.

Each module has flexible intuitive settings. Therefore, we will not focus on them. You can change any of the used blocks by clicking on it in the visual preview area or in the "Layers" section.

We add a couple of design elements and insert another simple but very powerful widget - “text by link”. From the sources presented, we select Google Spreadsheets - this is a display tool available to everyone. Variables substituted there automatically appear in the header of the public.

Don't forget to save your changes by clicking the appropriate button!

So we figured out how to create a dynamic cover for a group in VK. In half an hour, with simple actions, we prepared a background that attracts the attention of new subscribers, calculates bonus points for existing ones, and talks about the company's achievements.

We check on the preview how the picture looks on different devices. It must have a high resolution for the computer. And on a mobile phone, save all informative elements.

Today we looked at one of the ways to revitalize the community in social networks. You have learned how to create a dynamic cover on Vkontakte for free, attract subscribers and increase sales. We got the opportunity to stand out from the crowd. And this means that in a changing market, competitors are one step behind you.

Any user who decides to create their own group on a social network would like to increase the number of subscribers. There are many ways to attract the attention of visitors, but they all come down to making the public as effective, memorable and bright as possible. That is why the creators and administrators of communities need to know how to make a dynamic cover in VK.

Of course, it will lead to an immediate increase in the audience, but the competent use of such a valuable service will definitely have a positive effect in the long run. The main thing is to approach the creation and installation of a beautiful hat for the group wisely and not rush into making decisions.

Before moving on to creating your own public design, you need to figure out what a dynamic cover is in general in the VK community.

Under standard conditions, group administrators are able to set a small picture as an avatar, which will become the face of the account. Using a special service will make the oxbow header more informative, livelier and more interesting. As a result, users will be greeted not with a boring picture, but with a voluminous block of information informing about news, updates and other important innovations and rules.

It is important to remember that the restrictions on specifying and adding information are minimal, so the administrator can implement the most unexpected and bright ideas that will contribute to the growth of an active audience.

Dynamic Vkontakte covers - free of charge

The next nuance that requires detailed study is related to the cost of the service. It is hard to imagine that such a useful tool is distributed freely and without restrictions.

Indeed, certain restrictions and conditions are present. But they do not make the option inaccessible and expensive. Most of the current programs are provided under the following conditions:

• the first cover is made free of charge;
• access to the option and the header constructor is provided after receiving consent from the owner of the group with the terms of use;
• additional covers (after the first one) are available after payment (from 100 to 300 rubles);
• additionally, after depositing money, special functions of the service become available.

That is, everyone will be able to beautifully design the start page of the public.

How to make a dynamic cover in VK for dummies?

It was mentioned above that there are many different designers that allow you to create a dynamic VK cover. Each of them has its own features and nuances, but in general, they are all extremely similar, so you can safely use the dycover online service as an example.

To increase the attractiveness of the public, you will have to:

Then the creative phase will begin. You need to add your favorite picture, widgets and functions to the finished template and save the finished result.

To upload the fruits of the work done to VK, you need to enter the "Your covers" section and click the "apply" button. After that, it remains to check how the finished page looks.

How to install a dynamic VK cover?

Knowing how to make a dynamic Vkontakte cover on the mentioned site, users will be able to figure out the features of the work of other portals and designers. All such online services and scripts use a similar API. To make sure of what has been said, it is enough to visit the DynamicCover portal. Its use will require:

• registration using a valid account on a social network;
• go to the section for creating and editing covers;
• connecting provided widgets and functions;
• implementation of the result in the community.

At the same time, work in the system is similar to using the Photoshop editor, so users who have learned how to effectively and colorfully edit photos will be able to quickly understand the interface of online designers.

At the same time, you should not rush to create a header, since the quality of work in this case is more important than speed. Of course, the modified interface can be deleted if desired, it is not created forever. But this does not mean that its development and preparation should be treated with disdain. It's important to remember that the cover is the face of the page, helping visitors get an impression of the content.