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

كيفية إضافة وحدة بحث لصفحتك

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

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

حدد موقع وحدة البحث في قائمة الوحدات وانقر عليها لإضافتها إلى صفحتك. قائمة الوحدات قابلة للبحث ، مما يعني أنه يمكنك أيضًا كتابة كلمة "بحث" ثم النقر فوق إدخال للبحث وإضافة وحدة البحث تلقائيًا! بمجرد إضافة الوحدة ، سيتم الترحيب بك من خلال قائمة خيارات الوحدة. تنقسم هذه الخيارات إلى ثلاث مجموعات رئيسية: محتويات , تصور et متقدم .

مثال عن حالة الاستخدام: إضافة وحدة بحث مخصصة إلى صفحة مدونة ذات عرض كامل

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

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

باستخدام Visual Builder ، أضف قسمًا قياسيًا جديدًا إلى صفحة المدونة بصف كامل العرض (عمود واحد). ثم أدخل وحدة البحث في الصف.

قم بتحديث إعدادات وحدة البحث كما يلي:

خيارات المحتوى

النص المحجوز: ابحث في مدونتنا ...
إخفاء الزر: نعم

خيارات التصميم

لون خلفية حقل الإدخال: # f8f8f8
لون العنصر النائب: # 888888
حجم خط الإدخال: 16 بكسل
لون نص الإدخال: # 888888
ارتفاع خط الدخول: 1em
الحشوة المخصصة: 20px Top ، 20px أسفل

حفظ الإعدادات

عد الآن لتغيير عرض الصف الذي يحتوي على وحدة البحث الخاصة بك. في علامة التبويب "تصميم" في إعدادات الخط ، امنح الخط عرضًا مخصصًا 300 بكسل. سيؤدي ذلك إلى إبقاء وحدة البحث مضغوطة ومركزة على الصفحة.

هذا كل شيئ !

خيارات محتوى البحث

في علامة التبويب "المحتوى" ، ستجد جميع عناصر محتوى الوحدة ، مثل النصوص والصور والرموز. كل ذلك يتحكم مما يظهر دائمًا في الوحدة النمطية الخاصة بك في علامة التبويب هذه.

نص العنصر النائب

اكتب النص الذي تريد استخدامه كعنصر نائب لحقل البحث.

زر إخفاء

إذا قمت بتمكين هذا الخيار ، فسيتم إخفاء الزر "بحث".

استبعاد الصفحات

إذا قمت بتمكين هذا الخيار ، فسيتم استبعاد الصفحات من نتائج البحث.

استبعاد البنود

سيؤدي تمكين هذا الخيار إلى استبعاد الرسائل من نتائج البحث.

استبعاد الفئات

اختر الفئات التي تريد استبعادها من نتائج البحث.

علامة المسؤول

سيؤدي هذا إلى تغيير تسمية الوحدة في المنشئ لتسهيل التعرف عليها. عند استخدام عرض WireFrame في Visual Builder ، تظهر هذه الملصقات في كتلة الوحدة النمطية لواجهة Divi Builder.

خيارات تصميم البحث

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

لون خلفية حقل الإدخال

هنا يمكنك تغيير لون خلفية شريط البحث.

عنصر نائب اللون

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

لون النص

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

اتجاه النص

يتحكم هذا في كيفية محاذاة النص في الوحدة النمطية.

شرطة الدخول

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

حجم خط الإدخال

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

لون نص الإدخال

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

تباعد الحروف

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

ارتفاع الخط

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

زر الزر واللون

سيؤدي هذا إلى تغيير لون الخلفية ولون الحدود لزر البحث.

خط الزر

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

حجم خط الزر

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

لون نص الزر

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

تباعد الحروف من الزر

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

ارتفاع خط الزر

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

أقصى عرض

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

هامش مخصص

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

الحشو مخصص

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

خيارات متقدمة من وحدة البحوث

في علامة التبويب "خيارات متقدمة" ، ستجد خيارات قد يجدها مصممو الويب الأكثر خبرة مفيدة ، مثل سمات CSS و HTML المخصصة. هنا يمكنك تطبيق CSS مخصص على أي من عناصر الوحدة المتعددة. يمكنك أيضًا تطبيق معرفات وفئات CSS المخصصة على الوحدة النمطية ، والتي يمكن استخدامها لتخصيص الوحدة في ملف style.css الخاص بالقالب الخاص بك.

معرف CSS

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

فئة CSS

أدخل فئات CSS الاختيارية لاستخدامها في هذه الوحدة. يمكن استخدام فئة CSS لإنشاء نمط CSS مخصص. يمكنك إضافة فئات متعددة مفصولة بمسافة. يمكن استخدام هذه الفئات في سمة Divi child أو في ورقة أنماط CSS المخصصة التي تضيفها إلى صفحتك أو موقع الويب الخاص بك باستخدام خيارات سمة Divi أو الإعدادات في صفحة Divi Builder.

عرف المغلق

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

رؤية

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

[vc_row center_row = "نعم"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" selected "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] قم بتنزيل موضوع DIVI [/ vcex_button] [/ width_cumnol] [] [vc_cull] »1/2 ″] [vcex_button url =" https://www.elegantthemes.com/affiliates/idevaffiliate.php؟id=23065&url=40632&tid1=tutorials "target =" blank "layout =" expand "align =" center " font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] DOWNLOAD TEMPLATES DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

دروس ديفي أخرى

سلع مماثلة

4 تعليقات

غابرييل يوم 6 مارس 2021 الساعة 4 ح 42 دقيقة

مرحبا،

شكرا لك على هذه المقالة.
هناك نقطة لم تعالجها (وللأسف ، هذه هي بالضبط النقطة التي تسبب لي مشكلة ...):

عند اختيار عرض زر البحث ، يكون نص الزر افتراضيًا هو "بحث" ، وأود أن أعرف كيف يمكنني تعديل هذا النص لتخصيصه؟ مهما نظرت ، لم أجد أي مجال أو مساحة يمكن فيها إجراء هذا التغيير ...

شكرا مقدما لمساعدتكم !
الرد
ستيفانيا يوم 7 يونيو 2020 الساعة 18 ح 06 دقيقة

مرحبا شكرا على المقال لدي سؤال ، هل يمكن استخدام نموذج البحث فقط لجزء من الصفحة؟ على سبيل المثال بالنسبة لقسم الأسئلة الشائعة ، أود إعداد نموذج بحث يقتصر على الأسئلة فقط من الأسئلة الشائعة (+ 20 سؤالًا) وبهذه الطريقة لا يتعين على المستخدم قراءتها جميعًا ولكن يكتشف بفضل نموذج البحث فقط الكلمات الرئيسية التي يهتم بها. شكرا لكم مقدما على الرد.
الرد
ديفيد يوم 23 سبتمبر 2019 الساعة 20 ح 36 دقيقة

شكرًا لك على هذه المقالة ، من الجيد إزالة الصفحات من وحدة البحث ، ولكن هل يمكنك أيضًا استبعاد الصفحات عند إجراء بحث باستخدام العدسة المكبرة للرأس ؟؟ شكرا جزيلا
الرد
- تييري برتراند يوم 26 سبتمبر 2019 الساعة 13 ح 32 دقيقة
  
  مرحبا ديفيد،
  
  لم أختبر هذا الخيار بعد.
  الرد

إرسال مراجعة إلغاء الرد

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

برنامج Divi التعليمي: كيفية استخدام وحدة البحث