สุดยอดคู่มือปรับแต่งธีม Divi

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

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

เรามีหลายอย่างที่ต้องพูดถึง เรามาเริ่มกันที่จุดเริ่มต้นกันดีกว่า

สร้างขึ้นด้วย WordPress ในใจ

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

นี่คือตัวอย่างตัวเลือก Theme Customizer ในธีม TwentySeventeen:

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

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

เครื่องมือปรับแต่งธีม Divi ยังคงมีตัวเลือกเครื่องมือปรับแต่ง WordPress มาตรฐานมากมาย แต่ก็มีอีกมากมาย

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

การตั้งค่าทั่วไป

เมื่อคุณเริ่มปรับแต่งธีมของคุณ ฉันคิดว่าควรเริ่มต้นที่ด้านบนสุดด้วยการตั้งค่าทั่วไปและค่อยๆ ลดระดับลง

เอกลักษณ์ของเว็บไซต์

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

การตั้งค่าเค้าโครง

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

เปิดใช้งานเค้าโครงแบบกล่อง

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

ความกว้างของเนื้อหาเว็บไซต์

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

ค่าเริ่มต้นถูกตั้งค่าเป็น 1080px นี่เป็นความกว้างที่ดีสำหรับแล็ปท็อปและเดสก์ท็อปมาตรฐานส่วนใหญ่

ความกว้างของรางน้ำเว็บไซต์

ความกว้างของรางน้ำสอดคล้องกับปริมาณพื้นที่แนวนอน (ระยะขอบ) ระหว่างคอลัมน์ในแต่ละแถว

ค่าทางเลือกสำหรับช่วงความกว้างของรางน้ำตั้งแต่ 1 ถึง 4

1 หมายถึงระยะขอบศูนย์ระหว่างคอลัมน์
2 หมายถึงระยะขอบด้านขวา 3% ระหว่างคอลัมน์
3 หมายถึงระยะขอบด้านขวา 5.5% ระหว่างคอลัมน์
4 หมายถึงระยะขอบด้านขวา 8% ระหว่างคอลัมน์

ใช้ความกว้างของแถบด้านข้างแบบกำหนดเอง

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

ส่วนและความสูงของแถว

ตัวเลือกเหล่านี้จะปรับระยะห่างแนวตั้ง (ช่องว่างภายในด้านบนและด้านล่าง) สำหรับแต่ละส่วนและแถว

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

ตัวอย่างเช่น “0” แทน 0% ของช่องว่างด้านบนและด้านล่าง “1” หมายถึง 1% ของช่องว่างด้านบนและด้านล่าง “2” หมายถึง 2% เป็นต้น เปอร์เซ็นต์ของช่องว่างภายในจะขึ้นอยู่กับความกว้างของคอนเทนเนอร์ (ส่วนหรือแถว) ดังนั้นหากความกว้างที่แท้จริงของส่วนคือ 1080px และคุณได้ตั้งค่าความสูงของส่วนเป็น 1 แสดงว่าคุณจะมี...

1080px x 0.01 = 10.8px

… 10.8px ของช่องว่างภายในด้านบนและด้านล่าง

ตัวเลือกมีตั้งแต่ 0 ถึง 10 ดังนั้นคุณสามารถมีช่องว่างภายในได้มากถึง 10%

ธีมเน้นสี

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

การอัปเดต Theme Accent Color จะอัปเดตสิ่งต่อไปนี้ด้วย:

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

วิชาการพิมพ์

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

ขนาดตัวอักษร

การดำเนินการนี้จะเปลี่ยนข้อความเนื้อหาเริ่มต้นสำหรับธีมของคุณ ขนาดเริ่มต้นคือ 14px

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

ความสูงของเส้นร่างกาย

ความสูงของบรรทัดของข้อความแต่ละบรรทัด

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

ขนาดข้อความส่วนหัว

Divi ช่วยให้คุณกำหนดขนาดข้อความส่วนหัว h1 เริ่มต้นได้ที่นี่ องค์ประกอบนี้มีผลกับ Divi เช่นชื่อโมดูลส่วนหัวแบบเต็ม หากคุณต้องการปรับขนาดของระดับส่วนหัวอื่นๆ (h2, h3 ฯลฯ…) ฉันขอแนะนำให้เพิ่มระดับเหล่านั้นใน CSS เพิ่มเติม (ซึ่งจะกล่าวถึงในภายหลังในโพสต์)

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

