Divi: วิธีใส่ปุ่มเลื่อนลงในโมดูลส่วนหัวแบบเต็ม

คุณต้องการเพิ่มโมดูลส่วนหัวแบบเต็มของ .หรือไม่ Divi ปุ่มเลื่อนลง?

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

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

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

ภาพรวมของปุ่มเลื่อนลง

อันดับแรก มาดูการออกแบบที่เราจะสร้างในบทความนี้กันก่อน

ตัวอย่าง 1

ตัวอย่าง 2

ดาวน์โหลด DIVI ทันที !!!

ตัวอย่าง 3

ตัวอย่าง 4

ดาวน์โหลด DIVI ทันที !!!

ปุ่มเลื่อนลง การออกแบบส่วนหัวแบบเต็มความกว้าง

อันดับแรก เราจะสร้างการออกแบบส่วนหัวแบบเต็มความกว้าง ฉันกำลังสร้างมันขึ้นมาจากศูนย์โดยใช้การออกแบบจาก แพ็คเลย์เอาต์การรักษาฟรีใน Divi . สร้างหน้าใหม่และเพิ่ม a โมดูลส่วนหัวเต็มความกว้าง ไปยังส่วนเต็มความกว้างใหม่

ดูสิ่งนี้ด้วย: Divi: วิธีสร้างผังงานด้วยโมดูล Blurb

ตัวแบ่งส่วนความกว้างเต็ม

เราจะเพิ่มตัวแบ่งสำหรับส่วนหัวแบบเต็มความกว้างนี้ เปิดการตั้งค่าของ ส่วนความกว้างเต็ม .

จากนั้นเลื่อนลงไปที่ divider . คลิกที่แท็บ ด้านล่าง และเลือกรูปแบบตัวคั่นที่ 8 ตั้งค่าสีเป็น #e5e8f0 และป้อน 10vw สำหรับความสูง ปิดการตั้งค่าส่วน

• วงเวียน: ต่ำ
• สไตล์: สไตล์ที่ 8
• สี: #e5e8f0
• ส่วนสูง: 10vw

ข้อความส่วนหัว

จากนั้น เปิดโมดูล Fullwidth Header และเพิ่มชื่อเรื่อง คำบรรยาย และข้อความปุ่ม ลบข้อความจำลองสำหรับ เนื้อหา ของร่างกายแล้วปล่อยว่างไว้

• ชื่อเรื่อง: เริ่มต้นการเดินทางของคุณเพื่อความรู้สึกที่ดีขึ้นวันนี้
• คำบรรยาย: Leslie Saindon นักบำบัดโรคที่ได้รับใบอนุญาต
• ปุ่ม #1: นัดหมาย
• บอดี้สูท: none

ภาพส่วนหัว

เลื่อนไปที่ ภาพ และเลือกรูปภาพส่วนหัว ฉันเลือกรูปภาพที่ให้มาพร้อมกับ ชุดเค้าโครงบำบัด.

พื้นหลังส่วนหัว

เลื่อนไปที่ พื้นหลัง. ลบสีพื้นหลังแล้วเลือก tab พื้นหลังไล่โทนสี.

• ไล่ระดับหยุด:
  • 25%: #2e5b61
  • 100%: RGBA (46, 91, 97, 0,5)

ทำให้สามารถ วางการไล่ระดับสีเหนือภาพพื้นหลัง .

• สี่เหลี่ยมไล่ระดับสีเหนือภาพพื้นหลัง : ใช่

ภาพพื้นหลังส่วนหัวแบบเต็มความกว้าง

จากนั้นเลือกภาพพื้นหลัง tab และเลือกภาพเต็มหน้าจอ ฉันกำลังใช้รูปภาพอื่นจาก Therapy Layout Pack

• ตำแหน่งภาพพื้นหลัง: กึ่งกลางด้านบน

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

จากนั้นเลือกแท็บออกแบบ และเปิดใช้งาน ทำให้เต็มหน้าจอ .

• ทำให้เต็มหน้าจอ: ใช่

ไอคอนเลื่อนลงส่วนหัวแบบเต็มความกว้าง

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

• แสดงปุ่มเลื่อนลง: ใช่

รูปภาพส่วนหัว

