ในการเริ่มปรับแต่งเค้าโครงและตัวอักษรของเว็บไซต์ของคุณคุณต้องเข้าไปที่ Theme Customizer ก่อนโดยคลิกที่ลิงค์ Divi> เครื่องมือปรับแต่งธีม บนแดชบอร์ด WordPress ของคุณ ซึ่งจะเป็นการเปิดตัวปรับแต่ง จากนั้นมองหาแผง "การตั้งค่าทั่วไป" คลิกที่แผงควบคุมเพื่อเปิดการตั้งค่าที่เหมาะสมและเริ่มปรับแต่ง ในแผง "การตั้งค่าทั่วไป" คุณจะสังเกตเห็นสามส่วน ได้แก่ การตั้งค่าการออกแบบตัวอักษรและพื้นหลัง
การตั้งค่าเค้าโครง
แผงเค้าโครงช่วยให้คุณปรับขนาดและตัวเลือกระยะห่างต่างๆสำหรับเว็บไซต์ของคุณได้ ที่นี่คุณสามารถเพิ่มหรือลดระยะห่างระหว่างคอลัมน์แถวและส่วนและปรับขนาดของแถบด้านข้างของคุณได้ คุณยังสามารถเปิดใช้งานโหมด“ เลย์เอาต์แบบบรรจุกล่อง” ได้จากแผงนี้
เปิดใช้งานเค้าโครงซ้อน
ที่นี่คุณสามารถแก้ไขเว็บไซต์ของคุณในรูปแบบกล่องที่กำหนดเนื้อหาของเว็บไซต์ของคุณและแสดงพื้นหลังที่สามารถปรับแต่งได้
ความกว้างของเนื้อหาของเว็บไซต์
นี่คือที่ที่คุณสามารถกำหนดความกว้างสูงสุดของส่วนเนื้อหาของคุณ เนื่องจากเนื้อหาของคุณอยู่ในรูปแบบที่ตอบสนองเนื้อหาจะปรับให้มีขนาดเล็กลง แต่จะไม่ขยายเกินกว่าความกว้างสูงสุดที่กำหนดไว้ที่นี่
ค่าเริ่มต้นคือ 1080px เป็นความกว้างที่ดีสำหรับแล็ปท็อปและเดสก์ท็อปมาตรฐานส่วนใหญ่
ระยะห่างของคอลัมน์บนเว็บไซต์
ความกว้างของรางน้ำคือจำนวนช่องว่างแนวนอน (ระยะขอบ) ระหว่างคอลัมน์ในแต่ละแถว
ค่าเผื่อเลือกสำหรับความกว้างของรางน้ำอยู่ระหว่าง 1 และ 4
1 แสดงถึงระยะห่างศูนย์ระหว่างคอลัมน์
2 แสดงถึงส่วนต่างของ 3% ระหว่างคอลัมน์
3 แสดงถึงส่วนต่างของ 5,5% ระหว่างคอลัมน์
4 แสดงถึงส่วนต่างของ 8% ระหว่างคอลัมน์
ใช้ความกว้างของแถบด้านข้างที่กำหนดเอง
ตั้งค่าความกว้างของแถบด้านข้างเริ่มต้นสำหรับธีมของคุณ สิ่งนี้ใช้กับเพจทั้งหมดในธีมของคุณที่มีแถบด้านข้างและไม่ได้สร้างด้วย Divi Builder
ความสูงของส่วนและเส้น
ตัวเลือกเหล่านี้จะปรับระยะห่างในแนวตั้ง (ช่องว่างด้านบนและด้านล่าง) สำหรับแต่ละส่วนและแถว
สีเน้นธีม
ก่อนที่คุณจะเริ่มเปลี่ยนสีขององค์ประกอบอื่น ๆ คุณต้องเปลี่ยนก่อน เมื่อคุณเปลี่ยนแปลงแล้วให้บันทึกและเผยแพร่การตั้งค่าของคุณและรีเฟรชหน้าของคุณ ตอนนี้ชุดรูปแบบสีเน้นเสียงที่อัปเดตควรเติมองค์ประกอบอื่น ๆ โดยอัตโนมัติ
วิชาการพิมพ์
แผงการพิมพ์เป็นที่ที่คุณสามารถปรับลักษณะเริ่มต้นของข้อความทั่วทั้งเว็บไซต์ของคุณ คุณสามารถปรับขนาดแบบอักษรและส่วนหัวของคุณซึ่งจะแสดงในทุกพื้นที่ของไซต์ตามสัดส่วน คุณสามารถปรับสีของพวกเขาเช่นเดียวกับความสูงของบรรทัดระยะห่างตัวอักษรและรูปแบบตัวอักษร สุดท้ายคุณยังสามารถเลือกแบบอักษรได้หลายสิบแบบเพื่อนำไปใช้กับแต่ละแบบ
ขนาดตัวอักษร
สิ่งนี้จะเปลี่ยนข้อความเนื้อหาเริ่มต้นสำหรับธีมของคุณ ขนาดเริ่มต้นคือ 14px
ความสูงของเส้นร่างกาย
ความสูงของเส้นของแต่ละบรรทัด
ขนาดข้อความส่วนหัว
Divi ช่วยให้คุณสามารถกำหนดขนาดข้อความเริ่มต้นสำหรับส่วนหัวของคุณได้ที่นี่ สิ่งนี้มีผลต่อองค์ประกอบ Divi เช่นชื่อโมดูลส่วนหัวแบบเต็มความกว้าง
ช่องว่างตัวอักษรส่วนหัว
ระยะห่างระหว่างตัวอักษรจะปรับช่องว่างแนวนอนระหว่างตัวอักษร ค่าระยะห่างของตัวอักษรส่วนหัวมีผลต่อระดับส่วนหัวทั้งหมด (h1, h2, h3, h4, h5, h6), เครื่องหมายคำพูดและชื่อสไลด์
ความสูงของแถวส่วนหัว
เช่นเดียวกับค่าระยะห่างของตัวอักษรค่าความสูงของแถวส่วนหัวจะมีผลต่อระดับส่วนหัวทั้งหมด (h1, h2, h3, h4, h5, h6), เครื่องหมายคำพูดและชื่อเรื่อง จำนวนสไลด์
สไตล์ตำรวจ
ใช้ตัวเลือกเหล่านี้เพื่อเปลี่ยนรูปแบบตัวอักษรของส่วนหัวของคุณ
แบบอักษรของเนื้อหาและส่วนหัว
ฟอนต์เริ่มต้นใน Divi คือ Open Sans แต่ Divi มีฟอนต์ให้เลือกเกือบร้อยแบบ! ใช้ประโยชน์จากฟอนต์ในตัวเหล่านี้และทดสอบว่าฟอนต์ใดทำงานได้ดีที่สุดสำหรับธีมของคุณ
สีของการเชื่อมโยงร่างกาย
สีของลิงก์เนื้อหาจะสืบทอดมาจากสีที่เน้นธีมของคุณ แต่คุณสามารถเปลี่ยนได้ที่นี่เสมอ
สีตัวอักษร
ที่นี่คุณสามารถเปลี่ยนสีของข้อความในร่างกายได้
สีข้อความส่วนหัว
ที่นี่คุณสามารถเปลี่ยนสีของส่วนหัวของคุณ
พื้นหลัง
แผงพื้นหลังช่วยให้คุณสามารถปรับสีพื้นหลังของธีมของคุณรวมทั้งอัปโหลดภาพพื้นหลังที่กำหนดเองและปรับตำแหน่งบนหน้าได้ ภาพพื้นหลังและสีทำงานได้ดีเมื่อจับคู่กับการตั้งค่าการจัดรูปแบบกล่องในแผงเลย์เอาต์ที่กล่าวถึงก่อนหน้านี้
สำหรับบทช่วยสอนนี้ฉันหวังว่ามันจะช่วยให้คุณปรับแบบอักษรและเค้าโครงของธีม Divi ได้ดีขึ้น
[vc_row center_row = "ใช่"] [vc_column width = "1/2″] [vcex_button target =" blank "layout =" expand "align =" center "font_family =" Raleway "font_weight =" 700 " style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] ดาวน์โหลดธีม DIVI [/ vcex_button] [/ width_column] [» vc_column] [ » 1/2″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" Layout = "ขยาย" align = "กลาง" font_family = "Raleway" font_weight = "700″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] ดาวน์โหลดเทมเพลต DIVI [/ vcex_button] [/ vc_column] [/ vc_row]
บทแนะนำ Divi อื่น ๆ
- เว็บไซต์ 5 สำหรับการใช้งานร้านอาหาร Divi ธีม
- วิธีการเพิ่มข้อความในผลิตภัณฑ์ Divi WooCommerce
- วิธีการเปลี่ยนสีของเมนูระหว่างหน้า Divi
- วิธีปรับเปลี่ยนกริดของบล็อกด้วย Divi
- วิธีการใช้บทบาทของบรรณาธิการ Divi บน WordPress
- วิธีสร้างแถบเลื่อน Divi แบบเต็มหน้าจอ
- วิธีการเปลี่ยนสีของเมนูระหว่างหน้า Divi
- คุณสมบัติที่คุณอาจไม่รู้เกี่ยวกับ Divi
- วิธีการใช้ Divi Builder ใน WordPress
- วิธีใช้โมดูลเลื่อนภาพ Divi
- วิธีการใช้โมดูล Divi Builder Flip
- วิธีการเพิ่มโมดูลข้อความรับรองในตัวสร้าง Divi
- วิธีใช้โมดูลข้อความ Divi
- วิธีสร้างแถบเลื่อนบน Divi
- วิธีแก้ไขบทบาทผู้ใช้ Divi
- วิธีใช้โมดูล Divi Social Media
- วิธีใช้โมดูลร้านค้าในธีม WordPress Divi
- วิธีใช้โมดูลด้านข้าง Divi
- วิธีการใช้โมดูลตารางราคา Divi
- วิธีการใช้โมดูลชื่อเรื่องของสิ่งพิมพ์ของ Divi
- วิธีเพิ่มโมดูลวิดีโอของ Divi
- วิธีใช้โมดูลการนำทางบทความ
- วิธีการใช้โมดูลค้นหา Divi
- วิธีใช้โมดูลกระเป๋าสตางค์ Divi
- วิธีการใช้โมดูลคนบน Divi Builder
- วิธีใช้โมดูลกระเป๋าสตางค์กับตัวกรอง Divi
- วิธีการใช้โมดูลเลื่อนความกว้างเต็ม
- วิธีใช้โมดูล Divi Builder Image
- วิธีใช้โมดูลการนำทางความกว้างเต็มรูปแบบของ Divi Builder
- วิธีการใช้โมดูลคลังภาพ
- วิธีการใช้โมดูลบัตร Divi Builder Full-Width Card
- วิธีใช้โมดูล Divi Full Width Portfolio
- วิธีใช้โมดูลส่วนหัวแบบเต็มความกว้างของ Divi
- วิธีใช้โมดูล Divi Counter
- วิธีใช้แถบเลื่อนบทความบนเครื่องมือสร้าง Divi
- วิธีใช้โมดูล Divi Email Optin
