การเปลี่ยนโลโก้ของคุณบนส่วนหัวคงที่ใน Divi

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

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

ในโพสต์นี้ฉันจะแสดงวิธี:

1. เปลี่ยนโลโก้ของคุณเป็นโลโก้อื่นเมื่อส่วนหัวคงที่ของคุณเปิดใช้งานอยู่ (สามารถทำได้ด้วย CSS เพียงบรรทัดเดียว)
2. เปลี่ยนสีโลโก้ของคุณบนส่วนหัวคงที่
3. เพิ่มเอฟเฟกต์การเปลี่ยนภาพที่ยอดเยี่ยมเมื่อเปลี่ยนโลโก้ของคุณบนส่วนหัวคงที่
4. สลับและย้ายโลโก้ส่วนหัวที่กึ่งกลางของคุณไปยังเค้าโครงเริ่มต้น (จัดชิดซ้าย) บนส่วนหัวคงที่ของคุณ

มาเริ่มกันเลย.

แอบมอง

นี่คือตัวอย่างเล็กๆ น้อยๆ ของสิ่งที่เราจะทำได้ในบทช่วยสอนนี้

นี่คือลักษณะการสลับโลโก้ที่เรียบง่าย

นี่คือสวิตช์โลโก้พร้อมเอฟเฟกต์การเปลี่ยน

นี่คือโลโก้ที่เปลี่ยนตำแหน่งจากรูปแบบส่วนหัวที่อยู่ตรงกลาง

การตั้งค่า

ก่อนที่คุณจะดำเนินการใดๆ โปรดตรวจสอบให้แน่ใจว่าคุณได้ดำเนินการดังต่อไปนี้:

1. ติดตั้ง Divi เวอร์ชันล่าสุด
2. ใช้ Divi Child Theme ที่ใช้งานอยู่ หากคุณต้องการความช่วยเหลือในการตั้งค่าธีมย่อย เนื้อหาจะครอบคลุมอยู่ในโพสต์นี้ หากคุณต้องการความช่วยเหลือเพิ่มเติม โปรดติดต่อทีมสนับสนุนของเรา
3. สร้างโลโก้ของคุณสองเวอร์ชันที่มีขนาด 200×131 และเพิ่มลงในไลบรารี WordPress Media ของคุณ โลโก้หนึ่งโลโก้จะใช้สำหรับส่วนหัวหลักและอีกโลโก้หนึ่งจะใช้สำหรับส่วนหัวแบบคงที่ หากทำได้ ให้ทำให้โลโก้เวอร์ชันส่วนหัวตายตัวเป็นแนวนอนมากขึ้น เพื่อไม่ให้ถูกกดทับในแนวตั้งบนส่วนหัวคงที่ที่เล็กกว่า นี่คือตัวอย่างโลโก้ส่วนหัวหลักที่ฉันใช้อยู่ นี่คือตัวอย่างโลโก้ส่วนหัวคงที่ของฉัน สังเกตว่าฉันครอบตัดข้อความเพื่อสร้างโลโก้แนวนอนที่เรียบง่ายขึ้นและพอดีกับส่วนหัวที่มีความสูงน้อยกว่า ไม่น่าจะมีใครอ่านข้อความนั้นได้อยู่แล้ว และแบรนด์ก็ยังเป็นตัวแทนอยู่

   

4. ตั้งค่าเมนูหลักของคุณด้วยรายการเมนู

เมื่อคุณทำตามขั้นตอนเหล่านี้เสร็จแล้ว คุณก็พร้อมที่จะเริ่มต้น

การเปลี่ยนโลโก้ของคุณบนส่วนหัวคงที่ใน Divi

สมัครสมาชิกช่อง Youtube ของเรา

การเปลี่ยนโลโก้บนส่วนหัวคงที่ของคุณโดยใช้ CSS

ก่อนที่เราจะไปที่ CSS ที่กำหนดเอง มาตั้งค่าเมนูของเราภายในเครื่องมือปรับแต่งธีมก่อน จากส่วนหลังของไซต์ WordPress ให้ไปที่ Theme Customizer > Header & Navigation > Header Format และตรวจสอบให้แน่ใจว่าคุณได้เลือกรูปแบบส่วนหัวเริ่มต้นแล้ว

