Desain halaman komunitas VKontakte yang berkualitas tinggi sudah setengah dari keberhasilan dalam mencapai tujuan pembuatan grup. Statistik menunjukkan bahwa kehadiran navigasi secara signifikan meningkatkan lalu lintas halaman dan juga meningkatkan jumlah pelanggan. Halaman komunitas, tempat semua informasi disusun, menciptakan kesan pendekatan serius para administrator terhadap bisnis, serta keterampilan praktis mereka dalam memimpin grup dan keandalan. Pada artikel ini kita akan berbicara tentang menu untuk grup VKontakte, cara membuatnya dan membuatnya senyaman navigasinya.

Variasi menu untuk komunitas VKontakte

Sekarang ada dua jenis menu grup VKontakte. Templat mereka, tentu saja, tersedia di Internet, dan Anda dapat melakukan semuanya secara ketat sesuai dengan templat tersebut. Namun hasilnya tidak akan kreatif dan orisinal sehingga tidak akan menarik banyak pelanggan.

Jadi, ada menu tertutup dan ada yang terbuka.

Tertutup mendapatkan namanya karena pelanggan harus membukanya sendiri. Untuk melakukan ini, Anda hanya perlu mengeklik tautannya. Kata apa pun dapat digunakan sebagai tautan, biasanya “buka” atau “menu”. Meskipun demikian, beberapa orang menjadi kreatif dan menghasilkan tautan asli.

Terbuka adalah postingan yang telah disematkan. Ini berisi tautan valid ke menu. Jenis ini masih cukup muda; muncul belum lama ini, atau lebih tepatnya dengan munculnya fungsi menyematkan postingan ke dinding halaman. Menu terbuka adalah yang paling efektif sejauh ini dan lebih menarik daripada menu tertutup. Opsi pertama kurang produktif, karena pengunjung grup mungkin tidak melihat tautannya.

Jadi, VKontakte? Jawabannya cukup sederhana. Untuk membuat kedua jenis menu untuk grup VKontakte, markup wiki digunakan. Ini adalah alat yang sangat berguna; memungkinkan Anda membuat tabel, grafik, memformat dan mengedit gambar, bekerja dengan tautan, dll. Namun, kini segalanya jauh lebih sederhana bagi pembuat komunitas VKontakte dibandingkan beberapa tahun lalu. Jejaring sosial secara otomatis mengubah semua konten menjadi markup wiki.

Menu terbuka untuk grup VKontakte kini lebih populer, namun menu tertutup praktis tidak digunakan lagi. Oleh karena itu, masuk akal untuk mempertimbangkan secara lebih rinci pembuatan tipe terbuka. Selanjutnya, Anda akan mempelajari cara membuat menu di grup VKontakte (petunjuk langkah demi langkah disajikan di bawah).

Tahap satu

Pada tahap ini Anda perlu memilih gambar. Mereka akan menciptakan tampilan halaman yang rapi. Gambar dapat ditemukan di Internet atau dibuat sendiri menggunakan editor foto. Opsi kedua hanya cocok untuk mereka yang pandai menggambar di komputer dan menguasai Photoshop.

Gambar pertama adalah avatar. Yang kedua (pusat) adalah gambar-aksi. Parameter avatar minimal harus 200 x 330 piksel. Gambar pusat setidaknya berukuran 390 x 280 piksel.

Tahap dua

Buka halaman grup dan temukan "Manajemen Komunitas". Tautannya terletak di bawah foto depan halaman sebelah kanan. Setelah mengikuti tautan, temukan bagian “Bahan” di informasi, lalu klik “Terbatas” di paragraf ini.

Di halaman utama, klik edit di baris “Material”. Pada formulir editor yang muncul, tentukan nama, bagian, lalu pastikan untuk mengklik tombol di bawah untuk menyimpan. Setelah itu, kembali ke halaman menggunakan tombol di pojok kanan atas.

Tahap ketiga

Salin alamat halaman. Barisan nomor pertama setelah kata “halaman” adalah nomor komunitas, baris kedua adalah nomor halaman grup. Anda perlu mengetahui hal ini ketika memikirkan cara membuat menu di grup VKontakte. Alamat harus dicantumkan di dinding bersama dengan gambar pusat. Untuk melampirkan gambar, klik “lampirkan” dan “foto”. Selanjutnya, pilih dan tempel. Kemudian klik kirim - ini akan mempublikasikan postingan.

Tahap empat

Tempatkan gambar pertama di tempat foto komunitas utama. Rekaman tindakan ini beserta gambarnya akan muncul di dinding. Tidak ada gunanya di sana, jadi perlu dihilangkan.

Ini semua. Ketika pengguna mengklik gambar pusat, menu grup akan terbuka untuk mereka.

Bagaimana cara membuat tabel di menu?

Setiap administrator memikirkan cara membuat menu di grup VKontakte. Petunjuk yang disajikan di atas hanya dapat membantu Anda membuat menu dasar. Selanjutnya perlu ditingkatkan.

Tabel ini sangat nyaman untuk menavigasi menu grup VKontakte. Membuat tabel memerlukan pengetahuan tentang simbol-simbol tertentu.

• (| artinya awal;
• |+ lokasi pusat;
• |- dari baris baru;
• | transparansi;
• ! isi sel gelap;
• |) menunjukkan akhir.

Bagaimana cara membuat tautan?

Pada pertanyaan bagaimana cara membuat menu di grup VKontakte, ada poin penting mengenai link. Mereka dapat dirancang dengan berbagai cara:

