วิธีวางตำแหน่งปุ่มเพื่อสร้างเค้าโครงปุ่มที่ไม่ซ้ำใน Divi

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

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

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

แอบมอง

ลองดูรูปแบบปุ่มสี่ปุ่มที่เราจะสร้างในบทช่วยสอนนี้

ดาวน์โหลดเค้าโครงปุ่ม Divi ฟรี

หากต้องการวางมือบนการออกแบบเลย์เอาต์ปุ่มจากบทช่วยสอนนี้ คุณจะต้องดาวน์โหลดโดยใช้ปุ่มด้านล่างก่อน ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

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

ในการนำเข้าเลย์เอาต์ไปยังเพจของคุณ เพียงแตกไฟล์ zip แล้วลากไฟล์ JSON ไปที่ Divi Builder

ไปกวดวิชากันเถอะ

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

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
3. เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

หลังจากนั้น คุณจะมีผืนผ้าใบเปล่าเพื่อเริ่มออกแบบใน Divi

การสร้างเค้าโครงปุ่ม #1: ปุ่มล่างคู่

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

ในการเริ่มต้น ให้เพิ่มแถวสองคอลัมน์ (0ne ครึ่งหนึ่งครึ่ง) ในส่วน

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 2
• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่
• ความกว้าง: 100%
• ระยะขอบ: ด้านล่าง 50px
• ช่องว่างภายใน: 0px บน, 0px ด้านล่าง

คอลัมน์ 1 การตั้งค่า

• สีพื้นหลัง: #2e3858
• ช่องว่างภายใน: 50px ด้านล่าง

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

การออกแบบโมดูล Blurb

ถัดไป เพิ่มโมดูลการนำเสนอลงในคอลัมน์ 1

จากนั้นอัปโหลดรูปภาพไปยังโมดูลการนำเสนอดังนี้:

ไปที่การตั้งค่าการออกแบบและอัปเดตสิ่งต่อไปนี้:

• การจัดตำแหน่งรูปภาพ/ไอคอน: ซ้าย
• แบบอักษรของชื่อเรื่อง: PT Sans
• น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
• สีข้อความของชื่อเรื่อง: #ffffff
• ขนาดข้อความชื่อเรื่อง: 38px
• ระยะห่างของตัวอักษรชื่อเรื่อง: 2px
• สีข้อความ: #ffffff
• ความกว้างของภาพ: 40%
• ความกว้างของเนื้อหา: 100%
• ความกว้าง: 100%
• ช่องว่างภายใน: 50px, บน, 50px ล่าง, 30px ซ้าย, 30px ขวา

การเพิ่มปุ่มด้านล่างคู่

การออกแบบปุ่ม #1

เพิ่มโมดูลปุ่มใหม่ภายใต้โมดูลประกาศ

จากนั้นอัปเดตการตั้งค่าปุ่มดังนี้:

• ขนาดข้อความของปุ่ม: 16px
• สีข้อความของปุ่ม: #ffffff
• สีพื้นหลังของปุ่ม: #2dc3a3
• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 0px
• ระยะห่างระหว่างตัวอักษรของปุ่ม: 2px
• แบบอักษรของปุ่ม: PT Sans
• น้ำหนักแบบอักษรของปุ่ม: ตัวหนา
• รูปแบบตัวอักษรของปุ่ม: TT
• ระยะขอบ: 0px ด้านล่าง
• Padding: บน 1em, 1em ล่าง, 1.5em ซ้าย, 2.5em ขวา

ปุ่ม #1 การจัดตำแหน่งแบบสัมบูรณ์

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

• ตำแหน่ง: Absolute
• ตำแหน่ง: ล่างซ้าย

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

ปุ่ม #2 การออกแบบและตำแหน่ง

ในการสร้างปุ่ม #2 ให้ทำซ้ำโมดูลปุ่มก่อนหน้า

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

• สีพื้นหลัง: #df4570

• ตำแหน่งตำแหน่ง: ล่างขวา

ตอนนี้ลบคอลัมน์ที่ว่างเปล่า 2 ในปัจจุบันและทำซ้ำคอลัมน์ 1 เพื่อรับการออกแบบที่ซ้ำกันในคอลัมน์ทางขวาด้วย

เค้าโครงปุ่ม #1 ผลลัพธ์

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

การสร้างเค้าโครงปุ่ม #2: ปุ่มด้านข้างสามปุ่ม

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

เมื่อต้องการเริ่มต้นการออกแบบเค้าโครงปุ่มถัดไปนี้ ให้ทำซ้ำแถวก่อนหน้า

