Wiki markup for VKontakte menu. Create a banner for a VKontakte group for free! Information about upcoming events

I think everyone who actively uses social network On VKontakte, I’ve 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 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're talking about, for example, about fishing lovers, 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.

In this master class, I will take the game as a starting point Mad Max based on the film of the same name, which was released just a couple of weeks ago and I will create a community for players with various materials on this game. the main objective— draining 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. I’ll tell you right away what I’ll be using. universal technique, which can be used both in 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.

By entering necessary information The control panel of our community 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 further 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 do not have a website, or its subject matter does not correspond to the format of the community (they are about different things and are not related to each other in any way), then this line can be left blank.

I set age restrictions at in this case 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 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 make the design in uniform style for avatar and menu picture. 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 designed for 1 line in the explanation. In the example screenshot there are phones. If a second line appears, you will need to use a different template or correct the design manually.

In the meantime, we proceed directly to graphic design his new group. Here I choose the path of least resistance and go to the Google Images. 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 the two types in place of our group’s ava and upload our image there. 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”. At the same time, in address bar browser something similar will appear (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 only be created 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 make wiki markup a little later and create internal menu for your 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 take it in the address bar of the browser and return to home page 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 with 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 adaptive 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 desired mode activated, this button outlined in grey.

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

and to the already nested parameter “noborder” I add the second parameter “nopadding”. The first one disables the outline of fragments and borders of table cells. The second removes the margins from the edge.

The first and last menu items should not be buttons - in my picture they are just graphic element without reference to inside page, so we add the “nolink” parameter to them. This will remove the option to click on this element 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 and do not forget to save their addresses somewhere from address bar 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 everything key points and in their catalog you can easily find the required element and figure out how to add it to your wiki page.

Before diving into the wiki markup, creating interactive menu , some things need to be done preparatory actions First of all, change some settings in the group. Click on “Community Management”, open “Discussions”, and connect “Materials”.

Now let's move on to preparing the images. If you do not work with graphic editors, you will have to turn to freelancers. Further work will be shown using Photoshop, but can also be done in other editors.

We prepare sample for the VKontakte group according to the image.

The dimensions of window A, in which the menu will be placed, may differ from those indicated. It all depends on what sizes you set for the menu buttons. The proposed option provides one button per line. If you need to place two buttons in a row, then the width of window A needs to be reduced to a maximum of 377 px. The height of this window in most cases is selected empirically. In the proposed option, a height of 377 px was chosen when placing each element of information on one line on the front page of the group.

Next we prepare suitable image, write down the inscriptions and cut out the entire drawing into sections, taking into account the fact that each separate plot, with the corresponding inscription, will serve as a menu button. We won’t go into depth here on how to do all this, since this article is not a Photoshop lesson.

Having saved and deleted unnecessary fragments (Photoshop cuts and saves the entire image and the white fields too), we will rename the fragments, numbering them in the order of their location in the menu.

Now let's move directly to the group. After adjusting the settings, two tabs appeared on the wall: “Latest News” and “Discussions”. Click on “ New topic» in the discussions tab and create the first page of our menu.

You need to name it according to the name on the graphic menu and fill in the description field. After filling out all the necessary information, click “Create topic”.

The created message will appear on the wall. In the same way, we create the number of pages we need (in accordance with the menu sections).

After completing the preparatory operations, we can move on to editing our menu. To do this, we need the “Latest News” tab. Place the cursor over it and click on “Edit”.

Next, something already familiar will be revealed to us. While in visual editing mode, by clicking on the camera icon in the editor, we load all the fragments in the sequence in which they are located in the overall image. We are also changing the name to something more understandable for our visitors. After that, switch to wiki markup mode and edit the code.

Sample code for the menu in question:

[]
[]
[]
[]

It is important to keep in mind that for fragments that do not serve as a button, you must enter “nolink” instead of a link to the page. Otherwise, the fragment will be clickable, and each time you click on it, the fragment itself will open as a separate image.

If everything is done correctly and there are no errors in the code, then when you return to our group and after clicking on the name of the tab (Group Main Menu), the menu we created will open, which looks like one with the avatar. The interactive menu and graphic design of the group represent a single composition. When you click on menu sections, we are taken to the corresponding sections of the group.

If the menu does not match lower level with an avatar, in the code in the lower fragment, changing the height in px, achieve alignment. If this is reflected in the quality of the picture, then in the original template graphic editor make changes to the size of the desired fragment and redraw the layout.

We looked at how to do interactive menu or create a group in wiki style. If you have any questions about the preparation process itself, write in the comments and we’ll try to solve them together.

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.

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 blank.

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.

I would like to note that this template is designed for 1 line of explanation. In the example screenshot there are phones. 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.

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 the two types in place of our group’s ava and upload our image there. 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”.

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.

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.

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.

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.

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.

Using wiki markup, you can design a group menu, analytical articles, cases, and instructions. Of course, you will need to spend a little more time on this than on creating the usual posts on the wall. But the more you bother with content design, the more grateful your audience will be.

How Wiki Markup Works

Wiki markup is a language that is used to layout pages. Conventionally, it can be called the younger brother of HTML. Wiki pages make it easy to write and format text, insert illustrations, videos, links, and tables. Can be made up a simple article or create a whole interactive guide with chapters and subheadings.

The width of any wiki page is 607px. The height is limited only by the number of characters; there can be about 16,000 in total.

All wiki markup is based on tags, just like HTML. There are single tags (for example,
- line break) and paired ones (for example, thumbnail).

How tags work for text in wiki markup

In some cases, wiki markup uses simplified syntax (tags are replaced with typographic characters). For example, to create bulleted list Asterisks “*” are used, and hash marks “#” are used for numbered ones.

How typography works in wiki markup

All existing tags and methods of their use are collected in the officialVKontakte wiki markup community . Use the materials of this community as a reliable cheat sheet. In this article we will go over the basic principles of working with wiki markup and show you step by step how to use it to create group pages and menus.

IN standard editor Wiki pages have two modes: visual and wiki markup mode (the switch button looks like this:<>).

This is what it looks like active mode wiki markup

A simple text with a couple of pictures can be made up in visual mode. This is a regular text editor and does not require any knowledge of wiki markup. But if you want a neat wiki page with tables, links and embedded videos, you can only do it in markup mode - using code.

How to create a wiki page

The “Create a new page” button does not exist in the interface of VKontakte itself. Therefore, we are talking about two methods, standard and advanced (using the application).

Standard

For the group.Go to “Community Management” → “Sections” → “Materials” and select “Open” or “Restricted”.

How to enable “Materials” in a group

Now the “Latest News” section will appear on the group’s main page. This is the location for the group's proposed menu. To create a new page, you can write its name directly in the “Latest News” page editing mode, enclose it in square brackets, click on “Preview” and get ready link to a new page.

How to create a new page via Latest News

For the public.To create a new page, you need to find out the id of your public. To do this, go to the “Community Statistics” section. In the address bar of your browser you will see code like this:

https://vk.com/stats?gid= 123456789

The required group id is all the numbers after “gid=”.

Now you need to enter the following code into the address bar of your browser:

https://vk.com/pages?oid=-ХХХ&p=Page_Name

Instead of XXX we substitute the id of the public, and instead of “Page_Name” - the name that you came up with. The name can use Cyrillic, Latin and numbers. Special symbols It’s not prohibited to use them, but it’s better not to take risks: because of them, you may lose the ability to edit the page. We paste all the data into the right places, press Enter, and the browser will open the created page.

Using the app

VKontakte developers recommend using three applications for working with wiki markup:"Mobivik" , "Source" and "Vicky Poster".

In this guide, we will take the Mobivik application as an example. In November 2017, it received second prize in the VKontakte Start Fellows program. Works without installation and additional registration in the desktop, mobile version of VKontakte and in the phone application (the developer recommends using versions no earlier than Android 5.1, iOS 9 and Windows Phone 8.1).

To create a new page, from the app's main screen, select the desired group and enter a name new page, and then click "Get Link".

How to create a new page using the Mobivik application

Links to the new wiki page in the Mobivik application

Here is a life hack for those cases when you have made a complex page with big amount elements, and you are afraid that the layout will go wrong small screen. Copy the address from the “Code for wiki page” item. Go into edit mode of your page and paste it at the very beginning of the code. You will get an image like this:

When the user clicks on it, he will be taken to the Mobivik application, which will show a neat mobile version your page.

On the left is the LIVE community menu page, open on mobile,
on the right - it’s the same, but opened through Mobivik

How to get a link to a wiki page

How to find a page that was created earlier? The simplest and reliable method- copy all wiki page addresses to separate file, for example, in Google Sheets. Another way is through any application for working with wiki pages. For example, go to Mobivik, select the name of the community and desired page, click “Get link” and copy the address from the “Link to wiki page” item.

How to get a link to a previously created wiki page

How to make a post with a link to a wiki page

Copy the link to the wiki page and paste it into new entry on your wall or on a community wall. If everything is done correctly, the site will generate a link block under text field records. Now remove the link text itself, attach the banner and click “Submit”. In the desktop version, the banner will also become a link to the wiki page, and in the mobile version it will open as a regular image.

The image attached to the post will become part of the link to the wiki page in the desktop version

Text

The possibilities for formatting text in wiki markup generally do not differ from those of ordinary text editor. When editing the text itself (make it bold, align to the right, etc.), we use wiki markup tags, do not forget to close them:

Center text .

To structure the text in wiki markup, combinations of typographical characters are provided. For example, this code "—- " will put a horizontal dividing line in the text, and this ":: " - double indentation before the paragraph.

You can fit about 16 thousand characters on one page.

Links

To make the text visible instead of the address, add the name of the link:

[] - to the user profile

[] - to the main page of the community

[] - to another wiki page

[] - to a VKontakte meeting

Images

The maximum width of an image that can be used in wiki markup is 607px, which is the width of the wiki page itself. The height is practically unlimited (remember that the height of the page itself is 16,000 characters). Images can be uploaded in two ways.

Using the bootloader in top menu editor

Using code.Uploading the image to separate album group, open it, see in the address bar long code like this

https://vk.com/club12345678?z=photo-12345_12345%2Falbum-12345678_12345678

Copy the id of the picture from it (highlighted in bold). Then we frame it with double square brackets and paste it into the right places on the page. It turns out something like this:

[]

What's next? Edit alignment, text wrapping, size, link. To do this, write required parameters after vertical line and separated by a semicolon. For example, in this code we set the image size 300x100px and text wrapping on the right:

Video

First, you need to upload a video to community videos. After downloading, open the video and copy its id (in bold) from the address bar.

https://vk.com/videos-12345678?z=video-12345_12345%2Fclub12345678%2Fpl_-12345678_-2.

We frame this with square brackets and get the following code:

We get a small picture with a play icon, which, when clicked, opens a full-fledged video player. In order for the video to be played on the page itself, VK developers suggest using the tag player.

But here we get a disproportionate black border around the video:

To remove it, you need to adjust the player size to the size of the video itself. For example, in our case the following parameters were suitable:

We received the video without black frames, it will play directly on the page

Tables

If you want to beautifully structure the content of your wiki page and ensure it displays neatly on mobile devices, you can’t do without a table. Here you will need the following simple signs:

When working with tables, you can use 4 tags: noborder (makes table frames invisible), nomargin (makes the table the full width of the wiki page), nopadding (removes indents in cells) and fixed (allows you to create a table of fixed sizes).The number of cells you specify in a row determines the number of columns in the table.

Here is an example table2×2 without indentation at the top and bottom of the text inside cells:

The width of the first column is 200px, the width of the second is 300px.

That's what came out of it:

You can place text, pictures, audio and video recordings in table cells.

How to make a wiki menu

The VK group menu is not some kind of separate functionality, but simply a wiki page with several pictures, each of which contains a link to specific page. In fact, everything is simple here.

Preparing the cover for the menu.You can take any suitable picture and put text on it. Or you can hire a designer who will draw you beautiful blocks and buttons. We will have a menu with 6 buttons. To do this, we need a picture where these buttons will be indicated. Let's decide on its size.

When preparing an image for the menu, remember that the width of the wiki page is 607 px. The width of the image should not be larger, otherwise the image will shrink and lose quality. For example, we took an image measuring 510x300 px.

Cut this picture into 6 parts(one part for each button). This is convenient to do in Adobe Photoshop tool"Cutting". If you don’t want to bother, use, for example, an online service IMGonline (cuts the pictures into equal parts). We did everything in Photoshop.

With the “Cutting” tool active, click right click mouse over the picture and select “Split fragment”, indicate required quantity fragments and click “OK”.

How to cut a picture in Photoshop

Our menu will be designed as a table of 6 cells: three rows and two columns. To do this, we cut the image for the menu into 6 equal parts measuring 255x100 px. The same size will need to be entered for each cell.

We create a frame for the table.We go into editing mode for a new page and create a table. We open it with the tag (| and immediately set three important parameters:

nopadding - will allow the pictures to touch
noborder - will hide visible table borders
fixed - allows you to set the exact dimensions of the cells.

We specify a fixed cell width - 255px 255px (twice, because there are also two columns). Next, we set the places for the beginning of new lines with the |- tag and new cells (columns) with the | tag. . We close the table with the |) tag and get the following frame:

Place pictures in cells and set links for them. One by one, open the necessary parts of the picture in the community album, copy their id from the browser line ( photo-12345_12345) , enclose in double square brackets, write down the dimensions 255x100px and nopadding tag for gluing pictures. After the vertical bar we assign a link for each button. We get the following code.

(|noborder nopadding fixed
|~255px 255px
|-

| []
|-
| []
| []
|-
| []
| []
|}

Ready!Click “Save Page” and get convenient menu for the community.

Ready-made group menu in the desktop version

Ready-made group menu in the mobile version

If you made a menufor a group, then it will be easily accessible by clicking on “Latest News” (by the way, this page can be renamed to “Menu” in editing mode).

If you made a menufor public, then it can be placed in a prominent place under the name of the community using a pinned entry.

To pin a menuin Group, publish a post with a banner and a link to the wiki page on behalf of the community (if you publish on your own behalf, it will be impossible to pin the page).In public there will be no problems with fastening: there You can pin a post by any author.

How to make a post with a link to a menu in public

How to pin the community menu

New VKontakte article editor and wiki markup

The VKontakte administration announced the launch of the article editor on December 22, 2017 and positions it as a tool for publishing longreads.

Some users decided that it was created to replace wiki markup. But it’s too early to draw such conclusions, because the functionality of the editor is still quite poor. It cannot edit media files (size and alignment) or make tables, and hyperlinks can only be assigned to text. There are no tags or code, there is only a visual mode, like in a regular text editor.

From this it is clear that it is still possible to create a convenient menu for the community or a wiki landing only using wiki markup. What will happen next - time will tell.

This is what the interface of the new VKontakte article editor looks like

What to remember about wiki markup

The standard method of creating wiki pages is laborious and not very convenient. The easiest way to create a page is through the Mobivik application, “ Source" or "Vicky Poster".
The community menu needs to be made into a table so that it looks neat on mobile devices.
When editing a wiki page in the standard interface, you should not switch between visual editing mode and wiki markup mode. Because of this, the layout may be affected.

It is not necessary to remember all the tags, just keep the link to hand

To register a group in social network there is a convenient and simple wiki markup for the VKontakte group. It works similarly html code y, but intuitively easier and understandable for simple user, the owner of the group. This markup is used in Wikipedia (the free encyclopedia), and hence its name.
Using Wiki markup, you can design a group in a unique or traditional way, and you won’t have to go into the html jungle, where you can get stuck for weeks. Wiki markup so easy to learn that you will learn it yourself inexperienced user in just one hour. This markup also handles image and text formatting, anchors, spoilers, links, graphic tables and other elements that can qualitatively change appearance any group.

A menu in contact can be created in several ways, and their choice is determined by the focus and theme of the VK group. For social and commercial groups, users prefer to use serious text menus, and for entertainment - graphic.

Wiki markup is great for working with photos or any images, but there are a few tricks. An image inserted using wiki markup will only appear if it is present in the album. With a simple manipulation, a photo (for example: photo55775_55775) will immediately appear on the page. To do this, you need to copy her address and add double square brackets to it.

It looks like this - [] - and this markup is applicable to any image that is in the albums. By adding markup, you can insert both text and a link along with the image, thereby changing its appearance.

To do this, you need to use the following wiki markup - []. The word "options" can be replaced with other values, each of which will change the appearance of the photo. And the meanings are as follows:

noborder will make a drawing without a frame;
nopadding will join images together by removing spaces between them;
plain will make a link from the picture;
NNNpx will allow you to resize the image;
box will open in a new window.

Working with tables using Wiki markup?

Both menus with graphics and menus with pictures are impossible without special tables. Having learned a simple set of codes and symbols, you will learn how to quickly create tables for your VKontakte group. This is what the symbols look like:

(| without this initial symbol it is impossible to create a table;
|+ optional character to center the table
| - begins with this symbol new line;
| this symbol is responsible for the transparency of cells;
! using this symbol you can make a dark-colored cell;
|) This optional character ends the table.

This is the menu that will come out of the following very simple code:

{|
|-
|

"New items"||"'Games"'||”’All genres’’
|-
![]!![]!![]
|-
|
[[New online games|New items]]

[[Puzzles]]

|
[[Balloons]]

[[Quests]]

[[Arcade]]

[[Game discussions]]

|-
|}

Generating links using a wiki - markings?

In a contact, you can use three types of links to design a group using wiki markup.

Traditional link:

Regular link + text:

Link as a picture: []

Working with graphic menu?

To create it, a simple algorithm of actions is used. But you need to know, at least superficially, how Photoshop works and study the wiki markup. But graphic menu in the entertainment group VKontakte looks very attractive, and therefore take the time to create it. The algorithm is like this:

Cut the necessary graphics in the editor and “save for the web”;
Download graphics as ordinary pictures, without using flash so as not to degrade their quality;
Assemble the menu using a special “nopadding” tag;
Write down all links carefully;
Beautiful menu for your entertainment group ready.

A few secrets of wiki markup

This markup is not similar to html code, and some of its features can only be tried experimentally. But if experimentation isn't your thing, explore following features, in order to avoid mistakes and guess why this or that element does not obey the wiki markup. Markup tricks:

The allowed image width is no more than 610px;
Changing the width automatically changes the height of the image;
Pictures smaller than 134px change the quality for the worse;
Only 7 list elements can be present in a line of markup;
More than 18 unclosed tags on one page will lead to its distortion and errors.

Programmers' applications for wiki markup

If you find the markup too complicated, use simple applications, which the authors themselves call training lessons. This is if you want to learn the secrets of markup. If science is not easy for you, create VK groups using a simple visual editor, which itself writes the correct code.