• Tinggalkan saja tautan. Untuk melakukan ini, letakkan tautan dalam tanda kurung siku.
• Buat tautan dengan kata atau frasa. Buka, paste linknya, setelah link beri tanda | dan tutup braket persegi.
• Tautan gambar. Anda dapat melakukannya menggunakan contoh ini: [].

Paling sering, setiap orang belajar sendiri cara membuat menu di grup VKontakte. Pengetahuan datang dengan pengalaman melalui trial and error. Namun, para pemula masih bisa diberikan beberapa rekomendasi.

• Ukuran gambar tidak boleh kurang dari 130 piksel. Ini akan menurunkan tampilan menu secara signifikan.
• Lebar gambar tidak lebih dari 610 piksel.
• Halaman wiki tidak boleh berisi lebih dari 17 tag yang tidak ditutup.
• Saat Anda mengatur indikator lebar, tinggi secara otomatis berubah sesuai proporsi.
• Anda dapat membuat daftar di dalam tabel menggunakan />.
• Maksimal 8 unit daftar dapat ditempatkan dalam satu baris.

Antara lain, terdapat program khusus untuk memudahkan penggunaan markup wiki. Ini adalah aplikasi pendidikan dan asisten nyata yang akan melakukan segalanya untuk Anda.

Misalnya, aplikasi Interactive FAQ (beta) memungkinkan Anda menguji kemampuan Anda dalam pemrograman wiki.

Pengoperasiannya sederhana: pengguna disajikan menu yang sudah jadi, dan diharuskan memasukkan kode markup. Pada akhirnya hasilnya dibandingkan dengan aslinya.

Program Editor Wiki tidak mengajarkan atau melatih penggunanya apa pun. Dengan bantuannya, Anda dapat membuat menu bahkan tanpa keahlian pemrograman dasar. Editor yang mudah digunakan menulis kodenya sendiri - yang perlu dilakukan pengguna hanyalah mengontrolnya.

Jadi, siapa pun yang berencana menggunakan grup tersebut untuk mempromosikan bisnisnya atau sekadar bersenang-senang dapat membuat menu VKontakte. Menu tersebut membuat promosi bisnis jauh lebih efektif dan menarik pengguna ke halaman grup. Menu membuat komunitas terlihat rapi dan lebih profesional dibandingkan pesaingnya yang tidak memilikinya.

Halo teman teman. Semuanya bergerak, semuanya berubah. Jejaring sosial Vkontakte juga tidak tinggal diam. Jadi publikasi saya tentang pembuatan satu blok di VKontakte Avatar+Menu menjadi tidak relevan saat ini. Sekarang, saat membuat grup, blok Berita, yang diperlukan untuk menu seperti itu, hilang begitu saja.

Untungnya, Vkontakte memiliki kemampuan untuk membuat halaman wiki. Dengan menggunakan halaman wiki tersebut, kita dapat membuat menu komunitas, dan kemudian menyematkan menu ini ke bagian atas grup.

Jadi, mari kita urutkan.

Bagaimana cara membuat halaman wiki?

1. Buat tautan seperti ini di bilah alamat browser Anda:

• xxx– id grup atau halaman publik Anda;
• Judul halaman– kata apa pun yang Anda gunakan untuk memberi nama halaman Anda.

Bagaimana cara mengetahui ID komunitas Anda? Jika id tidak terdapat pada link, misalnya, https://vk.com/make_community, dapat diketahui sebagai berikut. Klik pada judul dinding grup tempat jumlah publikasi ditulis.

Dinding komunitas Anda akan terbuka secara terpisah. Akan ada nomor di bilah alamat. Ini adalah id komunitas Anda.

2. Ikuti tautan yang Anda buat dan klik “Isi dengan konten.”

3. Isi halaman Anda dengan konten. Misalnya kita memerlukan menu grafis berupa tombol-tombol tersendiri. Pertama kita membuat seluruh gambar.

Lalu kami memotongnya menjadi tombol-tombol tersendiri. Dalam kasus khusus ini, kita harus memiliki empat gambar tombol.

Kami kembali ke halaman kami dan, menggunakan editor bawaan, memuat gambar tombol kami.

Setelah memuat semua gambar, tampilannya akan seperti ini:

Dengan mengklik salah satu gambar, Anda dapat menentukan link ke halaman tempat item menu ini akan diarahkan. Ini bisa berupa halaman komunitas Anda atau halaman di situs web eksternal atau toko online.

Kami membuat menu.

Anda harus mendapatkan postingan seperti ini di dinding grup VKontakte Anda:

Bagaimana cara menyematkan menu?

Yang harus kita lakukan adalah menyematkan menu ke bagian atas grup. Untuk melakukan ini, klik teks di depan gambar di postingan. Di jendela yang terbuka, klik “Sematkan” di kanan bawah.

Semua. Sekarang kita harus mendapatkan sesuatu seperti ini:

Jika Anda ingin membuat menu dan avatar tampak utuh, pilih saja gambar yang merupakan kelanjutan logis dari avatar grup Anda.

Di semua komunitas VKontakte di mana informasi dapat disusun, saya sarankan membuat menu. Ini pasti akan meningkatkan pengalaman pengguna komunitas Anda. Kami telah menunjukkan kepada Anda cara mengamankan menu VKontakte menggunakan contoh spesifik. Kami tetap mengucapkan semoga sukses dalam pengembangan dan promosi komunitas Anda!

Saya rasa setiap orang yang secara aktif menggunakan jejaring sosial VKontakte telah menemukan grup dan halaman publik yang dirancang dengan indah. Banyak dari mereka, selain menu, juga memiliki banyak subhalaman bergaya, katalog, dll., yang pada dasarnya membuat situs web kecil tepat di dalam jejaring sosial.

