نحوه ایجاد CTAهای “بسط یافته” مانند تم های زیبا

Elegant Themes اخیراً وب‌سایت خود را به گونه‌ای طراحی مجدد کرده است که برخی از ویژگی‌های ارزش تقلید را در خود داشته باشد. در پست های قبلی در مورد نحوه اجرای طرح وبلاگ Elegant Theme و منوی اصلی تکراری نوشتم. اما برای این پست، من به شما نشان خواهم داد که چگونه یک فراخوانی برای اقدام Subtle Subject (CTA) را تکرار کنید. این CTA در پایین و نزدیک پاورقی وب سایت Elegant Themes قرار دارد. ویژگی خاص این CTA عملکرد اضافی است که پس از حرکت کاربر به عنصر، یک انیمیشن را راه اندازی می کند.

امروز قصد دارم به شما نشان دهم که چگونه نه تنها سبک این CTA، بلکه ویژگی انیمیشن را نیز تکرار کنید. این کار با استفاده از ماژول کد Divi با چند CSS سفارشی و چند خط جاوا اسکریپت انجام می شود. با این حال، شما به راحتی می توانید همان قابلیت انیمیشن را در هر یک از ماژول های Divi گسترش دهید.

بیا شروع کنیم.

پیاده سازی طراحی با Divi

ایجاد یک فراخوان برای اقدام با استفاده از ماژول کد

با استفاده از Visual Builder یک بخش معمولی جدید با یک ستون سطر تمام عرض اضافه کنید.

سپس کد ماژول را به صف خود اضافه کنید.

html زیر را به قسمت محتوا در قسمت تنظیمات کد عمومی اضافه کنید.

<div class="cta-info">

<h3>401,632 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web</h3>

<p>We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!</p>

<a href="ENTER URL HERE" id="sign">Sign Up Today</a>

</div>

این html به عنوان محتوای CTA عمل می کند. متوجه خواهید شد که عنوان اصلی CTA در یک تگ h3 پیچیده شده است. زیر سربرگ دور برچسب استاندارد p می پیچد. و پیوند (به زودی دکمه) یک شناسه CSS به نام “sign” دارد.

همچنین یک div با کلاس “cta-info” در اطراف محتوا پیچیده شده است. این برای اهداف یک ظاهر طراحی شده بعدا مهم است.

ذخیره تغییرات

اکنون باید یک شناسه CSS جدید به بخش جدید شما اضافه کنیم. روی نماد تنظیمات بخش کلیک کنید تا تنظیمات بخش باز شود.

زیر تب CSS در Section Settings، شناسه CSS “cta-section” را اضافه کنید و تغییرات خود را ذخیره کنید.

در مرحله بعد، باید یک شناسه CSS به آرایه شما اضافه کنیم. روی نماد تنظیمات صف کلیک کنید.

در زبانه CSS، تنظیمات ردیف را با شناسه CSS جدید “cta-row” به روز کنید.

ذخیره تغییرات

این تمام چیزی است که برای چیدمان CTA نیاز داریم. با محتوا و شناسه CSS خود، آماده اضافه کردن مقداری CSS سفارشی هستیم.

افزودن CSS سفارشی

به Divi → سفارشی ساز تم → CSS اضافی بروید (یا می توانید مستقیماً فایل style.css تم فرزند را به روز کنید). CSS زیر را به کادر کد اضافه کنید:

/* Animated Call To Action */

/*** style CTA section and row when waypoint is not triggered ***/
#cta-section {
    padding: 0 80px;
    transition: all .8s ease;
    -moz-transition: all .8s ease;
    -webkit-transition: all .8s ease;
}
#cta-row {
    margin: 80px auto 0 auto;
    padding: 80px 0;
    max-width: 100%;
    background-color: #6c17dc;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    box-shadow: 0px 10px 50px #939fa9;
    transition: all .8s ease;
    -moz-transition: all .8s ease;
    -webkit-transition: all .8s ease;

}
/*** Style CTA section and row once waypoint toggles animate-cta class ***/
#cta-section.animate-cta {
    padding: 46px 0 66px 0;
    overflow: hidden;
}
.animate-cta #cta-row {
    margin: 0 auto 0 auto;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    background-color: #4843d2;
    width: inherit;
}
/*** style button ***/

#sign {
    display: inline-block;
    width: 246px;   
    color: #fff;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
    background-color: #f92c8b;
    padding: 20px 40px;
    margin-top: 30px;
    border-radius: 60px;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    transition: all .8s ease;
    -webkit-transition: all .8s ease;
    -webkit-transition: all .8s ease;
    box-shadow: 0px 5px 20px #231f92;
    -moz-box-shadow: 0px 5px 20px #231f92;
    -webkit-box-shadow: 0px 10px 50px #231f92;
}
#sign:hover {
    background-color: #2cc2e6;
    box-shadow: 0px 20px 80px #1b1867;
    -moz-box-shadow: 0px 20px 80px #1b1867;
    -webkit-box-shadow: 0px 20px 80px #1b1867;
}

