วิธีสร้างหน้าปัดแนวนอนทั้งหมดด้วย Divi

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

ไปกันเถอะ!

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

เข้าใกล้

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

มาเริ่มสร้างใหม่กันเถอะ

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

สีพื้นหลัง

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

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

ระยะห่าง

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

• ด้านบน: 10.5vw (เดสก์ท็อป), 15vw (แท็บเล็ต), 10vw (โทรศัพท์)
• Padding ด้านล่าง: 3vw (เดสก์ท็อปและแท็บเล็ต), 10vw (โทรศัพท์)

เพิ่มแถว #1

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

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

ขนาด

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

• ทำให้แถวนี้เต็มความกว้าง: ใช่
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

ระยะห่าง

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

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

CSS ID

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

• CSS ID: ปัด-1

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

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

scroll-snap-align: start;

เพิ่มโมดูล Blurb ลงในคอลัมน์ 1

เลือกไอคอน

ตอนนี้เราสามารถเริ่มเพิ่มโมดูลได้แล้ว! เริ่มต้นด้วยโมดูล Blurb ในคอลัมน์ 1 เปิดการตั้งค่าโมดูลและเลือกไอคอนลูกศรซ้าย

การตั้งค่าไอคอน

จากนั้นไปที่แท็บการออกแบบและทำการเปลี่ยนแปลงรูปลักษณ์ของไอคอน

• ไอคอนสี: rgba(255,255,255,0)
• ตำแหน่งรูปภาพ/ไอคอน: ด้านบน
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 5vw (เดสก์ท็อป), 13vw (แท็บเล็ต), 21vw (โทรศัพท์)

ระยะห่าง

เพิ่มค่าระยะขอบที่กำหนดเองบางส่วนต่อไป

• ขอบบน: 14vw (เดสก์ท็อป), -11vw (แท็บเล็ต), -17vw (โทรศัพท์)
• ระยะขอบซ้าย: 60vw (แท็บเล็ตและโทรศัพท์)

ทัศนวิสัย

เรายังซ่อนโมดูลไว้ในขนาดหน้าจอที่เล็กกว่าอีกด้วย

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

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

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

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

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

• แบบอักษรของหัวเรื่อง 2: Source Serif Pro
• การจัดตำแหน่งข้อความหัวเรื่อง 2: ซ้าย
• หัวเรื่อง 2 ขนาดข้อความ: 3vw (เดสก์ท็อป), 7vw (แท็บเล็ตและโทรศัพท์)

ขนาด

แก้ไขความกว้างในการตั้งค่าการปรับขนาดถัดไป

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

ระยะห่าง

และเพิ่มระยะขอบด้านล่างสำหรับขนาดหน้าจอที่เล็กลง

• ขอบล่าง: 15vw (แท็บเล็ตและโทรศัพท์)

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

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

ด้านล่างโมดูลข้อความที่คุณเพิ่ม ไปข้างหน้าและเพิ่มโมดูลปุ่ม ป้อนสำเนาบางส่วน

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

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

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 0.9vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3.5vw (โทรศัพท์)
• สีข้อความของปุ่ม: #000000
• ความกว้างของขอบปุ่ม: 1px

• สีเส้นขอบของปุ่ม: #000000
• รัศมีเส้นขอบของปุ่ม: 0px
• แบบอักษรของปุ่ม: มุกตา
• น้ำหนักแบบอักษร: ตัวหนา
• รูปแบบตัวอักษร: ตัวพิมพ์ใหญ่

ระยะห่าง

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

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

เพิ่มโมดูล Blurb ลงในคอลัมน์ 3

เลือกไอคอน

โมดูลถัดไปและสุดท้ายที่เราต้องการในแถวนี้คือโมดูล Blurb อื่นในคอลัมน์ 3 เลือกไอคอนที่คุณต้องการ

ลิงค์

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

• โมดูลลิงค์ URL: https://www.yourwebsite.com/page/#swipe-2

การตั้งค่าไอคอน

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

• ไอคอนสี: #333333
• ตำแหน่งไอคอนรูปภาพ: ด้านบน
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 5vw (เดสก์ท็อป), 13vw (แท็บเล็ต), 21vw (โทรศัพท์)

ระยะห่าง

ดำเนินการต่อโดยเพิ่มระยะขอบด้านบนและด้านซ้ายที่กำหนดเองในขนาดหน้าจอต่างๆ

• ขอบบน: 14vw (เดสก์ท็อป), -11vw (แท็บเล็ต), -17vw (โทรศัพท์)
• ระยะขอบซ้าย: 60vw (แท็บเล็ตและโทรศัพท์)

เพิ่มแถว #2

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

แถวที่สองที่เราต้องการใช้โครงสร้างคอลัมน์ต่อไปนี้:

สีพื้นหลัง

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

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

ขนาด

แก้ไขการตั้งค่าการปรับขนาดต่อไป

• ทำให้แถวนี้เต็มความกว้าง: ใช่
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

ระยะห่าง

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

• ขอบบน: -3.5vw (เดสก์ท็อป), -10vw (แท็บเล็ต), -17vw (โทรศัพท์)
• ด้านบน: 8vw (เดสก์ท็อป), 15vw (แท็บเล็ต), 20vw (โทรศัพท์)
• ช่วงล่าง: 8vw (เดสก์ท็อป), 15vw (แท็บเล็ต), 20vw (โทรศัพท์)
• Padding ซ้าย: 24vw (เดสก์ท็อป), 5vw (แท็บเล็ตและโทรศัพท์)
• ช่องว่างภายในด้านขวา: 24vw (เดสก์ท็อป), 5vw (แท็บเล็ตและโทรศัพท์)
• คอลัมน์ที่ 1 ด้านขวา: 2vw (เดสก์ท็อป), 0vw (แท็บเล็ตและโทรศัพท์)
• คอลัมน์ 2 ช่องว่างภายในด้านซ้าย: 2vw (เดสก์ท็อป), 0vw (แท็บเล็ตและโทรศัพท์)

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

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

