วิธีสร้างการออกแบบ "Back to Top" แบบกำหนดเองด้วย Divi

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

ในสัปดาห์นี้ โดยเป็นส่วนหนึ่งของการริเริ่มการออกแบบ Divi ที่กำลังดำเนินอยู่ เราจะแสดงวิธีสร้างการออกแบบ Sticky Back to Top แบบกำหนดเองด้วย Divi และ Green Energy Layout Pack เทคนิคนี้จะช่วยคุณปรับปรุงประสบการณ์ผู้ใช้บนหน้าเว็บของคุณ ในขณะที่ใช้ประโยชน์จากตัวเลือกในตัวของ Divi ในด้านการออกแบบของสิ่งต่างๆ เราหวังว่าบทช่วยสอนนี้จะเป็นแรงบันดาลใจให้คุณสร้างทางเลือกของคุณเองกลับไปสู่การออกแบบยอดนิยม และใช้พวกมันในเว็บไซต์ถัดไปของคุณ!

ไปกันเถอะ

ดูตัวอย่าง

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

GIF

ตัวอย่าง #1

ตัวอย่าง #2

ตัวอย่าง #3

1. เพิ่ม Smooth Scroll ไปที่หน้า HTML

อัปโหลดหน้า Landing Page พลังงานสีเขียวไปยังหน้าใหม่

สิ่งแรกที่คุณต้องทำคือสร้างหน้าใหม่และอัปโหลดหน้า Landing Page ของ Green Energy Layout Pack

เปิดการตั้งค่าหน้า

เปิดการตั้งค่าหน้าโดยคลิกที่ไอคอนที่ทำเครื่องหมายในหน้าจอการพิมพ์ด้านล่าง:

เพิ่ม Smooth Scroll ไปที่ Custom CSS Box

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

html {
scroll-behavior: smooth;
}

2. เพิ่ม CSS ID ให้กับ Hero Section

เปิดส่วนฮีโร่

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

เพิ่ม CSS ID

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

• CSS ID: ส่วน-1

3. เพิ่มส่วนใหม่ที่ด้านล่างของหน้าด้วยการออกแบบ "กลับไปด้านบน"

ขั้นตอนทั่วไป

เพิ่มส่วนปกติใหม่ที่ด้านล่างของหน้า

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

ระยะห่าง

เปิดการตั้งค่าส่วนและลบช่องว่างด้านบนและด้านล่างเริ่มต้นทั้งหมด

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

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

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

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

เพิ่ม Anchor Link

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

• URL ลิงก์ของแถว: yourwebsite.com/page/#section-1

การจัดแนวแถว

เรากำลังวางแถวทางด้านขวาของคอนเทนเนอร์ส่วน

• การจัดแนวแถว: ขวา

ตำแหน่งคงที่

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

• ตำแหน่ง: คงที่
• ออฟเซ็ตแนวตั้ง: 30px
• ออฟเซ็ตแนวนอน: 30px
• ดัชนี Z: 99

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

สร้างตัวอย่างการออกแบบใหม่ #1

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

เปลี่ยนโครงสร้างคอลัมน์

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

สีพื้นหลัง

ดำเนินการต่อโดยเปิดการตั้งค่าแถวและเพิ่มสีพื้นหลังสีขาว

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

ขนาด

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: 1
• ความกว้าง: 9vw (เดสก์ท็อป), 23vw (แท็บเล็ต), 35vw (โทรศัพท์)

ระยะห่าง

เพิ่มค่าช่องว่างภายในที่กำหนดเองด้วย

• ด้านบน: 2.5vw (เดสก์ท็อป), 6vw (แท็บเล็ต), 10vw (โทรศัพท์)
• ช่วงล่าง: 2.5vw (เดสก์ท็อป), 6vw (แท็บเล็ต), 10vw (โทรศัพท์)
• Padding ซ้าย: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 4vw (โทรศัพท์)
• ช่องว่างภายในด้านขวา: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 4vw (โทรศัพท์)

ชายแดน

ดำเนินการต่อโดยเพิ่ม '10px' ในแต่ละมุมในการตั้งค่าเส้นขอบ

กล่องเงา

และเพิ่มเงากล่องโดยใช้การตั้งค่าต่อไปนี้:

• ความแรงของกล่องเงาเบลอ: 80px
• เงาสี: rgba(0,0,0,0.3)

แสดง

