كيفية تكرار القائمة الأساسية للموضوع الأنيق مع Divi

كانت قائمة السمات الأنيقة الجديدة طلبًا شائعًا للمطورين لتكرارها على مواقعهم الخاصة. الميزة الرئيسية في القائمة هي زر الحث على اتخاذ إجراء (CTA) الذي يجذب انتباه الزائرين عن طريق تغيير الألوان والتحريك عند التمرير لأسفل الصفحة. من المحتمل أن يؤدي وجود هذا النوع من زر CTA على موقعك إلى زيادة معدل النقر والتحويلات.

سأوضح لك اليوم كيفية تكرار القائمة الأساسية لـ Elegant Theme باستخدام Divi. لتنفيذ النمط والوظائف المخصصة للزر ، سأستخدم مزيجًا من CSS و jQuery.

هيا بنا نبدأ!

تنفيذ التصميم

اشترك في قناتنا على اليوتيوب

إنشاء القائمة

من لوحة معلومات WordPress ، انتقل إلى المظهر ← القوائم . في الجزء العلوي من صفحة القوائم ، انقر فوق خيارات الشاشة وتحقق من فئات CSS. سيسمح لك ذلك بإضافة فئة CSS مخصصة إلى عناصر القائمة الخاصة بك.

انقر الآن على "إنشاء قائمة جديدة" ومنح القائمة اسمًا.

انقر فوق زر "إنشاء قائمة".

بعد ذلك ، أضف روابط القائمة إلى قائمتك الجديدة. نظرًا لأننا نكرر قائمة السمات الأنيقة ، فأنا أقوم بإضافة الروابط المخصصة التالية:

ثيمات
الإضافات
مدونة او مذكرة
اتصل
تسجيل الدخول
انضم إلى التنزيل

بمجرد الانتهاء من إضافة الروابط إلى قائمتك ، حدد القائمة الجديدة على أنها القائمة الأساسية لموقعك.

لتغيير رابط القائمة "Join to Download" إلى زر CTA ، ستحتاج إلى إضافة فئة CSS مخصصة إليه حتى تتمكن من تصميمه لاحقًا باستخدام CSS. لإضافة الفصل الدراسي ، انقر فوق السهم الموجود على يمين عنصر القائمة "الانضمام إلى التنزيل" للكشف عن خيارات التكوين. أضف فئة تسمى "Jointoday_button" داخل مربع نص فئات CSS.

حفظ القائمة

مع إنشاء القائمة وتعيينها كقائمة أساسية ، حان الوقت لإضافة النمط إلى قائمة التنقل وزر CTA.

تصميم قائمة التنقل

نحتاج أولاً إلى تغيير حجم نص شريط القائمة الأساسي. انتقل إلى Theme Customizer → Header & Navigation → Primary Menu Bar . احتفظ بجميع الإعدادات الافتراضية وقم بتغيير حجم النص إلى 15.

سيتم تصميم بقية قائمة التنقل باستخدام CSS المخصص. ضمن Theme Customizer ، انتقل إلى 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

كل ما تبقى للقيام به هو إضافة تغيير اللون الإضافي ونبض الرسوم المتحركة إلى الزر عند التمرير لأسفل إلى نقطة معينة على الصفحة. تجذب هذه الوظيفة الإضافية مزيدًا من الانتباه إلى زر الحث على الشراء أثناء تفاعل المستخدم مع المحتوى. لإضافة هذا التأثير ، نحتاج إلى إضافة فئة 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" لتصميم زر الحث على الشراء باستخدام رسم متحرك نبضي ولون أزرق. نظرًا لأنك قمت بالفعل بإضافة CSS المخصص لهذا التأثير مسبقًا ، فأنت جاهز تمامًا.

تحقق من القائمة الآن.

سيتحول زر الحث على الشراء الآن إلى اللون الأزرق والنبض بينما تقوم بالتمرير لأسفل الصفحة وإعادة التعيين عندما تعود إلى أعلى الصفحة.

تغيير لون زر الحث على الشراء

نظرًا لأن زر CTA يستخدم فئة CSS مخصصة ، يمكنك تغيير نمط الزر ليناسب موقعك عن طريق ضبط CSS الذي أضفته سابقًا. ببساطة استبدل رمز اللون برمزك. فيما يلي أقسام CSS التي تستهدف أنماط الأزرار المختلفة:

إذا قمت بتغيير لون الزر الخاص بك ، فتأكد من تغيير الحد السفلي للزر الخاص بك على الهاتف المحمول عن طريق تغيير CSS هنا:

كيف تبدو على الهاتف المحمول؟

ستعمل CSS المخصصة التي تمت إضافتها سابقًا على توسيط عناصر القائمة الخاصة بك ومساحة زر CTA بشكل صحيح على الهاتف المحمول تمامًا كما هو الحال في قائمة السمات الأنيقة للجوال.

خط القائمة

في هذا البرنامج التعليمي ، أستخدم الخط الافتراضي Open Sans كخط القائمة. الخط الافتراضي لموقع Elegant Themes (بما في ذلك نص القائمة) هو خط يسمى Poppins. يمكنك استيراد هذا الخط باستخدام Google Fonts باتباع الإرشادات الواردة في هذا المنشور السابق.

افكار اخيرة

هذا كل شيء! لقد نجحت في تكرار القائمة الأساسية لـ Elegant Themes. ويمكنك ضبط نمط زر CTA الخاص بك ليتناسب مع تصميم موقعك عن طريق ضبط CSS المخصص. نظرًا لأن ألوان الزر تتغير عند التنقل الثابت وتحريكها عند التمرير لأسفل الصفحة ، فمن المرجح أن يلاحظ المستخدمون CTA الذي سيساعد تحويلاتك.

آمل أن تكون هذه القائمة الجديدة ميزة مفيدة للمشاريع القادمة. وأنا أتطلع إلى تلقي رد منك في التعليقات أدناه.

يتمتع!