Divi: ธีม WordPress ที่ดีที่สุดของเวลาทั้งหมด!

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

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

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

นี่คือภูมิภาคที่ฉันกำลังพูดถึง:

ส่วนตัวสร้าง css wordpress แบบกำหนดเอง

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

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

ไอคอนที่เปลี่ยนสี Divi

ฉันจะแสดงวิธีใช้สีพื้นหลังในเมนูก่อน จากนั้นแยกกันฉันจะแสดงวิธีทำให้ไอคอนโซเชียลตรงกัน

หากคุณยังไม่ได้อ่านบทแนะนำของเรา การนำเสนอธีม WordPress Diviฉันขอเชิญคุณทำ

ขอเริ่มต้น!

ใช้สีเมนู

ก่อนอื่นฉันใช้รูปแบบส่วนหัวเริ่มต้น หากคุณใช้รูปแบบอื่นบทช่วยสอนนี้น่าจะยังมีผลอยู่เนื่องจากรหัสทั่วไปของ "divs" บน Divi นั้นเหมือนกันสำหรับทุกรูปแบบ (# main-header) เท่าที่ฉันทราบ หากคุณมีปัญหากับรูปแบบอื่น ๆ

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

สร้างเว็บไซต์ของคุณอย่างง่ายดายด้วย Elementor

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

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

การปรับเปลี่ยนเมนู Divi ในแบบของคุณ

ฉันใช้ rgba (255,255,255,0.6) ซึ่งจะเป็นสีของลิงค์และสีขาวเข้มเป็นสีลิงค์ที่ใช้งานอยู่ (สำหรับเอฟเฟกต์ภาพที่ต้องการ)

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

โปรแกรมสร้าง Divi Wordpress

ตอนนี้เพิ่ม CSS ต่อไปนี้ในช่องนี้:

# มือหัว {พื้นหลัง: #474f61; }

คุณควรมีสิ่งที่คล้ายกันนี้อย่าลืมเปลี่ยนรหัสฐานสิบหกเป็นสีที่คุณต้องการ:

การตั้งค่า Divi การปรับแต่งสี

คุณต้องการขายผลิตภัณฑ์ของคุณบนอินเทอร์เน็ตหรือไม่?

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

คลิกที่ บันทึกและอัปเดต และสิ่งนี้จะนำไปใช้กับเมนูหลักทั้งหมดในหนึ่งบรรทัดของรหัส

ตอนนี้คุณต้องเพิ่มรหัสเดียวกันนี้สำหรับทุกหน้าของคุณและเปลี่ยนรหัสฐานสิบหกทุกครั้ง

ไอคอนเครือข่ายสังคมออนไลน์ (ไม่จำเป็น)

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

ดังนั้นก่อนอื่นคุณต้องแน่ใจว่าคุณได้ตั้งค่าลิงค์โซเชียลของคุณ ไปที่ " ตัวเลือก Divi> ธีมทั่วไป และเพิ่ม URL ของคุณไปยังหน้าโซเชียลมีเดียของคุณ

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

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

การปรับแต่งเมนูรอง

ไปที่ " ส่วนหัวและการนำทาง> องค์ประกอบส่วนหัว และทำเครื่องหมายในช่อง " แสดงไอคอนโซเชียล '

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

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

# มือหัว # .and บนส่วนหัวของสังคมไอคอน {พื้นหลัง: #474f61; }

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

โปรแกรมแก้ไขชุดรูปแบบ Divi รหัส css ที่กำหนดเอง

คุณอาจต้องตรวจสอบว่าสีฐานสิบหกนั้นถูกต้องในแต่ละหน้า

CSS ทั่วไป

รหัสต่อไปนี้จะอยู่ใน "ของคุณ ตัวเลือกธีม> กล่อง CSS หรือในไฟล์สไตล์ของธีมลูก

ตัวเลือกธีม divi css ส่วนที่กำหนดเอง

# ด้านบนส่วนหัวของสังคมไอคอน .and li {ขอบซ้าย: 5px; } # .and บนส่วนหัวของสังคมไอคอน {padding: 4px; ขอบล่าง: 8px; ความกว้าง: 30px; ความสูง: 30px; border-radius: 50%; line-height: 24px; }

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

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

[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 อื่น ๆ

22 หุ้น
หุ้น13
ทวีต2
Enregistrer7