كيفية إنشاء تراكب صورة باستخدام تصاميم انقسام مصراع النص في Divi

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

في هذا البرنامج التعليمي ، سوف نوضح لك كيفية إنشاء تراكب صورة باستخدام رسوم متحركة لمصراع نص مقسم في Divi. أولاً ، سنوضح لك كيفية إنشاء تراكب الصورة المخصص باستخدام مصاريع النص المنقسمة. بعد ذلك سنوضح لك كيف يمكنك استخدام خيارات التحويل المضمنة في Divi لإنشاء ثلاثة تصميمات فريدة تمامًا لرسوم متحركة لمصراع تراكب الصور. سنعرض لك أيضًا بعض الأمثلة الأخرى للتصميمات لتدفق تلك العصائر الإبداعية.

دعنا نقفز ونبدأ!

نظرة خاطفة

فيما يلي نظرة سريعة على تصميمات تراكب الصور من هذا البرنامج التعليمي.

وإليك رمز الشفرة الذي يوضح نفس التصميم المستخدم في هذا البرنامج التعليمي.

قم بتنزيل Layout مجانًا

لوضع يديك على تراكب الصور الذي يقسم تصميمات الرسوم المتحركة لمصراع النص من هذا البرنامج التعليمي ، ستحتاج أولاً إلى تنزيلها باستخدام الزر أدناه. للوصول إلى التنزيل ، ستحتاج إلى الاشتراك في قائمة البريد الإلكتروني Divi Daily الخاصة بنا باستخدام النموذج أدناه. بصفتك مشتركًا جديدًا ، ستتلقى المزيد من مزايا Divi وحزمة Divi Layout المجانية كل يوم اثنين! إذا كنت موجودًا بالفعل في القائمة ، فما عليك سوى إدخال عنوان بريدك الإلكتروني أدناه والنقر فوق تنزيل. لن يتم "إعادة اشتراكك" ولن تتلقى رسائل بريد إلكتروني إضافية.

قم بتنزيل الملفات

تنزيل مجاني

انضم إلى رسالة Divi الإخبارية وسنرسل لك نسخة من حزمة Divi Landing Page Layout النهائية ، بالإضافة إلى الكثير من موارد ونصائح وحيل Divi المذهلة والمجانية الأخرى. تابع معنا وستكون سيد Divi في أي وقت من الأوقات. إذا كنت مشتركًا بالفعل ، فاكتب ببساطة عنوان بريدك الإلكتروني أدناه وانقر فوق تنزيل للوصول إلى حزمة التخطيط.

تحميل

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

لاستيراد تخطيط القسم إلى مكتبة Divi الخاصة بك ، انتقل إلى مكتبة Divi.

انقر فوق الزر "استيراد".

في نافذة قابلية النقل المنبثقة ، حدد علامة التبويب استيراد واختر ملف التنزيل من جهاز الكمبيوتر الخاص بك.

ثم انقر فوق زر الاستيراد.

بمجرد الانتهاء من ذلك ، سيكون تخطيط القسم متاحًا في Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟

ما تحتاجه للبدء

للبدء ، سوف تحتاج إلى القيام بما يلي:

1. إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme.
2. قم بإنشاء صفحة جديدة في WordPress واستخدم Divi Builder لتحرير الصفحة على الواجهة الأمامية (منشئ مرئي).
3. اختر الخيار "البناء من الصفر".

بعد ذلك ، سيكون لديك لوحة فارغة لبدء التصميم في Divi.

الجزء 1: إنشاء تراكب الصور باستخدام مصاريع النص المنقسمة

بالنسبة لهذا الجزء الأول من البرنامج التعليمي ، سنقوم ببناء الإعداد الأولي لتراكب الصور باستخدام مصاريع النص المنقسمة. بمجرد الانتهاء من ذلك ، يمكننا إضافة الرسوم المتحركة إلى المصاريع لاحقًا.

الصف

للبدء ، أضف صفًا من عمودين إلى القسم العادي.

قبل إضافة الوحدات النمطية ، افتح إعدادات الصف وقم بتحديث عرض هامش التوثيق:

• عرض المزراب: 2

تحديث العمود

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

لتعيين عمودنا على أنه "عمود الغالق" ولتحريكه لاحقًا "عند التمرير" ، أضف فئات CSS التالية إلى العمود:

• فئة CSS: عمود مصراع عند التمرير

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

• الفائض الأفقي: مخفي
• الفائض العمودي: مخفي

إضافة الصورة الرئيسية

داخل العمود 1 ، أضف وحدة صورة. سيكون هذا بمثابة الصورة الرئيسية التي سنجلس بها خلف تراكب الغالق.

قم بتحميل صورة إلى وحدة الصورة.

