Divi: كيفية إنشاء تراكبات صور مخصصة

هل ترغب في تعلم كيفية تصميم طبقات صور مخصصة باستخدام Divi؟

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

في هذا الدرس التعليمي، سنوضح لك كيفية تصميم طبقات صور مخصصة في Divi. ستتغير هذه الطبقات وتكشف عن عناصر عند تمرير مؤشر الماوس فوق الصورة. 

لا حاجة إلى أي إضافة.

دعونا نبدأ!

مسح

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

قم بإنشاء صفحة جديدة باستخدام Divi Builder

من لوحة تحكم WordPress ، انتقل إلى الصفحات> إضافة جديد لإنشاء صفحة جديدة.

أعطه عنوانًا منطقيًا لك وانقر استخدم Divi Builder

ثم انقر فوق ابدأ البناء (البناء من الصفر)

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

إنشاء طبقات صور مخصصة في Divi

صمم القسم والصف والأعمدة

للبدء ، قم بإنشاء صف من ثلاثة أعمدة في القسم الافتراضي.

افتح إعدادات القسم وأضف لون الخلفية التالي:

• الخلفية: # 3a0ca3

بعد ذلك ، افتح إعدادات العمود 1 وقم بتحديث ما يلي:

• فئة CSS: حاوية تراكب et

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

تمت إضافة الصورة

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

حمّل صورة تبدو أقرب إلى صورة عمودية منها إلى صورة أفقية. تأكد من أن عرضها كافٍ لتغطية عرض العمود بالكامل على جميع أحجام المتصفحات.

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

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

• الهامش (السفلي): 0 بكسل

تحت علامة التبويب متقدم، أضف فئة CSS التالية:

• فئة CSS: et-overlay-image

إضافة لون تراكب الصورة باستخدام وحدة "الفاصل"

لإنشاء لون تراكب الصورة، سنستخدم وحدة Divider.

أولاً، أضف وحدة فاصلة أسفل الصورة.

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

• الموقف: مطلق

تحت علامة التبويب وصف المنتج، قم بتحديث ما يلي:

• إظهار المقسم:

• لون الخلفية: rgba (247,37,133,0.8،XNUMX،XNUMX،XNUMX)

ثم قم بتحديث ارتفاع وعرض الفاصل:

• العرض: 100٪
• ارتفاع: 100٪

مع وجود التصميم في مكانه ، أضف فئة CSS التالية إلى جهاز التقسيم:

• تراكب البند et

ملاحظة: يجب إضافة هذه الفئة إلى جميع عناصر التصميم المتراكبة التي ترغب في عرضها عند تمرير المؤشر فوقها فقط. إذا كنت لا ترغب في إخفاء العنصر في البداية، فاحذفها.

لمساعدتك في تتبع عناصر/وحدات التصميم، افتح نافذة الطبقات وقم بتسمية وحدة الفاصل ("لون التراكب").

تمت إضافة نص العنوان المتراكب

أسفل وحدة الفاصل، أضف وحدة نص جديدة. ستعمل هذه الوحدة كنص عنوان يظهر أعلى الصورة عند تمرير المؤشر فوقها.

تحديث المحتوى باستخدام عنوان H2:

<h2>Coaching</h2>

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

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

• محاذاة النص: توسيط
• لون النص: فاتح

• الخط: الغاق Garamond
• وزن الخط: عريض
• حجم النص: 40 بكسل

• العرض: 100٪
• العرض الأقصى: 85٪

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

• الموقف: مطلق
• الموقع: أعلى الوسط
• تعويض عمودي: 10٪

ملاحظة: قد يلزم تعديل الإزاحة الرأسية حسب نسبة أبعاد الصورة. على سبيل المثال، قد تتطلب الصورة الأفقية إزاحة أقل.

بعد ذلك ، أضف فئات CSS التالية إلى وحدة النص:

• فئة CSS: نقل عنصر et-overlay-down

بالإضافة إلى الدرجة "et-overlay-item"، نضيف فئة إضافية "نقل لأسفل" من أجل استخدام CSS مخصص لتحريك رأس الصفحة قليلاً إلى الأسفل عند تمرير المؤشر فوقه.

إنشاء النص الأساسي المتراكب

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

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

تحت علامة التبويب متقدم، قم بتغيير الموقع المطلق للوحدة إلى المركز.

بما أننا لا نريدها أن تتحرك عند تمرير المؤشر فوقها (بل أن تظهر فقط)، قم بتحديث فئة CSS لتشمل العناصر التالية فقط:

• فئة CSS: et-overlay-item

إنشاء زر التراكب

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

قبل تعديل التصميم ، قم بتحديث موضع الزر على النحو التالي:

• المركز: مطلق
• تعويض عمودي: 10٪

الآن، يجب أن يكون الزر متمركزاً في الجزء السفلي من الصورة.

في علامة التبويب متقدمقم بتحديث فئة CSS وأضف مقتطف CSS مخصصًا إلى العنصر الرئيسي كما يلي:

• فئة CSS: et-overlay-item move لأعلى

• عنصر CSS الرئيسي:

min-width: 15em;

لاحظ أنه تمت إضافة فئة إضافية للزر لتحريكه قليلاً للأعلى عند تمرير المؤشر فوقه. وهذا يُكمّل حركة نص العنوان للأسفل عند تمرير المؤشر فوقه.

بعد ذلك ، قم بتحديث إعدادات التصميم التالية:

• محاذاة الزر: توسيط
• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 14 بكسل
• لون الخلفية: # 4361ee

• عرض حد الزر: 0 بكسل
• تباعد حرف الزر: 0,1em
• وزن الخط: عريض
• نمط خط الزر: TT
• الحشوة: 0,8em (أعلى وأسفل) ، 0 بكسل (يسار ويمين)

