كيفية تضمين Divi Galleries في تبديل لإنشاء قائمة مطعم مخصصة

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

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

هيا بنا نبدأ.

قبل وبعد

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

قبل

بعد، بعدما

ابدء

استبدال عرض معرض WordPress مع Divi Gallery Display

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

ضبط لون تمييز المظهر الخاص بك (اختياري)

نظرًا لأننا سنقوم بإدراج معرض Divi في وحدة تبديل ، فإن لون الرمز الذي يظهر عندما تحوم فوق صورة في المعرض سيرث تلقائيًا لون التمييز الذي قمت بتعيينه لموضوع Divi. يمكنك تعيين لون تمييز السمة من لوحة معلومات WordPress الخاصة بك عن طريق الانتقال إلى Divi> Theme Customizer> General Settings> Layout Settings. ضمن إعدادات التخطيط ، قم بتحديث لون الوصول إلى السمة إلى ما يلي:

لون تمييز السمة: # a06d51

هذا هو اللون الذي سيتطابق مع تخطيط قائمة المخبوزات الذي سنستخدمه في هذا البرنامج التعليمي.

تحديث حجم رمز التبديل الافتراضي في مخصص الوحدة (اختياري)

بالنسبة لهذا التصميم ، اعتقدت أنه سيكون من المفيد عرض رمز تبديل أكبر عند استخدام وحدة Divi Toggle. يمكنك تغيير الحجم الافتراضي لـ Toggle Module بالانتقال إلى Divi> Module Customizer. ثم حدد Toggle Module من القائمة وقم بتحديث حجم الرمز على النحو التالي:

حجم رمز التبديل: 32

إعداد صفحتك الجديدة باستخدام تخطيط صفحة قائمة المخبز

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

من التحميل من نافذة المكتبة المنبثقة ، اختر حزمة تخطيط المخبز ثم انقر لاستخدام تخطيط صفحة قائمة المخبز.

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

بمجرد الانتهاء ، تكون جاهزًا لبدء تصميم القائمة!

تنفيذ تصميم قائمة المطعم المخصصة باستخدام Divi Toggles و Image Galleries

تصميم عنصر قائمة تبديل

مع تنشيط Divi Builder على الواجهة الأمامية ، أضف وحدة Toggle ضمن وحدة النص مع العنوان الفرعي الذي يقرأ "Sweet Tooth".

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

<h5>$8.00</h5>

ثم ابدأ في تحديث إعدادات التبديل على النحو التالي:

• لون الأيقونة: # a06d51
• فتح تبديل لون النص: # 333333
• لون نص التبديل مغلق: # 333333
• مغلق تبديل لون الخلفية: #ffffff

• خط العنوان: باتوا وان
• وزن خط العنوان: غامق
• نمط خط العنوان: TT
• تباعد حروف العنوان: 1 بكسل
• ارتفاع خط العنوان: 4em
• الحشو المخصص: 0 بكسل أعلى ، 0 بكسل أسفل

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

لنضيف الآن حدًا أيسر إلى مفتاح التبديل.

• عرض الحد الأيسر: 5 بكسل
• لون الحد الأيسر: # a06d51

إضافة معرض الصور إلى Toggle Module

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

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

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

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

ضبط حشوة الصف للهواتف الذكية

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

• الحشو المخصص (الهاتف): 0 بكسل يسار ، 0 بكسل يمين

قم بتكرار التبديل حسب الحاجة

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

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

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

تغيير عدد الأعمدة في المعرض

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

فئة CSS: two-col-gal

ثم افتح إعدادات الصفحة وأضف CSS المخصص التالي:

.two-col-gal .et_gallery_item {
width: 50%;
padding: 2%;
margin: 0;
clear: none !important;
}

تغيير لون تراكب معرض الصور في وحدة تخصيص الوحدة

إذا كنت ترغب في تغيير لون تراكب عنصر المعرض الخاص بك دون الحاجة إلى استخدام CSS مخصص ، يمكنك تغيير الإعدادات الافتراضية لوحدة المعرض في مُخصص الوحدة. للقيام بذلك ، انتقل إلى Divi> Module Customizer. ثم انقر فوق وحدة المعرض وقم بتغيير لون تراكب التمرير إلى ما تريد.

افكار اخيرة

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

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

هتافات!