วิธีสร้างการออกแบบที่เน้นอุปกรณ์พกพาด้วย Divi

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

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

ไปกันเถอะ!

ดูตัวอย่าง

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

มือถือ

เดสก์ทอป

เข้าใกล้

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

1. สลับไปยังมุมมองมือถือทันทีหลังจากเพิ่มหน้าใหม่

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

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

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

3. ลบช่องว่างเริ่มต้นระหว่างคอลัมน์และเพิ่มช่องว่างภายในด้วยตนเองหากจำเป็น

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

4. วาง 2 หรือ 3 คอลัมน์ติดกันเพื่อสร้างการออกแบบแนวนอน

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

5. ปรับเปลี่ยนมุมมองเดสก์ท็อปและแท็บเล็ตระหว่างทางหรือหลังจากนั้น

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

มาเริ่มสร้างตัวอย่างกันเถอะ!

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

เปิดหน้าใหม่ สลับไปยังมุมมองมือถือ และเพิ่มส่วนใหม่เพื่อเริ่มต้น

เพิ่มแถว #1

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

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

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

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

เพิ่มโมดูลข้อความลงในคอลัมน์ของแถวของคุณและป้อนเนื้อหาชื่อ H2

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

จากนั้นไปที่การตั้งค่าข้อความหัวข้อและเปลี่ยนลักษณะที่ปรากฏของชื่อ

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

เพิ่มโมดูลตัวแบ่งให้กับ Row

ทัศนวิสัย

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

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

สี

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

• สี: #333333

ขนาด

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

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

เพิ่มแถว #2

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

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

สีพื้นหลัง

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

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

คอลัมน์ 2 สีพื้นหลัง

เพิ่มสีพื้นหลังให้กับคอลัมน์ที่สองของแถวด้วย

• คอลัมน์ 2 สีพื้นหลัง: #ffd65b

การจัดตำแหน่ง

จากนั้นเปลี่ยนการจัดแนวแถว

• การจัดแนวแถว: ซ้าย

ขนาด

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

• ใช้ความกว้างที่กำหนดเอง: ใช่
• หน่วย: PX
• ความกว้างที่กำหนดเอง: 700px
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่

ระยะห่าง

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

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

ชายแดน

เพิ่มมุมโค้งมนให้กับแถวด้วยเช่นกัน

• ขวาบน: 10px
• ล่างขวา: 10px

กล่องเงา

และให้เงาของกล่องที่บอบบางด้วย

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

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

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

display: flex;

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

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

ได้เวลาเริ่มเพิ่มโมดูลแล้ว! เพิ่มชื่อโมดูลข้อความในคอลัมน์แรกและป้อนเนื้อหา H3 บางส่วน

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

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

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

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

ทัศนวิสัย

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

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

สี

จากนั้นเปลี่ยนสีของตัวแบ่ง

• สี: #ffffff

ขนาด

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

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

ระยะห่าง

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

• อัตรากำไรขั้นต้น: 4vw (โทรศัพท์), 2vw (แท็บเล็ต), 1.5vw (โทรศัพท์)

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

เพิ่มสำเนา

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

การจัดตำแหน่ง

จากนั้นไปที่แท็บออกแบบและเปลี่ยนการจัดตำแหน่งปุ่ม

• การจัดตำแหน่งปุ่ม: กึ่งกลาง

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

ปรับเปลี่ยนลักษณะที่ปรากฏของปุ่มในการตั้งค่าปุ่มด้วย

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

เพิ่มโมดูลรูปภาพในคอลัมน์ 2

อัปโหลดไอคอน

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

การจัดตำแหน่ง

จากนั้นไปที่แท็บออกแบบและเปลี่ยนการจัดแนวรูปภาพ

• การจัดตำแหน่งภาพ: กึ่งกลาง

โคลนแถว #2

เมื่อคุณแก้ไขแถวเสร็จแล้ว คุณสามารถดำเนินการต่อและโคลนได้

เปลี่ยนสีพื้นหลังของแถว

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

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

ลบสีพื้นหลังของคอลัมน์ 2

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

