7 วิธีสร้างเลย์เอาต์เว็บไซต์วงดนตรีที่คุณจะหลงรัก

ไม่ว่าคุณจะเพิ่งเริ่มต้นกับการออกแบบเว็บไซต์วงดนตรีใหม่ หรืออัปเดตไซต์ของคุณสำหรับโครงการใหม่ที่กำลังดำเนินการอยู่ แพลตฟอร์มของ Bandzoogle มีเครื่องมือที่ยอดเยี่ยมในการขยายความเป็นไปได้ของเค้าโครงเว็บไซต์ของคุณ

ไม่ว่าคุณจะเลือกเทมเพลตเว็บไซต์ของวงดนตรีแบบใด มีหลายวิธีในการปรับแต่งเลย์เอาต์เพื่อสร้างลุคที่เหมาะกับความต้องการและสุนทรียภาพเฉพาะของคุณ

เมื่อสร้างเว็บไซต์สำหรับวงดนตรีหรือโครงการดนตรีอื่นๆ สิ่งสำคัญคือต้องจัดวางข้อมูลให้ชัดเจนที่สุดเท่าที่จะเป็นไปได้ ในขณะเดียวกันก็ให้ความสำคัญกับแบรนด์และค่านิยมของคุณในฐานะศิลปินด้วย

ฟีเจอร์ “รูปภาพและข้อความ” เป็นหนึ่งในฟีเจอร์ที่ฉันโปรดปรานเมื่อสร้างเลย์เอาต์ที่ไม่ซ้ำกันสำหรับหน้าเว็บไซต์ เป็นคุณสมบัติที่ใช้งานได้หลากหลายและช่วยให้มั่นใจว่ามีการฟอร์แมตที่สะอาดตาในอุปกรณ์ทั้งหมด

ฉันจะแสดงวิธีใช้คุณลักษณะนี้ร่วมกับการปรับแต่งส่วนต่างๆ เพื่อสร้างเค้าโครงเว็บไซต์ 7 วงเพื่อวัตถุประสงค์ต่างๆ ในเว็บไซต์ของคุณ

ก่อนอื่น ฉันจะอธิบายองค์ประกอบทั้งหมดของคุณลักษณะ "รูปภาพและข้อความ" ที่สามารถใช้หรือละเว้นได้ตามต้องการ:

• รูปภาพ: แน่นอน คุณสามารถเพิ่มรูปภาพในคุณสมบัติ "รูปภาพและข้อความ" ได้ ภาพนี้ครอบตัดเป็นสี่เหลี่ยมจัตุรัส วงกลม หรืออัตราส่วน 5:4 หรือ 16:9 ได้ คุณยังสามารถเพิ่มไฮเปอร์ลิงก์ให้กับรูปภาพนี้ในพื้นที่ "ลิงก์รูปภาพ" อย่าลืมเพิ่มประสิทธิภาพรูปภาพของคุณสำหรับเว็บก่อนที่จะอัปโหลดไปยังเว็บไซต์ของคุณ
• หัวข้อ: คุณสามารถเพิ่มส่วนหัวที่ดึงรูปแบบตัวอักษรจากการตั้งค่า "หัวเรื่อง 1" ในแท็บแก้ไขธีม
• หัวข้อย่อย: คุณสามารถเพิ่มหัวเรื่องย่อยที่ดึงรูปแบบตัวอักษรจากการตั้งค่า "หัวเรื่อง 2" ในแท็บแก้ไขธีม
• คำอธิบาย: คำอธิบายหรือ 'ข้อความเนื้อหา' ในที่นี้อาจสั้นหรือยาว และมีตัวเลือกให้ตัดข้อความรอบรูปภาพหากข้อความค่อนข้างยาว (อาจเป็นชีวประวัติของศิลปินในเชิงลึก - เพิ่มเติมในภายหลัง ). สามารถเพิ่มไฮเปอร์ลิงก์ไปยังข้อความในพื้นที่คำอธิบาย
• ปุ่ม: ปุ่มสามารถลิงก์ไปยังหน้าภายนอก หน้าในไซต์ของคุณ แทร็ก อัลบั้ม ไฟล์ หรือที่อยู่อีเมล

มาดู 7 วิธีที่น่าสนใจในการใช้คุณลักษณะนี้และการปรับแต่งเลย์เอาต์อื่นๆ กับเว็บไซต์ของคุณ - สนุกได้เลย!

