How to design a VKontakte wiki page. Wiki markup on VKontakte, creating wiki pages

Editing an article on Wikipedia is easy. Follow the "edit" link. The edit page will open; it has a text form with the original text of the article, which contains special characters - the "wiki" markup described below.

Editing

Then: make the desired changes to the source text; Briefly describe the meaning of your edit in the “Description of changes” line; To check the correct display of the page, click the “Preview” button; If everything is fine with the page, publish your new version by clicking the “Save Page” button.

Please write from a neutral point of view: avoid bias and excessive emotionality; indicate the sources of your information - this will help others check and complement your work. Vvilam: it's not difficult and very useful.

Additional features

Above the text editing form there are buttons for formatting text, below there is a panel for quickly inserting special characters, wiki markup elements and templates. The “Changes Made” button allows you to compare the source code with what you have in the editing window. Registered members also have access to: a Minor Change checkbox, which allows you to mark your changes as minor; Check the “Watchlist this page” checkbox to monitor future changes to this article. It is often convenient to first copy the text into a text editor (via the clipboard), edit it, and then transfer it back to the editing form in the browser. For these purposes, you should use a text editor that supports Unicode. In addition, you can discuss articles with other members. Almost every article on Wikipedia has a parallel page with its discussion. Members simply edit this page the same way they edit articles: go to the "discussion" page and click "edit" there. In discussions, again, rules should be followed; the main thing is to avoid harshness and subscribe (four tildes niska 14:39, June 14, 2007 (MSD) in the page code).

Wiki markup

Below is a reference table for editing on Wikipedia.

Sections, paragraphs, lists and lines

Start the section with a title line:

New section == === Subsection === ==== Sub-subsection ====

A single line feed has no effect on markup. It can be used to separate sentences within a paragraph. Some editors find this makes editing easier and improves the version comparison feature.

But a blank line starts a new paragraph.

You can use the "br" tag to break lines without starting a new paragraph

Making a list is very easy

each line begins with an asterisk;
- the more stars, the deeper the level;

Indentation inside can also be done using a colon

* each line begins with an asterisk; ** the more stars, the deeper the level; **: you can also indent inside using a colon

Numbered lists are good too:
1. Numbered lists are good too:
2. very organized;

easy to read

# Numbered lists are also good: ## very organized;

## easy to read
1. You can also make mixed lists:
  - You can also make mixed lists:
2. and invest them

such as,

Here.

* You can also make mixed lists: *# and nest them *#* like *# here.

A semicolon at the beginning of a line and then a colon creates a two-level list.

A colon at the beginning of a line indents a paragraph.

A simple line break begins a new paragraph.

Note: This applies primarily to talk pages.

If a line begins with a space, then it will be formatted the same way it was typed; fixed width font; without line breaks. This can be used for:

* insert preformatted text;

* descriptions of algorithms;

* program source code * ascii art (creating images using text characters).

Centered text.

Horizontal dividing line: four dashed lines in a row (----)

You can control the alignment of paragraph text using the tag

With the align parameter, with the value center for center alignment, justify for width alignment, left for left alignment, right for right alignment.

The default is left alignment.

For example, to align by width, use this design:

Attention: if the case of the referring word or phrase does not coincide with the nominative, then you should put a vertical line in double square brackets and write the nominative case to the left of it, and to the right - the corresponding grammar of the sentence in which the link is inserted.

Example: London has good public transport.

London has good [[public transport]]. London has good [[public transport| public transport]].

The endings merge with the reference: testing, genes

The area enclosed in parentheses is automatically hidden: kingdom .

Automatically hides namespace: Community Portal.

Automatically hides those enclosed in parentheses: [[kingdom (biology)|]].

Automatically hides the namespace: [[Wikipedia:Community Portal|]].

You can link to a subsection in the article itself by indicating it after the hash: Link.

