كيفية هيكلة الأسئلة الشائعة باستخدام علامات التبويب المخصصة في Divi

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

دعنا نذهب اليها.

معاينة

قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

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

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

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

تنزيل مجاني

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

تحميل

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

1. بناء هيكل العنصر

أضف القسم رقم 1

لون الخلفية

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

• لون الخلفية: # fffbf2

تباعد

انتقل إلى علامة تبويب تصميم القسم وقم بإزالة جميع الحشوة السفلية الافتراضية.

• الحشو السفلي: 0 بكسل

الحدود

بعد ذلك ، قم بتطبيق حد مخصص.

• عرض الحدود: 1vw
• لون الحدود: # fffbf2

مربع الظل

قم بتضمين ظل الصندوق أيضًا.

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

فهرس Z.

وأكمل إعدادات القسم عن طريق زيادة فهرس z في علامة التبويب خيارات متقدمة.

• الفهرس Z: 12

أضف الصف رقم 1

هيكل العمود

تابع بإضافة صف جديد إلى القسم باستخدام بنية العمود التالية:

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• العرض الأقصى: 1380 بكسل

تباعد

أضف بعض قيم التباعد المخصصة بعد ذلك.

• الهامش الأعلى: 3٪
• الهامش السفلي: 3٪
• الحشوة اليسرى: 1٪
• الحشوة اليمنى: 1٪

أضف وحدة نصية إلى العمود

أضف محتوى H1

حان الوقت لإضافة وحدات ، بدءًا من وحدة نصية تحتوي على بعض محتوى H1 من اختيارك.

إعدادات نص H1

قم بتغيير إعدادات نص H1 للوحدة وفقًا لذلك:

• خط العنوان: الغاق Garamond
• وزن خط العنوان: غامق
• حجم نص العنوان:
  • سطح المكتب: 60 بكسل
  • الجهاز اللوحي: 42 بكسل
  • الهاتف: 36 بكسل

إضافة وحدة Divider إلى العمود

الرؤية

الوحدة التالية التي سنضيفها هي وحدة Divider Module. تأكد من تمكين خيار "إظهار الحاجز".

• إظهار الحاجز: نعم

خط

انتقل إلى علامة تبويب تصميم الوحدة وتغيير لون الخط.

• لون الخط: # 000000

تحجيم

قم بتعديل إعدادات التحجيم أيضًا.

• وزن الحاجز: 2 بكسل
• العرض الأقصى: 150 بكسل
• الارتفاع: 2 بكسل

تباعد

وأكمل إعدادات الوحدة بإضافة بعض الهامش العلوي لإعدادات التباعد.

• الهامش الأعلى: 4٪

أضف الصف رقم 2

هيكل العمود

إلى الصف التالي. استخدم هيكل العمود التالي:

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• العرض الأقصى: 1380 بكسل

تباعد

قم بإزالة جميع الحشو الافتراضي العلوي والسفلي أيضًا.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

أضف وحدة نصية # 1 إلى العمود

أضف محتوى H3

أضف وحدة نصية أولى إلى الصف مع بعض محتوى H3 من اختيارك.

لون الخلفية

أضف لون خلفية بيضاء.

• لون الخلفية: #ffffff

إعدادات نص H3

بعد ذلك ، قم بتعديل إعدادات نص H3 وفقًا لذلك:

• خط العنوان 3: كارلا
• وزن خط العنوان 3: غامق
• نمط خط العنوان 3: أحرف كبيرة
• العنوان 3 محاذاة النص: الوسط
• حجم نص العنوان 3: 15 بكسل
• العنوان 3 تباعد الأحرف: 4 بكسل

تحجيم

قم بتغيير العرض عبر أحجام الشاشات المختلفة أيضًا.

• عرض:
  • سطح المكتب: 22٪
  • الجهاز اللوحي والهاتف: 44٪

تباعد

بعد ذلك ، أضف بعض قيم التباعد المخصصة.

