خيارات التحويل المضمنة لـ Divi أثبتت أنها أداة تصميم مفيدة للغاية ، مما يسمح لك بتغيير حجم أي عنصر أو تدويره أو انحرافه أو وضعه على الصفحة بسهولة. ويمكنك أيضًا اختيار تحويل العناصر إلى حالة تحوم للحصول على تأثيرات تحوم رائعة. لذلك سوف نوضح لك اليوم كيفية نشر هذه الرسوم المتحركة بنقرة واحدة.
تتطلب هذه الطريقة استخدام jQuery. إن الشيء العظيم في هذه التقنية هو أنه يمكنك استخدام معلمات التصميم المضمنة لـ Divi لتحديد نمط خصائص التحويل، ثم قم بتمكين (أو تعطيل) خصائص التحويل هذه بنقرة ماوس. سيؤدي هذا إلى فتح الكثير من الاحتمالات الفريدة للكشف محتويات مخفية عن طريق تحريك العناصر عند النقر بدلاً من المرور فوقها. كما أنه يساعد في تقليل الحاجة إلى معرفة الكثير من CSS.
دعونا نبدأ.
ما تحتاجه للبدء
في هذا البرنامج التعليمي، كل ما تحتاجه هو Divi. للبدء، انتقل إلى لوحة تحكم WordPress الخاصة بك. قم بإنشاء صفحة جديدة، وأعط صفحتك عنوانًا واستمر في التصميم على Divi builder في المقدمة. حدد خيار "الإنشاء من الصفر". أنت الآن على استعداد للذهاب!
وأوضح الفكرة الأساسية
قبل الدخول في الكثير من التفاصيل في هذا البرنامج التعليمي ، سوف أطلعك على كيفية عمل هذه التقنية في بضع كلمات.
في كل مرة تقوم فيها بتخصيص عنصر (قسم أو سطر أو وحدة نمطية) في 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');
});
});
دعونا نرى النتيجة النهائية.
يمكنك استخدام هذا المثال لإنشاء تصميمات أكثر إثارة للإعجاب. لا تتردد في مشاركة رأيك في قسم التعليقات.
