في الآونة الأخيرة ، سألنا أحد قرائنا عن كيفية إضافة تأثير اختلاف المنظر إلى أي سمة ووردبريس؟ تأثير المنظر هو اتجاه تصميم الويب حيث يتم تمرير صورة الخلفية بشكل أبطأ من محتوى المقدمة. في هذه المقالة ، سنوضح لك كيفية إضافة تأثير اختلاف المنظر بسهولة إلى أي سمة ووردبريس.
إضافة تأثير اختلاف المنظر إلى أي سمة ووردبريس
تأثير المنظر هو تقنية حديثة لتصميم الويب حيث يتم تمرير عنصر الخلفية بشكل أبطأ من محتوى المقدمة. يضيف هذا التأثير عمقًا إلى صور الخلفية ويجعلها تشعر بالتفاعل.
يمكن استخدام تأثير المنظر على الصفحات المقصودة أو المحتوى الطويل أو صفحات المبيعات أو الصفحة الرئيسية لموقع ويب تجاري . إنها طريقة رائعة لتسليط الضوء على أقسام مختلفة في صفحة طويلة.
تأتي العديد من سمات ووردبريس المتميزة مع تأثير اختلاف المنظر المدمج على صفحتهم الرئيسية. يمكنك أيضًا استخدام تأثير المنظر في معظم إضافات أداة إنشاء صفحات ووردبريس أيضًا.
ومع ذلك ، ليست كل السمات لها تأثير اختلاف المنظر المدمج ، وقد لا ترغب في استخدام أداة إنشاء الصفحات لإنشاء تخطيطات صفحة مخصصة فقط من أجل تأثير اختلاف المنظر.
دعنا نلقي نظرة على كيفية إضافة تأثير خلفية المنظر بسهولة إلى أي سمة ووردبريس.
لا تتطلب منك هذه الطريقة إضافة أي كود إلى قالب ووردبريس الخاص بك. إنه أسهل ويوصى به لمعظم المستخدمين.
أول شيء عليك القيام به هو تثبيت وتفعيل المكون الإضافي Advanced ووردبريس Backgrounds . لمزيد من التفاصيل ، راجع دليلنا خطوة بخطوة حول كيفية تثبيت مكون ووردبريس الإضافي .
عند التنشيط ، تحتاج إلى تعديل الصفحة أو النشر حيث تريد إضافة تأثير اختلاف المنظر. ستلاحظ زر “Advanced ووردبريس Backgrounds” الجديد في المحرر المرئي .
زر الخلفية المتقدمة في ووردبريس
سيؤدي النقر فوقه إلى ظهور نافذة منبثقة حيث يمكنك تغيير الإعدادات المختلفة للخلفية التي تريد إضافتها.
أولاً ، تحتاج إلى تحديد صورة كنوع الخلفية الخاصة بك ثم تحديد خيار “التمدد”.
إعدادات خلفية المنظر
بعد ذلك ، تحتاج إلى النقر فوق الزر “تحديد صورة” لتحميل أو تحديد الصورة التي تريد استخدامها. تأكد من أنك تستخدم صورة كبيرة وإلا ستظهر منقطة.
بعد ذلك تحتاج إلى تمكين Parallax عن طريق اختيار نوع المنظر. هناك عدد من الأنماط المتاحة التي يمكنك تجربتها. تأثير المنظر الأكثر استخدامًا هو التمرير.
انقر فوق الزر “إدراج” للمتابعة.
سيضيف المكون الإضافي الآن رمزًا قصيرًا داخل محرر منشور ووردبريس الخاص بك. سيبدو شيئا من هذا القبيل:
[nk_awb awb_type = ”image” awb_stretch = ”true” awb_image = ”22 ″ awb_image_size =” full ”awb_parallax =” التمرير ”awb_parallax_speed =” 0.5 ″ awb_mouse_parallax = ”صحيح” awb_mouse_parallax_sb = 10000
المحتوى الخاص بك هنا
[/ nk_awb]استبدل “المحتوى الخاص بك هنا” بالمحتوى الخاص بك ثم احفظ صفحتك.
يمكنك الآن زيارة موقع الويب الخاص بك لمشاهدته أثناء العمل.
معاينة تأثير المنظر
تتطلب هذه الطريقة أن يكون لديك فهم جيد لـ HTML / CSS وكذلك كيفية عمل قوالب ووردبريس.
أولاً ، ستحتاج إلى تحميل الصورة التي تريد استخدامها لتأثير المنظر إلى مكتبة وسائط ووردبريس الخاصة بك من خلال زيارة الوسائط »إضافة صفحة جديدة .
بعد تحميل الصورة ، تحتاج إلى نسخ عنوان URL للصورة عن طريق تحرير الصورة في مكتبة وسائط ووردبريس.
انسخ رابط الصورة
بعد ذلك ، تحتاج إلى إضافة HTML التالي إلى الصفحة أو النشر حيث تريد إظهار تأثير المنظر. يمكنك أيضًا إضافة HTML هذا إلى قالب ووردبريس الخاص بك أو القالب الفرعي .
<div class="parallax">
<div class="parallax-content">
Your content goes here...
</div>
</div>بعد ذلك ، تحتاج إلى إضافة CSS المخصص التالي إلى قالب ووردبريس الخاص بك.
.parallax {
background-image: url("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg");
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-left:-410px;
margin-right:-410px;
}
.parallax-content {
width:50%;
margin:0 auto;
color:#FFF;
padding-top:50px;
} لا تنس استبدال عنوان URL لصورة الخلفية بصورة الخلفية الخاصة بك.
يمكنك الآن حفظ التغييرات وزيارة موقع الويب الخاص بك لرؤيتها أثناء العمل.
تمت إضافة تأثير المنظر مع CSS
ملاحظة: قد تحتاج إلى ضبط CSS للعمل مع تخطيط موقعك.
نأمل أن تساعدك هذه المقالة في تعلم كيفية إضافة تأثير المنظر بسهولة إلى أي سمة ووردبريس. قد ترغب أيضًا في الاطلاع على قائمتنا الضخمة لأهم النصائح والحيل والقرصنة في ووردبريس المطلوبة .
نأمل أن تساعدك هذه المقالة في تعلم كيفية تغيير نظام ألوان الادمن في الووردبريس. قد ترغب أيضًا في رؤية مختارات حول الإضافات (بلجن) في الووردبريس ودليلنا حول كيفية اختيار أفضل شركات حجز النطاقات والاستضافات وكيفية التعامل معها.
إذا أعجبك هذا المقال ، فيرجى الاشتراك في قناتنا على اليوتيوب لدروس فيديو في الووردبريس. ويمكنك أيضًا أن تجدنا على فيسبوك وتويتير وانستجرام وتيكتوك، لطفاً لا تنسى متابعتنا، فنحن نسعد برؤيتك..