Berikut ini beberapa contoh agar semua orang memahami apa yang sedang kita bicarakan.

Grup semacam itu memungkinkan Anda menonjol di antara pesaing dan menarik lebih banyak pengguna. Apalagi kalau isinya juga menarik :)
Pada artikel ini kita akan membahas bagaimana semua ini dilakukan. Untuk menganalisis semuanya secara lebih rinci dan mempelajari semua seluk-beluknya, mari kita ambil contoh spesifik. Akan ada kelas master kecil tentang desain kelompok.

Tahap pertama dari pekerjaan kami adalah ide. Kita perlu memahami apa yang ingin kita sampaikan dan kepada siapa. Ada beberapa format komunitas di VKontakte, dan Anda harus memilih berdasarkan tujuan Anda. Meski kedepannya grup tersebut bisa dialihkan ke format publik dan sebaliknya.

Saya menjelaskan dengan jari saya. Publik- ini seperti blog. Umpan berita. Dengan kata lain, kami memberi tahu pelanggan kami tentang hal-hal tertentu dan mereka tidak akan dapat menulis di dinding komunitas kami. Maksimalnya adalah berkomentar.

Kelompok memungkinkan Anda membuat komunitas yang lebih terbuka terhadap percakapan dan diskusi, tempat orang dapat membuat postingan di feed atas nama mereka sendiri. Anda juga dapat menambahkan teman dari daftar Anda ke dalamnya. Tidak ada pilihan seperti itu di depan umum. Selain itu, grup ini memiliki lebih banyak opsi untuk mengintegrasikan markup wiki (ada bagian "Berita" di mana Anda dapat mengintegrasikan menu).

Secara global, kita bisa berpikir seperti ini: jika kita perlu membuat komunitas untuk sebuah toko, maka saya akan mengambil format “publik”. Jika kita berbicara misalnya tentang pecinta memancing, maka lebih baik mengambil “kelompok”. Meskipun demikian, setiap orang bebas melakukan apa yang mereka inginkan. Lagi pula, formatnya bisa diubah kapan saja. Namun, perlu diingat bahwa VKontakte memberlakukan batasan untuk mengubah format komunitas lagi dan setelah pertama kali Anda harus menunggu beberapa hari hingga Anda dapat mengembalikan semuanya jika perlu. Oleh karena itu, lebih baik menguji fungsionalitasnya sebelum grup mulai diisi dengan konten.

Sebagai bagian dari kelas master ini, saya akan mengambil sebagai titik awal game Mad Max berdasarkan film dengan nama yang sama, yang dirilis beberapa minggu yang lalu, dan akan membuat komunitas untuk para pemain dengan berbagai materi tentang game ini. . Tujuan utamanya adalah untuk mengalirkan traffic ke situs game Anda.

Formatnya adalah “Grup”, karena hal ini diperlukan untuk menciptakan gelombang penonton yang alami dan memaksimalkan komunikasi dalam komunitas. Izinkan saya mengklarifikasi segera bahwa saya akan menggunakan teknik universal yang dapat digunakan baik dalam format grup maupun di depan umum. Ini berfungsi di mana saja.

Kontennya banyak, ayo mulai wujudkan idenya!

Buat grup

Untuk membuat grup, buka “Grup Saya” di menu kanan akun VKontakte Anda dan klik tombol biru di bagian atas “Buat komunitas”.

Jendela seperti ini akan muncul, di mana kita memasukkan nama grup kita dan memilih formatnya.

Setelah memasukkan informasi yang diperlukan, panel kontrol komunitas kami terbuka di depan kami. Dalam kasus saya, tampilannya seperti ini.

Seperti yang Anda lihat, saya menambahkan beberapa parameter: Saya menyertakan video, rekaman audio, diskusi, dan sejumlah fitur lain yang akan berguna bagi saya dalam pekerjaan saya di masa mendatang saat mengumpulkan konten. Semua ini dapat diubah di masa depan tanpa batasan apa pun. Saya juga menuliskan alamat website saya. Jika Anda tidak memiliki situs web, atau topiknya tidak sesuai dengan format komunitas (tentang hal yang berbeda dan sama sekali tidak terkait satu sama lain), maka baris ini boleh dikosongkan.

Dalam hal ini, saya menetapkan batasan usia dari 18 tahun, serupa dengan yang ditetapkan pengembang untuk game tersebut. Meskipun saya yakin anak-anak juga bermain.

Semua. Grup telah dibuat!

Sekarang Anda bisa mulai mendesainnya.

Memformat grup VKontakte

Tahapan ini dapat dibagi menjadi 2 komponen: grafis dan teknis. Untuk bekerja, kita memerlukan template untuk membuat avatar dan menu grup, serta sedikit imajinasi dan pengetahuan dasar tentang Photoshop (alias Adobe Photoshop).

Templat markup

Apa itu template dan apa itu genap? Templat adalah sejenis blanko. Dalam hal ini, dalam format *.psd kami telah menandai area gambar di bawah menu dan avatar grup.

Seperti yang Anda lihat pada contoh kedua di awal artikel ini, kita dapat mendesain avatar dan gambar menu dengan gaya yang sama. Pada saat yang sama, secara visual dipotong menjadi 2 bagian. Jadi, templat memungkinkan Anda membentuk gambar sedemikian rupa untuk menghilangkan perpindahan grafik dan sedapat mungkin menyesuaikan gambar ke tingkat yang sama.