• الهامش الأيمن: 1٪
• الحشوة العلوية: 30 بكسل
• الحشو السفلي: 20 بكسل
• الحشوة اليسرى: 5٪
• الحشوة اليمنى: 5٪

الحدود

أضف حدًا.

• عرض الحدود: 1 بكسل

مربع الظل

قم بتضمين ظل الصندوق أيضًا.

• مربع الظل الوضع الرأسي: 0 بكسل
• لون الظل: # fff3dd
• موضع ظل المربع: الظل الداخلي

العنصر الرئيسي CSS

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

display: inline-block;

استنساخ وحدة النص 3x

بمجرد الانتهاء من أول وحدة نصية ، يمكنك استنساخها ثلاث مرات.

تغيير المحتوى

تأكد من تغيير المحتوى في كل نسخة مكررة.

أضف القسم رقم 2

تباعد

أضف قسمًا آخر أسفل القسم السابق مباشرةً ، وافتح إعدادات القسم وقم بتطبيق بعض الحشوة العلوية والسفلية.

• الحشوة العلوية: 100 بكسل
• الحشو السفلي: 100 بكسل

أضف الصف رقم 1

هيكل العمود

تابع بإضافة صف جديد باستخدام بنية العمود التالية:

تحجيم

افتح إعدادات الصف ، وانتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات الحجم على النحو التالي:

• استخدام عرض مزراب مخصص: نعم
• عرض المزراب: 2
• العرض الأقصى: 1380 بكسل

أضف وحدة Toggle Module # 1 إلى العمود

إضافة محتوى

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

إعدادات الرمز

انتقل إلى علامة تبويب تصميم الوحدة وقم بتغيير إعدادات الرمز.

• لون الأيقونة: # 000000
• استخدام حجم رمز مخصص: نعم
• حجم خط الأيقونة: 24 بكسل

تبديل الإعدادات

قم بتعديل إعدادات التبديل أيضًا.

• فتح تبديل لون الخلفية: # fffbf2
• مغلق تبديل لون الخلفية: #ffffff

إعدادات نص العنوان

بعد ذلك ، قم بتطبيق بعض الأنماط المخصصة على العنوان.

• فتح لون نص العنوان: # 333333
• لون نص العنوان: # 333333
• مستوى عنوان العنوان: H4
• خط العنوان: الغاق Garamond
• وزن خط العنوان: غامق
• حجم نص العنوان:
  • سطح المكتب: 36 بكسل
  • الجهاز اللوحي: 34 بكسل
  • الهاتف: 28 بكسل

إعدادات نص العنوان المغلق

نحن نغير لون نص العنوان المغلق أيضًا.

• لون نص العنوان المغلق: # 333333

إعدادات النص الأساسي

بعد ذلك ، سنقوم بتصميم النص الأساسي.

• خط الجسم: كارلا
• حجم النص الأساسي: 17 بكسل
• ارتفاع خط الجسم: 1.9em

تباعد

سنضيف بعض قيم التباعد سريعة الاستجابة أيضًا.

• الحشوة العلوية:
  • سطح المكتب: 2٪
  • الجهاز اللوحي: 4٪
  • الهاتف: 6٪
• الحشوة السفلية:
  • سطح المكتب: 2٪
  • الجهاز اللوحي: 4٪
  • الهاتف: 6٪
• الحشوة اليسرى: 5٪
• الحشوة اليمنى: 5٪

الحدود

بعد ذلك ، سنقوم بتغيير لون الحدود.

• لون الحدود: # 000000

تبديل Content CSS

وسنكمل إعدادات الوحدة النمطية عن طريق إضافة سطر واحد من كود CSS إلى منطقة تبديل المحتوى في علامة التبويب المتقدمة.

margin-top: 30px;

استنساخ تبديل الوحدة عدة مرات كما هو مطلوب

بمجرد الانتهاء من أول وحدة Toggle Module ، يمكنك استنساخها عدة مرات كما تريد.

تغيير المحتوى

تأكد من تغيير كل المحتوى المكرر.

تغيير حالة تبديل الوحدة النمطية # 1

