Cara membuat menu grup VKontakte. Agar klien tidak tersesat: kami membuat menu grup VK

Seperti yang Anda ketahui, seseorang, membaca atau membuka sumber daya web tertentu, memperhatikan desain dan antarmuka selama 8 detik pertama. Secara paralel, ia yakin akan baik atau buruknya kegunaan (usability). Menu dalam grup di jejaring sosial Vkontakte, yang akan kita bicarakan hari ini dan mempertimbangkan prinsip desainnya menggunakan contoh, memungkinkan Anda tidak hanya menyajikan informasi yang penuh warna dan "membedakan diri Anda" dari pesaing menjadi lebih baik, tetapi juga untuk mengidentifikasi dengan tepat poin-poin itu dan menjadikannya aksen yang diperlukan.

Lihat saja beberapa contoh untuk memahami betapa indah dan nyamannya:

Mari kita mulai. Untuk memulainya, perlu dicatat bahwa jika Anda ingin membuat menu sendiri dari awal, maka Anda memerlukan semua informasi di bawah ini. Jika desainnya sudah ada, maka Anda dapat melewati bagian artikel dan langsung menuju penempatan dan markup wiki.

Desain menu

Memungkinkan Anda untuk menyelesaikan dasar untuk proyek masa depan. Untuk melakukan bagian pekerjaan ini, pengetahuan tentang program seperti Adobe Photoshop sangat diharapkan. Ini adalah bagaimana ukuran template terlihat, di mana kita akan mengimplementasikan menu yang indah di masa depan.

Lebar avatar adalah 200 piksel, tinggi 500. Gambar menu utama adalah 510*308. Akibatnya, 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, semua yang terletak di dekatnya dapat berubah!

Sumber tata letak PSD ini diimplementasikan sebagai contoh. Unduh .

Kami tidak akan fokus pada bagaimana template dibuat, kami akan segera melanjutkan untuk 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 ada beberapa elemen (seperti dalam kasus kami). Matikan visibilitas layer yang tidak kita butuhkan.

Buka bagian "Gambar" dan pilih operasi "Pemangkasan".

Pada output kita mendapatkan:

Jika gambar yang dihasilkan 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 ditampilkan untuk pertama kalinya. Dalam kasus kami, kami membiarkannya terlihat - folder "menu terbuka" dan "latar belakang menu" di folder "menu dengan mobil". Outputnya sebagai hasilnya:

Sekarang Anda perlu menyimpan dan memotong menu level 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 "Bersarang", yang dapat ditemukan di menu di sebelah kiri.

"Potong" gambar kita menjadi bagian yang sesuai. Dalam kasus kami, akan ada tiga.

Ini melengkapi bagian persiapan. Kami melanjutkan ke panggung utama.

Wiki-markup dari menu yang sudah jadi di Vkontakte.

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


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

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

Setelah operasi, kami mengunggah foto irisan kami ke album komunitas.

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

Untuk mempercepat proses, kami akan menggunakan tombol "Kamera" dan klik "Pilih dari foto komunitas".

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

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

    id - pengenal (nomor) dari gambar yang Anda unggah;

    X dan Y - ukuran gambar secara horizontal dan vertikal dalam piksel;

Melihat template, kami mengedit markup wiki kami dan secara berkala pergi ke bagian "Pratinjau", yang secara visual menampilkan perubahan yang telah kami buat.

Segera, semua gambar harus ditutup dengan tag (dan tidak seperti awalnya secara default, setiap gambar)

, yang secara otomatis menempatkan semua bagian menu di tengah halaman!

Karena kita telah meninggalkan satu tag di tengah gambar, untuk menghilangkan jarak "tidak menyenangkan" antara bagian dari keseluruhan gambar, 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 "MENU GROUP" dan salin "tautan yang benar" dari sana.

Buka halaman utama, klik "Tambahkan entri". Jangan lupa untuk segera mengubah penulis entri!

Klik pada "elipsis" di sebelah kanan entri dan klik pada tab "Pin".

Setelah itu, kami me-refresh halaman dan menikmati hasilnya, yang terlihat seperti ini:

Dengan mengklik "Buka Menu".

Seperti yang Anda lihat, membuat menu di jejaring sosial Vkontakte cukup mudah dan sederhana. Cukup memiliki tingkat pengetahuan yang ringan tentang penggunaan Photoshop dan markup wiki. Semakin baik dan lebih mudah dipahami desainnya, semakin rela dan semakin sering calon pengguna akan datang dan kembali ke grup Anda.

Jika Anda menginginkan desain band yang benar-benar unik dan memukau yang menghormati gaya korporat dan elemen terkait, maka hubungi desainer profesional, atau Anda dapat menguji sendiri lingkup bakat Anda sebelum itu. Semoga sukses dalam semua usaha Anda!

Agar grup Anda menjadi populer di kalangan pengguna, Anda harus secara teratur menambahkan publikasi baru, mengunggah foto, video, dan lainnya. Dan untuk memudahkan orang menavigasi dengan masuk ke halaman grup, lebih baik membuat menu di mana poin utama akan ditunjukkan.

Misalnya, Anda memiliki perusahaan sendiri yang menawarkan produk atau layanan tertentu. Ada juga situs web di Internet. Kemudian grup Vkontakte untuk perusahaan ini akan membantu menarik pelanggan baru dan meningkatkan penjualan. Menu dapat mencakup item berikut: Jendela, Pintu, Gerbang, Sistem keamanan, Materi tambahan, Promosi dan diskon. Kami membuat tautan sedemikian rupa sehingga dengan mengklik salah satu item, seseorang pergi ke bagian yang sesuai di situs.

Menu dapat dibuat tanpa merujuk ke halaman pihak ketiga di Internet. Misalnya, Anda memiliki grup yang dikhususkan untuk musik. Dalam paragraf, Anda dapat menentukan genre: klasik, rock, rap, dari film India, untuk bayi baru lahir, dari kartun. Ketika seseorang mengklik salah satu item, dia harus membuka album dengan lagu yang sesuai. Dalam hal ini, item tersebut adalah tautan ke album tertentu dalam grup.