/*** style content within the code module ***/

.cta-info{
    color: #fff;
    text-align: center;
    margin: 0 auto !important;
    max-width: 1080px;
    padding: 50px;
}
.cta-info h3 {
    color: #fff;
    font-size: 35px;
    line-height: 1.3em;
}

اکنون CTA شما شروع به جستجوی قسمت می کند. هنگامی که CTA هنگام پیمایش در نمای مرورگر شما ظاهر می شود، تنها کاری که باید انجام دهید این است که یک اسکریپت کوتاه اضافه کنید تا جلوه انیمیشنی چشم نواز به CTA بدهد.

اضافه کردن یک اسکریپت نقطه راه برای متحرک کردن CTA هنگام شناور شدن روی یک عنصر

یکی از ساده‌ترین راه‌ها برای فعال کردن یک تابع هنگام پیمایش به یک عنصر در صفحه، استفاده از کتابخانه جاوا اسکریپت به نام Waypoints است. از آنجایی که Divi دارای Waypointهایی است که قبلاً در آن تعبیه شده است (yay!)، تنها کاری که باید انجام دهیم این است که یک اسکریپت قرار دهیم که از کتابخانه استفاده می کند.

به قسمت Divi → Theme Options → Integrations بروید و اسکریپت زیر را در بخش “Add code to your blog header” قرار دهید.

<script>
jQuery(document).ready(function(){
	jQuery('#cta-section').waypoint(function() {
		jQuery('#cta-section').toggleClass('animate-cta');
	}, {offset: '80%'});
});
</script>

این اسکریپت تابعی را اضافه می کند که کلاسی به نام “animate-cta” را هنگامی که به بخش CTA هدایت می کنید (با شناسه CSS “cta-section”) تغییر می دهد. به بخشی از کد توجه کنید که در آن افست روی 80 درصد تنظیم شده است. این به این معنی است که وقتی بالای بخش CTA 80٪ بالای پنجره مرورگر باشد، عملکرد فعال می شود. اگر می خواهید زمانی که CTA به وسط صفحه می رسد، عملکرد را به تأخیر بیندازید، می توانید مقدار افست را به 50٪ تغییر دهید. با این حال، اگر قرار است CTA شما در پایین صفحه باشد، باید مقداری نزدیک به 80 تا 90 درصد داشته باشید. این به این دلیل است که CTA هنگام پیمایش هرگز به وسط پنجره مرورگر شما نمی رسد و بنابراین فعال نمی شود.

این است!

حالا بیایید نگاهی به پروژه تمام شده بیندازیم.

افزودن عملکرد CTA به ماژول های دیگر

اگر می خواهید این قابلیت CTA را به ماژول های دیگر در Divi Builder اضافه کنید، انجام این کار به اندازه کافی آسان است. در اینجا مراحلی برای شروع آمده است:

1. یک بخش استاندارد با یک سطر تمام عرض (تک ستونی) ایجاد کنید.
2. در تنظیمات بخش، در زیر CSS، شناسه CSS “cta-section” را اضافه کنید.
3. در تنظیمات ردیف، زیر CSS، شناسه CSS “cta-row” و ستون CSS کلاس “cta-column” را اضافه کنید.
4. CSS سفارشی زیر را وارد کنید:

 .cta-column.et_pb_column:last-child {
 margin: 0 auto;
 margin-right: auto !important;
 max-width: 1080px;
 float: none;
}

5. ماژول مورد نظر را به ردیف اضافه کنید (یعنی Call to Action Module) و به آن استایل دهید. ممکن است بخواهید پس زمینه های شفاف را به ماژول خود اضافه کنید تا با بخش رنگ پس زمینه CTA همپوشانی نداشته باشد.

یادداشت مهم: با این ویژگی نمی توانید بیش از یک CTA در هر صفحه اضافه کنید.

افکار نهایی

تکرار CTA Elegant Theme یک ویژگی مفید برای افزودن به هر پروژه آینده است. توجه خواننده را بدون تضعیف آن جلب می کند. استفاده از کد ماژول به توسعه دهندگان انعطاف بیشتری برای اضافه کردن html سفارشی در CTA می دهد. و عملکرد انیمیشن نقطه راه به ماژول کد محدود نمی شود. همچنین می‌توانید از Divi Builder برای اضافه کردن شناسه‌های CSS لازم به هر بخش، ردیف یا ستون برای ایجاد یک CTA با هر ماژول استفاده کنید.

مشتاقانه منتظر شنیدن نظرات شما در زیر هستم.

خدا حافظ!