การตั้งค่า Blurb

อัปเดตการตั้งค่าการนำเสนอดังนี้:

• สีพื้นหลัง: #df4570
• ความกว้างของภาพ: 60%
• ความกว้าง: 56% (เดสก์ท็อปและแท็บเล็ต), 100% (โทรศัพท์)

สิ่งนี้จะสร้างห้องที่เราต้องการทางด้านขวาของประกาศเพื่อเพิ่มเลย์เอาต์สามปุ่มของเรา

ปุ่มวางตำแหน่ง #1

ในการวางตำแหน่งปุ่ม #1 ให้เปิดการตั้งค่าปุ่มสำหรับปุ่มสีเขียวที่มุมล่างซ้ายและอัปเดตสิ่งต่อไปนี้:

• ตำแหน่ง: Absolute (เดสก์ท็อปและแท็บเล็ต), ญาติ (โทรศัพท์)
• ตำแหน่ง: บนขวา
• ออฟเซ็ตแนวตั้ง: 20% (เดสก์ท็อปและแท็บเล็ต), 0% (โทรศัพท์)
• ออฟเซ็ตแนวนอน: 5% (เดสก์ท็อปและแท็บเล็ต), 0% (โทรศัพท์)

ปุ่มกำหนดตำแหน่ง #2

หากต้องการวางตำแหน่งปุ่ม #2 ให้ทำซ้ำปุ่มที่คุณเพิ่งจัดตำแหน่งไว้ คุณสามารถลบปุ่มสีแดงที่ด้านล่างขวาได้ เพราะเราไม่ต้องการมัน

จากนั้นเปิดการตั้งค่าสำหรับปุ่มที่ซ้ำกันและอัปเดตสิ่งต่อไปนี้:

• สีพื้นหลัง: #df4570

จากนั้นเลื่อนปุ่มลงเล็กน้อยโดยเพิ่มออฟเซ็ตแนวตั้ง

• ออฟเซ็ตแนวตั้ง: 35%

ปุ่มกำหนดตำแหน่ง #3

สุดท้าย ทำซ้ำขั้นตอนอีกครั้งโดยทำซ้ำปุ่มก่อนหน้าและอัปเดตสิ่งต่อไปนี้:

• สีพื้นหลัง: #3599e5
• ออฟเซ็ตแนวตั้ง: 50%

เค้าโครงปุ่ม #2 ผลลัพธ์

ตรวจสอบผลลัพธ์สุดท้ายของเค้าโครงสามปุ่ม

การสร้างเค้าโครงปุ่ม #3: ปุ่มที่กระจัดกระจายและปรับขนาด

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

ในการเริ่มต้น ให้ทำซ้ำแถวก่อนหน้าที่มีเค้าโครงสามปุ่ม

การตั้งค่า Blurb

จากนั้นเปิดการตั้งค่าสำหรับโมดูลการนำเสนอในคอลัมน์ 1 และอัปเดตสิ่งต่อไปนี้:

• ความกว้าง: 60%

• สีพื้นหลัง: โปร่งใส
• ความกว้าง: 60%
• การจัดตำแหน่งโมดูล: ศูนย์

• การจัดตำแหน่งข้อความ: center
• การจัดตำแหน่งโมดูล: ศูนย์

• ความกว้างของเส้นขอบ: 2px
• เส้นขอบสี: rgba(255,255,255,0.15)

• ขนาดข้อความ: 20px

• ขอบ: 50px ด้านบน

ปุ่ม #1 การวางตำแหน่ง

• ออฟเซ็ตแนวตั้ง: 8%
• ออฟเซ็ตแนวนอน: -7%

ปุ่ม #2 การวางตำแหน่ง

• ตำแหน่งตำแหน่ง: บนขวา
• ออฟเซ็ตแนวตั้ง: 34%
• ออฟเซ็ตแนวนอน: -10%

• แปลงมาตราส่วน: 80%

ปุ่ม #3 การวางตำแหน่ง

• ตำแหน่ง ตำแหน่ง: ล่างขวา
• ออฟเซ็ตแนวตั้ง: -3%
• ออฟเซ็ตแนวนอน: 5%

• แปลงขนาด: 138%

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

• ความกว้างของรางน้ำ: 4
• ความกว้าง: 80% (เดสก์ท็อป)

เค้าโครงปุ่ม #3 ผลลัพธ์

ตรวจสอบผลลัพธ์สุดท้าย

การสร้างเค้าโครงปุ่ม #4: ปุ่มดึงแท็บ

