كيفية إعادة إنشاء معاينات حزمة تخطيط ET الخاصة بـ Fan-Out Hover Effects في Divi

إحدى الميزات الرائعة لتصميم موقع الويب الجديد لـ Elegantthemes.com هي معاينات حزمة التخطيط المعدة مسبقًا على صفحة منتج Divi. ما يجعل هذا التصميم فريدًا هو كيفية عرض كل حزمة تخطيط بثلاث صور منفصلة يتم توزيعها عند المرور فوقها.

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

هيا بنا نبدأ.

نظرة خاطفة

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

سيتم ضبط تخطيط ثلاثة أعمدة على سطح المكتب على عمود واحد على الجهاز اللوحي والهاتف.

قم بتنزيل Layout Pack Preview Fan-Out Hover Effects Layout مجانًا

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

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

تنزيل مجاني

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

تحميل

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

لاستيراد التخطيط إلى صفحتك ، ما عليك سوى استخراج ملف مضغوط واسحب ملف json إلى Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، فهل نحن؟

اشترك في قناتنا على اليوتيوب

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

للبدء ، ستحتاج إلى الإعداد التالي:

1. موضوع Divi مثبت ونشط
2. تم إنشاء صفحة جديدة للبناء من الصفر على منشئ الواجهة الأمامية (المرئي) لديفي.
3. ثلاث صور لاستخدامها لمحتوى وهمي. يجب أن تكون الصور بحجم 250 × 375 بكسل تقريبًا للحصول على أفضل النتائج. نظرًا لأن هذه معاينات لصفحات الويب ، يمكنك إنشاء لقطات شاشة خاصة بك لأي تصميم صفحة ثم قص / تغيير حجم كل صورة وفقًا لذلك.

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

إعادة إنشاء معاينات حزمة تخطيط ET مع تأثيرات تحوم Fan-Out في Divi

بناء القسم والصف

قم بإنشاء قسم عادي جديد بصف من ثلاثة أعمدة.

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

• عرض المزراب: 2
• العرض: 90٪
• العرض الأقصى: 1120 بكسل (سطح المكتب) ، 400 بكسل (الكمبيوتر اللوحي)

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

• حشوة العمود 1: 20٪ سفلي
• حشوة العمود 2: 20٪ سفلي
• حشوة العمود 3: 20٪ سفلي

إضافة الصورة 1

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

ثم قم بتحميل الصورة إلى وحدة الصورة (يجب أن يكون حجمها حوالي 250 × 375 بكسل).

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

• محاذاة الصورة: المركز
• العرض: 220 بكسل
• الفائض العمودي: مخفي
• مؤشر Z: 4

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

height: 240px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

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

إضافة الصورة 2

لإنشاء الصورة الثانية ، أضف وحدة صورة جديدة أسفل وحدة الصورة الأولى في العمود 1. ثم قم بتحميل صورة جديدة (250X350) إلى الوحدة.

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

للقيام بذلك ، قم بتحديث ما يلي:

• العرض: 180 بكسل
• الفائض العمودي: مخفي

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

position: absolute !important;
top: 12px;
left: 25px;
height: 200px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

إضافة الصورة 3

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

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

افتح الصورة المكررة (الصورة 3) وقم بتحديث وحدة الصورة بصورة جديدة (250 × 375).

ثم قم بتحديث CSS المخصص عن طريق تغيير خاصية الموضع left إلى خاصية الموضع right . لا يلزم إجراء تغييرات أخرى على CSS.

إذا كنت تفضل ذلك ، يمكنك نسخ ولصق CSS التالي في العنصر الرئيسي لاستبدال CSS الحالي.

position: absolute !important;
top: 12px;
right: 25px;
height: 200px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

حتى الان جيدة جدا

ها هي النتيجة النهائية حتى الآن.

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

إضافة Fan-Out Hover Effect CSS

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