ไปข้างหน้าและเพิ่มโมดูลข้อความในคอลัมน์แรก ป้อนสำเนาที่คุณเลือก (รวมถึงชื่อ H3)

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

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

• แบบอักษรข้อความ: เปิด Sans
• ขนาดตัวอักษร: 0.65vw (เดสก์ท็อป), 1.8vw (แท็บเล็ต), 2.7vw (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 1.8em

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

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

• หมวด 3 อักษร มุกตา
• ส่วนหัว 2 น้ำหนักแบบอักษร: ตัวหนา
• หัวข้อ 3 รูปแบบตัวอักษร: ตัวพิมพ์ใหญ่
• หัวเรื่อง 3 ขนาดข้อความ: 0.8vw (เดสก์ท็อป), 3vw (แท็บเล็ต), 4vw (โทรศัพท์)
• ส่วนหัว 3 ความสูงของบรรทัด: 1.8em

ระยะห่าง

เพิ่มระยะขอบด้านล่างสำหรับขนาดหน้าจอที่เล็กลงด้วย

• ขอบล่าง: 5vw (แท็บเล็ตและโทรศัพท์)

โมดูลข้อความโคลน & วางในคอลัมน์ 2

เมื่อคุณแก้ไขโมดูลข้อความในคอลัมน์ 1 เสร็จแล้ว คุณสามารถโคลนโมดูลและวางสำเนาในคอลัมน์ที่สองได้

เปลี่ยนเนื้อหา

ตรวจสอบให้แน่ใจว่าคุณเปลี่ยนเนื้อหา

โคลนแถว #1 สามครั้ง

เมื่อทั้งสองแถวของคุณเสร็จสิ้น คุณสามารถโคลนแถวแรกได้ 3 ครั้ง

เปลี่ยนรายการซ้ำ #1

เปลี่ยนรหัส CSS ของแถว

เราจะต้องเปลี่ยน CSS ID ของรายการที่ซ้ำกันครั้งแรก

• CSS ID: ปัด-2

เปลี่ยนสีของไอคอน Blurb Module (คอลัมน์ 1)

พร้อมกับสีของ Blurb Module ตัวแรก

• ไอคอนสี: #333333

เปลี่ยนลิงก์ของโมดูล Blurb ทั้งสอง

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

• โมดูลลิงค์ URL: https://www.yourwebsite.com/page/#swipe-1

• URL ลิงค์โมดูล: https://www.yourwebsite.com/page/#swipe-3

เปลี่ยนรายการซ้ำ #2

เปลี่ยนรหัส CSS ของแถว

เปลี่ยน CSS ID ของรายการที่ซ้ำกันที่สอง

• CSS ID: ปัด-3

เปลี่ยนสีของไอคอน Blurb Module (คอลัมน์ 1)

พร้อมกับสีไอคอนของโมดูล Blurb แรก

• ไอคอนสี: #333333

เปลี่ยนลิงก์ของโมดูล Blurb ทั้งสอง

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

• โมดูลลิงค์ URL: https://www.yourwebsite.com/page/#swipe-2

• โมดูลลิงค์ URL: https://www.yourwebsite.com/page/#swipe-4

เปลี่ยนรายการซ้ำ #3

เปลี่ยน CSS ID

เปลี่ยนรหัส CSS ของแถวที่สามซ้ำกันด้วย

• CSS ID: ปัด-4

เปลี่ยนไอคอน Blurb Module (คอลัมน์ 2)

และเลือกไอคอนอื่นสำหรับ Blurb Module ในคอลัมน์ 3

เปลี่ยนลิงค์โมดูลประกาศ (คอลัมน์ 2)

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

• โมดูลลิงค์ URL: https://www.yourwebsite.com/page/#swipe-1

โคลนแถว #2 สามครั้ง

ไปยังแถวถัดไป โคลนแถวนี้สามครั้งด้วย

เปลี่ยนสีพื้นหลังของแถวที่ซ้ำกัน #1

เปลี่ยนสีพื้นหลังของรายการที่ซ้ำกันครั้งแรก

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

เปลี่ยนสีพื้นหลังของแถวของรายการที่ซ้ำกัน #2

สำเนาที่สองใช้สีพื้นหลังต่อไปนี้:

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

เปลี่ยนสีพื้นหลังของแถวที่ซ้ำกัน #3

เปลี่ยนสีพื้นหลังของแถวที่สามที่ซ้ำกันด้วย

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

เพิ่ม CSS ID และโค้ด CSS ไปที่ Section

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

• CSS ID: ส่วน-แถบเลื่อน

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

overflow-y: scroll;
display: grid;
grid-template-columns: repeat(4, 100%);
scroll-behavior: smooth;
scroll-snap-type: x mandatory;

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

grid-template-columns: repeat(7, 100%);

แต่อย่าลืมว่าคุณจะต้องเพิ่มแถวอื่นๆ หากคุณกำลังเพิ่มหมายเลขคอลัมน์ ในกรณีนี้ หากคุณต้องการให้แถวสองแถวปรากฏต่อคอลัมน์ของส่วน คุณจะต้องมี 14 แถว

ซ่อนแถบเลื่อน

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

#section-scrollbar::-webkit-scrollbar {
display: none;
}

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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