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

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

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

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

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

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

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

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

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

من جوتنبرج ، يمكننا استخدام غطاء كتلة.

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

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

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

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

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

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

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

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

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

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

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

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

ضع في اعتبارك الغرض من الصورة

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

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

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

التناغم اللوني

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

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

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

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

اختر التنسيق المناسب

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

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

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

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

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

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

تقنيات الضغط

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

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

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

تصميم متجاوب

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

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

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

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

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

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

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

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