วิธีการออกแบบส่วนฮีโร่สำหรับเว็บไซต์ของคุณ (คู่มือ 2025)
เผยแพร่แล้ว: 2025-02-19เว็บไซต์ของคุณมีเพียงไม่กี่วินาทีในการสร้างความประทับใจที่ดีดังนั้นการมีส่วนฮีโร่ที่แข็งแกร่งควรเป็นสิ่งสำคัญที่สุด มันเหมือนกับหน้าต่างหน้าร้านของธุรกิจออนไลน์ของคุณและจำเป็นต้องดึงดูดความสนใจของพวกเขาอย่างรวดเร็วและกระตุ้นให้พวกเขาเลื่อนไปเรื่อย ๆ ในโพสต์นี้เราจะดำดิ่งลงไปในการออกแบบส่วนฮีโร่และแสดงวิธีการออกแบบด้วย Divi โดยใช้ตัวสร้างภาพการลากและวางที่ใช้งานง่าย
- 1 ส่วนฮีโร่คืออะไรและทำไมคุณถึงต้องการ?
- 1.1 การแสดงผลครั้งแรกมีความสำคัญ
- 1.2 มันสื่อสารข้อความของคุณ
- 1.3 มันสามารถขับเคลื่อนการแปลง
- 2 องค์ประกอบหลักของส่วนฮีโร่ที่มีประสิทธิภาพคืออะไร?
- 2.1 พาดหัวที่น่าสนใจ
- 2.2 หัวข้อย่อยหรือย่อหน้า
- 2.3 การเรียกร้องให้ดำเนินการอย่างชัดเจน
- 2.4 ภาพคุณภาพสูง
- 2.5 พื้นหลังที่ wows
- 3 ตัวอย่างของส่วนฮีโร่ (และทำไมพวกเขาถึงทำงาน)
- 3.1 ตัวอย่างที่ 1: ซอฟต์แวร์ AI
- 3.2 ตัวอย่างที่ 2: อุปทานสัตว์เลี้ยง
- 3.3 ตัวอย่างที่ 3: น้ำไม่แสวงหาผลกำไร
- 3.4 ตัวอย่างที่ 4: อสังหาริมทรัพย์
- 4 ทำไม Divi เป็นตัวเลือกที่ยอดเยี่ยมสำหรับการออกแบบส่วนฮีโร่
- 5 วิธีการออกแบบส่วนฮีโร่กับ Divi
- 5.1 เลือกชุดเลย์เอาต์
- 5.2 ทำการเปลี่ยนแปลงการออกแบบในส่วนฮีโร่
- 5.3 เขียนข้อความใหม่ด้วย divi ai
- 5.4 เพิ่มการเรียกร้องให้ดำเนินการ
- 6 วิธีการออกแบบส่วนฮีโร่กับ Divi AI
- 6.1 การสร้างฮีโร่ Divi ใหม่
- 6.2 ตัวอย่างฮีโร่ Divi AI
- 7 ประสบการณ์ที่ดีที่สุดที่ Divi มีให้กับ Divi Pro
- 8 สร้างความประทับใจครั้งแรกที่ยั่งยืนกับ Divi
ส่วนฮีโร่คืออะไรและทำไมคุณถึงต้องการ?
ส่วนฮีโร่ของเว็บไซต์ของคุณไม่ได้เป็นเพียงส่วนบนของหน้า เป็นโอกาสครั้งแรกที่คุณจะสร้างความประทับใจที่ดี นี่คือที่ที่คุณดึงดูดความสนใจแสดงข้อความหลักของคุณและแสดงผู้เข้าชมทันทีว่าทำไมพวกเขาควรติดอยู่ ส่วนฮีโร่ที่ยอดเยี่ยมเชื่อมต่อพวกเขาในไม่กี่วินาทีนำพวกเขาลึกเข้าไปในเว็บไซต์ของคุณด้วยการเรียกร้องให้ดำเนินการอย่างชัดเจนและตั้งค่าขั้นตอนสำหรับประสบการณ์การใช้งานทั้งหมด (UX) นั่นเป็นเหตุผลว่าทำไมจึงเป็นเรื่องสำคัญที่จะทำให้ถูกต้อง
นี่คือบางสิ่งที่ต้องจำไว้:
การแสดงผลครั้งแรกมีความสำคัญ
เราอาศัยอยู่ในโลกแห่งความพึงพอใจทันที ผู้ใช้ที่ลงจอดบนเว็บไซต์ของคุณจะทำการตัดสินอย่างรวดเร็วดังนั้นส่วนฮีโร่จะต้องดึงดูดความสนใจภายในไม่กี่วินาที มิฉะนั้นพวกเขาจะตีกลับออกจากไซต์ของคุณและไปที่อื่น อย่างไรก็ตามส่วนฮีโร่ของคุณไม่ได้เกี่ยวกับภาพเท่านั้น มันตั้งค่าเสียงสำหรับประสบการณ์ผู้ใช้ทั้งหมด ส่วนฮีโร่ที่ดีตั้งค่าความคาดหวังของผู้ใช้เกี่ยวกับสิ่งที่พวกเขาจะพบในเว็บไซต์ของคุณ
เมื่อคุณรู้ว่าคุณมีเวลาเพียงไม่กี่วินาทีเท่านั้นที่จะได้รับความสนใจจากผู้คน ใช้พลังของการเล่าเรื่องด้วยภาพเพื่อรับข้อความของคุณอย่างรวดเร็ว ภาพที่น่าสนใจเช่นภาพถ่ายหรือวิดีโอรวมกับหัวเรื่องที่มีผลกระทบสามารถถ่ายทอดข้อมูลได้มากขึ้นในไม่กี่วินาทีกว่าย่อหน้าขนาดใหญ่ของข้อความ ใช้ภาษาที่ช่วยให้ผู้ใช้เข้าใจข้อเสนอของคุณได้ทันทีและทำไมพวกเขาถึงควรดูแล
พิจารณาตัวอย่างนี้: คุณต้องการเริ่มกินออร์แกนิกดังนั้นคุณจึงค้นหาตลาดของเกษตรกรในท้องถิ่น เมื่อคุณลงจอดบนเว็บไซต์ภาพอาหารอร่อยดึงดูดความสนใจของคุณ การสแกนส่วนหัวคุณจะพบปุ่มสองปุ่มที่กระตุ้นให้คุณเรียนรู้เพิ่มเติม
มันสื่อสารข้อความของคุณ
ผู้เข้าชมไม่ควรคาดเดาหรือเลื่อนเพื่อทำความเข้าใจกับสิ่งที่คุณเสนอ หลีกเลี่ยงศัพท์แสงหรือภาษาทางเทคนิคมากเกินไปที่กลุ่มเป้าหมายของคุณอาจไม่เข้าใจ ให้เน้นสิ่งที่ทำให้คุณแตกต่างจากการแข่งขัน อาจเป็นอะไรก็ได้ตั้งแต่ผลิตภัณฑ์หรือบริการที่เป็นเอกลักษณ์ไปจนถึงความเชี่ยวชาญเฉพาะด้าน นอกจากนี้ผลิตภัณฑ์หรือบริการนั้นเป็นประโยชน์อย่างไร? จัดวางข้อความของคุณในแง่ของสิ่งที่ผู้ใช้ต้องการหรือต้องการ
เราได้กล่าวถึงความสำคัญของภาพ แต่ข้อความที่คุณเลือกมีความสำคัญไม่แพ้กัน พาดหัวข่าวให้สั้นน่าจดจำและดึงดูดความสนใจ ติดตามสิ่งนั้นด้วยหัวข้อย่อยสั้น ๆ หรือย่อหน้าแนะนำเพื่อดึงดูดความสนใจของผู้ใช้
พิจารณาตัวอย่างนี้: คุณกำลังค้นหาศิลปะบำบัดสำหรับคุณยายของคุณ เมื่อคุณพบไซต์นี้คุณจะถูกดึงดูดไปยังการออกแบบและสีสันสดใส คุณอ่านย่อหน้าและรู้ว่าธุรกิจนี้ให้บริการการบำบัดด้วยศิลปะสำหรับเด็กผู้ใหญ่และผู้สูงอายุ
มันสามารถขับเคลื่อนการแปลง
การแปลงเป็นเหตุผลหลักที่ผู้คนสร้างเว็บไซต์ เจ้าของธุรกิจต้องการให้คุณซื้ออะไรหรือทำงานให้เสร็จ ส่วนฮีโร่ของคุณอาจเป็นแม่เหล็กสำหรับการแปลงหากออกแบบอย่างถูกต้อง หนึ่งในปัจจัยที่สำคัญที่สุดในการบรรลุเป้าหมายนี้คือการใช้การเรียกร้องให้ดำเนินการอย่างมีประสิทธิภาพ (CTA) ทุกส่วนของฮีโร่ที่ดีจะมีทั้งปุ่มหรือแบบฟอร์มที่กระตุ้นให้ผู้เยี่ยมชมของคุณทำตามขั้นตอนต่อไป
อีกวิธีที่มีประสิทธิภาพในการขับเคลื่อนการแปลงคือการสร้างความรู้สึกเร่งด่วน สิ่งนี้สามารถทำได้ผ่านข้อเสนอที่ จำกัด ในผลิตภัณฑ์เฉพาะตัวจับเวลาการนับถอยหลังหรือประโยชน์ของการลงทะเบียนสำหรับจดหมายข่าวของคุณ ระวังอย่าเร่งด่วนเกินไป ให้ใช้ภาษาที่กระตุ้นให้ผู้ใช้ดำเนินการแทน
พิจารณาตัวอย่างนี้: คุณเป็นผู้ที่ชื่นชอบ Divi ที่อาศัยอยู่ในแคลิฟอร์เนีย คุณต้องการเข้าร่วมการประชุมที่เกี่ยวข้องกับการออกแบบเว็บเพื่อสร้างการเชื่อมต่อและเรียนรู้ทักษะใหม่ ๆ เมื่อลงจอดบนเว็บไซต์คุณรู้ทันทีว่าเว็บไซต์นี้มีไว้สำหรับการประชุม Divi ในซานฟรานซิสโกในเดือนสิงหาคมและคุณสามารถลงทะเบียนได้
องค์ประกอบหลักของส่วนฮีโร่ที่มีประสิทธิภาพคืออะไร?
การมุ่งเน้นไปที่องค์ประกอบสำคัญบางประการช่วยให้คุณสร้างส่วนฮีโร่ที่ดูน่าทึ่งมีส่วนร่วมอย่างมีประสิทธิภาพและสนับสนุนให้พวกเขาสำรวจเว็บไซต์ของคุณต่อไป คุณควรรวมอะไรไว้ในส่วนฮีโร่?
พาดหัวที่น่าสนใจ
พาดหัวของคุณควรจะสั้นหวานและมีผลกระทบ คิดว่าใหญ่กล้าหาญและเป็นประโยชน์ แทนที่จะบอกว่า ยินดีต้อนรับสู่เว็บไซต์ของเรา ลองสิ่งที่น่าสนใจมากขึ้นเช่น ปลดล็อกศักยภาพของคุณด้วยโปรแกรมคิกบ็อกซิ่ง 30 วันของเรา ส่วนหัวของ Divi หรือโมดูลส่วนหัวเต็มความกว้างช่วยให้คุณสามารถควบคุมสไตล์พาดหัวของคุณได้อย่างสมบูรณ์ เล่นกับแบบอักษรสีขนาดและระยะห่างที่แตกต่างกันเพื่อสร้างลุคที่สะดุดตา คุณสามารถใช้สไตล์การพิมพ์เพื่อแสดงชื่อธุรกิจของคุณเพื่อที่จะไม่สามารถปฏิเสธได้ตั้งแต่เริ่มต้นธุรกิจของคุณเกี่ยวกับอะไร
หัวข้อย่อยหรือย่อหน้า
ในขณะที่พาดหัวของคุณดึงดูดความสนใจหัวข้อย่อยหรือย่อหน้าแนะนำของคุณให้บริบท เป็นโอกาสของคุณที่จะอธิบายอย่างละเอียดเกี่ยวกับคำสัญญาของพาดหัวและเพิ่มความน่าสนใจ ทำให้มันกระชับและปล่อยให้มันทำงานอย่างกลมกลืนกับพาดหัวหลักของคุณ ตัวอย่างเช่นหากพาดหัวของคุณ ใช้เวลาหนึ่งวันที่สปา หัวข้อย่อยของคุณสามารถอธิบายรายละเอียดและอธิบายสิ่งที่สปาเสนอ
การเรียกร้องให้ดำเนินการอย่างชัดเจน
ฮีโร่ของคุณต้องการจุดประสงค์ที่ชัดเจน คุณต้องการให้ผู้เยี่ยมชมทำอะไรต่อไป? ไม่ว่าคุณต้องการดึงดูดผู้ใช้ให้เรียนรู้เพิ่มเติมซื้อหรือสมัครรับจดหมายข่าวไม่ว่าจะเป็นอะไรก็ตาม CTA ของคุณควรจะใสและโดดเด่น ใช้ภาษาที่เน้นการกระทำเช่น เริ่มต้น หรือ เข้าร่วมวันนี้ CTA ที่วางไว้อย่างดีทำหน้าที่เป็นแนวทางนำผู้เข้าชมไปสู่การกระทำที่ต้องการ
ภาพคุณภาพสูง
มาพูดตรงๆ: ภาพพูดดังกว่าคำพูด ภาพหรือวิดีโอคุณภาพสูงสามารถดึงดูดความสนใจได้ทันทีและตั้งค่าอารมณ์สำหรับเว็บไซต์ของคุณ Divi ทำให้การเพิ่มและสไตล์และวิดีโอในส่วนฮีโร่ของคุณง่ายสุด ๆ ภาพที่ดีสามารถถ่ายทอดอารมณ์เล่าเรื่องราวและสร้างความประทับใจที่ยั่งยืน
พื้นหลังที่ WOWS
พื้นหลังของส่วนฮีโร่ของคุณกำหนดขั้นตอนสำหรับเนื้อหาของคุณ คุณสามารถใช้รูปภาพสีทึบหรือการไล่ระดับสีเพื่อสร้างฉากหลังที่น่าทึ่ง Divi ช่วยให้คุณสามารถควบคุมการตั้งค่าพื้นหลังของคุณได้อย่างสมบูรณ์เพื่อให้คุณสามารถดูเป็นเอกลักษณ์และสะดุดตา ธีมพรีเมี่ยมส่วนใหญ่ช่วยให้คุณสามารถควบคุมการตั้งค่าพื้นหลังได้ช่วยให้คุณสร้างส่วนฮีโร่ที่ไม่ซ้ำกันซึ่งสะท้อนถึงแบรนด์ของคุณและตั้งค่าเสียงสำหรับส่วนที่เหลือของเว็บไซต์ของคุณ
ตัวอย่างของส่วนฮีโร่ (และทำไมพวกเขาถึงทำงาน)
พร้อมที่จะดูว่าส่วนฮีโร่ที่ทรงพลังสามารถเปลี่ยนเว็บไซต์ของคุณได้อย่างไร? มาสำรวจตัวอย่างที่มีประสิทธิภาพที่มีอยู่กับ Divi กันเถอะว่าทำไมพวกเขาถึงทำงาน ด้วยการใช้ชุดเลย์เอาต์ของ Divi หลายชุดเราจะแสดงการออกแบบต่าง ๆ เพื่อสร้างแรงบันดาลใจให้คุณ โปรดจำไว้ว่าสิ่งเหล่านี้เป็นเพียงจุดเริ่มต้น-ความสำเร็จในโลกโลกขึ้นอยู่กับเนื้อหาที่น่าสนใจ (ไม่ใช่ข้อความตัวยึดตำแหน่ง) อย่างไรก็ตามตัวอย่างเหล่านี้จะให้ภาพที่ชัดเจนเกี่ยวกับความเป็นไปได้
ตัวอย่างที่ 1: ซอฟต์แวร์ AI
ตัวอย่างแรกของเราสำหรับ บริษัท ซอฟต์แวร์ AI มันมีจุดแข็งหลายอย่างรวมถึง:
- หัวเรื่องและหัวเรื่องย่อยที่ชัดเจน: อนาคตของ Divi เป็นหัวข้อที่กระชับและน่าสนใจที่สื่อสารโฟกัส ปัญญาประดิษฐ์ หัวเรื่องย่อยให้บริบทและความรู้สึกทันสมัยล้ำสมัยที่ทันสมัย
- การดึงดูดความสนใจทางสายตา: พื้นหลังที่เป็นนามธรรมและอนาคตที่มีองค์ประกอบที่เร่าร้อนนั้นสะดุดตาและเกี่ยวข้องกับธีมของ AI และอนาคต
- ความคมชัดที่แข็งแกร่ง: ข้อความสีขาวกับพื้นหลังสีม่วงให้ความสามารถในการอ่านที่ยอดเยี่ยมและทำให้ข้อความโดดเด่น
- Clear Calls to Action: เข้าร่วม Divi Today และ ฟรีการสาธิต ฟรีทั้งตรงและมุ่งเน้นการดำเนินการบอกผู้ใช้ว่าพวกเขาสามารถทำอะไรได้บ้างและสิ่งที่พวกเขาจะได้รับเมื่อพวกเขาคลิก การมี CTA สองตัวเสนอตัวเลือกที่ผู้ใช้สนใจ
- มันทันสมัย: การออกแบบโดยรวมรูปแบบสีและภาพทำให้เกิดความรู้สึกของนวัตกรรมและการคิดล่วงหน้าซึ่งสอดคล้องกับหัวข้อของ AI และแนวโน้มในอนาคต
ตัวอย่างที่ 2: อุปทานสัตว์เลี้ยง
แพ็คเค้าโครงนี้ออกแบบมาสำหรับเจ้าของธุรกิจสัตว์เลี้ยง นี่คือบางจุดที่ทำให้ส่วนฮีโร่มีประสิทธิภาพ:
- หัวข้อที่ชัดเจน: อุปกรณ์สัตว์เลี้ยงและการสมัครสมาชิกกล่องรายเดือน สื่อสารสิ่งที่ บริษัท ทำทำให้หัวเรื่องตรงไปตรงมาและเข้าใจได้
- Direct CTA: Shop Online เป็น CTA ที่กระชับซึ่งสนับสนุนให้ผู้เยี่ยมชมซื้อผลิตภัณฑ์ของพวกเขา
- ภาพที่เกี่ยวข้องทางสายตา: ภาพหลักของฮีโร่แสดงอาหารสัตว์เลี้ยงเสริมตามธรรมชาติของธุรกิจ นอกจากนี้ยังเพิ่มสีป๊อปเพื่อวาดตาของผู้ใช้
- การออกแบบที่สะอาด: เค้าโครงนั้นไม่กระจัดกระจายทันสมัยและเรียบง่าย พื้นหลังสีขาวและข้อความตัวหนาให้ความคมชัดและความสามารถในการอ่านที่ดี
ตัวอย่างที่ 3: น้ำไม่แสวงหาผลกำไร
ในตัวอย่างนี้ฮีโร่แสดงให้เห็นถึงธุรกิจที่ไม่แสวงหาผลกำไรน้ำ แม้ว่าจะง่าย แต่ฮีโร่ก็มีประสิทธิภาพเพราะ:
- มันมีการสร้างแบรนด์ที่ชัดเจน: ชื่อธุรกิจและสโลแกนที่มาพร้อมกับการสื่อสารภารกิจขององค์กร
- มันดึงดูดสายตา: ภาพพื้นหลังขนาดใหญ่ของมหาสมุทรสร้างภาพที่แข็งแกร่งและเชื่อมต่อกับธีมน้ำทันที
- CTA ที่ชัดเจน: ปุ่ม Make A มีความโดดเด่นและผู้ใช้ใช้ข้อความเชิงแอ็คชั่นเพื่อส่งเสริมการมีส่วนร่วม
- การใช้สถิติ: การเน้นเงินที่ระดมทุนเป็นหลักฐานของผลกระทบขององค์กรการกุศลและสร้างความไว้วางใจในแบรนด์
- เค้าโครงที่กลมกลืนกัน: สไตล์บล็อกสีนำเสนอข้อมูลในลักษณะที่มีโครงสร้างและสวยงามซึ่งมีส่วนที่ชัดเจนสำหรับแง่มุมต่าง ๆ ของการกุศล
ตัวอย่างที่ 4: อสังหาริมทรัพย์
ในชุดรูปแบบเรียลตี้สำหรับ Divi ฮีโร่ใช้ระบบกริดของ Divi เพื่อเพิ่มสี่คอลัมน์ให้กับฮีโร่ มีประสิทธิภาพด้วยเหตุผลสองสามข้อ:
- พาดหัวอย่างกระชับ: ค้นหาบ้านในฝันของคุณด้วยการอุทธรณ์ของ Divi ต่อกลุ่มเป้าหมายและนำเสนอคุณค่า
- ภาพที่แข็งแกร่ง: ภาพพื้นหลังโมโนโครมนั้นแตกต่างจาก CTA สีเขียวทำให้โดดเด่น
- Clear CTAs: ส่วน Hero มี CTA ที่แข็งแกร่งสี่ตัวสำหรับผู้ใช้ที่จะมีส่วนร่วมกับเว็บไซต์
- การออกแบบที่ทันสมัย: การออกแบบที่เรียบง่ายและโทนสีเข้มสร้างรูปลักษณ์ที่ซับซ้อนและทันสมัย
ตัวอย่างเหล่านี้แสดงให้เห็นถึงความเก่งกาจของการออกแบบส่วนฮีโร่ที่ดี ความเป็นไปได้ไม่มีที่สิ้นสุดตั้งแต่เงางามและทันสมัยไปจนถึงการมองเห็นและข้อมูล ตอนนี้เรามาเจาะลึกลงไปในสิ่งที่ทำให้ Divi เป็นเครื่องมือที่เหมาะสำหรับการปรับแต่งและสร้างส่วนฮีโร่ที่สมบูรณ์แบบ

