การสร้างการ์ดรูดแนวนอนที่ไม่มีที่สิ้นสุดสำหรับมือถือด้วย Divi

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

ไปกันเถอะ!

ดูตัวอย่าง

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

ตัวอย่างที่ 1: แถวหนึ่งคอลัมน์

เดสก์ทอป

มือถือ

ตัวอย่างที่ 2: แถวสองคอลัมน์ + หลายโมดูลใน 'คอลัมน์รูด'

เดสก์ทอป

มือถือ

เข้าใกล้

• ในการสร้างเอฟเฟกต์ที่สวยงามนี้ เราจะต้องแปลงคอลัมน์แนวตั้งทั้งหมดให้เป็นกลไกกริดแบบเลื่อน/เลื่อนแนวนอนโดยใช้โค้ด CSS เพียงไม่กี่บรรทัด
• การใช้คอลัมน์แนวตั้งสำหรับกลไกนี้ (และเปลี่ยนเป็นตารางแนวนอน) จะช่วยให้คุณเพิ่มการ์ดรูดได้มากเท่าที่คุณต้องการ คุณจะได้กำหนดจำนวนคอลัมน์ที่จะได้
• กล่าวอีกนัยหนึ่ง; คุณจะเพิ่มโมดูลลงด้านล่างและกลไกการปัด/เลื่อนจะวางชายเสื้อในคอลัมน์แนวนอน
• สำหรับตัวอย่างแรก เราจะใช้แถวหนึ่งคอลัมน์
• วิธีนี้จะช่วยให้กลไกการเลื่อนใช้ความกว้างทั้งหมดของหน้าจอ
• ในทางกลับกัน ตัวอย่างที่สองจะเปลี่ยนเพียงหนึ่งในสองคอลัมน์เป็นกลไกการปัด/เลื่อน และปล่อยให้คอลัมน์อื่นอยู่ในสถานะคงที่
• นอกจากนี้เรายังจะแสดงวิธีเพิ่มหลายโมดูลใน 'คอลัมน์' ของกลไกการปัด/เลื่อน
• เมื่อคุณเข้าใจวิธีการแล้ว คุณจะสามารถสร้างการออกแบบประเภทใดก็ได้ตามต้องการ และให้เป็นส่วนหนึ่งของกลไกการปัด/เลื่อนที่คุณเห็นใน GIF ด้านบน
• คุณสามารถค้นหาภาพพื้นหลังแบบไหลทั้งหมดที่เราจะใช้โดยไปที่โพสต์ 'ดาวน์โหลดภาพพื้นหลังมาตราของเหลว 10 ฟรีสำหรับ Divi'

สมัครสมาชิกช่อง Youtube ของเรา

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

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

มาเริ่มสร้างตัวอย่างแรกกันเลย! เพิ่มส่วนใหม่ให้กับเพจที่คุณกำลังทำงานอยู่

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

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

จากนั้น เพิ่มแถวที่มีหนึ่งคอลัมน์ เราจะเปลี่ยนทั้งคอลัมน์นี้เป็นกลไกการปัด/เลื่อน

ขนาด

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

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

โค้ด CSS ของคอลัมน์

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

overflow-x: scroll;
display: grid;
grid-template-columns: repeat(6, 70%);

บรรทัดแรกของโค้ด CSS ช่วยให้เลื่อน/ปัดได้ บรรทัดที่สองจะเปลี่ยนคอลัมน์เป็นตารางแนวนอน และโค้ด CSS บรรทัดที่สามกำหนดกริด โดยพื้นฐานแล้วเราต้องการ 6 คอลัมน์โดยแต่ละคอลัมน์มีความกว้าง 70% คุณจะต้องแก้ไขค่า ทั้งนี้ขึ้นอยู่กับจำนวนการ์ดรูดที่คุณต้องการให้แสดงในกลไกการเลื่อน/เลื่อน ตัวอย่างเช่น คุณต้องการให้รูดการ์ด 10 ใบที่แตกต่างกันเป็นส่วนหนึ่งของกลไกนี้ และคุณต้องการเพิ่มความกว้างของแต่ละคอลัมน์เป็น 90% คุณจะต้องใช้โค้ด CSS ต่อไปนี้แทน:

grid-template-columns: repeat(10, 90%);

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

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

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

ลิงค์

คุณจะต้องเพิ่ม URL ของลิงก์ของปุ่มเพื่อให้ปุ่มนั้นแสดงในโมดูล

พื้นหลังไล่โทนสี

ดำเนินการต่อโดยเพิ่มพื้นหลังไล่ระดับสี

• สี 1: #802bff
• สี 2: #001519

ภาพพื้นหลัง

ในส่วนแนวทางของโพสต์นี้ เราจะใช้ภาพพื้นหลังแบบไหลที่คุณสามารถดาวน์โหลดได้ฟรีโดยไปที่โพสต์นี้ เมื่อคุณดาวน์โหลดภาพพื้นหลังแบบไหลแล้ว ให้ค้นหาไฟล์ภาพ ' fluid-style-2.png ' และอัปโหลดไปยังแท็บภาพพื้นหลัง แก้ไขการตั้งค่าภาพพื้นหลังตาม:

• ขนาดภาพพื้นหลัง: พอดี
• ตำแหน่งภาพพื้นหลัง: Center
• เล่นซ้ำภาพพื้นหลัง: ไม่เล่นซ้ำ
• การผสมผสานภาพพื้นหลัง: ซ้อนทับ

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

ไปที่แท็บออกแบบและตรวจดูให้แน่ใจว่าใช้การตั้งค่าข้อความต่อไปนี้:

• การวางแนวข้อความ: ศูนย์
• สีข้อความ: เบา

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

แก้ไขการตั้งค่าข้อความชื่อเรื่องถัดไป

• แบบอักษรของชื่อเรื่อง: Didact Gothic
• น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
• ขนาดข้อความชื่อเรื่อง: 1vw (เดสก์ท็อป), 2.5vw (แท็บเล็ต), 4vw (โทรศัพท์)
• ความสูงของบรรทัดหัวเรื่อง: 1.9em

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

พร้อมกับการตั้งค่าข้อความเนื้อหา

• แบบอักษรของร่างกาย: เปิด Sans
• ขนาดตัวอักษร: 0.6vw (เดสก์ท็อป), 1.3vw (แท็บเล็ต), 2.5vw (โทรศัพท์)
• ความสูงของเส้นร่างกาย: 2.6em (เดสก์ท็อปและแท็บเล็ต), 2.1em (โทรศัพท์)

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

เรากำลังเปลี่ยนรูปลักษณ์ของปุ่มในโมดูลนี้ด้วย

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

ขนาด

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

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

ระยะห่าง

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

• ขอบบน: 50px
• ขอบล่าง: 50px
• ด้านบน: 12vw (เดสก์ท็อป), 5vw (แท็บเล็ต), 14vw (โทรศัพท์)
• ช่วงล่าง: 12vw (เดสก์ท็อป), 5vw (แท็บเล็ต), 14vw (โทรศัพท์)
• Padding ซ้าย: 20vw (เดสก์ท็อป), 3vw (แท็บเล็ต), 8vw (โทรศัพท์)
• Padding ขวา: 20vw (เดสก์ท็อป), 3vw (แท็บเล็ต), 8vw (โทรศัพท์)

ชายแดน

สุดท้ายแต่ไม่ท้ายสุด เรายังเพิ่ม '20px' ให้กับแต่ละมุมของโมดูลด้วย

โคลนโมดูล CTA ได้มากเท่าที่คุณต้องการ

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

เปลี่ยนพื้นหลังไล่ระดับ & ภาพพื้นหลังของซ้ำ 1

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

• สี 1: #7a010d
• สี 2: #001519

และใช้ภาพพื้นหลัง ' fluid-style-9.png ' แทน

• ขนาดภาพพื้นหลัง: ปก
• ตำแหน่งภาพพื้นหลัง: Center
• เล่นซ้ำภาพพื้นหลัง: ไม่เล่นซ้ำ
• การผสมผสานภาพพื้นหลัง: ซ้อนทับ

เปลี่ยนพื้นหลังไล่ระดับ & ภาพพื้นหลังของซ้ำ 2