Ada banyak contoh untuk membuat navigasi dalam grup. Nah, sekarang mari kita lanjutkan ke latihan.

Buat menu

Pengaturan yang diperlukan dalam grup

Sebelum melanjutkan dengan pembuatan menu itu sendiri, perlu untuk memeriksa beberapa pengaturan di grup. Anda harus menjadi pembuat grup, jika tidak, Anda mungkin tidak memiliki cukup hak untuk membuat navigasi.

Pada halaman Vkontakte Anda di kolom kiri, klik item "Grup" dan pilih grup Anda dari daftar. Kemudian, di bawah avatar, klik pada tiga titik vertikal dan pilih "Manajemen Komunitas" dari daftar.

Sekarang, di menu di sebelah kanan, buka tab "Bagian" dan di bidang "Diskusi" dan "Isi", pilih "Buka" atau "Dibatasi". Klik Simpan.

Mempersiapkan gambar untuk menu dan avatar di Photoshop

Setelah memeriksa dan mengubah pengaturan dalam grup, Anda dapat mulai membuat gambar untuk avatar dan menu. Mungkin ada beberapa opsi di sini:

Menu tersebut dapat berupa lanjutan dari gambar yang ada pada gambar profil;

Itu dapat dibuat pada gambar terpisah atau latar belakang yang solid, avatar tidak akan dikaitkan dengannya, dapat menunjukkan, misalnya, logo perusahaan.

Kami akan mempertimbangkan opsi pertama secara rinci. Avatar dan navigasi kita akan terdiri dari satu gambar, yang harus dipotong-potong dengan benar.

Buka Photoshop dan buat file baru di dalamnya - Ctrl + N. Atur Width ke 760 dan Height ke 500 pixels.

Sekarang, dengan menggunakan Slice Tool, Anda perlu memotong lembaran menjadi beberapa area. Pilih area di sebelah kanan dengan alat dan klik dua kali untuk membuka jendela dengan menu. Atur lebar menjadi 200 dan tinggi menjadi 500. Ini akan menjadi avatar grup kami.

Dengan alat yang sama, pilih area lain, di sebelah kiri yang sebelumnya. Untuk itu, lebarnya 50, tingginya 500. Ini adalah jarak antara item masa depan dan avatar, kita tidak memerlukan bagian gambar ini.

Pilih area di kiri atas. Untuk itu, lebarnya 510, tingginya 182. Area gambar kami ini sesuai dalam grup dengan area di mana nama grup ditulis, status, beberapa tab ditampilkan. Maksudku, kita juga tidak membutuhkannya.

Akibatnya, yang berikut akan berubah - gambar dibagi menjadi 4 area. Area di sebelah kanan adalah avatar grup, di kiri bawah akan ada item menu, dan 2 area lagi yang tidak diperlukan.

Agar benar-benar jelas. Kami memotong lembaran kosong. Kemudian tambahkan gambar yang dipilih ke dalamnya. Setelah kita menyimpannya, kita akan memiliki banyak gambar kecil dari bentuk yang kita butuhkan seperti yang telah kita potong. Selanjutnya pada halaman di grup kami akan menyisipkan bagian-bagian tertentu dari gambar di tempat yang tepat.

Selanjutnya, buka di Photoshop gambar yang Anda pilih untuk avatar dan menu. Menggunakan Move Tool, seret gambar ke lembar yang sebelumnya dipotong. Anda dapat memindahkan gambar untuk melihat area yang diinginkan.

Misalnya, saya memiliki ukuran gambar yang lebih besar dari yang kami pilih untuk lembar putih. Jadi saya memindahkannya sehingga pohon palem sedikit terlihat, dan langit di atasnya tidak terlalu banyak.

Setelah menambahkan gambar, ambil Slice Tool lagi dan potong area di kiri bawah, yang kita tinggalkan untuk titik, ke dalam jumlah bagian yang diinginkan. Berapa banyak poin yang ingin Anda buat, akan ada begitu banyak bagian.

Sekarang kita mengambil alat teks dan menulis item menu di setiap bagian.

Ini sudah siap. Di sebelah kanan adalah avatar kami, di kiri bawah adalah item navigasi. Dua bagian gambar lainnya tidak akan diperlukan.

Pada tahap ini, Anda dapat menambahkan logo perusahaan ke area di sebelah kanan (avatar), atau menulis namanya dengan indah.

Kami menyimpan gambar yang dibuat: File - Simpan untuk Web & Perangkat, atau gunakan pintasan keyboard Alt + Shift + Ctrl + S.

Inilah yang terjadi pada saya: folder "menu" di Desktop. Di dalamnya, gambar yang dipilih dipotong-potong dengan ukuran yang diinginkan. Yang terbesar adalah avatar, banyak yang identik kecil adalah item menu, dan dua yang tidak perlu - hapus dari folder.

Sekarang Anda perlu mengunggah gambar yang dibuat yang sesuai dengan poin ke halaman Vkontakte Anda. Pilih "Foto" dan buat album baru, saya menyebutnya "untuk menu grup". Jadikan album pribadi sehingga hanya Anda yang dapat melihatnya - "Edit Album". Tambahkan gambar ke album yang cocok dengan item menu Anda.

Kemudian kembali ke halaman utama grup dan pilih avatar - "Unggah foto." Ini adalah salah satu gambar yang baru saja kita buat di Photoshop.

Jadi, pada tahap ini, Anda seharusnya membuat album tertutup di halaman dengan gambar titik navigasi dan mengunggah avatar untuk grup.

Membuat menu dengan markup wiki

Mari kita mulai membuat menu itu sendiri. Kami pergi ke grup dan pergi ke tab "Berita terbaru". Kemudian klik tombol "Edit".