1. จัดระเบียบแคตตาล็อกเพลง ผลงานโครงการ และอื่นๆ

หากคุณมีโปรเจ็กต์ บริการ อัลบั้ม และอื่นๆ มากมายที่คุณต้องการเน้นบนหน้าเว็บ ตัวเลือกที่ดีคือการสร้าง 'หน้า Landing Page' โดยใช้คุณลักษณะรูปภาพและข้อความหลายรายการในหลายคอลัมน์บนหน้าเว็บของคุณ

หากต้องการดูการดำเนินการนี้ โปรดดูหน้า "การผลิตและวิศวกรรม" ของ Jojo Worthington ซึ่งเธอใช้คุณลักษณะรูปภาพและข้อความเพื่อแสดงรายการเครดิตทั้งหมดของเธออย่างเป็นระเบียบ

เว็บไซต์ศิลปิน: Jojo Worthington

เพื่อให้ได้รูปลักษณ์ที่คล้ายคลึงกัน ขั้นแรกให้สร้างหน้าหรือส่วนใหม่ ในการสร้างหน้าใหม่ ภายใต้ แก้ไขเนื้อหา คลิก "หน้า" > "เพิ่มหน้า" และตั้งชื่อหน้าตามต้องการ คลิก "สร้างหน้าของฉัน"

ในการสร้างส่วนใหม่ ภายใต้ แก้ไขเนื้อหา ให้วางเมาส์เหนือระหว่างสองส่วนในหน้าของคุณแล้วคลิกปุ่มสีน้ำเงิน “+ เพิ่มส่วน”

ออกแบบเว็บไซต์ที่น่าทึ่งด้วยรูปลักษณ์และสัมผัสที่กำหนดเองซึ่งเข้ากับเพลงของคุณ สร้างเว็บไซต์ด้วย Bandzoogle ตอนนี้!

ฉันขอแนะนำให้แบ่งส่วนของหน้าออกเป็นสองหรือสามคอลัมน์เพื่อเริ่มต้น ภายใต้ แก้ไขเนื้อหา คลิก "ส่วนใหม่" (เส้นแนวนอนสีน้ำเงินภายในเค้าโครงหน้า) จากนั้นวางเมาส์เหนือส่วนที่คุณสร้าง แล้วคลิก "แก้ไขคอลัมน์" จากนั้นเลือก "2 คอลัมน์" หรือ "3 คอลัมน์" ที่นี่

หากต้องการเพิ่มคุณลักษณะ "รูปภาพและข้อความ" ให้คลิก "เพิ่มคุณลักษณะ" > "รูปภาพและข้อความ" และวางคุณลักษณะในคอลัมน์ใดคอลัมน์หนึ่งในส่วนนี้โดยใช้ลูกศรสำหรับตำแหน่งสีเทา เลือกตัวเลือกการแสดง "กอง" เพื่อให้ปุ่มและข้อความอยู่ใต้ภาพ

จากนั้น เพิ่มภาพที่แสดงถึงโครงการ/อัลบั้ม/ฯลฯ หนึ่งโครงการ และเพิ่มข้อความตามต้องการ หากคุณไม่ต้องการชื่อ/คำอธิบายใดๆ ให้ลบข้อความแจ้งออกจากช่องข้อความและเว้นว่างไว้

หากต้องการเพิ่มลิงก์ในภาพนี้ ให้คลิก "แก้ไข" ใต้ภาพขนาดย่อ เมนูจะปรากฏขึ้นข้างรูปภาพ คลิก "ลิงก์" จากนั้นเลือกประเภทลิงก์ของคุณ - หากคุณกำลังสร้างหน้ารายชื่อเพลง คุณสามารถลิงก์ไปที่ "อัลบั้ม" หรือ "แทร็ก" เพื่อลิงก์ไปยังอัลบั้มหรือแทร็ก/ซิงเกิลที่ตั้งค่าไว้บนไซต์ของคุณได้ หากคุณกำลังสร้างพอร์ตโฟลิโอในฐานะผู้ผลิต วิศวกร ฯลฯ คุณสามารถเชื่อมโยงไปยัง "หน้าภายนอก" และป้อน URL ของโครงการในช่องที่ให้ไว้ คลิกสมัคร
สุดท้ายแต่ไม่ท้ายสุด มีตัวเลือกปุ่ม - หากต้องการยกเว้นปุ่ม ให้เลือก "ไม่มีลิงก์" ใต้ "ลิงก์ปุ่ม" หรือเลือกประเภทลิงก์อื่น (อาจเป็นลิงก์เดียวกับที่คุณใช้กับรูปภาพของคุณ)

