Untuk membuat menu di grup VKontakte, Anda memerlukan semacam editor grafis. Yang paling umum adalah Adobe Photoshop. Dengan bantuannya dimungkinkan untuk membuat menu untuk grup VKontakte.

Ada banyak templat dan blanko di Internet, Anda dapat menggunakannya jika Anda tidak dapat membuatnya sendiri.

Membuat menu di editor grafis

Pertama, Anda perlu membuat templat menu, dan baru kemudian menambahkannya ke VKontakte. Lebar latar belakang menu tidak boleh lebih dari 370 piksel. Jika lebih besar, masih akan menyusut ke ukuran ini. Anda sekarang dapat mengatur tinggi secara proporsional dengan lebar sehingga semuanya pas, dan pada saat yang sama tidak terlalu panjang. Sebelum membuat menu, pikirkan tentang latar belakang dan teks yang seharusnya ada pada tombol menu.

Luncurkan Photoshop, buat dokumen baru (file - buat atau ctrl+N). Kami mengatur parameter file yang dibuat. Lebar maksimal 370 px, saya buat 200 px, tinggi 250 px. Anda bisa membuatnya lebih kecil dan kompak. Tambahkan gambar ke file yang dibuat yang akan berfungsi sebagai latar belakang. Sekarang mari kita buat teksnya. Contoh saya adalah yang paling sederhana, Anda bisa membuatnya lebih indah dan kompak.

Saya membuat menu seperti itu. Saya memilih alat Pemotong dan menggunakannya untuk memotong tiga bagian pada gambar, yang ditandai dengan angka 1,2,3 - itu akan menjadi tombol. Setelah Anda memotong, simpan menu yang dibuat. Klik File - simpan untuk web dan perangkat.

Di jendela yang muncul, jangan ubah apa pun, klik simpan. Pilih lokasi penyimpanan dan klik simpan.

Itu saja, pekerjaan di Photoshop selesai.

Menambahkan menu ke kontak

Sekarang gambar yang dibuat, setelah disimpan, akan ada di folder gambar. Kami mengunggahnya ke kontak menggunakan pengunggah foto standar. Anda dapat mengunggah file-file ini ke album foto grup. Dengan kata sederhana, itu ditambahkan sebagai foto biasa yang Anda unggah ke kontak. Sekarang pastikan yang berikut ini diaktifkan di pengaturan grup Anda. Masuk ke grup Anda, klik pengelolaan komunitas (terletak di bawah foto utama grup, di sisi kanan). Lalu di bagian bawah kita cari item materialnya, harusnya nyambung disana. Setelah Anda memilih terhubung, klik simpan. Jika Anda tidak mengklik simpan, perubahan tidak akan berlaku.

Setelah itu masuk ke halaman utama grup Anda, dan di mana informasi tentang grup tersebut berada (deskripsi, lokasi), terdapat baris berita terkini. Kami arahkan berita terkini pada prasasti dan klik edit di sisi kiri.

Di jendela yang muncul, Anda perlu menentukan kode []. Anda dapat menyalin dan menempelkannya langsung dari artikel tersebut. Sekarang yang perlu Anda lakukan hanyalah mengubahnya ke data Anda.

foto-40781312_285935465 – kode foto. Itu dapat dilihat di bilah alamat. Kode ini terlihat saat Anda mengunjungi foto. Alamatnya sendiri jauh lebih besar, tetapi Anda perlu menyalin bagian kode yang dimulai dengan kata foto dan diakhiri dengan angka. Biasanya setelah angka mungkin ada, misalnya tanda persen.

Nopadding – perintah ini menghilangkan spasi antar gambar.

100px – lebar menu (jika ini adalah tombol terpisah, maka ini akan menjadi lebar tombol).

club40781312 - tautan ke bagian yang akan dikunjungi seseorang dengan mengklik tombol ini (gambar). Itu juga terletak di bilah alamat browser, saat Anda berada di bagian yang harus dituju seseorang ketika mereka mengklik tombol tersebut. Anda hanya memerlukan bagian terakhir kode, yang muncul setelah garis miring terakhir / (disebut juga garis miring). Dalam hal ini, ketika saya mengklik tombol (gambar) di grup saya, itu akan menuju ke halaman utama grup. Anda memasukkan kode Anda, yang akan ada di bagian Anda.

