كيفية استخدام Elementor Loop Grid Widget على WordPress مع HappyAddons
نشرت: 2024-11-26يعد تصميم مواقع ويب جذابة بصريًا وجيدة الأداء أمرًا ضروريًا لأي شخص لإنشاء تفاعل وجذب الجماهير وزيادة المبيعات. لتبسيط هذه العملية، تقدم أدوات تصميم الويب مثل Elementor وملحقاتها باستمرار ميزات ووحدات مبتكرة.
تعد Loop Grid أداة جديدة قامت Elementor وملحقاتها بتطويرها وإصدارها لنا مؤخرًا. تتيح لك الأداة المبتكرة إنشاء المحتوى الخاص بك وعرضه في تخطيطات شبكية منظمة بشكل جميل.
لا تقلق إذا كنت لا تعرف الكثير عن هذه القطعة بالتفصيل. في هذا المنشور التعليمي، سنغطي دليلًا خطوة بخطوة حول كيفية استخدام عنصر واجهة المستخدم Elementor Loop Grid على WordPress مع HappyAddons. نأمل أن تجد هذا البرنامج التعليمي مفيدًا ومثيرًا للاهتمام.
ما هي شبكة الحلقة في Elementor؟
تعد Loop Grid أداة Elementor متعددة الوظائف تتيح لك إنشاء تخطيطات ديناميكية لعرض أنواع مختلفة من المحتوى على موقع الويب الخاص بك وتخصيصها في أي وقت. تعد هذه الأداة مفيدة بشكل خاص في عرض منشورات المدونة والمنتجات ومحتوى المحفظة بتنسيق الشبكة.
هذه الأداة مفيدة للغاية لعرض المحتوى الديناميكي. بمجرد نشر منشورات أو منتجات أو محتوى مرغوب جديد، يتم عرضها تلقائيًا من خلال الأداة دون إدخال يدوي. يمكنك إنشاء قوالب فريدة لإظهار المحتوى كما يحلو لك.
في القسم التالي، سنشرح كيفية استخدام الأداة على WordPress. استمر في القراءة!
كيفية استخدام عنصر واجهة الشبكة حلقة العنصر
يجب أن يكون لديك المكونات الإضافية التالية مثبتة لاستخدام هذه الأداة على موقع الويب الخاص بك. احصل عليها بالضغط على الروابط المرفقة أدناه.
- عنصر
- HappyAddons
- هابي أدونز برو
بمجرد أن تصبح جاهزة، ابدأ باتباع خطوات البرنامج التعليمي كما هو موضح.
الخطوة 01: قم بسحب وإسقاط أداة الشبكة الحلقية في صفحتك
افتح الصفحة التي تريد إضافة الأداة إليها. ثم حدد القسم الذي تريد إضافة الأداة إليه.
اكتب Happy Loop Grid في مربع بحث لوحة Elementor. بمجرد ظهور الأداة، قم بسحبها وإسقاطها في المنطقة المطلوبة من اللوحة القماشية.
الخطوة 02: إنشاء قالب شبكة حلقة
بعد إضافة الأداة، سيُطلب منك تحديد قالب حلقة. إذا كان لديك بالفعل قالب جاهز، فيمكنك تحديده. خلاف ذلك، يجب عليك إنشاء واحد من الصفر.
لذلك، للإنشاء من البداية، انقر فوق الزر "إنشاء قالب" .
سيتم نقلك إلى صفحة جديدة. انقر فوق الزر "إضافة جديد" أثناء تحديد علامة التبويب "قالب الحلقة".
قم بتسمية القالب . على سبيل المثال، قمنا بتسميتها "Loop Template One". ثم اضغط على زر إنشاء القالب .
سيتم فتح لوحة قماشية جديدة. هنا مرة أخرى، يمكنك سحب وإفلات عناصر واجهة المستخدم التي تريد تصميم تخطيط قالب Loop Grid الخاص بك.
راجع هذا الدليل حول كيفية إنشاء نافذة منبثقة على مواقع Elementor.
الخطوة 03: تصميم تخطيط لقالب الشبكة الحلقية
لنفترض أننا سنقوم بإنشاء شبكة الحلقة هذه لعرض منشورات مدونتنا بشكل ديناميكي. لذلك، سوف نستخدم أدوات النشر لإنشاء القالب.
#نشر صورة مميزة
يعد عرض صور ميزات المنشور أمرًا ضروريًا في قسم شبكة المنشورات. للقيام بذلك، ابحث عن الأداة وقم بإفلاتها على اللوحة القماشية.
#نشر المعلومات
من خلال إضافة عنصر واجهة مستخدم معلومات المنشور، يمكنك إظهار مؤلف المنشور وتاريخ النشر ووقت نشره. من الأفضل إضافة الأداة أسفل الصورة المميزة.
إذا كنت تريد إزالة أي عنصر من عناصر واجهة المستخدم، فما عليك سوى النقر على أيقونة علامة التقاطع (x) المجاورة لها. وبالمثل، لإضافة عنصر جديد، انقر فوق الزر + إضافة عنصر .
تعال إلى علامة التبويب "النمط" . ستحصل على خيارات في علامة التبويب هذه لتغيير لون النصوص وأيقونات الأداة وسمكها ومحاذاتها.
# عنوان المشاركة
قم بسحب وإفلات عنصر واجهة مستخدم عنوان المشاركة أسفل عنصر واجهة مستخدم معلومات النشر.
ضمن علامة التبويب "المحتوى"، ستحصل على خيارات لتخصيص علامة HTML وحجمها ومحاذاتها. قم بإجراء التغييرات اللازمة كما هو مطلوب.
تعال إلى علامة التبويب "النمط" . يمكنك تصميم لون العنوان والطباعة كما تريد.
#مقتطف من المشاركة
من خلال إضافة عنصر واجهة مستخدم Post Excerpt في القالب، يمكنك عرض ملخص أو مقتطف من المنشورات المعنية داخل قسم Loop Grid. ابحث عن أداة Post Excerpt وأضفها تحت العنوان.
بنفس الطريقة، كما هو موضح أعلاه، يمكنك تخصيص لون النص وأسلوب الطباعة من علامة التبويب "النمط" .
الخطوة 04: تحسين تخطيط القالب للأجهزة المحمولة
يجب عليك تحسين تخطيط القالب الخاص بك لجميع أنواع الأجهزة (الأجهزة اللوحية والهواتف المحمولة) إلى جانب أجهزة الكمبيوتر المكتبية. وبخلاف ذلك، لن يتمتع المستخدمون من الأجهزة الأخرى بتجربة جيدة عند استكشاف هذه الأداة من الأجهزة المحمولة والأجهزة اللوحية.
لذلك، لتحسين تخطيط القالب، انقر فوق خيار وضع الاستجابة في تذييل لوحة Elementor. سيظهر شريط علوي في القالب، بما في ذلك خيار التبديل بين أوضاع الأجهزة المختلفة (سطح المكتب والجهاز اللوحي والهاتف المحمول).
الآن، قم بالتبديل إلى أوضاع الأجهزة المختلفة ومعرفة ما إذا كان تخطيط القالب مثاليًا لأجهزة معينة مختلفة. إذا لم يكن مثاليًا، فقم بتغيير حجم عناصر القالب وتخصيصها حسب الحاجة.
نأمل أنه من خلال القيام بذلك، يمكنك جعل القالب مستجيبًا لجميع أحجام الشاشات.
فيما يلي دليل حول الأشياء التي يجب مراعاتها أثناء جعل الموقع مستجيبًا للجوال.
# نشر القالب
بمجرد الانتهاء من ذلك، انشر القالب بالنقر فوق الزر "نشر" في لوحة Elementor.
الخطوة 04: اذهب إلى اللوحة الرئيسية وحدد قالب الحلقة
تعال إلى لوحة Elementor الرئيسية. حدد قسم شبكة الحلقة . ضمن قسم التخطيط ، ستجد خيار اختيار قالب حلقة .
اكتب الاسم الذي تحفظ به القالب. بمجرد كتابته، سيظهر القالب في الوقت الفعلي. انقر فوق القالب لعرضه على اللوحة القماشية.
بمجرد تحديد قالب Loop Grid، سيعرض منشوراتك المنشورة بتنسيق شبكة مثل الصورة أدناه.
قد تبدو الشبكة غريبة لأنها تأتي مع الإعدادات الافتراضية. يمكنك الآن تخصيص تخطيطه بشكل أكبر.
الخطوة 05: تخصيص وتبسيط قسم شبكة الحلقة
من قسم التخطيط، يمكنك تحديد رقم العمود والمنشور لكل صفحة والارتفاع المتساوي . قم بالتكوين اللازم حسب الحاجة.
لقد احتفظنا بثلاثة أعمدة وثلاث مشاركات في كل صفحة لهذا البرنامج التعليمي.
# تكوين الاستعلام
بعد ذلك نأتي إلى قسم الاستعلام .
يمكنك عرض المحتوى من مجموعة متنوعة من المصادر في أداة Loop Grid. بشكل افتراضي، يتم عرض المشاركات بتنسيق الشبكة. ولكن يمكنك عرض الصفحات أو الصفحات المقصودة إذا أردت ذلك.
انقر على أيقونة القائمة المنسدلة بجوار خيار نوع المنشور. حدد نوع المحتوى الذي تريده.
يجب عليك حفظ كل مشاركة بعلامة أو فئة. إذا كنت تريد فقط عرض المحتوى من مؤلف أو علامة أو فئة محددة، فانقر فوق أيقونة + علامة الجمع الموجودة أسفل تضمين بواسطة.
حدد المؤلفين أو المصطلحات . يمكنك اختيار كلاهما أيضًا.
بمجرد تحديد خيارات التضمين بواسطة، اكتب أسماء المؤلفين والمصطلحات في الحقول المعنية. على الفور، سيتم تصفية المحتوى، وسيتم عرض محتويات هذا المؤلف والمصطلح المحدد فقط في شبكة الحلقة.
قم بتكوين خيارات الاستعلام الأخرى كما تريد. نأمل أن تتمكن من القيام بها بنفسك.
الخطوة 06: تكوين خيار ترقيم الصفحات لقسم شبكة الحلقة
قم بتوسيع قسم ترقيم الصفحات وتحميل المزيد .
انقر على أيقونة القائمة المنسدلة بجوار ترقيم الصفحات . حدد الخيار الذي تريده.
لقد اخترنا أرقام + السابق/التالي . يمكنك أن ترى في الصورة أنه تم عرض خيار ترقيم الصفحات هذا أسفل الأداة.
الخطوة 07: قم بتصميم تخطيط أداة شبكة الحلقة
انتقل إلى علامة التبويب "الأنماط" . ستجد خيارات لتخصيص وتصميم عنصر واجهة المستخدم ومربع العناصر وترقيم الصفحات.
لنقم أولاً بتوسيع قسم التخطيط . سيسمح لك بتكوين Column Gap و Row Gap . افعل هذا حسب الضرورة.
وبالمثل، قم بتوسيع قسم "مربع العناصر" . يمكنك إضافة الحشو ونوع الخلفية (لون أو صورة) وظل الصندوق وأنواع الحدود ونصف قطر الحدود .
في هذا البرنامج التعليمي، أضفنا الحشو، ونصف القطر، ولون الخلفية. افعل نفس الشيء بنفسك.
بنفس الطريقة، يمكنك تصميم خيارات اللون والطباعة والحشو ونصف القطر والمساحة وترقيم الصفحات الخاصة بعنصر واجهة المستخدم.
ملاحظة: يبدو قليلا صراخ العين، أليس كذلك؟ في هذه المرحلة من التصميم، قد تجد أن قالب الشبكة الحلقية يحتاج إلى تصميم منمق وتخصيص أكثر قليلاً. ولكن كيف نفعل؟ يظهر في الخطوة التالية.
الخطوة 08: إعادة تخصيص قالب شبكة الحلقة
أولا عليك أن تجد القالب. كما قمت بالتصميم باستخدام HappyAddons، انتقل إلى لوحة تحكم WordPress الخاصة بك. بعد ذلك، انتقل إلى HappyAddons > Theme Builder > Loop Template .
ابحث عن القالب وافتحه باستخدام الخيار "تحرير باستخدام Elementor" .
على سبيل المثال، قمنا بتغيير أسلوب طباعة نص مواصلة القراءة >> .
بمجرد الانتهاء من ذلك، قم بتحديث التغييرات.
الخطوة 09: معاينة التغييرات
انتقل إلى اللوحة الرئيسية مرة أخرى. حدد أيقونة القائمة المنسدلة . ثم انقر فوق خيار حفظ المسودة .
بمجرد حفظ المسودة، قم بإعادة تحميل اللوحة القماشية . سترى التغييرات على الصفحة كما أجريتها في القالب.
وبالتالي، يمكنك تخصيص قالب Loop Grid في أي وقت.
الخطوة 10: نشر تصميم الشبكة الحلقية
نأمل أن يكون قسم Loop Grid جاهزًا للنشر بالفعل. انقر فوق الزر نشر الموجود أسفل لوحة Elementor.
ملاحظة: تأكد من تحسين الأداة بشكل مثالي لاستجابة الهاتف المحمول، كما أوضحنا لك أعلاه في تحسين قالب Loop Grid. ستكون العملية هي نفسها هنا أيضًا.
حالات الاستخدام الشائعة لعنصر واجهة شبكة حلقة العنصر
لقد قمنا حتى الآن بوصف ما هي أداة Loop Grid وكيفية استخدامها على مواقع Elementor الإلكترونية الخاصة بك. دعونا الآن نلقي نظرة سريعة على بعض حالات الاستخدام الحاسمة للأداة حيث يمكن أن تترك انطباعًا لا يقدر بثمن.
1. تخطيطات المدونة
تجعل Elementor Loop Grid تخطيطات المدونة بسيطة لأنها تتيح لك عرض المنشورات في شبكة ديناميكية وممتعة. يمكنك تخصيص كيفية ظهور المحتوى (المقالات أو الصفحات) بما في ذلك عناوين المنشورات والمقتطفات والصور والبيانات الوصفية وغيرها لضمان مظهر متماسك.
تعرف على كيفية تصميم قالب منشور مدونة باستخدام Elementor.
2. شبكات المنتج
تعد شبكة Loop Grid ذات قيمة كبيرة على مواقع التجارة الإلكترونية لعرض المنتجات على شبكة أنيقة ومرتبة. فهو يسمح لك بعرض صور المنتجات وأسعارها وأوصافها حتى يتمكن العملاء من الاستمتاع بتجربة جيدة أثناء استكشاف المنتجات على موقعك.
3. عرض المحفظة
تسمح لك أداة Loop Grid بترتيب رسوماتك ومقالاتك ودراسات الحالة وأجزاء المحفظة في تخطيط جذاب. يمكنك أيضًا تغيير الشبكة لتتناسب مع علامتك التجارية حتى يمكن تسليط الضوء على محفظتك لعملائك وموظفيك.
تعرف على كيفية إنشاء موقع محفظة.
4. قوائم الأحداث
يمكنك تنظيم الأحداث الخاصة بك في شكل رسومي باستخدام Loop Grid. فهو يسمح لك بإدراج معلومات الأحداث بشكل مرئي مثل التواريخ والأماكن والأوصاف حتى يتمكن الأشخاص من معرفة ما سيحدث بسرعة.
5. قوائم الخدمة
يمكنك أيضًا تقديم خدماتك بتنسيق شبكة مع خيارات التصميم. يمكنك إظهار العناصر الأساسية مثل عناوين الخدمة والأوصاف والصور حتى يتمكن العملاء من رؤية ما تقدمه بسهولة في لمحة.
إغلاق
نأمل أن تعرف الآن خصوصيات وعموميات عنصر واجهة المستخدم Elementor Loop Grid. بمجرد أن تعرف كيفية استخدام الأداة بشكل جيد، يمكنك إنشاء إمكانيات تصميم لا حصر لها لموقعك على الويب. بفضل ميزاته البديهية وسهولة استخدامه، يمكنك ترك تأثير احترافي على موقع الويب الخاص بك للزائرين الأسريين.
لقد بذلنا قصارى جهدنا لتغطية كل ما قد تبحث عنه في هذا المنشور. إذا وجدت أننا قد فاتنا أي شيء، فأخبرنا بذلك من خلال مربع التعليق أدناه. يمكنك أيضًا ترك محادثة في صندوق الدعم إذا كنت ترغب في معرفة المزيد عن منتجنا.
وفي النهاية، شكرًا على وقتك وعلى تواجدك معنا حتى النهاية. استمتع، قراءة سعيدة!