Anda dapat mengganti nama tab itu sendiri. Begitulah cara saya menulis "MENU". Sekarang di sini Anda perlu menambahkan gambar yang sesuai dengan poin. Untuk melakukan ini, klik ikon kamera.

Klik salah satu gambar yang baru saja Anda tambahkan ke profil Anda.

Setelah itu akan muncul di halaman edit.

Jadi, tambahkan semua gambar lain untuk mendapatkan gambar yang diinginkan dengan menu.

Ketika semua item telah ditambahkan, klik pada dua panah di sudut kanan atas untuk beralih ke mode tata letak wiki.

Di sini hapus semua tag yang tidak perlu seperti

, dan hapus spasi di antara semua baris. Sekarang lihat tangkapan layar atas - kami memiliki spasi di antara gambar yang ditambahkan. Untuk menghapusnya, tulis nopadding di depan ukuran gambar dan masukkan ";".

Setelah ukuran gambar dan tongkat vertikal, masukkan tautan ke halaman tempat orang tersebut akan pergi dengan mengklik item menu yang sesuai. Seperti yang sudah saya tulis, tautannya bisa ke beberapa halaman Vkontakte atau ke sumber pihak ketiga di Internet.

Seperti inilah tampilan kode setelah Anda menambahkan "nopadding;" dan sebuah tautan.

Hasilnya, akan terlihat seperti ini: nama tab (MENU) telah diubah, spasi antar baris telah dihapus, spasi di antara gambar telah dihapus (nopadding;), tautan telah ditambahkan. Klik "Simpan halaman" dan kembali ke halaman utama di grup.

Ini menyelesaikan proses pembuatan navigasi untuk grup Vkontakte. Saya mendapatkannya seperti ini. Gambar avatar dan menu adalah satu. Dengan masuk ke tab "MENU", pengguna dapat memilih apa yang menarik minatnya dan mengikuti tautan yang saya tentukan.

Jika Anda khawatir menu dalam grup mungkin tidak terlihat, maka perbaiki foto di mana, misalnya, gunakan panah untuk menunjukkan keberadaan tab. Jika Anda memiliki pertanyaan, tanyakan di komentar.

PEMBARUAN PENTING: artikel ini sangat ketinggalan zaman, karena ada layanan khusus MenuMake , yang memungkinkan Anda membuat menu untuk grup secara otomatis. Pendekatan manual tidak lagi diperlukan. Namun, saya meninggalkan artikel ini untuk sejarah.

Grup di VKontakte adalah tempat di mana penggunanya paling terkonsentrasi. Penyairlah yang mencoba membuat mereka lebih baik untuk menarik jumlah maksimum dari mereka. Yang terbaik bagi pencipta untuk memikirkan desain grafis bahkan sebelum segera, bersamaan dengan perkembangan masa depan.

Penting untuk dipahami bahwa desain grup adalah wajahnya, yang dilihat pengguna baru segera setelah dia memasuki halaman, hanya setelah itu dia mulai berkenalan dengan kontennya. Dalam proposal ini, pada kenyataannya, semua bobotnya tercermin. Selain itu, menu grafis juga merupakan fungsi grup, karena memungkinkan Anda menemukan informasi yang Anda butuhkan dengan cepat dan mudah.

Mari kita bicara tentang ideologi

Sebelum Anda mulai menggambar dan mengatur huruf apa pun, penting untuk memikirkan tentang apa yang harus dibicarakan menu Anda? Untuk memahami hal ini, Anda juga harus memutuskan tujuan utama grup - untuk menghibur, menginformasikan, atau menjual. Penampilan dan fungsionalitas menu masa depan sangat tergantung pada ini.

Menu untuk menarik pengunjung

Jika Anda berencana untuk menerbitkan konten yang menghibur, informatif, mendidik, Anda harus membuat menu yang akan menampilkan topik utama. Misalnya, ini dapat berupa bagian: publikasi terbaru, paling populer, tentang mode, makanan sehat, anak-anak, dll. Ini akan berfungsi untuk meningkatkan loyalitas, karena akan nyaman bagi pengguna untuk menavigasi massa konten.

Menu untuk penjualan

Sebaliknya, jika tujuan halaman adalah untuk menjual, menu harus membantu pengguna menavigasi melalui sejumlah besar produk. Yang terbaik adalah menempatkan bagian di dalamnya yang mengarahkan pengunjung ke katalog atau bagian tertentu darinya, berbicara tentang pengiriman, kontak, perusahaan, promosi, dan, tentu saja, ke halaman kontak.

Tahap pertama - bekerja di Photoshop

Menu untuk kontak sedang dibuat bukan di jejaring sosial, tetapi dengan bantuan editor grafis. Untuk ini, yang terbaik adalah menggunakan Photoshop, terlepas dari kenyataan bahwa pengetahuan minimal sudah cukup untuk ini. Karena itu, kami membuka program dan membuat templat menu. Ukuran dokumen baru secara langsung tergantung pada jumlah bagian yang Anda butuhkan.

Selanjutnya, Anda akan membutuhkan latar belakang. Ini bisa berupa latar belakang putih, atau warna, atau gambar tertentu. Unduh dari Internet dan rekatkan ke dalam template. Selanjutnya, tulis pada gambar latar belakang item menu yang telah Anda rencanakan. Prasasti ini nantinya akan berubah menjadi tautan yang mengarahkan pengguna ke bagian tertentu.

Tetapi agar gambar ini dapat diubah dan mudah dibuat menjadi tautan, itu harus dipotong. Ini dilakukan di Photoshop yang sama menggunakan alat "pemotongan".

Tetapi untuk melakukannya dengan lancar dan indah, penting untuk menggunakan garis bantu, yang diaktifkan oleh kombinasi tombol CTRL + R. Garis biru akan muncul yang dapat Anda seret untuk mengatur batas pemotongan. Selanjutnya, klik pada alat "Bersarang" dan pilih "fragmen di sepanjang panduan" di menu atas, sebagai akibatnya gambar dibagi dengan jelas menjadi beberapa bagian menu yang terpisah.