Anda juga dapat mengubah judulnya. Misalnya, alih-alih berita terbaru, saya menulis menu grup. Anda menulis apa yang Anda inginkan. Setelah Anda selesai mengedit kode Anda, klik simpan. Kami melakukan ini dengan setiap tombol yang Anda buat untuk menu di kontak. Jika Anda menempatkan kode di bawah kode, tombol-tombol tersebut akan menempati lokasi yang sama. Jika Anda meletakkan kode berikut di sebelah kanan kode, maka tombol menu juga akan letaknya persis seperti Anda memasukkan kode tersebut

Jika Anda belum mendapat jawaban atas pertanyaan bagaimana cara membuat menu grup

Tidak mungkin mendapatkan jawaban atas pertanyaan bagaimana membuat menu di grup VKontakte sesuai instruksi yang Anda baca, tulis kepada kami dengan mengklik mengajukan pertanyaan. Tuliskan masalah Anda dan langkah-langkah yang Anda ambil. Kami akan menjawab secara pribadi.

• Video tentang membuat menu grup

Dan sekali lagi saya senang menyambut Anda!

Dalam artikel hari ini kita akan berbicara secara eksklusif tentang grup VKontakte, meskipun sebagian besar saya lebih suka bekerja dengan halaman publik. Namun ketika di artikel terakhir saya menyinggung contoh publik saya, banyak yang bertanya-tanya, khususnya tentang menu grup.

Cara membuat menu di grup VKontakte

Inilah yang saya dapatkan.

Saya menjadikan menu sebagai contoh saja. Untuk memahaminya bagi kelompok, pertimbangkan lebih detail semua seluk-beluknya untuk Anda.

Jadi. Berikut langkah-langkah dasarnya:

• Pikirkan menu utama
• Pilih gambar
• Photoshop (tidak ada tempat tanpa Photoshop, seperti biasa 🙂)
• Pemotongan gambar
• Mengunggah gambar ke album kontak

Untuk mengaktifkan posting terbaru(untuk menu masa depan Anda), Anda harus pergi ke manajemen komunitas dan mengaktifkan item - “Materi”

Setelah materi dimasukkan, item “Berita Terbaru” akan muncul di bagian atas grup, di mana Anda perlu membuat menu. Sama seperti halaman kontak mana pun, kita berada di editor tempat kita dapat mengunggah gambar atau tombol menu secara manual, atau melalui markup wiki (tombol di sudut kanan atas).

Seperti yang Anda duga, cara termudah adalah dengan terlebih dahulu menggambar gambar yang diperlukan di Photoshop dan menempatkan tombol di atasnya terlebih dahulu, yang nantinya akan menjadi tautan.

Dalam contoh saya, saya menggunakan latar belakang seorang gadis dan menempatkan 3 tombol di sebelah kirinya. Setiap tombol memiliki namanya sendiri.

Menu saya terdiri dari item berikut:

Untuk mengintegrasikan gambar yang sudah jadi ke dalam kontak, gambar tersebut harus dipotong terlebih dahulu. Untuk melakukan ini, kami menggunakan alat “Pemotongan” di Photoshop. Saya pikir tidak akan ada kesulitan dalam hal ini. Semuanya sederhana di sana... Untuk berjaga-jaga, saya mengambil foto :)

Kami memilih alat ini dan mulai "memotong". Saya mendapat 4 bagian. (hal paling sederhana yang saya temukan :), meskipun Anda bisa memotongnya menjadi beberapa bagian)

Semua pekerjaan yang diperlukan untuk membuat menu telah selesai. Sekarang Anda dapat mulai membuat menu VKontakte. Untuk melakukan ini, unggah gambar ke kontak satu per satu. Inilah hasil akhir kami:

Sekarang klik pada setiap tombol (atau bagian gambar) dan tetapkan alamat (tautan) yang diperlukan. Untuk menghapus spasi tambahan, Anda perlu menggunakan tag “nopadding” (di menu markup Wiki)

Tag “nopadding” menghilangkan spasi di antara gambar, sehingga membantu untuk “menggabungkan” gambar secara dekat satu sama lain.

Hasil penambahan tag tersebut adalah sebagai berikut:

Tampaknya semuanya sudah jelas dan tidak ada yang rumit. Dan jika Anda tiba-tiba memutuskan untuk membuatnya sendiri, lakukanlah, Anda mungkin akan membuatnya lebih indah... Dalam contoh saya, hasilnya tidak sekeren yang saya inginkan, tetapi saya melihat ke bagian yang berfungsi untuk Anda. Pastinya jika Anda meluangkan lebih banyak waktu, bahkan beralih ke freelancer, Anda bisa membuat menu yang sangat keren.

Saya melihat banyak orang membuat kelanjutan dari avatar utama. Ternyata satu gambar utuh. Terlihat cantik. Namun untuk membuat sesuatu seperti ini, Anda perlu memiliki pemahaman yang lebih baik tentang Photoshop :)

Saya juga memperhatikan bahwa banyak orang tertarik dengan pertanyaan ini - cara membuka menu grup, yaitu agar menu grup VKontakte terbuka terlebih dahulu saat masuk ke grup.

Menjawab: Sejauh yang saya tahu, fitur ini telah dihapus oleh administrator Vkontakte. Sebelumnya, ada tombol terpisah untuk membuat menu tetap – terbuka. Kemudian fungsi ini dihapus, dan sekarang menu harus dibuka secara terpisah.

Meskipun, saya telah melihat beberapa yang terbuka secara default... dan seseorang bahkan mengatakan bahwa ada beberapa kode yang mengatasi masalah ini. Tapi saya tidak akan merekomendasikan menggunakannya. Dilihat dari diskusi di banyak forum, admin tidak menyambut baik hal ini!

Itu saja untuk hari ini. Sampai jumpa!

Banyaknya permintaan dari pembaca gigih saya dan pengguna yang penasaran telah membuahkan hasil. Saya akhirnya membuat pelajaran di mana kita akan belajar cara membuat menu VKontakte dinamis dengan efek menekan tombol! Dengan analogi dengan situs Internet biasa, ketika tautan yang dikunjungi ditandai dengan cara khusus (menekan tombol, menggarisbawahi, dll.) - kami akan membuat desain yang sama di VKontakte, menggunakan halaman yang dibuat dan desain grafis. Untuk memulainya, kita akan membuat template grafis di Photoshop - kita akan membuat header menu dan dua jenis tombol. Kemudian kita akan membuat beberapa halaman VKontakte, sesuai dengan item di menu kita. Dan terakhir, kami akan melakukan trik rumit yang sebenarnya akan menciptakan ilusi mengikuti tautan. Pelajarannya cukup rumit dan cocok untuk mereka yang merasa yakin dengan fungsi Vkontakte. Saya akan melakukan semua manipulasi menggunakan sebuah contoh grup VKontakte Anda, di mana efek ini diwujudkan secara langsung. Jadi, ayo mulai bekerja!

Langkah 1. Buat header menu di Photoshop
Buat dokumen di Photoshop dengan lebar 600 piksel. Ketinggiannya bisa berbeda, sesuai kebijaksanaan Anda. Anda dapat menempatkan foto tertentu, kolase, spanduk informasi, dan gambar grafik lainnya di header. Dalam hal ini saya menggunakan banner iklan ini berukuran 600x172 piksel.

Langkah 2. Buat bilah navigasi di Photoshop
Sekarang kita perlu membuat bilah navigasi. Dalam contoh ini, saya hanya menggunakan teks sebagai tombol. Namun sesuai kebijaksanaan Anda, Anda dapat membuat tombol berwarna dan menulis teks di atasnya. Kami melakukan ini - membuat persegi panjang 600x56 piksel di Photoshop dan dalam hal ini mengisinya dengan warna putih. Kemudian kami menulis item menu di baris - sekitar 5-6 item, tidak lebih. Jumlah poin yang lebih banyak akan terlihat terjepit.