คลิก บันทึก เพื่อบันทึกการเปลี่ยนแปลงทั้งหมดเหล่านี้ เพิ่มฟีเจอร์ “รูปภาพและข้อความ” ต่อไปสำหรับรายการทั้งหมดในรายชื่อผลงาน รายการโครงการ ฯลฯ ของคุณ เมื่อสร้างเสร็จแล้ว คุณจะมีตารางรายการที่ยอดเยี่ยมสำหรับผู้เยี่ยมชมเว็บไซต์ของคุณให้คลิกผ่าน

2. เน้นโครงการหรือผลิตภัณฑ์ในหน้าแรกของคุณ

อีกวิธีที่ยอดเยี่ยมในการใช้คุณลักษณะ "รูปภาพและข้อความ" คือการเน้นรายการสำคัญสองสามรายการในหน้าแรกของเว็บไซต์วงดนตรีของคุณ หน้าแรกเป็นที่ที่ดีในการให้ภาพรวมคร่าวๆ เกี่ยวกับโครงการล่าสุดของคุณและทุกสิ่งที่ไซต์ของคุณนำเสนอ บางทีคุณอาจมีประกาศที่น่าตื่นเต้นบางอย่างที่ต้องทำ หรือต้องการนำผู้เยี่ยมชมไซต์ของคุณไปยังอัลบั้มใหม่ ร้านขายสินค้าออนไลน์ของคุณ หรือกำหนดการเดินทางของคุณ

คุณสามารถใช้คุณลักษณะ "รูปภาพและข้อความ" เพื่อเน้นสิ่งเหล่านี้อย่างชัดเจนและเชื่อมโยงผู้คนไปยังหน้าด้านในของไซต์ของคุณที่ซึ่งเนื้อหานี้สามารถพบได้ การใช้รูปภาพมีประโยชน์เสมอเพื่อดึงดูดความสนใจของผู้เยี่ยมชมไซต์ของคุณ ซึ่งช่วยให้หน้าแรกของคุณดูสะอาดตาและเรียบง่าย และส่งเสริมการโต้ตอบกับหน้าภายในของไซต์ของคุณมากขึ้น

Wolf & Moon และ Lightbound Music ต่างก็ทำได้ดีในหน้าแรกของพวกเขา

เว็บไซต์ศิลปิน: Wolf & Moon

เว็บไซต์ศิลปิน: Lightbound Music

สังเกตการใช้รูปแบบการแสดง "ภาพต่อกัน" ในหน้าทั้งสองนี้ พวกเขาได้ปรับแต่งเทมเพลตเว็บไซต์เพื่อเสริมผลิตภัณฑ์/โครงการใหม่ของพวกเขา เพื่อให้สีพื้นหลังของภาพซ้อนทับภาพตัดปะเข้ากันอย่างลงตัวกับงานศิลปะ

คุณสามารถเล่นกับสีต่างๆ ได้ที่นี่ ระหว่างสีพื้นหลังของส่วน สีภาพซ้อนทับของภาพต่อกัน สีปุ่ม และสีในภาพที่คุณใช้

3. เสริมประวัติของคุณเพื่อเพิ่มบุคลิกภาพ

ด้วยตัวเลือกชื่อ คำบรรยาย ปุ่ม และรูปภาพในคุณสมบัติ "รูปภาพและข้อความ" คุณสามารถเพิ่มบุคลิกได้มากมายเมื่อคุณเขียนชีวประวัตินักดนตรีของคุณ คุณสามารถเลือกที่จะรวมหรือละเว้นรายการเหล่านี้ได้ตามต้องการ

Annie Sumi ทำสิ่งนี้ได้อย่างยอดเยี่ยมในหน้าประวัติของเธอ แอนนี่ได้วางคำพูดที่สอดคล้องกับการฝึกฝนดนตรีของเธอในช่อง "หัวข้อย่อย" ของคุณลักษณะ "รูปภาพและข้อความ" สิ่งนี้ได้รับสไตล์ที่แตกต่างและถูกเน้นที่ด้านบนสุดของชีวประวัติของเธอ เธอใช้ตัวเลือกการแสดง "แยก" เพื่อให้รูปภาพอยู่ข้างข้อความชีวประวัติ

