เคล็ดลับการออกแบบภาพฮีโร่และวิธีใช้งานตลอดทั้ง Divi

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

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

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

ตัวอย่างที่เราจะแสดงให้คุณเห็นวิธีการทำทีละขั้นตอนมีลักษณะดังนี้:

การเลือกภาพที่เหมาะสม

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

ความเกี่ยวข้อง

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

หากต้องการค้นหาความเกี่ยวข้อง ให้ถามตัวเองสองคำถาม:

• ผลิตภัณฑ์/บริการ/เว็บไซต์ของฉันนำเสนอมูลค่าเพิ่มหลักใด
• ภาพที่สะท้อนมูลค่าเพิ่มนั้นคืออะไร?

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

รูปแบบภาพฮีโร่ทั่วไปบางรูปแบบขึ้นอยู่กับสิ่งต่อไปนี้ (หรือมากกว่า)

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

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

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

คุณภาพสูง

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

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

เราขอแนะนำให้ใช้รูปภาพที่มีความกว้างขั้นต่ำที่ 1920px ดังที่ได้กล่าวไว้ในคำแนะนำขั้นสุดท้ายเกี่ยวกับการใช้รูปภาพภายใน Divi

พิจารณาโหมดเต็มหน้าจอ

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

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

ไปศูนย์หรือไม่ไปศูนย์

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

แต่ถ้าคุณไม่ต้องการเสี่ยง คุณสามารถถอยกลับไปเน้นที่เนื้อหาทั้งหมดที่คุณสร้างสำหรับส่วนฮีโร่ของคุณ รวมถึงการทำให้ภาพฮีโร่มีความสมมาตร

สร้างคอนทราสต์

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

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

ลองใช้พื้นหลังวิดีโอแทน

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

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

พวกเขาอัปโหลดวิดีโอใหม่ 7 รายการทุกวันจันทร์ และวิดีโอที่พวกเขาแชร์นั้นใช้งานได้ฟรี แม้จะใช้เพื่อการค้าก็ตาม

CTA ที่สร้างความแตกต่าง

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

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

เมื่อออกแบบ CTA ให้คำนึงถึงสิ่งต่อไปนี้:

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

มาเริ่มสร้างกันเลย (เดสก์ท็อป)

ตอนนี้เราได้พูดถึงเคล็ดลับทั่วไปเกี่ยวกับภาพฮีโร่แล้ว ถึงเวลานำไปปฏิบัติ ตัวอย่างที่เราทำคือมุ่งเน้นผลิตภัณฑ์ แต่เรารวมปัจจัยอื่นๆ ไว้ด้วย (เช่น บริบท)

เราตรวจสอบให้แน่ใจว่ามีคอนทราสต์เพียงพอ CTA ที่ดี รูปภาพคุณภาพสูง และแม้ว่าเราจะใช้ส่วนมาตรฐานแทนส่วนเต็มความกว้าง แต่เราปรับหมวดหมู่ย่อย Spacing ด้วยตนเองเพื่อให้แน่ใจว่าส่วนฮีโร่ปรากฏเต็มหน้าจอบนเดสก์ท็อป

เลือกหมวด

เลือกระหว่างส่วนที่เต็มความกว้างหรือส่วนปกติ เนื่องจากส่วนมาตรฐานมีความยืดหยุ่นมากกว่า เราจะเลือกส่วนมาตรฐานและเปลี่ยนเป็นส่วนฮีโร่ที่ตรงกับความต้องการของเรา

ตัวเลือกพื้นหลัง

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

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

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

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

ในกรณีส่วนใหญ่ จะใช้สีโอเวอร์เลย์สีเทา เป็นสีมาตรฐานที่สุดที่จะใช้เป็นภาพซ้อนทับซึ่งจะไม่เปลี่ยนสีของภาพมากนัก รหัสสีที่เราใช้คือ '#BFBFBF'

จากนั้นกลับไปที่ภาพพื้นหลังและใช้ Background Image Blend ในกรณีนี้ เราจะใช้ 'คูณ' เปลี่ยนตำแหน่งภาพพื้นหลังเป็น 'ซ้ายบน' ด้วย

