ما هو وكيفية إضافة تأثير اختلاف المنظر في WordPress

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

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

1. ما هو ال Parallax Scrolling؟
2. كيفية إضافة تأثير المنظر باستخدام البرنامج المساعد
3. أفضل سمات وقوالب WordPress المنظر

ما هو Parallax Scrolling؟

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

لمحة تاريخية

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

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

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

كيف تعمل

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

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

لماذا هو جيد

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

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

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

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

أضف تأثير اختلاف المنظر باستخدام البرنامج المساعد

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

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

تثبيت البرنامج المساعد

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

استخدام البرنامج المساعد لإضافة Parallax مع المحرر الكلاسيكي

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

أولاً ، حدد نوع الخلفية. في هذا المثال ، سنستخدم صورة.

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

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

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

يمكن تعيين أبعاد وارتفاع صورة المنظر ضمن علامة التبويب "الأنماط".

أخيرًا ، انقر فوق الزر " إدراج" .

يجب أن يظهر الرمز المختصر التالي الآن في المحرر الخاص بك:

 [nk_awb awb_type = ”image” awb_stretch = ”صحيح” awb_image = ”22 ″ awb_image_size =” full ”awb_parallax =” التمرير ”awb_parallax_speed =” 0.5 ″ awb_mouse_parallax = ”صحيح” awb_mouse_spallax_sb = 10000
المحتوى الخاص بك هنا
[/ nk_awb] 

ستحتاج إلى استبدال الكلمات " المحتوى الخاص بك هنا " بالمحتوى الفعلي الخاص بك (نص ، صورة ، فيديو ...). لا تنس النقر فوق حفظ .

انتقل إلى موقع الويب الخاص بك وتحقق من المنشور أو الصفحة التي أضفتها لتوك المنظر لمعرفة ما إذا كان كل شيء يعمل بشكل صحيح.

استخدام البرنامج المساعد لإضافة Parallax مع محرر Gutenberg

هذا البرنامج المساعد متوافق مع Gutenberg أيضًا. لاستخدامه ، انقر فوق كتلة الخلفية (AWB) لبدء إضافة تأثير المنظر.

مثل كل كتلة أخرى ، تحتوي مجموعة الخلفية (AWB) على خياراتها الخاصة التي تكاد تكون مماثلة لتلك الموجودة في Classic Editor .

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

قوالب وقوالب WordPress Parallax

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

1. بازار - سمة تجارة إلكترونية حديثة وشارب
2. PlayerX - سمة عالية الأداء للألعاب والرياضات الإلكترونية
3. أزاليا - موضوع تصوير الأزياء
4. بوسطن - موضوع Parallax WordPress للشركات
5. Hypnos - سمة WordPress Parallax من صفحة واحدة

1. البازار - سمة تجارة إلكترونية حديثة وشارب

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

يأتي Bazaar مزودًا بالمكوِّن الإضافي Select Core القوي والأكواد المختصرة للمنتج المخصص وأقسام خلفية الفيديو والأدوات الاجتماعية وخريطة Google القابلة للتخصيص. الموضوع ، بالطبع ، مستجيب تمامًا ويتضمن منشئ صفحة WPBakery العظيم .

الميزات التي تجعل Bazaar أفضل سمة لـ Parallax WordPress:

• التمرير السلس
• تحسين محركات البحث
• الترجمة جاهزة
• البرنامج المساعد Free Slider Revolution
• 1-انقر فوق استيراد المحتوى التجريبي

2. PlayerX - سمة عالية الأداء للألعاب والرياضات الإلكترونية

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

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

الكل في الكل ، PlayerX هو سمة تُظهر حقًا ما هو كل ما يتعلق بالتمرير المنظر وكيف يجب استخدامه .

الميزات التي تجعل من PlayerX أفضل سمة ووردبريس للمنظر:

• الرموز القصيرة للمباريات والجري
• فريق كاروسيل
• بحث متكامل
• 7 حزم خطوط الأيقونة
• متوافق مع WooCommerce

3. أزاليا - موضوع تصوير الأزياء

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

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

الميزات التي تجعل Azalea أفضل سمة WordPress للمنظر:

• معارض التدقيق المحمية بالمرور
• رمز المنظر القصير
• منصة العملاء
• رمز CTA القصير
• 5 أنماط رأس

4. بوسطن - موضوع ووردبريس Parallax Corporate

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

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

الميزات التي تجعل بوسطن أفضل سمة ووردبريس للمنظر:

• معاينة العرض المبسط
• تويتر لايف
• أعمال حافظة غير محدودة
• فليكس سلايدر و ريفوليوشن سلايدر
• نموذج جهة اتصال العمل والنشرة الإخبارية

5. Hypnos - سمة OnePage Parallax WordPress

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

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

الميزات التي تجعل Hypnos أفضل سمة لـ Parallax WordPress:

• متوافق مع WPML
• تحسين محركات البحث
• شبكية العين جاهزة
• أداة التحميل المسبق المخصصة
• دعم الدردشة الحية

ختاما

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

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

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

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

بالطبع ، عندما تختار سمة WP parallax المتميزة ، فلا داعي للقلق بشأن هذه الأشياء كما فكر مؤلفو السمة جيدًا من أجلك.

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

ما هو رأيك في تمرير المنظر في ووردبريس؟ نود أن نسمع منك في قسم التعليقات أدناه!

نأمل أن تكون قد وجدت هذه المقالة مفيدة. إذا أعجبك ذلك ، فلا تتردد في الاطلاع على بعض هذه المقالات أيضًا!

• أفضل ثيمات WordPress الرائعة والأنيقة
• إضافات WordPress للنوافذ المنبثقة التي تجعل زوار موقعك يبتسمون
• 5+ ملحقات WordPress للصور المثالية على YouTube