كيفية بناء شريط منزلق ملء الشاشة مخصص مع Divi 5 (تنزيل مجاني)

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

في هذا المنشور ، سنقدم دليلًا خطوة بخطوة لإنشاء شريط تمرير ملء الشاشة باستخدام وحدة Carousel Group. دعنا نغوص في!

فهم وحدة الكاروسيل الجماعية

وحدة Carousel Group هي إضافة متعددة الاستخدامات إلى Divi 5 ، مما يمكّنك من إنشاء شرائح ديناميكية وكرات.

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

الميزات الرئيسية لوحدة carousel المجموعة

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

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

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

كيفية بناء شريط تمرير ملء الشاشة مع وحدة Divi 5's Group Carousel

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

الخطوة 1: إعداد صفحة جديدة

قم بإنشاء صفحة جديدة ، وإضافة عنوان ، وانقر فوق استخدام Divi Builder للبدء.

عندما يتم فتح البناء المرئي ، اختر البناء من نقطة الصفر ضمن خيارات إنشاء الصفحة الخاصة بك .

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

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

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

مع وجود إعدادات القسم ، انقر فوق أيقونة Green + لإضافة صف جديد.

حدد صف العمود المفرد تحت أعمدة متساوية .

بعد ذلك ، أضف وحدة مجموعة carousel إلى الصف.

قبل إضافة المحتوى ، يجب علينا إعداد الوحدة النمطية للصف والمجموعة مع Flexbox وضوابط التباعد.

الخطوة 2: تكوين إعدادات الصف

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

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

أيضا ، تعيين عناصر محاذاة إلى مركز الصف.

اضبط العرض والعرض القصوى في علامة التبويب التحجيم إلى 100 ٪.

في علامة تبويب التباعد ، قم بتعيين الهامش العلوي والسفلي وحشو إلى 0 بكسل .

الخطوة 3: تكوين إعدادات مجموعة carousel

بعد ذلك ، سنقوم بتكوين إعدادات مجموعة carousel. قم بتوسيع قائمة منسدلات إعدادات carousel في علامة التبويب المحتوى. يمكنك تبديل الدوران التلقائي ، واختيار سرعة الدوران التلقائي في الإعداد الافتراضي لـ 2000ms ، وتمكين التوقف عند التحوم .

في علامة التبويب Elements ، تعطيل SHOW SHOW DOT MAVINAGE و SEEM SHOW ARROWS . يمكنك أيضًا اختيار أيقونة مخصصة للسهام اليمنى واليسرى.

انقر لتوسيع علامة تبويب الأسهم في علامة تبويب التصميم. قم بتعيين #FFFFFF كون السهم ، واترك حجم السهم عند الافتراضي 48 بكسل ، وترك موضع السهم في الداخل .

قم بتوسيع علامة تبويب الخلفية وقم بتعيين #000000 كون الخلفية .

الخطوة 4: نمط المجموعة الأولى

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

قم بتوسيع القائمة المنسدلة الخلفية وحدد علامة التبويب التدرج .

انقر فوق منزلق التدرج الأول لتعيين لون جديد. أدخل #EFB648 في حقل الألوان .

بعد ذلك ، انقر في شريط التدرج الثاني 2 ، وقم بتعيين #F28F52 كأنه اللون.

في حقل نوع التدرج ، حدد التعميم .

بعد ذلك ، انتقل إلى علامة تبويب التصميم . قم بتوسيع علامة تبويب التباعد وقم بتعيين حشوة بنسبة 5 ٪ إلى أعلى وأسفل المجموعة.

الخطوة 5: إضافة محتوى إلى المجموعة الأولى

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

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

أضف وحدة العنوان

حدد وأدخل وحدة العنوان .

قم بتوسيع القائمة المنسدلة النصية وأدخل Orange Juice كعنوان .

انتقل إلى علامة التبويب التصميم . قم بتوسيع قائمة المنسدلة النصية . حدد H1 كمستوى العنوان ، استخدم Bebas Neue كخط العنوان ، قم بتعيين نمط خط العنوان على الحرف الكبيرة ، ومحاذاة نص العنوان إلى المركز ، ولون النص العنوان إلى #FFFFFF ، وحجم نص العنوان إلى 20EM .

استخدم عناصر التحكم المستجيبة لـ Divi 5 لضبط حجم نص العنوان إلى 15EM على الجهاز اللوحي ، و 8EM على الهاتف المحمول.

أضف صفًا جديدًا

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

انقر فوق علامة تبويب الصف الجديد . تحت أعمدة الإزاحة ، اختر خيار 1/4 + 1/2 + 1/4.

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

أضف وحدة العنوان

حدد وحدة العنوان وأضفها إلى العمود الأول .

امنح العنوان عنوانًا واتجه إلى علامة تبويب التصميم . قم بتوسيع قائمة المنسدلة النصية . حدد H2 لمستوى العنوان ، Bebas Neue كخط العنوان ، وأحرف كبيرة كأسلوب خط العنوان ، و #FOFFFFF كون النص العنوان ، و 6EM كحجم نص العنوان .

استخدم عناصر التحكم المستجيبة لـ Divi لضبط حجم نص العنوان إلى 4EM .

أضف وحدة نصية

أضف وحدة نصية أسفل العنوان في العمود الأول. أدخل بعض نص الجسم ، وتبديل إلى علامة تبويب التصميم . حدد Poppins كخط نص ، وضبط لون النص على #FFFFFF ، وحجم النص إلى 16 بكسل .

إضافة وحدة زر