1. أضف مدة انتقال إلى كل صورة من أجل انتقال سلس عند التمرير.
2. اضبط الصورة 1 لعرض 180 بكسل وارتفاع 240 بكسل. سيؤدي ذلك إلى زيادة طول حاوية الصورة وضيقها لإظهار المزيد من الصورة.
3. اضبط الصورة 2 و 3 لعرض 160 بكسل وارتفاع 220 بكسل. سيؤدي هذا أيضًا إلى زيادة طول الصور وضيقها لإظهار المزيد من الصورة.
4. اضبط الصورة 2 لتدوير 5 درجات عكس اتجاه عقارب الساعة وتحرك قليلاً إلى اليسار. يمكننا القيام بذلك عن طريق إضافة قيمة -5 درجة transform:rotate الخاصية وضبط قيمة خاصية الموضع left إلى 0.
5. اضبط الصورة 3 لتدوير 5 درجات في اتجاه عقارب الساعة وتحرك قليلاً إلى اليمين. يمكننا القيام بذلك عن طريق إضافة قيمة 5 درجات إلى transform:rotate الخاصية وضبط قيمة خاصية الموضع right إلى 0.

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

افتح إعدادات الصف وأضف فئة CSS التالية.

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

لإضافة CSS المخصص إلى الصفحة ، افتح إعدادات الصفحة وأضف CSS المخصص التالي ضمن علامة التبويب خيارات متقدمة.

/**transition duration and speed curve**/
.fan-out-images .et_pb_image {
  -webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
  transition: 300ms all cubic-bezier(.4,0,.2,1);
}
/**Change width and height of image 1 on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:first-child {
  width: 160px;
  height: 240px;
}
/**Change width and height of image 2 and 3 on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(2), .fan-cards .et_pb_column:hover .et_pb_image:nth-child(3) {
  width: 160px;
  height: 220px;
}
/**Rotate image 2 counterclockwise and move to the left on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(2) {
  left: 0;
  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);
}
/**Rotate image 3 clockwise and move to the right on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(3) {
  right: 0;
  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);
}

لقد أضفت تعليقًا فوق كل مقتطف من css لتذكيرك بما يفعله كل منهم.

بمجرد الانتهاء. تحقق من النتيجة النهائية.

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

تأثير التمرير الاختياري: تدوير الصورة 1 و 2 بشكل منفصل عند التمرير

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

إليك كيف تفعل ذلك.

إخراج خصائص التحويل من CSS المخصص لإعدادات الصفحة

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

  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);

  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);

إضافة خصائص التحويل عند التمرير للصورة 2

ثم افتح إعدادات وحدة الصورة للصورة 2 واستخدم خيارات التحويل المضمنة في Divi لإضافة نفس قيمة تدوير التحويل التي حذفناها مسبقًا لحالة التمرير.

• Transform Rotate Z Axis (تحوم): -5deg
• تحويل محور X للترجمة (تحوم): -20 بكسل

إضافة خصائص التحويل عند التمرير للصورة 3

ثم قم بتحديث إعدادات وحدة الصورة للصورة 3 لإضافة خاصية تدوير التحويل.

• تحويل تدوير المحور Z (تحوم): 5 درجة
• تحويل محور X للترجمة (تحوم): 20 بكسل

الآن تحقق من النتيجة النهائية.

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

إضافة روابط للصور

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

إضافة معاينات حزمة التخطيط الجديدة إلى الأعمدة الأخرى

لإنهاء التصميم ، يمكننا نسخ الصور الثلاث في العمود 1 ولصقها في العمود 2 والعمود 3.

بعد ذلك ، كل ما عليك فعله هو تحديث كل صورة في العمود 2 و 3 بصور جديدة.

هذا كل شيء!

تصميم نهائي

ها هو التصميم النهائي. يُظهر الصف العلوي تأثير التمرير عند التمرير فوق العمود. يُظهر الصف الثاني تأثير تمرير المروحة الثانوي المضاف إلى الصورة 2 و 3 بشكل منفصل.

سيتم ضبط تخطيط ثلاثة أعمدة على سطح المكتب على عمود واحد على الجهاز اللوحي والهاتف.

افكار اخيرة

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

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

هتافات!