วิธีทำซ้ำเมนูหลักของธีมที่หรูหราด้วย Divi

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

วันนี้ผมจะแสดงวิธีการทำซ้ำเมนูหลักของ Elegant Theme โดยใช้ Divi ในการใช้สไตล์ที่กำหนดเองและฟังก์ชันการทำงานของปุ่ม ฉันจะใช้ CSS และ jQuery ร่วมกัน

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

การนำการออกแบบไปใช้

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

การสร้างเมนู

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

ตอนนี้คลิก "สร้างเมนูใหม่" และตั้งชื่อเมนูของคุณ

คลิกปุ่ม "สร้างเมนู"

ถัดไป เพิ่มลิงก์เมนูไปยังเมนูใหม่ของคุณ เนื่องจากเรากำลังทำซ้ำเมนู Elegant Themes ฉันกำลังเพิ่มลิงก์ที่กำหนดเองต่อไปนี้:

ธีม
ปลั๊กอิน
บล็อก
ติดต่อ
เข้าสู่ระบบ
เข้าร่วมดาวน์โหลด

เมื่อคุณเพิ่มลิงก์ไปยังเมนูของคุณเสร็จแล้ว ให้เลือกเมนูใหม่เป็นเมนูหลักสำหรับไซต์ของคุณ

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

บันทึกเมนู

เมื่อสร้างเมนูและตั้งค่าเป็นเมนูหลัก ก็ถึงเวลาเพิ่มสไตล์ลงในเมนูการนำทางและปุ่ม CTA

จัดแต่งทรงผมเมนูนำทาง

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

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

/*** remove shadow on main header***/
#main-header {
box-shadow: none;
}

/*** add shadow to fixed header ***/
@media (min-width: 981px) {
#main-header.et-fixed-header {
    box-shadow: 0 0 30px rgba(7, 51, 84, 0.17) !important;
    -webkit-box-shadow: 0 0 30px rgba(7, 51, 84, 0.17) !important;
    -moz-box-shadow: 0 0 30px rgba(7, 51, 84, 0.17) !important;
}
}
/*** adjust padding on menu ***/
.et_header_style_left .et-fixed-header #et-top-navigation nav > ul > li > a {
padding-bottom: 23px;
}
#top-menu li {
padding: 0 10px !important;
}

.et_header_style_left #et-top-navigation {
padding-top: 20px;
}

.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 10px;
}

/*** style the menu button ***/
.jointoday_button a {
color: #f92c8b !important;
    line-height: 9px;
    font-weight: 600;
    padding: 13px 16px !important;
    text-transform: uppercase;
    font-size: 12px !important;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    display: block;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    border: 2px solid #f92c8b;
}

.jointoday_button a:hover {
    opacity: 1 !important;
    color: #fff !important;
    background-color: #f92c8b;
}

.et-fixed-header #top-menu .jointoday_button a:hover {
    background-color: #de20b3;
    border: 2px solid #de20b3;
    box-shadow: 0px 5px 20px #aab9c3;
    -moz-box-shadow: 0px 5px 20px #aab9c3;
    -webkit-box-shadow: 0px 5px 20px #aab9c3;
}

.et-fixed-header #top-menu .jointoday_button a {
    color: #fff !important;
    background-color: #f92c8b;
    box-shadow: 0px 5px 20px #d6dee4;
    -moz-box-shadow: 0px 5px 20px #d6dee4;
    -webkit-box-shadow: 0px 5px 20px #d6dee4;
    border: 2px solid #f92c8b;
}
.et-fixed-header.et_highlight_nav #top-menu .jointoday_button a {
    background-color: #2cc2e6;
    border: 2px solid #2cc2e6;
    animation: highlight-nav .8s ease;
    -webkit-animation: highlight-nav .8s ease;
}

#main-header.et-fixed-header.et_highlight_nav #top-menu .jointoday_button a:hover {
    background-color: #f92c8b;
    border: 2px solid #f92c8b;
    box-shadow: 0px 5px 20px #aab9c3;
    -moz-box-shadow: 0px 5px 20px #aab9c3;
    -webkit-box-shadow: 0px 5px 20px #aab9c3;
}

@-webkit-keyframes highlight-nav {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}
@keyframes highlight-nav {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

/*** style the mobile menu links and button ***/
@media (max-width: 980px) {
.et_mobile_menu li {
text-align: center;
}

.et_mobile_menu li a {
border-bottom: none;
}
.et_mobile_menu li a:hover {
background-color: transparent;} 

.jointoday_button a {
border-bottom: 2px solid #f92c8b !important;
}
}

คุณเกือบจะเสร็จแล้ว มาดูกันว่าตอนนี้มีเมนูอะไรบ้าง

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

การเพิ่ม jQuery

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

คุณสามารถทำได้โดยเพิ่ม jQuery ไปที่ Divi → Theme Options และภายใต้แท็บ Integration ให้เพิ่ม jQuery ต่อไปนี้ลงในส่วนข้อความ "Add code to the head of your blog":

<script>
jQuery(document).ready(function($){
	jQuery(window).scroll(function() {    
	var   $main_header = jQuery('#main-header'),
		$body = jQuery('body'),
                scrollPercentage = 100 * (jQuery(this).scrollTop() / $body.height()),
                scroll = $(window).scrollTop(),
	    	objectPosition = $body.offset().top;

	    if (scroll < objectPosition) {
	        $main_header.removeClass("et_highlight_nav");
	    }
	    if (scrollPercentage >= 50){
	        $main_header.addClass("et_highlight_nav");
	    }
	});
});
</script>

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

ตรวจสอบเมนูตอนนี้

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

การเปลี่ยนสีปุ่ม CTA ของคุณ

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

หากคุณเปลี่ยนสีของปุ่ม อย่าลืมเปลี่ยนขอบด้านล่างของปุ่มบนมือถือโดยเปลี่ยน CSS ที่นี่:

ดูบนมือถือได้อย่างไร?

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

แบบอักษรของเมนู

สำหรับบทช่วยสอนนี้ ฉันใช้แบบอักษรเริ่มต้น Open Sans เป็นแบบอักษรของเมนู แบบอักษรเริ่มต้นสำหรับไซต์ Elegant Themes (รวมถึงข้อความในเมนู) คือแบบอักษรที่เรียกว่า Poppins คุณสามารถนำเข้าแบบอักษรนี้โดยใช้ Google Fonts โดยทำตามคำแนะนำในโพสต์ก่อนหน้านี้

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

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

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

สนุก!