إطلاق العنان لقوة وحدة نص Divi لتصميمات القائمة الإبداعية

يعد إنشاء تصميمات قائمة فريدة جانبًا مهمًا من تصميم الويب. يقدّر القراء بنية وجماليات القائمة المصممة جيدًا لأنها تتيح لهم معالجة المعلومات بشكل أسرع.

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

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

هيا بنا نبدأ.

نظرة خاطفة

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

مستوحى من إعدادات وحدة النص

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

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

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

يمكنك أيضًا استهداف نمط مستويات عناوين مختلفة (أو علامات) تحت كل علامة تبويب ضمن خيارات نمط العنوان.

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

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

إنشاء قائمة HTML الخاصة بك

يمكن أن تكون قائمة html إما "مرتبة" (مع أرقام وأرقام رومانية وما إلى ذلك) أو "غير مرتبة" (مع أيقونات مربعة وأيقونات دائرة وما إلى ذلك). للقوائم غير المرتبة ، سيتم تغليف عناصر القائمة بعلامة "ul" (يرمز "ul" إلى "قائمة غير مرتبة"). بالنسبة للقوائم المرتبة ، يتم تغليف عناصر القائمة بعلامة "ol" (يرمز الحرف "ol" إلى "القائمة المرتبة"). يتم تغليف كل عنصر من عناصر القائمة بعلامة "li" ("li" لـ "عنصر القائمة").

فيما يلي الهيكل الأساسي لقائمة مرتبة:

<ol>
     <li>List Item</li>
     <li>List Item</li>
     <li>List Item</li>
</ol>

والذي سيبدو بشكل افتراضي كما يلي:

1. قائمة الاغراض
2. قائمة الاغراض
3. قائمة الاغراض

يمكنك بالفعل إنشاء قائمة HTML باستخدام محرر wysiwyg داخل وحدة نصوص Divi. تأكد من أنك تقوم بالتحرير في علامة التبويب المرئية واكتب ببساطة عناصر القائمة الخاصة بك مع التأكد من وجود فاصل أسطر (اضغط على Enter) بعد كل عنصر. ثم قم بتمييز المحتوى وانقر فوق أحد رموز القائمة أعلى المحرر.

انتقل الآن إلى علامة تبويب النص لترى كيف يبدو HTML:

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

فيما يلي البنية الأساسية لقائمة متداخلة تحتوي على قائمة مرتبة مع كل عنصر قائمة يحتوي على قائمة متداخلة غير مرتبة.

<ol>
  <ol>
  <li>Ordered List Item
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
  <li>Ordered List Item
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
  <li>Ordered List Item
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
</ol>

بشكل افتراضي ، ستبدو قائمة html المتداخلة كما يلي:

1. عنصر قائمة مرتبة
   • عنصر قائمة غير مرتب
2. عنصر قائمة مرتبة
   • عنصر قائمة غير مرتب
3. عنصر قائمة مرتبة
   • عنصر قائمة غير مرتب

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

<ol>
  <li><h5>Ordered List Item</h5>
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
  <li><h5>Ordered List Item</h5>
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
  <li><h5>Ordered List Item</h5>
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
</ol>

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

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

إنشاء القسم والصف للقوائم

قم بإنشاء صفحة جديدة ونشر Visual Builder. ثم حدد خيار إنشاء صفحة من سكراتش. ثم أنشئ قسمًا عاديًا بصف من عمودين.

إنشاء قائمة HTML في وحدة نصية

في العمود الأول من صفك ، أضف وحدة نصية جديدة. في مربع المحتوى في إعدادات النص ، أدخل قائمة HTML التالية:

<ol>
 	<li>
<h5>Design</h5>
<ul>
 	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</li>
</ul>
</li>
 	<li>
<h5>Develop</h5>
<ul>
 	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</li>
</ul>
</li>
 	<li>
<h5>Deliver</h5>
<ul>
 	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</li>
</ul>
</li>
</ol>

يجب أن تبدو هذه البنية مألوفة من قبل. سيكون نص رأس h5 هو عناصر القائمة المرتبة والنص الوهمي "lorem ipsum" سيكون عناصر القائمة المتداخلة غير المرتبة.

سيبدو بشكل افتراضي كما يلي:

لم يكن الأمر مثيرًا للإعجاب حتى الآن ، كما أعلم. ولكن مع وجود هذا المحتوى في مكانه ، يمكننا الآن أن نبدأ الجزء الممتع في تصميم قائمتنا مع Divi!