Agar lebih jelas, berikut contohnya.

Terlihat pada kedua bagian gambar tersebut terdapat strip yang menghadap ke kawasan pemukiman. Tanpa menggunakan template, hampir tidak mungkin untuk melakukannya pertama kali. Anda perlu menyesuaikan gambar, mengukur perbedaan hingga 1 piksel. Sedangkan saat menggunakan template, kita cukup menambahkan grafik ke dalamnya di dalam markup dan langsung mendapatkan hasil yang diinginkan.

Saya ingin mencatat bahwa template ini dirancang untuk 1 baris penjelasan. Pada contoh screenshot tersebut terdapat telepon. Jika baris kedua muncul, Anda perlu menggunakan templat lain atau memperbaiki desain secara manual.

Sementara itu, kami langsung melanjutkan ke desain grafis grup baru kami. Di sinilah saya mengambil jalan yang paling sedikit hambatannya dan menuju ke Gambar Google untuk menemukan bagian dari desain. Anda juga dapat menggunakan Yandex. Siapa yang lebih suka apa?

Saya tidak memiliki pendidikan desain, jadi kami tidak akan membahas secara detail masalah pemilihan font dan detail lainnya. Setelah melakukan sedikit keajaiban di Photoshop, saya mendapatkan hasil ini.

Di bagian kiri (yang bertuliskan "Menu") Anda juga dapat menambahkan beberapa pemicu. Dalam hal ini, saya memutuskan untuk melakukannya tanpa mereka. Semua. Desain avatar sudah siap. Di Photoshop, tekan kombinasi tombol pintas Shift+Ctrl+Alt+S dan simpan fragmen kita ke folder di hard drive Anda.

Tahap pertama pengerjaan grafis telah selesai. Mari kita kembali berhubungan.

Mengatur avatar dan menu untuk grup

Kami mengklik dua jenis di tempat ava grup kami dan mengunggah gambar kami di sana. Inilah orang-orang ini, di bawahnya juga tertulis “Unggah foto.”

Tambahkan gambar. Tentukan bidang dan pilih thumbnail. Semuanya sederhana di sini dan seharusnya tidak ada masalah.

Seperti yang bisa kita lihat, Anda perlu mengetahui id komunitas. Sangat mudah untuk mengenalinya. Temukan menu di grup Anda (tepat di bawah avatar) dan buka “Statistik Komunitas”. Dalam hal ini, hal serupa akan muncul di bilah alamat browser (angkanya akan berbeda).

Angka-angka setelah “?gid=” ini adalah id grup yang diinginkan. Kami menempelkan nilai yang dihasilkan ke dalam formulir skrip dan menulis nama untuk halaman yang ingin kami buat. Dalam hal ini, saya mengetik “Menu”.

Perlu dicatat bahwa halaman tersebut hanya akan dibuat jika jendela dengan grup terbuka di tab yang berdekatan. Sederhananya, Anda harus masuk ke VK di browser yang sama. Lagi pula, hanya administrator grup dan orang-orang yang ditunjuk olehnya yang memiliki akses terhadap manipulasi tersebut. Orang yang lewat secara acak tidak akan dapat dengan mudah masuk dan mengubah pengaturan grup yang tidak dapat dia akses ke panel admin.

Jika semuanya dilakukan dengan benar, halaman seperti ini akan terbuka.

Ini adalah jendela yang sama di mana kita akan membuat markup wiki nanti dan membuat menu internal untuk grup kita. Untuk saat ini, yang harus kita lakukan hanyalah menulis sesuatu di sini. Kemudian klik tombol biru “Simpan Halaman” dan klik tautan Kembali ke halaman di bagian atas.

Saya menulis "Menu" dan halaman saya setelah disimpan mulai terlihat seperti ini.

Belum ada desainnya, tapi sekarang kita hanya perlu link ke halaman ini. Kami memilihnya di bilah alamat browser dan kembali ke halaman utama grup kami. Ke umpan.

Di sini kita membuat postingan dengan konten berikut: menyisipkan gambar dan link ke halaman menu untuk grup.

Klik kirim. Kemudian klik waktu pengiriman pesan dan pilih “Pin” dari semua opsi. Kami memperbarui halaman (tombol F5 pada keyboard) dan, jika semuanya dilakukan dengan benar, kami mendapatkan hasil pertama: grup telah menemukan avatar dan tautan untuk menuju ke bagian menu.

Markup wiki untuk menu grup VKontakte

Sekarang mari kita mulai mendesain menu itu sendiri. Mari kita kembali ke Photoshop dan membuat desain untuk menu kita. Saat mendesain antarmuka, Anda perlu mengingat orang-orang yang akan mengakses VK melalui aplikasi dari ponsel. Dengan kata lain, kita tidak boleh memiliki elemen kecil dan, terlebih lagi, kita harus berusaha membuat semuanya sejelas mungkin. Sehingga kita tidak perlu menebak-nebak bagaimana semuanya bekerja di sini dan di mana kita harus mengklik... tapi cukup arahkan ke item yang tepat dan pelajari informasi yang kita cari.

Saya tidak akan menjelaskan secara detail sekarang tentang bagaimana tepatnya saya menyusun menu. Inilah yang saya dapatkan.

Bidang minimal. Tata letak vertikal. Format ideal untuk menu responsif. Artinya, tidak ada yang bisa dibawa ke mana pun di ponsel. Semuanya akan persis seperti di layar komputer dan tablet. Lebarnya saya atur menjadi 500 px, agar nantinya tidak ada yang menyusut dan kualitas gambarnya tidak hilang dua kali. Tinggi badan tidak penting.

