لقد أثبتت خيارات التحويل المضمنة في Divi أنها أداة تصميم مفيدة للغاية، حيث تسمح لك بتغيير حجم أي عنصر على الصفحة أو تدويره أو إمالته أو تحديد موضعه بسهولة. ويمكنك أيضًا اختيار تحويل العناصر إلى حالات تحويم لتحقيق تأثيرات تحويم مذهلة. لذلك اليوم سنعرض لك كيفية نشر هذه الرسوم المتحركة بنقرة واحدة.
تتطلب هذه الطريقة استخدام jQuery. الميزة الرائعة في هذه التقنية هي إمكانية استخدام إعدادات التصميم المدمجة في Divi لتنسيق خصائص التحويل، ثم تفعيلها (أو تعطيلها) بنقرة زر واحدة. سيوفر هذا إمكانيات فريدة للكشف عن المحتوى المخفي عن طريق نقل العناصر عند النقر بدلاً من التمرير. كما يُقلل من الحاجة إلى معرفة الكثير من CSS.
دعونا نبدأ.
ما تحتاجه للبدء
بالنسبة لهذا البرنامج التعليمي، كل ما تحتاجه هو Divi. للبدء، انتقل إلى لوحة معلومات WordPress الخاصة بك. قم بإنشاء صفحة جديدة، ثم أعط صفحتك عنوانًا واستمر في التصميم على منشئ Divi في المقدمة. حدد خيار "البناء من الصفر". أنت الآن جاهز للذهاب!
وأوضح الفكرة الأساسية
قبل الدخول في الكثير من التفاصيل في هذا البرنامج التعليمي ، سوف أطلعك على كيفية عمل هذه التقنية في بضع كلمات.
في كل مرة تقوم فيها بتخصيص عنصر (قسم أو سطر أو وحدة نمطية) في Divi ، يمكنك إضافة CSS مخصص لهذا العنصر في الخلفية. على سبيل المثال ، باستخدام الإعدادات المضمنة في Divi ، يمكنك إضافة خاصية تحويل التحويل إلى وحدة blurb بحيث تقوم بتدوير الوحدة على طول المحور Z بمقدار 20 درجة.
ولكن خلف الكواليس ، يمكنك إنشاء CSS مخصص يضاف إلى هذه الوحدة النصية ويبدو كما يلي:
.et_pb_text_0 {convert: rotateZ (20deg)؛ }
بسيطا بما فيه الكفاية. ولنفترض أنك تريد إضافة خيار تحويل التمرير نفسه. تحتاج فقط إلى تطبيق خاصية التحويل لحالة التمرير في إعدادات Divi Builder.
سيبدو الكود مثل هذا خلف الكواليس:
.et_pb_text_0: hover {convert: rotateZ (20deg)؛ }
ومع ذلك ، إذا كنت تريد نشر خاصية التحويل عند النقر ، فسيتعين أن تعمل الأشياء بشكل مختلف قليلاً. سوف تحتاج إلى إدخال كود جافا سكريبت لتشغيل حدث نقرة على العنصر (أو وحدة نصية).
من خلال مثالنا الحالي ، يتمثل هدفنا الأساسي في تشغيل خاصية التحويل "transform: rotateZ (20deg)" وإيقاف تشغيلها عند النقر. هناك طريقة سهلة للقيام بذلك وهي إنشاء فئة CSS مخصصة باستخدام الخاصية "transformer: none!" هام "في إعدادات الصفحة (أو ورقة الأنماط الخارجية). سيبدو شيء هكذا.
.toggle-convert-animation {convert: none! important؛ }
مع وجود CSS في المكان. يمكننا إضافة فئة CSS "toggle-transform-animation" إلى عنصر وحدة blurb التي لها خاصية التحويل الخاصة بنا.
سيؤدي هذا إلى تعطيل (تجاوز) خاصية التحويل ومنع تنشيطها في البداية حتى لو تمت إضافة نمط خاصية التحويل إليها بالفعل.
الآن كل ما عليك فعله هو تنشيط (إضافة وإزالة) فئة CSS المخصصة هذه عند النقر فوق العنصر. لذلك ، في كل مرة نضغط فيها على العنصر ، سيتم حذف الفئة وسيتم نشر خصائص التحويل (تلك التي أضفتها مع Divi).
هنا مثال بسيط على كيفية القيام بذلك. أولاً ، أضف فئة CSS أخرى إلى وحدة blurb المسماة "transform_target".
بعد ذلك، انتقل إلى Divi > خيارات السمة > التكامل وأضف البرنامج النصي jQuery التالي إلى رأس مدونتك:
jQuery(document).ready(function() {
jQuery('.transform_target').click(function(){
jQuery(this).toggleClass('toggle-transform-animation');
});
});
هذا كل شيئ ! الآن ، في كل مرة تنقر فيها على وحدة العرض التقديمي ، سيتم تمكين أو تعطيل خاصية التحويل التي أضفتها إلى العرض التقديمي في Divi.
دعنا الآن نبني مثالًا حتى تستطيع أن ترى كيف قد يكون ذلك مفيدًا لمشاريعك الخاصة.
كيفية تبديل خصائص التحويل عند النقر لعرض المحتوى في Divi
في هذا المثال، سنلتزم بمثال الملخص البسيط المذكور أعلاه. ثم سنضيف ملخصًا إضافيًا خلفه، بحيث عند النقر على الملخص العلوي، سيختفي ليكشف عن محتوى الملخص الإضافي الموجود خلف المستند.
إنشاء وحدات Blurb الأمامية والخلفية
ثم أضف وحدة عرض تقديمي إلى عمود 1.
قم بتحديث محتوى نص العرض التقديمي ليشمل عنوانًا فقط (قم بإزالة محتوى النص الافتراضي)، ثم أضف أيقونة العرض التقديمي.
ثم قم بتحديث معلمات التصميم كما يلي:
لون الخلفية: #4c5866
لون الأيقونة: #ffffff
اتجاه النص: المركز
لون النص
: الهامش المخصص خفيف الوزن: 0px في الأسفل
الحشوة المخصصة: 15٪ في الأعلى ، 15٪ في الأسفل ، 10٪ في اليسار ، 10٪ في اليمين
سنعود إلى هذه الوحدة لاحقًا ، ولكن في الوقت الحالي ، نحتاج إلى إنشاء وحدة Blurb الثانية الخاصة بنا والتي ستكون بمثابة وحدة "عودة" مع محتوى إضافي.
للقيام بذلك ، قم بتكرار وحدة العرض التقديمي التي أنشأتها للتو.
بعد ذلك ، في الوحدة الثانية ، أزل رمز العرض التقديمي (والصورة الافتراضية) وأضف محتوى النص مرة أخرى إلى الوحدة. ثم قم بتحديث معلمات التصميم على النحو التالي:
لون الخلفية: rgba (76,88,102,0.3)
لون النص: أسود
الحشوة المخصصة: 20٪ top
ضع الوحدة قبل الملخص
الآن بعد أن تم تصميم الدعاية المغلوطة لدينا ، نحتاج إلى الرجوع إلى الدعاية الأمامية (العلوية) ووضعها فوق الدعاية الخلفية (السفلية). للقيام بذلك ، سنمنحه موضعًا مطلقًا بارتفاع 100٪ وعرض 100٪.
أولاً ، افتح إعدادات وحدة العرض التقديمي العلوي / الأمامي وقم بتحديث ما يلي:
الارتفاع: 100٪ ؛
العرض: 100٪ ؛
ثم أضف كود CSS المخصص التالي إلى العنصر الرئيسي:
الموقف: المطلق! انتقال: جميع .5s ؛
ثم قم بتحديث الفهرس z كما يلي:
مؤشر Z: 2000
يضمن الوضع المطلق ، جنبًا إلى جنب مع الارتفاع والعرض بنسبة 100٪ والفهرس z ، بقاء وحدة الدعاية الدعاية في أعلى وحدة الدعاية الدعاية خلفها. إن خاصية النقل هي في الواقع مدة انتقال خيارات التحويل التي سنقوم بنشرها في النقرة التالية. و "المؤشر: المؤشر" هو تغيير المؤشر بحيث يظهر العنصر قابلاً للنقر للمستخدم.
إضافة خيارات التحويل والفئات المخصصة إلى الواجهة الأمامية
حان الوقت الآن لإضافة خصائص التحويل إلى الدعاية الأمامية. سنضيف بعد ذلك فئات CSS المخصصة اللازمة لـ jQuery لتبديل هذه الخصائص عند النقر.
تحت معلمات تصميم التصفيق الأمامي ، أضف خصائص التحويل التالية:
مقياس تحويل X و y: 20٪
أصل التحويل: أعلى الوسط
تذكر أن تصميم التحويل الذي تراه في هذه المرحلة سيكون هو التصميم الذي يتم تشغيله عند النقر. نحن ببساطة نستفيد من Divi builder للحصول على التصميم المطلوب. في هذه الحالة ، يتقلص الإعلان الدعائي الأمامي ويصبح في منتصف الجزء العلوي منه مثل رمز قابل للنقر.
بمجرد الانتهاء من ذلك ، أضف فئتي CSS اللازمة لاستهداف الضربة الأمامية باستخدام jQuery على النحو التالي:
فئة CSS: toggle-convert-animation transform_target
(تأكد من فصل كل اسم فئة بمسافة)
ثم أضف مقتطف شفرة CSS المخصص التالي الذي سيتم استخدامه لتمكين خصائص التحويل وتعطيلها مع jQuery.
.toggle-transform-animation {transform: none! important؛ }
ستلاحظ أنه قد تم تعطيل خصائص تحويل blurb المضافة مسبقًا لأنه تم تطبيق هذه الفئة عليها.
انتقل الآن إلى Divi> Theme options> Integration وأضف نص jQuery التالي إلى رأس المدونة:
jQuery(document).ready(function() {
jQuery('.transform_target').click(function(){
jQuery(this).toggleClass('toggle-transform-animation');
});
});
دعونا نرى النتيجة النهائية.
يمكنك استخدام هذا المثال لإنشاء تصميمات أكثر إثارة للإعجاب. لا تتردد في مشاركة رأيك في قسم التعليقات.