كيفية تحسين وحدة قائمة Divi مع 5 إعدادات مسبقة عالمية (تنزيل مجاني)

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

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

هيا بنا نبدأ!

نظرة خاطفة

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

قم بتنزيل Layout مجانًا

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

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

تنزيل مجاني

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

تحميل

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

لاستخدام الإعدادات المسبقة العامة للقائمة على رأسك العام ، يجب عليك أولاً استيراد التخطيط (مع إعداداته المسبقة) إلى مكتبة Divi على النحو التالي:

1. انتقل إلى Divi> Divi Library.
2. انقر فوق الزر استيراد / تصدير في الجزء العلوي من الصفحة.
3. حدد علامة التبويب استيراد في نافذة قابلية النقل المنبثقة
4. اختر تنسيق ملف JSON المراد استيراده
5. حدد استيراد الإعدادات المسبقة
6. انقر فوق زر الاستيراد

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

دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟

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

للبدء ، سوف تحتاج إلى القيام بما يلي:

1. إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme.
2. قم بإنشاء صفحة جديدة في WordPress واستخدم Divi Builder لتحرير الصفحة على الواجهة الأمامية (منشئ مرئي).
3. اختر الخيار "البناء من الصفر".

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

إنشاء 5 وحدة قائمة للوحدة النمطية العالمية في Divi

# 1 - روابط الأزرار المركزية مع الشعار

بالنسبة لأول إعداد عالمي مسبق لنمط القائمة ، سنقوم بتصميم قائمة بها روابط أزرار متساوية العرض بحيث تبدو القائمة متماثلة. سنقوم أيضًا بتضمين حالات التمرير التي تطابق الحالة النشطة لروابط زر القائمة.

لإنشاء هذا الإعداد المسبق العام في القائمة الأول ، أضف صفًا من عمود واحد إلى القسم العادي.

ثم أضف وحدة قائمة إلى الصف.

افتح إعدادات القائمة وأضف قائمة إلى الوحدة النمطية.

ثم أضف شعار الموقع كمحتوى ديناميكي إلى الوحدة أيضًا.

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

• النمط: توسيط

• خط القائمة: بوبينز
• وزن خط القائمة: غامق
• نمط خط القائمة: TT
• حجم نص القائمة: 14 بكسل (سطح المكتب) ، 24 بكسل (الجهاز اللوحي والهاتف)
• تباعد أحرف القائمة: 0.15em
• ارتفاع خط القائمة: 1.3em (سطح المكتب) ، 1.8em (الكمبيوتر اللوحي والهاتف)

• أقصى ارتفاع للشعار: 60 بكسل

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

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

ارتباط القائمة CSS

أضف CSS المخصص التالي إلى ارتباط القائمة:

على سطح المكتب ...

min-width: 10em;
padding: 1em !important;
justify-content:center;
background: #f8f8f8;
border-radius: 10px;

على التحويم…

background: #333333;
color: #ffffff;
opacity: 1;

نشط ارتباط القائمة CSS

background: #333333;
color: #ffffff;
opacity: 1;

قائمة شعار CSS

margin-bottom: 10px;

نتيجة النمط 1

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

إضافة نمط القائمة 1 كإعداد مسبق عالمي

قسم مكرر

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

إنشاء إعداد مسبق جديد من الأنماط الحالية

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

حدد إنشاء إعداد مسبق جديد من الأنماط الحالية.

امنح الإعداد المسبق اسمًا ("ارتباطات الأزرار المركزية مع الشعار") ، ثم احفظ الإعداد المسبق.

# 2 - شعار مركزي مضمن مع روابط أزرار

لإنشاء الإعداد العام المسبق للقائمة الثانية ، افتح إعدادات وحدة القائمة المكررة من التصميم السابق.

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

• النمط: شعار مركزي مضمن

بسبب CSS المخصص الموروث من نمط الوحدة السابقة ، تحافظ روابط القائمة على تصميم الزر بينما يستقر الشعار تمامًا في المنتصف. يسمح تصميم رابط الزر المخصص لروابط القائمة بالحفاظ على تصميم متماثل لطيف.

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

margin-bottom: 0px;

نتيجة النمط 2

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

إضافة نمط القائمة 2 كإعداد مسبق عالمي