You can link to a subsection in the article itself by indicating it after the hash: [[Wikipedia:Rules and Guidelines#Refer|Refer]].

When adding comments to a talk page, you should sign them. This can be done by adding three tildes to get the username:

niska

or four to get the username plus date/time:

niska 14:39, June 14, 2007 (MSD)

It is the option with date and time that is preferable.

When adding comments to a talk page, you should sign them. This can be done by adding three tildes to get the username: : ~~~ or four to get the username plus the date/time: : ~~~~ It is the date and time option that is preferred.

External link: , for links not in Russian it is advisable to indicate the language: ((ref-en))

Or simply enter the URL: http://www.nupedia.com.

This address is provided as an example, do not use it.

You can specify your email like this:

[[Media:Sg_mrob.ogg|Sound]] [[Media:Tornado.jpg|Tornado image]]

ISBN 0123456789X Text formatting
Bold and italic styles are used in the following cases: logical emphasis, structural emphasis, logical emphasis in structural emphasis (or vice versa)
logical stress .

structural highlight

logical stress in structural emphasis (or vice versa)
These are double and triple apostrophes, not quotation marks.
""logical stress""

You can also write in italics and bold if you are interested in a specific font style rather than logical emphasis, such as in mathematical formulas: F = ma

:F = ma

Monospace font for technical terms technical terms

technical terms

Special formatting for source code snippets

source code

You can use small text for headings small text for headings

small text>

You can cross out deleted material and underline new material, cross out deleted material and highlight new material

~~cross out deleted material~~ And highlight new material

on making money on VKontakte. I'm talking about creating internal pages. Already in several articles I touched on working with the VKontakte wiki, when I wrote and also. But all the time it was somehow superficial, so to speak, “galloping across Europe.” I completely devoted this article to the fact that how to create a wiki page.

What is a VK wiki page

Wiki markup- these are special tags that help to design a VKontakte group, make it colorful, user-friendly and stand out from the crowd using internal pages. To design your group well, you will need a lot of patience and strength!

Here's a cool example of such a page:

Before us is a navigation menu based on wiki markup VKontakte. This page turns out to be very bright and functional - there are subsections, links to individual articles, archives by month, and much more. All large communities necessarily have such pages, because without them, not only subscribers, but also the administrators themselves can get confused in the amount of information. Categories are convenient for both the user and the administrator.

Of course, a beginner will not be able to create such a bright navigation, and it would be more correct, but if you do not have such an opportunity, then at first even such a simple text menu will be effective:

By the way! Please note that there are two possible page options: in the first example, the page floats on top community, and in the second - it opens separate window. Look at the address bar and you will see the difference.

Wiki markup on VKontakte is the functionality that allows you to turn a VK group into an almost full-fledged website! And that's cool, because this way we can do it for free! I’ll tell you how to make internal pages a little lower, but for now I can’t help but mention another super-useful feature - creating a full article.

How to make a post article on VKontakte

What does a typical VKontakte post look like? Text, and at the end one or more images or music. Sometimes you want to make sure that the pictures are inside the text. The same way it is done on websites and blogs (in this very article that you are reading now, for example). For example, if we want to get this result:

Such an entry consists of a smaller number of elements; there are no separate headings, sub-headings, or site-type buttons, but it is created according to the same principle as menu pages (see above). Oh, it's very easy to make! To do this, you don’t need to delve into the theory of working with a wiki. I will give you a simple algorithm

Algorithm for creating wiki pages

To create an internal VKontakte page, you need to correctly enter its address in the browser

We enter it, press Enter and we will be redirected to a new page, which we can fill out as we please.

After filling out and saving the page we will receive final address for work - page-52497428_44506807, which we will use.

How to fill out a wiki page

Well, you shouldn’t have any problems with filling. We write the text, decorate it and format it:

As you can see, this panel is very similar to a regular text editor or a reply box on a blog or forum. in the right corner you see a symbol<>. This is a mode for switching between wiki markup code and visual display.

A fully filled “beautiful” menu page in layout mode looks a little scary, but in reality it is just a set of tags and links to images and other pages, among which the text is hidden.

It’s possible that you won’t need the markup mode at all, but sometimes it can happen that the finished page “goes wrong” - the fonts or links are out of order, or the picture is missing. Then it makes sense to look into this mode and find extra tags there or deliver a lost bracket.

I recommend working with internal pages in a regular text editor on your computer (word, notepad) and saving the finished pages somewhere at home. The fact is that the wiki markup in the contact has not yet been finalized and problems often arise - either the line will disappear or the picture will disappear. Therefore, you should always have a clean, working version of the page saved separately.

If you decide to study the VKontakte wiki features in more depth, then retweet this article, and in the comments I will give you links to useful resources, okay?

Social networks have long been part of the lives of most people and are an important component in it. Many people even manage to create their own virtual businesses in them: getting likes, subscribers, selling goods both from other countries and copyrighted ones. Almost all of them have a group. How can you quickly convey to users what a person or even an entire organization does? Create a special menu that will contain the most necessary information. And this is where we need Wiki markup. How to make a VK group menu? What should I add to it? The article will discuss creation rules and examples.

What is Wiki markup?

How to make a VK group menu? Wiki markup is a good help! This is a very effective and convenient way to create a group on the VKontakte social network. This markup is very similar in principle to html code. But for people not involved in programming, it will be more understandable due to the ease of implementation. Wiki markup got its name thanks to Wikipedia, where many users were able to get acquainted with the main features of its functioning for the first time. Wiki markup allows people without programming knowledge to quickly and easily design the appearance of a group:

Create graphic spoilers and tables.
Format text and images.
Work with anchors and links.

How to make a menu for a VK group? Recommendations can be so necessary, but in general, you can figure it out with the help of a good guide. If we talk about html, then to study it and work with it it was necessary to sit for several days or even a week. Wiki markup requires only a little time if you have a good memory. How can it be created? What approaches are there? So we will talk about technology, but who made it? We will figure out how to make a menu for a VK group. Ward Cunningham first introduced the concept of “wiki” (translated from Hawaiian as “fast”).

Ways to create wiki markups

You need to ask yourself not only the question: “How to make a menu in a group on VK,” but also clarify how to implement it. You can choose several paths. Each of these depends on the focus and purpose of the group. So what could it be:

If the group has a social direction, then you can create a text menu. Advantages are given to him due to his more serious appearance.
It is advisable for groups of a commercial and entertainment nature to rely on a graphic menu. The use of images in it will allow you to draw the attention of users to what should be visible. Taking this approach will also help you make your group experience more enjoyable and relaxing.

As an example of work, we will look at working with pictures and photographs, how to make tables, insert links, open and much more. Of course, this is not all the functionality, but you can design your group’s menu in this way easily and on a fairly significant scale.

Working with Images

How to make a menu in a group in VK that would be beautiful? On the VKontakte social network, it is possible to insert a photograph or picture using wiki markup only in cases where they are uploaded to the site’s photo albums. So, go into it, select the desired photo and copy its address. For example, let it be like this: photo12345_67890. Now you need to take it into doubles. You should get the following result: []. What if text or a link should be attached to a photo or image? Or maybe you want to edit the appearance a little? Then the following will help with this: it is necessary that the file looks like this - [[photo12345_67890|options|text/link]]. Instead of the last three words, what is needed is substituted. Text - we write what is needed. I think no special explanations are needed. Link is translated from English as “link”. Specified so that the user's machine knows where it needs to go. Options - the following values can be set here:

Plain - the link to the image is formatted as text and does not contain a picture.
Noborder - removes the frame around the photo.
Box—the image opens in a window.
Nolink - the link to the photo is removed.
Nopadding - spaces between images are not displayed.
NNNxYYYpx or NNNpx - indicate the size of the image in pixels. The first option provides width and height. If desired, you can “compress” the image. And the second option involves editing the width.

How to create tables using wiki markup?

Typically, both graphical and textual menus require an element that allows you to present data in a convenient form, namely tables. Few groups on VKontakte can manage without them. To create a table in wiki markup, you must use a specific set of characters. We invite you to familiarize yourself with what functionality they are responsible for:

(| - this is how the beginning of the table is indicated. It is impossible to do without it when creating this element; it is a required attribute.
| - used to give cells a transparent effect.
|+ - using this character set, the table name is centered. This is not a required attribute, but it must be placed immediately after the signs that indicate the beginning.
|- - this is how new lines are designated (including for cells).
! - gives a dark color. If this is absent, you must use the sign from point No. 2.
|) is a set of characters that denotes the end of the table. It is an optional attribute. But it is still recommended to use it to prevent errors from occurring.

How is the cell filled? All data that must be entered into them is placed after the | signs. If you want to separate cells from one another, you just need to duplicate it this way: ||. Everything that has been said up to this point may not look very clear, but this will now be corrected with the help of an example.

Creating a group menu on the VKontakte social network using wiki markup: an example of implementation

The noborder and nolink options will be used here. They will remove the picture frame and link. Also, the images will be resized, and the second row of table cells will have a dark fill, thanks to the use of the! attribute. And here is the example itself:

{|
|-
|

“’New in Science’’||
|-
![]!!
|-
|
[[Science News|News]]

[[Discoveries]]

|
[[Conferences]]

[[Developments]]

[[Books]]

[[Symposia]]

|
Sections:

[[Medicine|1]] | [[Physics|2]] | [[Math|3]] | [[Economy|4]]

[[Chemistry|5]] | [[Biology|6]] | [[Programming|7]] | [[Electrical Engineering|8]]

|-
|}

As you can see, the answer to the question: “How to make a menu in a group in VK?” very easy.

The importance of Wiki markup when promoting your project

Using these developments allows you to give the group its own atmospheric look and create a feeling of comfort. Of course, for a full design, it would be necessary to also be able to set the theme of the page, but this has not yet been implemented in the social network. Therefore, know, those reading these lines, that it is not in vain that you became interested in how to make a menu in a group on VK.

Conclusion

Now, readers know how to make a menu in a VK group so that it is beautiful. As you can see, this functionality is useful and at the same time quite easy to implement. But before creating a menu, you need to think about what should be organized and how, and what should be highlighted. After all, incorrect optimization can only make things worse.

We've released a new book, Social Media Content Marketing: How to Get Inside Your Followers' Heads and Make Them Fall in Love with Your Brand.

Wiki markup is a tool for formatting text in VKontakte publications.

This tool expands your text formatting options. It allows you to create a navigation menu with buttons, games, and a tutorial in a group or public page. Pages edited in this way attract attention, structure information and make it user-friendly. Instead of a continuous information canvas, you get full-fledged material with graphic elements: tables, videos, images.

More details about VKontakte wiki markup

What else can you do with similar content:

The Wiki language allows for convenient graphical navigation of group visitors. It is also used to develop simple quests. For example, "Exit".

How to make a wiki markup

There are apps for quickly and easily designing pages. The list of these services includes:

Mobivik(for mobile devices)

In the first case, you enter the program and follow its instructions step by step.
In the other two, you need to select the community with which you will work, click “New” in brackets next to its name, enter a title and go to the editor.

How to create a publication yourself

First you need to open materials in the group. To do this, go to management, select “Partitions” and enable this item. Then go back to the community. You will need the page id. These are the numbers from the address bar after the word club.

Next, use the link http://vk.com/pages?oid=-*******&p=Name.

Replace the community address with it. Instead of asterisks, insert your id and replace the name with the name of the section. Please note that it cannot be changed. You can write in Russian, with spaces and numbers.

Click “Fill with content” and the editor will open. Now you will need the address again. This time it is important to copy the first part of it, up to “?act...”.

Be sure to save it in a separate document. Since the page is not pinned yet, you will lose it.<>Switch to markup mode by clicking the icon

– on right. It has more features and works without errors. Nothing complicated here. Create subheadings, paragraphs, and arrange photos the way you like. To do this, you can use the toolbar or tags:

– bold font.

– italics.

underlining.

- link.

Then make the post visible to subscribers. To do this, leave the link that you copied earlier on the community wall, click on the three dots on the right and select “Pin.”

If you want to attach a large picture to a note, open the settings again, click on the camera and select a suitable illustration.

Menu

We will look at the simplest type of graphical navigation. You will need an image cut into several parts or ready-made icons.

To divide photos into elements, use the IMGonline service. Download them and load them into the editor. Don't forget to click<>. If you want to combine them so that there are no borders between them, add nopadding to each. After this word, add a link to the section to which the button leads.

Save the results and pin them to the community wall (on behalf of the group), pin it in the settings. Choose a picture. The menu is also designed in wiki markup applications.

Tables

On wiki pages they are created using various codes. You can make them yourself or find a ready-made template. Each matrix opens with the symbols "(|" and closes with "|)".

Other signs:

|- – start of a new line. Placed after (|.

| – simple cell.

! – a cell with selected, centered text.

|+ – centered title.

Tags are also often used in construction (always written after the first character):

Noborder – no visible borders.

Nomargin – increases the table by the width of the material.

Nopadding – reduces the padding in cells.

Fixed – fixes the width.

Example.

Wiki markup codes

This is what headings, indents, lists, dividing lines and signatures look like in wiki language and in the final version.

Such publications are an unusual and difficult tool for beginners. It happens that you do everything right, but nothing works out. To avoid mistakes, follow three rules:

Don't format your content in a visual editor. Switching to this mode causes the settings to go wrong: tags disappear and the size of pictures gets lost.

Do not add extra signs to the names: “+”, “_”. They are subject to recoding, as a result of which the menu may break.

Shorten long links using this service. The first level domain must be no more than 6 characters.

Wiki markup is not a simple, but effective way to promote and develop the VKontakte community. To make using the tool easier, use apps. In some of them, publication is literally a few steps away. The VK website presents a voluminous textbook that covers all issues related to the wiki language.

I think everyone who actively uses the VKontakte social network has already come across beautifully designed groups and public pages. Many of them, in addition to the menu, also have many stylized sub-pages, catalogs, etc., which essentially creates a small website right inside the social network.

Here are a few examples so everyone understands what we're talking about.

Such groups allow you to stand out among your competitors and attract more users. Especially if the content is also interesting :)
In this article we will talk about how this is all done. To analyze everything in more detail and delve into all the subtleties, let’s take a specific example. There will be a small master class on group design.

The very first stage of our work is the idea. We need to understand what we want to tell and to whom. There are several community formats in VKontakte, and you should choose based on your goals. Although in the future the group can be transferred to a public format and vice versa.

I explain with my fingers. Public- this is something like a blog. News feed. In other words, we tell our subscribers about certain things and they will not be able to write on the wall of our community. The maximum is to comment.

Group allows you to create a community more open to conversation and discussion, where people can make posts in the feed on their own behalf. You can also add friends from your list to it. There is no such option in public. In addition, the group has a little more options for integrating wiki markup (there is a “News” section into which you can integrate a menu).

Globally, we can think like this: if we need to create a community for a store, then I would take the “public” format. If we'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.

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.

We see that in both parts of the picture there is a strip overlooking a residential area. Without using a template, it is almost impossible to do it exactly the first time. You will need to adjust the pictures, measuring discrepancies up to 1px. Whereas when using a template, we simply add graphics to it within the markup and immediately get the desired result.

I would like to note that this template is designed for 1 line of explanation. In the example screenshot there are telephones. If a second line appears, you will need to use a different template or correct the design manually.

In the meantime, we are proceeding directly to the graphic design of our new group. This is where I take the path of least resistance and head to Google Images to find parts of the design. You can also use Yandex. Who likes what more?

I don’t have a design education, so we won’t dwell in detail on the issues of choosing fonts and other details. After doing a little magic in Photoshop, I got this result.

On the left fragment (where it says “Menu”) you can also add several triggers. In this case, I decided to do without them. All. The avatar design is ready. In Photoshop, press the hotkey combination Shift+Ctrl+Alt+S and save our fragments to a folder on your hard drive.

The first stage of working with graphics is completed. Let's get back in touch.

Setting an avatar and menu for a group

We click on two types in place of our group’s ava and upload our image there. Here are these guys, under them it also says “Upload a photo.”

Add a picture. Specify the fields and select a thumbnail. Everything is simple here and there should be no problems.

As we can see, you need to know the community id. It's very easy to recognize him. Find the menu in your group (immediately under the avatar) and open “Community Statistics”. In this case, something similar will appear in the address bar of the browser (the numbers will be different).

These numbers after “?gid=” are the desired group id. We paste the resulting value into the script form and write the name for the page that we want to create. In this case, I type in “Menu”.

It is worth noting that the page will 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 later create a wiki markup and create an internal menu for our group. For now, all we have to do is write something here. Then click the blue “Save Page” button and click on the Return to page link at the top.

I wrote “Menu” and my page after saving began to look like this.

There is no design yet, but now we just need a link to this page. We select it in the address bar of the browser and return to the main page of our group. To the feed.

Here we create a post with the following content: insert a picture and a link to the menu page for the group.

Click send. Then click on the time the message was sent and select “Pin” from among all the options. We update the page (F5 key on the keyboard) and, if everything is done correctly, we get the first result: the group has found an avatar and a link to go to the menu section.

Wiki markup for VKontakte group menu

Now let's start designing the menu itself. Let's go to Photoshop again and create a design for our menu. When designing the interface, you need to remember those people who will access VK through the application from mobile phones. In other words, we should not have small elements and, in addition, we should try to make everything as clear as possible. So that we don’t have to guess how everything works here and where we should click... but just point at the right item and study the information we are looking for.

I won’t go into detail now about exactly how I put together the menu. Here's what I got.

Minimum fields. Vertical layout. Ideal format for a responsive menu. That is, nothing will go anywhere on mobile phones. Everything will be exactly as on the screens of computers and tablets. I take the width to 500 px, so that later nothing will shrink and I won’t lose the quality of the image twice. Height is not important.

We cut the image into fragments and save them.

All. The time has come for the final chord - we are collecting the menu in the group itself.

To do this, we return to the main page of the group (where the feed is and our picture link leading to the menu). We click on the menu image and get to the same page that we previously created for the menu.

If you are an administrator or the creator of a group (in our case, this is the case), then at the top of the page there will be an “Edit” link. Let's click on it.

Then we go to wiki markup mode (under the close button in the upper right corner of the page there is a frame with<>inside). When the desired mode is activated, this button is outlined in gray.

Then we click on the camera icon and add all the fragments of our menu at once. In wiki mode, we will not see the pictures themselves, only the code of these images with dimensions and parameters.

I want to position the menu in the center and so that there are no gaps between the fragments. Therefore, we wrap each of the elements in a tag
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 elements should not be buttons - in my picture they are just a graphic element without a link to the internal page, so we add the “nolink” parameter to them. This will remove the ability to click on this element to open a piece of the picture in a separate window. Now nothing will happen with a mouse click. This is the normal page background. Inactive.

In my case the menu code looks like this.

Separately, I would like to note the fact that after importing pictures into VK, the built-in system sometimes incorrectly indicates the image sizes. Therefore, we need to carefully monitor this and display exactly those that we planned at the design stage. Otherwise, everything may fall apart and the puzzle will not come together in the end.

When we have written the code and aligned all the elements, we save the page and see the same thing that was in Photoshop.

The final touch remains - we need to create the very pages where our menu will send people. To do this, let’s turn again to the script for generating wiki pages and this time order three pages at once. In this case, you also need to write something on each one and do not forget to save their addresses somewhere from the address bar of the browser.

Then we insert links to new pages into the wiki code of the menu in the form page-102302049_51013384, where the first number is the group id, and the second is the page number. Although, in general, this is not important. After all, we just need to copy this URL fragment and paste it into the markup.

As a result, the menu code takes the following form.

Outwardly, nothing has changed. But when we click on the menu items, we can see that now it works!

As for the markup itself and the rules by which the code is written, I advise you to read the VKontakte group specifically dedicated to this matter. The guys described all the key points and in their catalog you can easily find the necessary element and figure out how to add it to your wiki page.