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

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

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

هيا بنا نبدأ.

نظرة خاطفة

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

قم بتنزيل تصميمات نمط القائمة لـ Toggles و Accordions Layout مجانًا

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

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

تنزيل مجاني

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

تحميل

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

لاستيراد التخطيط إلى صفحتك ، ما عليك سوى استخراج ملف مضغوط واسحب ملف json إلى Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، فهل نحن؟

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

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

1. موضوع Divi مثبت ونشط
2. تم إنشاء صفحة جديدة للبناء من الصفر على الواجهة الأمامية (منشئ بصري)
3. الصور لاستخدامها لمحتوى وهمي

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

الجزء 1: استخدام أنماط القائمة في تبديل الوحدات

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

قم أولاً بإنشاء قسم عادي بصف من ثلاثة أعمدة. ثم قم بتحديث إعدادات الصف كما يلي:

عرض المزراب: 2
العرض: 100٪
العرض الأقصى: 90vw

أضف وحدة تبديل

بعد ذلك ، أضف وحدة تبديل إلى العمود 1. ستكون هذه هي الأولى من ثلاث وحدات تبديل سيتم إضافتها إلى كل عمود من الأعمدة الثلاثة.

أضف تبديل محتوى HTML

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

انطلق والصق HTML التالي في ملف
مربع محتوى الجسم.

<ol start="1">
    <li>
        <ul style="margin-top: -1.5em;">
            <li>Lorem ipsum dolor sit amet</li>
        </ul>
    </li>
</ol>
<p>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.</p>

الآن هذا الجزء من كود HTML ينشئ قائمة مرتبة باستخدام علامة ol. تحتوي القائمة المرتبة على عنصر قائمة واحد فقط (li) وهو عبارة عن قائمة متداخلة غير مرتبة (ul) مع عنصر قائمة واحد (li) يحتوي على بعض المحتوى الوهمي. تحت القائمة المرتبة يوجد فقرة أساسية من النص.

من خلال هذا الإعداد ، يمكننا استهداف كل علامة من هذه العلامات (ol ، ul ، p) لتصميم مختلف باستخدام أنماط نص Divi المضمنة والتي تتضمن أنماط القائمة.

لاحظ أن علامة ol الأولى بدأت = ”1 ″ بداخلها. هذا يخبر القائمة بالرقم الذي يجب أن تبدأ بسرد أرقام القائمة المرتبة مع كل عنصر من عناصر القائمة. من الناحية الفنية ، هذا ليس ضروريًا للرقم الأول لأنه سيبدأ تلقائيًا بالرقم 1 افتراضيًا. لكننا سنحتاجها للتبديل التالي الذي سنضيفه.

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

تصميم المحتوى

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

لون الأيقونة: # ff3d97
حجم خط الأيقونة: 26 بكسل
افتح تبديل لون الخلفية: #ffffff
مغلق تبديل لون الخلفية: #ffffff
فتح لون نص العنوان: # 333333
لون نص العنوان: # 333333

خط العنوان: أوزوالد
حجم نص العنوان: 18 بكسل
ارتفاع خط العنوان: 3em

خط قائمة غير مرتبة: Oswald
وزن خط القائمة غير المرتبة: خفيف
لون نص القائمة غير المرتبة: # 333333
حجم نص القائمة غير المرتبة: 36 بكسل
نوع نمط قائمة غير مرتبة: لا شيء

خط القائمة المطلوبة: Kameron
وزن خط القائمة المطلوبة: غامق
لون نص القائمة المطلوبة: rgba (255،61،151،0.34)
حجم نص القائمة المطلوبة: 100 بكسل
ارتفاع سطر القائمة المطلوبة: 1.1em

تكرار أول وحدة تبديل لإنشاء التبديلات الأخرى

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

قم بتحديث أرقام بدء القائمة المطلوبة

للتبديل المكرر في العمود 2 ، نحتاج إلى أن تبدأ القائمة المرتبة بالرقم "2" بدلاً من "1". لتغيير هذا ، افتح إعدادات وحدة التبديل وقم بتغيير رقم البداية في علامة ol إلى "2".

ستحتاج أيضًا إلى تحديث مفتاح التبديل في العمود 3 برقم بدء القائمة المرتبة "3".

تصميم نهائي

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

الجزء 2: استخدام أنماط القائمة في وحدات الأكورديون

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

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

تمديد تبديل الأنماط إلى الأكورديون

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

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

ثم تحقق من النتيجة النهائية لتصميم الأكورديون.

الجزء 3: استخدام أنماط القائمة لإنشاء محتوى متعدد الأعمدة في وحدة تبديل

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

أولاً ، قم بإنشاء قسم جديد بصف من عمود واحد. ثم انسخ والصق إحدى وحدات التبديل التي أنشأناها مسبقًا في الصف.

ثم قم بتحديث محتوى وحدة التبديل مع بعض HTML الجديد على النحو التالي:

<ol style="column-count: 2">
<li>
        <ul>
	        <li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
        </ul>
</li>
<li>
        <ul>
	        <li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
        </ul>
</li>
<li>
        <ul>
	        <li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
        </ul>
</li>
<li>
        <ul>
	        <li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
        </ul>
</li>
</ol>

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

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

تصميم نص الارتباط

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

افتح إعدادات التبديل وقم بتحديث ما يلي:

وزن خط الارتباط: شبه عريض
نمط خط الارتباط: تسطير
لون نص الرابط: # ff3d97
حجم نص الرابط: 15 بكسل

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

لون نص القائمة المطلوبة: # ff3d97

أضف خلفية إلى مفتاح التبديل

لإنهاء التصميم ، يمكننا إضافة خلفية مخصصة إلى زر التبديل الخاص بنا. للقيام بذلك ، قم بتحديث إعدادات التبديل التالية:

صورة الخلفية: [تحميل صورة من اختيارك]
تدرج الخلفية اللون الأيسر: rgba (255،255،255،0.92)
تدرج الخلفية اللون الأيمن: rgba (255،255،255،0.8)
اتجاه التدرج: 90 درجة
موقف البداية: 50٪
موقف النهاية: 0٪
وضع التدرج فوق صورة الخلفية: نعم

إضافة العناصر المتجاوبة إلى مفتاح تبديل العمودين

نظرًا لأن محتوى التبديل هو الآن عمودين ، فلنقم بتحديث التصميم ببعض الأنماط المتجاوبة لجعله يتسع بشكل جيد على الهاتف المحمول.

أولاً ، قم بتحديث إعدادات الصف كما يلي:

العرض: 100٪
العرض الأقصى: 89vw (سطح المكتب) ، 90vw (الكمبيوتر اللوحي والهاتف)

افتح إعدادات التبديل وقم بتحديث ما يلي:

حجم خط الأيقونة: 5vw

حجم نص العنوان: 4vw

حجم نص القائمة غير المرتبة: 26 بكسل (سطح مكتب) ، 18 بكسل (كمبيوتر لوحي) ، 14 بكسل (هاتف)
المسافة البادئة لعنصر القائمة غير المرتبة: 1 بكسل

حجم نص القائمة المطلوبة: 8vw

التصميم النهائي لمحتوى تبديل الأعمدة المتعددة

هذا هو التصميم على شاشات الكمبيوتر اللوحي والهاتف.

وهنا نفس التصميم بخلفية أغمق وألوان نصية بيضاء.

افكار اخيرة

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

استمتع باستكشاف التصميمات الجديدة.

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

هتافات!