จากนั้นกลับไปที่การตั้งค่าส่วนหัวและการนำทางในตัวปรับแต่งธีม เลือกแถบเมนูหลักและอัปเดตรายการต่อไปนี้:

ความสูงของเมนู: 105
โลโก้ความสูงสูงสุด: 80
ขนาดตัวอักษร: 20

ตอนนี้กลับไปที่ส่วนหัวและการนำทาง เลือกการตั้งค่าการนำทางคงที่และอัปเดตสิ่งต่อไปนี้:

ความสูงของเมนูคงที่: 60
ขนาดตัวอักษร: 20

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

แทรกข้อมูลโค้ด CSS เพื่อเปลี่ยนโลโก้บนส่วนหัวคงที่

วิธีที่ง่ายที่สุดวิธีหนึ่งในการสลับรูปภาพโลโก้ของคุณกับรูปภาพอื่นในส่วนหัวคงที่คือการใช้ "เนื้อหา" ของคุณสมบัติ CSS หากคุณคุ้นเคยกับ CSS โดยปกติแล้วสิ่งนี้จะใช้เมื่อเพิ่มเนื้อหาไปยังองค์ประกอบ :before หรือ :after pseudo ในกรณีนี้ เราจะใช้เพื่อแทรกเนื้อหาใหม่ (ภาพโลโก้ของคุณ) เพื่อแทนที่ภาพโลโก้ปัจจุบัน

ในการดำเนินการนี้ ให้ไปที่เครื่องมือปรับแต่งธีม > CSS เพิ่มเติม แล้วใส่ CSS ต่อไปนี้

/*********************************
change logo for fixed header (quick and easy way)
**********************************/
.et-fixed-header #logo {
content: url(INSERT NEW LOGO IMAGE URL);
}

ตอนนี้แทนที่ข้อความที่ระบุว่า "INSERT NEW LOGO IMAGE" ด้วยภาพโลโก้จริงของคุณ

ในการรับ URL ให้ไปที่ไลบรารีสื่อของคุณจากแดชบอร์ดของ WordPress และคลิกที่รูปภาพที่คุณต้องการเพิ่ม คุณจะพบ URL ที่ด้านบนขวาของหน้าจอที่ปรากฏขึ้น

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

เปลี่ยนสีโลโก้ของคุณ

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

การใช้คุณสมบัติ invert CSS คุณสามารถเปลี่ยนสีโลโก้ของคุณด้วย CSS สองสามบรรทัด ตัวอย่างเช่น หากโลโก้ของคุณเป็นสีดำ การกลับสีโลโก้จะกลายเป็นสีขาว และถ้าโลโก้เป็นสีขาวก็จะเปลี่ยนเป็นสีดำ หากต้องการเพิ่มสไตล์นี้ให้กับโลโก้ของคุณ ให้ไปที่เครื่องมือปรับแต่งธีม > CSS เพิ่มเติม และเพิ่ม CSS ต่อไปนี้ (ตรวจสอบให้แน่ใจว่าคุณลบหรือแสดงความคิดเห็น CSS ที่เพิ่มไว้ก่อนหน้านี้):

/*********************************
Invert Logo color on fixed header
*********************************/
.et-fixed-header #logo {
-webkit-filter: invert(100%);
filter: invert(100%);
}

ตรวจสอบผลลัพธ์ นี่คือโลโก้สีดำที่ถูกเปลี่ยนกลับเป็นเวอร์ชันสีขาว

การเพิ่มเอฟเฟกต์การเปลี่ยนภาพเมื่อเปลี่ยนโลโก้ของคุณบนส่วนหัวคงที่

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

การเพิ่มโลโก้ใหม่ของคุณในไฟล์ Header.php

ในการเพิ่มภาพโลโก้อื่นในส่วนหัวของคุณ เราจำเป็นต้องเพิ่มลงในไฟล์ header.php ใช้ไคลเอนต์ FTP (เช่น FileZilla) ไปที่รูทของไฟล์ Divi Theme ของคุณ และทำสำเนาของไฟล์ header.php

วางสำเนาของไฟล์ header.php ลงในรูทของโฟลเดอร์ธีมลูกของคุณ