Langkah 3. Buat bilah navigasi yang ditekan di Photoshop
Sekarang kita perlu membuat link aktif, seolah-olah link tersebut diklik. Saya menggunakan garis bawah biasa, tetapi Anda dapat menggunakan teks atau warna latar belakang yang berbeda untuk menandai tautan yang dikunjungi.

Langkah 4. Potong gambar yang sudah jadi
Pada tahap ini, kita perlu memotong gambar dari Langkah 2 dan Langkah 3. Kita harus memiliki dua set masing-masing lima tombol - satu tombol tanpa garis bawah, tombol lainnya dengan garis bawah. Tombol untuk setiap item (dengan dan tanpa garis bawah) harus berukuran sama. Gambar di bawah menunjukkan seluruh desain grafis kami - sepuluh tombol dan satu header menu.

Langkah 5. Buat halaman Menu VKontakte
Sekarang mari kita pergi ke VKontakte. Tugas kita adalah membuat halaman terpisah yang disebut “Menu”. Untuk melakukan ini kita akan menggunakan kode berikut
http://vk.com/pages?oid=-XXX&p=Page_Name
di mana alih-alih XXX kami akan mengganti id grup kami, dan sebagai ganti teks “Nama Halaman” kami akan menulis Menu. Sekarang kita perlu mencari tahu id grup. Bagaimana cara melakukan ini? Kami pergi ke halaman utama grup dan melihat postingan kami di dinding - tepat di bawah blok "Tambahkan postingan" akan tertulis "Semua postingan" - klik tautan ini.

Langkah 6. Tentukan id grup dan edit kodenya
Kami pergi ke halaman dan melihat URL seperti ini https://vk.com/wall-78320145?own=1, dimana angka 78320145 pada contoh ini adalah group id. Kami mengganti data kami ke dalam kode sumber dan mendapatkan catatan seperti ini:
http://vk.com/pages?oid=-78320145&p=Menu(dengan nomor Anda!). Rekatkan baris ini ke bilah alamat browser dan tekan Enter. Jadi kami membuat halaman VKontakte baru dan awalnya terlihat seperti ini.

Langkah 7. Buat halaman navigasi VKontakte yang tersisa
Dengan cara yang sama, kami membuat empat halaman navigasi lagi: Harga, Cara memesan, Spesifikasi teknis, dan Pertanyaan. Artinya, kami menyalin kode yang sesuai empat kali lagi ke bilah alamat browser (dengan nomor id Anda pada contoh di bawah, nomor saya):

http://vk.com/pages?oid=-78320145&p=Harga

http://vk.com/pages?oid=-78320145&p=How_to memesan

http://vk.com/pages?oid=-78320145&p=Spesifikasi teknis

http://vk.com/pages?oid=-78320145&p=Pertanyaan
Harap diperhatikan bahwa pada judul halaman dua kata (Cara memesan), spasi antar kata diganti dengan garis bawah urutan How_to. Sekarang kami memiliki lima halaman siap pakai untuk setiap item menu. Kami tidak membuat halaman Portofolio karena terletak di halaman Menu

Langkah 8. Unggah foto ke halaman pertama menu
Pada halaman yang dibuat, masih kosong (lihat Langkah 6) Menu, klik tautan Edit atau tautan Isi dengan konten. Setelah ini kita melihat panel pengeditan. Di sini kita perlu mengklik ikon kamera dengan fungsi Unggah foto. Penting! Harap pastikan bahwa Anda berada dalam mode markup wiki. Peralihan mode diatur oleh ikon di tepi kanan halaman.

Langkah 9. Hasil setelah memuat gambar
Kita memuat gambar-gambar yang kita buat pada Langkah 1 dan Langkah 2. Setelah memuat, kita melihat kode seperti pada gambar di bawah ini, dan menunya sendiri terlihat seperti ini. Setiap kali selesai melakukan perubahan kode, jangan lupa klik Simpan Halaman, lalu klik Pratinjau untuk melihat hasilnya.

