يبحث

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

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

ما تفعله أداة البحث #

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

قبل أن تبدأ #

• ووردبريس مع العنصر مثبتة ونشطة.
• الإضافات الرئيسية للعنصر مثبتة ونشطة. بحاجة الى مساعدة؟ انظر دليل التثبيت.
• تم تمكين عنصر البحث في لوحة تحكم Master Addons إذا كنت قد قمت بإيقاف تشغيل عناصر واجهة المستخدم مسبقًا.

كيفية إضافة عنصر واجهة مستخدم بحث Elementor #

افتح محرر Elementor وابحث عنه يبحث في لوحة العناصر، أو قم بالتمرير إلى قسم الإضافات الرئيسية (ابحث عن شارة MA). اسحب الأداة إلى صفحتك. يظهر نموذج بحث عملي على الفور مع أيقونة عدسة مكبرة كعنصر تحكم الإرسال.

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

ال محتوى يحمل TAB قرارًا رئيسيًا واحدًا بالإضافة إلى بعض الحقول التي تتبعه. ال يكتب يقوم Dropdown بالتبديل بين التخطيطين: استمارة و أيقونة المنبثقة.

النوع: نموذج #

النموذج هو التخطيط الكلاسيكي، وهو حقل إدخال مع عنصر تحكم الإرسال على اليمين. ال إرسال نوع الزر dropdown يقرر ما هو هذا التحكم:

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

النوع: أيقونة منبثقة #

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

اختيار أيقونة المنبثقة يكشف عن إعدادات النافذة المنبثقة قسم ذو حقلين:

• نص الإدخال: العنصر النائب داخل حقل بحث النافذة المنبثقة، “Search ...” افتراضيًا.
• وصف: سطر مساعد أسفل الحقل، مثل “Hit أدخل للبحث أو انقر فوق X لإغلاق.”

قم بتصميم عنصر واجهة المستخدم في علامة التبويب "النمط" #

ال أسلوب تحتوي علامة التبويب على قسمين: استمارة لمنطقة الإدخال و زر لمراقبة الإرسال.

استمارة #

يقوم قسم النموذج بتصميم الغلاف وحقل الإدخال:

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

زر #

يقوم قسم الزر بتصميم عنصر التحكم في الإرسال، سواء كان رمزًا أو زرًا نصيًا

• لون الخلفية: التعبئة خلف الزر.
• لون: لون الأيقونة أو النص.
• الحشو والهامش: التباعد الداخلي والخارجي للزر.
• الطباعة: عائلة الخطوط وحجمها ووزنها لنص الزر.

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

شاهد النتيجة الحية #

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

يتولى WordPress المسؤولية من هناك ويعرض المنشورات والصفحات المطابقة في قالب نتائج البحث الخاص بالموضوع الخاص بك:

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

• بحث الرأس: استخدم Icon Popup بجوار قائمة التنقل بحيث يكون البحث على بعد نقرة واحدة دون تناول مساحة القائمة.
• الشريط الجانبي للمدونة أو صفحات الأرشيف: يساعد مربع البحث من نوع النموذج القراء على البحث في المنشورات القديمة.
• 404 صفحة: نموذج البحث هو الشيء الأكثر فائدة الذي يمكنك وضعه على صفحة مكتوب عليها “not Found.”
• التوثيق وقواعد المعرفة: ضع نموذج بحث واسع في المقدمة والوسط حتى يبحث المستخدمون قبل التمرير.

نصائح لشريط بحث أفضل #

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

فيديو تعليمي #

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

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

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

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