يريد زوار موقع الويب الخاص بك معرفة من يقف وراء العلامة التجارية. مصممة بشكل جيد عضو فريق إليمنتور يضع القسم وجوهًا لعملك، ويبني الثقة، ويجعل موقعك يبدو شخصيًا وليس مؤسسيًا. المشكلة؟ لا يتم شحن Elementor مع عنصر واجهة مستخدم مخصص لأعضاء الفريق خارج الصندوق.
هذا هو المكان الإضافات الرئيسية للعنصر يأتي في. يمنحك عنصرين مصممين لهذا الغرض: عضو فريق ماجستير القطعة (لتخطيطات الشبكة) و دائري أعضاء فريق MA (لأقسام الفريق المنزلقة). كلاهما مجاني، وكلاهما يأتي مع 11 تصميمًا فريدًا يمكنك تطبيقه بنقرة واحدة.
في هذا الدليل، سوف تتعلم بالضبط كيفية القيام بذلك قم بإنشاء قسم لأعضاء الفريق في Elementor باستخدام كلتا الطريقتين، قم بتخصيص التصميم وتحقيق أقصى استفادة من كل خيار تصميم متاح.
لماذا يحتاج كل موقع ويب إلى قسم أعضاء الفريق
الناس يشترون من الناس. وجدت دراسة أجراها Edelman's Trust Barometer أن المستهلكين هم أكثر عرضة للثقة في الشركة عندما يمكنهم رؤية أشخاص حقيقيين يقفون وراءها. غالبًا ما تكون صفحة “About” أو “Team” واحدة من الصفحات الأكثر زيارة على موقعك بأكمله.
وهنا ما هو جيد قسم أعضاء الفريق في Elementor يفعل لموقع الويب الخاص بك:
- يبني المصداقية 2 يمكن للزوار معرفة من يعملون معه قبل التواصل
- يخلق اتصالات شخصية الصور الفوتوغرافية والسير الذاتية القصيرة تجعل علامتك التجارية قابلة للربط
- يزيد التحويلات تعمل إشارات الثقة مثل صور الفريق على تقليل التردد عند الشراء
- يحسن العلامة التجارية لصاحب العمل إن عرض فريقك يجذب أفضل المتقدمين للوظائف
- يقلل من معدلات الارتداد ugar تعمل الأقسام المرئية الجذابة على إبقاء الزوار على الصفحة لفترة أطول
سواء كنت تدير وكالة صغيرة، أو شركة SaaS، أو شركة محلية، فإن إضافة قسم فريق إلى موقع WordPress الخاص بك يستغرق 10 دقائق ويحدث تأثيرًا قابلاً للقياس.
ما يجب تضمينه في قسم أعضاء فريقك
قبل سحب أي عنصر واجهة مستخدم إلى الصفحة، خطط للمعلومات التي يجب أن تظهرها كل بطاقة فريق. فيما يلي تفصيل سريع لما يجب تضمينه وما يجب تخطيه
| عنصر | أولوية | لماذا يهم |
|---|---|---|
| صورة | ضروري | يعالج الأشخاص الوجوه بشكل أسرع من النص. استخدم لقطات رأس متسقة واحترافية. |
| اسم | ضروري | يجب أن يظهر مباشرة بجانب الصورة أو أسفلها حتى يكون الاتصال فوريًا. |
| التعيين / المسمى الوظيفي | ضروري | يخبر الزوار بالدور الذي يلعبه هذا الشخص في الفريق. |
| وصف قصير | موصى به | السيرة الذاتية من 1-2 جملة. يبقيه الإنسان والشخصية مدفوعة. |
| روابط وسائل التواصل الاجتماعي | موصى به | يتيح للزوار الاتصال على LinkedIn أو Twitter أو القنوات الأخرى. |
| البريد الإلكتروني أو الهاتف | اختياري | أضف فقط إذا كنت تريد الاتصال المباشر (وهو أمر شائع بالنسبة للفرق ذات المبيعات الثقيلة). |
نصيحة احترافية: حافظ على اتساق لقطات الرأس عبر الفريق. نفس لون الخلفية، والاقتراض المماثل، وأبعاد الصورة المطابقة (300x300px أو 400x400px يعمل بشكل جيد) يجعل القسم بأكمله يبدو مصقولًا.
ما ستحتاجه قبل البدء
لمتابعة هذا البرنامج التعليمي، تأكد من أن لديك:
- ووردبريس مثبت وتشغيل (أي إصدار حديث)
- العنصر (مجاني أو احترافي) ، هذا يعمل مع كليهما
- الإضافات الرئيسية للعنصر (نسخة مجانية) 9 تحميل من WordPress.org
- صور أعضاء الفريق جاهزة للتحميل (لقطات للرأس، يوصى بنسبة مربعة)
بمجرد تثبيت Master Addons وتنشيطه، ستجد عضو فريق ماجستير و دائري أعضاء فريق MA عناصر واجهة المستخدم داخل محرر Elementor ضمن علامة التبويب “MASTER ADDONS”.
كيفية إنشاء قسم شبكة أعضاء فريق Elementor
يعد تخطيط الشبكة مثاليًا عندما تريد عرض فريقك بتنسيق نظيف ومنظم بأعمدة متعددة. إليك كيفية إعداده خطوة بخطوة
الخطوة 1: أدخل قسمًا جديدًا
افتح أي صفحة في محرر Elementor. انقر فوق أيقونة “+” لإضافة قسم جديد. اختر بنية العمود المفضلة لديك. بالنسبة لقسم الفريق، يعمل التخطيط المكون من 3 أعمدة أو 4 أعمدة بشكل أفضل.
الخطوة 2: إضافة قسم داخلي
إذا كنت بحاجة إلى مزيد من التحكم في التباعد والتخطيط، اسحب ملف القسم الداخلي القطعة داخل القسم الرئيسي الخاص بك. يمنحك هذا أعمدة متداخلة حيث توجد بطاقة كل عضو في الفريق بشكل مستقل.
قم بإنشاء أي عدد تحتاجه لحجم فريقك. ثلاثة أعمدة في كل صف هو الخيار الأكثر شيوعًا لشاشات سطح المكتب.
الخطوة 3: اسحب أداة عضو فريق MA
في لوحة Elementor الموجودة على اليسار، قم بالتمرير لأسفل إلى إضافات الماجستير علامة التبويب (أو ابحث فقط عن “MA Team Member” في شريط البحث). اسحب ال عضو فريق ماجستير القطعة في أحد الأعمدة الخاصة بك.
سترى على الفور ظهور بطاقة عضو الفريق الافتراضية مع صورة العنصر النائب والاسم والتعيين والأيقونات الاجتماعية.
الخطوة 4: كرر لكل عضو في الفريق
قم بتكرار الأداة أو اسحب أداة جديدة عضو فريق ماجستير القطعة في كل عمود متبقي. تمثل كل عنصر واجهة مستخدم عضوًا واحدًا في الفريق، لذا لديك التحكم الكامل في البطاقات الفردية.
نصيحة احترافية: انقر بزر الماوس الأيمن فوق الأداة وحدد “Duplicate” لنسخها مع الحفاظ على كل تصميمك سليمًا. ثم ما عليك سوى تبديل الصورة والنص لكل عضو جديد في الفريق.
تخصيص محتوى القطعة لعضو فريق Elementor
انقر على أي عضو فريق ماجستير القطعة لفتح إعداداتها. ال علامة تبويب المحتوى هو المكان الذي تضيف فيه جميع التفاصيل الشخصية لكل عضو في الفريق.
تفاصيل أعضاء الفريق
علامة التبويب المحتوى في عنصر واجهة المستخدم لعضو فريق العنصر يعطيك حقول ل:
- صورة up تحميل لقطة للرأس أو صورة الفريق. يمكنك أيضًا ضبط حجم الصورة واختيار نسبة العرض إلى الارتفاع المخصصة.
- اسم up الاسم الكامل لعضو الفريق. يتم عرض هذا كعلامة عنوان، لذا اختر علامة HTML مناسبة (H3 أو H4 نموذجية لبطاقات الفريق).
- تعيين المسمى الوظيفي أو الدور أو المنصب (على سبيل المثال، “Lead Designer” أو “Co-Founder & CEO”).
- وصف over سيرة ذاتية قصيرة أو شعار. احتفظ بها في جملة أو جملتين للحصول على أنظف مظهر.
ملفات تعريف وسائل التواصل الاجتماعي
أسفل التفاصيل الرئيسية، ستجد قسم وسائل التواصل الاجتماعي. إضافة روابط إلى الملفات الشخصية لكل عضو في الفريق. تدعم الأداة جميع الأنظمة الأساسية الرئيسية، بما في ذلك:
- فيسبوك
- تويتر / س
- لينكدإن
- انستغرام
- جيثب
- عناوين URL مخصصة مع أيقونات مخصصة
تظهر الروابط الاجتماعية كأيقونات صغيرة أسفل معلومات عضو الفريق. يتم فتحها في علامة تبويب جديدة افتراضيًا، لذلك لن يغادر الزائرون صفحتك.
علامة تبويب النمط: اختلافات التصميم والإعدادات المسبقة
هذا هو المكان عضو فريق ماجستير تتميز القطعة حقًا عن الحلول الأساسية لـ Elementor. بدلاً من بناء تصميمات بطاقات الفريق من الصفر، يمكنك الحصول عليها 11 اختلافًا فريدًا في التصميم و 5 إعدادات مسبقة للنمط للاختيار من بينها.
اختلافات التصميم
انقر على علامة تبويب النمطثم افتح الأنماط العامة لوحة. ستجد منسدلة تسمى “Design Variation.” اختر أيًا من الخيارات الـ 11، وستقوم الأداة على الفور بإعادة هيكلة تخطيط البطاقة. بعض الاختلافات تقوم بتكديس الصورة فوق النص. يستخدم البعض الآخر تخطيطات جنبًا إلى جنب. يضيف البعض تأثيرات التراكب على التمرير.
أفضل جزء: التبديل بين الاختلافات لا يمحو المحتوى الخاص بك. يظل اسمك وصورتك وسيرتك الذاتية وروابطك الاجتماعية سليمة. يمكنك تجربة كل أشكال الاختلاف والاستقرار على الشكل الذي يتوافق مع تصميم موقعك.
5 إعدادات مسبقة للنمط
ستجد أيضًا ضمن لوحة الأنماط العامة 5 إعدادات مسبقة للنمط. هذه مجموعات ألوان وتخطيطات تم تكوينها مسبقًا وتمنحك مظهرًا مصقولًا بنقرة واحدة.
ضوابط النمط اليدوي
للتحكم الإبداعي الكامل، تتيح لك علامة التبويب "النمط" أيضًا تخصيص ما يلي
- لون الخلفية 5 قم بتعيين لون ثابت أو متدرج أو خلفية شفافة لكل بطاقة
- محاذاة المحتوى ارجع إلى اليسار أو الوسط أو اليمين لمحاذاة كافة النصوص والأيقونات
- الطباعة التحكم الكامل في عائلة الخطوط وحجمها ووزنها وارتفاع الخط وتباعد الحروف للاسم والتسمية والوصف بشكل منفصل
- ألوان النص 0 ألوان مختلفة للاسم والتسمية ونص الوصف
- ألوان الأيقونات الاجتماعية up تخصيص ألوان الأيقونة لكل من الحالات العادية وحالات التمرير
- التباعد والحشو us ضبط المسافة بين العناصر داخل البطاقة
- الحدود ونصف قطر الحدود 1- إضافة حدود أو تقريب زوايا البطاقة
- صندوق الظل 5 أضف تأثيرات ظل دقيقة للعمق
للحصول على إرشادات كاملة لكل خيار نمط، تحقق من وثائق أعضاء فريق MA.
كيفية إنشاء دائري لأعضاء الفريق في Elementor
هل لديك فريق أكبر؟ ال دائري أعضاء فريق MA تتيح لك الأداة إضافة عدد غير محدود من أعضاء الفريق في قسم واحد منزلق. إنه مناسب بشكل أفضل عندما يكون لديك 6+ أعضاء فريق ولا ترغب في ملء صفحة كاملة بشبكة.
وهنا كيف دائري عضو الفريق في Elementor يعمل:
الخطوة 1: اسحب أداة الكاروسيل لأعضاء فريق MA
على عكس طريقة الشبكة، أنت تفعل ذلك لا تحتاج إلى قسم داخلي أو أعمدة متعددة. ما عليك سوى إضافة قسم جديد بعمود واحد، ثم البحث عن Carousel” لأعضاء فريق “MA واسحبه للداخل.
الخطوة 2: أضف أعضاء فريقك
داخل الأداة، سترى حقل مكرر. يمثل كل عنصر في المكرر عضوًا واحدًا في الفريق. انقر فوق “Add Item” لإنشاء بطاقات جديدة. لكل بطاقة، املأ:
- صورة
- اسم
- تعيين
- وصف
- روابط التواصل الاجتماعي
يمكنك إضافة أي عدد تريده من أعضاء الفريق. ليس هناك حد. يتعامل الكاروسيل مع 5 أعضاء أو 50 عضوًا بنفس السهولة.
الخطوة 3: قم بتعيين علامة العنوان
حدد علامة عنوان HTML لأسماء أعضاء فريقك (H2، H3، H4، وما إلى ذلك). بالنسبة لمعظم الصفحات، يعد H3 أو H4 هو الاختيار الصحيح نظرًا لأن عنوان القسم أعلاه عادةً ما يكون H2.
إعدادات الكاروسيل: التنقل والأعمدة والتشغيل التلقائي
تأتي أداة الرف الدائري مزودة بلوحة إعدادات مخصصة للتحكم في كيفية تصرف شريط التمرير. إليك ما يمكنك تكوينه:
الأعمدة والعناصر المراد تمريرها
قم بتعيين عدد أعضاء الفريق الذين يظهرون على الشاشة مرة واحدة. يمكنك عرض عمودين أو 3 أو 4 أو أكثر حسب عرض التخطيط الخاص بك. يتحكم إعداد “Items to Scroll” في عدد البطاقات التي تتحرك عندما ينقر الزائر على سهم التنقل.
| حجم الشاشة | الأعمدة الموصى بها | العناصر المراد تمريرها |
|---|---|---|
| سطح المكتب (1200px+) | 3-4 أعمدة | 1-2 |
| قرص (768px-1199px) | 2-3 أعمدة | 1 |
| الجوال (أقل من 768 بكسل) | 1 عمود | 1 |
نمط الملاحة
تحصل على نوعين من التنقل:
- السهام over أزرار الأسهم لليسار واليمين على جانبي الرف الدائري. الأفضل لسطح المكتب حيث تكون تفاعلات التمرير شائعة.
- النقاط os. مؤشرات نقطية صغيرة أسفل الرف الدائري توضح إجمالي الشرائح والموضع الحالي. يعمل بشكل جيد على كل من سطح المكتب والهاتف المحمول.
يمكنك تمكين واحد، كلاهما، أو لا شيء على الإطلاق. إذا قمت بتشغيل التشغيل التلقائي، فقد لا يحتاج بعض المستخدمين حتى إلى التنقل اليدوي.
التشغيل التلقائي
تبديل التشغيل التلقائي وتعيين المدة بالمللي ثانية. تمنح القيمة 3000-5000 مللي ثانية (3-5 ثوانٍ) للزوار وقتًا كافيًا لقراءة كل بطاقة قبل أن يتحرك شريط التمرير. يمكنك أيضًا تمكين التوقف مؤقتًا حتى يتوقف شريط التمرير عندما يحوم شخص ما فوق البطاقة.
خيارات نمط الكاروسيل
تمامًا مثل أداة الشبكة، يأتي الكاروسيل مزودًا 5 إعدادات مسبقة للنمط والتحكم اليدوي الكامل في:
- حشو العنصر (مسافة بين كل بطاقة فريق)
- الطباعة للاسم والتسمية والوصف
- الألوان لكل عنصر نصي
- إعدادات الخلفية والحدود لكل بطاقة
- التنقل في تصميم الأسهم/النقاط والألوان
للحصول على مرجع الإعدادات الكاملة، راجع وثائق دائري لأعضاء الفريق.
نصائح لقسم فريق أفضل
بعد إنشاء المئات من أقسام الفريق، إليك التفاصيل الصغيرة التي تفصل صفحة الفريق الجيدة عن الصفحة الرائعة
- استخدم صورًا حقيقية، وليس قم بتخزين الصور. يمكن للزوار معرفة الفرق. تعمل لقطات الرأس الأصلية على بناء ثقة أكبر من الصور المصقولة على الإطلاق.
- إبقاء الأوصاف قصيرة ومتسقة. إذا كان لدى شخص ما سيرة ذاتية مكونة من 3 جمل وآخر لديه فقرة كاملة، فهذا يخلق خللاً في التوازن البصري. تهدف لنفس الطول عبر جميع البطاقات.
- مطابقة أبعاد الصورة بالضبط. قم بتحميل جميع لقطات الرأس بنفس الدقة (على سبيل المثال، 400x400px). الأحجام غير المتطابقة تكسر محاذاة الشبكة.
- قم بتضمين الملفات الشخصية الاجتماعية النشطة فقط. رابط LinkedIn الميت أسوأ من عدم وجود رابط على الإطلاق. التزم بالمنصات التي يستخدمها فريقك بالفعل.
- اختبار على الهاتف المحمول. تحتاج أقسام الكاروسيل بشكل خاص إلى اختبار الهاتف المحمول. تأكد من أن البطاقات قابلة للقراءة وأن نقاط التنقل سهلة النقر.
- استخدم الكاروسيل لـ 6+ أعضاء. إذا كان لديك 3-4 أعضاء في الفريق، فستبدو الشبكة أكثر نظافة. احفظ الرف الدائري للفرق الأكبر حجمًا حيث يصبح التمرير ضروريًا.
عضو فريق MA مقابل أعضاء فريق MA Carousel: ما الذي يجب عليك استخدامه؟
| ميزة | عضو فريق الماجستير (الشبكة) | دائري أعضاء فريق MA |
|---|---|---|
| الأفضل ل | فرق صغيرة (2-6 أعضاء) | فرق أكبر (6+ أعضاء) |
| تخطيط | الأعمدة الثابتة (تتحكم في الشبكة) | دائري منزلق مع الملاحة التلقائية/اليدوية |
| يثبت | عنصر واجهة مستخدم واحد لكل عضو في الفريق في الأقسام الداخلية | القطعة واحدة مع حقل مكرر |
| اختلافات التصميم | 11 الاختلافات | 5 إعدادات مسبقة للنمط |
| ملاحة | لا حاجة لأي شيء (كلها مرئية) | الأسهم والنقاط والتشغيل التلقائي |
| مساحة الصفحة | يأخذ مساحة عمودية أكبر | مدمج، يوفر المساحة |
| التحكم في البطاقة الفردية | كامل (كل عنصر واجهة مستخدم مستقل) | تصميم موحد عبر جميع البطاقات |
بالنسبة لمعظم مواقع الشركات الصغيرة، يعد نهج الشبكة الذي يضم 3-4 أعضاء من الفريق هو المكان المناسب. إذا زاد عدد أعضاء فريقك عن 6 أشخاص، فانتقل إلى الرف الدائري للحفاظ على نظافة الصفحة.
هل تريد استكشاف القائمة الكاملة لعناصر واجهة المستخدم المتاحة؟ تحقق من مكتبة عناصر واجهة المستخدم الخاصة بـ Master Addons كاملة مع 80+ عناصر واجهة مستخدم وملحقات.
الأسئلة المتداولة
هل يحتوي Elementor على عنصر واجهة مستخدم مدمج لعضو الفريق؟
لا يتضمن No.Elementor (مجاني أو احترافي) عنصر واجهة مستخدم مخصص لعضو الفريق. أنت بحاجة إلى إضافة تابعة لجهة خارجية مثل الإضافات الرئيسية للحصول على بناء لهذا الغرض عنصر واجهة المستخدم لعضو فريق العنصر مع إعدادات التصميم المسبقة والروابط الاجتماعية وخيارات الكاروسيل.
هل أداة عضو فريق MA مجانية؟
نعم. تتوفر كل من عناصر واجهة المستخدم الخاصة بعضو فريق MA وأعضاء فريق MA Carousel في الإصدار المجاني من Master Addons for Elementor. تستطيع قم بتنزيله من WordPress.org بدون تكلفة. قد تتطلب بعض أشكال التصميم المتقدمة الإصدار الاحترافي.
كم عدد أعضاء الفريق الذين يمكنني إضافتهم إلى الكاروسيل؟
ليس هناك حد. يستخدم فريق MA Team Members Carousel حقل مكرر، حتى تتمكن من إضافة أي عدد تحتاجه صفحتك. تتعامل الأداة مع 5 أو 50 بطاقة دون مشاكل في الأداء. ما عليك سوى تعيين الأعمدة المرئية والسماح لشريط التمرير بالتعامل مع الباقي.
هل يمكنني استخدام تصميمات مختلفة لأعضاء الفريق المختلفين؟
مع تخطيط الشبكة (عنصر واجهة مستخدم عضو فريق MA)، نعم. نظرًا لأن كل عضو في الفريق عبارة عن عنصر واجهة مستخدم منفصل، فيمكنك تطبيق شكل مختلف من التصميم على كل بطاقة. في الرف الدائري، تشترك جميع البطاقات في نفس التصميم المحدد مسبقًا لتحقيق الاتساق البصري.
ما حجم الصورة التي يجب أن أستخدمها لصور أعضاء الفريق؟
الصور المربعة بين 300x300px و500x500px تعمل بشكل أفضل. احتفظ بجميع الصور بنفس الأبعاد من أجل محاذاة متسقة. يمنحك تنسيق JPEG أو WebP بجودة 80% جودة مرئية جيدة دون أحجام ملفات كبيرة تؤدي إلى إبطاء صفحتك.
القراءة ذات الصلة
إلتحاق بالركب
خلق أ قسم أعضاء الفريق في Elementor لا يتطلب رمزًا مخصصًا أو وظائف إضافية باهظة الثمن لإنشاء الصفحات. باستخدام عنصري واجهة المستخدم الخاصين بفريق Master Addons، يمكنك الانتقال من قسم فارغ إلى صفحة فريق مصممة بالكامل في أقل من 10 دقائق.
للفرق الصغيرة، استخدم عضو فريق ماجستير القطعة في تخطيط الشبكة. بالنسبة للفرق الأكبر حجمًا، قم بالتبديل إلى دائري أعضاء فريق MA للحصول على شريط تمرير موفر للمساحة. يمنحك كلا الخيارين إعدادات مسبقة للتصميم، وتكامل الوسائط الاجتماعية، وعناصر تحكم كاملة في الطباعة والألوان.
ابدأ مع Master Addons وقم ببناء قسم الفريق الذي سيثق به زوار موقعك بالفعل.
