WordPress Parallax: دليلك الكامل للانتقال

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

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

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

لنبدأ من البداية:

ما هي تأثيرات المنظر؟

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

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

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

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

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

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

لماذا تستخدم Parallax على موقع WordPress الخاص بك؟

لنبدأ بأحد الفوائد الأكثر قيمة للتمرير المنظر: إنه أسلوب لافت للنظر لعرض أقسام معينة من مواقع الويب.

الآن دعنا نلقي نظرة على العديد من المواقع التي توضح ما الذي يمكن أن تفعله هذه الطريقة الجديدة الرائعة حتى تتمكن من استنتاج نفسك.

1. عرض تقديمي جريء للمنتج

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

خذ على سبيل المثال باجاجيا .

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

2. يزيد من مشاركة الموقع

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

يخلق التمرير المنظر بيئة رائعة وجذابة وغامرة لقصة تتكشف. يتيح لك Parallax الكشف بشكل ديناميكي عن تفاصيل موقع الويب الخاص بك مع تقدم المستخدم خلال السرد الذي أنشأته له.

3. يحسن UX

وفقًا للبحث ، لا يستغرق الأمر سوى 50 مللي ثانية من المستخدم لتكوين رأي حول موقع ويب وتحديد ما إذا كان يعجبه أم لا (Lindgaard، Fernandes، Dudek، & Brown، 2006).

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

4. يخفض معدلات الارتداد

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

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

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

5. يضيف مشغل العمل

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

يمكن أن يكون التمرير المنظر طريقة ممتازة لجذب الزوار لزيارة موقع الويب الخاص بك.

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

أفضل سمات WordPress Parallax التي يمكنك الاختيار من بينها

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

فيما يلي قائمة ببعض سمات WordPress التي تأتي مع تأثير اختلاف المنظر:

ColibriWP

هل تعلم أن Colibri هي واحدة من أكثر سمات WordPress شيوعًا على WordPress.org ، مع أكثر من 50.000 تثبيت نشط؟ منشئوها مسؤولون أيضًا عن الموضوعات الشهيرة Mesmerize و One Page Express .

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

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

ديفي

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

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

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

صفحة واحدة

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

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

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

المنظر

ايونيك ، هاه؟ تصميم Themify's Parallax هو واحد من أكثرها شعبية. فهو يجمع بين اتجاهين للتصميم من خلال الجمع بين تخطيط صفحة واحدة وتأثيرات اختلاف المنظر ، وهو مصمم لإنشاء تجربة مستخدم أمامية رائعة.

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

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

يعتبر Parallax مثاليًا للمحترفين المبدعين مثل مصممي الويب ومدربي الموسيقى والمحللين بسبب منشئ الصفحات المدمج والتخطيطات المصممة مسبقًا وتعدد الاستخدامات

التجارة الإلكترونية

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

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

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

ستوكهولم

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

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

رونيبي

Ronneby هو موضوع WordPress متعدد الأغراض للشركات والمدونين والمهنيين المبدعين والمستقلين مع أكثر من 40 خيارًا تجريبيًا جاهزًا للاستخدام.

الموضوع جيد الترميز ، ومناسب لكبار المسئولين الاقتصاديين ، ومستجيب تمامًا بحيث يمكنك التركيز على التصميم بدلاً من أداء موقعك.

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

نيفي

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

ستساعدك لوحة إعدادات السمة الشاملة المضمنة في Neve في إعداد موقعك بسرعة وإجراء التعديلات حسب الحاجة.

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

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

WordPress Parallax: إيجابيات وسلبيات

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

تصميم الويب: ما يجب مراعاته عند استخدام المنظر

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

ضع في اعتبارك سرعة تحميل الصفحة

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

تأكد من أن تأثيرات اختلاف المنظر لا تقلل من أداء موقع الويب الخاص بك كثيرًا. يمكنك التحقق من سرعة موقع الويب الخاص بك ومعرفة سبب إبطائه. هناك العديد من الأدوات المتاحة عبر الإنترنت لمساعدتك في هذا المسعى. إحداها هي خدمة PageSpeed ​​Insights المجانية من Google.

استخدمه باعتدال

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

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

انتهى اليك

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

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

نأمل أن تزودك هذه المقالة بالمعلومات التي كنت تبحث عنها. حظا سعيدا في تصميم موقع الويب الخاص بك!