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

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

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

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

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

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

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

ขอเริ่มต้น!

ใช้สีเมนู

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS ทั่วไป

รหัสต่อไปนี้จะอยู่ใน "ของคุณ ตัวเลือกธีม> กล่อง 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 อื่น ๆ

• เว็บไซต์ 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