كيفية إنشاء بطاقات فليب مع أي وحدة في Divi بدون مكون إضافي

تعد بطاقات Flip Card طريقة ممتعة للمستخدمين للتفاعل مع موقع الويب الخاص بك. فهو لا يوفر رسومًا متحركة رائعة للقلب فحسب ، بل يتيح لك أيضًا تقديم معلومات إضافية في موقع واحد موجز. في هذا البرنامج التعليمي ، سأوضح لك كيفية تحويل Divi Modules إلى بطاقات فليب دون استخدام مكون إضافي! باستخدام هذه الطريقة ، ستتمكن من استخدام وحدة Divi كواجهة أمامية للبطاقة ووحدة Divi أخرى كظهر البطاقة. يمكنك حتى تصميم كل وحدة (أمامية وخلفية) كما تحب باستخدام أداة divi builder. يتم إنجاز الوظيفة من خلال بضع مقتطفات من CSS (بدون مسج).

أعتقد أنك ستندهش من مدى بساطة ومتعة إنشاء هذه البطاقات.

دعنا نتعمق!

يختلس النظر

إليكم لمحة سريعة عن التصميم الذي سنقوم ببنائه اليوم.

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

ما تحتاجه لهذا البرنامج التعليمي

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

شرح الفكرة الأساسية

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

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

هذا ما يبدو عليه الإعداد قبل أن نضيف CSS المخصص.

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

هذا كل شيء!

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

إضافة تخطيط Premade إلى صفحتك

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

بمجرد تحميل التخطيط إلى الصفحة ، انشر صفحتك ، ثم انقر فوق الزر "إنشاء في الواجهة الأمامية". أنت الآن جاهز لبدء إنشاء بطاقات Flip.

إنشاء القسم والصفوف والوحدات

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

الهامش المخصص: 20 بكسل للأسفل
الحشو المخصص: 0 بكسل أعلى ، 0 بكسل أسفل

احفظ التغييرات.

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

افتح الآن إعدادات القسم وأضف CSS المخصص التالي إلى العنصر الرئيسي:

display:flex;

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

إضافة الوحدات إلى الصفوف

هذا هو المكان الذي يكون فيه تخطيطنا المسبق مفيدًا لهذا البرنامج التعليمي. سنستخدم الوحدات النمطية الأربعة في الجزء العلوي من التخطيط لبدء تصميم البطاقات القلاب الخاصة بنا. باستخدام خيارات النقر بزر الماوس الأيمن أو المفاتيح المختصرة ctrl + c و ctrl + v (windows) و cmd + c cmd + v (mac) ، انسخ والصق الوحدات الجاهزة في كل من الصفوف التي أنشأناها للتو. تأكد من أن كل صف يحتوي على إصدارات مكررة من نفس الوحدة النمطية.

الآن يجب أن يبدو القسم الخاص بك مثل هذا.

تصميم وحدات بطاقة الوجه الأمامية والخلفية

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

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

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

المحتوى: "هذا وصف."
لون الخلفية: # 00a2fa
لون النص: فاتح

إضافة فئات CSS و CSS مخصصة

حان الوقت الآن لـ CSS المخصص الذي سيعطينا وظيفة بطاقة الوجه. افتح إعدادات الصفحة وأضف CSS المخصص التالي:

@media (min-width:981px){
.flip-box-row {
  background-color: transparent;
  width: 250px;
  height: 250px;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

.flip-box-column {
  position: relative;
  width:100%;
  height: 100%;
  -webkit-transition: transform 0.8s;
  transition: transform 0.8s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.flip-box-row:hover .flip-box-column {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back{
  position: absolute;
   width:100%;
  height: 100%;
  -webkit-transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-box-back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
}

لاحظ أن فئات CSS المذكورة أعلاه قد تمت تسميتها بطريقة من شأنها أن تساعدك على فهم ما يفعله كل منهم. إنه أيضًا مؤشر مفيد حول المكان الذي نحتاج فيه لإضافة فئات CSS إلى عناصر Divi الخاصة بنا. على سبيل المثال ، يُقصد بالفئة "flip-box-row" تصميم كل من الصفوف الأربعة ؛ لذلك ، يحتاج كل صف إلى فئة CSS هذه.

إضافة فئات CSS إلى Divi Elements

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

فئة CSS: flip-box-front

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

فئة CSS: flip-box-back

أخيرًا ، استخدم التحديد المتعدد لتحديد جميع الصفوف الأربعة ومنحهم فئات CSS التالية:

فئة CSS: flip-box-row
فئة العمود CSS: flip-box-column

التصميم النهائي على سطح المكتب

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

تخصيص التصميم للجوال

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

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

تعطيل في: الهاتف والهاتف الذكي

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

flex-wrap:wrap;

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

الآن دعنا نتحقق من التصميم النهائي للجهاز اللوحي والهاتف الذكي.

خيار المكافأة: بطاقات فليب عمودية!

إذا كنت تريد أن تنقلب البطاقات القابلة للقلب رأسيًا بدلاً من أفقيًا ، فأنت تحتاج فقط إلى تغيير حرفين (حرفيًا) في CSS المخصص. افتح إعدادات الصفحة وحدد المكانين حيث يتم استخدام "التحويل: تدوير Y (180 درجة)". ثم استبدل الحرف "Y" بالحرف "X". إذا لم تكن قد خمنت بالفعل ، فهذا يغير الاستدارة بحيث يتم تدويرها على المحور X بدلاً من المحور Y.

أشياء رائعة جدا! تحقق من النتيجة.

افكار اخيرة

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

آمل أن يكون هذا مفيدًا وأتطلع إلى الاستماع منك في التعليقات أدناه.

هتافات!