เปลี่ยนพื้นหลังการไล่ระดับสีของสำเนาที่สองถัดไป

• สี 1: #26ccff
• สี 2: #001519

อัปโหลดไฟล์ภาพ 'fluid-style-10a.png' เป็นภาพพื้นหลัง

• ขนาดภาพพื้นหลัง: พอดี
• ตำแหน่งภาพพื้นหลัง: บนซ้าย
• เล่นซ้ำภาพพื้นหลัง: ไม่เล่นซ้ำ
• การผสมผสานภาพพื้นหลัง: ซ้อนทับ

เปลี่ยนพื้นหลังไล่ระดับ & ภาพพื้นหลังของซ้ำ 3

เปลี่ยนพื้นหลังการไล่ระดับสีของสำเนาที่สาม

• สี 1: #ff21b8
• สี 2: #001519

อัปโหลดภาพพื้นหลัง ' fluid-style-6.png '

• ขนาดภาพพื้นหลัง: พอดี
• ตำแหน่งภาพพื้นหลัง: Center
• เล่นซ้ำภาพพื้นหลัง: ไม่เล่นซ้ำ
• การผสมผสานภาพพื้นหลัง: ซ้อนทับ

เปลี่ยนพื้นหลังไล่ระดับ & ภาพพื้นหลังของซ้ำ 4

เปลี่ยนพื้นหลังการไล่ระดับสีของรายการที่ซ้ำกันที่สี่

• สี 1: #4400aa
• สี 2: #001519

ใช้ ' fluid-style-4.png ' เป็นภาพพื้นหลัง

• ขนาดภาพพื้นหลัง: พอดี
• ตำแหน่งภาพพื้นหลัง: Center
• เล่นซ้ำภาพพื้นหลัง: ไม่เล่นซ้ำ
• การผสมผสานภาพพื้นหลัง: ซ้อนทับ

เปลี่ยนพื้นหลังไล่ระดับ & ภาพพื้นหลังของซ้ำ 5

เปลี่ยนพื้นหลังไล่ระดับสีของรายการที่ซ้ำกันล่าสุด

• สี 1: #ff2626
• สี 2: #001519

ใช้ ' fluid-style-7.png ' เป็นภาพพื้นหลัง

• ขนาดภาพพื้นหลัง: พอดี
• ตำแหน่งภาพพื้นหลัง: ขวาบน
• เล่นซ้ำภาพพื้นหลัง: ไม่เล่นซ้ำ
• การผสมผสานภาพพื้นหลัง: ซ้อนทับ

ปรับคอลัมน์ CSS เป็นจำนวนโมดูล

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

จัดแต่งทรงผมแถบเลื่อน

เพิ่มคลาส CSS ให้กับคอลัมน์

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

• คลาส CSS ของคอลัมน์: swipe-scrollbar

เพิ่ม CSS ที่กำหนดเองในการตั้งค่าเพจ

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

.swipe-scrollbar::-webkit-scrollbar {
width: 10px;
}
.swipe-scrollbar::-webkit-scrollbar-track {
background: #fff;
}
.swipe-scrollbar::-webkit-scrollbar-thumb {
background: #333;
border-radius: 50px;
}

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

โคลนส่วนก่อนหน้า

สู่ตัวอย่างต่อไป! โคลนส่วนที่คุณสร้างไว้ในส่วนก่อนหน้าของโพสต์นี้

เปลี่ยนการตั้งค่าระยะห่าง CTA

จากนั้น เปลี่ยนการตั้งค่าระยะห่างของโมดูล CTA แรก

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

ขยายการตั้งค่าระยะห่างไปยังโมดูลทั้งหมดในคอลัมน์

ขยายการตั้งค่าการเว้นวรรคใหม่เหล่านี้โดยคลิกขวาและคลิกที่ 'ขยายรูปแบบการเว้นวรรค'

• ถึง: คำกระตุ้นการตัดสินใจทั้งหมด
• ตลอด: คอลัมน์นี้

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

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

ย้ายโมดูลไปที่คอลัมน์ที่สอง

และวางแต่ละโมดูลในคอลัมน์ที่สองแทน

ย้าย CSS ไปยังคอลัมน์ที่สอง & เปลี่ยนค่า

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