Ada tiga jawaban utama untuk pertanyaan "cara membuat menu untuk grup VKontakte": memesan dari spesialis, membuat menggunakan desainer online atau mengotak-atik, mempelajari beberapa seluk-beluk pertanyaan dan melakukan semuanya sendiri.

Pada artikel ini, kami akan mempertimbangkan ketiga opsi secara bergantian. Omong-omong, jika Anda masih ragu tentang perlunya menu untuk grup atau publik Anda, pastikan untuk membaca.

Jadi, berikut adalah tiga cara untuk membuat menu:

Masing-masing tentunya memiliki kelebihan dan kekurangannya masing-masing. Di bawah ini kita akan berbicara tentang dua yang pertama secara lebih rinci. Dan bagi mereka yang masih memutuskan untuk mengikuti jalan ketiga dan melakukan semuanya sendiri, kami telah menulis panduan (instruksi) terperinci.

Omong-omong, bagi mereka yang lebih suka menerima informasi melalui video daripada membaca teks panjang, ada video:

Jalur #1. Pesan pembuatan menu dari desainer spesialis

Keuntungan dari metode ini adalah kecepatan relatif dan partisipasi minimal di pihak Anda. Kontra - harga tertinggi dan kesempatan untuk mendapatkan menu yang indah, tetapi salah (kami telah menyiapkan tentang kesalahan utama saat membuat menu). Selain itu, Anda masih perlu mencari artis. Di sini kami dapat merekomendasikan untuk mencarinya di layanan kwork.ru, di bagian "Desain grup di jejaring sosial".

Jalur #2. Menggunakan konstruktor online

Di sini, tentu saja, kami akan merekomendasikan konstruktor kami, di situs tempat Anda berada saat ini. Anda dapat mencobanya secara gratis. Pembayaran dilakukan hanya jika hasilnya sesuai dengan Anda dan Anda memutuskan untuk mengunggah menu yang dihasilkan ke grup Anda. Keuntungan dari rute ini adalah bahwa itu adalah yang tercepat. Selain itu, jika perlu, Anda selalu dapat dengan cepat mengedit dan memuat ulang menu Anda dengan setengah biaya pembuatan. Ini lebih nyaman daripada mencari desainer setiap kali Anda perlu, misalnya, menambah atau menghapus item dari menu. Kerugian dari metode ini - di sini Anda harus melakukan sedikit, tetapi bekerja sendiri.

Jalur #3. Lakukan semuanya sendiri

Keuntungan dari jalur ini jelas: gratis, dan Anda memperoleh keterampilan baru. Kekurangannya adalah Anda membutuhkan keterampilan dan waktu yang cukup lama (untuk pertama kali). Inilah yang Anda butuhkan:

  • Mampu menggunakan editor grafis dengan percaya diri. Misalnya, Photoshop. Saat membuat menu, pertama-tama Anda harus membuat gambar dengan dimensi yang benar (ke piksel, tidak ada "tentang"!), Dan kemudian potong dengan benar (pecah menjadi beberapa bagian)
  • Mampu memahami instruksi dan membacanya dengan cermat
  • Jangan menyerah dan jangan putus asa jika sesuatu tidak berhasil pertama kali

Jika Anda berpikir bahwa Anda dapat melakukan semua ini, maka mari kita mulai.

Langkah #0. Informasi umum tentang bagaimana menu grup VK diatur

Menu untuk grup dibuat dari halaman wiki, yang pembuatannya didukung oleh VK. Halaman Wiki adalah halaman khusus yang hanya dapat dibuat di tempat umum. Mereka berbeda dari posting biasa karena mereka dapat menggunakan apa yang disebut markup wiki. Markup ini adalah kode khusus yang diubah menjadi objek pemformatan tambahan. Agar lebih jelas, saya jelaskan. Misalnya, dalam posting biasa Anda hanya dapat menggunakan teks biasa, sedangkan markup wiki memungkinkan Anda untuk menebalkan atau membuat miring bagian teks. Artinya, ia memperkenalkan opsi desain tambahan. Secara khusus - kemampuan untuk menempatkan gambar, ketika diklik, pengguna akan diarahkan ke tautan. Opsi pemformatan tambahan inilah yang digunakan untuk menjadikan menu publik VK. Bagaimana tepatnya melakukan ini, kami akan jelaskan di bawah ini.

Langkah 1. Tahap persiapan

Jika Anda sudah memiliki grup yang sudah ada, sebaiknya buat grup baru. Untuk pengujian dan eksperimen. Jika tidak, dalam proses pembelajaran, Anda berisiko membanjiri pelanggan Anda dengan pembaruan yang aneh dan tidak perlu.

Jadi, Anda telah membuat grup baru. Sekarang mari kita cari tahu pengenal (ID) grup Anda. ID grup adalah nomor VKontakte uniknya. Buka grup Anda dan klik "Postingan Komunitas" (jika tidak ada kiriman di grup, maka alih-alih "Postingan Komunitas" akan menjadi "Tidak Ada Pos"). Di dalamnya Anda akan diarahkan ke halaman baru dengan alamat seperti ini:

https://vk.com/wall- XXX?sendiri=1

Dari pada XXX Anda akan memiliki satu set angka (dan hanya angka!). Ini adalah ID komunitas Anda. Misalnya di kami kelompok uji ini adalah 154457305.

Sekarang mari kita buat halaman wiki baru di grup. Untuk melakukan ini, kami akan membuat tautan seperti ini:

http://vk.com/pages?oid=- grup_id&p= Nama halaman

http://vk.com/pages?oid=- 154457305 &p= Menu

Buka tautan yang dihasilkan di browser Anda (salin ke bilah alamat browser Anda dan buka alamatnya). Itu saja, Anda telah membuat halaman wiki yang disebut "Menu" (kecuali, tentu saja, Anda telah menetapkan "Menu" sebagai nama halaman di tautan). Anda akan melihat teks ini: “Halaman Menu kosong. Isi dengan konten. Di sudut kanan atas ada ikon pensil (). Klik untuk pergi ke pengeditan halaman.

