Independent registration of a VKontakte group. How to create a VK group and make a beautiful menu
We figured out how to draw a beautiful menu for your group. And today we will learn how to place a menu directly on a VKontakte page and create internal pages for it. So, let's go!
Step 1. Upload menu items to vk.com
We go to the group and create an album in it, into which we will upload the menu items obtained when completing the assignment of the previous lesson. To do this, click on Albums in the photo block on the main page and in the window that opens, select Create an album. Let's call him Album for administrator.
Note: if you don’t have a block of photos on the main page, then go to the item Community Management(we already did this in the first and second lessons) and there opposite the point Photos choose Open or Limited(we will tell you more about albums and what they are like in one of the following lessons).
You will see a newly created empty album. Click Add photos to album and load the menu parts you drew.
All that remains is to assemble the group menu from these parts.
Step 2. Assembling a menu from elements
Go to the menu editing page (how to do this,). Check that editing mode is enabled Wiki markup mode. Now you have here (if you completed the tasks of the second lesson) your menu items, enclosed in square brackets. We do not touch them yet, but write below:
unique_number - this is the photo number that is assigned to it when uploaded to the vk.com website. To view it, open the downloaded photo by clicking on it and look in the browser address bar:
388px- this is the width of your menu
Noborder- means that your menu items are not given a black outline
Nopadding- means that there will be no distance between the pictures (which is what we need for the menu to be seamless).
A space at the end is required, otherwise nothing will work.
You should have as many lines as there are items in your menu (and, accordingly, how many pictures you drew):
Be careful not to mix up the order of the pictures.
We go to the main page of the group, update it (click the button Update in the browser or just F5). We admire the result!
Step 3. Attach internal pages to the menu
When creating a menu for a group in material editing mode in the second lesson, we wrote its items enclosed in square brackets. Now you see them above your beautifully designed menu in the form of links: in our example, these are links How to order, How to pay etc.
Clicking the button Fill with content, we find ourselves on the page for editing materials that is already familiar to us.
We immediately check what access we have to the page (remember that access to view the page needs to be set - All users, and editing access is Editors and administrators only), and fill it with information.
As you fill the page with information, you can use the text formatting panel to add emphasis to make the text bold, italic, add alignment, or list:
Formatting text using this panel is no more difficult than working in Word: you simply select the text with the mouse and press the button you need.
Since you are in wiki markup mode, certain characters will be added to your text when you apply formatting commands. For example, when you select the italic command, the word you want to italicize will be surrounded by quotation marks. These symbols are the elements of the wiki markup language. To see what the text will look like on the page, click the button Preview:
And this is what happens:
Note: we recommend learning to edit text in wiki markup mode, because it gives predictable results, unlike the visual editing mode, which is unstable in different browsers. Sometimes even a one-time switch to visual editing mode breaks the page design.
Using the knowledge gained, we place emphasis on our page and click Save page. Here's what we got (remember, this is just an example):
We repeat this step for each of our pages (we have this How to order, How to pay, How to choose the right size And How long does delivery take?) except the page
Today I will continue my “Dive into 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 the ignorant, 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 write down 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 graphical 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!
VKontakte pleases its users with a large number of interestingly designed groups. Many of them are not inferior in appearance to a full-fledged website. This effect is ensured by proper group design, in particular, menus and avatars. Experienced users can easily cope with this task, but if you are a beginner, then the article will be useful to you.
How to beautifully design a group on VKontakte
Creating a banner
When viewing a group, the user first of all pays attention to the avatar and menu. Below we will talk about how to create two pictures in Photoshop, cut one of them correctly and write a special code indicating
Stage 1
Open Photoshop and create a new document with dimensions 630x725 pixels. Fill it with white. Cut out two windows in the layer. Through these windows the graphic design of the Contact will look out. First, select a rectangular area measuring 200x710 pixels and press the “Del” button. Next, select a rectangular area measuring 382x442 pixels, combine the resulting rectangles at the bottom and press the "Del" key.
Stage 2
Under the resulting layer we will place the graphic design of the group. It is best to write the required text in advance on a picture with the main background, and in addition create the required number of menu items.
Stage 3
Next is the right rectangular area measuring 200x710 pixels. save it as a separate image. The result is a completely finished drawing for the design of the group. It needs to be loaded into the block, which is located in the upper right corner of the page. To do this, click the "Upload photo" button.
What is the left picture for? We cut it into several parts (depending on the number of menu items). For example, our menu has 5 items, which means the output will be 5 pictures 382x50 pixels.
Stage 4
The five pictures received must be uploaded to the group album. Next, go to the group page and select the “News” block, rename it to “Group Menu”, and then click “Edit”.
Stage 5
So we have come to the final stage of the guide “How to beautifully design a group on VKontakte”. Open the tab with the name “Source which is in the lower window, you need to copy and then paste into the “Source Code”. In the text of the code, replace photo with file names and mark the height of the file (382 pixels). Now insert the addresses of the menu links. The file name is taken from the album.
Stage 6
To perfectly combine images, several conditions must be met:
The group name must fit on one line;
The website address is also one line.
The description must contain 10 lines.
Wiki markup VKontakte
To understand how to design it beautifully, you also need to familiarize yourself with the concept of Wiki markup.
What it is?
So, Wiki markup is a system designed to edit pages in a similar way to HTML. Before you start creating a VKontakte group, decide on its type. Design can be graphic and text.
Text menu design
The code for the menu will look like this:
The beginning and end of the code are indicated by tags. Each icon will look like [], then a description.
Graphic menu
The code for such a menu will be compiled according to the following principle:
! !! !!
Of course, this information only scratches the surface of the topic of Wiki markup. You can learn more about it by visiting the official VKontakte group. There is a lot of useful information and video tutorials on how to beautifully design
), 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 required 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 "To upload a 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 a note", 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 the right 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 will show you now.
To make active menu buttons, we must cut them out as separate images. For this we need Photoshop.
Open our image in the editor and activate the Cutting tool.
Cut off the bottom part with the button. Hold down the left mouse button and draw a 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 the desired page or site, 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 the address bar. It should look like:
https://vk.com/page-120208137_52523487
We return to the group wall and create a 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.
Today we are returning again to the topic of designing VKontakte groups. We have already learned before. Today we will learn how to make graphic menu with fixed top banner and a link to an internal page with expanded menu items. In general, any information can be on the internal page. It is especially convenient to place there, for example, catalogs with a range of products. Both drop-down menus and sticky menus have their pros and cons. The main disadvantage of a drop-down menu is that it is in the closed state by default. But you can place several links on it at once.
Pinned menu it looks more impressive due to the overall impression, but it can only have one link, leading either to the internal VKontakte page or to an external site (and the link to the external site will not come from the picture, but from the text link under the picture). Also, one of the obvious disadvantages is that on mobile devices the graphic menu is presented as a regular entry in the feed, standing on top, and not as pinned next to the avatar. In general, when choosing a design you should take these nuances into account. So let's see how to create a sticky top menu with a link to an internal page.
I create VKontakte groups
High-quality design of VK groups and public pages, pinned menu, drop-down menu, internal graphic menu, catalogs, internal navigation - prices And portfolio.
Step 1
Create a new document in Photoshop approximately 900x700 pixels in size and fill it with white. Now we need to cut out two windows in the layer, through which the actual graphic design itself will be visible. First, select a rectangle measuring 200x500 pixels (avatar) and press Del. Then select a rectangle measuring 510x352 (align it to the bottom line of the avatar and make the distance between the shapes 50 pixels) and also press Del.
After the next design update by VKontakte (October 31, 2016), the banner dimensions became 510x307 (not 510x352).
Step 2
Now, below the white layer, we place some single picture, which will form the basis of the design. 
Step 3
After that, we supplement the picture with various elements - a logo, text inscriptions and a button inviting you to click on the menu. Then we save two separate pictures on the computer - one is an avatar (on the right), the second is a menu with a click button (on the left). 
Step 4
We also create a graphic menu in Photoshop consisting of several items. The width of this menu should be 600 pixels, the height is optional, depending on the number of items. To help, use the lesson ““. 
Step 5
We cut our menu into several horizontal strips in accordance with the number of menu items. Save as separate files. 
Step 6
We go to our VKontakte group, click “Community Management” (clicking on the three dots under the author opens a drop-down menu) and check that the settings are correct. The group should be open and the materials should also be open. 
Step 7
Now we upload a new avatar. Move your mouse to the location of the avatar and select “Update photo” from the pop-up menu. Load the right photo from Step 3, stretch the selection area up and down to the edges of the picture, click “Save” and then select the area for the round thumbnail. 
Step 8
Now you need to create an internal page. How to do this is described in detail in the lesson. Another alternative way to create an internal page is described in the lesson “” in Steps 5 and 6. 
Step 9
Once we have created the internal page, we can go to it. To do this, you need to click on the drop-down menu of the group (by default this item is called “Latest News” - I renamed it to “Menu”) and there click on the “Menu” link. After this we will go to the newly created blank page. 
Step 10
Now we need to create a graphical menu of five items. To do this, we upload our five pictures from Step 5 to the group album. We click on the camera icon and upload the cut pictures from the computer. The pictures will be stored somewhere on VKontakte servers and linked to the group, so it is not necessary to create a separate album for cut-out pictures. You need to upload pictures in Wiki markup mode. 
Step 11
Now in wiki markup mode we will create a graphical menu. It is very important to create in the wiki markup mode (the icon in the upper right corner of two triangular brackets), and not in the visual editing mode. More information about creating code in wiki markup is described in Step 4 and Step 5 of the lesson ““. There is also a code template for insertion. If everything is done correctly, you should get a ready-made graphical menu, as in the figure below. 
Step 12
Now we return to the main page of the group, take the URL of our internal page (it should be like this https://vk.com/page-78320145_49821289) and paste it into the window where news is created. A window with a link to this very internal page should automatically be attached. After that, we move the cursor to the “Attach” inscription and attach a photo to the post, namely our picture on the left from Step 3. After that, we erase the line from the URL of the internal page, leaving empty space. Important! At this step, you need to check the box (if you have such rights, this mainly applies to groups with an open wall) in the “On behalf of the group” checkbox. If you do not check this box, the entry will not be pinned. Finally, click “Submit”. 
Step 13
Move the cursor to the three dots next to the post title and select “Pin” in the drop-down window. Accordingly, the news is also detached, if necessary. 
Step 14
There is one caveat. Sometimes, after you unpin a news story, it goes far down the feed, according to the date of creation, and it can be quite difficult to find it again. Therefore, it is better to immediately write down the URL of the pinned news somewhere. To do this, move the cursor to the time the news was created and click on the link. 
Step 15
Now we update the main page of the group. Our graphic menu will be located at the top next to the avatar. And when we click on the picture, we are taken to an internal page with a menu of five items. 
