ดาวน์โหลด Global Presets Style Guide ฟรีสำหรับ Divi's App Developer Layout Pack

เฮ้ Divi Nation! ขอขอบคุณที่เข้าร่วมกับเราในงวดถัดไปของ Divi Design Initiative ประจำสัปดาห์ โดยเราจะแจกของสมนาคุณใหม่ๆ ทุกสัปดาห์ วันนี้ เรากำลังแชร์คู่มือสไตล์พรีเซ็ตทั่วโลกสำหรับ App Developer Layout Pack ของ Divi ค่าที่ตั้งไว้ล่วงหน้าทั่วโลกของ Divi ช่วยให้คุณเร่งความเร็วในกระบวนการออกแบบเว็บได้ในเวลาไม่นาน และเพื่อช่วยให้คุณเร่งความเร็วได้เร็วยิ่งขึ้นไปอีก เราจะมอบพรีเซ็ตส่วนกลางที่มีเอกลักษณ์เฉพาะสำหรับแพ็กเลย์เอาต์ในเลย์เอาต์เดียว คุณสามารถเลือกได้ว่าต้องการอัปโหลดค่าที่ตั้งไว้ล่วงหน้าทั้งหมดพร้อมกันหรือเลือกเฉพาะ

ดาวน์โหลด Global Presets Style Guide สำหรับ App Developer Layout Pack

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

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

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

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

ดาวน์โหลด

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

ภาพรวมโดยย่อของ Global Presets

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

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

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

วิธีใช้ Global Presets Style Guide

ตัวเลือก A: อัปโหลดสถานีที่ตั้งไว้ล่วงหน้าทั้งหมดโดยอัตโนมัติในครั้งเดียว

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

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

ไปที่ Divi Library ของคุณที่ส่วนหลังของเว็บไซต์ WordPress ของคุณ

อัปโหลดเค้าโครงด้วยพรีเซ็ต

คลิกที่ปุ่ม "นำเข้าและส่งออก" ที่ด้านบน

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

ชื่อที่ตั้งไว้ล่วงหน้าภายในไลบรารีที่ตั้งไว้ล่วงหน้า

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

• ADLP – H1 – 1
• ADLP – H2 – 1
• ADLP – H3 – 1
• ADLP – H4 – 1
• ADLP – ร่างกาย – 1
• ADLP – Blockquote – 1
• ADLP – ลิงค์ – 1
• ADLP – ข้อความ – ทั้งหมด – 1
• ADLP – ข้อความเมตริกอันดับ 1

• ADLP – ปุ่ม 1
• ADLP – ปุ่ม 2
• ADLP – ปุ่ม 3
• ADLP – ปุ่ม 4
• ADLP – ปุ่ม 5
• ADLP – ปุ่ม 6

• ADLP – Blurb 1
• ADLP – ประกาศ 2
• ADLP – Blurb 3
• ADLP – Blurb 4
• ADLP – ประกาศ 5
• ADLP – ประกาศ 6
• ADLP – ประกาศ 7

• ADLP – ตัวแบ่ง 1
• ADLP – ตัวแบ่ง 2
• ADLP – สลับ 1
• ADLP – สลับ 2
• ADLP – สลับ 3
• ADLP – ตัวนับจำนวน 1
• ADLP – ติดตามโซเชียลมีเดีย 1
• ADLP – แบบฟอร์มการติดต่อ 1

เข้าถึงพรีเซ็ตในโมดูลใหม่ที่คุณเพิ่ม

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

ตัวเลือก B: การเลือกเปลี่ยนโมดูลในคู่มือสไตล์ให้เป็นค่าที่ตั้งไว้ล่วงหน้าทั่วโลก

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

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

นำทางไปยัง Divi Library ของคุณในแบ็กเอนด์ของเว็บไซต์ WordPress ของคุณ

อัปโหลดเค้าโครงโดยไม่ต้องตั้งค่าล่วงหน้า

จากนั้นคลิกที่ปุ่ม "นำเข้าและส่งออก"

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

เปิดเค้าโครง (หรือสร้างหน้าใหม่ + อัปโหลดเค้าโครง)

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

เปลี่ยนไปใช้ Visual Builder

หากคุณเลือกตัวแก้ไขเค้าโครง ให้สลับไปที่ Visual Builder

เลือกโมดูลที่คุณต้องการเปลี่ยนเป็น Global Preset & Open Module Settings

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

เปลี่ยนโมดูลเป็น Global Preset ในการตั้งค่า

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

เปลี่ยนการตั้งค่าโมดูลเป็นพรีเซ็ตใหม่จากสไตล์ที่กำหนดเอง

ตั้งชื่อพรีเซ็ตใหม่ตามที่คุณต้องการ

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

ทำซ้ำขั้นตอนเหล่านี้สำหรับค่าที่ตั้งไว้ล่วงหน้าแต่ละรายการที่คุณต้องการสร้าง

สร้างจานสีที่กำหนดเองด้วยรหัสสีภายในตัวสร้างธีม Divi ของคุณ

ไปที่ตัวเลือกธีม Divi

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

ปรับแต่งจานสีโดยใช้รหัสฐานสิบหกในคู่มือสไตล์

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

เคล็ดลับ: เก็บคำแนะนำสไตล์ในแท็บแยกต่างหากเพื่อคัดลอก/วางลักษณะเฉพาะ (การไล่ระดับสี/เงากล่อง/เส้นขอบ/…)

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

คู่มือสไตล์พรีเซ็ตทั่วโลกใหม่ทุกสัปดาห์!

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