Kami memotong gambar menjadi beberapa bagian dan menyimpannya.

Semua. Waktunya telah tiba untuk akord terakhir - kami mengumpulkan menu di grup itu sendiri.

Untuk melakukan ini, kita kembali ke halaman utama grup (di mana feed berada dan link gambar kita menuju ke menu). Kami mengklik gambar menu dan membuka halaman yang sama yang kami buat sebelumnya untuk menu tersebut.

Jika Anda adalah administrator atau pembuat grup (dalam kasus kami, ini adalah kasusnya), maka di bagian atas halaman akan ada link “Edit”. Mari kita klik di atasnya.

Lalu kita masuk ke mode markup wiki (di bawah tombol tutup di sudut kanan atas halaman ada bingkai dengan<>di dalam). Saat mode yang diinginkan diaktifkan, tombol ini diberi garis abu-abu.

Kemudian kita klik ikon kamera dan menambahkan semua bagian menu kita sekaligus. Dalam mode wiki, kita tidak akan melihat gambar itu sendiri, hanya kode gambar tersebut dengan dimensi dan parameter.

Saya ingin memposisikan menu di tengah sehingga tidak ada celah di antara fragmen. Oleh karena itu, kami membungkus setiap elemen dalam sebuah tag

Elemen menu pertama dan terakhir tidak boleh berupa tombol - dalam gambar saya, elemen tersebut hanyalah elemen grafis tanpa tautan ke halaman internal, jadi kami menambahkan parameter "nolink" ke dalamnya. Ini akan menghilangkan kemampuan untuk mengklik elemen ini untuk membuka bagian gambar di jendela terpisah. Sekarang tidak ada yang terjadi dengan satu klik mouse. Ini adalah latar belakang halaman normal. Tidak aktif.

Dalam kasus saya, kode menunya terlihat seperti ini.

Secara terpisah, saya ingin mencatat fakta bahwa setelah mengimpor gambar ke VK, sistem bawaan terkadang salah menunjukkan ukuran gambar. Oleh karena itu, kita perlu memantaunya dengan cermat dan menampilkan apa yang telah kita rencanakan pada tahap desain. Kalau tidak, semuanya akan berantakan dan teka-teki itu tidak akan bisa bersatu pada akhirnya.

Ketika kami telah menulis kode dan menyelaraskan semua elemen, kami menyimpan halaman dan melihat hal yang sama seperti di Photoshop.

Sentuhan terakhir tetap ada - kita perlu membuat halaman tempat menu kita akan mengirim orang. Untuk melakukan ini, mari kembali ke skrip untuk menghasilkan halaman wiki dan kali ini pesan tiga halaman sekaligus. Dalam hal ini, Anda juga perlu menulis sesuatu pada masing-masing alamat dan jangan lupa untuk menyimpan alamatnya di suatu tempat dari bilah alamat browser.

Kemudian kita masukkan link ke halaman baru ke dalam kode wiki menu berupa halaman-102302049_51013384, dimana angka pertama adalah id grup, dan angka kedua adalah nomor halaman. Meskipun secara umum hal ini tidak penting. Lagi pula, kita hanya perlu menyalin fragmen URL ini dan menempelkannya ke markup.

Hasilnya, kode menu mengambil bentuk berikut.

Secara lahiriah, tidak ada yang berubah. Namun ketika kita mengklik item menu, kita dapat melihat bahwa sekarang sudah berfungsi!

Mengenai markup itu sendiri dan aturan penulisan kode, saya menyarankan Anda untuk membaca grup VKontakte yang khusus didedikasikan untuk masalah ini. Orang-orang tersebut menjelaskan semua poin penting dan dalam katalog mereka Anda dapat dengan mudah menemukan elemen yang diperlukan dan mencari cara untuk menambahkannya ke halaman wiki Anda.

Mereka semakin terbiasa menjalankan bisnis, menjual barang atau jasa. Alat luar biasa yang menyederhanakan bekerja dengan grup adalah menu yang dibuat menggunakan markup wiki.

Baru-baru ini, jumlah situs publik yang menggunakan daftar wiki telah berkembang secara signifikan. Bagaimanapun, ini adalah cara yang bagus untuk memberikan tampilan yang lebih menyenangkan dan estetis pada grup, dan juga membantu peserta menavigasi semua bagian dengan lebih mudah.

Pada artikel kali ini kami akan memberi tahu Anda cara membuat halaman wiki VKontakte untuk grup, cara membuat menu di grup VK, apa saja jenisnya, cara membuatnya, dan masih banyak lagi.

Membuat halaman wiki yang dapat diklik dimungkinkan karena editor teks VK memiliki kemampuan untuk menggunakan markup wiki. Ini memungkinkan Anda menyisipkan gambar, tautan ke gambar tersebut, video, dan elemen lainnya menggunakan perintah khusus.

Daftar tersebut memungkinkan Anda membuat tautan langsung ke setiap kategori produk/layanan atau ke berbagai bagian/diskusi komunitas (misalnya portofolio, cara memesan, tentang perusahaan, dll.). Setiap pengguna dapat menemukan informasi yang diperlukan hanya dengan menekan 1 tombol.

Solusi ini merupakan navigator bagi pengunjung biasa dan berfungsi sebagai desain yang indah dan bergaya bagi komunitas. Ini adalah alat interaktif, yang menggunakannya, orang akan puas.