เพื่อให้แน่ใจว่าคอลัมน์ต่างๆ จะอยู่ติดกันในหน้าจอทุกขนาด เราจะเพิ่มโค้ด CSS หนึ่งบรรทัดในองค์ประกอบหลักของแถว

display: flex;

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

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

ได้เวลาเริ่มเพิ่มโมดูลแล้ว! เพิ่มโมดูลข้อความลงในคอลัมน์แรกด้วยเนื้อหาที่คุณเลือก

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

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

• แบบอักษรของข้อความ: Arial
• น้ำหนักแบบอักษรของข้อความ: ตัวหนา
• การจัดตำแหน่งข้อความ: ขวา
• สีข้อความ: #000000
• ขนาดตัวอักษร: 1.1vw (เดสก์ท็อป), 3vw (แท็บเล็ต), 4.4vw (โทรศัพท์)
• ระยะห่างของตัวอักษรข้อความ: -1px
• ความสูงของบรรทัดข้อความ: 1em

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

เพิ่มสัญลักษณ์

ไปที่คอลัมน์ที่สองและเพิ่มโมดูลข้อความที่นั่นด้วย เพิ่มสัญลักษณ์ '▲' ลงในกล่องเนื้อหา

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

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

• แบบอักษรข้อความ: เปิด Sans
• การจัดตำแหน่งข้อความ: กึ่งกลาง
• สีข้อความ: #000000
• ขนาดตัวอักษร: 3vw (เดสก์ท็อป), 8vw (แท็บเล็ต), 12vw (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 0.6em

สร้างตัวอย่างการออกแบบใหม่ #2

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

ขนาด

สู่ตัวอย่างที่สอง! เปิดการตั้งค่าแถวและเปลี่ยนความกว้างของแถว

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

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

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

เพิ่มสัญลักษณ์

ดำเนินการต่อโดยเพิ่มโมดูลข้อความลงในแถวและป้อนสัญลักษณ์ '↑'

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

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

• แบบอักษรข้อความ: เปิด Sans
• การจัดตำแหน่งข้อความ: กึ่งกลาง
• สีข้อความ: #000000
• ขนาดตัวอักษร: 56px
• ความสูงของบรรทัดข้อความ: 1em

ระยะห่าง

ต่อไป เราจะเพิ่มช่องว่างด้านบนและด้านล่างที่กำหนดเอง

• ช่องว่างภายในด้านบน: 30px
• ช่องว่างภายในด้านล่าง: 50px

ชายแดน

ไปที่แท็บการออกแบบและเพิ่ม '50vw' ในแต่ละมุม เพิ่มเส้นขอบด้วยการตั้งค่าต่อไปนี้:

• ความกว้างของเส้นขอบ: 3px
• สีเส้นขอบ: #000000

สร้างตัวอย่างการออกแบบใหม่ #3

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

ขนาด

สู่ตัวอย่างต่อไปและสุดท้าย! เปิดการตั้งค่าแถวและแก้ไขความกว้าง

• ความกว้าง: 4% (เดสก์ท็อป), 10% (แท็บเล็ต), 15% (โทรศัพท์)

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นถัดไป

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

กล่องเงา

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

• ความแรงของการกระจายเงาของกล่อง: 4px
• เงาสี: rgba(0,0,0,0.3)

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

เพิ่มสัญลักษณ์

โมดูลเดียวที่เราต้องการสำหรับตัวอย่างการออกแบบนี้คือโมดูลข้อความ เพิ่ม '^' ลงในช่องเนื้อหา

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

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

• แบบอักษรข้อความ: เปิด Sans
• น้ำหนักแบบอักษรของข้อความ: Ultra Bold
• การจัดตำแหน่งข้อความ: กึ่งกลาง
• สีข้อความ: #4359e9
• ขนาดตัวอักษร: 56px
• ความสูงของบรรทัดข้อความ: 1em

• ข้อความเงาสี: #35d764

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 30px
• ช่องว่างภายในด้านล่าง: 20px

ชายแดน

สุดท้ายแต่ไม่ท้ายสุด เพิ่มเส้นขอบให้กับโมดูลข้อความ เท่านี้ก็เรียบร้อย!

• ความกว้างของเส้นขอบ: 3px
• สีขอบ: #4359e9

ดูตัวอย่าง

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

GIF

ตัวอย่าง #1

ตัวอย่าง #2

ตัวอย่าง #3

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

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

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