วิธีเน้นปุ่มปักหมุดของคุณในส่วน CTA ที่งดงามด้วย Divi

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

ไปกันเถอะ

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูผลลัพธ์คร่าวๆ ของหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

ดาวน์โหลดเค้าโครงมาตรา CTA ฟรี

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

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

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

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

ดาวน์โหลด

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

1. สร้างโครงสร้างองค์ประกอบ

เพิ่มมาตราใหม่

สีพื้นหลัง

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

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

ขนาด

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

• ความสูงสูงสุด: 100vh

ล้น

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

• แนวนอนล้น: ซ่อน
• ล้นแนวตั้ง: ซ่อน

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

เมื่อตั้งค่าส่วนเรียบร้อยแล้ว ให้เพิ่มแถวใหม่โดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

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

• ความกว้าง: 100%
• ความกว้างสูงสุด: none

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

ระยะห่าง

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

• ช่องว่างภายในด้านล่าง: 60px
• ช่องว่างภายในด้านซ้าย:
  • แท็บเล็ตและโทรศัพท์: 5%
• ช่องว่างภายในด้านขวา:
  • เดสก์ท็อป: 10vw
  • แท็บเล็ตและโทรศัพท์: 5%

เพิ่มโมดูลข้อความลงในคอลัมน์ 1

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

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

การตั้งค่าข้อความ

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

• แบบอักษรของข้อความ: Work Sans
• น้ำหนักแบบอักษรของข้อความ: ตัวหนา
• สีข้อความ: #000000
• ขนาดตัวอักษร: 10vw
• ความสูงของบรรทัดข้อความ: 0.2em

เพิ่มโมดูลข้อความในคอลัมน์ 2

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

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

การตั้งค่าข้อความ

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

• แบบอักษรของข้อความ: Work Sans
• สีข้อความ: #ffffff
• ขนาดตัวอักษร: 56px
• ความสูงของบรรทัดข้อความ: 1.2em

ขนาด

กำหนดความกว้างสูงสุดให้กับโมดูลข้อความด้วย

• ความกว้างสูงสุด: 400px

เพิ่มโมดูลปุ่มไปที่คอลัมน์ 2

เพิ่มสำเนา

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

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

ไปที่แท็บการออกแบบของโมดูลและจัดรูปแบบปุ่มตามลำดับ:

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 16px
• สีข้อความของปุ่ม: #000000
• สีพื้นหลังของปุ่ม:
  • ค่าเริ่มต้น: #ffffff
  • โฮเวอร์: rgba(255,255,255,0.7)
• ความกว้างของขอบปุ่ม: 5px
• ปุ่มสีเส้นขอบ: rgba(0,0,0,0)

• รัศมีเส้นขอบของปุ่ม: 5px
• แบบอักษรของปุ่ม: Work Sans
• แสดงไอคอนปุ่ม: ไม่

2. ใช้ Scroll & Sticky Effects

เพิ่มการเคลื่อนที่ในแนวตั้งให้กับโมดูลข้อความในคอลัมน์ 1

เมื่อได้กำหนดพื้นฐานการออกแบบของเราแล้ว ก็ถึงเวลาปรับใช้เอฟเฟกต์สกรอลล์และติดหนึบ! เปิดโมดูลข้อความในคอลัมน์ 1 และใช้การเคลื่อนไหวในแนวตั้งที่ตอบสนอง

• เปิดใช้งานการเคลื่อนไหวในแนวตั้ง: ใช่
• ออฟเซ็ตเริ่มต้น:
  • เดสก์ท็อป: 10
  • แท็บเล็ตและโทรศัพท์: 0
• ออฟเซ็ตกลาง: 0
• ออฟเซ็ตสิ้นสุด:
  • เดสก์ท็อป: -10
  • แท็บเล็ตและโทรศัพท์: 0
• ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: ด้านบนขององค์ประกอบ

เพิ่มเอฟเฟกต์ติดหนึบให้กับคอลัมน์ 2

ต่อไป เราจะเปิดการตั้งค่าคอลัมน์ 2 และใช้เอฟเฟกต์ติดหนึบบนเดสก์ท็อป เนื่องจากคอลัมน์และโมดูลในขนาดหน้าจอที่เล็กกว่าจะอยู่ด้านล่างกัน แทนที่จะอยู่ติดกัน เราจะนำการตั้งค่าที่ติดหนึบกลับมาเป็น "Do Not Stick" บนหน้าจอขนาดเล็กลง

• ตำแหน่งเหนียว:
  • เดสก์ท็อป: Stick to Top
  • แท็บเล็ตและโทรศัพท์: อย่าติด
• ออฟเซ็ตติดหนึบ: 80px
• ขีด จำกัด ติดหนึบด้านล่าง: Section
• ออฟเซ็ตจากองค์ประกอบติดหนึบรอบข้าง: ใช่
• รูปแบบเริ่มต้นของการเปลี่ยนและรูปแบบติดหนึบ: ใช่

เพิ่มสไตล์ติดหนึบให้กับปุ่มในคอลัมน์ 2

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

• สีข้อความของปุ่ม: #ffffff
• สีพื้นหลังของปุ่ม: #000000

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ในขั้นสุดท้ายในหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

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

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

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