Sayangnya, pengembang VK belum menciptakan kemampuan untuk memposting daftar wiki di halaman wiki utama publik (untuk saat ini hanya tersedia di tab baru). Oleh karena itu, orang terpaksa menjadi canggih dan membuat postingan terpisah yang mengarah ke halaman menu.

Perintah dasar dan fitur menu wiki

Fungsi halaman wiki sangat luas. Dengan bantuannya Anda dapat membuat menu Anda menarik secara visual, mudah dibaca dan terstruktur.

Sayangnya, kami tidak dapat memasukkan seluruh tim ke dalam materi kami, jadi kami hanya akan membahas beberapa saja.

Membuat menu menggunakan file media

Ini dilakukan dengan menggunakan tombol khusus.

Dalam bentuk teks, file media adalah: [​].

Dimana media XXXX_YYYY adalah file media itu sendiri, opsi adalah berbagai pengaturan (untuk foto dan video), link adalah tulisan yang akan ditampilkan saat Anda mengarahkan kursor ke foto/video.

Untuk pilihan foto ada :

Untuk video:

Kami membuat judul dari tingkat yang berbeda menggunakan tanda ==

Tambahkan tanda “==” di awal dan akhir judul. Lihat tangkapan layar untuk contohnya:

Bekerja dengan teks judul untuk mendesain menu grup VKontakte

Anda juga dapat menggunakan opsi teks berikut: miring, tebal atau abu-abu, dicoret atau digaris bawahi, superskrip atau subskrip. Dimungkinkan juga untuk menyelaraskan teks ke tengah atau kanan. Di bawah ini adalah tabel dengan perintah:

Menggunakan kutipan untuk menarik perhatian

Menggunakan tag akan memungkinkan Anda mendesain kutipan seseorang dengan indah.

Daftar dapat diberi nomor atau diberi poin.

Untuk daftar bernomor, gunakan simbol "#" sebelum setiap item baru.

Untuk daftar bullet, mirip dengan yang sebelumnya, hanya dengan tanda “*”.

Bekerja dengan lekukan

Untuk membuat indentasi, tambahkan tanda “:” sebelum kata. Tergantung pada jumlah karakter, indentasi akan bertambah atau berkurang.

Tautan internal di menu grup

Ini adalah tautan ke sumber daya sosial internal. Jaringan VKontakte (tautan ke orang, komunitas, diskusi, aplikasi, halaman, video dan gambar). Mereka ditambahkan menggunakan konstruksi berikut: [].

Tautan eksternal dalam membuat menu VKontakte.

Markup Wiki membuat menu tabel

Menggunakan halaman wiki dan markup, Anda juga dapat membuat tabel. Lihat tangkapan layar:

Spoiler informatif

Dengan bantuannya, Anda dapat menyembunyikan atau mengungkapkan informasi dengan satu klik. Sangat cocok jika Anda perlu membuat bagian dengan “Pertanyaan yang Sering Diajukan”.

Spoiler dibuat menggunakan desain:

((Penyembunyi|Nama spoiler
Teks
}}

Dan itu akan terlihat seperti ini:

Oleh karena itu, tim akan membantu membuat daftar lengkap semua elemen desain.

Jenis menu: apa sajakah itu?

Halaman Wiki di VKontakte dapat dibagi menurut kriteria berbeda:

• Teks (hanya teks);
• Grafis (menggunakan gambar tombol, latar belakang, dll.).

Berdasarkan tampilan (tergantung gambar yang digunakan):

• Z tertutup (strukturnya sendiri tidak terlihat);

• Terbuka (semua item terlihat sekaligus);

• Dengan spanduk yang berdekatan atau umum (bisa terbuka atau tertutup).

Terlepas dari jenis yang Anda pilih, semuanya bekerja dengan prinsip yang sama.

Selain itu, jangan takut untuk memadukan jenis-jenis ini. Misalnya, Anda dapat membuat bagian grafis terlebih dahulu dengan tombol (latar belakang, gaya, desain), lalu melengkapinya dengan berbagai informasi teks (misalnya, “Pertanyaan yang sering diajukan”, menggunakan spoiler).

Cara membuat menu teks

Yang kurang populer dan sederhana adalah daftar teks di halaman wiki. Itu tidak berisi gambar atau tombol apa pun. Ini hanyalah daftar tautan jangkar.

Di bawah ini adalah petunjuk langkah demi langkah tentang cara membuat daftar teks untuk grup VK:

1. Pertama, Anda perlu menyiapkan komunitas. Untuk melakukan ini, buka “Manajemen Komunitas” dan pilih bagian “Bagian”. Temukan baris "Material", pilih "Dibatasi" dan simpan pengaturannya.

1. Selanjutnya akan muncul “Berita Terkini” di halaman utama publik. Kunjungi mereka dan klik "Edit".

1. Masukkan nama.
2. Di bawah ini adalah editor teks VK. Di sinilah kita akan membuat daftar kita.
3. Gunakan konstruksi berikut:

Lakukan semua langkah yang diperlukan. Setiap item baru ada di baris baru. Di sini Anda dapat menggunakan berbagai perintah yang telah kita bahas di atas.

Misalnya, kita akan menulis konstruksi sederhana dan kecil:

1. Klik simpan.

Di sini kami menggunakan tanda “==” untuk menyorot judul dan tanda “*” untuk menyorot sub-klausa. Hasilnya, kami mendapatkan yang berikut:

Jadi, setelah menyelesaikan beberapa langkah saja, kami menerima menu wiki yang sepenuhnya dapat dimengerti, di mana setiap item memungkinkan Anda dengan cepat membuka halaman yang diinginkan.

