كيفية إنشاء عبارة حث على اتخاذ إجراء "موسعة" مثل السمات الأنيقة

نشرت: 2017-05-14

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

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

يتم أيضًا التفاف عنصر div مع الفئة "cta-info" حول المحتوى. هذا مهم لأغراض التصميم لاحقًا.

حفظ التغييرات

نحتاج الآن إلى إضافة معرف CSS جديد إلى قسمك الجديد. انقر فوق رمز إعدادات القسم لفتح إعدادات القسم.

ضمن علامة التبويب CSS في إعدادات القسم ، أضف معرف CSS "قسم cta" واحفظ التغييرات التي أجريتها.

بعد ذلك ، نحتاج إلى إضافة معرف CSS إلى صفك. انقر على أيقونة إعدادات الصف.

ضمن علامة التبويب CSS ، قم بتحديث إعدادات الصف باستخدام معرف CSS جديد يسمى "صف cta".

احفظ التغييرات

هذا كل ما نحتاجه لتخطيط CTA. مع وجود المحتوى الخاص بنا ومعرف CSS الخاص بنا ، نحن على استعداد لإضافة بعض CSS المخصص.

إضافة CSS مخصص

انتقل إلى Divi → Theme Customizer → 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 عند التمرير إلى العنصر

يعد استخدام مكتبة JavaScript المسماة Waypoints إحدى أسهل الطرق لتشغيل وظيفة عند التمرير إلى عنصر في صفحتك. نظرًا لأن Divi تأتي بالفعل مع Waypoints مثبتة (yay!) ، كل ما نحتاج إليه هو تضمين برنامج نصي يستخدم المكتبة.

انتقل إلى Divi → Theme Options → Integration والصق البرنامج النصي التالي في قسم "إضافة رمز إلى رأس مدونتك".

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

يضيف هذا النص البرمجي وظيفة من شأنها تبديل فئة تسمى "animate-cta" عند التمرير إلى قسم CTA (مع CSS ID "قسم cta"). لاحظ جزء الكود الذي يعيّن الإزاحة بـ 80٪. هذا يعني أنه سيتم تشغيل الوظيفة عندما يكون الجزء العلوي من قسم الحث على الشراء 80٪ من أعلى نافذة المتصفح. إذا كنت ترغب في تأخير تشغيل الوظيفة عند وصول CTA إلى منتصف الصفحة ، فيمكنك تغيير قيمة الإزاحة إلى ما يقرب من 50٪. ومع ذلك ، إذا كانت عبارة CTA الخاصة بك ستكون في أسفل الصفحة ، فيجب عليك الالتزام بقيمة أقرب إلى 80٪ - 90٪. هذا لأن CTA الخاص بك قد لا يصل أبدًا إلى منتصف نافذة المتصفح عند التمرير ، وبالتالي لن يتم تشغيله.

هذا كل شيء!

الآن دعونا نلقي نظرة على المشروع النهائي.

إضافة وظيفة CTA إلى وحدات أخرى

إذا كنت ترغب في إضافة وظيفة CTA هذه إلى وحدات أخرى داخل Divi Builder ، فمن السهل القيام بذلك. فيما يلي الخطوات للبدء:

  1. قم بإنشاء قسم قياسي بصف كامل العرض (عمود واحد).
  2. في إعدادات القسم ، ضمن CSS ، أضف معرف CSS "قسم cta".
  3. في إعدادات الصف ، ضمن CSS ، أضف معرف CSS "cta-row" وأضف فئة العمود CSS "عمود cta".
  4. أدخل CSS المخصص التالي:
    5.  .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 الخاص بـ Elegant Theme ميزة مفيدة لإضافتها إلى أي مشروع مستقبلي. يجذب انتباه القارئ دون أن يكون متعجرفًا جدًا. يمنح استخدام Code Module المطورين مزيدًا من المرونة لإضافة html مخصص داخل CTA. ولا تقتصر وظيفة حركة إحداثية على وحدة التعليمات البرمجية. يمكنك أيضًا إضافة معرفات CSS الضرورية إلى أي قسم وصف وعمود لإنشاء CTA مع أي وحدة نمطية باستخدام Divi Builder.

أتطلع إلى تلقي رد منك في التعليقات أدناه.

هتافات!