ค่าเริ่มต้นสำหรับขนาดข้อความส่วนหัวคือ 30px นี่เป็นขนาดที่ปลอดภัยที่ดีในการเริ่มต้น โดยเฉพาะอย่างยิ่งเนื่องจากพาดหัวข่าวบางเรื่องต้องใช้สำเนาที่ยาวกว่า อย่างไรก็ตาม ฉันมักจะใช้ส่วนหัวที่ใหญ่ขึ้นเพื่อรองรับขนาดที่เพิ่มขึ้นของจอภาพ นอกจากนี้ ลูกค้าส่วนใหญ่ต้องการเว็บไซต์ที่มีหัวข้อที่เรียบง่ายและสั้น เช่น “เกี่ยวกับเรา” และ “ติดต่อเรา” ซึ่งดูดีกว่าด้วยขนาดตัวอักษรที่ใหญ่ขึ้น ฉันชอบตั้งค่าส่วนหัว h1 ของฉันเป็นอย่างน้อย 48px

HEADER LETTER SPACING

ระยะห่างระหว่างตัวอักษรปรับช่องว่างแนวนอนระหว่างตัวอักษร ค่า Header Letter Spacing จะมีผลกับระดับส่วนหัวทั้งหมด (h1, h2, h3, h4, h5, h6), blockquotes และชื่อสไลด์

เคล็ดลับการออกแบบ: เป็นเทคนิคการออกแบบที่ดีในการ ลดระยะห่างระหว่างตัวอักษรสำหรับข้อความที่มีขนาดใหญ่ ขึ้น และ เพิ่มระยะห่างระหว่างตัวอักษรสำหรับข้อความที่มีขนาดเล็กลง เมื่อพูดถึงส่วนหัว ข้อความขนาดใหญ่ที่มีน้ำหนักแบบอักษรมากกว่า (ตัวหนา) จะดูดีขึ้นด้วยระยะห่างตัวอักษรที่ลดลง -1px

อย่างไรก็ตาม หากคุณใส่ส่วนหัวเดียวกันนั้นด้วยตัวพิมพ์ใหญ่ คุณอาจพบว่าการเพิ่มระยะห่างระหว่างตัวอักษรเป็น 1-2px จะดูดีขึ้น

ความสูงของบรรทัดส่วนหัว

เช่นเดียวกับค่าการเว้นวรรคตัวอักษร ค่าความสูงของบรรทัดส่วนหัวจะมีผลกับระดับส่วนหัวทั้งหมด (h1, h2, h3, h4, h5, h6), blockquotes และชื่อสไลด์ เนื่องจากขนาดตัวอักษรที่ใหญ่กว่า 1em จึงเป็นการตั้งค่าเริ่มต้น ฉันคิดว่าความสูงของบรรทัดระหว่าง 1em ถึง 1.3em ดูดี โดยเฉพาะอย่างยิ่งเมื่อส่วนหัวมีตั้งแต่สองบรรทัดขึ้นไป

รูปแบบตัวอักษรของส่วนหัว

ใช้ตัวเลือกเหล่านี้เพื่อเปลี่ยนรูปแบบแบบอักษรของส่วนหัวของคุณ

แบบอักษรส่วนหัวและลำตัว

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

เคล็ดลับการออกแบบ: สำหรับแรงบันดาลใจในการจับคู่แบบอักษร คุณสามารถดู fontpair.co ซึ่งช่วยในการจับคู่ Google Fonts เข้าด้วยกัน Divi จะไม่รองรับแบบอักษรเหล่านี้ทั้งหมด แต่คุณสามารถค้นหาแบบอักษรที่ Divi รองรับเพื่อดูการจับคู่ที่ทำงานร่วมกันได้ดี

BODY LINK COLOR

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

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

สีข้อความของร่างกาย