ملاحظة مهمة: نظرًا لأن كل تصميم عبارة عن نسخة معدلة من التصميم الأول ، فمن الأفضل البدء بالتصميم الأول في هذا البرنامج التعليمي والحفاظ عليه بالترتيب.

تصميم القائمة # 1

بالنسبة للمبتدئين ، دعنا نعطي وحدة النص لدينا خلفية متدرجة على النحو التالي:

خلفية متدرجة اللون الأيسر: rgba (0،0،0،0.04)
خلفية متدرجة اللون الصحيح: rgba (255،255،255،0)
اتجاه التدرج: 90 درجة
موقف البداية: 25٪
موقف النهاية: 0٪

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

انتقل الآن إلى علامة تبويب التصميم وحدد علامة تبويب القائمة المرتبة ضمن تبديل النص.

ثم قم بتحديث ما يلي:

خط القائمة المطلوبة: Abril Fatface
وزن خط القائمة المطلوبة: غامق
لون نص القائمة المطلوبة: # 559cad
حجم نص القائمة المطلوبة: 45 بكسل
ارتفاع سطر القائمة المطلوبة: 1.6em
نوع نمط القائمة المرتبة: بادئة عشرية بصفر
موضع نمط القائمة المطلوبة: خارجي
المسافة البادئة لعنصر القائمة المطلوب: 2vw

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

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

الآن انقر فوق علامة تبويب القائمة المرتبة لتغيير الإعدادات التالية:

خط قائمة غير مرتبة: مونتسيرات
وزن خط القائمة غير المرتبة: خفيف
لون نص قائمة غير مرتبة:
حجم نص القائمة غير المرتبة: 18 بكسل
نوع نمط قائمة غير مرتبة: لا شيء
المسافة البادئة لعنصر القائمة غير المرتبة: 0.01 بكسل

تصميم رأس H5

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

خط العنوان 5: مونتسيرات
وزن خط العنوان 5: خفيف
نمط خط العنوان 5: الأحرف الكبيرة (TT)
لون نص العنوان 5: # 4f6d7a
حجم نص العنوان 5: 5vw (سطح المكتب) ، 70 بكسل (الكمبيوتر اللوحي) ، 40 بكسل (الهاتف الذكي)

لإنهاء تصميم وحدة النص الخاصة بنا ، أضف الحشو المخصص التالي:

الحشو المخصص (سطح المكتب): 3vw Top ، 3vw Bottom
حشوة مخصصة (كمبيوتر لوحي): 2vw يسار
الحشو المخصص (الهاتف الذكي): 50 بكسل يسار

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

الآن انسخ وحدة النص والصقها في العمود الثاني من الصف. قد تلاحظ أن أرقام القائمة تحتاج إلى تعديل في وحدة النص المكرر بحيث تستمر من القائمة السابقة. نريد أن تبدأ قائمة الوحدات النصية الثانية بالرقم 4 (بدلاً من 1). للقيام بذلك ، نحتاج إلى إضافة تغيير صغير واحد إلى قائمة html الخاصة بنا. انتقل إلى مربع المحتوى في إعدادات وحدة النص واستبدل علامة الفتح "ol" بما يلي:

<ol start="4">

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

تصميم القائمة # 2

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

إنشاء تصميم متدرج للخلفية مخصص

في القسم المكرر ، قم بتحديث إعداد القسم بخلفية التدرج التالية:

لون الخلفية المتدرجة اليسرى: #ffffff
خلفية متدرجة اللون الصحيح: rgba (155،29،32،0.08)
اتجاه التدرج: 45 درجة
موقف البداية: 50٪
موقف النهاية: 0٪

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

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

خلفية متدرجة اللون الأيسر: rgba (155،29،32،0.08)
خلفية متدرجة اللون الصحيح: rgba (255،255،255،0)
اتجاه التدرج: 45 درجة
موقف البداية: 25٪
موقف النهاية: 0٪

العمود 2 خلفية متدرجة اللون الأيسر: rgba (255،255،255،0)
العمود 2 خلفية متدرجة اللون الأيمن: #ffffff
العمود 2 اتجاه التدرج: 45 درجة
موضع البداية للعمود 2: 65٪
موضع نهاية العمود 2: 0٪

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

إعدادات النمط لتصميم القائمة # 2

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