Editor halaman wiki VK memiliki dua mode: mode grafis dan markup. Mode diaktifkan oleh tombol di bagian kanan atas editor (). Ketika tombol disorot dengan warna biru, itu berarti mode tata letak diaktifkan. Mode pengeditan visual lebih nyaman, karena memungkinkan Anda melakukannya tanpa mengetahui sintaks markup wiki, tetapi fungsinya sangat terbatas: Anda hanya dapat melakukan hal-hal paling sederhana di dalamnya. Pada dasarnya Anda harus berurusan dengan mode tata letak.

Perhatikan dua hal. Pertama, di sebelah kiri tombol untuk beralih mode pengeditan, ada tombol untuk memanggil informasi bantuan pada markup wiki (). Suatu hal yang sangat berguna, terutama bagi pemula. Hal kedua yang harus diperhatikan adalah alamat halaman wiki. Di bilah alamat browser Anda, Anda akan melihat sesuatu seperti ini:

http://vk.com/page-grup_id _XXX?act=edit&bagian=edit

Bagian dari alamat sebelum "?" adalah alamat halaman wiki Anda. Tuliskan di suatu tempat: di VK tidak ada cara untuk melihat daftar halaman wiki Anda dan tautan ke sana. Untuk membuka yang Anda butuhkan, Anda perlu mengetahui alamatnya atau menggunakan tautan untuk membuat halaman wiki lagi. Saat menggunakan metode terakhir, ingatlah bahwa halaman, jika sudah ada, tidak diciptakan kembali.

Langkah 2. Membuat menu sederhana untuk grup VKontakte

Jadi, kami telah membuat halaman wiki "Menu". Beralih ke mode tata letak editor dan tambahkan kode berikut:

Klik tombol "Pratinjau", yang terletak di bagian bawah editor. Anda akan melihat daftar tiga tautan. Dua yang pertama adalah eksternal dan masing-masing mengarah ke halaman utama Yandex dan Google. Tautan ketiga adalah internal. Ini mengarah ke VK publik dengan ID "1" (ini adalah grup VK resmi untuk pengembang). Jika Anda memiliki kode di pratinjau, dan bukan tautan (yang dapat Anda klik) - itu berarti Anda memasukkan kode dalam mode pengeditan visual, tidak dalam mode markup. Hati-hati!

Harap dicatat bahwa tautan eksternal dalam kode wiki VK diformat dengan tanda kurung tunggal, dan tautan internal dengan tanda kurung ganda. Pada saat yang sama, tautan internal VK ditunjukkan bukan sebagai alamat situs web biasa, tetapi sebagai penunjuk ke satu atau lain objek VK. Misalnya, penunjuk ke grup memiliki notasi berikut:

klub grup_id

Di VKontakte, ada penunjuk tidak hanya ke grup, tetapi juga ke masing-masing foto, posting, halaman wiki, halaman pengguna, rekaman audio, dll. Setiap indeks memiliki notasinya sendiri. Nanti kita akan menggunakan beberapa di antaranya dan melihatnya lebih detail.

Pastikan untuk menyimpan halaman. Pada dasarnya, kami baru saja membuat halaman navigasi sederhana. Yang tidak lain adalah yang paling sederhana menu untuk grup VKontakte. Tentu saja, ini belum menjadi menu grafis, tetapi bahkan dapat mengatasi tugas utama menu - untuk mengarahkan pengguna dengan cepat ke tempat yang mereka butuhkan di depan umum. Cara membuat menu grafis, kami akan pertimbangkan nanti.

Dan sekarang mari kita cari tahu bagaimana dan di mana Anda dapat menggunakan halaman wiki.

Langkah #3 Di mana saya dapat memposting halaman wiki di VKontakte

Ada dua tempat utama: Anda dapat membuat posting dengan tautan ke halaman wiki, atau Anda dapat mempostingnya di bagian "Konten" komunitas Anda.

Mari kita mulai dengan opsi pertama. Mulai menambahkan posting baru ke dinding grup Anda. Lampirkan foto apa pun terlebih dahulu. Lebih baik mengambil foto yang cukup besar dengan lebar lebih besar dari tingginya. Kemudian paste di teks posting yang Anda buat link ke halaman wiki yang Anda buat dengan menu sederhana. Itulah yang kami minta agar Anda rekam sedikit lebih awal. Ingatlah bahwa tautannya terlihat seperti ini ( Anda akan memiliki nomor lain):

http://vk.com/page-121237693_72827423

Sekarang hapus teks link dari kolom input. Tautan itu sendiri di bawah foto tidak akan hilang dari ini. Tetapi jika Anda meninggalkan alamat tautan di bidang teks, itu akan ditampilkan sebagai teks di pos. Publikasikan postingan, muat ulang halaman browser Anda dengan beranda grup, dan sematkan postingan Anda. Muat ulang halaman lagi. Sebagai hasil dari manipulasi ini, Anda harus mendapatkan sesuatu seperti ini:

Klik foto di pos yang disematkan dan halaman wiki Anda akan muncul dengan menu grup sederhana.

Jadi, kami belajar bahwa halaman wiki dapat dilampirkan ke postingan. Secara khusus - ke pos yang disematkan. Tempat kedua di mana Anda dapat menggunakan markup wiki adalah di bagian Konten.

Buka pengaturan komunitas dan temukan pengelolaan bagian komunitas (layanan) di sana. Tandai "Bahan" sebagai "Dibatasi". Item baru sekarang akan muncul di bagian atas halaman beranda komunitas Anda. Itu terletak di sebelah kanan item "Informasi". Saat pertama kali mengaktifkan materi dalam grup, item ini disebut "Berita Terbaru" secara default. Berikut tampilannya:

Pergi ke item baru ini. Klik pada tab "Edit". Akibatnya, Anda akan menemukan diri Anda berada di editor halaman wiki yang sudah dikenal. Satu-satunya perbedaan adalah bahwa ada bidang untuk memasukkan nama halaman. Ubah dari "Berita Terbaru" menjadi "Menu2". PADA mode pengeditan markup masukkan kode berikut:

"""Opsi menu untuk bagian "Bahan""""


[]

Buat pratinjau (tautan yang sudah kita ketahui akan muncul) dan simpan halaman. Pada dasarnya, halaman ini adalah halaman wiki (root) utama grup Anda. Benar, tidak ada arti praktis khusus dalam perbedaan ini dari halaman wiki lainnya.

Buka halaman utama grup Anda, muat ulang dan lihat apa yang terjadi. Kami menyarankan Anda melihat grup Anda dari browser seluler dan dari aplikasi VK. Anda akan melihat bahwa susunan elemen dan logika kerja sedikit berbeda di mana-mana. Penting untuk memahami dengan baik apa yang berhubungan dengan apa dan di mana itu ditampilkan.

Kami belajar bahwa menu dapat ditempatkan di dua tempat. Lebih baik membuatnya baik dalam bentuk posting yang disematkan dan di bagian "Bahan". Ingat dua hal:

  • Pos yang disematkan akan dilihat oleh 98% pengunjung Anda, dan hanya 25-40% yang paling penasaran yang akan masuk ke bagian materi, serta pengguna lama setia grup Anda yang tahu bahwa ada sesuatu yang berguna di sana.
  • Posting yang disematkan dengan gambar untuk memanggil menu dapat dilengkapi dengan teks. Dengan cara ini Anda tidak akan kehilangan fitur posting yang disematkan ini. Tetapi Anda juga tidak boleh berlebihan: semakin banyak teks, semakin rendah tautan untuk membuka menu Anda.

Markup Wiki bukanlah alat yang paling ampuh dan bukan yang paling nyaman. Fungsinya sangat terbatas. Selain itu, ini dikembangkan pada awal pengembangan VKontakte dan secara eksklusif untuk versi browsernya di komputer desktop dan laptop. Oleh karena itu, karyanya di aplikasi dan di perangkat seluler paling baik digambarkan dengan ungkapan "bagaimana Tuhan meletakkannya di jiwa." Sayangnya, belum ada yang lebih baik di VK.

Ngomong-ngomong. Anda dapat menautkan dari satu halaman wiki ke halaman wiki lainnya. Ini bekerja seperti ini: pengguna membuka (misalnya, menggunakan gambar tautan dalam sebuah posting) halaman wiki pertama. Dan memiliki link ke halaman wiki lain. Mengklik tautan ini akan membuka halaman wiki yang sesuai. Dengan cara ini, Anda dapat membuat menu yang cukup rumit dan bertingkat dan, misalnya, instruksi. Namun, kami tidak menyarankan Anda untuk terlalu terbawa oleh hal ini secara tidak perlu.

Langkah #4 Cara membuat menu di grup VKontakte. Grafis

Jadi, prinsip-prinsip dasar dikuasai. Mari kita beralih ke mendesain menu grafis. Mari kita segera membuat reservasi bahwa kita akan melakukan menu yang agak sederhana: deretan tombol vertikal dengan tautan. Tapi jangan terburu-buru untuk mengatakan “tidak, saya ingin menu yang super rumit” dan tutup panduan ini. Sekarang mari kita jelaskan alasannya.

Pertama, berpindah dari yang sederhana ke yang kompleks biasanya merupakan cara yang paling efisien untuk mempelajari pengetahuan baru. Dengan mempelajari cara membuat menu yang relatif sederhana, Anda akan mempelajari 90% teknik membuat menu untuk grup VK.

Dan kedua, seperti yang telah kami katakan, markup wiki VK diperkenalkan pada saat hanya sedikit orang yang mendengar tentang aplikasi seluler. Menu "sederhana" bersyarat kami akan bekerja dengan benar dan seefisien mungkin di mana-mana: di versi browser VK, di browser seluler dan, akhirnya, di aplikasi. Banyak menu "kompleks" tidak dapat membanggakan hal ini. Selain itu, dalam kebanyakan kasus, menu "sederhana" akan berfungsi lebih baik daripada menu "kompleks" yang "berantakan" jika dilihat di aplikasi VKontakte resmi. Paling sering, lebih baik berhenti di opsi menu ini. Ya, ada implementasi menu yang cukup berornamen. Anda juga dapat bereksperimen dengan mereka. Tetapi pengalaman kami mengatakan bahwa mereka praktis tidak akan menambah manfaat nyata - konversi, pembelian, dan reputasi. Dan masalah - cukup bisa.

Menu pengujian kami akan terlihat seperti ini:

Hanya ada dua tombol. Yang pertama akan mengarah ke halaman utama "Yandex", dan yang kedua - ke grup VK "Tim VKontakte".

Menu grafik vertikal di VK adalah gambar yang dipotong menjadi strip. Garis-garis ini ditempatkan menggunakan markup di bawah satu sama lain pada halaman wiki. Beberapa dari "jalur" ini diberi tautan. Ketika Anda mengklik tautan gambar seperti itu, sebenarnya, transisi terjadi pada tautan ini. Satu jalur adalah satu jalur. Beberapa pita (misalnya, yang perantara, yang terletak di antara titik-titik), sebaliknya, diberi tidak adanya tautan. Band seperti itu menjadi "tidak dapat diklik".

