كيفية استخدام وحدة Toggle على Divi Builder: البرنامج التعليمي

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

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

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

مثال على حالة الاستخدام: صفحة الأسئلة الشائعة

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

باستخدام Visual Builder ، أضف قسمًا جديدًا بصف كامل العرض (عمود واحد). ثم أضف وحدة Divider إلى الصف. ضمن علامة التبويب "المحتوى" في إعدادات وحدة Divider ، حدد خيار "إظهار الحاجز".

في علامة التبويب تصميم ، أدخل الخيارات التالية:

اللون: # 000000 (أسود)
نمط القاسم: متين
موقف فاصل:
مقسم متمركز رأسيًا الوزن: 4 بكسل
الطول: 1

ثم أضف وحدة تبديل أسفل الحاجز الذي أنشأته للتو في نفس الصف. في إعدادات وحدة Toggle ، قم بتحديث ما يلي:

علامة تبويب المحتوى

العنوان: [أدخل لقبك]
المحتوى: [أدخل المحتوى الخاص بك]
الحالة: أغلق
افتح لون الخلفية: #ffffff
مغلق أغلق لون الخلفية: #ffffff
لون الخلفية: #ffffff

علامة تبويب التصميم

لون الأيقونة: # 000000
افتح Toggle Text Color: # 000000
مغلق Toggle Text Color: # 000000
عنوان الخط: Open Sans ، Bold
حجم الخط: 24px
لون نص العنوان: # 000000
هيئة الخط: افتح Sans
حجم خط الجسم: 18px
لون النص الأساسي: # 666666
ارتفاع خط الجسم: 1.6em
استخدم الحدود: نعم
عرض الحد: 0px
حشوة مخصصة: أعلى 2px ، أسفل 2px

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

هذا كل شيئ. لديك الآن قسم أسئلة وأجوبة حديث يستخدم وحدة Toggle لتوحيد أسئلتك وإجاباتك.

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

معلمات محتوى وحدة Toggle

تم تنظيم علامة تبويب محتوى الوحدة النمطية في مجموعات المعلمات التالية (والتي هي أيضًا بديلة!).

نص

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

الجهة

يمكنك اختيار ما إذا كنت تريد أن يظهر زرك مفتوحًا أو مغلقًا بشكل افتراضي مع هذا الإعداد.

السياق

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

علامة المسؤول

بشكل افتراضي ، ستظهر وحدة التبديل الخاصة بك مع ملصق يقرأ "Toggle" في المولد. تسمح لك علامة المسؤول بتغيير هذه العلامة لتسهيل التعرف عليها.

المعلمات تصميم وحدة الروك

تم تجميع معلمات تصميم وحدة التبديل معًا في مفاتيح التبديل المنسدلة التالية ضمن علامة التبويب تصميم.

أيقونة

هذا هو المكان الذي يمكنك فيه تغيير لون رمز التبديل.

نص

يمكنك هنا ضبط لون النص المفتوح والمغلق.

نص العنوان

هنا يمكنك ضبط خط نص العنوان والوزن والحجم واللون والتباعد وارتفاع السطر والمزيد.

نص النص

هنا يمكنك ضبط الخط والوزن والحجم واللون والتباعد وارتفاع الصف والمزيد.

الحدود

هنا يمكنك اختيار استخدام الحدود. وإذا اخترت استخدام حد ، فيمكنك أيضًا تحديد لونه وتغيير عرضه واختيار نمطه.

مباعدة

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

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

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

هذا كل شيء في هذا البرنامج التعليمي ، وآمل أن يسمح لك باستخدام وحدة Divi Toggle بشكل أفضل.

[vc_row center_row = "نعم"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expand "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = ”# 18b69d” custom_hover_background = ”# 118d7a” custom_color = ”# ffffff” custom_hover_color = ”# ffffff” icon_right = ”fa fa-download”] DOWNLOAD DIVI THEME [/ vcex_button] [/ width_column] [= vc_column] / 1 ″] [vcex_button url = ”https://www.elegantthemes.com/affiliates/idevaffiliate.php؟id=2&url=23065&tid40632=tutorials” target = ”blank” layout = ”توسيع” align = ”center” font_family = ”Raleway” font_weight = ”1 ″ style =” flat ”custom_background =” # c700e ”custom_hover_background =” # 4226d8f ”custom_color =” # ffffff ”custom_hover_color =” # ffffff ”icon_right =” fa fa-download ”] تنزيل TEMPLATES DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

كيفية استخدام وحدة Divi Builder Flip