كيفية إضافة Parallax Scrolling إلى موقع WordPress الخاص بك

نشرت: 2022-09-08

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

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

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

كيف يمكنني عمل صور متحركة في WordPress؟

الائتمان: Vardan Meliksetyan

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

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

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

ما هي خلفية المنظر في وورد؟

الائتمان: www.responsivemiracle.com

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

يحدث تأثير المنظر عندما تتحرك خلفية صفحة الويب بمعدل أبطأ من المقدمة. عندما يقوم المشاهدون بالتمرير لأسفل ، يمكنهم رؤية أن المحتوى ثلاثي الأبعاد بمعنى العمق. تتوفر الآن تأثيرات المنظر على غالبية سمات WordPress المتميزة. يمكن تطبيق تأثير Parallax على أي صفحة أو منشور على موقع ويب ، ولكن يظهر بشكل شائع على الصفحات الرئيسية والصفحات المقصودة ومواقع الويب المكونة من صفحة واحدة. عند إنشاء قسم اختلاف المنظر لموقع الويب الخاص بك ، ضع في اعتبارك الإرشادات التالية. تم تضمين تأثير اختلاف المنظر المدمج في سمة Total Multipurpose WordPress. هناك عدد من السمات الأخرى المتاحة في متجر Total ، مثل Divi من Elegant Themes و Parallax from Themify و Total by Total.

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

كيفية إنشاء موقع WordPress مذهل مع تأثير المنظر

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

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

الائتمان: لم يذكر اسمه - WP Mayor

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

3 طرق لإنشاء تأثير Parallax Scrolling في WordPress

هناك طرق عديدة لإنشاء تأثير تمرير المنظر في WordPress. br> a href = 'html5 ′ rel =' shtml5 ′ rel = 'shtml5 ′ rel =' shtml5 ′ rel = 'shtml5 ′ rel =' shtml5 ′ rel = 'shtml يجب أخذ عدد من العوامل في الاعتبار عند إنشاء تأثير تمرير بدون حواف في WordPress. يجب أن تفكر في نوع التأثير الذي تريد إنشاءه ، وحجم العناصر التي ستظهر اختلافًا مختلفًا ، وموضع العناصر التي سيتم نقلها على الصفحة. تتمثل الخطوة الأولى في تحديد معلمات تأثير اختلاف المنظر الخاص بك ، والذي سيسمح لك بالبدء في إنشاء كود HTML المطلوب لتنفيذه. يجب تحديد عناصر الصفحة بالإضافة إلى عنصر المنظر وموضع العناصر على الصفحة وحجم العناصر. بمجرد إنشاء كود HTML وتحميله على موقع WordPress الخاص بك ، ستحتاج إلى تنشيط تأثير اختلاف المنظر. لتحقيق ذلك ، يجب عليك أولاً تعديل ملف إعدادات WordPress.

Parallax Scrolling WordPress Elementor. المنظر التمرير WordPress Elementor

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

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

Parallax Website WordPress

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

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

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

تأثير اختلاف المنظر: هل يستحق وقت التحميل الإضافي؟

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

أمثلة على اختلاف المنظر في ووردبريس

هناك العديد من الأمثلة الرائعة لمواقع WordPress parallax . سيكشف بحث Google السريع عن الكثير من التصميمات الملهمة. تتضمن بعض الأشياء المفضلة لدينا ما يلي: 1. http://www.kriesi.at/themes/enfold/ 2. http://www.graphicline.co.za/ 3. http://www.onepagelove.com/ wordpress-parallax-theme 4. http://www.templatemonster.com/blog/20-best-parallax-wordpress-themes/ 5. http://www.elegantthemes.com/blog/resources/parallax-wordpress-themes

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

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

صفحة واحدة Parallax WordPress Theme

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

كيفية إنشاء موقع التمرير Parallax

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