Anda dapat menambahkan apapun yang Anda inginkan, selama imajinasi dan kemampuan markup wiki Anda mencukupi.

Cara membuat menu grafis

Untuk membuat menu grafis, Anda harus memiliki setidaknya keterampilan dasar dalam bekerja dengan editor grafis (seperti Photoshop, GIMP, berbagai aplikasi, dll). Jika Anda tidak memilikinya, kami sarankan untuk menggunakan bantuan profesional atau sumber daya dengan template yang sudah jadi (baca lebih lanjut di bawah).

Di sini kita akan membahas tentang cara membuat menu halaman wiki sendiri. Di bawah ini adalah petunjuk langkah demi langkah:

1. Ikuti langkah 1-3 dari instruksi sebelumnya.
2. Penting untuk membuat gambar kosong dengan tombol. Kami tidak akan berbicara secara detail tentang bekerja di editor grafis, karena ada banyak pelajaran tentang bekerja dengan Photoshop dan program lain di Internet.
   Kami akan mengambil gambar berikut.

Ketiga gambar tersebut adalah bagian dari satu gambar besar. Oleh karena itu, saat kita membuat navigasi, gambar-gambar tersebut akan terlihat seperti satu gambar utuh dengan tombol-tombol yang terletak di atasnya.

1. Unggah gambar ke editor teks VKontakte.

1. Dengan mengklik setiap gambar, Anda dapat memilih opsi dan memberikan tautan.

1. Di sebelah kanan ada peralihan antara mode pengeditan visual dan teks.

1. Dalam bentuk teks, gambar kita terlihat seperti ini:

1. Kami mengubah tulisan “noborder” menjadi “nopadding” untuk menghilangkan jarak antar gambar dan mendekatkannya. Dan setelah tanda “|”. menambahkan tautan.

1. Klik "Simpan Halaman".

Hasilnya, kami mendapat menu ini:

Dengan sedikit usaha dan kecerdikan, Anda dapat membuat desain orisinal yang sesuai dengan keseluruhan desain grup.

Bagaimana cara mengamankannya

Agar menu wiki yang dibuat dapat ditampilkan di halaman utama komunitas, Anda harus menyelesaikan langkah-langkah berikut:

1. Buat postingan baru.
2. Salin tautan menu Anda. Untuk melakukan ini, buka edit lagi dan salin URL dari bilah alamat browser.

Pertama tambahkan gambar, lihat gambar di bawah.

Sekarang publikasikan dan sematkan postingan tersebut.

Di sini Anda harus bekerja keras pada gambar. Bagaimanapun, itu akan selalu terlihat. Itu juga harus sesuai dengan keseluruhan desain publik dan memberi tahu pengguna bahwa dengan mengklik, mereka akan dibawa ke menu.

Bagaimana cara menghapusnya

Menghapus menu wiki bukanlah tugas yang sulit. Cukup buka bagian “Manajemen Komunitas”, “Bagian” dan matikan materi.

Penting untuk diingat bahwa jika Anda menggunakan postingan yang dipasangi pin, postingan tersebut akan tetap ada. Oleh karena itu, ini juga perlu dihapus (atau setidaknya dihapus dari yang disematkan).

Templat yang sudah jadi

Kami juga ingin mempersembahkan kepada Anda layanan yang akan membantu Anda mengunduh templat yang sudah jadi atau membuat yang baru hanya dalam beberapa klik.

• You-ps.ru adalah layanan dengan templat menu wiki siap pakai dan elemen desain komunitas siap pakai lainnya.

• Vkmenu.com adalah konstruktor online. Ini memungkinkan Anda membuat menu bergaya dengan mudah dan cepat.

Solusi siap pakai juga mencakup mempekerjakan seorang profesional. Dalam hal ini, Anda juga tidak harus melakukan semuanya sendiri, tetapi Anda harus membayar.

Intinya

Kami melihat apa itu menu wiki di komunitas VKontakte. Kami mempelajari cara membuatnya dan menggunakan berbagai perintah.

Kami yakin menu tersebut belum sepenuhnya diapresiasi. Bagi banyak orang, “markup wiki” ini adalah sesuatu yang sangat kompleks dan menakutkan. Mereka bahkan tidak mau menerimanya. Namun kenyataannya, seperti yang bisa kita lihat, semuanya cukup sederhana.

Jangan takut untuk bereksperimen dan menjadi orisinal!

Seperti yang Anda ketahui, ketika seseorang membaca atau membuka sumber daya web tertentu, dia memperhatikan desain dan antarmuka selama 8 detik pertama. Pada saat yang sama, ia memastikan kegunaan yang baik atau buruk (kemudahan penggunaan). Menu dalam grup di jejaring sosial VKontakte, yang akan kita bicarakan hari ini dan melihat prinsip konstruksinya menggunakan contoh, memungkinkan Anda tidak hanya menyajikan informasi dengan warna-warni dan "membedakan diri Anda" dari pesaing Anda menjadi lebih baik, tetapi juga juga untuk mengidentifikasi dengan tepat item-item tersebut dan membuat perubahan pada aksen yang diperlukan.

Lihat saja beberapa contoh untuk memahami betapa indah dan nyamannya:

Mari kita mulai. Untuk memulainya, perlu diperhatikan bahwa jika Anda ingin membuat menu sendiri dari awal, Anda memerlukan semua informasi berikut. Jika Anda sudah memiliki desain, Anda dapat melewati sebagian artikel dan langsung menuju penempatan dan markup wiki.

Desain menu