การตั้งค่าแถว

ต่อไป เราจะเพิ่มแถวเต็มความกว้างในส่วนที่เราสร้างขึ้น เปิดการตั้งค่าและเพิ่ม '10%' ให้กับช่องว่างด้านบนในหมวดหมู่ย่อยการเว้นวรรคของแท็บการออกแบบ

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

โมดูลข้อความแรก

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

• การวางแนวข้อความ: ขวา
• แบบอักษรของข้อความ: กุ้งมังกร
• ขนาดตัวอักษรของข้อความ: 80
• สีแบบอักษรของข้อความ: #FFFFFF
• ความสูงของบรรทัดข้อความ: 1.7em

เลื่อนลงมาที่แท็บเดียวกัน เพิ่ม '25%' ไปที่ขอบบนสุด และ '-12%' ที่แถบด้านขวาในหมวดย่อยการเว้นวรรค

โมดูลข้อความที่สอง

เพิ่มโมดูลข้อความอื่น พิมพ์ข้อความลงในกล่องเนื้อหาแล้วไปที่แท็บออกแบบ ในหมวดหมู่ย่อยข้อความ ใช้การเปลี่ยนแปลงต่อไปนี้:

• การวางแนวข้อความ: ขวา
• แบบอักษรของข้อความ: มอนต์เซอร์รัต
• ขนาดตัวอักษรของข้อความ: 15
• สีแบบอักษรของข้อความ: #FFFFFF
• ความสูงของบรรทัดข้อความ: 1.7em

เลื่อนลงมาที่แท็บเดียวกันและเพิ่ม '4%' ให้กับขอบบนสุด และ '-12%' ไปที่ขอบด้านขวาในหมวดย่อยการเว้นวรรค

โมดูลปุ่ม

ดำเนินการต่อโดยเพิ่มโมดูลปุ่มและพิมพ์ข้อความปุ่ม ถัดไป ไปที่แท็บออกแบบและเปลี่ยนการจัดตำแหน่งปุ่มเป็น 'ขวา'

เลื่อนลงไปที่แท็บเดียวกันและทำการปรับเปลี่ยนต่อไปนี้ในหมวดย่อยของปุ่ม:

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 20
• สีข้อความของปุ่ม: #FFFFFF
• สีพื้นหลังของปุ่ม: #E02B20
• ความกว้างของขอบปุ่ม: 2
• สีเส้นขอบของปุ่ม: #E02B20
• รัศมีเส้นขอบของปุ่ม: 3
• แบบอักษรของปุ่ม: มอนต์เซอร์รัต
• รูปแบบตัวอักษรของปุ่ม: ตัวพิมพ์ใหญ่

เวอร์ชันมือถือและแท็บเล็ต

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

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

การตั้งค่ามาตรา

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

โมดูลข้อความแรก

ไปที่แท็บออกแบบและทำการเปลี่ยนแปลงต่อไปนี้ในหมวดหมู่ย่อยข้อความ:

• การวางแนวข้อความ: ศูนย์
• ขนาดตัวอักษร: 50

เลื่อนลงมาที่แท็บเดิม ลบระยะขอบด้านขวา และเปลี่ยนขอบบนเป็น '20%'

โมดูลข้อความที่สอง

ภายในแท็บการออกแบบของโมดูลข้อความที่สอง ให้เปลี่ยนการวางแนวข้อความเป็น 'ศูนย์กลาง'

เลื่อนลงมาที่แท็บเดิม ลบขอบขวา และเก็บขอบบน

โมดูลปุ่ม

สุดท้ายแต่ไม่ท้ายสุด เปิดโมดูลปุ่มและเปลี่ยนการจัดตำแหน่งปุ่มเป็น 'กึ่งกลาง' ด้วย

ความคิดสุดท้าย

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

อย่าลืมสมัครรับจดหมายข่าวทางอีเมลและช่อง YouTube ของเรา เพื่อที่คุณจะได้ไม่พลาดประกาศสำคัญ เคล็ดลับที่เป็นประโยชน์ หรือ Divi freebie!