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

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

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

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

ليست هناك حاجة إلى ملحقات.

دعونا نبدأ!

مسح

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

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

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

أعطه عنوانًا منطقيًا لك وانقر استعمل Divi منشئ

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

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

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

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

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

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

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

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

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

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

إضافة صورة

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

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

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

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

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

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

• فئة CSS: et-overlay-image

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

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

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

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

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

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

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

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

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

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

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

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

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

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

تمت إضافة نص رأس التراكب

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

تحديث محتويات بعنوان H2:

<h2>Coaching</h2>

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

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

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

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

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

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

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

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

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

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

بالإضافة إلى الدرجة "والعنصر المتراكب"، نضيف فئة إضافية "تحرك لأسفل" من أجل استخدام 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 لأننا نريد أن يظل الزر مرئيًا دائمًا.

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

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

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

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

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

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

ثم أضف فئة CSS التالية إلى الصورة:

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

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

إنشاء تصميم تراكب الصور # 3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ثم اختر توسيع الهامش ليشمل كافة الوحدات على الصفحة.

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

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

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

الآن وقد اكتملت تصميماتنا الثلاثة ، فلنلقِ نظرة على النتائج النهائية لتصميمات تراكب الصور.

تحميل DIVI Now !!!

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

تحميل DIVI Now !!!

وفي الختام

إن إنشاء تراكبات صور مخصصة هو في الواقع الكثير من المرح. هناك تصميمات لا حصر لها يمكنك اختبارها بصريًا باستخدام Divi Builder. 

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

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

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

...