• คลาส CSS ของคอลัมน์ 2: swipe-scrollbar

วางบรรทัดโค้ด CSS ในคอลัมน์ 2 องค์ประกอบหลัก เรากำลังเปลี่ยนความกว้างของแต่ละคอลัมน์เป็น '80%'

overflow-x: scroll;
display: grid;
grid-template-columns: repeat(6, 80%);

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

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

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

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

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

• แบบอักษรหัวเรื่อง 2: Didact Gothic
• ส่วนหัว 2 น้ำหนักแบบอักษร: ตัวหนา
• การจัดแนวข้อความหัวเรื่อง 2: Center
• หัวเรื่อง 2 ขนาดข้อความ: 2.5vw (เดสก์ท็อป), 5vw (แท็บเล็ต), 6vw (โทรศัพท์)

ระยะห่าง

เพิ่มระยะขอบบนที่กำหนดเองด้วย

• ขอบบน: 100px

เพิ่มโมดูลตัวแบ่งในคอลัมน์ 1

ทัศนวิสัย

โมดูลถัดไปที่เราต้องการในคอลัมน์ 1 คือโมดูลตัวแบ่ง ตรวจสอบให้แน่ใจว่าได้เปิดใช้งานตัวเลือก 'แสดงตัวแบ่ง'

• แสดงตัวแบ่ง: ใช่

สี

เปลี่ยนสีตัวแบ่งถัดไป

• สี: #333333

ขนาด

พร้อมกับการตั้งค่าการปรับขนาด

• น้ำหนักตัวแบ่ง: 7px
• ส่วนสูง: 0px
• ความกว้าง: 10%
• การจัดตำแหน่งโมดูล: ศูนย์

ระยะห่าง

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

• ขอบบน: 1.8vw (เดสก์ท็อป), 2.5vw (แท็บเล็ต), 4vw (โทรศัพท์)

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

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

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

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

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

• แบบอักษรข้อความ: เปิด Sans
• ขนาดตัวอักษร: 0.7vw (เดสก์ท็อป), 1.6vw (แท็บเล็ต), 2.3vw (โทรศัพท์)

ขนาด

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

• ความกว้าง: 43% (เดสก์ท็อป), 68% (แท็บเล็ต), 70% (โทรศัพท์)
• การจัดตำแหน่งโมดูล: ศูนย์

ระยะห่าง

และเพิ่มระยะขอบบนและล่างแบบกำหนดเอง

• ขอบบน: 50px
• ขอบล่าง: 50px

สลับไปที่ Wireframe View

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

เพิ่มโมดูลข้อความที่ด้านบนของคอลัมน์2

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

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

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

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

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

• แบบอักษรของข้อความ: Didact Gothic
• น้ำหนักแบบอักษรของข้อความ: ตัวหนา
• สีข้อความ: #000000
• ขนาดตัวอักษร: 1.1vw (เดสก์ท็อป), 3vw (แท็บเล็ต), 3.5vw (โทรศัพท์)

โมดูลข้อความโคลน 5x

ไปข้างหน้าและโคลนโมดูลข้อความนี้ 5 ครั้ง ตอนนี้ คุณจะมีโมดูลข้อความ 6 โมดูล ซึ่งเท่ากับจำนวนโมดูล CTA ที่เรามีเช่นกัน ดังนั้นหากคุณใช้โมดูล CTA 10 โมดูลแทน คุณจะต้องเพิ่มโมดูลข้อความ 10 โมดูล (หรือโมดูลอื่นๆ) เพื่อให้โครงสร้างคอลัมน์สมดุล

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

เปลี่ยนเนื้อหาของรายการที่ซ้ำกันแต่ละรายการให้ตรงกับโมดูล CTA ที่จะปรากฏด้านล่าง เท่านี้ก็เรียบร้อย!

ดูตัวอย่าง

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

ตัวอย่างที่ 1: แถวหนึ่งคอลัมน์

เดสก์ทอป

มือถือ

ตัวอย่างที่ 1: แถวสองคอลัมน์ + หลายโมดูลใน 'คอลัมน์รูด'

เดสก์ทอป

มือถือ

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

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