كيفية إنشاء قالب صفحة نتائج البحث في Divi

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

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

هيا بنا نبدأ.

نظرة خاطفة

فيما يلي نظرة سريعة على قالب صفحة نتائج البحث الذي سننشئه.

قم بتنزيل النموذج (النماذج) مجانًا

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

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

لاستيراد التخطيط إلى صفحتك ، ما عليك سوى استخراج ملف مضغوط وإضافة أحد ملفات json إلى Divi Theme Builder باستخدام خيار Theme Builder Portability.

دعنا نصل إلى البرنامج التعليمي ، فهل نحن؟

ما تحتاجه للبدء

للبدء ، سوف تحتاج إلى تثبيت وتفعيل Divi Theme. تأكد من أن لديك أحدث إصدار من Divi.

ستحتاج أيضًا إلى بعض المنشورات / الصفحات التي تم إنشاؤها لأغراض الاختبار حتى تعرض صفحة نتائج البحث النتائج فعليًا.

بعد ذلك ، أنت على استعداد للذهاب.

حول صفحة نتائج البحث

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

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

كيفية إنشاء قالب صفحة نتائج البحث في Divi

إنشاء قالب جديد

للبدء ، انتقل إلى لوحة معلومات WordPress وانتقل إلى Divi> Theme Builder. ثم انقر فوق منطقة "إضافة قالب جديد".

ضمن إعدادات النموذج ، قم بتعيين نموذج نتائج البحث.

ثم انقر على منطقة إضافة نص مخصص للقالب الجديد وحدد "إنشاء جسم مخصص".

حدد لبناء التخطيط من البداية.

تصميم قالب صفحة نتائج البحث باستخدام محرر تخطيط القالب

قسم العنوان لنموذج نتائج الصفحة

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

لهجة تصميم وحدة المقسم

ثم أدخل وحدة Divider Module. سيكون هذا بمثابة لهجة تصميم لعنوان صفحتنا.

قم بتحديث نمط الفاصل كما يلي:

• لون الخط: # 3a405a
• موقف الخط: القاع
• وزن الحاجز: 5 بكسل
• الفهرس Z: -1

وحدة النص مع العنوان

ضمن وحدة Divider ، أضف وحدة نصية جديدة بالمحتوى التالي:

<h1>Search Results</h1>

تحديث تصميم النص كالتالي:

• لون الخلفية: #ffffff
• محاذاة النص: مركز
• خط العنوان: مولي
• وزن خط العنوان: ثقيل
• لون نص العنوان: # 3a405a
• حجم نص العنوان: 70 بكسل (سطح المكتب) ، 40 بكسل (الجهاز اللوحي) ، 22 بكسل (الهاتف)
• ارتفاع خط العنوان: 80 بكسل
• العرض الأقصى: 60٪
• محاذاة الوحدة: المركز
• ارتفاع الحد الأدنى: 80 بكسل

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

• الهامش: -75 بكسل

وحدة البحث

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

إضافة إدخال نص العنصر النائب للنموذج.

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

ثم قم بتحديث إعدادات البحث على النحو التالي:

• لون العنصر النائب: # 3a405a
• لون خلفية الحقل: #ffffff
• الخط الميداني: مونتسيرات
• حجم نص الحقل: 20 بكسل
• لون الزر والحدود: # 3a405a
• خط الزر: مولي
• وزن خط الزر: غامق
• لون نص الزر: #ffffff
• حجم نص الزر: 18 بكسل
• العرض: 100٪
• العرض الأقصى: 300 بكسل
• محاذاة الوحدة: المركز
• الزوايا الدائرية: 8 بكسل

هذا يعتني بقسم العنوان لدينا في معظم الأحيان.

مساحة الصفوف

قبل أن نبدأ القسم التالي ، دعنا نخرج الحشوة السفلية للصف.

• الحشو: 0 بكسل للأسفل

إنشاء قسم النص في نموذج نتائج البحث

الآن نحن جاهزون لإضافة القسم الثاني من القالب الذي سيحتوي على عنوان أرشيف نتائج البحث ومحتوى نتائج البحث.

إنشاء قسم وصف جديد

ضمن القسم العلوي ، أضف قسمًا عاديًا جديدًا إلى التخطيط.

ثم أضف صفًا من عمود واحد إلى القسم.

إضافة عنوان المنشور / الأرشيف كمحتوى ديناميكي

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

أولاً ، أضف وحدة نصية.

احذف النص الوهمي داخل مربع محتوى النص وحدد رمز المحتوى الديناميكي الذي يظهر عند التمرير فوق مربع محتوى النص. ثم حدد عنوان المشاركة / الأرشيف من القائمة.

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

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

• خط النص: مولي
• وزن خط النص: ثقيل
• لون نص النص: # d30c7b
• حجم نص النص: 22 بكسل
• محاذاة النص: الوسط
• نمط الرسوم المتحركة: شريحة
• اتجاه الرسوم المتحركة: لأسفل
• كثافة الرسوم المتحركة: 250٪

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

أضف صفًا جديدًا

ضمن وحدة النص التي تحتوي على عنصر عنوان المنشور / الأرشيف ، أنشئ صفًا جديدًا مكونًا من عمود واحد.

أضف وحدة مدونة إلى الصف. سيعرض هذا المنشورات / المحتوى الفعلي لصفحة نتائج البحث.

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

• المشاركات للصفحة الحالية: نعم
• عدد الوظائف: 9
• طول المقتطف: 120
• إظهار المؤلف: NO

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

ثم قم بتحديث تصميم وحدة المدونة على النحو التالي:

• التخطيط: الشبكة
• خط العنوان: Muli
• وزن خط العنوان: غامق للغاية
• لون نص العنوان: # 3a405a
• حجم نص العنوان: 24 بكسل
• ارتفاع خط العنوان: 1.3em
• خط الجسم: مونتسيرات
• لون النص الأساسي: # 3a405a
• الزوايا الدائرية لتخطيط الشبكة: 10 بكسل
• عرض حدود تخطيط الشبكة: 0 بكسل
• Box Shadow: إظهار لقطة الشاشة
• مربع الظل الوضع الرأسي: 0 بكسل
• مربع قوة الظل الضبابية 15 بكسل
• قوة انتشار الظل المربع: -5 بكسل

بعد ذلك ، قم بتحديث نمط ترقيم الصفحات على النحو التالي:

خلفية القسم والمقسّم

كلمسة أخيرة للتصميم ، قم بتحديث إعدادات القسم على النحو التالي:

• لون الخلفية: #eeeeee
• نمط الفاصل العلوي: انظر الصورة
• لون المقسم: #ffffff
• فاصل الوجه: عمودي
• ترتيب الحاجز: فوق محتوى القسم
• الحشو: 100 بكسل أعلى

النتيجة النهائية

هذه هي النتيجة النهائية لقالب الصفحة عند البحث عن مصطلح "عمل" على الموقع المباشر.

هذا هو التصميم على الجهاز اللوحي والهاتف.

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

افكار اخيرة

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

أتطلع إلى الاستماع منك في التعليقات.

هتافات!