ثم اضبط محاذاة الصورة إلى المركز.

إنشاء أعلى مصراع مع تقسيم النص

الآن بعد أن أصبحت صورتنا في مكانها الصحيح ، سنضيف المصراع العلوي باستخدام وحدة نصية. أضف وحدة نصية جديدة أسفل الصورة.

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

ضمن علامة تبويب التصميم ، قم بتحديث نمط النص كما يلي:

• خط النص: بوبينز
• وزن خط النص: ثقيل
• نمط خط النص: TT
• لون نص النص: #ffffff
• حجم نص النص: 200 بكسل (سطح المكتب) ، 30vw (الجهاز اللوحي والهاتف)
• تباعد الحروف النصية: -0.03em
• ارتفاع خط النص: 0em
• محاذاة النص: الوسط

بعد ذلك ، قم بتحديث خيارات الحجم والتباعد:

• العرض: 100٪
• ارتفاع: 50٪
• الهامش: 0 بكسل للأسفل

ضمن علامة التبويب خيارات متقدمة ، قم بتحديث ما يلي:

• فئة CSS: مصراع علوي

سنستخدم فئة CSS لتبديل حركة التحويل وإيقاف تشغيلها باستخدام الكود الخاص بنا لاحقًا.

ثم أضف CSS المخصص هذا إلى العنصر الرئيسي:

display:flex;
align-items:flex-end;
justify-content:center;

يستخدم هذا الرمز المرن للتأكد من محاذاة النص عموديًا في الجزء السفلي من الوحدة النمطية. نظرًا لأن ارتفاع سطر النص يساوي 0 ، فسيتم عرض النص كتقسيم يظهر النصف العلوي فقط.

لوضع مصراعنا العلوي ، نحتاج أولاً إلى إخفاء تجاوز النص ثم إعطائه موضعًا مطلقًا على النحو التالي:

• الفائض الأفقي: مخفي
• الفائض العمودي: مخفي
• الموقف: مطلق

سيؤدي هذا إلى تحريك المصراع فوق النصف العلوي من الصورة.

إنشاء الغالق السفلي مع مطابقة تقسيم النص

الآن بعد أن اكتمل الغالق العلوي لدينا ، يمكننا بدء إنشاء الغالق السفلي من خلال تكرار وحدة نص الغالق العلوي.

ثم افتح وحدة النص المكرر وقم بتحديث ما يلي:

• فئة CSS: مصراع علوي

قم بتحديث Main Element CSS عن طريق استبدال "flex-end" بـ "flex-start" لخاصية align-items. هنا CSS النهائي:

display:flex;
align-items:flex-start;
justify-content:center;

باستخدام "بدء التشغيل المرن" ، يتم محاذاة النص عموديًا في الجزء العلوي من الوحدة النمطية. ونظرًا لأن ارتفاع سطر النص يساوي 0 ، فسيتم عرض النص كتقسيم يظهر النصف السفلي فقط.

ثم قم بتحديث الموضع المطلق بإزاحة رأسية على النحو التالي:

• تعويض عمودي: 50٪

يؤدي هذا إلى جعل وحدة نص الغالق فوق النصف السفلي من الصورة.

يجب الآن محاذاة النص المقسم على كلا المصراعين ليكون مطابقًا تمامًا.

في هذه المرحلة ، نجحنا في إنشاء الإعداد لتراكب صورة مصراع النص المقسم. يتكون هذا من عمود الغالق باعتباره الحاوية ، والصورة الرئيسية ، والمصراع العلوي الموجود في النصف العلوي من الصورة ، والغالق السفلي الموجود في النصف السفلي من الصورة.

سنستخدم هذا كنوع من نموذج بدء التشغيل للأمثلة القليلة التالية التي ستتضمن الرسوم المتحركة لتأثير الغالق باستخدام خصائص التحويل.

الجزء 2: المدونة

لإضافة وظائف الرسوم المتحركة للغالق ، نحتاج إلى بضع مقتطفات من CSS و JS باستخدام وحدة Code.

أضف وحدة رمز جديدة إلى الصفحة. يمكننا إضافته إلى العمود الأيمن من القسم العلوي الأول الذي استخدمناه لبناء التراكب الأولي الخاص بنا.

CSS

الصق CSS التالي في مربع التعليمات البرمجية مع التأكد من لفه بعلامات النمط الضرورية:

  /* transition duration of shutter animation */
  .top-shutter,
  .bottom-shutter {
    transition: transform 1s;
  }
  /* disables all transform options created in
  Divi Builder for both shutters */
  .divi-transform-none .top-shutter,
  .divi-transform-none .bottom-shutter {
    transform: none;
  }
  .on-click {
    cursor:pointer;
  }

