يبحث
كل زائر هو عميل محتمل يبحث عن شيء ما. يكسر شريط البحث الضعيف أو المخفي أو القبيح تلك الرحلة. يمنحك عنصر البحث الرئيسي للإضافات طريقتين قويتين لدمج البحث: نموذج مضمن كلاسيكي أو نافذة منبثقة للأيقونة قابلة للنقر للفتح. ضعه في أي مكان، ضع رأسك وشريطك الجانبي وقسم البطل 1000 متر ثم صمم كل بكسل. قم بتصميم النموذج والزر والرمز وحتى الرسائل المنبثقة.
نموذج البحث والأيقونة المنبثقة
ليس كل تصميم لديه مساحة لشريط بحث كامل. ولهذا السبب نقدم لك نوعين متميزين. اختر “Form” لحقل وزر إدخال تقليديين ومرئيين دائمًا. مثالي للأشرطة الجانبية أو أسفل البطل. أو حدد “Icon” للحصول على عدسة مكبرة أنيقة وموفرة للمساحة والتي، عند النقر عليها، تفتح تراكب بحث منبثق أنيق. وهذا يحافظ على نظافة تصميمك حتى يحتاج المستخدم إليه. يمكنك التحكم في نص الزر للنماذج والأيقونة الدقيقة للمشغل المنبثق.
- نوع النموذج: نموذج بحث قياسي ومرئي دائمًا مع زر إرسال قابل للتخصيص (كنص أو رمز).
- نوع الأيقونة/النوافذ المنبثقة: زر أيقونة أنيق يقوم بتشغيل نموذج بحث كامل عن النوافذ المنبثقة، مما يوفر مساحة رأسية مهمة.
- مكتبة الأيقونات: اختر أي أيقونة عدسة مكبرة من مكتبة الأيقونات الواسعة لتتناسب مع نمط موقعك.
تصميم حقل النموذج والإدخال الكامل
اجعل نموذج البحث جزءًا طبيعيًا من تخطيطك. صمم حاوية النموذج بأكملها: اضبط خلفيتها وعرضها وهامشها وحشوها وأعطها نصف قطر الحدود وظل الصندوق. ثم قم بتصميم حقل الإدخال نفسه. التحكم في الطباعة واللون والخلفية والحدود والحشو الداخلي. يمكنك أيضًا تصميم حالة التركيز (عندما ينقر المستخدم) بلون حدود مختلف. وهذا يضمن أن يبدو شريط البحث الخاص بك متميزًا، وليس مثل شريط المتصفح الافتراضي.
- تصميم الحاوية: قم بتصميم مربع النموذج مع الخلفية والحشوة والحدود والظل.
- التحكم في مجال الإدخال: قم بتخصيص لون مربع النص والطباعة والعرض ونصف قطر الحدود.
- الحالات المتقدمة: حدد لون حدود فريدًا للحالة المركزة، مع تسليط الضوء على المجال النشط.

تصميم الأيقونات والرسائل المنبثقة
بالنسبة لنوع الأيقونة/النوافذ المنبثقة، فإن الأيقونة نفسها عبارة عن زر. قم بتصميمه إلى حد الكمال. اضبط حجمه ولونه والحشوة والهامش المحيط به. ثم صمم النافذة المنبثقة التي تظهر. قم بتخصيص العنصر النائب لإدخال النص (مثل “ابدأ الكتابة...”)، والأهم من ذلك، أضف وصفًا مفيدًا (على سبيل المثال، “Hit أدخل للبحث أو ESC لإغلاق”). يرشد هذا النص المستخدمين، مما يحسن سهولة الاستخدام ويخلق تجربة تفاعلية احترافية مصقولة.
- تصميم الأيقونة: قم بتغيير لون الأيقونة وحجمها، واضبط المساحة المحيطة بها باستخدام هامش الأيقونة والحشوة.
- النص المنبثق الذكي: قم بتعيين نص عنصر نائب سهل الاستخدام داخل حقل بحث النافذة المنبثقة.
- تعليمات النافذة المنبثقة: أضف سطر وصف أسفل الإدخال لشرح كيفية استخدام النافذة المنبثقة (بحث/إغلاق).


الأسئلة المتداولة للبحث
هل يعمل هذا البحث مع صفحة نتائج البحث الافتراضية للموضوع الخاص بي؟
نعم ينبغي. يوفر هذا العنصر نموذج البحث الأمامي. عندما يرسل المستخدم استعلامًا، فإنه سيستخدم وظيفة البحث الافتراضية الخاصة بـ WordPress (أو WooCommerce) ويعرض النتائج على صفحة قالب البحث. لا يحل محل منطق البحث، بل يجعل نموذج الإدخال يبدو مذهلاً.
هل يمكنني إجراء بحث عن النموذج في الشريط الجانبي وبحث عن الأيقونة في الرأس؟
قطعاً. يمكنك استخدام عناصر بحث متعددة في نفس الصفحة أو الموقع. يتم تكوين كل واحد وتصميمه بشكل مستقل. لذلك يمكنك الحصول على نموذج كبير في الشريط الجانبي لمدونتك وأيقونة بسيطة في رأسك، ولكل منها إعداداتها الخاصة.
هل نافذة البحث المنبثقة مناسبة للجوال؟
نعم. تم تصميم النافذة المنبثقة لتكون سريعة الاستجابة. سيتم فتحه عادةً كتراكب مركزي يغطي معظم شاشة الهاتف المحمول، مع إمكانية قراءة حقل الإدخال والوصف بوضوح. يتم أيضًا قياس مشغل الأيقونة بشكل مناسب لأجهزة اللمس.
هل يمكنني تغيير أيقونة العدسة المكبرة إلى شيء آخر، مثل "Q" للاقتباس؟
يمكنك اختيار أي رمز من مكتبة الرموز المدمجة (مثل FontAwesome). على الرغم من أن العدسة المكبرة قياسية، إلا أنه يمكنك من الناحية الفنية استخدام أيقونة مختلفة. ومع ذلك، لفهم المستخدم العالمي، نوصي بشدة بالالتزام برمز بحث معروف (العدسة المكبرة).
عناصر واجهة المستخدم والملحقات الشائعة
إنشاء مواقع متطورة في وقت أقل.

التشكل الزجاجي

إضافات الحاويات

أنماط

ناسخ البريد/الصفحة


