ديفي: كيفية إضافة الصور إلى قائمة ميجا

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

نستمتع بالتفاعل مع الصور عبر الإنترنت. لذا، من المنطقي إضافة صورة إلى موقعك الإلكتروني كلما أمكن ذلك. 

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

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

مسح

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

إنشاء قائمة ميجا

للبدء، يجب علينا أولاً إنشاء القائمة. 

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

انتقل إلى لوحة تحكم WordPress ثم انقر فوق المظاهر> القوائم

انقر "إنشاء قائمة جديدة"، قم بتسميته وانقر فوق "إنشاء القائمة".

تأكد من تفعيل خاصية قائمة فئات CSS بالنقر على علامة التبويب مزيد من الخيارات في أعلى يمين الشاشة، حدد "القوائم" وضع علامة في المربع فئات CSS.

يمكنك الآن إضافة عناصر القائمة الخاصة بك إلى القائمة الجديدة التي قمت بإنشائها.

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

لإنشاء عنصر القائمة هذا ، قم بإنشاء ارتباط مخصص بالمعلمات التالية:

• عنوان URL: https://#
• عنوان الملاحة: قائمة ميجا
• فئات CSS: القائمة الضخمة

الآن قم بترتيب / سحب عناصر القائمة الأربعة (لكل منها ثلاثة عناصر فرعية خاصة به) لتصبح عناصر فرعية لرابط القائمة الرئيسية الرئيسي.

بعد إضافة الروابط إلى القائمة، انتقل إلى أسفل الصفحة إلى "قائمة Réglages duانقر على "" في أسفل شاشة القائمة وحدد القائمة الرئيسية لتحديد موقع العرض. وأخيرًا، انقر على حفظ القائمة

إليكم ما تبدو عليه قائمتنا الضخمة حتى الآن:

إضافة صور إلى القائمة الرئيسية

الآن وقد أصبحت القائمة جاهزة، حان وقت إضافة الصور.

اقرأ أيضا: كيف أنشر منشورات المدونة في DIVI؟

احصل على الصور

ابدأ بالحصول على أربع صور. يجب أن تتعلق هذه الصور بعناصر القائمة الفرعية الأربعة (حول ، تقديم الخدمة ، عملنا والاتصال بنا).

استخدم برنامج تحرير الصور لتقليل حجم كل صورة واقتصاصها بحيث يكون عرضها 500 بكسل وارتفاعها 300 بكسل.

أضف هذه الصور إلى مكتبة WordPress. اضغط على وسائط> إضافة.

اسحب صورك إلى الصفحة لإضافتها أو انقر على "اختر الملفات'

أدخل الصور في قائمة ميجا

ارجع إلى صفحة القوائم في لوحة معلومات WordPress.

في هذا المثال ، الرابط الموجود أعلى العمود الأول هو "عن". 

انقر على السهم الموجود على يمين العنصر "عن"في منطقة تسمية التنقل، أضف الصورة المطلوبة باستخدام علامة html IMG قبل النص مباشرة " حول "يجب أن يبدو وسم الصورة كالتالي:

<img src=”Insert Image URL” alt=”Alternate Text” width=”100%” />

للعثور على رابط الصورة، انتقل إلى الوسائط> مكتبة الوسائطانقر على الصورة التي ترغب في إضافتها. 

في شاشة السياق تفاصيل المرفقاتابحث عن عنوان URL في القسم الأيمن، ثم انقر على انسخ الرابط إلى الحافظة

والآن، ارجع إلى إعدادات عنصر القائمة. "عن" في صفحة القائمة واستبدال النص "أدخل رابط الصورة" عن طريق لصق رابط الصورة الخاص بك باستخدام ctrl + v.

قبل الخروج من خيارات التكوين لعنصر القائمة "عن"حدد موقع مربع نص فئات CSS وأدخل الفئة "mega-link".

سيسمح لنا هذا بإضافة نمط مخصص لاحقًا.

كرر هذه العملية لإضافة الصور الثلاث التالية إلى كل عنصر من عناصر القائمة الفرعية التي تحمل الفئة "mega-link". (في هذا المثال، العناصر الثلاثة المتبقية هي "تقديم الخدمة" ، "عملنا" et " اتصل بنا ".)

نتيجة

اذهب إلى موقعك الإلكتروني وحرك مؤشر الماوس فوق رابط القائمة الرئيسية. ستبدو قائمتك الرئيسية الآن كما يلي:

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

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

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

في لوحة معلومات WordPress ، انتقل إلى Divi> خيارات الموضوع . 

انتقل إلى أسفل إلى مربع CSS المخصص، وأدخل CSS أدناه، ثم انقر على حفظ التغييرات :

.mega-link > a {
    text-align: center;
    font-size: 20px !important;
    text-transform: uppercase;
    font-weight: 400 !important;
    letter-spacing: 3px;
}
 
.mega-link > a img {
    margin-bottom: 8px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
 
}

نتيجة نهائية

انت قد انتهيت !

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

تحميل DIVI Now !!!

خاتمة

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

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

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

لكن في غضون ذلك, شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...