วิธีสร้างโมดูล Divi ของไหลที่ตอบสนอง

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

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

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

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ เกี่ยวกับการออกแบบที่เราจะสร้างในบทช่วยสอนนี้

และนี่คือ codepen ที่สาธิตการทำงานของโมดูลของไหล

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

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

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

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

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

ดาวน์โหลด

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

ในการนำเข้าเค้าโครงส่วนไปยังไลบรารี Divi ของคุณ ให้ไปที่ Divi Library

คลิกปุ่มนำเข้า

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

จากนั้นคลิกปุ่มนำเข้า

เมื่อเสร็จแล้ว เค้าโครงส่วนจะพร้อมใช้งานใน Divi Builder

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

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

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

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

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

วิธีสร้างโมดูล Divi ของไหลที่ตอบสนอง

แถว

ในการเริ่มต้น ให้สร้างแถวหนึ่งคอลัมน์ใหม่ภายในส่วนปกติที่เป็นค่าเริ่มต้น

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: อัตโนมัติ
• ความกว้างสูงสุด: 100%
• Padding: บน 5vw, 5vw ล่าง

การออกแบบโมดูลคำกระตุ้นการตัดสินใจของไหล

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

เพิ่มโมดูลการเรียกร้องให้ดำเนินการใหม่ภายในคอลัมน์/แถว

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

ภายใต้การตั้งค่าเนื้อหา เพิ่ม URL ลิงก์ปุ่มจำลองและอัปเดตสีพื้นหลังดังนี้:

• URL ลิงก์ของปุ่ม: #
• สีพื้นหลัง: #5e6472

การเพิ่มขนาดฟอนต์ฟลูอิดรูทให้กับโมดูล

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

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

font-size: clamp(16px, 2vw, 24px);

สำหรับขนาดฟอนต์นี้ เราใช้ฟังก์ชัน CSS Clamp() เพื่อกำหนดขนาดฟอนต์ขั้นต่ำ ขนาดฟอนต์แบบไหล (เมื่อจำเป็น) และขนาดฟอนต์สูงสุด

แทนที่องค์ประกอบใด ๆ ที่มีระยะห่างเริ่มต้นด้วยค่าหน่วยความยาว em

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

กำลังอัปเดตการออกแบบด้วยหน่วยความยาว em

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

เนื้อความ

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

• ขนาดข้อความเนื้อหา: 1em
• ความสูงของเส้นร่างกาย: 1.8em

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

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

• ขนาดข้อความชื่อเรื่อง: 1.7em
• ความสูงของบรรทัดหัวเรื่อง: 1.3em

เพื่อให้คุณได้แนวคิดว่าจริงๆ แล้วขนาดตัวอักษรของชื่อเรื่องจะเป็นอย่างไร เราเพียงแค่คูณค่าความยาว em ด้วยค่าฟอนต์รูท โปรดจำไว้ว่า ขนาดฟอนต์รูทใช้แคลมป์ () เพื่อสร้างขนาดฟอนต์ขั้นต่ำ (16px), ของเหลว (2vw) และสูงสุด (24px) ดังนั้นขนาดข้อความหัวเรื่องขั้นต่ำจะเป็น 1.7 คูณ 16px ซึ่งใกล้เคียงกับ 27.2px ขนาดฟอนต์แบบไหลจะเป็น 1.7 เท่า 2vw (2% ของความกว้างของวิวพอร์ต) และขนาดตัวอักษรสูงสุดจะเท่ากับ 1.7 คูณ 24px ซึ่งใกล้เคียงกับ 69.36px

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

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

• ขนาดข้อความของปุ่ม: 1.3em
• ความกว้างของขอบปุ่ม: 0.12em
• รัศมีเส้นขอบของปุ่ม: 1.5em
• ระยะห่างระหว่างตัวอักษรของปุ่ม: 0.1em
• ปุ่ม Padding: บน 0.1em, ด้านล่าง 0.1em, 2em ซ้าย, 2em ขวา

ขนาดและระยะห่าง

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

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

• ความกว้างสูงสุด: 40em
• ความสูงขั้นต่ำ: 0vw
• ระยะขอบ: บน 0.5em, ด้านล่าง 0.5em, ซ้ายอัตโนมัติ, ขวาอัตโนมัติ
• Padding: บน 2.5em, ล่าง 2.5em, 2em ซ้าย, 2em ขวา

ผลลัพธ์

ตอนนี้เรามาดูผลลัพธ์ของโมดูลไหลของเราเมื่อปรับความกว้างของเบราว์เซอร์บนหน้าสด

การเพิ่มโมดูลของไหลหลายโมดูลในแถวด้วย CSS Grid

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

ปรับขนาดและระยะห่างของโมดูล

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

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

• การจัดตำแหน่งข้อความ: ซ้าย
• ความกว้างสูงสุด: 24em
• ระยะขอบ: 0.5em ซ้าย, 0.5em ขวา

โมดูลซ้ำ

ตอนนี้ทำซ้ำโมดูลเพื่อสร้างโมดูลอื่นในคอลัมน์เดียวกัน

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

ตอนนี้ เราสามารถเพิ่ม CSS ที่กำหนดเองลงในคอลัมน์เพื่อสร้าง CSS Grid สำหรับโมดูลได้

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

display:grid;
grid-template-columns: auto auto;
justify-content:center;

จากนั้นเพิ่ม CSS ต่อไปนี้ไปยังองค์ประกอบหลักในมุมมองโทรศัพท์:

display:grid;
grid-template-columns: auto;
justify-content:center;

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

ผลลัพธ์

ตอนนี้ตรวจสอบผลลัพธ์

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

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

นี่คือผลลัพธ์สุดท้ายโดยใช้แบบอักษร สีแบบอักษร สีปุ่ม และสีพื้นหลังที่แตกต่างกัน

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

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

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

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

ไชโย!