เธอครอบตัดรูปภาพเฮดช็อตของศิลปินให้เป็นวงกลม ซึ่งไม่เพียงแต่ช่วยเสริมภาพลักษณ์เท่านั้น แต่ยังเข้ากับธีมในเพลงของเธอได้เป็นอย่างดี หากต้องการครอบตัดรูปภาพในคุณสมบัติ "รูปภาพและข้อความ" ให้คลิก "แก้ไข" ใต้ภาพขนาดย่อ เมนูจะปรากฏขึ้นข้างรูปภาพ คลิก "ครอบตัด" ที่นี่และเลือกรูปแบบการครอบตัดที่เหมาะกับคุณ ลากรูปภาพตามต้องการเพื่อจัดตำแหน่งแล้วคลิกนำไปใช้

นอกจากนี้ เธอยังได้สลับ "เปิด" สวิตช์ "ตัดข้อความ" ใต้ "ตัวเลือก" เพื่อให้ข้อความล้อมรอบรูปภาพ สิ่งนี้จะตอบสนองได้ดีกับขนาดหน้าจอที่แตกต่างกัน และทำให้เค้าโครงหน้าดูเต็มตลอดความยาวของชีวประวัติ

ศิลปิน : แอนนี่ ซูมิ

4. สร้างEPK . ที่เป็นระเบียบสุดๆ

ตัวเลือกการแสดงผลอื่นสำหรับคุณลักษณะ "รูปภาพและข้อความ" คือ "ข้อความบนรูปภาพ" วิธีนี้ช่วยเพิ่มโอกาสมากมายในการสร้างเลย์เอาต์ที่สวยงามซึ่งเน้นไปที่รูปภาพเป็นหลัก ตัวเลือกนี้ใช้ได้ผลดีในการสร้าง EPK บนเว็บไซต์ของคุณที่ผู้จองและผู้ใช้ในอุตสาหกรรมรายอื่นๆ จะประทับใจ เนื่องจากพวกเขาสามารถค้นหาสิ่งที่ต้องการได้อย่างรวดเร็วด้วยการคลิกเพียงครั้งเดียว ฉันกำลังดึงตัวอย่างนี้จาก EPK ของวงดนตรีของฉัน ซึ่งมีการสรุปองค์ประกอบอย่างชัดเจนโดยใช้ตัวเลือก "ข้อความบนรูปภาพ"

