كل ما تحتاج لمعرفته عن وحدة Divi 5's Group Carousel

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

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

ما هي وحدة مجموعة carousel؟

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

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

الميزات الرئيسية

تم تصميم وحدة مجموعة Carousel على أساس Divi 5 المحسّن ، مما يضمن أوقات التحميل السريعة والتحولات السلسة. تتيح لك واجهة Divi 5 لسحب وإفلات إضافة وحدات بسهولة إلى انزلاقات ، مع وجود عناصر تحكم مستجيبة لتخطيطات المكتب على سطح المكتب ، الجهاز اللوحي ، والهاتف المحمول ، مع الحفاظ على الأداء السريع.

شرائح قابلة للتخصيص

توفر وحدة المجموعة Carousel تحكمًا كاملاً في عدد المنزلقات ومحتواها وإعدادات الرسوم المتحركة. يمكنك ضبط عمليات انتقالات الشرائح والتوقيت والملاحة لإنشاء تجربة مستخدم سلسة تتطابق مع رؤيتك.

المحتوى الديناميكي مع Loop Builder

مدمجة مع Builder Loop Divi 5 ، تدعم الوحدة الكرات الديناميكية بناءً على المنشورات أو المصطلحات أو بيانات المستخدم. على سبيل المثال ، يمكنك إنشاء carousel شهادة باستخدام أنواع المنشورات المخصصة والحقول المخصصة المتقدمة (ACF) ، وسحب مراجعات العميل تلقائيًا أو دراسات الحالة دون الحاجة إلى التحديثات اليدوية.

مرونة التصميم

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

كيفية استخدام وحدة مجموعة carousel

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

في علامة تبويب المحتوى ، انقر لتوسيع قائمة المنسدلة لإنشاءات Carousel .

تمكين الدوران التلقائي ، ووضع المركز ، وتعيين الشرائح لإظهارها على 3 .

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

تعيين التصميم للمجموعة الأولى

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

في علامة تبويب المحتوى ، قم بتوسيع قائمة القائمة المنسدلة في الخلفية . انقر فوق علامة تبويب صورة الخلفية ثم انقر فوق +إضافة صورة خلفية لإضافة صورة إلى المجموعة.

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

بعد ذلك ، قم بتوسيع قائمة منسدلة التباعد وأضف هامشًا بنسبة 5 ٪ إلى اليسار واليمين من مجموعتنا. هذا سيضيف بعض غرفة التنفس بين المجموعات في الكاروسيل.

اضبط الحشوة العلوية على 100 ٪. تطبيق حشوة 25 بكسل على اليسار واليمين.

أضف محتوى إلى المجموعة الأولى

يمكننا تحويل انتباهنا إلى إضافة محتوى إلى مجموعتنا. انقر فوق أيقونة Black + وأضف وحدة مقسم .

انتقل إلى علامة التبويب التصميم . قم بتوسيع قائمة القائمة المنسدلة وتغيير اللون إلى #FFFFFF .

بعد ذلك ، قم بتوسيع علامة تبويب التحجيم. ضبط وزن المقسم على 4 بكسل والعرض إلى 15 ٪ .

بعد ذلك ، أضف وحدة العنوان إلى المجموعة. إعطاء عنوان العنوان.

التبديل إلى علامة التبويب التصميم . ضمن نص العنوان ، قم بتعيين مستوى العنوان على H2 (أو أي عنوان آخر تريده) ، حدد Inter لخط العنوان ، واختر الضوء لوزن الخط ، و #FFFFFF للون النص ، و 2EM لحجم نص العنوان .

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

إضافة مجموعات إضافية

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

بعد تكرار المجموعة ، يجب أن تبدو مجموعة مجموعة المجموعة الخاصة بك هكذا.

بينما نحن هنا ، من الجيد إعطاء كل مجموعة اسمًا فريدًا حتى يكون من الأسهل تحديدها. انقر فوق أيقونة إعدادات المجموعة الأولى وانتقل لأسفل إلى تسمية المسؤول . اسم المجموعة اليونان.

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

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

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

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