เพิ่มคอลัมน์ 1 สีพื้นหลัง

เรากำลังเพิ่มสีพื้นหลังให้กับคอลัมน์แรกแทน

• คอลัมน์ 1 สีพื้นหลัง: #47e5bd

เปลี่ยนโมดูลในคอลัมน์

เรากำลังสลับคอลัมน์สำหรับโมดูลด้วย

เปลี่ยนไอคอนในโมดูลรูปภาพ

จากนั้น เปลี่ยนไอคอนใน Image Module

เพิ่มตัวกรองลงในโมดูลรูปภาพ

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

• ฮิว: 65deg

เปลี่ยนการจัดแนวแถว

เปลี่ยนการจัดตำแหน่งแถวถัดไป

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

เปลี่ยนขอบแถว

พร้อมกับมุมโค้งมน

• ซ้ายบน: 10px
• ล่างซ้าย: 10px

เปลี่ยนสีข้อความของโมดูลข้อความในคอลัมน์2

เรายังใช้สีข้อความอื่นสำหรับโมดูลข้อความในคอลัมน์ 2

• หัวเรื่อง 3 สีข้อความ: #7b9710

เปลี่ยนสีพื้นหลังของปุ่ม

และเราใช้สีเดียวกันนั้นสำหรับพื้นหลังของปุ่ม

• สีพื้นหลังของปุ่ม: #7b9710

โคลนทั้งสองแถว

ตอนนี้เรามีทั้งสองด้านของแถวแล้ว เราสามารถโคลนทั้งคู่ได้มากเท่าที่เราต้องการและจัดลำดับ

แก้ไขรายการซ้ำ #1

เปลี่ยนสีพื้นหลังของแถว

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

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

เปลี่ยนสีคอลัมน์

จากนั้น เราจะปรับเปลี่ยนสีพื้นหลังของคอลัมน์ 2 ด้วย

• คอลัมน์ 2 สีพื้นหลัง: #ffadb6

เปลี่ยนไอคอนในโมดูลรูปภาพ

เปลี่ยนไอคอนใน Image Module เป็นไอคอนอื่นที่คุณเลือก

เพิ่มตัวกรองลงในโมดูลรูปภาพ

และเปลี่ยนสีในการตั้งค่าฟิลเตอร์เพื่อให้เข้ากับสีพื้นหลังของแถวและคอลัมน์ใหม่

• ฮิว: 309deg

เปลี่ยนสีข้อความ

เรากำลังเปลี่ยนสีข้อความด้วย

• หัวเรื่อง 3 สีข้อความ: #f862b0

เปลี่ยนสีพื้นหลังของปุ่ม

และเราใช้สีเดียวกันนั้นสำหรับพื้นหลังของปุ่ม

• สีพื้นหลังของปุ่ม: #f862b0

แก้ไขรายการซ้ำ #2

เปลี่ยนสีพื้นหลังของแถว

ต่อกันที่ตัวต่อไปและตัวสุดท้าย! เปลี่ยนสีพื้นหลังของแถว

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

เปลี่ยนสีคอลัมน์

ทำสิ่งเดียวกันกับสีพื้นหลังของคอลัมน์ 1

• คอลัมน์ 1 สีพื้นหลัง: #9eb4ff

เปลี่ยนไอคอนในโมดูลรูปภาพ

จากนั้นให้เปลี่ยนไอคอนที่กำลังใช้งาน

เพิ่มตัวกรองลงในโมดูลรูปภาพ

พร้อมกับสีสันในการตั้งค่าฟิลเตอร์ของ Image Module

• ฮิว: 221deg

เปลี่ยนสีข้อความ

แก้ไขสีข้อความของ Image Module ต่อไป

• หัวเรื่อง 3 สีข้อความ: #6287f9

เปลี่ยนสีพื้นหลังของปุ่ม

และใช้สีเดียวกันนั้นสำหรับพื้นหลังของปุ่ม

• สีพื้นหลังของปุ่ม: #6287f9

ดูตัวอย่าง

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

มือถือ

เดสก์ทอป

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

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