Memungkinkan Anda menyelesaikan dasar untuk proyek masa depan. Untuk menyelesaikan bagian pekerjaan ini, pengetahuan tentang program seperti Adobe Photoshop dipersilakan. Seperti inilah ukuran template di mana kita akan mengimplementasikan menu cantik di masa depan.

Lebar avatar 200 piksel, tinggi 500. Gambar menu utama 510*308. Hasilnya, kita akan mendapatkan “menu” yang begitu indah di akhir.

Harap dicatat bahwa tergantung pada informasi yang ditulis setelah nama grup, ketinggian gambar di sebelah kanan (avatar) dapat berubah, dan karenanya, segala sesuatu yang terletak di dekatnya dapat berubah!

Sumber tata letak PSD ini diimplementasikan sebagai contoh. Unduh.

Kami tidak akan fokus pada bagaimana template itu dibuat; kami akan segera mulai mempersiapkannya untuk ditempatkan di grup baru atau yang sudah ada. Buka file di Photoshop.

Pertama-tama, simpan avatarnya. Salah satu cara untuk menyimpan dengan cepat jika semua yang ada di file terstruktur dan hanya ada sedikit elemen (seperti dalam kasus kami). Matikan visibilitas lapisan yang tidak kita perlukan.

Buka bagian “Gambar” dan pilih operasi “Pemangkasan”.

Pada output kita mendapatkan:

Jika gambar yang dihasilkan berukuran besar, Anda dapat menggunakan alat “Simpan untuk Web”. Perintah ini juga terletak di bagian "File".

Kami melakukan operasi serupa dengan gambar yang akan ditampilkan saat menu pertama kali ditampilkan. Dalam kasus kami, kami membiarkan folder "menu terbuka" dan "latar belakang menu" terlihat di folder "menu dengan mobil". Hasilnya adalah:

Sekarang Anda perlu menyimpan dan memotong menu tingkat kedua. Untuk melakukan ini, biarkan "latar belakang menu" terlihat di folder "menu dengan mobil" dan tambahkan "Menu tingkat kedua" ke dalamnya.

Kemudian kita akan menggunakan alat “Pemotongan” yang dapat ditemukan di menu sebelah kiri.

Kami "memotong" gambar kami menjadi bagian-bagian yang sesuai. Dalam kasus kami akan ada tiga di antaranya.

Ini menyelesaikan bagian persiapan. Mari kita beralih ke panggung utama.

Markup wiki dari menu yang sudah jadi di VKontakte.

Pertama-tama, Anda perlu mengunggah foto grup atau avatar dengan mengklik link dengan nama yang sama dan memilih file yang kita butuhkan.

Kemudian pastikan untuk melakukan urutan tindakan berikut. Buka "Manajemen Komunitas" dan di item "Bagian" di seberang tombol "Bahan", pilih "Dibatasi".

Hal ini harus dilakukan agar pengguna dan anggota grup tidak dapat mengubah dan/atau mengedit item tambahan, termasuk menu.

Setelah operasi selesai, kami mengunggah gambar potongan kami ke album komunitas.

Buka bagian “Berita Terbaru”, pilih “Edit” dan masuk ke menu editor.

Untuk mempercepat proses, gunakan tombol “Kamera” dan klik “Pilih dari foto komunitas.”

Setelah menambahkan, kembali ke menu editor dan tekan tombol “<>", yang mana kami akan melakukan pengeditan lebih lanjut. Kami juga segera mengganti nama bagian tersebut dan alih-alih “Berita terbaru” kami menulis “MENU GROUP” dalam kasus kami.

Struktur umum setiap bagian yang diiris terlihat seperti ini pada markup - [], di mana:

id – pengidentifikasi (nomor) gambar yang Anda unggah;

X dan Y – ukuran gambar horizontal dan vertikal dalam piksel;

Melihat templatnya, kami mengedit markup wiki kami dan secara berkala membuka bagian “Pratinjau”, yang secara visual menampilkan perubahan yang telah kami buat.

Semua gambar harus ditutup dengan tag sekaligus (dan bukan, seperti defaultnya, setiap gambar)

Karena kita telah membiarkan tag memusatkan gambar saja, untuk menghilangkan jarak yang “tidak menyenangkan” antara bagian-bagian gambar secara keseluruhan, kita harus memasukkan tag “nopadding” sebagai berikut: []

Inilah yang terjadi pada akhirnya.

Sekarang Anda harus mengklik tab “GROUP MENU”, lalu “edit”.

Penting! Untuk menyalin alamat yang diperlukan, dalam versi kami, klik “GROUP MENU” dan salin “link yang benar” dari sana.

Buka halaman utama dan klik “Tambahkan entri”. Jangan lupa segera ganti penulis postingannya!

Klik pada “elips” di sebelah kanan entri dan klik pada tab “Pin”.

Setelah itu segarkan halaman dan nikmati hasil yang dihasilkan seperti ini:

Ketika Anda mengklik "Buka menu".

Seperti yang Anda lihat, membuat menu di jejaring sosial VKontakte cukup mudah dan sederhana. Cukup memiliki sedikit pengetahuan tentang penggunaan Photoshop dan markup wiki. Semakin baik dan mudah dipahami desainnya, semakin bersedia dan sering calon pengguna datang dan kembali ke grup Anda.

Jika Anda menginginkan desain grup yang benar-benar unik dan memukau sesuai dengan gaya korporat dan elemen yang menyertainya, hubungi desainer profesional, atau Anda dapat menguji sendiri ruang lingkup bakat Anda. Semoga sukses untuk Anda dalam semua usaha Anda!