การตั้งค่า Global Presets Style Guide สำหรับเว็บไซต์ Divi ถัดไปของคุณ (ดาวน์โหลด Framework ฟรี!)

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

ดาวน์โหลด Global Presets Style Guide Framework

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

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

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

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

ดาวน์โหลด

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

การตั้งค่า Global Presets Style Guide สำหรับเว็บไซต์ Divi ถัดไปของคุณ

Global Presets Style Guide คืออะไร?

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

1. จานสี

2. รูปแบบข้อความ

3. รูปแบบโมดูล

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

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

เมื่อใดควรสร้าง/ใช้งาน Global Presets Style Guide

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

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

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

วิธีใช้ Global Presets Style Guide

ดาวน์โหลดและอัปโหลดโครงร่างโครงร่างไปยังไลบรารี Divi ของคุณ

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

สร้างหน้าร่างใหม่สำหรับเค้าโครงและอัปโหลดเค้าโครงโครงร่าง

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

ตั้งค่าจานสี

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

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

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

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

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

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

เพิ่มรูปแบบข้อความ

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

โมดูลสไตล์

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

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

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

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

• ปุ่มหลัก
• ปุ่มรอง
• ปุ่มตติยภูมิ

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

โมดูลที่ซ้อนกัน: เปลี่ยนองค์ประกอบที่ซ้อนกันเป็นค่าที่ตั้งไว้ทั่วโลกด้วย

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

เค้าโครงคู่มือการส่งออกและนำเข้า (พร้อมค่าที่ตั้งล่วงหน้า) บนเว็บไซต์อื่น

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

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

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

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

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

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