เพื่อเริ่มปรับแต่งเลย์เอาต์และรูปแบบตัวอักษรของคุณ เว็บไซต์เว็บคุณต้องเข้าถึงเครื่องมือปรับแต่งธีมก่อนโดยคลิกที่ลิงก์ 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=”expanded” 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][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” 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”]ดาวน์โหลด TEMPLATES 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