Langkah 10. Mengedit kode gambar
Sekarang tugas kita adalah mengganti semua properti noborder dengan properti nopadding. Dan letakkan dimensi sebenarnya pada gambar pertama, karena VKontakte memperkecil gambar menjadi 400 piksel saat diunggah. Setelah semua perubahan kita akan mendapatkan kode dan menu berikut.

Langkah 11. Tambahkan link ke gambar
Sekarang kita perlu memasang tautan untuk setiap gambar. Tautan harus dimasukkan setelah nopadding| sebagai pengganti spasi sebelum tanda kurung tutup. Untuk gambar pertama (header menu dari Langkah 1), Anda dapat memberikan link ke halaman utama grup, atau Anda dapat menggunakan properti nolink (dimasukkan; setelah nopadding tanpa spasi). Untuk kartu kedua, masukkan alamat halaman format halaman-78320145_49821289. Artinya, URL lengkap dari gambar tersebut https://vk.com/page-78320145_49821289, bagian pertama dengan domain dapat dihilangkan. Namun untuk link ke situs luar, URL link tersebut harus dicantumkan secara lengkap.

Langkah 12. Salin kode ke halaman navigasi lainnya
Dalam langkah yang cukup sederhana ini, kami menyalin kode terakhir dari langkah sebelumnya dan menempelkannya ke halaman sisa yang dibuat - Harga, Cara memesan, Kerangka Acuan, dan Pertanyaan. Kami berada di halaman, klik Edit atau Isi dengan konten (kami berada dalam mode markup wiki), tempel kode dan klik Simpan. Dan kemudian juga di halaman berikutnya. Artinya, sekarang kita memiliki lima halaman, yang masing-masing halamannya tampilan menunya persis sama. Namun Anda sudah dapat menavigasi menu - ketika Anda mengklik link, misalnya Harga, kita akan dipindahkan ke halaman Harga, dll.

Langkah 13. Membuat efek tombol ditekan
Sekarang kita harus mengubah satu gambar pada masing-masing lima halaman (ganti tombol tanpa garis bawah dengan tombol dengan garis bawah). Misalnya pada halaman pertama Menu kita memuat gambar baru lalu mengganti alamat gambar lama pada kode dengan yang baru (digarisbawahi merah). Lalu kita masuk ke halaman Harga, upload gambar yang diberi garis bawah Harga dan ubah kodenya ke alamat gambar baru. Lalu kita pergi ke halaman Cara memesan, Kerangka acuan dan Pertanyaan dan melakukan operasi yang sama dengan cara yang sama.

Terakhir.
Hasilnya, kami mendapat efek navigasi ketika Anda mengklik link menu dan menjadi aktif. Namun karena desain grafis di semua halaman hampir sama, kecuali link aktif, maka terciptalah ilusi navigasi, meski sebenarnya merupakan peralihan ke halaman lain.

Menu yang dirancang dengan cara ini tidak disesuaikan untuk perangkat seluler. Saat ukuran layar diperkecil, gambar mulai bergeser satu ke bawah yang lain. Untuk membuat desain responsif, Anda perlu menggunakan tabel versi kaku. Tapi ini adalah cerita lain dan teknik yang lebih maju. Sementara itu, lihatlah berbagai pilihan desain menu grafis.

Tujuan pembuat grup di media sosial. jaringan untuk menarik lebih banyak pengunjung. Penting bagi tamu untuk bergabung, menandatangani, membaca informasi, memberikan komentar atau memesan produk. Kebutuhan akan hasil akhir berbeda dengan arah kegiatan.

Detik-detik pertama masa menginap menentukan tindakan tamu selanjutnya. Inilah sebabnya mengapa antarmuka memainkan peran besar.

Faktor yang meninggalkan tamu :

• avatar;
• keterangan;
• Nama;
• menu yang indah dan praktis;
• warna-warni;
• isi.

Sangat mudah untuk membuat menu praktis yang memotivasi lebih dari sekedar tindakan. Tapi pertama-tama Anda perlu mencari tahu apa yang seharusnya.