قسم مكرر

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

إنشاء إعداد مسبق جديد من الأنماط الحالية

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

حدد إنشاء إعداد مسبق جديد من الأنماط الحالية.

أعطِ اسمًا للإعداد المسبق ("شعار مركزي مضمن مع روابط أزرار") واحفظ الإعداد المسبق.

# 3 - قائمة فولكس فاجن متباعدة بالكامل مع تسمية الهاتف المحمول

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

لإنشاء الإعداد العالمي المسبق للقائمة الثالثة ، سنحتاج إلى صف كامل العرض. افتح إعدادات الصف التي تحتوي على القائمة المكررة وقم بتحديث ما يلي:

• عرض الحضيض: 1
• العرض: 100٪
• العرض الأقصى: 100٪

افتح إعدادات وحدة القائمة واحذف الشعار.

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

• النمط: توسيط

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

• حجم نص القائمة: 1.5vw (سطح المكتب)

لإنشاء تسمية "قائمة" لقائمة الهاتف المحمول ، يمكننا إضافة بعض CSS المخصص إلى شاشة Before Psuedo على الكمبيوتر اللوحي على النحو التالي:

قبل CSS

content: "MENU";
font-family: poppins;
font-size:12px;
position: absolute;
top:0;
left:50%;
transform: translate(-50%, -100%);

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

ملاحظة: قد يظهر هذا أو لا يظهر على المنشئ المرئي. قد تضطر إلى تحميل الصفحة المباشرة لرؤية النتيجة.

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

ارتباط القائمة CSS (سطح المكتب):

min-width: 10em;
justify-content:center;
text-align:center;
padding: .3em;
margin-bottom: 8px;
border: 1px solid transparent;

ارتباط القائمة CSS (التمرير):

color: #333;
border: 1px solid #333;
opacity:1;

CSS رابط القائمة النشط:

color: #333;
border: 1px solid #333;
opacity:1;

نتيجة النمط 3

إضافة نمط القائمة 3 كإعداد مسبق عالمي

قسم مكرر

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

إنشاء إعداد مسبق جديد من الأنماط الحالية

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

حدد إنشاء إعداد مسبق جديد من الأنماط الحالية.

أعط اسمًا للإعداد المسبق ("Full Centered VW Spaced Menu with Mobile Label") واحفظ الإعداد المسبق.

# 4 - قائمة متباعدة مع تسمية الجوال

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

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

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

• النمط: محاذاة إلى اليسار

بعد ذلك ، قم بتحديث أنماط الارتباط التالية ومحاذاة النص:

• لون الارتباط النشط: # ac3cf7
• حجم نص القائمة (سطح المكتب): 14 بكسل
• محاذاة النص: صحيح

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

أضف CSS المخصص التالي:

قبل CSS (الجهاز اللوحي)

content: "MENU";
position: absolute;
font-family:poppins;
font-size:12px;
line-height:1em;
top:0px;
right:6px;
transform: translateY(-100%);

CSS ارتباط القائمة:

min-width: 8em;
padding: 0.3em;
margin-bottom: 8px;
justify-content:flex-end;

نتيجة النمط 4

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

إضافة نمط القائمة 4 كإعداد مسبق عالمي

قسم مكرر

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

إنشاء إعداد مسبق جديد من الأنماط الحالية

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

حدد إنشاء إعداد مسبق جديد من الأنماط الحالية.

قم بتسمية الإعداد المسبق ("قائمة متباعدة مع تسمية الجوال") واحفظ الإعداد المسبق.

# 4 - قائمة متباعدة على اليسار مع تسمية الجوال

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

افتح إعدادات القائمة وقم بتحديث محاذاة النص لروابط القائمة:

• محاذاة النص: يسار

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

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

قبل CSS (الجهاز اللوحي):

content: "MENU";
position: absolute;
font-family:poppins;
font-size:12px;
line-height:1em;
top:0px;
left:6px;
transform: translateY(-100%);

العنصر الرئيسي (الكمبيوتر اللوحي):

direction:rtl;

CSS ارتباط القائمة:

min-width: 8em;
padding: 0.3em;
margin-bottom: 8px;
justify-content:flex-end;

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

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

افكار اخيرة

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

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

هتافات!