عرض موجز Instagram على موقع Elementor [خطوة بخطوة]

هل تريد إنشاء موجز Elementor Instagram لموقع الويب الخاص بك على WordPress؟

في هذا الدليل المفصل خطوة بخطوة ، ستتعلم كيفية إضافة موجز Instagram إلى Elementor باستخدام مكون إضافي مجاني غير تقني يسمى Spotlight .

لا توجد معرفة فنية أو مال مطلوب - ما عليك سوى اتباع البرنامج التعليمي الخاص بنا وستكون جاهزًا للعمل في أي وقت من الأوقات.

دليل خطوة بخطوة: عرض موجز Instagram على موقع Elementor

على استعداد للبدء؟ إليك دليلك خطوة بخطوة حول كيفية عرض موجز Elementor Instagram.

الخطوة 1: تثبيت وتفعيل المكون الإضافي Instagram Feed

للبدء ، ستحتاج إلى تثبيت وتفعيل المكون الإضافي لخلاصة Spotlight Instagram.

مرة أخرى ، تطبيق Spotlight مجاني للاستخدام ومتوافق بنسبة 100٪ مع Elementor.

تم إدراج المكون الإضافي المجاني Spotlight في WordPress.org ، لذا يمكنك تثبيته باتباع الإرشادات التالية:

1. افتح لوحة تحكم WordPress الخاصة بك.
2. انتقل إلى الإضافات ← إضافة جديد .
3. ابحث عن "Spotlight".
4. انقر فوق زر التثبيت الآن .
5. بمجرد انتهاء عملية التثبيت ، انقر فوق الزر "تنشيط" لتنشيط المكون الإضافي Spotlight.

الخطوة 2: قم بإنشاء رمز الوصول إلى Instagram

بعد ذلك ، تحتاج إلى إنشاء Instagram Access Token ، وهو ما يسمح لموقع WordPress الخاص بك بالاتصال بـ Instagram.

لا تقلق - في حين أن هذا يبدو تقنيًا بعض الشيء ، فأنت تحتاج فقط إلى النقر فوق بعض الأزرار وسيستغرق الأمر 30 ثانية في المجموع!

إذا كنت تستخدم حسابك الشخصي ، فإن Spotlight يتيح لك أيضًا ربط حسابك مباشرة ( في هذه الحالة يكون لديك خيار التخطي إلى الخطوة التالية ). ومع ذلك ، سنستخدم طريقة Instagram Access Token لأنها ستعمل مع أي إعداد ، بما في ذلك ربط حساب العميل الخاص بك (إذا كنت تقوم بإنشاء موقع ويب للعميل).

لإنشاء رمز الوصول إلى Instagram الخاص بك ، انتقل إلى هذه الصفحة.

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

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

سيؤدي هذا إلى فتح شاشة منبثقة من Instagram تسألك عما إذا كنت تريد منح إذن Spotlight للوصول إلى حسابك.

انقر فوق الزر "السماح" في النافذة المنبثقة:

بعد النقر فوق السماح ، يجب أن ترى رمز الوصول إلى Instagram الخاص بك يظهر في الصفحة الأصلية:

انسخ رمز الوصول هذا إلى مكان آمن لأنك ستحتاج إليه في ثانية.

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

الخطوة 3: قم بتوصيل حساب Instagram الخاص بك بموقع Elementor الخاص بك

الآن ، يمكنك إضافة رمز الوصول إلى Instagram هذا في لوحة معلومات WordPress الخاصة بك لتوصيل موقع Elementor الخاص بك بـ Instagram:

1. ارجع إلى لوحة تحكم WordPress الخاصة بك.
2. انتقل إلى Instagram Feeds → Settings .
3. الصق رمز الوصول إلى Instagram في مربع رمز الوصول إلى Instagram / Facebook .
4. انقر فوق الزر "اتصال" .

إذا كنت تعمل حصريًا مع حساب Instagram الخاص بك ، فيمكنك أيضًا الاتصال مباشرة بالنقر فوق الزر Connect your Personal account أو Connect your Business account .

