كيفية إضافة وتحرير صور الخلفية في ووردبريس

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

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

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

إضافة صورة إلى خلفية صفحتك في ووردبريس

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

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

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

أولاً، دعنا نحمل صورة الخلفية، يمكننا استخدام مكتبة الوسائط العادية أو إضافتها داخل محتوى الصفحة/المنشور مباشرةً، باستخدام WP Media Folder من الممكن استخدام أدواتهم من كلا الخيارين.

من Gutenberg، يمكننا استخدام الغلاف .

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

نحن بحاجة إلى النقر فوق "إضافة الوسائط" وتحديد أي من الخيارات اعتمادًا على الطريقة التي نريد المتابعة بها.

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

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

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

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

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

نصائح وأفضل الممارسات لاختيار صور الخلفية المناسبة في ووردبريس

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

1. اختيار صور الخلفية المناسبة

فهم علامتك التجارية

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

فكر في غرض الصورة

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

الحفاظ على البساطة

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

انسجام الألوان

تأكد من أن صورة الخلفية تتناسب مع نظام ألوان موقعك. أدوات مثل Adobe Color تساعدك في تحديد الألوان المتناسقة التي تحافظ على تناسق تصميمك.

صور عالية الجودة

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

2. تحسين أحجام الصور وتنسيقاتها للاستخدام على الويب

اختر التنسيق الصحيح

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

PNG للرسومات: استخدم PNG للصور التي تحتوي على نص أو رسومات أو تحتاج إلى شفافية، على الرغم من أن ذلك غالبًا ما يؤدي إلى أحجام ملفات أكبر.

WebP لاستخدام الويب: فكر في استخدام تنسيق WebP، الذي يوفر ضغطًا وجودة فائقة لاستخدام الويب.

أبعاد حجم الصورة

الأبعاد الصحيحة: حدّد حجم صورك بناءً على الأبعاد المطلوبة في تصميمك. قد تستغرق الصور الكبيرة وقتًا أطول للتحميل، مما يؤثر سلبًا على تجربة المستخدم.

استخدم دقة 1920×1080 للخلفيات: الدقة الشائعة لصور الخلفية هي 1920×1080 بكسل، وهي مناسبة لمعظم الأجهزة، ولكن تأكد من أن حجمها مناسب لتصميمك.

تقنيات الضغط

ضغط الصور: استخدم أدوات مثل ImageRecycle لتقليل أحجام الملفات دون المساس بالجودة.

Lazy Loading : قم بتنفيذ lazy loading لتحسين أوقات التحميل عن طريق تحميل الصور فقط عندما تصبح مرئية للمستخدم.

3. ضمان التوافق مع أحجام الشاشات والأجهزة المختلفة

تصميم متجاوب

استعلامات الوسائط CSS: استخدم استعلامات الوسائط CSS لضبط صور الخلفية لأحجام الأجهزة المختلفة، مما يسمح بتجربة مخصصة على الأجهزة المحمولة واللوحية وسطح المكتب.

تقنيات صورة الخلفية: استخدم خاصية CSS "background-size: cover;". يضمن هذا تغطية الصورة للمساحة بأكملها دون تشويه نسبة العرض إلى الارتفاع، وهي متاحة في جميع منشئي الصفحات الرئيسيين كخيار لضبط الصورة.

اختبار عبر الأجهزة

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

معاينة التصميم المستجيب: يمكن أن تساعدك أدوات مثل أدوات المطور في Google Chrome في عرض كيفية ظهور موقعك على الأجهزة المختلفة قبل الانتهاء من التصميم.

قم بتخصيص موقع WordPress الخاص بك إلى أقصى حد

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

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