Membuat menu grafis vertikal untuk grup VK turun ke urutan tindakan berikut:

  • Langkah pertama adalah menggambar menu. Lebar harus ketat 600px(piksel). Tingginya, kami sarankan untuk membuat menu tidak lebih dari 900px. Hasilnya paling baik disimpan dalam format PNG, sebagai upaya terakhir - JPG. Gunakan alat menggambar yang familier dan nyaman (seperti Photoshop atau GIMP). Hasilnya di sini adalah 95% tergantung pada keterampilan kreatif dan teknis Anda. Bahkan jika Anda tidak tahu cara menggunakan editor grafis sama sekali, jangan putus asa. Keterampilan yang akan cukup diperoleh dalam waktu maksimal beberapa jam. Ada sejumlah besar referensi dan informasi pendidikan di Internet. Selain itu, kemampuan untuk menggunakan editor grafis setidaknya sedikit sangat, sangat berguna bagi administrator publik. Anda tidak akan membuang waktu Anda.
  • Selanjutnya, gambar dengan menu dipotong menjadi garis-garis horizontal. Anda dapat melakukan ini dengan cara apa pun yang nyaman bagi Anda: dari Photoshop biasa hingga berbagai layanan online. Jika Anda tidak tahu bagaimana melakukannya - tanyakan saja pada mesin pencari favorit Anda. Kami tidak akan menjelaskan secara rinci bagian teknis dari proses pemotongan: ada lusinan cara, beberapa cocok untuk beberapa pengguna, tetapi tidak untuk yang lain. Saat memotong, satu aturan sederhana harus diperhatikan: ketinggian satu strip tidak boleh kurang dari 60px. Jika tidak, Anda mungkin mengalami masalah dalam menampilkan menu di aplikasi dan di browser seluler: akan ada yang disebut. "garis putih" di antara gambar.
  • Irisan "strip" diunggah ke album atau album grup di halaman admin grup. Kami merekomendasikan opsi kedua. Bagaimanapun, album dengan bagian menu yang diiris seharusnya di domain publik. Jika tidak, pengguna yang gambar albumnya tidak tersedia tidak akan melihat menu Anda!
  • Kode markup wiki dikompilasi dan dimasukkan ke halaman wiki yang diinginkan.
  • Grup berisi pos yang disematkan dengan tautan gambar ke halaman wiki dengan menu. Kami menulis secara rinci tentang bagaimana posting seperti itu dibuat di atas. Selain itu, kode (dengan sedikit perubahan) dapat ditambahkan ke halaman root wiki (item di sebelah kanan item "Informasi", muncul saat bagian "Bahan" diaktifkan. Lihat di atas untuk detail selengkapnya).

Dan sekarang mari kita berurusan dengan memuat bagian menu dan kode wiki secara lebih rinci. Kami telah menyiapkan untuk Anda. Ini memiliki dua direktori: "1" dan "2". Yang pertama berisi bagian dari opsi pemotongan paling primitif dan sederhana untuk menu kita - menjadi dua bagian. Unduh arsip, unggah gambar (1.png dan 2.png) dari direktori "1" ke album baru (di halaman Anda atau dalam grup).

Kami memiliki dua "pita": yang atas (dengan tombol "Yandex") dan yang lebih rendah (dengan tombol "Tim VK"). Keduanya akan menjadi gambar tautan. Dalam markup wiki, ini dilakukan dengan kode seperti ini:

"TAUTAN" adalah tautan sasaran. Misalnya, https://yandex.ru/. Selain biasa luar tautan, ini bisa menjadi indikasi objek VKontakte: posting, halaman pengguna, atau grup. Misalnya, untuk beralih ke komunitas "Tim VKontakte" setelah menekan tombol, Anda dapat menentukan alamatnya (https://vk.com/team) dan penunjuk ke sana (club22822305). Pada dasarnya, tidak akan ada perbedaan. Tautan eksternal (yang tidak mengarah ke sumber daya VK) kami kami sarankan untuk mengurangi dengan menggunakan

Salam, teman-teman terkasih dan tamu blog. Hari ini kita akan berbicara tentang membuat menu di VK dan bagaimana melakukannya dalam desain baru jejaring sosial. Ada beberapa perubahan yang sangat signifikan yang harus diperhatikan, karena jika menu dibuat dengan desain lama yang saya tulis, maka gambarnya bisa terlihat mencurigakan.

Menu grup Vkontakte adalah wajahnya. Penggunanyalah yang melihatnya ketika dia pertama kali memasuki komunitas, dan seberapa mudah diakses dan dirancang semuanya sangat tergantung pada apakah dia menjadi anggota tetap grup.

PENTING: Setelah mengubah desain umum di VK, ukuran gambar untuk menu di jejaring sosial juga berubah. Periksa pekerjaan Anda dan buat perubahan dalam kelompok yang dibahas di bawah ini.

Jenis menu dan fiturnya

Langkah pertama dalam menciptakan komunitas adalah menentukan tujuan utamanya. Di sinilah desain menu masa depan dan fitur fungsionalnya bergantung.
Tergantung pada tujuan grup, menu dapat berupa:

  • untuk platform informasi;
  • ;
  • untuk situs pembelajaran.

Bagian utama adalah informasi. Ini adalah komunitas di mana pengguna diberikan beberapa jenis konten yang menghibur atau mendidik. Untuk grup seperti itu, yang terbaik adalah menggunakan menu yang menampilkan topik utama. Jadi, publik populer membuat rubrik: berita, publikasi terbaru, publikasi populer, serta rubrik khusus tentang topik grup.

Menu perdagangan dan pendidikan publik mungkin serupa. Tujuan keduanya adalah untuk membantu pengguna Anda menavigasi berbagai barang atau jasa. Menu untuk penjualan, sebagai suatu peraturan, mencakup bagian-bagian seperti Katalog Produk, Pembayaran, Pengiriman, Promosi dan diskon, dan untuk pelatihan dapat dibatasi pada bagian dengan deskripsi layanan, karena hal utama di sini adalah bagi pengguna untuk menemukan program pelatihan atau materi yang dia butuhkan.

Cara membuat menu di grup Vkontakte: petunjuk langkah demi langkah

Seluruh proses dapat dibagi menjadi 2 tahap:

  • Bekerja di Photoshop;
  • Menambahkan bagian dan gambar dalam grup itu sendiri.

Untuk menjawab pertanyaan tentang cara membuat menu di grup Vkontakte secara akurat, Anda harus membayangkan secara visual desain masa depan dengan semua bagian, dan kemudian, dalam prosesnya, Anda dapat menambahkan item yang masih terlintas dalam pikiran.

