วิธีสร้างส่วนฮีโร่ด้วยโมดูลส่วนหัวแบบเต็มความกว้างของ Divi

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

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

มาเริ่มกันเลย!

แอบมอง

นี่คือตัวอย่างสิ่งที่เราจะออกแบบ

สิ่งที่คุณต้องการเพื่อเริ่มต้น

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

ตอนนี้คุณพร้อมที่จะเริ่มแล้ว!

วิธีสร้างส่วนฮีโร่ด้วยโมดูลส่วนหัวแบบเต็มความกว้างของ Divi

สร้างหน้าใหม่ด้วยเค้าโครงที่สร้างไว้ล่วงหน้า

เริ่มต้นด้วยการใช้เลย์เอาต์ที่สร้างไว้ล่วงหน้าจากไลบรารี Divi สำหรับการออกแบบนี้ เราจะใช้ Veterinarian Landing Page จาก Veterinarian Layout Pack

เพิ่มหน้าใหม่ในเว็บไซต์ของคุณและตั้งชื่อ จากนั้นเลือกตัวเลือกเพื่อใช้ Divi Builder

เราจะใช้เลย์เอาต์ที่สร้างไว้ล่วงหน้าจากไลบรารี Divi สำหรับตัวอย่างนี้ ดังนั้นให้เลือกเรียกดูเลย์เอาต์

ค้นหาและเลือกเค้าโครงหน้า Landing Page สัตวแพทย์

เลือกใช้เลย์เอาต์นี้เพื่อเพิ่มเลย์เอาต์ให้กับเพจของคุณ

ตอนนี้เราพร้อมที่จะสร้างการออกแบบของเราแล้ว

เพิ่มโมดูลส่วนหัวแบบเต็ม

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

เพิ่มโมดูลส่วนหัวแบบเต็มความกว้างในส่วน

จากนั้นลบส่วนหัวเดิม

ปรับแต่งโมดูลส่วนหัวแบบเต็มความกว้าง

เพิ่มเนื้อหา

เปิดการตั้งค่าโมดูลส่วนหัวแบบเต็มและเพิ่มเนื้อหาต่อไปนี้ในโมดูล:

• Title: สัตวแพทย์
• คำบรรยาย: DiviVet. ให้บริการเพื่อนที่ดีที่สุดของเรา
• ปุ่ม #1: ดูบริการทั้งหมด
• ปุ่ม #2: นัดหมาย
• ร่างกาย: Praesent sapien massa, convallis a pellentesque nec, egestas non nisi Nulla quis lorem ut libero malesuada feugiat Curabitur arcu erat, accumsan id imperdiet et, porttitor ที่ sem. Cras ultricies ligula sed magna dictum porta.

ถัดไป เพิ่มรูปภาพส่วนหัวของสัตวแพทย์กับสัตว์

การตั้งค่าพื้นหลังไล่ระดับสี

ย้ายไปที่การตั้งค่าพื้นหลัง ลบสีพื้นหลังดั้งเดิม แล้วเพิ่มการไล่ระดับสีพื้นหลัง

• 0%: rgba(255,170,205,0.48)
• 40%: rgba(110,66,255,0.24)
• 87%: rgba(124,239,255,0.71)
• ประเภทการไล่ระดับสี: วงรี
• ตำแหน่งไล่ระดับ: ขวา

จากนั้นเลือกแท็บมาสก์พื้นหลังและเพิ่มมาสก์พื้นหลังไปที่พื้นหลัง

• มาสก์พื้นหลัง: Corner Blob
• หน้ากากสี: #FFFFFF
• การแปลงหน้ากาก: แนวตั้ง

ปรับแต่งสไตล์ข้อความ

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

• แบบอักษรของชื่อเรื่อง: Nunito
• น้ำหนักแบบอักษรของชื่อเรื่อง: Ultra Bold
• รูปแบบตัวอักษรของชื่อเรื่อง: TT (ตัวพิมพ์ใหญ่)

แก้ไขสีข้อความขนาดและระยะห่างของชื่อเรื่อง

• สีข้อความชื่อเรื่อง: #a9cb6b
• ขนาดข้อความชื่อเรื่อง: 14px
• ระยะห่างของตัวอักษรชื่อเรื่อง: 2px

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

• สีข้อความ: #000000
• ขนาดข้อความ-เดสก์ท็อป: 18px
• ขนาดข้อความ: มือถือ: 14px
• ความสูงของเส้นร่างกาย: 1.8em

ถัดไป เปิดการตั้งค่าคำบรรยายและกำหนดแบบอักษรเอง

• ฟอนต์คำบรรยาย: Nunito
• คำบรรยาย น้ำหนักแบบอักษร: ตัวหนา
• สีข้อความคำบรรยาย: #000000

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