بعد النقر فوق اتصال ، سترى رسالة نجاح:

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

بالحديث عن…

الخطوة 4: تكوين موجز Instagram الخاص بك

الآن بعد أن قمت بتوصيل حساب Instagram الخاص بك ، فأنت جاهز لإعداد أول موجز لـ Elementor Instagram.

للقيام بذلك ، انتقل إلى Instagram Feeds → Feeds في لوحة معلومات WordPress الخاصة بك.

اختر نوع التغذية

أولاً ، ستختار نوع المحتوى الذي تريد عرضه.

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

إذا كنت ترغب في تجربة Spotlight Pro ، فيمكنك الوصول إلى إصدار تجريبي مجاني لمدة 14 يومًا من Spotlight Pro لمعرفة كيفية عمله (لا يلزم وجود بطاقة ائتمان) - ما عليك سوى النقر فوق الزر التجريبي المجاني لمدة 14 يومًا في الزاوية العلوية اليمنى.

بالنسبة إلى البرنامج التعليمي Elementor Instagram Feed الخاص بنا ، سنستخدم خيار منشورات Instagram الخاصة بي .

بعد ذلك ، انقر فوق الخطوة التالية للتقدم.

اختر قالبًا

بعد ذلك ، يمكنك اختيار أحد قوالب Spotlight ، والذي يتيح لك التحكم في تخطيط وتصميم موجز Elementor Instagram.

يمنحك الإصدار المجاني ستة قوالب مختلفة ، بينما يضيف Spotlight Pro ثمانية قوالب أخرى.

في هذا المثال ، سنختار نموذج موجز Classic المجاني ، لكن لك مطلق الحرية في اختيار نموذج آخر إذا كنت تفضل ذلك.

بمجرد تحديد اختيارك ، انقر فوق زر الخطوة التالية للتقدم.

اختر حساب Instagram الخاص بك

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

للتقدم ، انقر على زر الاتصال والتخصيص .

تخصيص موجز Instagram الخاص بك Elementor

الآن ، ستكون في أداة تخصيص Spotlight ، والتي تتيح لك تخصيص القالب الذي اخترته بشكل أكبر.

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

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

بعد ذلك ، يمكنك الانتقال إلى علامة التبويب Design لتخصيص قالب موجز Elementor Instagram.

فيما يلي بعض الخيارات التي يمكنك إجراؤها هنا باستخدام الإصدار المجاني من المكون الإضافي:

• اختر عدد المشاركات المراد عرضها وعدد الأعمدة.
• اضبط ترتيب التغذية. بشكل افتراضي ، سيعرض أحدث المشاركات أولاً ، ولكن يمكنك تغيير ذلك إذا رغبت في ذلك.
• اختر كيفية فتح المشاركات عندما ينقر المستخدمون عليها.
• اضبط حجم الخلاصة والتباعد بينها.
• تخصيص رأس الخلاصة الذي يظهر فوق عناصر الخلاصة.
• قم بتكوين نمط ونص زر Follow on Instagram .
• قم بتكوين نمط ونص زر تحميل المزيد من المنشورات .
• أضف CSS المخصص الخاص بك إذا كنت تريد المزيد من التحكم.

باستخدام Spotlight Pro ، ستحصل على مزيد من التحكم في التفاصيل مثل التسميات التوضيحية والإعجابات والتعليقات.

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

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

بعد ذلك ، دعنا ننتقل إلى كيفية تضمين موجز Instagram الخاص بك في Elementor.

الخطوة 5: قم بتضمين موجز Instagram الخاص بك في Elementor

يمنحك Spotlight طريقتين لتضمين موجز Elementor Instagram:

• Spotlight (مجاني) - يمكنك إضافة خلاصتك إلى Elementor باستخدام أداة Spotlight WordPress العادية. بينما يمكنك إضافة هذه الأداة مباشرة من واجهة Elementor ، لن تتمكن من تخصيص إعدادات الخلاصة من Elementor.
• Spotlight Pro - يمكنك الحصول على عنصر واجهة مستخدم Spotlight Instagram Feed Elementor المخصص الذي لا يتيح لك تضمين موجز ويب الخاص بك فحسب ، بل يتيح لك أيضًا تكوين تصميمه وأسلوبه مباشرة من واجهة Elementor.