هذا CSS بسيط حقًا. كل ما تفعله هو تطبيق التحويل: لا شيء على المصاريع داخل العمود مع الفئة "divi-transform-none". سيتم تبديل هذا الفصل وإيقاف تشغيله باستخدام JS لإنشاء الرسوم المتحركة. الانتقال: يعيّن التحويل 1s ببساطة مدة الانتقال (أو الرسوم المتحركة) لآخر ثانية واحدة.

شبيبة

بعد CSS ، أضف JQuery التالي إلى مربع الشفرة مع التأكد من لفه بعلامات البرنامج النصي الضرورية:

(function ($) {
  $(document).ready(function () {
    /*
  Toggle shutter transform animation on hover.
  To work, Divi Column with shutters must include
  these CSS Classes: "shutter-column on-hover divi-transform-none".
  */
    $ShutterColumnToHover = $(".shutter-column.on-hover");

    $ShutterColumnToHover.hover(function () {
      $(this).toggleClass("divi-transform-none");
    });

    /*
  Toggle shutter transform animation on click.
  To work, Divi Column with shutters must include
  these CSS Classes: "shutter-column on-click divi-transform-none".
  */
    $ShutterColumnToClick = $(".shutter-column.on-click");

    $ShutterColumnToClick.on("click", function (e) {
      $(this).toggleClass("divi-transform-none");
      e.stopPropagation();
    });

    $(document).on("click", function (e) {
      if ($(e.target).is(".shutter-column.on-click") === false) {
        $ShutterColumnToClick.addClass("divi-transform-none");
      }
    });
  });
})(jQuery);

يضيف الجزء الأول من الكود الوظيفة التي تقوم بتبديل الرسوم المتحركة لتحويل الغالق عند التمرير عندما يحتوي العمود على الفئات "عمود الغالق عند التمرير divi-transform-none".

    $ShutterColumnToHover = $(".shutter-column.on-hover");

    $ShutterColumnToHover.hover(function () {
      $(this).toggleClass("divi-transform-none");
    });

يضيف الجزء الثاني من الكود الوظيفة التي تقوم بتبديل الرسوم المتحركة لتحويل الغالق عند النقر كلما احتوى العمود على الفئات "عمود الغالق عند النقر فوق divi-transform-none".

    $ShutterColumnToClick = $(".shutter-column.on-click");

    $ShutterColumnToClick.on("click", function (e) {
      $(this).toggleClass("divi-transform-none");
      e.stopPropagation();
    });

    $(document).on("click", function (e) {
      if ($(e.target).is(".shutter-column.on-click") === false) {
        $ShutterColumnToClick.addClass("divi-transform-none");
      }
    });

الجزء 3: تصاميم انقسام مصراع النص

التصميم رقم 1

لإنشاء أول تصميم للرسوم المتحركة للغالق ، سنبدأ عملية التصميم من خلال تكرار القسم الأول. سيعطينا هذا قسمًا جديدًا به تراكب صور مُبنى مسبقًا مع مصاريع نص مقسمة جاهزة للعمل.

أضف خصائص التحويل إلى أعلى مصراع

عادةً عندما تستخدم CSS لتحريك شيء بخصائص التحويل ، فلن يكون للعنصر نمط تحويل مبدئيًا ، ثم يتم تطبيق نمط التحويل عندما يقوم المستخدم بالتمرير أو النقر فوق العنصر. في Divi ، سنقلب العملية ونبدأ بإضافة نمط التحويل إلى العنصر باستخدام Divi Builder أولاً. يتيح لنا ذلك استخدام خيارات التحويل المضمنة أثناء تحرير التصميم بصريًا. ثم بمجرد الانتهاء من إضافة جميع عناصر تصميم التحويل ، يمكننا تعطيلها في البداية (باستخدام فئة CSS) ، ثم تبديلها وإيقافها عندما يتفاعل المستخدم مع التراكب.

لإضافة تصميم التحويل إلى الغالق العلوي ، افتح إعدادات وحدة نص الغالق العلوية وقم بتحديث ما يلي:

• مقياس التحويل (X و Y): 150٪
• تحويل محور ص للترجمة: -101٪
• أصل التحويل: أعلى الوسط

إذا قمت بذلك بشكل صحيح ، فلن يكون الغالق العلوي مرئيًا بعد الآن وهو ما نريده لأننا نريد كشف الصورة الرئيسية بالكامل بعد انتقال الرسوم المتحركة.

أضف خصائص التحويل إلى المصراع السفلي

بالنسبة للغالق السفلي ، قم بتحديث خيارات تصميم التحويل التالية:

• مقياس التحويل (X و Y): 150٪
• تحويل محور Y للترجمة: 101٪
• أصل التحويل: مركز القاع

أضف فئة لتعطيل تصميمات التحويل مبدئيًا

كما ذكرت سابقًا ، بمجرد الانتهاء من إضافة تصميمات التحويل المطلوبة للرسوم المتحركة للغالق ، يمكننا تعطيل تصميمات التحويل هذه في البداية عن طريق إضافة فئة CSS.

بسبب كود CSS المخصص الذي أضفناه سابقًا ، سيظهر التصميم بدون أي تصميمات تحويل في مكانها.

أضف وظيفة عند النقر بفئة واحدة

للحصول على نفس الرسوم المتحركة التي يتم تشغيلها عند النقر بدلاً من التمرير ، كل ما نحتاج إليه هو استبدال فئة واحدة في العمود.

أولاً ، قم بتكرار العمود 1 مع أول مثال عملي لدينا عند التمرير. ثم احذف العمود الفارغ. الآن يجب أن يكون لديك عمودين متطابقين مع نفس الفئات والمحتوى.

افتح إعدادات العمود 2 واستبدل فئة "on-hover" بفئة "on-click". إليك ما يجب أن تكون عليه الفصول الثلاثة الأخيرة:

• فئة CSS: عمود مصراع عند النقر على divi-transform-none

نتيجة

عكس حركة الغالق على Hover

إذا كنت تريد عرض الصورة الرئيسية مكشوفة في البداية ثم قم بإضافة التراكب عند التمرير فوق الصورة (عكس كيفية عملها الآن) ، يمكنك إزالة الفئة "divi-transform-none" في العمود المستخدم للغالق . سيعطيك هذا التأثير التالي.

التصميم رقم 2

لإنشاء حركة الغالق الثانية ، يمكننا استخدام تكرار القسم السابق مع أول حركة مصراع لدينا.

تحديث مصاريع

ثم استخدم التحديد المتعدد لتحديد وحدات نص الغالق العلوي والمصراع السفلي. ثم افتح إعدادات العنصر لكليهما وقم بتحديث ما يلي:

• الخلفية: #ffffff
• لون نص النص: # 000000
• وضع المزج: الشاشة

نتيجة

التصميم رقم 3

لإنشاء تصميم تراكب صورة الرسوم المتحركة للغالق الثالث ، قم بتكرار القسم السابق.

أضف صورة جديدة

ثم قم بتحديث وحدة الصورة بصورة جديدة.

تحديث مصاريع

استخدم التحديد المتعدد لتحديد كل من وحدات نص الغالق العلوي والغالق السفلي وافتح إعدادات العنصر لكليهما لتحديث ما يلي:

• محتوى الجسم: د

• الخلفية: rgba (0،0،0،0.9)
• لون نص النص: #ffffff
• حجم نص النص: 450 بكسل (سطح المكتب) ، 70vw (الجهاز اللوحي والهاتف)
• وضع المزج: الضرب

افتح إعدادات وحدة نص الغالق العلوية وقم بتحديث خيارات التحويل التالية:

• مقياس التحويل (X و Y): 100٪ (افتراضي)
• تحويل محور ص للترجمة: -101٪
• تحويل محور Z: -45deg
• أصل التحويل: أعلى اليسار

ثم قم بتحديث إعدادات وحدة نص الغالق السفلية وقم بتحديث خيارات التحويل التالية:

• مقياس التحويل (X و Y): 100٪ (افتراضي)
• تحويل محور Y للترجمة: 101٪
• تحويل محور Z: -45deg
• أصل التحويل: أسفل اليمين

نتيجة

المزيد من الأمثلة والمتحتملات

هنا زوجان من الأمثلة على التصميمات باستخدام نفس التقنيات.

هنا واحد مشابه للتصميم رقم 2 ولكن بدون مقياس التحويل على المصاريع. كما يوضح أيضًا كيف لا يزال تأثير العرض المبسط يعمل على الصورة.

وهنا مثال آخر يستخدم التحويل المترجم لتحريك المصاريع أفقيًا.

النتائج النهائية

افكار اخيرة

يمكن أن يكون إنشاء تراكبات الصور باستخدام الرسوم المتحركة لمصراع النص المنفصل في Divi طريقة فعالة لإبراز صورك وإشراك الزائرين بطريقة جديدة.

نأمل أن يؤدي هذا إلى إطلاق إبداعك لإضافة تصميماتك الخاصة وتحويل تأثيرات الرسوم المتحركة باستخدام ألوان وخطوط وأنماط مزج مختلفة وما إلى ذلك. تبدو الاحتمالات لا حصر لها.

أتطلع إلى الاستماع منك في التعليقات.

هتافات!