จากนั้นเลื่อนลงไปที่ ภาพ และเปลี่ยนมุมโค้งมนบนซ้ายเป็น 200px สำหรับเดสก์ท็อป ตั้งค่ามุมโค้งมนที่เหลือเป็น 0px เปลี่ยนมุมโค้งมนเป็น 100 พิกเซลสำหรับแท็บเล็ตและโทรศัพท์

• มุมโค้งมนของรูปภาพ:
  • เดสก์ท็อป: ซ้ายบน 200px, 0px อื่น ๆ ทั้งหมด
  • แท็บเล็ตและโทรศัพท์: บนซ้าย 100px, 0px อื่น ๆ ทั้งหมด

ข้อความหัวเรื่อง

จากนั้นเลื่อนลงไปที่ ข้อความชื่อเรื่อง. ใช้ H1 สำหรับระดับหัวเรื่อง เลือก Cormorant Garamond สำหรับฟอนต์ชื่อ ตั้งค่าน้ำหนักเป็น Bold และสีเป็น #e1cea

• หัวข้อ:
  • ระดับหัวเรื่อง: H1
  • แบบอักษร: Cormorant Garamond
  • น้ำหนักแบบอักษร: ตัวหนา
  • สีข้อความ: #e1cea

จากนั้นตั้งค่า ขนาด สำหรับหน้าจอทั้งสามขนาด ใช้ 90 พิกเซลสำหรับเดสก์ท็อป 40 พิกเซลสำหรับแท็บเล็ต และ 24 พิกเซลสำหรับโทรศัพท์ เปลี่ยนความสูงของบรรทัดเป็น 1.1em

• ขนาดข้อความชื่อเรื่อง: 90px, 40px, 24px
• ความสูงของบรรทัดหัวเรื่อง: 1,1 em

ข้อความคำบรรยายส่วนหัวแบบเต็มความกว้าง

จากนั้นเลื่อนลงไปที่ ข้อความคำบรรยาย. เปลี่ยนแบบอักษรเป็น Inter น้ำหนักเป็นตัวหนา และสีเป็น #e1cea

• คำบรรยาย :
  • แบบอักษร: Inter
  • น้ำหนักแบบอักษร: ตัวหนา
  • สีข้อความ: #e1cea

ตั้งค่า ขนาด ที่ 22px สำหรับเดสก์ท็อป 20px สำหรับแท็บเล็ต และ 16px สำหรับโทรศัพท์ เปลี่ยนมัน ความสูงของแถว ที่ 1,6 ม.

• ขนาดข้อความคำบรรยาย: 22px, 20px, 16px
• ความสูงของบรรทัดคำบรรยาย: 1,6 em

ปุ่มส่วนหัว

เลื่อนลงไปที่การตั้งค่า ปุ่มหนึ่ง และเปิดใช้งาน ใช้สไตล์ที่กำหนดเองสำหรับปุ่มหนึ่ง . เปลี่ยนขนาดเป็น 14px สีข้อความเป็น #2e5b61 และสีพื้นหลังเป็น #e1cea

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

เปลี่ยนความกว้างของ ชายแดน ที่ 0px และรัศมีของ ชายแดน ที่ 50px ใช้ Inter สำหรับฟอนต์และเปลี่ยนน้ำหนักเป็นกึ่งหนา

• ปุ่มที่หนึ่ง:
  • ความกว้างของเส้นขอบ: 0px
  • รัศมีเส้นขอบ: 50px
  • แบบอักษร: Inter
  • น้ำหนัก: หนา

สำหรับ ปุ่ม padding , ใช้ 20px สำหรับบนและล่าง และ 40px สำหรับซ้ายและขวา

• ปุ่มที่หนึ่ง Padding: 20 px บนและล่าง 40 px ซ้ายและขวา

อ่าน: Divi: วิธีสร้างส่วน Fluid Hero

ตัวอย่างปุ่มเลื่อนลง

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

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

• การเลือกไอคอน – เลือกจาก 11 ไอคอน ประกอบด้วยการออกแบบลูกศรแบบต่างๆ ที่มีหรือไม่มีพื้นหลัง รวมทั้งไม่มีวงกลม วงกลม และทึบ
• สี – เครื่องมือเลือกสี Divi มาตรฐาน.
• ขนาด – การปรับขนาด Divi มาตรฐาน

นอกจากนี้ยังมีฟิลด์ CSS ในแท็บขั้นสูง 

