صندوق المعلومات

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

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

ما تفعله أداة صندوق المعلومات #

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

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

قبل أن تبدأ #

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

كيفية إضافة عنصر واجهة المستخدم Info Box #

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

قم بإعداد المحتوى #

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

• النمط المحدد مسبقًا: اختر الاختلاف من واحد إلى أربعة. يعرض كل منها الأيقونة والعنوان والوصف بشكل مختلف (المزيد حول هذه العناصر أدناه).
• صورة أو أيقونة: تبديل ثلاثي الاتجاهات لـ لا شيء أو أيقونة أو صورة. اختر أيقونة لاستخدام مكتبة الأيقونات، أو صورة لتحميل الصورة الخاصة بك.
• أيقونة: عند تحديد أيقونة، اختر أي أيقونة من مكتبة Font Awesome أو قم بتحميل SVG.
• عنوان: النص الرئيسي، مع خيار الكتابة باستخدام الذكاء الاصطناعي بجانبه.
• عنوان URL: حول العنوان إلى رابط لأي صفحة أو عنوان URL خارجي.
• وصف: السطر أو السطرين من النص الموجود أسفل العنوان، مع الكتابة باستخدام الذكاء الاصطناعي أيضًا.

تحت تلك سوف تجد تعليمات المستندات الرابط و رابط الغلاف الخيار (ميزة احترافية) الذي يجعل البطاقة بأكملها قابلة للنقر عليها.

اختر نمطًا محددًا مسبقًا #

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

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

استخدم صورة بدلاً من الرمز #

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

نمط الصندوق #

ال أسلوب يتم تقسيم علامة التبويب إلى الأنماط العامة, نمط الأيقونة, عنوان, وصف، و أنماط (خيار احترافي). تتحكم الأنماط العامة في حاوية البطاقة نفسها.

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

تصميم الأيقونة والعنوان والوصف #

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

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

خيارات لون الخلفية والصورة #

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

النتيجة على الصفحة #

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

حالات الاستخدام الشائعة #

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

نصائح للعمل مع أداة Info Box #

• إبقاء الأوصاف قصيرة. يُقرأ سطر أو سطرين بشكل أفضل ويحافظ على صف من البطاقات متساويًا.
• تطابق أحجام الأيقونات عبر صف واحد. اضبط نفس حجم الأيقونة على كل صندوق حتى يصطفوا. هذا هو الشيء الذي يبدو عادةً عندما لا تتطابق البطاقات تمامًا.
• استخدم إعدادًا مسبقًا واحدًا لكل صف. يميل مزج الإعدادات المسبقة في نفس الصف إلى أن يبدو غير متساوٍ؛ قم بتبديل لون الخلفية بدلاً من ذلك عندما تريد تمييز لون واحد.
• ربط العنوان أو الغلاف. أرسل أشخاصًا إلى مكان مفيد باستخدام عنوان URL للعنوان، أو اجعل البطاقة بأكملها قابلة للنقر عليها باستخدام رابط المجمع.
• أضف رسومًا متحركة دقيقة للتحليق. يشير Bob أو Grow on hover الصغير إلى أن البطاقة تفاعلية دون أن تعترض الطريق.

الأسئلة المتداولة #

إلتحاق بالركب #

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