Menunya harus seperti apa?

Dengan menggunakan menu yang dirancang dengan baik, pengunjung dapat dengan mudah menavigasinya dan dengan cepat mendapatkan jawaban atas pertanyaan mereka.

Navigasi juga memungkinkan Anda menciptakan kesan yang tepat terhadap proyek.

1. Tiga tujuan utama kelompok:
2. penjualan;
3. peningkatan lalu lintas;

peningkatan pengunjung aktif.

Untuk penjualan, navigasi grup menggantikan tampilan di dalam toko.

1. Tombol terpenting seharusnya ada di sini:
2. katalog;
3. harga;
4. pengiriman;
5. penawaran promosi;

ulasan.

Untuk meningkatkan traffic, penekanannya adalah pada konten dan citarasa situs atau blog.

Perkiraan serangkaian tombol:

video: menu untuk umum

Bekerja dengan Photoshop

Sebelum memulai, Anda perlu memvisualisasikan desain atau tampilan keseluruhan, serta komponen-komponennya. Tidak diperlukan pengetahuan khusus, cukup ikuti langkah-langkah instruksinya.

Algoritma tindakan:

Ini dilakukan dengan menggunakan alat Rectangular Marquee:

Bekerja dengan grafik:

Seharusnya terlihat seperti ini:

Simpan persegi panjang di sebelah kanan sebagai gambar terpisah, atur ukurannya menjadi 200x500 piksel. Ini adalah avatar yang sudah jadi, diunggah melalui tombol “Unggah foto” di grup VK.

Gambar kedua masih perlu dibagi dengan jumlah titik. Hal ini dilakukan untuk menetapkan tautan ke setiap tombol.

Pertama, Anda perlu membuat markup:

Buat fragmen:

Menyimpan gambar:

Bagian teknis

Gambar yang sudah jadi harus ditransfer ke grup. Dengan mengikuti langkah-langkah di bawah ini, tugas ini dapat diselesaikan dengan mudah.

Penting! Mengunggah menu berbeda dengan mengunggah foto atau gambar biasanya.

Semuanya beres:

1. Sekarang yang terpenting adalah mengapa semua ini dilakukan. Tambahkan fungsionalitas menu. Gambar terpisah harus diberi tautannya sendiri.
2. temukan entri yang diperlukan;
3. klik kiri di atasnya;

• salin URL di bilah alamat.
• pergi ke sumber tempat Anda ingin mentransfer pengunjung;

salin alamat yang diperlukan.

Simpan perubahan menggunakan tombol yang sesuai di bagian bawah jendela.

Perhatian! Perubahan mungkin tidak langsung terlihat. Disarankan untuk keluar dari profil utama Anda dan kemudian masuk kembali ke grup.

Cara membuat menu di markup wiki grup VKontakte

Markup Wiki adalah bahasa khusus yang digunakan untuk mendesain halaman web di grup jejaring sosial.

• Alat ini memungkinkan Anda membuat:
• efek;
• menu yang tidak biasa;
• tanda-tanda;
• elemen navigasi;

memformat teks.

Desain ini secara intuitif memaksa pengunjung untuk tetap tinggal dan mengklik tombol. Artinya, hal ini menunda dan merangsang tindakan - dan inilah yang dibutuhkan.

Secara visual, sistem seperti ini sangat mirip dengan tata letak HTML. Namun tidak memerlukan latihan yang panjang dan pola pikir yang khusus.

Video: menu dengan pencarian berdasarkan kategori

Nuansa penciptaan

Sebenarnya yang dilakukan di atas (membagi dan memuat gambar) sudah merupakan elemen markup. Inilah kelebihan alat ini. Konversi otomatis menjadi tag saat memuat gambar.

Namun, penting untuk mengetahui masing-masing tag untuk membantu menambahkan lebih banyak fungsi dan keindahan. Misalnya, saat kita mengisi setiap bagian gambar, garis-garis putih mungkin terbentuk di antara bagian-bagian tersebut. Anda dapat menghapusnya hanya dengan menambahkan tag noborder.