احذف أولاً تدرج الخلفية.
وزن خط القائمة غير المرتبة: متوسط
لون نص القائمة غير المرتبة: rgba (0،0،0،0.5)
وزن خط القائمة المطلوبة: عادي
لون نص القائمة المطلوبة: # 9b1d20
وزن خط العنوان 5: رفيع
لون نص العنوان 5: rgba (0،0،0،0.8)
حجم نص العنوان 5: 5vw (سطح المكتب)

الآن انسخ أنماط الوحدة إلى وحدة النص في العمود الأيمن.

هذا هو التصميم النهائي لمثالنا الثاني.

تصميم القائمة # 3

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

الآن قم بتحديث إعدادات القسم بألوان خلفية متدرجة جديدة:

خلفية متدرجة اللون الأيسر: # 559CAD
خلفية متدرجة اللون الصحيح: # 4f6d7a

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

خلفية متدرجة اللون الأيسر: # 4f6d7a

ثم أضف تدرجًا جديدًا للخلفية إلى وحدة النص .

خلفية متدرجة اللون الأيسر: rgba (255،255،255،0)
خلفية متدرجة اللون الصحيح: # 559cad
اتجاه التدرج: 45 درجة
موقف البداية: 75٪
موقف النهاية: 0٪

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

إعدادات النمط لتصميم القائمة # 3

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

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

خط القائمة المطلوبة: بوبينز
وزن خط القائمة المطلوبة: ثقيل
محاذاة نص القائمة المطلوبة: الوسط
حجم نص القائمة المطلوبة: 4vw (سطح المكتب) ، 50 بكسل (جهاز لوحي)
لون نص القائمة المطلوبة: # f4f1bb
نوع نمط القائمة المطلوبة: عشري
موقف نمط القائمة المرتبة: في الداخل
المسافة البادئة لعنصر القائمة المطلوب: 0vw

(ملاحظة: سيؤدي تغيير موضع النمط إلى الداخل إلى تكديس الرقم أعلى نص الرأس وهو مناسب لهذا التصميم.)

وزن خط القائمة غير المرتبة: خفيف
لون نص القائمة غير المرتبة: #ffffff

خط العنوان 5: Lato
وزن خط العنوان 5: رفيع
العنوان 5 تباعد الأحرف: 6vw (سطح المكتب) ، 70 بكسل (الكمبيوتر اللوحي) ، 40 بكسل (الهاتف الذكي)
لون نص العنوان 5: #ffffff
حجم نص العنوان 5: 6vw

الحشو المخصص (سطح المكتب): 15٪ يسار ، 15٪ يمين
حشوة مخصصة (كمبيوتر لوحي): 5٪ يسار ، 5٪ يمين

يجب عليك أيضًا إخراج الحشوة اليسرى المخصصة 50 بكسل على الهاتف الذكي لهذا التصميم.

ها هو التصميم النهائي.

تصميم القائمة # 4

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

إعدادات النمط لتصميم القائمة # 4

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

حذف تدرج الخلفية.

خط القائمة المطلوبة: Lato
وزن خط القائمة المطلوبة: خفيف
لون نص القائمة المطلوبة: # 000000
حجم نص القائمة المطلوبة: 6vw
نوع نمط القائمة المطلوبة: upper-roman
المسافة البادئة لعنصر القائمة المطلوب: 0vw

خط العنوان 5: Lato
وزن خط العنوان 5: غامق
نمط خط العنوان: تسطير
العنوان 5 لون تسطير: rgba (0،0،0،0.14)
نمط التسطير في العنوان 5: مزدوج
لون نص العنوان 5: # 000000
حجم نص العنوان 5: 40 بكسل

الحشو المخصص: 3vw يسار ، 3vw يمين

احذف الحشوة اليسرى المخصصة للجهاز اللوحي والهاتف الذكي التي تم ترحيلها من التصميم السابق.

مربع الظل الأفقي: 6 بكسل
مربع الظل الرأسي: 6 بكسل
قوة انتشار الظل المربع: 0 بكسل
مربع قوة طمس الظل: 0 بكسل
لون الظل: # 000000
موضع ظل المربع: الظل الداخلي

انسخ أنماط الوحدة إلى العمود الثاني. ثم قم بتحديث موضع ظل الصندوق إلى الظل الخارجي.

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

هذا كل شيء!

افكار اخيرة

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

أود أن أرى بعض الأمثلة منك ، لذا لا تتردد في المشاركة في التعليقات.

هتافات!