การทำให้เว็บไซต์ของคุณโดดเด่นจากคนอื่นๆ บางครั้งอาจพูดง่ายกว่าทำ โชคดีที่คุณสามารถมีส่วนร่วมใน DIY ได้โดยเพิ่มการปรับแต่งที่สร้างสรรค์ซึ่งจะทำให้แน่ใจได้ บล็อกของคุณ โดดเด่นจากผู้อื่น
ในบทช่วยสอนนี้ ฉันจะแสดงวิธีใช้ Divi builder เพื่อปรับแต่ง บล็อกของคุณและโดยเฉพาะพื้นที่ 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=”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
สวัสดี,
ขอบคุณสำหรับบทเรียนทั้งหมดของคุณ
คุณรู้หรือไม่ว่าเราสามารถใส่เมนูย่อย divi (ระดับที่สองด้านล่างดรอปดาวน์) ในการเติมความกว้างได้หรือไม่? ซึ่งใช้ความกว้างเต็มของหน้า
สวัสดี,
คุณจะเปลี่ยนสีของข้อความในส่วนหัวหลักได้อย่างไร? การมีพื้นหลังโปร่งใส (บนส่วนหัวหลักของฉัน) สีแบบอักษรที่ฉันเลือก (บนส่วนหัวหลักซึ่งแสดงส่วนต่างๆของฉัน) ผ่านอินเทอร์เฟซการปรับแต่ง Divi จะเป็นสีดำ อย่างไรก็ตามฉันอยากให้มันเป็นสีขาวในบางเพจเพราะภาพด้านล่างมืดเกินไป
อย่างไร?
Merci Avance ตราไว้หุ้นละ
สวัสดี Germain,
คุณต้องการให้เป็นสีขาวในทุกหน้าหรือเพียงไม่กี่หน้า?