إضافة CSS مخصص مع وحدة Code

أضف وحدة رمز أسفل الزر.

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

<style>
 @media all and (min-width: 981px) {
   
  .et-fb-root-ancestor .et-overlay-item {
    opacity: 1; /*shows hidden overlay items when using the visual Divi Builder*/
  }
  .et-overlay-item {
    opacity: 0; /*hides overlay items by default*/
    margin-bottom: 0px;
  }
  .et-overlay-item, .et-overlay-image {
    transition: all 400ms !important; /*sets transition speed of all overlay items*/
  }
  .et-overlay-container:hover .et-overlay-item {
    opacity: 1; /*reveals hidden overlay items on hover*/
  }
  .et-overlay-container:hover .et-overlay-image {
    /*add new styles here to change image on hover*/
  }
  .et-overlay-container:hover .et-overlay-image.et-scale {
    transform: scale(1.2); /*adjust scale of image here*/
  }
  .et-overlay-container:hover .et-overlay-image.et-rotate {
    transform: scale(1.4)
    rotateZ(10deg)!important; /*adjust rotation of image and scale needed for rotation here*/
  }  
  .et-overlay-container:hover .et-overlay-item.move-up {
    margin-bottom: 15% !important; /*adjust how far you want the overlay item to move up*/
  }
  .et-overlay-container:hover .et-overlay-item.move-down {
    margin-top: 10%; /*adjust how far you want the overlay item to move down*/
  }
 
}
</style>

تم التعليق على الكود حتى تتمكن من فهم المكان الذي يمكنك فيه ضبط CSS ليناسب احتياجاتك.

كرر العمود لمزيد من التصميم

افتح طبقة النافذة المنبثقة، ثم احذف العمودين الفارغين أولاً.

ثم قم بتكرار العمود الذي يحتوي على تصميم تراكب الصورة مرتين. يجب أن يكون لديك ما مجموعه ثلاثة أعمدة بتصميمات متطابقة.

تصميم تراكب الصور رقم 2

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

ضبط موضع النص الأساسي وفئة CSS

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

• الموقع: مركز القاع
• تعويض عمودي: 5٪

بعد ذلك ، قم بتحديث فئة CSS بما يلي:

• فئة CSS: تحريك عنصر التراكب لأعلى

ضبط موقع الزر وفئة CSS

بعد ذلك ، افتح إعدادات الزر في العمود 2 وقم بتحديث موقع الموضع التالي:

• الموقع: المركز

بعد ذلك ، قم بإزالة فئة CSS لأننا نريد أن يظل الزر مرئيًا دائمًا.

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

• الخلفية: rgba (67,97,238,0.8،XNUMX،XNUMX،XNUMX)

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

• لون الخلفية: # f72585

اضبط الصورة وفئة CSS

بعد ذلك، افتح إعدادات الصورة وقم بتحميل صورة جديدة (إذا رغبت في ذلك).

بعد ذلك، أضف فئة CSS التالية إلى الصورة:

• فئة CSS: et-overlay-image et-scale

لاحظ أنه بالإضافة إلى فئة "et-overlay-image"، هناك فئة إضافية تسمى "et-scale" والتي ستزيد من حجم الصورة، مما يخلق تأثير تكبير عند تمرير المؤشر فوقها.

تصميم تراكب الصور رقم 3

حان الآن وقت إنشاء تصميم تراكب الصورة الثالث في العمود 3.

اضبط محتوى النص الأساسي المتراكب وفئة CSS

أولاً، افتح إعدادات وحدة نص المحتوى المتراكب في العمود 3. ثم أضف عنوان H2 أعلى نص الفقرة. الآن، سيكون كلاهما داخل وحدة واحدة.

بعد ذلك، قم بإزالة فئة CSS بحيث يظل النص مرئيًا فوق الصورة.

ضبط إزاحة الزر وفئة CSS

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

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

قم بإزالة رأس التراكب

بعد ذلك، احذف وحدة نص العنوان المتراكب.

ضبط لون التراكب وفئة CSS

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

• لون التدرج للخلفية اليسرى: rgba (67,97,238,0.8،XNUMX،XNUMX،XNUMX)
• لون تدرج الخلفية على اليمين: rgba(247,37,133,0.8)
• موقف البداية: 25٪
• المركز النهائي: 75٪

ونظرًا لأننا نريد إبقاء طبقة التدرج اللوني مرئية في جميع الأوقات ، فقم بإزالة فئة CSS.

اضبط فئة CSS للصورة

وأخيرًا، سنضيف فئة CSS إضافية ("et-rotate") إلى الصورة الرئيسية والتي ستعمل على تغيير حجم الصورة وتدويرها عند تمرير المؤشر فوقها.

• فئة CSS: et-overlay-image et-rotate

اللمسات الأخيرة

قبل التحقق من النتائج النهائية ، نحتاج إلى إجراء بعض التعديلات.

إزالة الهامش السفلي الافتراضي لجميع الوحدات

نظرًا لأننا قمنا بالفعل بتحديث الهامش بهامش سفلي يبلغ 0 بكسل ، يمكننا توسيع هذا الهامش ليشمل جميع الوحدات.

انقر بزر الماوس الأيمن فوق إعداد الهامش واختر "توسيع الهامش".

بعد ذلك، اختر تمديد الهامش ليشمل جميع الوحدات النمطية في الصفحة.

إزالة وحدات التعليمات البرمجية المكررة

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

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

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

تحميل DIVI Now !!!

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

تحميل DIVI Now !!!

خاتمة

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

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

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

ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...