أضف وحدة زر تحت وحدة النص في العمود الأول. قم بتعيين نص إلى الزر في علامة التبويب المحتوى وقم بتبديل علامة تبويب التصميم. قم بتوسيع قائمة القائمة المنسدلة وتمكين استخدام أنماط مخصصة للزر . ثم قم بتوسيع قائمة خلفية الأزرار . في علامة التبويب لون الخلفية ، أضف #528bf2 كون الزر.

استخدم عناصر تحكم Divi 5 لتحوم لتعيين #6A7C9D كون تحوم للزر.

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

قم بتوسيع القائمة المنسدلة النص . قم بتعيين Poppins كخط الزر ، و #ffffff كون نص للزر ، و 16px كحجم نص الزر .

قم بتوسيع إعدادات أيقونة الزر وقم بتعطيل تبديل رمز زر العرض .

أخيرًا ، قم بتوسيع قائمة القائمة المنسدلة . أضف حشوة 15 بكسل إلى الأعلى والسفلي و 35 بكسل إلى اليسار واليمين.

أضف وحدة صورة

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

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

حدد الماوس أدخل عندما تظهر الخيارات.

أدخل إمالة الصورة في حقل تسمية المسؤول ، حدد الماوس أدخل كحدث الزناد ، وحركة الماوس المرآة كعمل تأثير ، وحدد الصورة كوحدة الهدف ، والميل كنوع الحركة ، و 15 للحساسية. أخيرًا ، انقر فوق زر حفظ التفاعل لتمكين التفاعل.

أضف وحدة عدادات الشريط

انقر لإضافة وحدة عدادات الشريط في العمود الثالث. في علامة التبويب المحتوى. في علامة تبويب العناصر ، تعطيل نسبة العرض .

بعد ذلك ، قم بتوسيع علامة تبويب الخلفية. أضف #ffffff كون الخلفية.

تبديل إلى علامة التبويب التصميم وتوسيع قائمة القائمة المنسدلة . في حقل لون الخلفية ، أضف #528BF2 كون.

قم بتوسيع قائمة المنسدلة النصية . في حقل خط العنوان ، حدد Bebas Neue . حدد #FFFFFF كون نص العنوان و 22 بكسل كحجم نص العنوان .

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

أدخل النص في حقل العنوان وقم بتعيين حقل النسبة المئوية إلى 75 .

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

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

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

الخطوة 6: إضافة الرسوم المتحركة

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

بعد ذلك ، انقر لتوسيع الصف الثاني (صف ثلاثة عمود). انقر في إعدادات العمود الأول.

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

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

الخطوة 7: صفوف متداخلة

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

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

عندما تقوم بمعاينة التمرير ، سترى أن الصف الثاني قد تم دفعه إلى التداخل قليلاً في الصف الأول ، مما يخلق تأثير تداخل لطيف.

الخطوة 8: اختبار الاستجابة

قبل نسخ المجموعة الأولى ، من الجيد اختبار استجابة التصميم. استخدم نقاط التوقف المستجيبة القابلة للتخصيص Divi 5 لإجراء أي تعديلات.

في Divi 5 ، يوجد الآن 7 نقاط توقف بدلاً من Divi 4's 3. يمكنك استخدام نقاط التوقف هذه لضمان يبدو تخطيطك مذهلاً على أي حجم شاشة. انتقل عبر نقاط التوقف وقم بالتعديلات اللازمة قبل نسخ المجموعة الأولى.

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

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

الخطوة 9: مجموعات التكرار

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

قبل النسخ ، قم بتعيين تسمية المسؤول للمجموعة لجعل تحديدها أسهل.

من هناك ، قم بتغيير العنوان ، وقم بتبديل الصورة ، وتعيين تدرج خلفي جديد للمجموعة. استخدم #FC6A3C لأول مرة التدرج المنزلق و #C52F00 للثاني.

ستحتاج أيضًا إلى تغيير الزر ولون عداد الألوان إلى #3DFCCA و #C52F00 على Hover.

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

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

التغييرات في المجموعة الثالثة

للمجموعة الثالثة ، استخدم #71B953 و #617A56 لتدرج الخلفية .

للحصول على وحدات عدادات الزر والبار ، استخدم #BA54B3 و #654F64 للون الذي تحوم.

ستحتاج أيضًا إلى تغيير تأخير الرسوم المتحركة على وحدة العنوان والأعمدة الأولى والثالثة من الصف الثاني إلى 4000 مللي ثانية .

التغييرات في المجموعة الرابعة

لتدرج الخلفية ، استخدم #AD52B7 و #AD52B7 .

استخدم #83b853 و #83b853 لوحدات العداد والزر.

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

الخطوة 10: معاينة وحفظ شريط التمرير

الخطوة الأخيرة هي حفظ التصميم ومعاينةه لضمان عدم تفويت أي خطوات. في البناء المرئي ، انقر فوق الزر "حفظ" في الزاوية اليمنى العليا.

انقر فوق زر المعاينة لفتح التصميم في علامة تبويب جديدة.

بمجرد الانتهاء ، يجب أن يبدو منزلق مثل هذا:

هذا كل شيء! تعد وحدة المجموعة Carousel إضافة جديدة متعددة الاستخدامات إلى Divi 5. إنها تتيح لك إنشاء متزلجات و carousels لأي مشروع وتوفر خيارات تخصيص غير محدودة.

قم بتنزيل تخطيط الكاروسيل ملء الشاشة

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

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

تنزيل مجانًا

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

تحميل

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

بناء أول كاروسيل الخاص بك في Divi 5 اليوم

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

قم بتنزيل أحدث Divi 5 Public Alpha ، وتجربة مجموعة Carousel Group ، وأخبرنا برأيك في التعليقات أو على قنوات التواصل الاجتماعي الخاصة بنا.