ที่นี่ ฉันได้ตั้งค่าเลย์เอาต์ที่คล้ายกันจากคำแนะนำ "Landing Page" ด้านบน (#1) ฉันใช้รูปภาพพื้นผิวจากการถ่ายภาพที่เราทำสำหรับอัลบั้มใหม่ของเรา และครอบตัดรูปภาพทั้งหมดนี้เป็นวงกลม จากนั้นฉันก็เพิ่ม "หัวเรื่อง" ง่ายๆ สำหรับแต่ละรูปภาพและคุณลักษณะข้อความเพื่อติดป้ายกำกับองค์ประกอบต่างๆ ที่รวมอยู่ใน EPK ของวงดนตรีของเรา

รูปภาพแต่ละรูปจะเชื่อมโยงกับหน้าที่ไม่อยู่ในเมนูแยกต่างหากซึ่งมีเนื้อหาสำหรับแต่ละหมวดหมู่ ตัวอย่างเช่น ฉันมีหน้าพิเศษ “EPK - รูปภาพ” ที่มีรูปภาพสื่อทั้งหมดอยู่ในนั้น

ลองใช้สิ่งนี้เพื่อดูหน้า EPK ที่มีภาพสวยงาม!

เว็บไซต์ศิลปิน: The Lifers

5. สร้างหน้าข้อมูลสำหรับการสมัครสมาชิก บริการ ฯลฯ

สมาชิกของเราหลายคนเสนอบริการที่น่าอัศจรรย์แก่ผู้เยี่ยมชมไซต์ของพวกเขา ไม่ว่าจะเป็นการขายการสมัครรับข้อมูลของแฟนๆ หรือบริการที่กำหนดเองอื่นๆ (บทเรียนดนตรี เซสชั่นการบันทึกเสียง การบำบัด ฯลฯ) เรารู้สึกทึ่งเสมอกับสิ่งที่สมาชิกของเรานำมาสู่โลก

Jackie Gage ได้สร้างหน้าข้อมูลที่ยอดเยี่ยมสำหรับข้อเสนอการสมัครสมาชิกของพวกเขา แจ็กกี้ใช้ตัวเลือกการแสดงผล "แยก" สำหรับคุณลักษณะ "รูปภาพและข้อความ" เพื่อสรุปประเภทของบริการที่พวกเขาเสนอ แจ็กกี้ใช้ประโยชน์จากองค์ประกอบหัวเรื่อง หัวเรื่องย่อย และปุ่มของคุณลักษณะรูปภาพและข้อความได้อย่างดีเยี่ยม เพื่อให้ข้อมูลสำคัญได้รับการสรุปอย่างชัดเจนสำหรับผู้เยี่ยมชมเว็บไซต์ งานที่ยอดเยี่ยมที่นี่!

เว็บไซต์ศิลปิน: Jackie Gage

6 . ใช้พื้นหลังของส่วนเพื่อสร้างผลกระทบอย่างมากในเลย์เอาต์ของคุณ

มีพลังมากในภาพที่ยอดเยี่ยม การเพิ่มรูปภาพพื้นหลังในส่วน คุณจะแยกหน้าออกเป็นภาพ ช่วงพักนี้ได้รับการต้อนรับจากสายตามนุษย์ที่เลื่อนไปมาของเรา และเนื้อหานั้นจะปรากฏออกมาในทันทีว่ามีความสำคัญและน่าตื่นเต้น นี่เป็นอีกวิธีที่ยอดเยี่ยมในการรวมการเรียกร้องให้ดำเนินการไว้ที่ใดที่หนึ่งบนหน้าเว็บ

Intune Experience ทำสิ่งนี้อย่างสวยงามบนโฮมเพจของพวกเขา พวกเขาได้ตั้งค่ารูปภาพที่มีพื้นผิวที่สวยงามเป็น "ภาพพื้นหลังของส่วน" ในส่วนที่อยู่ระหว่างหน้าหลัก พวกเขาได้เพิ่มคำพูดจากตัวเองในคุณลักษณะ "ข้อความ" ตามด้วยปุ่มที่เชื่อมโยง เพื่อเรียกผู้เข้าชมให้จองเซสชั่น

เลย์เอาต์นี้สมบูรณ์แบบ เนื่องจากให้สัมผัสที่เป็นส่วนตัว มีความน่าสนใจ และให้ข้อความที่ชัดเจนในการมีส่วนร่วม ความเรียบง่ายเป็นกุญแจสำคัญอย่างแท้จริงที่นี่

เว็บไซต์ศิลปิน: Becki Fleischer

7. ขอให้สนุกกับมัน!

มีหลายวิธีที่จะเล่นเลย์เอาต์อย่างสนุกสนาน หากคุณต้องการทดลองสักหน่อย นี่คือตัวอย่างที่ดีของไซต์ที่เล่นกับความเป็นไปได้ของเลย์เอาต์โดยใช้การครอบตัดที่มีรูปทรง สีสันที่สนุกสนาน พื้นหลังของส่วน เลย์เอาต์คอลัมน์ต่างๆ และอื่นๆ

Piper Hayes แกะสลักความงามที่ยอดเยี่ยมบนเว็บไซต์ Vocal Coaching ของเธอด้วยการใช้การครอบตัดแบบวงกลมและตัวเลือกการแสดง 'collage' สำหรับคุณสมบัติรูปภาพและข้อความ ไซต์นี้ผสมผสานพาเลทสีที่ยอดเยี่ยม ภาพพื้นผิวที่น่ารัก และสัมผัสส่วนตัวที่ไม่กลัวใครเพื่อสร้างพื้นที่ออนไลน์ที่น่ายินดี

เว็บไซต์ศิลปิน: Piper Hayes

ฉันหวังว่าโพสต์นี้จะช่วยสร้างแรงบันดาลใจในการนำความรู้สึกส่วนตัวและความสวยงามมาสู่เว็บไซต์ของคุณโดยการสร้างเลย์เอาต์ต่างๆ บนหน้าเว็บของคุณ แน่นอน โปรดติดต่อทีมสนับสนุนที่ได้รับรางวัลของเรา หากคุณต้องการให้เราตรวจสอบสิ่งที่คุณสร้างขึ้นและให้ข้อเสนอแนะ เราเสนอบทวิจารณ์เว็บไซต์วงดนตรีฟรีให้กับสมาชิกทุกคนของเรา!