كيفية تصميم تراكبات الصور المخصصة في Divi

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

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

هيا بنا نبدأ!

نظرة خاطفة

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

قم بتنزيل Divi Image Overlays 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.

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

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

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

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

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

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

• فئة CSS: حاوية تراكب et
• الفائض الأفقي: مخفي
• الفائض العمودي: مخفي

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

إضافة الصورة

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

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

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

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

• الهامش: 0 بكسل للأسفل

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

• فئة CSS: et-overlay-image

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

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

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

ثم ضع الحاجز على أنه مطلق بحيث يكون أعلى الصورة:

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

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

• إظهار المقسم:
• لون الخلفية: rgba (247،37،133،0.8)

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

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

بمجرد أن يصبح التصميم في مكانه ، أضف فئة CSS التالية إلى الحاجز:

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

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

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

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

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

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

<h2>Coaching</h2>

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

ضمن إعدادات تصميم النص ، قم بتحديث ما يلي:

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

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

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

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

• الموقف: مطلق
• الموقع: أعلى الوسط
• الإزاحة العمودية: 10٪

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

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

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

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

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

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

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

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

نظرًا لأننا لا نريد أن يتحرك هذا عند التمرير (يظهر فقط) ، قم بتحديث فئة CSS لتضمين ما يلي فقط:

• فئة CSS: et-overlay-item

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

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

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

• المركز: مطلق
• الإزاحة العمودية: 10٪

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

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

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

  min-width: 15em

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

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

• محاذاة الزر: الوسط
• حجم نص الزر: 14 بكسل
• زر لون الخلفية: # 4361ee
• زر عرض الحدود: 0 بكسل
• تباعد حرف الزر: 0.1em
• وزن خط الزر: غامق
• نمط خط الزر: TT
• الحشو: 0.8em أعلى ، 0.8em أسفل ، 0 بكسل يسار ، 0 بكسل يمين

إضافة CSS المخصص مع Code Module

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

ثم الصق 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)

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

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

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

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

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

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

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

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

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

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

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

ثم أخرج فئة CSS بحيث يظل النص مرئيًا أعلى الصورة.

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

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

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

حذف عنوان التراكب

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

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

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

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

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

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

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

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

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

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

خذ الهامش السفلي الافتراضي لجميع الوحدات

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

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

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

حذف وحدات التعليمات البرمجية المكررة

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

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

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

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

افكار اخيرة

إن بناء تراكبات صور مخصصة هو في الواقع الكثير من المرح. هناك تصميمات لا حصر لها يمكنك اختبارها بصريًا باستخدام Divi builder ولا يتطلب الأمر سوى قدر صغير من CSS المخصص لتطبيق تأثيرات التمرير. حتى تأثيرات التمرير لعناصر التراكب تتطلب CSS مخصصًا ، لا يزال بإمكانك الاستفادة من خيارات التمرير المضمنة لاستهداف كل عنصر من عناصر التراكب على حدة.

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

هتافات!