จากนั้น เปิดไฟล์ header.php โดยใช้โปรแกรมแก้ไขข้อความที่คุณต้องการ ค้นหาโค้ด html สำหรับลิงก์ที่เก็บภาพโลโก้ใน div ด้วยคลาส “logo_container”

<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
</a>

เราจะเพิ่มข้อมูลโค้ดที่คล้ายกันเพื่อแสดงรูปภาพอื่นในส่วนหัวของคุณ คัดลอกและวางโค้ดต่อไปนี้ใต้โค้ดโดยตรง

<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="INSERT NEW LOGO IMAGE URL" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" class="second-logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
</a>

โปรดสังเกตว่านี่คือสำเนาที่อัปเดตของรหัสต้นฉบับด้านบนซึ่งมีความแตกต่างสองประการ อันดับแรก มี URL แหล่งที่มาของรูปภาพใหม่ที่คุณจะต้องเพิ่ม และอย่างที่สอง เป็นคลาสที่เรียกว่า "โลโก้ที่สอง"

จากแดชบอร์ด WordPress ของคุณ ไปที่ไลบรารีสื่อของคุณและรับ URL สำหรับภาพโลโก้ใหม่ที่คุณต้องการเพิ่ม

จากนั้นกลับไปที่ไฟล์ header.php ของคุณ ค้นหาข้อมูลโค้ดที่คุณเพิ่งสร้างขึ้นและแทนที่ข้อความที่ระบุว่า "INSERT NEW LOGO IMAGE URL HERE" ด้วย URL รูปภาพจริง

บันทึกไฟล์ header.php ของคุณ

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

เพิ่มการเปลี่ยนภาพที่ยอดเยี่ยมเมื่อโลโก้เปลี่ยนบนส่วนหัวคงที่ของคุณ

ไปที่เครื่องมือปรับแต่งธีม > CSS เพิ่มเติม แล้วลบ (หรือแสดงความคิดเห็น) โค้ดจากส่วนก่อนหน้าของโพสต์นี้ (ถ้ามี) จากนั้นเพิ่ม CSS ที่กำหนดเองต่อไปนี้:

@media all and (min-width: 980px){
/*********************************
show, hide, and transition logos for primary and fixed nav;
must have second logo in header.php file for this to work
**********************************/
#logo {
opacity:1;
display:inherit;
margin: 0 0 0 0;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
#logo.second-logo {
opacity:0;
margin: 0 0 -200px -130px;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.et-fixed-header #logo {
opacity: 0;
margin: -200px 0px 0 0px;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;

}
.et-fixed-header #logo.second-logo {
opacity:1;
margin: 0 0 0 -90px !important;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}

/*********************************
hides overflow on header container so logo doesn't show outsite header on transition
*********************************/
#main-header {
overflow: hidden;
}
}

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

การเปลี่ยนตำแหน่งของโลโก้ส่วนหัวที่กึ่งกลางของคุณไปทางซ้ายสำหรับส่วนหัวคงที่ของคุณ

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

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

/*********************************
change logo for fixed header (quick and easy way)
**********************************/
.et-fixed-header #logo {
content: url(INSERT NEW LOGO IMAGE URL HERE);
}

อย่าลืมเพิ่ม URL รูปภาพโลโก้ของคุณ

จากนั้นเพิ่มสิ่งต่อไปนี้เพื่อปรับตำแหน่งของโลโก้:

@media all and (min-width: 980px){
/*********************************
change centered logo on centered header style to default layout when fixed header is active
*********************************/
.et_header_style_centered header#main-header.et-fixed-header .logo_container {
float: left;
width: 20%;
}

.et_header_style_centered #main-header.et-fixed-header div#et-top-navigation {
width: 80%;
float: right;
height: 70px;
line-height: 70px;
text-align: right;
}
.et-fixed-header #top-menu-nav {
float: none!important;
}

.et_fixed_nav #et-top-navigation {
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
}
}

หมายเหตุ: ตรวจสอบให้แน่ใจว่าคุณนำ CSS ก่อนหน้าออกจากโพสต์นี้ซึ่งอาจขัดแย้งกัน

แค่นั้นแหละ. ตรวจสอบผลลัพธ์

ในการปิด

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

กำลังมา

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

ฉันรอคอยมัน

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

ไชโย