การสร้างกรอบการออกแบบของคุณด้วย Divi 5

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

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

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

Divi 5 พร้อมที่จะใช้กับเว็บไซต์ใหม่ แต่เรายังไม่แนะนำให้ย้ายถิ่นฐานที่มีอยู่

Divi 5 ช่วยให้คุณสร้างกรอบการออกแบบที่ไม่มีรหัสได้อย่างไร

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

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

ตัวแปรการออกแบบช่วยให้คุณกำหนดค่าการออกแบบทั่วโลก

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

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

ตัวแปรการออกแบบเป็นเหมือนคุณสมบัติที่กำหนดเอง CSS รุ่นที่ไม่มีรหัส แต่มีความยืดหยุ่นมากกว่า ตัวอย่างเช่นโดยทั่วไปคุณจะประกาศตัวแปร CSS เช่น : รูท {-สี-สี: #1A73E8; } แต่ด้วยตัวแปรการออกแบบของ Divi คุณจะประหยัดสีเป็น สีหลัก เท่านั้น

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

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

ในการใช้ตัวแปรการออกแบบให้วางตัวเลือกและค้นหาไอคอนเนื้อหาแบบไดนามิก

เรียนรู้ทุกอย่างเกี่ยวกับตัวแปรการออกแบบ

บันทึกชุดค่าผสมสไตล์สามัญด้วยตัวเลือกกลุ่มที่ตั้งไว้ล่วงหน้า

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

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

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

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

เรียนรู้ทุกอย่างเกี่ยวกับตัวเลือกที่ตั้งไว้ล่วงหน้า

บันทึกองค์ประกอบที่ได้รับการออกแบบอย่างเต็มที่ด้วยการตั้งค่าองค์ประกอบ

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

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

เครื่องมือเหล่านี้สะท้อนให้เห็นในส่วนหน้า HTML อย่างไร

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

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

เพื่อแสดงให้คุณเห็นว่าสิ่งนี้มีประสิทธิภาพเพียงใดเราจะเปรียบเทียบเวิร์กโฟลว์ภาพแรกใน Divi 5 ด้วยวิธีการแบบแมนนวลโดยใช้กรอบ CSS แบบดั้งเดิมเช่น Bootstrap

bootstrap แรก:

การสร้างระบบการออกแบบด้วยตนเองด้วยรหัสใน bootstrap

สำหรับตัวอย่างของเราฉันใช้การตั้งค่า WordPress กับชุดรูปแบบ Understrap ที่ติดตั้ง

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

:root {
 --primary-color: #e91e63;
 --border-radius: 6px;
 --box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

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

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

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

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

ตอนนี้เรามาสร้างหน้าเดียวกันโดยใช้ Divi 5 โดยไม่ต้องเข้ารหัส

สร้างหน้าเดียวกันใหม่ด้วย Divi 5

เราเริ่มต้นด้วยการกำหนดตัวแปรการออกแบบทั่วโลกของเราซึ่งกลายเป็นส่วนหนึ่งของระบบการออกแบบทั่วทั้งไซต์ของเรา ก่อนอื่นคุณไปที่ ตัวจัดการตัวแปร> สี จากนั้นเขียนรหัส hex สำหรับสีหลัก (#E91E63) และบันทึก

ในทำนองเดียวกันคุณยังสามารถบันทึกตัวแปรตัวเลขสำหรับรัศมีเส้นขอบ {6px} และระยะห่าง ต่อไปฉันเพิ่มโมดูลแบบฟอร์มติดต่อและปรับแต่งปุ่มส่งเป็นสไตล์ที่ฉันต้องการ:

ตอนนี้ฉันบันทึกการตั้งค่าปุ่มเหล่านี้เป็น ปุ่มที่ตั้งไว้ล่วงหน้า สำหรับการใช้งานในภายหลัง

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

ในการใช้ตัวเลือกกลุ่มที่ตั้งไว้ล่วงหน้าให้เลื่อนการตั้งค่าและค้นหาไอคอน การตั้งค่า

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

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

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

และในส่วนหน้าค่าที่ตั้งไว้ล่วงหน้ากลุ่มตัวเลือกของคุณจะถูกบันทึกและส่งออกโดยอัตโนมัติเป็น CSS ที่สะอาดซึ่งกำหนดเป้าหมายคลาสที่เหมาะสม (.et_pb_button, .et_pb_contact_submit)

ทั้งสองหน้ามีลักษณะเหมือนกัน แต่วิธีการสร้างและบำรุงรักษานั้นแตกต่างกันอย่างสิ้นเชิง

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

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

วิธีสร้างกรอบการออกแบบของคุณด้วย Divi 5

Divi 5 มอบเครื่องมือทั้งหมดในการสร้างระบบการออกแบบที่ปรับขนาดได้ แต่เช่นเดียวกับในการพัฒนาแบบดั้งเดิมลำดับที่คุณใช้เครื่องมือเหล่านี้มีความสำคัญ ลองเดินผ่านบันไดและที่สำคัญกว่านั้นเข้าใจว่าทำไม:

1. กำหนดตัวแปรการออกแบบทั่วโลกของคุณ

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

ใน Divi 5 คุณมี ตัวจัดการตัวแปร ในการสร้างและจัดระเบียบ

นี่คือวิธีที่ประเภทตัวแปรที่ไฮไลต์มีบทบาท:

• สี: บันทึกสีหลักของแบรนด์รองและสำเนียงของคุณดังนั้นคุณไม่ต้องพิมพ์รหัสฐานสิบหกหรือจับคู่เฉดสี บันทึก ตัวแปรสี ของคุณและใช้ด้วยคลิกเดียว
• ฟอนต์: กำหนดแบบอักษรที่แน่นอนที่คุณใช้สำหรับส่วนหัวข้อความร่างกายหรือข้อความรับรอง แทนที่จะเลือก Poppins ตัวหนา อีกครั้งทุกครั้งที่คุณสร้าง H2 ให้บันทึกเป็น ตัวแปรตัวอักษร คุณจะสามารถนำสไตล์เดียวกันกลับมาใช้ใหม่ได้อย่างง่ายดาย
• ตัวเลข: จัดเก็บค่าการออกแบบไปสู่ของคุณเช่นรัศมีเส้นขอบ 8px สำหรับการ์ดหรือช่องว่าง 32px สำหรับโมดูลรูปภาพเป็น ตัวแปรตัวเลข คุณยังสามารถใช้หน่วยขั้นสูงภายในตัวแปรหมายเลขเพื่อทำการออกแบบแบบไดนามิก

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

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

2. บันทึกเนื้อหาที่เกิดขึ้นทั่วโลก

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

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

คุณสามารถบันทึกเนื้อหาผ่านตัวแปรที่เหลืออีกสามตัว:

• ข้อความ: สมมติว่าที่อยู่ บริษัท ของคุณปรากฏในส่วนท้ายบนหน้าติดต่อและในส่วนฮีโร่ของหน้าแรกของคุณ บันทึกเป็น ตัวแปรข้อความ และเลือกได้ทุกที่ที่คุณต้องการให้ที่อยู่ปรากฏ
• ลิงก์: บันทึก URL ไปยังหน้าเกี่ยวกับของคุณคอลเลกชันผลิตภัณฑ์โปรไฟล์โซเชียลหรือข้อกำหนดและเงื่อนไขเป็น ตัวแปรลิงก์
• รูปภาพ: หากคุณใช้โลโก้แบรนด์หรือภาพพื้นหลังในหลาย ๆ หน้าให้บันทึกเป็น ตัวแปรรูปภาพ ลองนึกภาพการแทนที่ภาพตัวยึดข้ามเทมเพลตในคลิก!

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

3. สร้างและบันทึกสไตล์หลักพร้อมตัวเลือกกลุ่มที่ตั้งไว้ล่วงหน้า

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

นี่คือวิธีการใช้ประโยชน์สูงสุดจากกลุ่มตัวเลือกที่ตั้งไว้ล่วงหน้า:

1. บันทึกล่วงหน้าสำหรับสไตล์ทั่วไป

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

ฉันสามารถใช้ระยะห่างได้ทันทีกับข้อความรับรองของฉัน (และโมดูลอื่น ๆ หากฉันต้องการ) ทำสิ่งนี้สำหรับทุกกลุ่มการตั้งค่าที่คุณนำกลับมาใช้ใหม่อย่างสม่ำเสมอ: เส้นขอบ, เงากล่อง, พื้นหลังปุ่ม ฯลฯ ดังนั้นคุณสามารถนำกลับมาใช้ใหม่เมื่อสร้างหน้า

2. รวมตัวแปรการออกแบบเข้ากับที่ตั้งไว้ล่วงหน้า

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

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

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

4. สร้างองค์ประกอบที่ตั้งไว้ล่วงหน้า

Element Presets เสร็จสมบูรณ์กรอบการออกแบบของคุณ หลังจากบันทึกสไตล์ที่คุณต้องการเป็นที่ตั้งไว้ล่วงหน้าคุณควรบันทึกสไตล์โมดูลเป็นองค์ประกอบที่ตั้งไว้ล่วงหน้า

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

ตั้งค่าที่ตั้งไว้ล่วงหน้าเป็นค่าเริ่มต้น

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

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

การออกแบบหน้าใหม่ตามกรอบการออกแบบของคุณ

ตอนนี้ฉันได้บันทึกตัวแปรการออกแบบที่ฉันต้องการทั้งหมดที่ตั้งไว้ล่วงหน้ากลุ่มตัวเลือกและการตั้งค่าที่ตั้งไว้ล่วงหน้าองค์ประกอบมาทดสอบเฟรมเวิร์กของเรากันเถอะ

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

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

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

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

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

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

การสร้างกรอบการออกแบบที่ไม่มีรหัสของคุณด้วยสายตา

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

Divi 5 ให้เครื่องมือที่จะทำให้มันเกิดขึ้น

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

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

Divi 5 พร้อมที่จะใช้กับเว็บไซต์ใหม่ แต่เรายังไม่แนะนำให้ย้ายถิ่นฐานที่มีอยู่