• ขนาดข้อความคำบรรยาย–เดสก์ท็อป: 56px
• ขนาดข้อความคำบรรยาย - มือถือ: 32px
• ความสูงของบรรทัดคำบรรยาย: 1.2em

ปรับแต่งสไตล์ปุ่มเดียว

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

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่มที่หนึ่ง: ใช่
• ขนาดข้อความปุ่มเดียว: 14px

เพิ่มการไล่ระดับสีพื้นหลังให้กับปุ่ม ค่าการไล่ระดับสีมีดังนี้:

• 58%: #316EFF
• 100%: #1D2B60
• ทิศทางการไล่ระดับสี: 90deg

ถัดไป ปรับแต่งการตั้งค่าเส้นขอบและการตั้งค่าแบบอักษร

• ความกว้างของขอบปุ่มหนึ่ง: 0px
• รัศมีเส้นขอบหนึ่งปุ่ม: 80px
• ปุ่มหนึ่งตัวอักษรเว้นวรรค: 2px
• แบบอักษรปุ่มหนึ่ง: Nunito
• น้ำหนักแบบอักษรปุ่มเดียว: หนาเป็นพิเศษ
• รูปแบบตัวอักษรปุ่มหนึ่ง: TT (ตัวพิมพ์ใหญ่)

ปิดใช้งานไอคอนปุ่มหนึ่ง

• แสดงไอคอนปุ่มหนึ่ง: ไม่

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

• ปุ่มหนึ่งขอบบนเดสก์ท็อป: 200px
• ปุ่มหนึ่งขอบ-ล่าง-เดสก์ท็อป: 0px
• ปุ่มหนึ่ง Padding-Top-Desktop: 16px
• ปุ่มหนึ่ง Padding-Bottom-Desktop: 16px
• ปุ่มหนึ่ง Padding-Left-Desktop: 2em
• ปุ่มหนึ่ง Padding-Right-Desktop: 50em
• ปุ่มกล่องเงา: ด้านล่าง

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

• ปุ่มหนึ่ง Margin-Top-Mobile: 25px
• ปุ่มหนึ่ง Padding-Right-Mobile: 10em

ปุ่มของเรามีปัญหาการตัดข้อความบางส่วนที่เราจะแก้ไขด้วย CSS ที่กำหนดเองในภายหลัง

ปรับแต่งปุ่มสองสไตล์

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

ขั้นแรก ให้คลิกขวาที่ปุ่มหนึ่งส่วน และคัดลอกปุ่มหนึ่งลักษณะ

จากนั้นคลิกขวาที่ปุ่มสองส่วนแล้ววางปุ่มหนึ่งลักษณะ

ตอนนี้เราสามารถปรับแต่งปุ่มได้สองสไตล์ เปลี่ยนสีข้อความ

• ปุ่มสองสีข้อความ: #121F60

ปรับแต่งการไล่ระดับสีพื้นหลังสำหรับปุ่มที่สอง

• 30%: rgba(0,229,198,0)
• 100%: #00e5c6

ใช้การตั้งค่าที่ตอบสนองเพื่อปรับการไล่ระดับสีพื้นหลังสำหรับอุปกรณ์เคลื่อนที่

• 0%: rgba(0,229,198,0)
• 100%: #00e5c6

ถัดไป ปรับระยะขอบและช่องว่างภายในสำหรับการออกแบบเดสก์ท็อป

• ปุ่มที่สอง Margin-Top-Desktop: 0px
• ปุ่มที่สอง Margin-Bottom-Desktop: 0px
• ปุ่มสอง Margin-Left-Desktop: 30%
• ปุ่มที่สอง Padding-Top-Desktop: 16px
• ปุ่มที่สอง Padding-Bottom-Desktop: 16px
• ปุ่มที่สอง Padding-Left-Desktop: 48em
• ปุ่มที่สอง Padding-Right-Desktop: 2em

ใช้การตั้งค่าที่ตอบสนองเพื่อตั้งค่าระยะขอบและช่องว่างภายในที่แตกต่างกันสำหรับการออกแบบมือถือ

• ปุ่มที่สอง Margin-Left-Mobile: 5%
• ปุ่มที่สอง Padding-Left-Mobile: 35%
• ปุ่มที่สอง Padding-Right-Mobile: 5%

CSS ที่กำหนดเอง

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

อันดับแรก เริ่มจาก CSS ของรูปภาพส่วนหัว CSS นี้ช่วยให้รูปภาพส่วนหัวแสดงเหนือปุ่มได้

z-index: 1;
position:relative;

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

สำหรับเดสก์ท็อป:

padding-top:50px;
padding-bottom:30px;

สำหรับมือถือ:

padding-top:5px;
padding-bottom:10px;

สุดท้าย เพิ่ม CSS ต่อไปนี้ในปุ่มที่หนึ่งและปุ่มที่สอง

white-space: nowrap;

ผลสุดท้าย

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

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

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