Pada tahap pertama, avatar grup dan gambar untuk menu itu sendiri dibuat. Satu gambar akan terlihat lebih serasi untuk avatar dan menu.

Pilihan atau pembuatan avatar harus ditanggapi dengan serius, karena banyak pengguna memberikan perhatian khusus padanya. Anda dapat menemukan gambar yang sesuai di Internet dan menambahkan tulisan atau beberapa elemen ke dalamnya di Photoshop, atau Anda dapat membuat gambar yang benar-benar unik sendiri.

Karena kita juga perlu membuat menu drop-down, kita mencari atau membuat gambar yang paling sesuai dengan tema grup, atau hanya mengambil latar belakang yang indah. Pekerjaan dengan gambar akan dilakukan di Adobe Photoshop, karena fungsi editor foto konvensional tidak cukup untuk semua operasi yang diperlukan. Semua ukuran diatur oleh jejaring sosial Vkontakte itu sendiri dan penyimpangan yang signifikan ke atas atau ke bawah akan mengarah pada fakta bahwa avatar tidak akan dimuat sama sekali, atau tidak akan menyatu dengan menu.

Algoritma tindakan:

  • Buka Photoshop dan buka "file" - "buat" dan atur lebar dan tinggi masing-masing: 760X500.

  • Pilih alat "bersarang", dan kemudian - "pecahkan fragmen". Bagilah gambar menjadi 3 bagian secara horizontal. Untuk fragmen dari tepi kiri atau kanan di jendela tarik-turun (tergantung pada bagian mana yang ingin Anda lihat pada avatar), tulis nilai lebar dan tinggi- 200XX dan Y) - 560 dan 0 Ini akan menjadi avatar grup.

  • Untuk fragmen berikutnya, atur nilai lebar dan tinggi menjadi 50X500, dan tulis koordinat 510 dan 0. Ini adalah jarak antara avatar grup dan menu. Bagian ini tidak akan dibutuhkan nantinya.

  • Sekali lagi, pilih "split fragment" dan bagi secara vertikal menjadi 2 bagian. Untuk fragmen di atas, atur nilainya: lebar - 510, tinggi - 182, koordinat - 0. Ini adalah ruang di atas menu. Bagian ini juga tidak akan terlihat di grup.

  • Sekarang kita salin gambar yang dipilih atau dibuat ke objek yang dibuat dan dibagi. Jika tombol pintas CTRL+V tidak berfungsi, cukup buka lokasi di komputer tempat gambar disimpan dan seret ke Photoshop.

  • Ruang yang tersisa dibagi secara vertikal menjadi fragmen sebanyak bagian dalam menu. Anda tidak perlu menetapkan nilai untuk mereka.
    Kami menulis judul setiap bagian.

  • Langkah terakhir adalah menyimpan gambar. Anda perlu menyimpan gambar seperti ini: file - save for Web. Metode ini cocok untuk versi Photoshop yang lebih baru. Jika tidak ada tulisan "simpan untuk Web" di bagian "file", maka kami melanjutkan sebagai berikut:

Kami pergi ke item "file", pilih "ekspor" - "simpan untuk Web". Kami membiarkan semua parameter apa adanya. Klik "simpan" lagi.

Pilih folder di komputer Anda dan simpan gambar di sana. Mereka seharusnya terlihat seperti ini:

Sekarang kita melanjutkan ke tahap kedua untuk mengetahui dengan tepat cara membuat menu di grup Vkontakte - langsung menambahkan menu ke publik. Untuk ini:

  • Pertama-tama, Anda perlu menghubungkan Materi, karena ini adalah satu-satunya cara untuk menambahkan bagian apa pun di halaman utama. Untuk melakukan ini, buka Manajemen Komunitas dan di bagian paling bawah halaman pilih "Bahan", lalu - "buka". Kami menyimpan perubahan.

  • Kami mengunggah semua foto ke grup, kecuali avatar dan bagian-bagian yang tidak diperlukan. Agar foto dapat ditampilkan di halaman utama, Anda harus kembali ke Manajemen Komunitas dan klik di seberang tab "foto" - "buka".
  • Mengunggah avatar.
  • Langkah selanjutnya adalah mengaktifkan mode markup wiki. Anda dapat melakukannya dengan mengklik ikon berlian di sisi kanan halaman di bagian "edit".

  • Di sini kami memasukkan kode untuk markup: [], di mana [] adalah tautan ke bagian atau halaman tempat transisi akan dilakukan dengan mengklik foto. Anda dapat menambahkan kedua tautan ke bagian di Vkontakte itu sendiri, dan ke sumber daya eksternal.
  • Kode ini diduplikasi sebanyak ada bagian dalam menu, setiap kali memasukkan link.
    Jika diinginkan, kami juga mengubah tab "berita segar", misalnya, menjadi "menu.

  • Klik "simpan halaman", kembali ke bagian utama grup dan perbarui halaman. Menu ditutup secara default, tetapi pengguna, dengan mengklik nama yang sesuai, akan dapat membuka bagiannya dan menavigasinya.

Ini menyelesaikan seluruh proses, tetapi Anda harus memeriksa apakah tautannya berfungsi dan apakah batas fotonya cocok.

Layanan untuk membuat menu grup

Jika Anda masih tidak mengerti cara membuat menu di grup Vkontakte dan petunjuk langkah demi langkah tidak membantu Anda, Anda dapat menggunakan layanan khusus yang akan membuat dan bahkan menambahkan dengan indah
menu kelompok.

Salah satu layanan yang paling populer adalah MenuMake. Setelah mengirimkan aplikasi, pesanan akan siap dalam 5 menit, dan kemudian, jika diinginkan, menu akan ditambahkan ke grup. Pada saat yang sama, semua keinginan pelanggan dalam hal desain dan jumlah bagian diperhitungkan.

Hormat kami, Galiulin Ruslan.