ที่นี่คุณสามารถเปลี่ยนสีของข้อความเนื้อหาของคุณได้ บล็อกยอดนิยมอย่าง New York Times และ Smashing Magazine ใช้ #333333 สำหรับสีข้อความ นี้มีแนวโน้มที่จะอ่านได้ดีกว่าบนพื้นหลังสีขาวในความคิดของฉัน

HEADER TEXT COLOR

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

พื้นหลัง

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

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

ส่วนหัวและการนำทาง

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

รูปแบบส่วนหัว

สไตล์ส่วนหัว

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

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

แถบเมนูหลัก

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

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

ทำให้เต็มความกว้าง

การทำเช่นนี้จะขยายเมนูให้เต็มความกว้างของหน้าต่างเบราว์เซอร์

ซ่อนภาพโลโก้

หากต้องการ คุณสามารถซ่อนภาพโลโก้จากเมนูของคุณได้อย่างสมบูรณ์ที่นี่

ความสูงของเมนู

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

โลโก้ความสูงสูงสุด

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

ขนาดตัวอักษร, ระยะห่างระหว่างตัวอักษร, แบบอักษร, รูปแบบตัวอักษร, สีข้อความ, สีลิงค์ที่ใช้งานอยู่

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

สีพื้นหลัง

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

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

การตั้งค่าเมนูแบบเลื่อนลง

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

แถบเมนูรอง

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

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

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

การตั้งค่าการนำทางคงที่

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

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

องค์ประกอบส่วนหัว

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

ไอคอนโซเชียล

ตามค่าเริ่มต้น Divi จะแสดงไอคอนสำหรับ Facebook, Twitter, Google+ และ RSS คุณสามารถแก้ไขโปรไฟล์เหล่านี้ได้ในตัวเลือกธีมของ Divi

ส่วนท้าย

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

เค้าโครง

ที่นี่คุณสามารถเลือกระหว่าง 5 เลย์เอาต์สำหรับส่วนท้ายของคุณ

คุณยังสามารถตั้งค่าสีพื้นหลังของส่วนท้ายซึ่งตั้งค่าเป็น #222222 ตามค่าเริ่มต้นได้

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

วิดเจ็ต

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

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

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

องค์ประกอบส่วนท้าย

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

เมนูส่วนท้าย

หากคุณมีเมนูส่วนท้าย คุณสามารถจัดรูปแบบได้ที่นี่

แถบด้านล่าง

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

แก้ไขเครดิตส่วนท้าย

คุณยังสามารถแทนที่เครดิตส่วนท้ายเริ่มต้นด้วย html ใดก็ได้ที่คุณต้องการภายในช่องนี้

ปุ่ม

ส่วนนี้ควบคุมสิ่งที่คุณต้องการให้สไตล์ปุ่มเริ่มต้นเป็น

ปุ่มสไตล์

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

สีข้อความ

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

เคล็ดลับการออกแบบ: ให้ Theme Accent Color ของคุณกำหนดสีข้อความของปุ่มของคุณ เพื่อให้คุณคงความสามารถในการเพิ่มปุ่มเวอร์ชันสีเข้มและสีอ่อนในโมดูลของคุณ

ปุ่มโฮเวอร์สไตล์

นี่คือที่ที่คุณสามารถปรับแต่งสไตล์ของสถานะโฮเวอร์ของปุ่มได้

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

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

บล็อก

โพสต์

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

หากคุณเลือกใช้ Post Header Module ตัวเลือกเหล่านี้จะไม่มีผล

สไตล์มือถือ

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

สไตล์แท็บเล็ตและโทรศัพท์

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

เคล็ดลับการออกแบบ #1: การ ปรับแต่งอย่างหนึ่งที่ฉันชอบทำสำหรับเลย์เอาต์โทรศัพท์คือการตั้งค่าความสูงของแถวเป็น “0” สิ่งนี้จะสร้างกระแสเนื้อหาที่ดีขึ้นเมื่อเลื่อนบนโทรศัพท์เนื่องจากจะใช้ช่องว่างระหว่างแถวนั้น

เคล็ดลับการออกแบบ #2: ค้นหาขนาดแบบอักษรที่เหมาะกับไซต์ของคุณ นี่คือสิ่งที่ดีที่ฉันชอบติดตามสำหรับส่วนหัวของฉัน:

เดสก์ท็อป: 48px

แท็บเล็ต: 40px

โทรศัพท์: 32px

เมนูมือถือ

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

แบบแผนสี

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

ในความคิดของฉัน เป็นการดีที่สุดที่จะปล่อยให้การตั้งค่านี้เป็นค่าเริ่มต้น

เมนูและวิดเจ็ต

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

หน้าแรกแบบคงที่

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

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

CSS เพิ่มเติม

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

ตัวอย่าง CSS เพิ่มเติม

ตัวอย่าง #1: ปรับขนาดของส่วนหัวทั้งหมด

ตัวอย่างที่ดีอย่างหนึ่งของ CSS เพิ่มเติมคือการกำหนดสไตล์สำหรับแท็กส่วนหัวที่เหลือของคุณ Divi ให้คุณปรับแต่งการตั้งค่าสำหรับฟอนต์ส่วนหัวของคุณ แต่นั่นเป็นเพียงสำหรับส่วนหัว h1 ของคุณ คุณสามารถใช้กล่อง CSS เพิ่มเติมเพื่อป้อนการปรับแต่งแท็กส่วนหัวที่เหลือ (h2, h3, h4 ฯลฯ…) ฉันชอบใช้มาตราส่วนต่อไปนี้: 16, 18, 21, 24, 36, 48

h2 {
	font-size: 36px;
}

h3 {
	font-size: 24px;
}

h4 {
	font-size: 21px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

ตัวอย่าง #2: จับคู่ช่องว่างภายในย่อหน้าล่างกับความสูงของเส้นร่างกาย

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

p { padding-bottom: 1.7em}

เนื่องจากค่าความยาว em ขึ้นอยู่กับขนาดฟอนต์หลัก หากคุณเปลี่ยนขนาดฟอนต์พื้นฐานเป็นอย่างอื่นในเครื่องมือปรับแต่งธีม ค่า 1.7em จะปรับตามนั้น

ตัวอย่าง #3: เพิ่มแอตทริบิวต์ขีดเส้นใต้ลิงก์ของคุณ

เพิ่มแอตทริบิวต์ขีดเส้นใต้ลงในลิงก์เนื้อหา

a {
    text-decoration: underline;
}

การส่งออกและนำเข้าการตั้งค่าเครื่องมือปรับแต่ง Divi สำหรับโครงการถัดไปของคุณ

เครื่องมือปรับแต่งธีม Divi มีตัวเลือกการพกพาที่อนุญาตให้ผู้ใช้ส่งออกหรือนำเข้าการตั้งค่าเครื่องมือปรับแต่ง นี่เป็นโอกาสที่ดีสำหรับนักพัฒนาในการสร้างเทมเพลตการตั้งค่าตัวปรับแต่งเพื่อใช้ในโครงการในอนาคต

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

หากต้องการส่งออกการตั้งค่าของคุณ ให้คลิกไอคอนการพกพาที่ด้านบนของเครื่องมือปรับแต่งธีม Divi

ตั้งชื่อไฟล์ส่งออกและคลิกปุ่ม "ส่งออกการตั้งค่า Divi Customizer"

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

และนั่นแหล่ะ

การตั้งค่า Divi Customizer ประกอบด้วยอะไรบ้าง?

การตั้งค่าเครื่องมือปรับแต่งจะรวมทุกอย่างไว้ใน 7 ส่วนแรก

1. การตั้งค่าทั่วไป
2. ส่วนหัวและการนำทาง
3. ส่วนท้าย
4. ปุ่ม
5. บล็อก
6. สไตล์มือถือ
7. แบบแผนสี

4 ส่วนสุดท้ายเป็นเฉพาะ WordPress และจะไม่นำไปใช้กับการติดตั้ง Divi อื่น ๆ ส่วนเหล่านี้รวมถึง:

1. เมนู
2. วิดเจ็ต
3. หน้าแรกแบบคงที่
4. CSS เพิ่มเติม

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

วิธีการจัดเก็บรูปแบบเครื่องมือปรับแต่ง Divi

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

ปิดความคิด

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

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!