คำขอจำนวนมากจากผู้อ่านที่ถาวรของฉันและผู้ใช้ที่อยากรู้อยากเห็นล้วนมีผลกระทบ ในที่สุดฉันก็สร้างบทเรียนขึ้นมาซึ่งเราจะได้เรียนรู้วิธีสร้างเมนู VKontakte แบบไดนามิกด้วยเอฟเฟกต์ของการกดปุ่ม! โดยการเปรียบเทียบกับเว็บไซต์อินเทอร์เน็ตทั่วไป เมื่อลิงก์ที่เยี่ยมชมถูกทำเครื่องหมายด้วยวิธีพิเศษ (ปุ่มกด การขีดเส้นใต้ ฯลฯ ) เราจะสร้างการออกแบบเดียวกันบน VKontakte โดยใช้เพจที่สร้างขึ้นและการออกแบบกราฟิก ขั้นแรกเราจะสร้างเทมเพลตกราฟิกใน Photoshop - เราจะสร้างส่วนหัวของเมนูและปุ่มสองประเภท จากนั้นเราจะสร้างหน้า VKontakte หลายหน้าตามรายการในเมนูของเรา และสุดท้าย เราจะใช้กลอุบายที่ยุ่งยาก ซึ่งอันที่จริงจะสร้างภาพลวงตาของการไปตามลิงก์ บทเรียนนี้ค่อนข้างซับซ้อนและเหมาะสำหรับผู้ที่รู้สึกมั่นใจในการใช้งานของ Vkontakte ฉันจะทำการยักย้ายทั้งหมดโดยใช้ตัวอย่าง กลุ่ม VKontakte ของคุณโดยที่เอฟเฟกต์นี้เกิดขึ้นจริง เอาล่ะ ไปทำงานได้แล้ว!
ขั้นตอนที่ 1 สร้างส่วนหัวของเมนูใน Photoshop
สร้างเอกสารใน Photoshop ที่มีความกว้าง 600 พิกเซล ความสูงอาจแตกต่างกันได้ขึ้นอยู่กับดุลยพินิจของคุณ คุณสามารถวางรูปถ่าย ภาพตัดปะ แบนเนอร์ข้อมูล และรูปภาพกราฟิกอื่นๆ ที่เฉพาะเจาะจงใดๆ ไว้ในส่วนหัวได้ ในกรณีนี้ ฉันใช้แบนเนอร์โฆษณานี้ที่มีขนาด 600x172 พิกเซล 
ขั้นตอนที่ 2 สร้างแถบนำทางใน Photoshop
ตอนนี้เราต้องสร้างแถบนำทาง ในตัวอย่างนี้ ฉันใช้เฉพาะข้อความเป็นปุ่ม แต่คุณสามารถสร้างปุ่มสีและเขียนข้อความลงไปได้ตามดุลยพินิจของคุณ เราทำสิ่งนี้ - สร้างสี่เหลี่ยมผืนผ้าขนาด 600x56 พิกเซลใน Photoshop และในกรณีนี้ให้เติมสีขาว จากนั้นเราเขียนรายการเมนูในบรรทัด - ประมาณ 5-6 รายการไม่มีอีกแล้ว จำนวนแต้มที่มากขึ้นจะดูถูกบีบ
ขั้นตอนที่ 3 สร้างแถบนำทางแบบกดใน Photoshop
ตอนนี้เราจำเป็นต้องสร้างลิงก์ที่ใช้งานได้เหมือนกับว่าลิงก์เหล่านั้นถูกคลิก ฉันใช้ขีดเส้นใต้ปกติ แต่คุณสามารถใช้ข้อความหรือสีพื้นหลังอื่นเพื่อทำเครื่องหมายลิงก์ที่เข้าชมได้
ขั้นตอนที่ 4 ตัดรูปภาพสำเร็จรูป
ในขั้นตอนนี้ เราต้องตัดรูปภาพจากขั้นตอนที่ 2 และขั้นตอนที่ 3 เราควรมีสองชุด แต่ละปุ่มมีห้าปุ่ม - หนึ่งปุ่มไม่มีการขีดเส้นใต้ และอีกปุ่มหนึ่งที่มีการขีดเส้นใต้ ปุ่มสำหรับแต่ละรายการ (มีและไม่มีขีดเส้นใต้) ควรมีขนาดเท่ากัน รูปภาพด้านล่างแสดงการออกแบบกราฟิกทั้งหมดของเรา - ปุ่มสิบปุ่มและส่วนหัวของเมนูหนึ่งรายการ 
ขั้นตอนที่ 5 สร้างหน้าเมนู VKontakte
ตอนนี้ไปที่ VKontakte หน้าที่ของเราคือสร้างหน้าแยกต่างหากที่เรียกว่า "เมนู" ในการทำเช่นนี้เราจะใช้รหัสต่อไปนี้
http://vk.com/pages?oid=-XXX&p=Page_Name
โดยที่แทนที่จะเป็น XXX เราจะแทนที่รหัสของกลุ่มของเราและเราจะเขียนเมนูแทนข้อความ "ชื่อเพจ" ตอนนี้เราต้องค้นหารหัสกลุ่ม วิธีการทำเช่นนี้? ไปที่หน้าหลักของกลุ่มและดูโพสต์ของเราบนกำแพง - ใต้บล็อก "เพิ่มโพสต์" จะมีข้อความ "โพสต์ทั้งหมด" - คลิกที่ลิงก์นี้ 
ขั้นตอนที่ 6 กำหนดรหัสกลุ่มและแก้ไขรหัส
เราไปที่หน้านั้นแล้วเห็น URL แบบนี้ https://vk.com/wall-78320145?own=1โดยที่ตัวเลข 78320145 ในตัวอย่างนี้คือรหัสกลุ่ม เราแทนที่ข้อมูลของเราลงในซอร์สโค้ดและได้รับบันทึกดังนี้:
http://vk.com/pages?oid=-78320145&p=Menu(พร้อมหมายเลขของคุณ!) วางบรรทัดนี้ลงในแถบที่อยู่ของเบราว์เซอร์แล้วกด Enter ดังนั้นเราจึงสร้างหน้า VKontakte ใหม่ และเริ่มแรกจะเป็นเช่นนี้ 
ขั้นตอนที่ 7 สร้างหน้าการนำทาง VKontakte ที่เหลือ
ในทำนองเดียวกัน เราสร้างหน้าการนำทางเพิ่มเติมอีกสี่หน้า: ราคา วิธีสั่งซื้อ ข้อมูลจำเพาะทางเทคนิค และคำถาม นั่นคือเราคัดลอกรหัสที่เกี่ยวข้องอีกสี่ครั้งลงในแถบที่อยู่ของเบราว์เซอร์ (หมายเลขของฉันคือหมายเลขประจำตัวของคุณในตัวอย่างด้านล่าง):
http://vk.com/pages?oid=-78320145&p=Prices
http://vk.com/pages?oid=-78320145&p=How_สั่งซื้อ
http://vk.com/pages?oid=-78320145&p=ข้อกำหนดทางเทคนิค
http://vk.com/pages?oid=-78320145&p=คำถาม
โปรดทราบว่าในชื่อหน้าแบบสองคำ (วิธีการสั่งซื้อ) การเว้นวรรคระหว่างคำจะถูกแทนที่ด้วยขีดเส้นใต้ลำดับ How_to ตอนนี้เรามีหน้าสำเร็จรูปห้าหน้าสำหรับแต่ละรายการเมนู เราไม่ได้สร้างหน้าผลงานเนื่องจากอยู่ในหน้าเมนู
ขั้นตอนที่ 8 อัพโหลดรูปภาพไปที่หน้าแรกของเมนู
บนเมนูที่สร้างและยังว่างเปล่า (ดูขั้นตอนที่ 6) ให้คลิกลิงก์แก้ไขหรือลิงก์เติมเนื้อหา หลังจากนี้เราจะเห็นแผงแก้ไข ที่นี่เราต้องคลิกที่ไอคอนกล้องด้วยฟังก์ชันอัพโหลดรูปภาพ สำคัญ! โปรดตรวจสอบให้แน่ใจว่าคุณอยู่ในโหมดมาร์กอัปวิกิ โหมดการสลับควบคุมโดยไอคอนที่ขอบด้านขวาของหน้า 
ขั้นตอนที่ 9 ผลลัพธ์หลังจากโหลดรูปภาพ
เราโหลดรูปภาพที่เราสร้างในขั้นตอนที่ 1 และขั้นตอนที่ 2 หลังจากโหลดแล้วเราจะเห็นโค้ดดังภาพด้านล่างและเมนูจะมีลักษณะดังนี้ หลังจากเปลี่ยนโค้ดแต่ละครั้ง อย่าลืมคลิกบันทึกเพจ จากนั้นคลิกดูตัวอย่างเพื่อดูผลลัพธ์ 
ขั้นตอนที่ 10 การแก้ไขโค้ดรูปภาพ
ตอนนี้งานของเราคือการแทนที่คุณสมบัติ noborder ทั้งหมดด้วยคุณสมบัติ nopadding และใส่มิติที่แท้จริงให้กับภาพแรก เนื่องจาก VKontakte ย่อขนาดภาพลงเหลือ 400 พิกเซลเมื่อทำการอัพโหลด หลังจากการเปลี่ยนแปลงทั้งหมดเราควรได้รับรหัสและเมนูต่อไปนี้ 
ขั้นตอนที่ 11 เพิ่มลิงก์ไปยังรูปภาพ
ตอนนี้เราต้องใส่ลิงค์สำหรับแต่ละภาพ ต้องแทรกลิงก์หลังจาก nopadding| แทนการเว้นวรรคก่อนวงเล็บปิด สำหรับรูปภาพแรก (ส่วนหัวเมนูจากขั้นตอนที่ 1) คุณสามารถให้ลิงก์ไปยังหน้าหลักของกลุ่ม หรือใช้คุณสมบัติ nolink (ใส่ผ่าน หลังจาก nopadding โดยไม่มีช่องว่าง) สำหรับการ์ดใบที่สอง ให้ใส่ที่อยู่ของหน้ารูปแบบ หน้า-78320145_49821289- นั่นคือ URL แบบเต็มของรูปภาพ https://vk.com/page-78320145_49821289ส่วนแรกที่มีโดเมนสามารถละเว้นได้ แต่สำหรับลิงก์ไปยังไซต์ภายนอก จะต้องระบุ URL ของลิงก์ให้ครบถ้วน 
ขั้นตอนที่ 12 คัดลอกโค้ดไปยังหน้าการนำทางที่เหลือ
ในขั้นตอนที่ค่อนข้างง่ายนี้ เราจะคัดลอกโค้ดสุดท้ายจากขั้นตอนก่อนหน้าและวางลงในหน้าที่เหลือที่สร้างขึ้น - ราคา วิธีสั่งซื้อ เงื่อนไขการอ้างอิง และคำถาม เราอยู่ในหน้าคลิกแก้ไขหรือเติมเนื้อหา (เราอยู่ในโหมดมาร์กอัป wiki) วางโค้ดแล้วคลิกบันทึก แล้วก็ในหน้าถัดไปด้วย นั่นคือตอนนี้เรามีห้าหน้าซึ่งแต่ละเมนูมีลักษณะเหมือนกันทุกประการ แต่คุณสามารถไปยังเมนูต่างๆ ได้แล้ว - เมื่อคุณคลิกลิงก์ เช่น ราคา เราจะย้ายไปที่หน้าราคา เป็นต้น
ขั้นตอนที่ 13 การสร้างเอฟเฟกต์ปุ่มกด
ตอนนี้เราต้องเปลี่ยนหนึ่งภาพในแต่ละห้าหน้า (แทนที่ปุ่มโดยไม่ขีดเส้นใต้ด้วยปุ่มที่มีการขีดเส้นใต้) ตัวอย่างเช่น ในหน้าแรกของเมนู เราจะโหลดรูปภาพใหม่ จากนั้นแทนที่ที่อยู่ของรูปภาพเก่าในโค้ดด้วยรูปภาพใหม่ (ขีดเส้นใต้สีแดง) จากนั้นเราไปที่หน้าราคา อัปโหลดรูปภาพที่ขีดเส้นใต้ราคา แล้วเปลี่ยนในโค้ดเป็นที่อยู่ของรูปภาพใหม่ จากนั้นเราไปที่หน้าวิธีการสั่งซื้อ เงื่อนไขการอ้างอิง และคำถาม และดำเนินการแบบเดียวกันในลักษณะเดียวกัน 
สุดท้าย.
ด้วยเหตุนี้ เราจึงได้รับเอฟเฟกต์การนำทางเมื่อคุณคลิกลิงก์เมนูและลิงก์เมนูจะเปิดใช้งาน แต่เนื่องจากการออกแบบกราฟิกในทุกหน้าเกือบจะเหมือนกัน ยกเว้นลิงก์ที่ใช้งานอยู่ จึงมีการสร้างภาพลวงตาของการนำทาง แม้ว่าในความเป็นจริงแล้วจะเป็นการเปลี่ยนไปยังหน้าอื่นก็ตาม
เมนูที่ออกแบบในลักษณะนี้ไม่ได้รับการดัดแปลงสำหรับอุปกรณ์มือถือ เมื่อขนาดหน้าจอลดลง รูปภาพต่างๆ จะเริ่มเลื่อนไปข้างใต้ ในการสร้างการออกแบบแบบตอบสนอง คุณต้องใช้ตารางเวอร์ชันเข้มงวด แต่นี่เป็นอีกเรื่องหนึ่งและเป็นเทคนิคขั้นสูงกว่า ในระหว่างนี้ ให้ดูตัวเลือกต่างๆ สำหรับการออกแบบเมนูกราฟิก 
ขอให้เป็นวันที่ดีผู้อ่านบล็อกของฉัน ในบทความนี้ฉันเปิดชุดสิ่งพิมพ์ในหัวข้อการออกแบบที่สวยงามของกลุ่ม VKontakte ตอนนี้เราจะทำงานเกี่ยวกับการสร้างเมนู จากนั้นเราจะไปยังการสร้างภาพเดียวที่มีสไตล์ และในท้ายที่สุด เราจะได้เรียนรู้วิธีทำให้ภาพสามารถคลิกได้
ในที่สุดคุณจะพบกับชุมชนที่มีลักษณะเช่นนี้ เมื่อคุณคลิกที่ปุ่มเปลี่ยน หน้าเพจที่มีสไตล์เพิ่มเติมจะเปิดขึ้นจริง ๆ
งานข้างหน้าไม่ได้ยากขนาดนั้น ผมจะอธิบายให้ละเอียดว่าต้องดำเนินการอย่างไร งานจะใช้เวลาไม่เกินสองสามชั่วโมง เรามาพูดถึงทุกอย่างตามลำดับ
1. การเตรียมงาน. เครื่องมือที่คุณไม่สามารถทำได้หากไม่มี
ดังนั้นก่อนที่ฉันจะเข้าสู่คำถามหลักและเราจะเริ่มดูวิธีสร้างเมนูในกลุ่ม VKontakte เรามาพูดถึงสิ่งที่คุณต้องการกันดีกว่า
1.1. โฟโต้ชอป
แน่นอนคุณสามารถทำได้โดยไม่ต้องใช้ Photoshop ดูวิดีโอนี้ซึ่งจะอธิบายรายละเอียดทุกอย่าง ถ้าคุณต้องการ. อย่างไรก็ตาม หากคุณไม่มีทักษะ ฉันขอแนะนำอย่างยิ่งให้คุณรบกวนอ่านสิ่งพิมพ์ทั้งสามของฉัน
หากคุณต้องการกลุ่มปกติ คุณไม่มีทางเลือกนอกจากต้องเรียนรู้ Photoshop คุณไม่สามารถไปไหนได้หากไม่มีภาพคุณภาพสูง ฉันสามารถแนะนำคุณได้ หลักสูตรโดย Zinaida Lukyanova - คุณจะคุ้นเคยกับอาชีพใหม่ของคุณอย่างรวดเร็วและไม่เบื่อและยังสามารถสร้างรายได้จากทักษะนักออกแบบของคุณอีกด้วย ความรู้พอ!
เอาล่ะเรามาทำต่อ มีทุกสิ่งที่คุณต้องการหรือไม่? จากนั้นคุณก็พร้อมที่จะก้าวต่อไป
2. การทำงานใน Photoshop หรือเมนูที่ต้องทำด้วยตัวเอง
ตอนนี้คุณสามารถเริ่มคำแนะนำทีละขั้นตอนในการสร้างเมนูได้แล้ว เปิด Photoshop จากนั้นภาพประกอบพร้อมเมนู ฉันหวังว่าจะไม่มีปัญหาใดๆ ที่มุมขวาบน เลือก "ไฟล์" จากนั้นเลือก "เปิด" เราค้นหาเอกสารบนคอมพิวเตอร์ อะไรต่อไป?
จำเป็นต้องตัดภาพออก เลือกเครื่องมือ "ตัด" อย่างที่คุณเห็น มันซ่อนอยู่ใต้ “เฟรม” เพียงคลิกและกดปุ่มซ้ายของเมาส์ค้างไว้สองสามวินาทีจนกระทั่งเมนูเพิ่มเติมปรากฏขึ้น
ตอนนี้ที่รูปภาพให้คลิกขวาแล้วค้นหา "แยกส่วน"
ในกรณีนี้ ผมจะแบ่งภาพออกเป็น 4 ส่วน ทำไมจึงเป็นเช่นนี้? ปุ่มใด ๆ บนอินเทอร์เน็ตคือรูปภาพที่กำหนดรหัสเฉพาะ คุณชี้ลูกศรไปที่ส่วนของภาพประกอบที่ต้องการ และเบราว์เซอร์ของคุณจะส่งข้อมูลไปยังคอมพิวเตอร์: “เจ้าหนู มีคุณสมบัติเพิ่มเติมที่นี่”
บางครั้งภาพทั้งหมดก็เปลี่ยนไป ตัวอย่างเช่นปุ่มที่จมเมื่อกดเป็นเพียงภาพที่สองไม่มีภาพเคลื่อนไหวอยู่ที่นั่น
ในกรณีของฉัน รูปภาพหนึ่งภาพจะต้องแบ่งออกเป็นหลายส่วน และแต่ละภาพจะต้องได้รับมอบหมายการกระทำของตัวเอง บางแห่งคือลิงก์ไปยังรายการผลิตภัณฑ์ บางแห่งคือลิงก์ไปยังเว็บไซต์ นอกจากนี้ยังมีส่วนหนึ่งของรูปภาพที่มีป้ายกำกับว่า "เมนู" ไม่ควรเกิดอะไรขึ้นเมื่อวางเมาส์ไว้
ในทางที่ดีผมควรจะเน้น 5 ส่วนเพื่อแยกปุ่มให้เท่าๆ กัน แต่ผมหาเหตุผลมาบอกตัวเองว่าถ้าคนพลาดเขาจะยังทำสิ่งที่ต้องการและถ้ากดถูกเขาจะไม่รู้ อะไรก็ตาม.
การสร้างหมวดหมู่เพิ่มเติมหรือจัดเรียงเป็นสองคอลัมน์ก็ไม่ใช่ปัญหา หากคุณเข้าใจข้อมูลพื้นฐาน คุณสามารถจัดการทุกอย่างได้
ฉันย้ายเส้นเพื่อให้เรียบขึ้น ไม่ยากครับ ใช้เคอร์เซอร์ก็ได้
ตรวจสอบให้แน่ใจว่ารูปภาพได้รับการบันทึกเป็น jpeg (หมวดหมู่บนสุดทางด้านขวา) จากนั้นคลิก "บันทึก"
นั่นคือทั้งหมดที่
เราทำเสร็จแล้ว ตอนนี้เราสามารถไปยังกลุ่มและทำงานกับโค้ดได้แล้ว
3. เลย์เอาต์ใน VK สำหรับหุ่นจำลอง
ฉันเคยคิดว่ามาร์กอัปวิกิใช้ได้กับชุมชนเท่านั้น ฉันไม่รู้ว่ามีอะไรเปลี่ยนแปลงไปหรือเป็นเช่นนี้มาตลอด แต่ตอนนี้ไม่สำคัญเลยไม่ว่าคุณจะสร้างกลุ่มหรือเพจสาธารณะ เพจสามารถทำได้ทั้งที่นี่และที่นั่น
สิ่งที่เหลืออยู่คือเรื่องเล็ก ๆ น้อย ๆ ของการจัดวาง เปิด "รายการหน้า Wiki"
และเพิ่มอันใหม่
ตั้งชื่อให้มันสิ ในกรณีของเราคือเมนู
และดำเนินการแก้ไขต่อไป
ขั้นตอนแรกคือการเพิ่มทุกส่วนของรูปภาพของเรา
กำลังโหลด.
ทำสิ่งนี้จากโฟลเดอร์จากล่างขึ้นบนของรายการ จากอันสุดท้าย (อันสุดท้ายในกรณีของฉัน "เขียนถึงผู้ดูแลระบบ") ไปจนถึงอันบนสุด ("เมนู") ทุกอย่างจะพอดีอย่างถูกต้องแม้ว่าจะไม่ใช่เรื่องยากที่จะลากชิ้นส่วนด้วยเมาส์ก็ตาม แล้วแต่สะดวกสำหรับคุณ
ตอนนี้เราจำเป็นต้องลบการเยื้องและสร้างลิงก์ส่วนต่างๆ และในบางสถานที่ก็ลบความสามารถในการคลิกออกโดยสิ้นเชิง มาเปลี่ยนเป็นโหมดโค้ดกันเถอะ
แท็ก "กึ่งกลาง" ระบุว่าภาพถ่ายและชิ้นส่วนต่างๆ ของภาพนั้นอยู่ตรงกลาง ฉันจะลบออกเพื่อให้คุณรับรู้ข้อมูลได้ง่ายขึ้น
หากต้องการ คุณสามารถทำเช่นเดียวกันได้ แต่โปรดจำไว้ว่าภาพประกอบจะเลื่อนไปทางขวา
เรากลับไปที่โค้ดอีกครั้งเพื่อลบการเยื้องระหว่างส่วนของภาพวาด
หากต้องการทำให้รูปภาพเป็นหนึ่งเดียวอีกครั้งหลังจากปรับขนาด ให้ใส่เครื่องหมายอัฒภาคแล้วเขียนแท็ก nopadding (;nopadding)
มันจะมีลักษณะเช่นนี้
โดยปกติแล้ว ไม่ควรมีการเยื้องหลังแต่ละส่วน ดังนั้นแท็กจึงต้องทำซ้ำ
ตอนนี้ภาพประกอบดูเป็นหนึ่งเดียว หากไม่ได้ผล ให้ตรวจสอบว่าสะกดคำถูกต้องหรือไม่ และใส่เครื่องหมายอัฒภาค ลบช่องว่างตามที่จำเป็นเพื่อให้เป็นไปตามตัวอย่างของฉัน ทุกรายละเอียดเล็กๆ น้อยๆ มีความสำคัญต่อผลลัพธ์
ตอนนี้เมื่อคุณคลิกที่ส่วนต่างๆ ของรูปภาพ ส่วนต่างๆ เหล่านั้นจะเปิดขึ้นในหน้าต่างใหม่
เพื่อป้องกันไม่ให้สิ่งนี้เกิดขึ้น คุณจะต้องมีแท็กอื่น โนลิงค์. อย่าลืมเครื่องหมายอัฒภาค
จะไม่มีการเปลี่ยนแปลงเฉพาะในภาพแรก แต่คุณสามารถแทนที่ URL ของคุณเองสำหรับส่วนที่เหลือได้
คุณสามารถเปลี่ยนเส้นทางผู้อ่านไปยังหน้าวิกิ โพสต์ บล็อก และเครือข่ายโซเชียลอื่นๆ ได้ ตอนนี้การทำเช่นนี้ไม่ใช่เรื่องยาก คุณสามารถทำทุกอย่างได้ สิ่งที่เหลืออยู่คือการบันทึก
เมนูของเราก็จะประมาณนี้ครับ
และนี่คือลิงค์ที่ต้องการ
4. ขั้นตอนสุดท้ายของการลงทะเบียน
ในที่สุดก็ถึงเวลาตัดสินใจว่าคุณจะมีเพจสาธารณะหรือกลุ่ม กลยุทธ์ในอนาคตขึ้นอยู่กับสิ่งนี้
หากคุณไม่ทราบว่าคุณมีอะไรบ้าง ให้ไปที่ส่วนการจัดการจากหมวดหมู่ "กลุ่มของฉัน"
ถ้าอยากทำแบบที่ผมทำแล้วเอามาใส่ในเมนูก็ไปต่อที่ส่วนที่สองแล้วเราจะออกแบบให้สวยงามต่อสาธารณชนต่อไป ผลลัพธ์จะออกมาประมาณนี้
ฉันไม่ชอบทำเมนูเป็นแค่ภาพสเตตัส แต่บางคนก็อยากได้แบบนั้น ฉันไม่มีสิทธิ์วิพากษ์วิจารณ์ใคร และถ้าคุณมีกลุ่ม คุณก็สามารถตระหนักถึงงานของคุณได้
5. คำแนะนำวิดีโอ
ชมวิดีโอ เราได้ทำงานหลักทั้งหมดเรียบร้อยแล้ว เหลือเพียงเรื่องเล็กๆ น้อยๆ เท่านั้น
6. วิธีอื่นสำหรับ Dummies ในราคา 100 รูเบิล
หากคุณมีปัญหาในการสร้างเมนูด้วยตัวเอง อย่าลังเลที่จะใช้บริการนี้ - VkMenu.ru โดยที่ราคาเพียง 100 รูเบิล (วันนี้เป็นแบบนี้) คุณสามารถสร้างเมนูผ่านตัวสร้างออนไลน์ได้
ในความคิดของฉัน มันเป็นทางเลือกที่ยอดเยี่ยมสำหรับการทำงานด้วยตนเอง และสาปแช่งทุกคนและทุกสิ่งหากไม่มีมาร์กอัปวิกิ
ด้วยเหตุนี้ฉันจึงบอกลาแต่ไม่นาน พักสักหน่อยแล้วไปยังส่วนถัดไป
สมัครสมาชิกของฉัน กลุ่ม VKontakte - ขอให้สนุกและพบกันเร็ว ๆ นี้!
สวัสดีเพื่อน ๆ ที่รักและแขกบล็อก วันนี้เราจะพูดถึงการสร้างเมนูใน VK และวิธีทำในการออกแบบใหม่ของโซเชียลเน็ตเวิร์ก มีการเปลี่ยนแปลงที่สำคัญมากที่คุณต้องระวัง เพราะหากเมนูได้รับการออกแบบแบบเก่าซึ่งฉันเขียนไว้ รูปภาพอาจดูไม่ชัดเจน
เมนูกลุ่ม VKontakte- นี่คือใบหน้าของเธอ นี่คือสิ่งที่ผู้ใช้เห็นเมื่อเข้าสู่ชุมชนเป็นครั้งแรก และการที่ทุกสิ่งได้รับการออกแบบให้เข้าถึงได้และน่าดึงดูดเพียงใด เป็นตัวกำหนดว่าเขาจะกลายเป็นสมาชิกถาวรของกลุ่มหรือไม่
สำคัญ: หลังจากเปลี่ยนการออกแบบทั่วไปใน VK ขนาดรูปภาพสำหรับเมนูบนโซเชียลเน็ตเวิร์กก็เปลี่ยนไปเช่นกัน ตรวจสอบงานของคุณและทำการเปลี่ยนแปลงในกลุ่มที่กล่าวถึงด้านล่าง
ประเภทของเมนูและคุณสมบัติต่างๆ
ขั้นตอนแรกในการสร้างชุมชนคือการตัดสินใจเกี่ยวกับเป้าหมายหลัก การออกแบบเมนูในอนาคตและคุณสมบัติการทำงานของมันขึ้นอยู่กับสิ่งนี้
เมนูอาจเป็น: ขึ้นอยู่กับเป้าหมายของกลุ่ม:
- สำหรับแพลตฟอร์มข้อมูล
- ;
- สำหรับสถานที่ฝึกอบรม
ส่วนหลักเกี่ยวข้องกับข้อมูล เหล่านี้เป็นชุมชนที่ผู้ใช้ได้รับเนื้อหาความบันเทิงหรือการศึกษาบางประเภท สำหรับกลุ่มดังกล่าว ควรใช้เมนูที่แสดงหัวข้อหลัก ดังนั้น สาธารณชนทั่วไปจึงสร้างหัวข้อต่างๆ ได้แก่ ข่าว สิ่งพิมพ์ล่าสุด สิ่งพิมพ์ยอดนิยม รวมถึงหัวข้อเฉพาะเกี่ยวกับหัวข้อของกลุ่ม
เมนูสำหรับการซื้อขายและบุคคลทั่วไปด้านการศึกษาอาจจะคล้ายกัน เป้าหมายของทั้งสองอย่างคือการช่วยให้ผู้ใช้นำทางสินค้าหรือบริการต่างๆ ตามกฎแล้วเมนูสำหรับการขายจะรวมถึงส่วนต่างๆ เช่น แคตตาล็อกผลิตภัณฑ์ การชำระเงิน การจัดส่ง โปรโมชั่น และส่วนลด และสำหรับการฝึกอบรมอาจจำกัดอยู่เพียงส่วนที่อธิบายบริการ เนื่องจากสิ่งสำคัญที่นี่คือที่ผู้ใช้ค้นหาโปรแกรมการฝึกอบรมหรือ วัสดุที่เขาต้องการ
วิธีสร้างเมนูในกลุ่ม VKontakte: คำแนะนำทีละขั้นตอน
กระบวนการทั้งหมดสามารถแบ่งออกเป็น 2 ขั้นตอน:
- ทำงานใน Photoshop;
- การเพิ่มส่วนและรูปภาพในกลุ่มนั้นเอง
หากต้องการตอบคำถามเกี่ยวกับวิธีสร้างเมนูในกลุ่ม VKontakte อย่างถูกต้องคุณควรจินตนาการถึงการออกแบบในอนาคตด้วยทุกส่วนด้วยสายตาจากนั้นในกระบวนการนี้คุณสามารถเพิ่มรายการที่ยังอยู่ในใจได้
ในระยะแรก จะมีการสร้างอวตารของกลุ่มและรูปภาพสำหรับเมนู รูปภาพเดียวสำหรับทั้งอวตารและเมนูจะดูกลมกลืนกันมากขึ้น
การเลือกหรือการสร้างอวตารควรได้รับการพิจารณาอย่างจริงจัง เนื่องจากผู้ใช้จำนวนมากให้ความสนใจเป็นพิเศษ คุณสามารถค้นหารูปภาพที่เหมาะสมบนอินเทอร์เน็ตและเพิ่มคำจารึกหรือองค์ประกอบบางอย่างลงใน Photoshop หรือคุณสามารถสร้างภาพที่ไม่ซ้ำใครได้ด้วยตัวเอง
เนื่องจากเราจำเป็นต้องสร้างเมนูแบบเลื่อนลงด้วย เราจึงมองหาหรือสร้างรูปภาพที่เหมาะกับธีมของกลุ่มมากที่สุดหรือเพียงแค่ใช้พื้นหลังที่สวยงาม การทำงานกับรูปภาพจะเกิดขึ้นใน Adobe Photoshop เนื่องจากฟังก์ชันการทำงานของโปรแกรมแก้ไขภาพทั่วไปไม่เพียงพอสำหรับการดำเนินการที่จำเป็นทั้งหมด ขนาดทั้งหมดถูกกำหนดโดยโซเชียลเน็ตเวิร์ก VKontakte และการเบี่ยงเบนที่สำคัญขึ้นหรือลงจะนำไปสู่ความจริงที่ว่าอวตารจะไม่โหลดเลยหรือจะไม่เป็นหนึ่งเดียวกับเมนู
อัลกอริทึมของการกระทำ:
- เปิด Photoshop แล้วไปที่ "ไฟล์" - "สร้าง" และตั้งค่าความกว้างและความสูง: 760X500 ตามลำดับ
- เลือกเครื่องมือ "ตัด" จากนั้นเลือก "แยกส่วน" แบ่งภาพออกเป็น 3 ส่วนตามแนวนอน สำหรับส่วนจากขอบซ้ายหรือขวาในหน้าต่างแบบเลื่อนลง (ขึ้นอยู่กับส่วนที่คุณต้องการเห็นบนอวตาร) ให้เขียนค่าความกว้างและความสูง – 200XX และ Y) – 560 และ 0 นี่จะเป็น อวตารของกลุ่ม
- สำหรับส่วนถัดไป ให้ตั้งค่าความกว้างและความสูงเป็น 50X500 และเขียน 510 และ 0 ในพิกัด นี่คือช่องว่างระหว่างอวตารของกลุ่มและเมนู ส่วนนี้จะไม่จำเป็นในภายหลัง
- อีกครั้ง เลือก "แยกส่วน" และแบ่งแนวตั้งออกเป็น 2 ส่วน สำหรับส่วนที่อยู่ด้านบน เราตั้งค่าต่อไปนี้: ความกว้าง – 510, ความสูง – 182, พิกัด – 0 นี่คือช่องว่างด้านบนเมนู ส่วนนี้จะไม่ปรากฏในกลุ่มด้วย
- ตอนนี้เราคัดลอกรูปภาพที่เลือกหรือสร้างขึ้นไปยังวัตถุที่สร้างและแบ่งออก หากปุ่มลัด CTRL+V ไม่ทำงาน เพียงเปิดตำแหน่งบนคอมพิวเตอร์ของคุณที่บันทึกรูปภาพแล้วลากลงใน Photoshop
- เราแบ่งพื้นที่ที่เหลือในแนวตั้งออกเป็นหลายส่วนตามส่วนต่างๆ ในเมนู คุณไม่จำเป็นต้องตั้งค่าสำหรับพวกเขา
เราเขียนชื่อของแต่ละส่วน
- ขั้นตอนสุดท้ายคือการบันทึกภาพ คุณต้องบันทึกรูปภาพดังนี้: ไฟล์ – บันทึกสำหรับเว็บ วิธีนี้เหมาะสำหรับ Photoshop เวอร์ชันใหม่กว่า หากไม่มี "บันทึกสำหรับเว็บ" ในส่วน "ไฟล์" เราจะดำเนินการดังนี้:
ไปที่รายการ "ไฟล์" เลือก "ส่งออก" - "บันทึกสำหรับเว็บ" เราปล่อยให้พารามิเตอร์ทั้งหมดเหมือนเดิม คลิก "บันทึก" อีกครั้ง
เลือกโฟลเดอร์บนคอมพิวเตอร์ของคุณและบันทึกภาพที่นั่น พวกเขาควรจะมีลักษณะเช่นนี้:
ตอนนี้เรามาดูขั้นตอนที่สองเพื่อดูว่าจะสร้างเมนูในกลุ่ม VKontakte ได้อย่างไร - การเพิ่มเมนูสู่สาธารณะโดยตรง เมื่อต้องการทำสิ่งนี้:
- ก่อนอื่น คุณต้องเชื่อมต่อสื่อการสอน เนื่องจากนี่เป็นวิธีเดียวที่จะเพิ่มส่วนต่างๆ ในหน้าหลักได้ หากต้องการทำสิ่งนี้ ให้ไปที่การจัดการชุมชนและที่ด้านล่างสุดของหน้า ให้เลือก "วัสดุ" จากนั้นเลือก "เปิด" บันทึกการเปลี่ยนแปลง
- เราอัพโหลดรูปภาพทั้งหมดเข้ากลุ่ม ยกเว้นอวตารและส่วนที่ไม่จำเป็น เพื่อให้รูปภาพแสดงบนหน้าหลัก คุณต้องกลับไปที่การจัดการชุมชนและคลิกตรงข้ามกับแท็บ "รูปภาพ" - "เปิด"
- กำลังอัพโหลดรูปประจำตัว
- ขั้นตอนต่อไปคือการเปิดใช้งานโหมดมาร์กอัปวิกิ คุณสามารถทำได้โดยคลิกไอคอนรูปข้าวหลามตัดทางด้านขวาของหน้าในส่วน "แก้ไข"
- ที่นี่เราใส่รหัสมาร์กอัป: [] โดยที่ [] คือลิงก์ไปยังส่วนหรือหน้าที่คุณจะไปโดยคลิกที่รูปภาพ คุณสามารถเพิ่มทั้งสองลิงก์ไปยังส่วนต่างๆ ใน VKontakte และแหล่งข้อมูลภายนอกได้
- รหัสนี้จะถูกทำซ้ำหลายครั้งตามส่วนต่างๆ ในเมนู ในแต่ละครั้งที่มีการแทรกลิงก์
หากต้องการ เรายังเปลี่ยนแท็บ "ข่าวล่าสุด" เช่น เป็น "เมนู"
- คลิก "บันทึกหน้า" กลับไปที่ส่วนหลักของกลุ่มและอัปเดตหน้า เมนูจะปิดตามค่าเริ่มต้น แต่ผู้ใช้เมื่อคลิกที่ชื่อที่เกี่ยวข้องจะสามารถเปิดส่วนต่างๆ และเลื่อนดูส่วนต่างๆ ได้
เสร็จสิ้นกระบวนการทั้งหมด แต่คุณควรตรวจสอบอย่างแน่นอนว่าลิงก์ใช้งานได้หรือไม่และขอบของรูปภาพตรงกันหรือไม่
บริการสร้างเมนูกลุ่ม
หากคุณยังคงไม่เข้าใจวิธีสร้างเมนูในกลุ่ม VKontakte และคำแนะนำทีละขั้นตอนไม่ได้ช่วยคุณคุณสามารถใช้บริการพิเศษที่จะสร้างและเพิ่มความสวยงามได้
เมนูที่ออกแบบสำหรับกลุ่ม
หนึ่งในบริการยอดนิยมคือ MenuMake หลังจากส่งใบสมัครแล้วออเดอร์จะพร้อมภายใน 5 นาที จากนั้นหากต้องการเมนูก็จะถูกเพิ่มเข้ากลุ่ม ในขณะเดียวกัน ความปรารถนาทั้งหมดของลูกค้าเกี่ยวกับการออกแบบและจำนวนส่วนต่างๆ จะถูกนำมาพิจารณาด้วย
ขอแสดงความนับถือ Galiulin Ruslan
มีการใช้มากขึ้นในการดำเนินธุรกิจ ขายสินค้าหรือบริการ เครื่องมือที่ยอดเยี่ยมที่ช่วยให้การทำงานกับกลุ่มง่ายขึ้นคือเมนูที่สร้างขึ้นโดยใช้มาร์กอัป wiki
เมื่อเร็ว ๆ นี้ จำนวนไซต์สาธารณะที่ใช้รายการ wiki เพิ่มขึ้นอย่างมาก ท้ายที่สุด นี่เป็นวิธีที่ดีเยี่ยมในการทำให้กลุ่มมีรูปลักษณ์ที่น่าพึงพอใจและสวยงามยิ่งขึ้น และยังช่วยให้ผู้เข้าร่วมสำรวจทุกส่วนได้ง่ายขึ้น
ในบทความนี้เราจะบอกวิธีสร้างหน้าวิกิ VKontakte สำหรับกลุ่ม วิธีสร้างเมนูในกลุ่ม VK มีประเภทใดบ้าง วิธีสร้างมันและอีกมากมาย
การสร้างหน้าวิกิที่คลิกได้นั้นเป็นไปได้เนื่องจากตัวแก้ไขข้อความ VK มีความสามารถในการใช้มาร์กอัปวิกิ ช่วยให้คุณสามารถแทรกรูปภาพ ลิงก์ไปยังวิดีโอและองค์ประกอบอื่น ๆ โดยใช้คำสั่งพิเศษ
รายการนี้ช่วยให้คุณสร้างลิงก์โดยตรงไปยังผลิตภัณฑ์/บริการแต่ละหมวดหมู่ หรือไปยังส่วน/การสนทนาต่างๆ ของชุมชน (เช่น ผลงาน วิธีสั่งซื้อ เกี่ยวกับบริษัท ฯลฯ) ผู้ใช้ทุกคนสามารถค้นหาข้อมูลที่จำเป็นได้ด้วยการกดเพียงปุ่มเดียว
โซลูชันนี้เป็นเครื่องมือนำทางสำหรับผู้มาเยือนทั่วไปและทำหน้าที่เป็นการออกแบบที่สวยงามและมีสไตล์สำหรับชุมชน นี่คือเครื่องมือแบบโต้ตอบที่ใช้ซึ่ง ผู้คนจะพึงพอใจ.
น่าเสียดายที่นักพัฒนา VK ยังไม่ได้สร้างความสามารถในการโพสต์รายการวิกิบนหน้าวิกิหลักของสาธารณะ (สำหรับตอนนี้มีให้บริการในแท็บใหม่เท่านั้น) ดังนั้นผู้คนจึงถูกบังคับให้ซับซ้อนและสร้างโพสต์แยกต่างหากที่นำไปสู่หน้าเมนู
คำสั่งพื้นฐานและคุณสมบัติต่างๆ ของเมนูวิกิ
ฟังก์ชันการทำงานของหน้าวิกินั้นกว้างมาก ด้วยความช่วยเหลือนี้ คุณสามารถทำให้เมนูของคุณดูน่ารับประทาน อ่านง่าย และมีโครงสร้าง
น่าเสียดายที่เราไม่สามารถรวมทีมทั้งหมดเข้ากับเนื้อหาของเราได้ ดังนั้นเราจะพูดถึงเพียงบางส่วนเท่านั้น
การสร้างเมนูโดยใช้ไฟล์มีเดีย
ทำได้โดยใช้ปุ่มพิเศษ
ในรูปแบบข้อความ ไฟล์สื่อคือ: []
โดยที่สื่อ XXXX_YYYY คือไฟล์สื่อ ตัวเลือกคือการตั้งค่าต่างๆ (สำหรับภาพถ่ายและวิดีโอ) ลิงก์คือคำจารึกที่จะแสดงเมื่อคุณวางเมาส์เหนือภาพถ่าย/วิดีโอ
สำหรับตัวเลือกภาพถ่ายมีดังนี้:
สำหรับวิดีโอ:
เราสร้างส่วนหัวของระดับต่างๆ โดยใช้เครื่องหมาย ==
เพิ่มเครื่องหมาย "==" ที่จุดเริ่มต้นและจุดสิ้นสุดของชื่อเรื่อง ดูภาพหน้าจอเพื่อดูตัวอย่าง:
การทำงานกับข้อความหัวเรื่องเพื่อออกแบบเมนูกลุ่ม VKontakte
คุณยังสามารถใช้ตัวเลือกข้อความต่อไปนี้: ตัวเอียง ตัวหนาหรือสีเทา ขีดทับหรือขีดเส้นใต้ ตัวยกหรือตัวห้อย นอกจากนี้ยังสามารถจัดแนวข้อความให้อยู่กึ่งกลางหรือขวาได้อีกด้วย ด้านล่างเป็นตารางพร้อมคำสั่ง:
การใช้คำพูดเพื่อดึงดูดความสนใจ
การใช้แท็กจะช่วยให้คุณสามารถออกแบบคำพูดของใครบางคนได้อย่างสวยงาม
รายการอาจเป็นตัวเลขหรือสัญลักษณ์แสดงหัวข้อย่อยก็ได้
สำหรับรายการลำดับเลข ให้ใช้สัญลักษณ์ "#" หน้ารายการใหม่แต่ละรายการ
สำหรับรายการสัญลักษณ์แสดงหัวข้อย่อย คล้ายกับรายการก่อนหน้า เฉพาะที่มีเครื่องหมาย “*” เท่านั้น
การทำงานกับการเยื้อง
หากต้องการเยื้อง ให้เพิ่มเครื่องหมาย “:” หน้าคำ การเยื้องจะเพิ่มขึ้นหรือลดลง ขึ้นอยู่กับจำนวนอักขระ
ลิงค์ภายในในเมนูกลุ่ม
สิ่งเหล่านี้คือลิงก์ไปยังแหล่งข้อมูลโซเชียลภายใน เครือข่าย VKontakte (ลิงก์ไปยังบุคคล ชุมชน การสนทนา แอปพลิเคชัน เพจ วิดีโอ และรูปภาพ) เพิ่มโดยใช้โครงสร้างต่อไปนี้: []
ลิงก์ภายนอกในการสร้างเมนู VKontakte
มาร์กอัป Wiki สร้างเมนูตาราง
การใช้หน้าวิกิและมาร์กอัป คุณสามารถสร้างตารางได้ ดูภาพหน้าจอ:
สปอยเลอร์ข้อมูล
ด้วยความช่วยเหลือนี้ คุณสามารถซ่อนหรือเปิดเผยข้อมูลได้ด้วยคลิกเดียว เหมาะอย่างยิ่งหากคุณต้องการสร้างส่วนที่มี “คำถามที่พบบ่อย”
สปอยเลอร์ถูกสร้างขึ้นโดยใช้การออกแบบ:
((Hider|ชื่อสปอยล์
ข้อความ
}}
และมันจะมีลักษณะเช่นนี้:
ดังนั้นทีมงานจะช่วยจัดทำรายการองค์ประกอบการออกแบบทั้งหมดให้ครบถ้วน
ประเภทของเมนู: คืออะไร?
หน้า Wiki บน VKontakte สามารถแบ่งตามเกณฑ์ต่างๆ:
- ข้อความ (ข้อความเท่านั้น);
- กราฟิก (การใช้รูปภาพของปุ่ม พื้นหลัง ฯลฯ).
โดยการแสดงผล (ขึ้นอยู่กับภาพที่ใช้):
- ซี ครอบคลุม (มองไม่เห็นโครงสร้าง);
- เปิด (มองเห็นรายการทั้งหมดพร้อมกัน);
- มีแบนเนอร์ที่อยู่ติดกันหรือแบนเนอร์ทั่วไป (อาจเป็นแบบเปิดหรือปิดก็ได้)
ไม่ว่าคุณจะเลือกประเภทใดก็ตาม ทั้งหมดทำงานบนหลักการเดียวกัน
นอกจากนี้อย่ากลัวที่จะรวมประเภทเหล่านี้เข้าด้วยกัน ตัวอย่างเช่น ขั้นแรกคุณสามารถสร้างส่วนกราฟิกด้วยปุ่ม (พื้นหลัง สไตล์ การออกแบบ) จากนั้นเสริมด้วยข้อมูลข้อความต่างๆ (เช่น “คำถามที่พบบ่อย” โดยใช้สปอยเลอร์)
วิธีสร้างเมนูข้อความ
รายการข้อความบนหน้าวิกิเป็นที่นิยมน้อยกว่าและง่ายกว่า ไม่มีรูปภาพหรือปุ่มใด ๆ นี่เป็นเพียงรายการลิงก์จุดยึด
ด้านล่างนี้เป็นคำแนะนำทีละขั้นตอนเกี่ยวกับวิธีสร้างรายการข้อความสำหรับกลุ่ม VK:
- ก่อนอื่นคุณต้องสร้างชุมชน ในการดำเนินการนี้ ไปที่ "การจัดการชุมชน" และเลือกส่วน "ส่วน" ค้นหาบรรทัด "วัสดุ" เลือก "จำกัด" และบันทึกการตั้งค่า
- ถัดไป “ข่าวล่าสุด” จะปรากฏบนหน้าหลักของสาธารณชน ไปที่พวกเขาแล้วคลิก "แก้ไข"
- ป้อนชื่อ
- ด้านล่างนี้คือโปรแกรมแก้ไขข้อความ VK นี่คือที่ที่เราจะสร้างรายการของเรา
- ใช้โครงสร้างต่อไปนี้:
ทำตามขั้นตอนที่จำเป็นทั้งหมด แต่ละรายการใหม่อยู่ในบรรทัดใหม่ คุณสามารถใช้คำสั่งต่างๆ ที่เราพูดถึงข้างต้นได้ที่นี่
ตัวอย่างเช่น เราจะเขียนโครงสร้างที่เรียบง่ายและเล็ก:
- คลิกบันทึก
ที่นี่เราใช้เครื่องหมาย “==” เพื่อเน้นหัวข้อ และใช้เครื่องหมาย “*” เพื่อเน้นส่วนย่อย เป็นผลให้เราได้รับสิ่งต่อไปนี้:
ดังนั้นเมื่อเสร็จสิ้นเพียงไม่กี่ขั้นตอนเราจึงได้รับเมนูวิกิที่เข้าใจได้อย่างสมบูรณ์ซึ่งแต่ละรายการจะช่วยให้คุณสามารถไปที่หน้าที่ต้องการได้อย่างรวดเร็ว
คุณสามารถเพิ่มสิ่งที่คุณต้องการได้ ตราบใดที่จินตนาการและความสามารถในการมาร์กอัปวิกิของคุณเพียงพอ
วิธีสร้างเมนูแบบกราฟิก
หากต้องการสร้างเมนูกราฟิก คุณต้องมีทักษะพื้นฐานอย่างน้อยในการทำงานกับโปรแกรมแก้ไขกราฟิก (เช่น Photoshop, GIMP, แอปพลิเคชันต่างๆ เป็นต้น) หากคุณไม่มี เราขอแนะนำให้ใช้ความช่วยเหลือจากผู้เชี่ยวชาญหรือแหล่งข้อมูลที่มีเทมเพลตสำเร็จรูป (อ่านเพิ่มเติมด้านล่าง)
ที่นี่เราจะพูดถึงวิธีสร้างเมนูหน้าวิกิด้วยตัวเอง ด้านล่างนี้เป็นคำแนะนำทีละขั้นตอน:
- ทำตามขั้นตอนที่ 1-3 จากคำแนะนำก่อนหน้านี้
- จำเป็นต้องสร้างภาพเปล่าพร้อมปุ่มต่างๆ เราจะไม่พูดถึงรายละเอียดเกี่ยวกับการทำงานในโปรแกรมแก้ไขกราฟิกเนื่องจากมีบทเรียนมากมายเกี่ยวกับการทำงานกับ Photoshop และโปรแกรมอื่น ๆ บนอินเทอร์เน็ต
เราจะนำภาพต่อไปนี้
ทั้งสามภาพเป็นส่วนหนึ่งของภาพใหญ่ภาพเดียว ดังนั้นเมื่อเราสร้างการนำทาง รูปภาพเหล่านี้จะมีลักษณะเป็นภาพเดียวโดยมีปุ่มอยู่
- อัปโหลดรูปภาพไปยังโปรแกรมแก้ไขข้อความ VKontakte
- เมื่อคลิกที่ภาพแต่ละภาพ คุณจะเลือกตัวเลือกและระบุลิงก์ได้
- ทางด้านขวาจะมีการสลับระหว่างโหมดแก้ไขภาพและข้อความ
- ในรูปแบบข้อความ รูปภาพของเรามีลักษณะดังนี้:
- เราเปลี่ยนคำจารึก "noborder" เป็น "nopadding" เพื่อลบระยะห่างระหว่างรูปภาพและปิดเข้าด้วยกัน และหลังเครื่องหมาย “|” เพิ่มลิงค์
- คลิก "บันทึกหน้า"
เลยได้เมนูนี้มา:
ด้วยความพยายามและความเฉลียวฉลาดเพียงเล็กน้อย คุณสามารถสร้างการออกแบบดั้งเดิมที่เหมาะกับการออกแบบโดยรวมของกลุ่มได้
วิธีการรักษาความปลอดภัย
เพื่อให้เมนูวิกิที่สร้างขึ้นถูกแสดงบนเพจหลักของชุมชน คุณต้องทำตามขั้นตอนต่อไปนี้:
- สร้างโพสต์ใหม่
- คัดลอกลิงค์เมนูของคุณ ในการดำเนินการนี้ ให้ไปที่แก้ไขอีกครั้งและคัดลอก URL จากแถบที่อยู่ของเบราว์เซอร์
ขั้นแรกให้เพิ่มรูปภาพ ดูภาพด้านล่าง 
ตอนนี้เผยแพร่และปักหมุดโพสต์
ที่นี่คุณจะต้องทำงานหนักกับภาพ ท้ายที่สุดมันจะถูกมองเห็นได้อย่างต่อเนื่องและควรเข้ากับการออกแบบโดยรวมของสาธารณชนและบอกผู้ใช้ว่าเมื่อคลิกพวกเขาจะถูกนำไปที่เมนู
วิธีการถอดออก
การลบเมนูวิกิไม่ใช่เรื่องยาก เพียงไปที่ส่วน "การจัดการชุมชน", "ส่วน" และปิดเนื้อหา
สิ่งสำคัญคือต้องจำไว้ว่าหากคุณใช้โพสต์ที่ปักหมุด โพสต์นั้นก็จะยังคงอยู่ ดังนั้นจึงจำเป็นต้องลบออกด้วย (หรืออย่างน้อยก็ลบออกจากรายการที่ปักหมุดไว้)
เทมเพลตสำเร็จรูป
นอกจากนี้เรายังต้องการนำเสนอบริการความสนใจของคุณซึ่งจะช่วยให้คุณดาวน์โหลดเทมเพลตสำเร็จรูปหรือสร้างเทมเพลตใหม่ได้ด้วยการคลิกเพียงไม่กี่ครั้ง
- You-ps.ru เป็นบริการที่มีเทมเพลตเมนูวิกิสำเร็จรูปและองค์ประกอบการออกแบบชุมชนสำเร็จรูปอื่นๆ
- Vkmenu.com เป็นตัวสร้างออนไลน์ ช่วยให้คุณสร้างสรรค์เมนูที่มีสไตล์ได้อย่างง่ายดายและรวดเร็ว
การจ้างมืออาชีพก็ถือเป็นโซลูชั่นสำเร็จรูปเช่นกัน ในกรณีนี้คุณไม่จำเป็นต้องทำทุกอย่างด้วยตัวเอง แต่คุณจะต้องจ่ายเงิน
บรรทัดล่าง
เราดูว่าเมนูวิกิคืออะไรในชุมชน VKontakte เราเรียนรู้วิธีสร้างมันและใช้คำสั่งต่างๆ
เราเชื่อว่าเมนูนี้ยังไม่ได้รับการชื่นชมอย่างเต็มที่ สำหรับหลายๆ คน “มาร์กอัปวิกิ” นี้เป็นสิ่งที่ซับซ้อนและน่ากลัวอย่างยิ่ง พวกเขาไม่ต้องการที่จะรับมันต่อไป แต่ในความเป็นจริงอย่างที่เราเห็นทุกอย่างค่อนข้างง่าย
อย่ากลัวที่จะทดลองและเป็นต้นฉบับ!
สวัสดีเพื่อนรัก ในโพสต์ของวันนี้ฉันต้องการพูดคุยเกี่ยวกับวิธีสร้างเมนูสำหรับกลุ่ม VKontakte การทำเช่นนี้ไม่ยากอย่างที่คิดเมื่อเห็นแวบแรก และหากคุณมีความรู้พื้นฐานเกี่ยวกับ Photoshop หรือ Paint อย่างน้อยคุณก็ประสบความสำเร็จอย่างแน่นอน มาเริ่มกันเลย
ด้วยโครงสร้างที่เหมาะสม เมนูจะช่วยเพิ่มยอดขายหรือกระแสลูกค้าให้กับธุรกิจของคุณได้ ซึ่งขึ้นอยู่กับว่ากลุ่มมุ่งเน้นที่อะไร ตัวอย่างเช่น ให้พิจารณาการออกแบบร้านขายเสื้อผ้าออนไลน์:
โครงสร้างถูกสร้างขึ้นอย่างชัดเจน เพียงคลิกไม่กี่ครั้งผู้ใช้สามารถค้นหาทุกสิ่งที่ต้องการ: หมายเลขโทรศัพท์ ที่อยู่ ข้อมูลการสั่งซื้อ แค็ตตาล็อกผลิตภัณฑ์ ฯลฯ ในความคิดของฉันการออกแบบนี้ช่วยเพิ่มยอดขายได้อย่างน้อย 2 เท่า
ในเวอร์ชันนี้ เมนูจะเป็นแค็ตตาล็อกของผลิตภัณฑ์ที่แบ่งออกเป็นส่วนต่างๆ ซึ่งทำให้การค้นหาสะดวกมาก อวตารของชุมชนประกอบด้วยหมายเลขติดต่อของผู้ให้บริการหลายราย ซึ่งจะช่วยให้ลูกค้าติดต่อกับผู้ขายได้อย่างรวดเร็ว
ต่อไปนี้เป็นตัวอย่างของวิธีแก้ปัญหาที่ไม่ดี:
แค็ตตาล็อกได้รับการออกแบบในรูปแบบของลิงก์ธรรมดาที่นำไปสู่ปลายทางที่ไม่รู้จัก ยอมรับว่าไม่มีความปรารถนาเป็นพิเศษที่จะข้ามพวกเขา ในทางกลับกัน คุณต้องการที่จะออกจากกลุ่ม
ในตัวอย่างเหล่านี้ เราดูตัวเลือกการออกแบบสำหรับร้านค้าออนไลน์ แต่คุณสามารถใช้สิ่งที่คล้ายกันในหัวข้ออื่นได้ สูตรนั้นง่ายมาก: โครงสร้างที่ชัดเจน + การออกแบบกราฟิก = การไหลเข้าของลูกค้าและยอดขายที่เพิ่มขึ้น
ตอนนี้เรามาดูทั้งหมดนี้จากมุมมองทางเทคนิค
การสร้างเมนูสำหรับกลุ่ม VKontakte
ก่อนอื่น เรามาสร้างเลย์เอาต์กราฟิกของเมนูในอนาคตกันดีกว่า เพื่อจุดประสงค์นี้ เราจะใช้ Photoshop (สำหรับภาพธรรมดา โปรแกรม Paint มาตรฐานก็ทำได้ดี) เปิดโปรแกรมและสร้างเอกสารใหม่:
ฉันจะสร้างรูปภาพที่มีขนาด 500x500 พิกเซล อย่างไรก็ตาม ขนาดของรูปภาพอาจแตกต่างกันขึ้นอยู่กับจำนวนและตำแหน่งของส่วน
ตอนนี้ให้ดาวน์โหลดภาพที่คุณต้องการใช้เป็นพื้นหลังแล้วลากลงบนผืนผ้าใบของคุณ หากคุณมีความเชี่ยวชาญในโปรแกรม คุณสามารถวาดพื้นหลังได้ด้วยตัวเอง
จากนั้นเขียนส่วน ปุ่ม และหมายเลขโทรศัพท์ที่ออกแบบไว้ล่วงหน้าลงบนภาพพื้นหลัง เราจะเปลี่ยนเป็นลิงก์ในภายหลัง:
เพื่อให้การตัดแม่นยำที่สุดเท่าที่จะเป็นไปได้ คุณจำเป็นต้องใช้เส้นเสริมโดยกด CTRL+R วางเมาส์เหนือบรรทัดบนสุดแล้วลากไปวางบนรูปภาพดังนี้:
ขั้นตอนสุดท้ายคือการตัดวัตถุ โดยคลิกที่ปุ่ม "Slices From Guides" บนแถบเครื่องมือด้านบน:
เราบันทึกเฟรมเวิร์กสำหรับอุปกรณ์เว็บ ตั้งค่ารูปแบบภาพเป็น JPG เลือกคุณภาพสูงสุดและบันทึก เช่น บนเดสก์ท็อปของคุณ:
โฟลเดอร์ปรากฏบนเดสก์ท็อปพร้อมกรอบสำหรับเมนูในอนาคตซึ่งเราต้องถ่ายโอนไปยังกลุ่ม
การแสดงเมนูโดยใช้มาร์กอัป Wiki
ในกลุ่มของคุณ ไปที่ "การจัดการชุมชน" และตรวจสอบว่าส่วน "เนื้อหา" เชื่อมต่ออยู่หรือไม่ หากพาร์ติชันถูกปิดใช้งาน ให้เชื่อมต่อ:
หลังจากนี้แท็บ “ข่าวล่าสุด” จะปรากฏในกลุ่ม คลิกที่ปุ่ม "แก้ไข" คุณจะถูกโอนไปยังโปรแกรมแก้ไขข้อความ:
แทนที่จะใช้ชื่อมาตรฐาน ให้เขียนของคุณเองและเปิดโหมดมาร์กอัปวิกิโดยคลิกที่ไอคอนรูปข้าวหลามตัด:
ตอนนี้เปิดกลุ่มในแท็บใหม่และอัปโหลดเฟรมที่เตรียมไว้ไปยังอัลบั้มรูปแล้ววางโค้ดต่อไปนี้ลงในโปรแกรมแก้ไขข้อความ หลายครั้งตามจำนวนส่วนที่เฟรมแบ่งออกเป็น:
| [ [ photo133337_133701019|370px;nopadding;|page- 13333337 _13333337] ] |
แทนที่จะเป็นค่า "photo133337_133701019" คุณต้องแทรกลิงก์ไปยังรูปภาพ
แทนที่จะเป็นค่า "page-13333337_13333337" คุณต้องแทรกลิงก์ไปยังหน้าหรือส่วนกลุ่มที่ต้องการ
แทนที่จะเป็น 370px คุณสามารถเลือกขนาดของคุณเองได้ และพารามิเตอร์ nopadding จะทำให้คุณสามารถแสดงภาพที่เต็มเปี่ยมได้ หากไม่มีมัน เมนูของเราก็จะแสดงเป็นส่วนๆ
เมื่อคลิกที่ปุ่ม "ดู" คุณจะสามารถดูได้ว่าเมนูจะมีลักษณะอย่างไรในกลุ่ม หากทุกอย่างลงตัวแล้ว ให้คลิก "บันทึกผลลัพธ์" และสนุกกับงานที่ทำเสร็จ
