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

ในสัปดาห์นี้ โดยเป็นส่วนหนึ่งของการริเริ่มการออกแบบ Divi ที่กำลังดำเนินอยู่ เราจะแสดงวิธีถ่ายโอนสไตล์การออกแบบใหม่ไปยังหน้าอื่นโดยใช้ Divi's Furniture Store Layout Pack ด้วยชุดเค้าโครงใหม่ทั้งหมดที่ออกมา คุณอาจต้องการเปลี่ยนรูปแบบของหน้าที่มีอยู่โดยใช้รูปแบบของชุดเค้าโครงใหม่ แทนที่จะแทนที่ทั้งหน้า คุณยังสามารถถ่ายโอนรูปแบบการออกแบบโดยใช้คุณลักษณะด้านประสิทธิภาพของ Divi หนึ่งในตัวเลือกใหม่ล่าสุดที่รวมอยู่ใน Visual Builder คือคุณลักษณะการคัดลอกและวางข้ามหน้า วิธีนี้จะช่วยให้คุณทำการเปลี่ยนแปลงมากมายทั่วทั้งเลย์เอาต์โดยไม่ต้องแตะการตั้งค่าขององค์ประกอบการออกแบบ

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

ไปกันเถอะ!

ดูตัวอย่าง

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

เข้าใกล้

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

ตอนที่ 1: เปิดสองหน้าติดกัน

เราจะเริ่มต้นด้วยการเปิดหน้าสองหน้าติดกัน หน้าที่มีอยู่และหน้าใหม่ที่มีสไตล์การออกแบบที่เราต้องการใช้ เราจะนำหน้า Landing Page ของ Furniture Store Layout Pack (รูปแบบการออกแบบที่เราต้องการใช้กับหน้าที่มีอยู่) และหน้า Landing Page ของ Hosting Company Layout Pack (หน้าที่เราต้องการเปลี่ยน)

ส่วนที่ 2: การรีเซ็ตการตั้งค่าบางส่วน

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

ส่วนที่ 3: การใช้คุณสมบัติการคัดลอกและวางข้ามหน้าของ Divi สำหรับส่วนฮีโร่

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

ส่วนที่ 4: ทำการเปลี่ยนแปลงด้วยตนเอง (ตามเค้าโครง) และใช้คุณลักษณะด้านประสิทธิภาพ

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

ส่วนที่ 5: เพิ่มลักษณะการออกแบบ

สุดท้ายแต่ไม่ท้ายสุด คุณสามารถเพิ่มลักษณะการออกแบบบางอย่างให้กับเพจที่มีอยู่ได้เช่นกัน

ตอนที่ 1: เปิดสองหน้าติดกัน

สร้างหน้าใหม่โดยใช้เค้าโครงโดยใช้หน้า Landing Page ของชุดเค้าโครงร้านค้าเฟอร์นิเจอร์

เมื่อเราผ่านส่วนวิธีการของโพสต์นี้แล้ว มาเริ่มใช้ Divi กัน! เพิ่มหน้าใหม่โดยใช้หน้า Landing Page ของ Furniture Store Layout Pack

สร้างเพจใหม่โดยใช้ Landing Page ของ Hosting Company Layout Pack

สร้างหน้าอื่นโดยใช้หน้า Landing Page ของ Hosting Company Layout Pack เช่นกัน เราจะแทนที่สไตล์การออกแบบของเลย์เอาต์นี้ด้วยการออกแบบหน้า Landing Page ของ Furniture Store Layout Pack

ส่วนที่ 2: การรีเซ็ตการตั้งค่าบางส่วน

รีเซ็ตการตั้งค่าเฉพาะส่วนของหน้า Landing Page ของบริษัทโฮสติ้ง

เปิดส่วนฮีโร่

เมื่อคุณมีเลย์เอาต์ทั้งสองแบบใกล้เคียงกัน ให้ดำเนินการต่อโดยเปิดการตั้งค่าส่วนฮีโร่ของหน้า Landing Page ของบริษัทโฮสติ้ง

รีเซ็ตพื้นหลังของส่วน & ขยายไปยังทุกส่วน

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

รีเซ็ตตัวแบ่ง & ขยายไปยังส่วนทั้งหมด

ทำสิ่งเดียวกันกับตัวแบ่งส่วนเพื่อให้แน่ใจว่าตัวแบ่งส่วนทั้งหมดบนหน้าหายไป

ส่วนที่ 3: การใช้คุณสมบัติการคัดลอกและวางข้ามหน้าของ Divi สำหรับส่วนฮีโร่

องค์ประกอบส่วนการคัดลอกและวางฮีโร่ข้ามหน้า

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

ได้เวลาเริ่มใช้ตัวเลือกคัดลอกวางข้ามหน้าแล้ว! เราจะปรับเปลี่ยนทุกองค์ประกอบการออกแบบในส่วนฮีโร่ เริ่มต้นด้วยการคัดลอกรูปแบบส่วนฮีโร่ในหน้า Landing Page ของร้านเฟอร์นิเจอร์ จากนั้น กลับไปที่หน้า Landing Page ของบริษัทโฮสติ้ง และวางรูปแบบส่วนที่คัดลอก

การตั้งค่าแถว

ทำสิ่งเดียวกันสำหรับแถว

