จัดแต่งทรงผมเมนูเต็มหน้าจอของ Divi

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

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

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

ก่อนและหลัง

นี่คือลักษณะของเมนูเต็มความกว้างตามค่าเริ่มต้น:

นี่คือตัวอย่างคร่าวๆ ของการออกแบบใหม่:

จัดแต่งทรงผมเมนูเต็มหน้าจอของ Divi

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

เริ่มต้น

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

อัปเดตการตั้งค่าในเครื่องมือปรับแต่งธีม

จากแดชบอร์ด WordPress ให้ไปที่ Divi > Theme Customizer > Header & Navigation > Header Format จากนั้นเลือกโหมดเต็มหน้าจอเป็นสไตล์ส่วนหัว

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

อัปเดตการตั้งค่าส่วนหัวของ Slide In & Fullscreen ดังนี้:

ตรวจสอบตัวเลือกแถบแสดงด้านบน
ขนาดข้อความของเมนู: 46px
ขนาดข้อความบนแถบด้านบน: 24px
แบบอักษร: Playfair Display
รูปแบบตัวอักษร: ตัวหนา (B)
สีของลิงค์เมนู: #ffffff
สีของลิงค์ที่ใช้งาน: #edef86
สีข้อความบนแถบด้านบน: #ffffff

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

เลือกแสดงไอคอนโซเชียล
เลือกแสดงไอคอนค้นหา
หมายเลขโทรศัพท์: [ป้อนหมายเลข]
อีเมล: [ป้อนอีเมล]

เมื่อตั้งค่าทุกอย่างเรียบร้อยแล้ว เลย์เอาต์เริ่มต้นควรมีลักษณะดังนี้:

ตอนนี้ มาเพิ่ม CSS ที่กำหนดเองกัน

การเพิ่ม CSS ที่กำหนดเอง

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

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

กลับไปที่การเพิ่ม CSS ของเรา

เนื่องจาก CSS ที่กำหนดเองส่วนใหญ่จะใช้กับส่วนหัวแบบเต็มหน้าจอเวอร์ชันเดสก์ท็อปเท่านั้น เราจะเริ่มต้นด้วยการเพิ่มคิวรีสื่อที่กำหนดเป้าหมายขนาดหน้าจอที่มีความกว้างขั้นต่ำ 980px เพิ่มสิ่งต่อไปนี้ในส่วน CSS เพิ่มเติม:

@media all and (min-width: 980px){

}

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

/*adjust position of navigation menu*/
.et_header_style_fullscreen .et_pb_fullscreen_nav_container {
	width: 50%;
}

.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated {
	padding-top: 0px !important;
}

/*adjust position of top bar elements*/
.et_header_style_fullscreen .et_slide_menu_top {
    width: 50%;
    text-align: center;
    display: table !important;
    vertical-align: middle;
    position: initial;
    float: right!important;
    height: 100%;
}
.et_header_style_fullscreen .et_pb_top_menu_inner {
    display: table-cell !important;
    position: relative;
    vertical-align: middle;
    text-align: left!important;
	padding: 0 15%;
	width: 100%;
}

.et_header_style_fullscreen .et_slide_menu_top ul.et-social-icons {
    width: 100%;
}

.et_header_style_fullscreen div#et-info {
	float: none!important;
	width: 100%;
}

.et_header_style_fullscreen div#et-info span {
	display: block;	
	margin-bottom: 30px;
	
}

ต่อไป มาเพิ่มขนาดของแถบค้นหาของเราด้วย CSS ต่อไปนี้:

/*make search bar and icon larger*/
.et_header_style_fullscreen .et_slide_menu_top .et-search-form {
	margin-top: 30px !important;
	margin-bottom: 15px;
	width: 100% !important;
	max-width: 300px !important;
	padding: 25px !important;
}
.et_slide_menu_top button#searchsubmit_header{
	width: 50px;
	height: 41px;
}
.et_slide_menu_top button#searchsubmit_header:before {
	font-size: 22px;
}

และเพิ่ม CSS ต่อไปนี้เพื่อทำให้เมนูอยู่ในแนวเดียวกัน:

/*make menu right aligned*/
.et_header_style_fullscreen ul#mobile_menu_slide {
	text-align: right;
	padding: 0 15%;
}

จากนั้น มาทำให้ไอคอนเมนูปิดที่มุมบนขวาใหญ่ขึ้นและคลิกง่ายขึ้น:

/*make close menu icon larger*/
.et_pb_fullscreen_menu_animated .mobile_menu_bar:before {
	font-size: 120px;
}

เรายังเอาพื้นหลังที่ซ้อนทับอยู่ด้านหลังองค์ประกอบเมนูด้านบนออก และเอาความทึบของพื้นหลังออก

/*take out background overlay*/
.et_slide_menu_top {
background: none;
}

/*take out background opacity*/
.et_header_style_fullscreen .et_slide_in_menu_container.et_pb_fullscreen_menu_opened {
opacity: 1;
}

