تسليط الضوء على منتج Divi: DiviGrid

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

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

هيا بنا نبدأ!

تثبيت DiviGrid

قبل أن تبدأ، تأكد من تثبيت سمة Divi وتنشيطها على موقع الويب الخاص بك.

يمكن تثبيت DiviGrid تمامًا مثل أي مكون إضافي لـ WordPress. افتح صفحة المكونات الإضافية في لوحة تحكم WordPress، ثم انقر فوق "إضافة جديد".

انقر فوق تحميل البرنامج المساعد في الجزء العلوي، ثم حدد ملف البرنامج المساعد وانقر فوق التثبيت الآن.

بمجرد التثبيت، قم بتنشيط البرنامج المساعد.

إعدادات DiviGrid

بمجرد تثبيت DiviGrid وتنشيطه، سترى علامة تبويب جديدة لـ DiviGrid في لوحة تحكم WordPress. هنا، يمكنك إدارة وحدات DiviGrid النشطة والوصول إلى الروابط لعرض وتنزيل القوالب التجريبية المضمنة. بالإضافة إلى ذلك، هناك بعض الروابط المفيدة للوثائق والدعم.

وحدات DiviGrid

يأتي DiviGrid مع أكثر من 30 وحدة. افتح صفحة باستخدام Divi Builder وانقر على أيقونة علامة الجمع الرمادية لإضافة وحدة جديدة. يجب أن تشاهد وحدات DiviGrid المتوفرة في قائمة الوحدات.

دعونا نلقي نظرة فاحصة على كل من الوحدات المضمنة في DiviGrid.

دعاية متقدّمة

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

إليك العرض التوضيحي Advanced Blurb 2 مع تأثير التمرير الفريد.

عنوان متقدم

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

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

دائرة الصور المتقدمة

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

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

شخص متقدم

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

هذا هو الإصدار التجريبي الخامس من Advanced Person، مع صورة مستديرة للملف الشخصي تعرض صورة بديلة عند التمرير.

قائمة الأسعار المتقدمة

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

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

علامة التبويب المتقدمة

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

هذا هو Demo Layout 8، مع علامات التبويب الأرجوانية التي تظهر عند النقر باستخدام الرسوم المتحركة الانتقالية.

قبل وبعد الصورة

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

هنا قبل وبعد تخطيط الصورة 1.

مدونة دائري

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

هذا هو الإصدار التجريبي 3 من Blog Carousel، مع نوع دائري من الشرائح. وهي تحتوي على صورة على اليسار، ومعلومات حول المنشور في المنتصف، متبوعًا بعنوان المدونة والمقتطف. على اليمين توجد نقاط التنقل.

ساعة العمل

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

إليك تخطيط ساعة العمل 7، الذي يضم وحدتين لساعة العمل مصممتين بخلفيات ملونة وخط فاصل منقط.

شبكة المحتوى

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

هذا هو Content Grid Layout 20، المصمم كقسم تنقل لمتجر التجارة الإلكترونية.

الصورة العائمة

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

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

قائمة الطعام

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

إليك تخطيط قائمة الطعام 6، مع قائمة مكونة من عمودين تعرض عنوان العنصر والعنوان الفرعي والسعر وزر الشراء.

نص متدرج

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

فيما يلي مثال 2 لوحدة النص المتدرج. وهو يتميز ببادئة وبادئة بخلفيات متدرجة ونص لاحقة بمقطع خلفية متحرك.

خلية النحل

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

هذا هو مثال قرص العسل 9، الذي يعرض صورة عند التمرير.

صورة الأكورديون

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

هذا هو Image Accordion Demo Layout 5. هذا تخطيط بسيط يكشف الصورة عند التمرير بحدود متحركة.

تعليق على الصورة

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

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

صورة دائري

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

هذا هو Image Carousel Layout 1، الذي يتميز بترقيم الصفحات على شكل نقطي على اليسار. عند التمرير، يتم الكشف عن العنوان والسعر من خلال تراكب.

نقطة اتصال الصورة

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

إليك Image Hotspot Demo Layout 3، مع تلميحات أدوات برتقالية مع أيقونات. عند النقر، يتم فتح تلميحات الأدوات للكشف عن معلومات حول المنتج.

نافذة منبثقة مضمنة

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

هذا هو Inline Popup Layout 25، مع غلاف صورة سداسي الشكل ونمط تحريك تكبير/تصغير الصورة. عند النقر، تظهر النافذة المنبثقة المضمنة أدناه مع صورة ومحتوى وأيقونات اجتماعية وزر.

البطاقة التفاعلية

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

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

معرض مبرر

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

هذا هو Justified Gallery Demo Layout 9. عند التمرير، يتم تكبير الصورة بزاوية، ويظهر الحد. عند النقر، يمكنك عرض الصورة في العرض المبسط.

شبكة القائمة

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

هذا هو List Grid Layout 32، مع رمز في الأعلى وشارة على اليمين تحتوي على الرقم.

معرض الماسونية

يعد Masonry Gallery خيارًا آخر لعرض صورك في تخطيط المعرض. يمكنك فتح الصور في العرض المبسط، وإضافة ترقيم الصفحات، وتطبيق تأثيرات التراكب والتمرير، والمزيد. كل عنصر قابل للتخصيص بالكامل مع إعدادات التصميم.

هنا هو Masonry Gallery Layout 2. وهو يتميز بتراكب ملون وحدود بيضاء عند التمرير.

زر متعدد

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

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

شبكة البريد

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

هذا هو المثال 14 لوحدة Post Grid. وهو يعرض الصورة المميزة كخلفية لعنصر المنشور مع تراكب داكن. لكل مشاركة، يمكنك رؤية رابط الفئة والمؤلف والتاريخ والعنوان وقراءة المزيد.

قم بتمرير صور متعددة

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

هذا هو Scroll Multiple Image Demo Layout 7، الذي يعرض المشروبات في تخطيط تمرير أفقي مع العنوان والسعر.

تمرير صورة واحدة

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

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

حصة الاجتماعي

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

هنا هو التخطيط التجريبي للمشاركة الاجتماعية 1.

تصنيف النجوم

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

يعرض نموذج التصنيف بالنجوم للتخطيط 3 تصنيفات النجوم إلى جانب عناصر القائمة.

إمالة بطاقة الصورة

باستخدام وحدة Tilt Image Card Module، يمكنك إنشاء تصميمات بطاقة تحتوي على صورة ومحتوى وزر وتمكين تأثير الإمالة عند التمرير، مما يضيف التفاعل إلى تصميمك. يمكنك أيضًا تمكين خيار لإظهار المحتوى عند التمرير.

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

مكان شراء DiviGrid

DiviGrid متاح في Divi Marketplace. يكلف 59 دولارًا للاستخدام غير المحدود للموقع وسنة واحدة من الدعم والتحديثات. يتضمن السعر أيضًا ضمان استعادة الأموال لمدة 30 يومًا.

افكار اخيرة

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

كنا نحب أن نسمع منك! هل قمت بتجربة DiviGrid؟ اسمحوا لنا أن نعرف ما هو رأيك في ذلك في التعليقات!