تخصيص المجموعات والمجموعات النشطة

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

الآن بعد أن أنشأنا مجموعة جماعية ، توجه إلى علامة تبويب التصميم في إعدادات Carousel الرئيسية.

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

توسيع علامة تبويب الخلفية . سنقوم بتطبيق التدرج الخفيف على علامات التبويب غير النشطة للتأكد من أن النص مقروء. اضبط أول توقف التدرج إلى #000000 مع عتامة 0 ٪ . ضبط شريط التمرير قليلا على اليمين. تمكين التدرج المكان فوق تبديل صورة الخلفية .

قم بتعيين توقف التدرج الثاني إلى #000000 مع عتامة 40 ٪ .

تمكين التدرج المكان فوق تبديل صورة الخلفية .

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

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

تأكد من تمكين التدرج المتدرج فوق تبديل صورة الخلفية .

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

تخصيص التصميم المستجيب

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

قم بتمكين نقاط التوقف التي تريدها وانقر فوق حفظ للمتابعة.

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

أخيرًا ، انقر فوق زر المعاينة في الجزء العلوي الأيسر من الشاشة لعرض مجموعة Carousel في علامة تبويب جديدة.

بمجرد الانتهاء من ذلك ، يجب أن تبدو مجموعتك المشتركة مشابهة للفيديو أدناه.

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

التكامل مع منشئ حلقة Divi 5

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

من خلال دمج Loop Builder مع مجموعة Carousel ، يمكّن Divi 5 المستخدمين من صياغة Carousels المتطورة التي تعتمد على المحتوى مع الحد الأدنى من العمل اليدوي ، مما يجعلها ميزة بارزة لتصميم الويب الديناميكي.

يمكّن شركة Loop Builder مجموعة Carousel من الحلقات ديناميكيًا من خلال المنشورات أو المصطلحات أو بيانات المستخدم ، مما يؤدي إلى إنشاء Carousels التي تعكس محتوى موقعك تلقائيًا. نظرًا لأن Loop Builder يسحب البيانات مباشرة من قاعدة بيانات WordPress الخاصة بك ، يمكنك بسهولة عرض منشورات المدونة أو فئات المنتجات أو ملفات تعريف المستخدمين.

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

أمثلة على العالم الحقيقي لوحدة مجموعة carousel

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

عرض كامل العرض / شريط التمرير ملء الشاشة

في هذا المثال ، أنشأنا شريط تمرير كامل العرض/الشاشة الكاملة لتوزيع هزات لمتجر الآيس كريم. قمنا بتعيين carousel لعرض شريحة واحدة في وقت واحد ، كل منها يحتوي على صورة خلفية ، وعاملين ، وزر دعوة إلى اتخاذ إجراء. لقد قمنا أيضًا بتعيين الرسوم المتحركة للتقدم إلى الشريحة التالية بعد تأخير 3 ثوان. يمكنك تحقيق هذا المظهر من خلال تعيين مجموعة Carousel والقسم إلى 100VH.

عرض أعضاء الفريق

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

تعرض الفئة

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

شهادات

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

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

تنزيل مجانًا

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

تحميل

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

فتح إمكانيات إبداعية مع وحدة Divi 5's Carousel

تعد وحدة Divi 5's Group Carousel إضافة قوية تفتح إمكانيات جديدة لإنشاء مواقع Divi الديناميكية. من إنشاء انزلاقات منتجات جذابة إلى شهادات ، تجعل هذه الوحدة إضافة محتوى تفاعلي إلى مواقع Divi أسهل.

الآن بعد أن مهدت مؤسسة Divi 5 التي تم تجديدها الطريق لمزيد من الميزات ، إنه الوقت المثالي للغوص فيه! هل جربت مجموعة Carousel Group حتى الآن؟ أخبرنا في التعليقات أدناه.