بعد ذلك ، افتح وحدة Toggle Module الأولى مرة أخرى وقم بتغيير الحالة إلى "Open".

• الدولة: فتح

استنساخ الصف بالكامل 3x

الآن بعد أن أصبح لدينا مجموعتنا الأولى من Toggle Modules ، يمكننا استنساخ الصف بأكمله ثلاث مرات. في المجموع ، لدينا الآن 4 صفوف تحتوي على وحدات Toggle Modules. يتطابق هذا مع عدد الوحدات النصية في الصف الثاني من القسم رقم 1.

تغيير المحتوى

تأكد من تغيير المحتوى في كل صف مكرر.

أضف وظيفة

أضف معرفات CSS متتالية إلى وحدات النص في الصف رقم 2 من القسم رقم 1

الآن بعد أن أصبح لدينا جميع العناصر في مكانها الصحيح ، حان الوقت لتطبيق الوظيفة. سوف نتأكد من أنه بمجرد النقر فوق وحدة نصية في الصف رقم 2 من القسم رقم 1 ، يتم عرض تبديل الأسئلة الشائعة المقابل. افتح كل وحدة من وحدات النص على حدة واستخدم معرّفات CSS المتتالية التالية:

• وحدة النص رقم 1: faq-item-1
• وحدة النص رقم 2: faq-item-2
• وحدة النص رقم 3: faq-item-3
• وحدة النص رقم 4: faq-item-4

أضف معرفات CSS متتالية إلى الصفوف في القسم رقم 2

بعد ذلك ، سنطبق معرّفات CSS على كل صف يحتوي على Toggle Modules. نحن نتبع نفس الترتيب المتتالي.

• الصف الأول: faq-tab-1
• الصف الثاني: faq-tab-2
• الصف الثالث: faq-tab-3
• الصف الرابع: faq-tab-4

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

لجعل الوظائف تعمل ، سنستخدم بعض أكواد CSS و JQuery المخصصة. لإضافة الرمز إلى صفحتنا ، سنقوم بإدخال وحدة رمز جديدة في الصف رقم 1 من القسم رقم 1 ، أسفل وحدة Divider مباشرةً. تأكد من إضافة علامات النمط والنص مسبقًا.

أضف كود CSS

بعد ذلك ، انسخ رمز CSS التالي والصقه بين علامات الأنماط:

[id*="faq-item"] {
cursor: pointer; 
}

[id*="faq-tab"]{  
position: absolute!important;
top: 0px;
bottom: auto;
left: 50%;
right: auto;
transform: translateX(-50%);
}


.active-faq-item {
color: #6b63dd !important;
background-color: #fff;
}

.hide-faq-tab{  
visibility: hidden;
opacity: 0;  
}

.show-faq-tab{
visibility: visible !important;
opacity: 1 !important;
z-index: 12;
  
position: relative !important;
left: 0 !important;
transform: translateX(0%) !important;
}
  
.faq-item-active {
background-color: #000 !important;
color: #fff !important;
}

.faq-item-active h3{
color: #fff !important;
}

أضف كود JQuery

وأكمل البرنامج التعليمي باستخدام الأسطر التالية من كود JQuery بين علامات البرنامج النصي:

jQuery(document).ready(function($){

$('#faq-item-1').addClass('faq-item-active');
$('#faq-tab-1').addClass('show-faq-tab');
$('[id*="faq-tab"]').not('#faq-tab-1').addClass('hide-faq-tab');
 
$('[id*="faq-item"]').click(function() {
 
var selector = $(this).attr('id').replace('item', 'tab');
var $faqSelect  = $('#' + selector);

$('[id*="faq-tab"]').removeClass('show-faq-tab');
$('[id*="faq-tab"]').addClass('hide-faq-tab');
$faqSelect.addClass('show-faq-tab');
 
$('[id*="faq-item"]').removeClass('faq-item-active');
$(this).addClass('faq-item-active');
   
});
});

معاينة

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

افكار اخيرة

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

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