เราจะใช้พารามิเตอร์เหล่านี้ทั้งหมด

ดูสิ่งนี้ด้วย: Divi: มาสก์และรูปแบบซ้อนทับ 5 แบบที่ใช้กับภาพพื้นหลัง

ตัวอย่าง #1

สำหรับตัวอย่างแรก เราจะใช้ไอคอนที่ไม่มีวงกลมไม่มีพื้นหลัง เลือกไอคอนแรก เปลี่ยนสีเป็น #e1ecea และเปลี่ยนขนาดเป็น 66px สำหรับเดสก์ท็อป 60px สำหรับแท็บเล็ต และ 50px สำหรับโทรศัพท์

• ไอคอน: ไอคอนที่ 1
• สี: #e1cea
• ขนาด: 66px (เดสก์ท็อปและแท็บเล็ต), 50px (โทรศัพท์)

ซึ่งจะสร้างลูกศรชี้ลงสีเขียวอ่อนซึ่งทำงานได้ดีกับการออกแบบส่วนที่เหลือ และโดดเด่นมากพอที่จะแจ้งให้ผู้ใช้ทราบ

ตัวอย่าง 2

สำหรับตัวอย่างที่สอง เราจะใช้ไอคอนวงกลม เลือกไอคอนที่เจ็ดและเปลี่ยนสีเป็น #e8c553 เราจะขยายไอคอนสำหรับอันนี้ เปลี่ยนขนาดเป็น 78px สำหรับเดสก์ท็อป 70px สำหรับแท็บเล็ต และ 60px สำหรับโทรศัพท์

• ไอคอน: ไอคอนที่ 7
• สี: #e8c553
• ขนาด: 78px (เดสก์ท็อป), 70px (แท็บเล็ต), 60px (โทรศัพท์)

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

ตัวอย่าง 3

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

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

เลือกไอคอนที่แปดและเปลี่ยนสีเป็น #0e4951 ตั้งค่าขนาดเป็น 60px สำหรับเดสก์ท็อป 56pc สำหรับแท็บเล็ต และ 50px สำหรับโทรศัพท์

• ไอคอน: ไอคอนที่ 8
• สี: #0e4951
• ขนาด: 60px (เดสก์ท็อป), 56px (แท็บเล็ต), 50px (โทรศัพท์)

สีเขียวเป็นเฉดสีเขียวเข้มที่พื้นหลัง เฉดสีที่เข้มกว่านั้นโดดเด่นกว่าสีเขียวและยังคงเข้ากับส่วนที่เหลือของเลย์เอาต์

ตัวอย่าง 4

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

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

เลือกไอคอนที่ 1 และเปลี่ยนสีเป็น #e50cea เราจะตั้งค่าไอคอนให้เล็กลงสำหรับไอคอนนี้และสร้างรูปร่างพื้นหลังขนาดใหญ่ เปลี่ยนขนาดเป็น 40px สำหรับเดสก์ท็อป 30px สำหรับแท็บเล็ต และ XNUMXpx สำหรับโทรศัพท์

• ไอคอน: 11^TH
• สี: #e1cea
• ขนาด: 50px (เดสก์ท็อป), 40px (แท็บเล็ต), 30px (โทรศัพท์)

จากนั้นไปที่แท็บ ระดับสูง และเลื่อนไปที่สนาม ปุ่มเลื่อนลง และป้อน CSS นี้:

border-radius: 45%;
padding:12px 40px 14px 40px;
background-color:#2e5b61

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

ผลลัพธ์จากตัวอย่างต่างๆ

ตัวอย่าง 1

ตัวอย่าง 2

ดาวน์โหลด DIVI ทันที !!!

ตัวอย่าง 3

ตัวอย่าง 4

ดาวน์โหลด DIVI ทันที !!!

สรุป

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

ด้วยการใช้ฟิลด์ CSS คุณสามารถปรับแต่งปุ่มเพิ่มเติมได้ การผสมผสานระหว่างตัวเลือกการจัดรูปแบบปุ่มและ CSS ช่วยให้คุณออกแบบได้มากมายด้วยปุ่มแบบเลื่อนลง

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

ปรึกษาได้นะคะ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณ

อย่าลังเลที่จะปรึกษาคำแนะนำของเราเกี่ยวกับ การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.

แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.

...