โมดูลข้อความชื่อเรื่อง

คัดลอกสไตล์โมดูลของโมดูลข้อความชื่อด้วย และนำไปใช้กับชื่อของหน้า Landing Page ของบริษัทโฮสติ้ง

โมดูลข้อความเนื้อหา

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

ขยายสไตล์

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

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

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

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

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

ขยายรูปแบบสำหรับการตั้งค่าปุ่ม

แทนที่จะขยายลักษณะโมดูลปุ่มทั้งหมด เราจะขยายการตั้งค่าปุ่มเฉพาะ

ขยายรูปแบบสำหรับการเว้นวรรค

พร้อมกับการตั้งค่าระยะห่าง

ขยายรูปแบบสำหรับ Box Shadow

และการตั้งค่าเงาของกล่องด้วย

คัดลอกและวางองค์ประกอบที่เหลือครั้งเดียว + ขยายรูปแบบ

ตัวแบ่ง

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

ขยายสไตล์

อีกครั้ง ให้ขยายรูปแบบของโมดูลนี้ไปทั่วทั้งหน้า

ส่วนที่ 4: ทำการเปลี่ยนแปลงด้วยตนเอง (ตามเค้าโครง) และใช้คุณลักษณะด้านประสิทธิภาพ

การเปลี่ยนแปลงเฉพาะเค้าโครง

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

ถึงเวลาเริ่มทำการเปลี่ยนแปลงด้วยตนเองแล้ว! สิ่งแรกที่เราจะทำคือจับคู่แบบอักษร เปิดโมดูลข้อความบนหน้าและค้นหาแบบอักษร Rubik ที่ใช้ทั่วทั้งหน้า จากนั้นคลิกที่ Find & Replace และแทนที่ฟอนต์ด้วย Montserrat

ค้นหาและแทนที่น้ำหนักแบบอักษรของชื่อเรื่อง

ทำสิ่งเดียวกันสำหรับน้ำหนักแบบอักษร แทนที่จะใช้ Medium ให้เลือก Light

ค้นหาและแทนที่มุมโค้งมน

นอกจากนี้ เรายังลบขอบมุมโค้งมนทั่วทั้งหน้าโดยใช้ค้นหาและแทนที่ และใช้ '0px' กับแต่ละมุมทั่วทั้งหน้า

รีเซ็ตการตั้งค่าพื้นหลัง CTA และขยายสไตล์ในส่วน

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

ค้นหาและแทนที่สีพื้นหลัง CTA ในส่วน

เมื่อคุณทำแล้ว สีพื้นหลังเริ่มต้นจะปรากฏขึ้น ค้นหาและแทนที่สีนี้และเปลี่ยนเป็น '#1a2545' ตลอดทั้งส่วน

ค้นหาและแทนที่สีข้อความ CTA ในส่วน

แทนที่สีข้อความด้วย 'แสง' ตลอดทั้งส่วนด้วย

เปลี่ยนการตั้งค่าปุ่มตารางราคา

จากนั้นไปที่ตารางราคาในหน้าและเปลี่ยนการตั้งค่าปุ่ม:

• สีพื้นหลังของปุ่ม: #ef6f49
• ความกว้างของขอบปุ่ม: 8px
• สีเส้นขอบของปุ่ม: #ef6f49
• รัศมีเส้นขอบของปุ่ม: 0px
• ระยะห่างระหว่างตัวอักษรของปุ่ม: 2px (ค่าเริ่มต้น), 1px (โฮเวอร์)
• แบบอักษรของปุ่ม: มอนต์เซอร์รัต
• น้ำหนักแบบอักษร: กึ่งหนา
• รูปแบบตัวอักษร: ตัวพิมพ์ใหญ่
• การจัดตำแหน่งปุ่ม: ซ้าย

ขยายรูปแบบสำหรับตารางราคาและโมดูล CTA

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

ส่วนที่ 5: เพิ่มลักษณะการออกแบบ

สีพื้นหลังของส่วน #1

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

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

ส่วนสีพื้นหลัง #2

ทำสิ่งเดียวกันกับส่วนด้านล่าง

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

พื้นหลังไล่ระดับมาตรา #1

จากนั้น ค้นหาส่วนในหน้าจอพิมพ์ด้านล่างและเพิ่มพื้นหลังแบบไล่ระดับสี

• สี 1: #ffffff
• สี 2: #1a2545
• ทิศทางการไล่ระดับสี: 90deg
• ตำแหน่งเริ่มต้น: 55%
• ตำแหน่งสุดท้าย: 55%

พื้นหลังไล่ระดับมาตรา #2

ใช้พื้นหลังแบบไล่ระดับสีอื่นสำหรับส่วนด้านล่าง:

• สี 1: rgba(210,218,228,0.38)
• สี 2: #ffffff
• ทิศทางการไล่ระดับสี: 90deg
• ตำแหน่งเริ่มต้น: 45%
• ตำแหน่งสุดท้าย: 45%

พื้นหลังไล่ระดับมาตรา #3

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

• สี 1: #ffffff
• สี 2: #f7f3ec
• ตำแหน่งเริ่มต้น: 40%
• ตำแหน่งสุดท้าย: 40%

ดูตัวอย่าง

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

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

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