سننظر في كلا الخيارين ...

في كلتا الحالتين ، يمكنك البدء بفتح محرر Elementor لجزء المحتوى الذي تريد إضافة خلاصة Elementor Instagram إليه.

Spotlight (مجاني)

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

بعد ذلك ، اسحب Spotlight Instagram Feed Widget إلى تصميم Elementor الخاص بك حيث تريد عرض خلاصتك.

بمجرد إضافة الأداة ، من المفترض أن ترى خيارين في الشريط الجانبي:

1. أضف عنوانًا (أو اتركه فارغًا).
2. اختر موجز Instagram الذي أنشأته للتو في الخطوة السابقة.

ثم انقر فوق "تطبيق" .

يمكنك أيضًا استخدام علامة التبويب خيارات متقدمة لضبط التفاصيل مثل التباعد والهوامش.

قد لا ترى معاينة مباشرة لموجزك في محرر Elementor.

ومع ذلك ، إذا فتحت معاينة مباشرة أو الإصدار المباشر للصفحة ، فسترى موجز Elementor Instagram.

سبوتلايت برو

إذا كنت تستخدم Spotlight Pro ، فستحصل على عنصر واجهة مستخدم Spotlight Instagram Feed Elementor مخصص.

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

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

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

عند إضافة عنصر واجهة المستخدم ، يجب أن ترى على الفور معاينة لخلاصة Elementor Instagram.

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

الخطوة 6: عرض موجز Instagram الخاص بك في نافذة منبثقة

هذه الخطوة الأخيرة اختيارية ...

ولكن إذا كنت ترغب في عرض موجز Instagram الخاص بك في نافذة منبثقة في Elementor ، فلديك بعض الخيارات.

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

فيما يلي مثال لما يبدو عليه الأمر:

لتمكين هذا الإعداد أو ضبطه ، اضبط الإعداد فتح المشاركات في المربع المنبثق ضمن خيارات الموجز :

يمكن لمستخدمي Spotlight Pro تكوين النافذة المنبثقة بشكل أكبر باستخدام إعدادات Popup Lightbox .

إذا كنت ترغب في عرض موجز Instagram بالكامل في نافذة منبثقة ، فلديك بعض الخيارات:

1. إذا كان لديك Elementor Pro ، فيمكنك إضافة عنصر واجهة مستخدم Spotlight Instagram Feed إلى نافذة منبثقة تقوم بإنشائها باستخدام Elementor Popup Builder. ما عليك سوى اتباع نفس الخطوات من الخطوة السابقة عند إضافة عنصر واجهة المستخدم إلى تصميم النافذة المنبثقة.
2. يمكنك استخدام أي مكون إضافي منبثق في WordPress ، مثل Popup Maker. لعرض خلاصتك في النافذة المنبثقة ، يمكنك استخدام رمز Spotlight المختصر.

خاتمة

يختتم هذا دليلنا حول كيفية عرض موجز Elementor Instagram باستخدام المكون الإضافي Spotlight المجاني.

يمكنك متابعة كل شيء في هذا الدليل وإنشاء موجز Elementor Instagram الخاص بك دون إنفاق أي أموال.

إذا كنت تريد المزيد من الوظائف ، مثل عنصر واجهة مستخدم موجز Elementor Instagram المخصص الذي يمكنك استخدامه بدلاً من عنصر واجهة مستخدم Spotlight WordPress العادي ، يمكنك الترقية إلى Spotlight Pro.

يقدم Spotlight Pro إصدارًا تجريبيًا مجانيًا لمدة 14 يومًا بدون الحاجة إلى بطاقة ائتمان ، لذلك يمكنك دائمًا اختبار الميزات المتميزة قبل الالتزام بأي شيء.