สำหรับรูปแบบปุ่มสุดท้ายนี้ เราจะสร้างแถบดึงที่ด้านบนขวาของการนำเสนอ

หากต้องการเริ่มต้นการออกแบบ ให้ทำซ้ำแถวของเค้าโครงปุ่ม #2

การตั้งค่าคอลัมน์

ถัดไป อัปเดตการตั้งค่าพื้นหลังสำหรับคอลัมน์ #1 ดังนี้:

• สีพื้นหลัง (เดสก์ท็อป): ไม่มี (ค่าเริ่มต้น)
• สีพื้นหลัง (โทรศัพท์): #2e3858

ใต้แท็บขั้นสูง ให้อัปเดตตัวเลือกการมองเห็นเพื่อซ่อนโอเวอร์โฟลว์บนจอแสดงผลของโทรศัพท์

• แนวนอนล้น (โทรศัพท์): ซ่อน
• แนวตั้งล้น (โทรศัพท์): ซ่อน

ปุ่มดึงแถบตำแหน่ง #1

ตอนนี้ เราสามารถใช้ปุ่มสามปุ่มในคอลัมน์เป็นปุ่มแบบดึงแท็บได้ เปิดการตั้งค่าสำหรับปุ่มด้านบนและอัปเดตสิ่งต่อไปนี้:

• ออฟเซ็ตแนวตั้ง: 0px
• ออฟเซ็ตแนวนอน: 0px

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

• Padding: 2em ซ้าย 3em ขวา

จากนั้นเพิ่ม CSS ที่กำหนดเองต่อไปนี้ในองค์ประกอบ After:

padding-left: 10px;

จากนั้นอัปเดตออฟเซ็ตแนวนอนบนโทรศัพท์ดังนี้:

• ออฟเซ็ตแนวนอน (โทรศัพท์): -134px

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

ปุ่มแถบดึงตำแหน่ง #2

หากต้องการวางตำแหน่งปุ่มดึงปุ่มที่สอง ให้ทำซ้ำปุ่มก่อนหน้าและอัปเดตสีพื้นหลังของปุ่มที่ซ้ำกัน

• สีพื้นหลัง: #df4570

จากนั้นอัปเดตตำแหน่งดังนี้:

• ออฟเซ็ตแนวตั้ง: 63px

จากนั้นอัปเดตตัวเลือกตำแหน่งต่อไปนี้สำหรับการแสดงโทรศัพท์:

• ตำแหน่ง (โทรศัพท์): ญาติ
• ออฟเซ็ตแนวตั้ง (โทรศัพท์): 0%

ปุ่มดึงแถบกำหนดตำแหน่ง #3

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

• สีพื้นหลัง: #3599e5
• ออฟเซ็ตแนวตั้ง: 126px

เมื่อปุ่มที่สามอยู่ในตำแหน่งแล้ว ให้ใช้คุณสมบัติการเลือกหลายรายการของ Divi โดยกด Cmd (หรือ Ctrl) ค้างไว้แล้วคลิกโมดูลปุ่มแต่ละโมดูล

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

• แปลงแกน X แปล (โฮเวอร์): 68%

การดำเนินการนี้จะอัปเดตปุ่มทั้งสามด้วยฟังก์ชันดึงแท็บเมื่อวางเมาส์ไว้ โดยเลื่อนไปทางขวา 68%

การวางตำแหน่งโมดูล Blurb

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

เปิดการตั้งค่าโมดูลการนำเสนอและอัปเดตสิ่งต่อไปนี้:

• ความกว้าง: อัตโนมัติ
• ขอบ: 50px ขวา
• ตำแหน่ง: ญาติ
• ดัชนี Z: 11

จากนั้นอัปเดตสีพื้นหลัง

• สีพื้นหลัง: #2e3858

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

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

• ความกว้าง: 80%

ลบคอลัมน์ 2 แล้วทำซ้ำคอลัมน์ 1 เพื่อให้คุณมีการออกแบบที่เหมือนกันในแต่ละคอลัมน์

จากนั้นเปิดการตั้งค่าสำหรับคอลัมน์ 1 และกำหนดดัชนี Z ต่อไปนี้:

• ดัชนี Z: 12

เพื่อให้แน่ใจว่าปุ่มในคอลัมน์แรกจะไม่ซ่อนอยู่หลังเนื้อหาในคอลัมน์ 2 เมื่อวางเมาส์ไว้

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

เค้าโครงปุ่ม #4 ผลลัพธ์

ตรวจสอบผลลัพธ์สุดท้ายของเค้าโครงปุ่มแบบดึงแท็บ

ผลลัพธ์สุดท้าย

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

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

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!