ทำไม Divi เป็นตัวเลือกที่ยอดเยี่ยมสำหรับการออกแบบส่วนฮีโร่
Divi เป็นตัวเปลี่ยนเกมเมื่อพูดถึงการสร้างเว็บไซต์รวมถึงการสร้างส่วนฮีโร่ Divi เสนอตัวสร้างหน้าลากแล้ววางผู้สร้างภาพเพื่อให้คุณสามารถดูว่าเว็บไซต์ของคุณจะดูอย่างไรในขณะที่คุณสร้าง
ชุดรูปแบบเต็มไปด้วยโมดูลการออกแบบมากกว่า 200 โมดูลให้ตัวเลือกไม่ จำกัด สำหรับการสร้างส่วนฮีโร่ที่น่าทึ่งและหน้าเว็บ ด้วยตัวสร้างธีมคุณสามารถปรับแต่งทุกส่วนของไซต์ของคุณจากส่วนหัวของไซต์ไปจนถึงเทมเพลตหน้าเพื่อสร้างรูปลักษณ์ที่ไม่เหมือนใครอย่างแท้จริง
Divi มีห้องสมุดขนาดใหญ่กว่า 2,600 รูปแบบที่ออกแบบอย่างมืออาชีพหากคุณต้องการแรงบันดาลใจ แต่ละเค้าโครงมีส่วนฮีโร่ที่สร้างขึ้นมาอย่างดีซึ่งคุณสามารถปรับแต่งได้อย่างง่ายดายเพื่อให้เข้ากับแบรนด์ของคุณได้อย่างสมบูรณ์แบบ ดังนั้นไม่ว่าคุณจะเป็นมืออาชีพด้านการออกแบบหรือมือใหม่ที่สมบูรณ์ Divi มีทุกสิ่งที่คุณต้องการในการสร้างส่วนฮีโร่ที่โดดเด่น
นอกเหนือจากเลย์เอาต์หลายพันตัว Divi ยังมีวิธีง่าย ๆ ในการสร้างเว็บไซต์ที่สมบูรณ์: Divi Sick Sites คุณสามารถสร้างเว็บไซต์เต็มรูปแบบภายในไม่ถึงสองนาทีโดยใช้เว็บไซต์เริ่มต้นหรือ AI Generative ด้วยการรวมเข้ากับ Divi AI ผู้ช่วยออกแบบออนบอร์ดของ Divi เว็บไซต์เริ่มต้นและเว็บไซต์ที่สร้างขึ้นทั้งหมดมาพร้อมกับหน้าหลักทั้งหมดเทมเพลตตัวสร้างธีมสไตล์โลกและการตั้งค่า WordPress ทั้งหมดที่กำหนดค่าไว้สำหรับคุณ
Divi Sick Sites เป็นวิธีที่ยอดเยี่ยมในการทำให้ความคิดสร้างสรรค์ของคุณไหลและสร้างเว็บไซต์อย่างรวดเร็ว คุณสามารถปรับแต่งสไตล์โลก (แบบอักษรและสี) ได้อย่างง่ายดายเพื่อให้เข้ากับแบรนด์ของคุณได้อย่างสมบูรณ์แบบ คุณไม่ได้ติดอยู่กับลุคเช่นกัน การออกแบบสามารถปรับแต่งได้ แต่คุณต้องการทำให้เป็นของคุณเอง นอกจากนี้คุณสามารถสร้างเว็บไซต์ (และส่วนฮีโร่) ได้มากเท่าที่คุณต้องการในราคาต่ำ $ 89 ต่อปี
รับ Divi
วิธีการออกแบบส่วนฮีโร่กับ Divi
การออกแบบส่วนฮีโร่ด้วย Divi สามารถทำได้ในไม่กี่วิธี คุณสามารถสร้างได้ตั้งแต่เริ่มต้นนำเข้าเค้าโครงที่ทำไว้ล่วงหน้าหรือสร้างส่วนด้วย Divi AI สำหรับโพสต์นี้เราจะเริ่มต้นด้วยหนึ่งในเลย์เอาต์ที่ทำไว้ล่วงหน้าของ Divi และเปลี่ยนการออกแบบเพื่อให้ตรงกับการสร้างแบรนด์ของเรา
เลือกเค้าโครงแพ็ค
สร้างหน้าใหม่บนเว็บไซต์ WordPress ของคุณติดตั้ง Divi และเลือก เลือกเค้าโครงที่ทำไว้ล่วงหน้า เมื่อโหลดหน้าใหม่ จากนั้นคลิก เรียกดูเลย์เอาต์ เพื่อดูการเลือกเลย์เอาต์ที่ทำไว้ล่วงหน้า
Divi อนุญาตให้คุณค้นหาหรือกรองผ่านหมวดหมู่เพื่อค้นหาเค้าโครงที่คุณต้องการเพิ่ม มีหมวดหมู่ให้เลือกมากกว่าโหลดังนั้นการค้นหาประเภทที่เหมาะสมกับความต้องการของคุณจะง่าย สำหรับโพสต์นี้เราจะเลือกชุดเลย์เอาต์เรียลตี้ (ตัวอย่าง #4 ด้านบน) และปรับเปลี่ยนเป็นสำนักงานกฎหมาย
คลิกที่แพ็คและเลือกเค้าโครง หน้า Landing Page คลิกที่ปุ่ม Layout นี้ เพื่อติดตั้งแพ็ค
กล่องโต้ตอบถามว่าคุณต้องการนำเข้าการออกแบบที่ตั้งไว้ล่วงหน้าหรือไม่ Divi Presets เป็นหนึ่งในคุณสมบัติที่ดีที่สุดของธีมช่วยให้คุณสามารถบันทึกและนำรูปแบบการออกแบบกลับมาใช้ใหม่ในเว็บไซต์ของคุณ ด้วยเหตุนี้เราจึงขอแนะนำให้คุณตรวจสอบ Tickbox นั้น จากนั้นคลิก นำเข้า เพื่อดำเนินการต่อ
ทำการเปลี่ยนแปลงการออกแบบในส่วนฮีโร่
ตอนนี้คุณได้ติดตั้งเค้าโครงแล้วเราสามารถปรับเปลี่ยนฮีโร่ของเราเพื่อให้ตรงกับการสร้างแบรนด์ของเรา เราจะเริ่มต้นด้วยการสลับภาพพื้นหลังของฮีโร่ของเรา คลิกที่ไอคอนการตั้งค่าเพื่อเปิดการตั้งค่าส่วน
คลิกเมนูดรอปดาวน์พื้นหลังและเลือกแท็บภาพพื้นหลัง
ลบภาพพื้นหลังที่มีอยู่โดยวางตัวเหนือพื้นที่ภาพและคลิกที่ ไอคอนถังขยะ
เพิ่มอิมเมจพื้นหลังใหม่โดยคลิกปุ่ม เพิ่มภาพพื้นหลัง ในพื้นที่ภาพ เลือกภาพใด ๆ ที่คุณต้องการ แต่ให้แน่ใจว่า กว้าง 1920px เพื่อให้แสดงอย่างถูกต้องบนหน้าจอเดสก์ท็อปขนาดใหญ่
เขียนข้อความใหม่ด้วย divi ai
Divi มีผู้ช่วยออกแบบ AI ของตัวเองที่สร้างขึ้นโดยตรงในตัวสร้างภาพ ช่วยให้คุณสามารถสร้างสำเนาบนแบรนด์ด้วยข้อความแจ้งข้อความ แต่ก่อนอื่นเราจะเปลี่ยนหัวเรื่องเล็ก ๆ ในฮีโร่ คลิกที่ไอคอนการตั้งค่าเพื่อเปิดตัวเลือกของโมดูล เปลี่ยนข้อความหัวเรื่องเล็ก ๆ เป็น บริษัท กฎหมายครอบครัวเบอร์มิงแฮม
ต่อไปเราจะแทนที่หัวเรื่องขนาดใหญ่ในฮีโร่ คราวนี้เราจะใช้ Divi AI เพื่อสร้างพาดหัวที่น่าสนใจสำหรับส่วนฮีโร่ของเรา หากต้องการเปิดใช้งาน Divi AI ให้คลิก ปุ่ม AI ใน ฟิลด์หัวเรื่อง
กล่องโต้ตอบที่มีหลายตัวเลือกจะปรากฏขึ้น เลือก เขียนด้วย AI
เมื่อการตั้งค่าปรากฏขึ้น ประเภทเนื้อหา จะถูกเลือกสำหรับคุณแล้ว บอก Divi AI ว่าคุณกำลังเขียนเกี่ยวกับอะไร (ในกรณีนี้สำนักงานกฎหมายครอบครัว) และเลือก ไม่มีบริบท ภายใต้ ฟิลด์บริบทที่เพิ่มขึ้น Divi AI ทำงานได้ดีที่สุดเมื่อเข้าใจสิ่งที่คุณต้องการดีดังนั้นเมื่อเขียนพรอมต์ของคุณให้เป็นคำอธิบาย
ภายใต้ส่วน Guide me คุณสามารถเลือกเสียงของเสียงเพิ่มคำหลักที่ต้องใช้ใด ๆ กำหนดความยาวเนื้อหาและเลือกภาษา สุดท้ายคลิกปุ่มสร้างข้อความเพื่อสร้างหัวเรื่อง อาจต้องใช้เวลาไม่กี่พยายามที่จะได้รับหัวข้อที่คุณต้องการ แต่ข่าวดีก็คือ Divi AI ให้รุ่นที่ไม่ จำกัด
เพิ่มการเรียกร้องให้ดำเนินการ
ขั้นตอนสุดท้ายในการทำให้ส่วนฮีโร่ของเราเสร็จสมบูรณ์คือการเพิ่มการเรียกร้องให้ดำเนินการ (CTA) ก่อนอื่นเราต้องเปลี่ยนเนื้อหาในสามคอลัมน์แรก แทนที่ไอคอนและข้อความในโมดูลด้วยเนื้อหาที่เกี่ยวข้องกับกฎหมาย Divi มีไอคอนมากกว่า 800 ไอคอนดังนั้นการค้นหาให้พอดีกับช่องของคุณนั้นง่ายและรวดเร็ว
ต่อไปเราจะแทนที่ไอคอนในคอลัมน์ที่สี่ในแถวใต้หัวข้อ วางเมาส์เหนือโมดูลเพื่อลบออก
ในโมดูลหัวเรื่องในคอลัมน์ที่สี่ให้ใช้ Divi AI เพื่อสร้าง CTA ที่น่าดึงดูด โปรดจำไว้ว่าควรส่งเสริมให้ผู้เยี่ยมชมของคุณดำเนินการและเชื่อมโยงไปยังหน้าเว็บที่เกี่ยวข้องในเว็บไซต์ของคุณ
วิธีการออกแบบส่วนฮีโร่ด้วย divi ai
ตอนนี้คุณจะเห็นว่ามันง่ายแค่ไหนในการออกแบบส่วนฮีโร่โดยใช้แพ็คเค้าโครง Divi มาดำดิ่งลงไปในการสร้างส่วนหนึ่งด้วย Divi AI เราได้แสดงให้เห็นว่า Divi AI สามารถสร้างข้อความได้อย่างไร แต่ยังสามารถสร้างรูปภาพรหัสส่วนหน้าเว็บและเว็บไซต์เต็มรูปแบบ (เพิ่มเติมในภายหลัง)
สร้างฮีโร่ Divi ใหม่
เริ่มต้นด้วยการสร้างหน้าใหม่สำหรับเว็บไซต์ Divi ของคุณ แทนที่จะเริ่มต้นด้วยเค้าโครงที่ทำไว้ล่วงหน้าในครั้งนี้ให้เลือก สร้างตั้งแต่เริ่มต้น เมื่อผู้สร้างภาพโหลด
เมื่อผู้สร้างภาพโหลด Divi ให้คุณเพิ่มแถวโดยอัตโนมัติและเสนอเลย์เอาต์ต่างๆ Visual Builder ใช้ระบบกริดเพื่อช่วยให้คุณจัดโครงสร้างและจัดระเบียบเนื้อหาของคุณเป็นแถวและคอลัมน์ Divi เสนอเลย์เอาต์คอลัมน์ที่ตั้งไว้ล่วงหน้าหลายรูปแบบ (เดี่ยวสองเท่ากับสามคอลัมน์ที่มีความกว้างที่แตกต่างกัน ฯลฯ )
Divi AI ใช้ระบบกริดเดียวกันเพื่อสร้างส่วนสำหรับเว็บไซต์ของคุณ อย่างไรก็ตามคุณจะต้องเพิ่มแถวเมื่อคุณวางแผนที่จะสร้างเค้าโครงตั้งแต่เริ่มต้น ยกเลิกกล่องโต้ตอบแถวโดยคลิกที่ X ที่ด้านบนขวาของกริด
ในการสร้างส่วนฮีโร่ด้วย AI ให้เลื่อนบนหน้าและคลิก ไอคอนสีน้ำเงิน +
เลือก สร้างส่วนด้วย AI เมื่อกล่องโต้ตอบปรากฏขึ้น
เมื่อการตั้งค่า Divi AI ปรากฏขึ้นมีไม่กี่ฟิลด์ที่จะกรอก เช่นเดียวกับการสร้างข้อความ Divi AI ต้องการข้อมูลเกี่ยวกับส่วนที่คุณต้องการสร้างและธุรกิจของคุณ นอกจากนี้คุณยังสามารถระบุประเภทของภาพที่คุณต้องการใช้ (สต็อก, Ai-Generated หรือ Placeholder) และแบบอักษรและสีที่คุณต้องการใช้ เมื่อทุกอย่างพร้อมให้คลิกปุ่ม สร้างส่วน เพื่อสร้างฮีโร่ของคุณ
กระบวนการทั้งหมดใช้เวลาไม่กี่วินาที เมื่อเสร็จสมบูรณ์คุณสามารถบันทึกสไตล์ของคุณที่จะนำไปใช้ในทุกส่วนหรือหน้าเว็บที่คุณสร้าง AI จะให้รายการรูปภาพที่ใช้ (รวมถึงลิงค์) หากคุณเลือกภาพสต็อก
ตัวอย่างฮีโร่ divi ai
Divi AI มีความหลากหลายและสามารถสร้างส่วนฮีโร่ที่สวยงามและมีประสิทธิภาพในหมวดหมู่ต่างๆ ลองดูที่เราสร้างขึ้นมาพร้อมกับพรอมต์ของพวกเขา
สร้างส่วนฮีโร่สำหรับหน่วยงานออกแบบ มันควรจะมีพาดหัวที่น่าดึงดูดข้อความสนับสนุนและการเรียกร้องให้ดำเนินการที่โดดเด่น
ออกแบบส่วนฮีโร่สำหรับร้านอาหารพิซซ่า ให้สีสันสดใสพาดหัวหนาและภาพพื้นหลังของพิซซ่าแสนอร่อย
ส่วนฮีโร่สำหรับร้านฮาร์ดแวร์ที่เรียกว่า "ฮาร์ดแวร์ของดี" ควรรวมรูปภาพของเครื่องมือพาดหัวตัวหนาขนาดใหญ่และการเรียกร้องให้ดำเนินการที่โดดเด่น
สร้างส่วนฮีโร่สำหรับ บริษัท สถาปัตยกรรม มันควรจะมีพาดหัวที่เป็นตัวหนาที่มีผลกระทบสีที่ผ่อนคลายและการเรียกร้องให้ดำเนินการอย่างชัดเจน
รับ divi ai
สัมผัสกับ Divi ที่ดีที่สุดที่มีให้กับ Divi Pro
ด้วย Divi Pro คุณจะสามารถเข้าถึงระบบนิเวศของ Divi ทั้งหมด ซึ่งหมายความว่าคุณสามารถจัดการปลั๊กอินและธีมทั้งหมดของคุณในที่เดียวจัดเก็บและนำการออกแบบที่คุณชื่นชอบกลับมาใช้ใหม่ในคลาวด์ร่วมมือกับทีมของคุณได้อย่างง่ายดายและรับการสนับสนุนจากผู้เชี่ยวชาญเมื่อต้องการ Divi Pro ช่วยให้คุณนำเว็บไซต์ของคุณไปสู่อีกระดับ
Divi Pro มาพร้อมกับ:
- Divi AI: สร้างรูปภาพไม่ จำกัด ข้อความรหัสส่วนหน้าเว็บและเว็บไซต์เต็มรูปแบบที่มีข้อความพร้อมข้อความ
- Divi Dash: จัดการปลั๊กอินและธีมทั้งหมดของคุณติดตามลูกค้าทั้งหมดของคุณและรับข้อมูลเชิงลึกที่มีค่าเกี่ยวกับวิธีการทำงานของเว็บไซต์ของคุณ - ทั้งหมดในแผงควบคุมที่สะดวก
- Divi Cloud: กล่าวคำอำลากับไฟล์ JSON ที่ยุ่งเหยิงและการคัดลอกและวางอย่างไม่มีที่สิ้นสุด! ด้วยการคลิกเพียงไม่กี่ครั้งคุณสามารถจัดเก็บและนำเลย์เอาต์ Divi ที่คุณชื่นชอบกลับมาใช้ใหม่ในคลาวด์
- ทีม Divi: ทำงานร่วมกับทีมของคุณได้อย่างง่ายดายและให้พวกเขาเข้าถึงเครื่องมือ Divi ที่น่าทึ่งทั้งหมดที่คุณเป็นเจ้าของ
- Divi VIP: รับการสนับสนุนระดับองค์กรภายในไม่ถึง 30 นาทีหรือน้อยกว่า 24/7, 365 วันต่อปี
- เครดิตตลาด Divi: รับ เครดิต $ 50 เพื่อสำรวจตลาด Divi และค้นหาธีมเด็กที่น่าทึ่งเลย์เอาต์และส่วนขยายเพื่อเพิ่มเว็บไซต์ของคุณ
ด้วยการสมัครสมาชิก Divi Pro ของคุณคุณสามารถนำประสบการณ์การสร้างเว็บไซต์ของคุณไปอีกระดับ มันเหมือนกับการมีทีมงานนักออกแบบผู้เชี่ยวชาญนักพัฒนาและผู้เชี่ยวชาญด้านการสนับสนุนที่ปลายนิ้วของคุณในราคาต่ำถึง 277 ดอลลาร์ต่อปี ซึ่งเพียง $ 23.08 ต่อเดือน
รับ Divi
สร้างความประทับใจครั้งแรกกับ Divi
ส่วนฮีโร่ที่น่าสนใจเป็นสิ่งจำเป็นสำหรับการดึงดูดความสนใจของผู้ใช้และการมีส่วนร่วมในการขับขี่ ท้ายที่สุดคุณจะได้รับโอกาสเพียงครั้งเดียวที่จะสร้างความประทับใจครั้งแรก Divi นำเสนอแพลตฟอร์มที่มีความสามารถมากกว่าในการสร้างส่วนฮีโร่ที่มีผลกระทบทำให้ง่ายขึ้นและง่ายขึ้นกว่าเดิม ด้วยตัวสร้างภาพที่ใช้งานง่ายและผู้ช่วยออกแบบที่ทรงพลัง Divi AI คุณสามารถออกแบบส่วนฮีโร่ได้ในไม่กี่นาที ด้วย Divi และ Divi AI คุณสามารถจับผู้ชมด้วยคลิกแรก