Seperti ini: []

Tag utama disajikan pada tabel di bawah ini:

Foto: tag yang digunakan untuk menandai

Bekerja dengan gambar

Dimana opsi diganti dengan:

• tanpa batas- menghapus bingkai di sekitar gambar;
• tanpa bantalan- menghilangkan spasi antar gambar;
• polos- masukkan tautan ke gambar. Didesain sebagai teks, tanpa grafik;
• tidak ada tautan- menghapus tautan ke gambar;
• kotak- membuka gambar di jendela;
• NNNxYYYpx atau NNNpx- mengatur ukuran foto dalam piksel.

Membuat tabel

Terlepas dari jenis menu (teks atau grafik) yang Anda buat, kemungkinan besar Anda tidak dapat melakukannya tanpa menyisipkan tabel. Jika tidak, Anda cukup menempelkan teks ke kolom berita dan tidak memformatnya, sehingga membuang banyak waktu.

Sebuah tabel dibuat menggunakan sekumpulan karakter khusus, yang masing-masing karakter bertanggung jawab atas bagian tertentu dari tabel:

• {| simbol awal tabel, tanpanya tidak akan ada tabel. Selalu digunakan;
• |+ bertanggung jawab untuk memposisikan judul tabel di tengah. Ditempatkan setelah karakter di awal tabel. Gunakan sesuai keinginan;
• | menunjukkan awal dari baris dan sel baru;
• | karakter yang membuat sel menjadi transparan;
• ! membuat sel menjadi lebih gelap. Jika tidak ada, harus digunakan tanda sebelumnya;
• |} berarti akhir tabel. Karakter opsional, bagaimanapun, digunakan untuk mencegah terjadinya kesalahan.

Saat mengisi tabel, isi setiap sel harus ditempatkan setelah tanda |., dan saat memisahkan sel, jenis baris harus diduplikasi seperti ini: || atau!!.

Fitur penandaan

Ada banyak aturan tidak tertulis, dan ini menyebabkan banyak masalah bagi programmer pemula. Sebagai aturan, segala sesuatu dipelajari melalui latihan. Setiap orang menemukan celahnya sendiri, setiap orang menghadapi kesulitannya sendiri.

Untuk menghindari kesalahan mendasar, Anda harus membiasakan diri dengan kesalahan utama:

1. Anda harus berhati-hati saat mengubah ukuran gambar - jika kurang dari 131 piksel, kualitasnya akan menurun secara signifikan;
2. Lebar gambar tidak boleh melebihi 610 piksel;
3. Dilarang menempatkan lebih dari 17 tag terbuka pada satu halaman wiki;
4. ketika lebar gambar diubah, tingginya berubah secara otomatis dan proporsional;
5. daftar di dalam tabel harus dibuat menggunakan tag
   ;
6. Tidak boleh ada lebih dari 8 elemen daftar dalam satu baris markup.

Untuk membuat navigasi yang indah dan fungsional, Anda perlu mengetahui dasar-dasar Photoshop dan markup wiki. Namun, yang terakhir ini mengandung nuansa tersendiri, yang jika dihadapi oleh seorang pemula, bisa membuat Anda terjebak dan bingung dalam waktu yang lama.

Penting! Periksa apakah semua tag ditutup. Jaga agar tetap konsisten.

Asisten utama dalam hal ini adalah perhatian dan kepatuhan yang ketat terhadap instruksi. Halaman resmi VK, yang disebut markup wiki, selalu dapat membantu.

Salam teman-teman terkasih. Pada postingan hari ini saya ingin membahas tentang cara membuat menu untuk grup VKontakte. Melakukan hal ini tidak sesulit kelihatannya pada pandangan pertama, dan jika Anda memiliki setidaknya pengetahuan dasar tentang Photoshop atau Paint, Anda pasti akan berhasil. Jadi mari kita mulai.

Dengan struktur yang tepat, menu dapat meningkatkan jumlah penjualan atau arus pelanggan bisnis Anda, hal ini sudah tergantung pada fokus grupnya. Sebagai contoh, perhatikan desain toko pakaian online:

Strukturnya terbentuk dengan sangat jelas, hanya dalam beberapa klik pengguna dapat menemukan semua yang dia butuhkan: nomor telepon, alamat, informasi pemesanan, katalog produk, dll. Menurut saya, desain ini membantu meningkatkan penjualan minimal 2 kali lipat.

Dalam versi ini, menu adalah katalog produk yang dibagi menjadi beberapa bagian, sehingga pencariannya menjadi sangat nyaman. Avatar komunitas berisi nomor kontak beberapa operator, yang memungkinkan pelanggan menghubungi penjual dengan cepat.

Berikut ini contoh solusi yang buruk:

Katalog dirancang dalam bentuk tautan biasa yang mengarah ke tujuan yang tidak diketahui. Setuju bahwa tidak ada keinginan khusus untuk mencoretnya; sebaliknya, Anda ingin keluar dari grup.

Dalam contoh ini, kami melihat opsi desain untuk toko online, namun Anda dapat menggunakan sesuatu yang serupa di topik lain. Rumusnya sederhana: struktur yang jelas + desain grafis = masuknya pelanggan dan peningkatan penjualan.

Sekarang mari kita lihat semua ini dari sudut pandang teknis.

Membuat menu untuk grup VKontakte

Pertama-tama, mari kita buat tata letak grafis dari menu masa depan. Untuk tujuan ini, kita akan menggunakan Photoshop (untuk gambar sederhana, Paint standar bisa digunakan). Buka program dan buat dokumen baru:

Saya akan membuat gambar dengan ukuran 500x500 piksel, namun tergantung pada jumlah dan lokasi bagian, ukuran gambar mungkin berbeda.

Sekarang unduh gambar yang ingin Anda gunakan sebagai latar belakang dan seret ke kanvas Anda. Jika Anda mahir dalam program ini, Anda dapat menggambar sendiri latar belakangnya.

Kemudian tulis bagian, tombol, dan nomor telepon yang telah dirancang sebelumnya pada gambar latar belakang. Kami nantinya akan mengubahnya menjadi tautan:

Untuk membuat potongan seakurat mungkin, Anda perlu menggunakan garis bantu dengan menekan CTRL+R. Arahkan mouse Anda ke baris paling atas dan seret ke gambar seperti ini:

Langkah terakhir adalah memotong objek. Untuk melakukan ini, klik tombol “Slices From Guides” di toolbar atas:

Kami menyimpan kerangka kerja untuk perangkat web. Atur format gambar ke JPG, pilih kualitas maksimum dan simpan, misalnya, ke desktop Anda:

Sebuah folder muncul di desktop dengan bingkai menu masa depan, yang perlu kita transfer ke grup.

Menampilkan menu menggunakan markup Wiki

Di grup Anda, buka “manajemen komunitas” dan periksa apakah bagian “materi” terhubung. Jika partisi dinonaktifkan, sambungkan:

Setelah ini, tab “berita terbaru” akan muncul di grup. Klik tombol "edit", Anda akan ditransfer ke editor teks:

Alih-alih judul standar, tulis judul Anda sendiri, dan aktifkan juga mode markup wiki dengan mengklik ikon berlian:

Sekarang buka grup di tab baru dan unggah bingkai yang sudah disiapkan ke album foto, dan tempelkan kode berikut ke dalam editor teks, sebanyak jumlah bagian bingkai yang terbagi:

Alih-alih nilai "photo133337_133701019" Anda perlu memasukkan tautan ke foto

Alih-alih nilai "halaman-13333337_13333337" Anda perlu memasukkan tautan ke halaman atau bagian grup yang diinginkan

Alih-alih 370px, Anda dapat memilih dimensi Anda sendiri, dan parameter nopadding memungkinkan Anda menampilkan gambar lengkap, tanpa itu, menu kami akan ditampilkan dalam potongan-potongan.

Dengan mengklik tombol “Lihat”, Anda dapat melihat tampilan menu di grup. Jika semuanya cocok untuk Anda, klik "Simpan hasil" dan nikmati pekerjaan yang telah selesai.