تسليط الضوء على البرنامج المساعد Divi: Divi Accordions Plus

Divi Accordions Plus هي وحدة تابعة لجهة خارجية لـ Divi Builder تضيف منشئ أكورديون جديدًا. استخدم العديد من وحدات Divi Accordions Plus معًا على صفحة واحدة ويعملون كأكورديون واحد ، لذلك عندما يفتح أحدهم الآخر يغلق. صمم الأكورديون معًا أو بشكل فردي ، واعرض الرموز والصور ، وغير ذلك الكثير. في هذا المنشور ، سنلقي نظرة على Divi Accordions Plus ، ونرى ما يمكن أن يفعله ، ونرى مدى سهولة استخدامه لمساعدتك في تحديد ما إذا كان المنتج المناسب لاحتياجاتك. سنستخدم Poke Restaurant About Page Layout كخلفية لهذا البرنامج التعليمي. لذلك إذا لم تقم بتنزيله بالفعل ، فيمكنك الحصول عليه الآن من خلال عضوية Divi الخاصة بك.

ديفي الأكورديون زائد وحدة

يضيف Divi Accordions Plus وحدة جديدة إلى Divi Builder. ما عليك سوى إضافة الوحدة في أي مكان تريده ضمن تخطيطات Divi الخاصة بك.

وحدات فرعية الأكورديون

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

المحتوى

أضف عنوانًا وعنوانًا فرعيًا (يمكنك تعطيله إذا أردت) ومحتوى أساسي. هذه هي العناصر الرئيسية للأكورديون.

حالة العنصر

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

إعدادات تصميم وحدات أكورديون الفرعية من ديفي أكورديون

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

الرمز الأيسر

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

في هذا المثال ، قمت بتعديل لون الخلفية والأيقونة.

الأيقونة اليمنى

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

في هذا المثال ، قمت بتحديد رمز مختلف ، وقمت بتغيير لون الأيقونة ، ولون الخلفية ، وأضفت حدًا منمقًا.

إعدادات محتوى Divi Accordions Plus

تتضمن علامة التبويب "المحتوى" إعدادات Divi الأساسية واثنين من الإعدادات الخاصة بـ Divi Accordions Plus.

سرعة

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

الوضع

يغير الوضع طريقة عمل الأكورديون.

وضع الأكورديون

يسمح لك وضع الأكورديون بالاختيار بين عدة تبديل نشط وتبديل نشط واحد. متعددة Active Toggles يترك جميع مفاتيح التبديل مفتوحة حتى يغلقها المستخدم. يوضح المثال أدناه عدة تبديل نشط.

تسمح ميزة Single Active Toggles بتبديل واحد مفتوح فقط في كل مرة. يغلق مفتاح التبديل المفتوح عندما يختار المستخدم تبديلًا جديدًا. يعرض هذا المثال تبديل نشط واحد.

وضع الأكورديون العالمي

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

في المثال أدناه ، أضفت وحدة Divi Accordions Plus أخرى وقمت بتمكين وضع الأكورديون العالمي لكليهما. عندما أفتح أكورديونًا في إحدى الوحدات ، يتم إغلاق الأكورديون المفتوح في الوحدة الأخرى.

إعدادات تصميم Divi Accordions Plus

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

رأس

يتحكم الرأس في لون الخلفية ولون خلفية التبديل المفتوح والتباعد والحدود وظل المربع. في هذا المثال ، قمت بتغيير ألوان الخلفية للتبديل المفتوح والمغلق.

الرمز الأيسر

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

الأيقونة اليمنى

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

لقب

يتحكم العنوان في لون خلفية العنوان ، ويفتح لون خلفية التبديل ، والتباعد ، والحد ، وظل المربع.

الجسم

يتحكم النص في نص العنصر والتباعد والحدود وظل المربع. لقد قمت بتعديل الحدود في هذا المثال.

نص العنوان

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

عناوين الجسم

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

نص أساسي

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

عرض نهائي مع مطعم Divi Poke

هذا ما يبدو عليه الأكورديون النهائي في مخطط صفحة About Us لحزمة Divi Poke Restaurant Layout Pack.

ديفي أكورديونز بلس ديمو

تأتي Divi Accordions Plus مع سبعة عروض تجريبية لتبدأ بها.

عرض 1

يتضمن العرض التوضيحي الأول أكورديونًا متعدد الأعمدة بأيقونات متعددة الألوان. الأكورديون لها حدود واحدة ، والمحتوى يحدها من جميع الجوانب.

تجريبي 2

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

العرض 3

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

تجريبي 4

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

تجريبي 5

يستخدم العرض التوضيحي خمسة عناوين وأيقونات حمراء ويتضمن خلفيات بنية للجسم وخلفيات خضراء للعناوين. يتم وضع الأكورديون في عمودين.

تجريبي 6

يستخدم العرض التوضيحي السادس خلفيات رأس زرقاء فاتحة مع لون أزرق داكن لنص العنوان وخلفية الأيقونة للأكورديون المفتوح.

تجريبي 7

يعرض العرض التوضيحي سبعة كل عنصر من عناصر الأكورديون بشكل مستقل مع ظلال مربعة لكل عنصر.

شراء Divi Accordions Plus

يتوفر Divi Accordions Plus في Divi Marketplace مقابل 9 دولارات. يتضمن استخدامًا غير محدود وضمان استرداد الأموال لمدة 30 يومًا وسنة واحدة من الدعم والتحديثات.

خواطر ختامية

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

نريد أن نسمع منك. هل جربت Divi Accordions Plus؟ أخبرنا برأيك في التعليقات.