วิธีเปลี่ยนเค้าโครง Divi ให้เป็น Wireframes ที่นำกลับมาใช้ใหม่ได้

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

ในสัปดาห์นี้ โดยเป็นส่วนหนึ่งของการริเริ่มการออกแบบ Divi ที่กำลังดำเนินอยู่ เราจะแสดงวิธีเปลี่ยนเลย์เอาต์เป็นไวร์เฟรมที่นำกลับมาใช้ใหม่ได้โดยใช้ Divi's Food Catering Layout Pack Wireframes นั้นยอดเยี่ยมสำหรับกระบวนการเริ่มต้นในการสร้างเว็บไซต์ พวกเขาช่วยคุณตัดสินใจเกี่ยวกับโครงสร้างโดยรวมและรูปแบบการออกแบบของเว็บไซต์ พวกเขายังสามารถช่วยให้ได้รับความคิดเห็นของลูกค้าเกี่ยวกับสไตล์การออกแบบโดยไม่ต้องปรับแต่งทุกอย่างล่วงหน้า

ไปกันเถอะ!

ดูตัวอย่าง

ก่อนที่เราจะเจาะลึกลงไป เรามาดูผลลัพธ์สุดท้ายที่เราจะสร้างกันก่อน

เปลี่ยนเค้าโครงเป็น Wireframe

เปิดหน้า Landing Page สำหรับการจัดเลี้ยงอาหารด้วย Visual Builder

ไปข้างหน้าและเปิดหน้า Landing Page ที่คุณสร้างขึ้นโดยใช้ Divi's Food Catering Layout Pack

ลบรูปภาพส่วน & ภาพพื้นหลังส่วนหัวแบบเต็ม, สีพื้นหลัง & พื้นหลังไล่ระดับสี

ขั้นตอนแรกในการสร้างโครงลวดคือการลบภาพพื้นหลัง พื้นหลังแบบไล่ระดับ และสีพื้นหลังของส่วนต่างๆ ในหน้าเว็บของคุณและโมดูลส่วนหัวแบบเต็มความกว้างในส่วนฮีโร่

ให้ส่วนสลับเป็นสีพื้นหลังสีเทาแทน

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

ลบสีทั้งหมดในองค์ประกอบการออกแบบโดยใช้ Modified Styles Filter

เปิดใช้งานตัวกรองรูปแบบที่ปรับเปลี่ยนบนโมดูลปุ่ม

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

ให้ปุ่มโมดูลพื้นหลังสีเข้ม & สีเส้นขอบ

เปลี่ยนทั้งสีพื้นหลังของปุ่มและสีเส้นขอบของปุ่มเป็น '#2b2b2b'

คัดลอกลักษณะปุ่ม & นำไปใช้กับปุ่มอื่นๆ

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

ลบการตั้งค่าการออกแบบพิเศษ (เช่น Box Shadow)

ลบปุ่มกล่องเงา

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

การตั้งค่าเงาของกล่องโมดูลปุ่มคัดลอก

คัดลอก Box Shadow Styles ของโมดูลปุ่มนี้และเพิ่มไปยังโมดูลปุ่มที่เหลือด้วย

ลบ Box Shadow ด้วยตนเองใน Hero & Contact Section

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

ให้ส่วนที่เน้นสีพื้นหลังเหมือนกับ CTAs

จากนั้นเลื่อนลงมาจนเจอส่วน 'ไฮไลท์' ที่นี่ ใช้สีพื้นหลังของส่วน '#2b2b2b' ใช้สีเดียวกันสำหรับ CTA

กำหนดขนาดภาพ

ไปที่ห้องสมุดสื่อ

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

เปิดรูปภาพที่ใช้แล้วทีละรายการ

เปิดแต่ละภาพที่รวมอยู่ในหน้าของคุณแยกกัน

เขียนขนาดต่างๆ ของรูปภาพในหน้า

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

สร้างตัวยึดตำแหน่งด้วย Dimensions

เปิด Photoshop

ถึงเวลาสร้างตัวยึดตำแหน่ง! เปิด Photoshop หรือซอฟต์แวร์แก้ไขภาพอื่นๆ

สร้างโครงการใหม่สำหรับมิติ

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

• 800 x 1029
• 400 x 400
• 48 x 48

เลือกสีเทา

เลือก '#e7e8ed' เป็นสีของคุณ

ปลดล็อกเลเยอร์พื้นหลัง

ปลดล็อกเลเยอร์พื้นหลังของคุณด้วย

เลือกเครื่องมือ Paint Bucket & เพิ่มสีให้กับเลเยอร์

จากนั้นใช้ Paint Bucket Tool เพื่อทำให้ผ้าใบของคุณเป็นสีเทา

เพิ่มข้อความด้วย Dimensions

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

บันทึกสำหรับเว็บ

เมื่อเสร็จแล้ว ให้บันทึกตัวยึดตำแหน่งรูปภาพสำหรับเว็บ

ทำซ้ำสำหรับขนาดรูปภาพแต่ละอันบนหน้า

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

• 800 x 1029 (ส่วนเกี่ยวกับเรา
• 400 x 400 (ส่วนแกลเลอรี)
• 48 x 48 (ไอคอน)

แทนที่รูปภาพด้วยตัวยึดตำแหน่ง

เมื่อคุณส่งออกตัวยึดตำแหน่งรูปภาพทั้งหมดแล้ว ให้ดำเนินการต่อและแทนที่รูปภาพ

ทำให้ Wireframe นำกลับมาใช้ใหม่ได้อย่างง่ายดาย

สร้างแผนที่ Wireframe บนคอมพิวเตอร์

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

เค้าโครงการจับภาพหน้าจอ & บันทึกในเครื่อง

จากนั้นใช้โปรแกรมเสริม/ส่วนขยายการจับภาพหน้าจอที่คุณเลือกเพื่อจับภาพหน้าของคุณ ในภาพด้านล่าง เราได้ใช้โปรแกรมเสริม FireShot สำหรับ Mozilla Firefox ตรวจสอบให้แน่ใจว่าเมื่อคุณบันทึกภาพหน้าจอ คุณต้องตั้งชื่อที่ถูกต้อง

บันทึกเค้าโครงไปยังห้องสมุดด้วยชื่อเดียวกัน

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

เปลี่ยนการตั้งค่าการออกแบบสำหรับ Wireframed ส่วนบุคคล

เพิ่มตัวแบ่งส่วน

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

เล่นกับตัวอักษร

เปิดใช้งานการค้นหาและแทนที่บนแบบอักษรของหัวเรื่อง

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

เปลี่ยนแบบอักษร

เปลี่ยนฟอนต์ที่ใช้บนเพจของคุณเป็นฟอนต์อื่น และคุณมีโครงร่างใหม่เอี่ยม!

บันทึกองค์ประกอบการออกแบบที่แยกจากกันโดยใช้หมวดหมู่

คลิกที่ไอคอน 'เพิ่มในห้องสมุด'

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

เพิ่มหมวดหมู่ใหม่และตั้งชื่อองค์ประกอบการออกแบบ

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

ดูตัวอย่าง

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

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

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