หากคุณมีรายการเมนูย่อย CSS นี้จะทำให้ลูกศรแบบเลื่อนลงทางด้านขวาของรายการเมนูใหญ่ขึ้น:

/*increase size of down arrow for sub menu items*/
.et_slide_in_menu_container span.et_mobile_menu_arrow {
opacity: 1;

}
.et_slide_in_menu_container #mobile_menu_slide .et_mobile_menu_arrow:before {
font-size: 34px;
}

มาดูกันว่าเรามีอะไรบ้าง:

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

/*add background image*/
body #page-container .et_slide_in_menu_container{
	background: url('INSERT IMAGE URL') center center !important;
	background-size: cover !important;
}

หากคุณยังไม่มี URL ของภาพพื้นหลัง ให้อัปโหลดภาพพื้นหลัง (1920×1080) ไปยังแกลเลอรีสื่อของ WordPress และคัดลอก URL

ตอนนี้แทนที่ข้อความที่อ่านว่า "INSERT IMAGE URL" โดยวาง URL รูปภาพของคุณในโค้ด

ตอนนี้คุณทำเสร็จแล้ว!

นี่คือโค้ด CSS เวอร์ชันสมบูรณ์ที่คุณควรเพิ่มลงใน CSS เพิ่มเติม (ยกเว้น URL รูปภาพที่คุณต้องระบุ):

@media all and (min-width: 980px){

/*adjust position of navigation menu*/
.et_header_style_fullscreen .et_pb_fullscreen_nav_container {
	width: 50%;
}

.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated {
	padding-top: 0px !important;
}

/*adjust position of top menu and elements*/
.et_header_style_fullscreen .et_slide_menu_top {
    width: 50%;
    text-align: center;
    display: table !important;
    vertical-align: middle;
    position: initial;
    float: right;
    height: 100%;
}
.et_header_style_fullscreen .et_pb_top_menu_inner {
    display: table-cell !important;
    position: relative;
    vertical-align: middle;
    text-align: left!important;
	padding: 0 15%;
	width: 100%;
}

.et_header_style_fullscreen .et_slide_menu_top ul.et-social-icons {
    width: 100%;
}

.et_header_style_fullscreen div#et-info {
	float: none!important;
	width: 100%;
}

.et_header_style_fullscreen div#et-info span {
	display: block;	
	margin-bottom: 30px;
	
}

/*make search bar and icon larger*/
.et_header_style_fullscreen .et_slide_menu_top .et-search-form {
	margin-top: 30px !important;
	margin-bottom: 15px;
	width: 100% !important;
	max-width: 300px !important;
	padding: 25px !important;
}
.et_slide_menu_top button#searchsubmit_header{
	width: 50px;
	height: 41px;
}
.et_slide_menu_top button#searchsubmit_header:before {
	font-size: 22px;
}

/*make menu right aligned*/
.et_header_style_fullscreen ul#mobile_menu_slide {
	text-align: right;
	padding: 0 15%;
}

/*make close menu icon larger*/
.et_pb_fullscreen_menu_animated .mobile_menu_bar:before {
	font-size: 120px;
}

/*dark background overlay*/
.et_slide_menu_top {
background: none;
}

/*take out background opacity*/
.et_header_style_fullscreen .et_slide_in_menu_container.et_pb_fullscreen_menu_opened {
opacity: 1;
}

/*increase size of down arrow for sub menu items*/
.et_slide_in_menu_container span.et_mobile_menu_arrow {
opacity: 1;

}
.et_slide_in_menu_container #mobile_menu_slide .et_mobile_menu_arrow:before {
font-size: 34px;
}

}

/*add background image*/
body #page-container .et_slide_in_menu_container{
	background: url('http://megamenu.wpengine.com/wp-content/uploads/2017/08/bgdark.jpg') center center !important;
	background-size: cover !important;
}

คลิกบันทึกและเผยแพร่

ทีนี้มาลองดูกัน:

เค้าโครงเมนูกริดทางเลือก

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

/*add grid menu links*/
.et_header_style_fullscreen .et_mobile_menu li {
    opacity: 1;
    width: 46%;
    float: left !important;
    margin-right: 2%;
    margin-bottom: 2%;
}

.et_slide_in_menu_container #mobile_menu_slide li a, .et_slide_in_menu_container #mobile_menu_slide li.current-menu-item a {
    padding: 20% 0;
    border: 1px solid #fff;
    color: #fff;
    width: 100%;
    text-align: center;
}

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

รายการเมนูย่อยบนส่วนหัวแบบเต็มหน้าจอ

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

ตอบสนอง?

การตัดทอนนี้ตอบสนองและทำงานได้ดีกับหน้าจอทุกขนาด

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

หากขนาดหน้าจอน้อยกว่า 980px (แท็บเล็ตและโทรศัพท์) เลย์เอาต์ Divi เริ่มต้นจะเปิดใช้งานและแสดงเมนูอย่างสวยงามบนมือถือ

ความคิดสุดท้าย

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

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

นั่นคือทั้งหมดที่ฉันมี

รอคอยที่จะได้ยินจากคุณในความคิดเห็น