كيفية تراكب صورة في ووردبريس

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

ما زلت أتساءل ما هو؟ فقط خذها ببطء ، ودعنا نخرجك!

ما هو التراكب؟

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

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

هل أنت متحمس حتى الآن؟ هيا بنا نبدأ!

كيفية تراكب صورة في ووردبريس

هناك طريقتان يمكنك من خلالهما محاولة تراكب صورة في WordPress: استخدام قالب غلاف Gutenberg واستخدام CSS. أثناء استخدام Gutenberg يساعدك على إنشاء منشور / صفحة تتضمن صورة مع تراكب حتى من ورقة فارغة ، فإن استخدام CSS سيساعدك على تخصيص الصور بسرعة على منشور / صفحة مسبقة الصنع.

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

الطريقة الأولى: استخدام قالب غلاف جوتنبرج

انتقل إلى محرر صفحة جوتنبرج.

الخطوة 1: أدخل صورة باستخدام Cover Block.

انقر فوق إضافة كتلة واختر نوع الكتلة كغطاء .

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

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

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

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

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

الخطوة 2: تخصيص تراكب كتلة الغلاف

بعد ذلك ، ستستمر في إعدادات الحظر لعمل تراكب.

انقر فوق الكتلة> انقر فوق الزر خيارات (العرض كزر ثلاثي النقاط)> اختر إظهار المزيد من الإعدادات .

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

يمنحك خيارين للألوان الصلبة والمتدرجة لتراكب صورة الغلاف الخاصة بك:

سنحاول كلا الخيارين. أولاً ، لنجرب تراكب الألوان الصلبة.

تراكب لون خالص

الآن انت تستطيع:

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

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

معدل التعتيم من 30 إلى 60٪ قيمة مناسبة. إذا قمت بتعيين التعتيم أسفل أو أعلى المعدل المقترح ، فقد يكون التراكب غير مرئي تقريبًا أو غامقًا جدًا لرؤية الخلفية. سأبقي معدل التعتيم عند 50٪ كإعداد افتراضي.

كل شيء هنا! هذه هي الطريقة التي يمكنك بها ببساطة إضافة تراكب لوني خالص إلى صورة الغلاف الخاصة بك.

الآن دعنا ننتقل إلى خيار التدرج اللوني.

تراكب لون متدرج

لون التدرج ، كما ذكر أعلاه ، هو مخطط من لونين مختارين على الأقل. أو ببساطة ، سيتغير لون التراكب على التوالي وبالتدريج من اللون الأول إلى اللون الثاني المختار (وهكذا).

دعونا نرى كيف أقوم بعمل تراكب متدرج لفهمه بشكل أفضل.

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

كما ترى ، يتكون التراكب من 3 نقاط تحكم. كل منها يحمل لونًا خالصًا ، ويمكنك تحريك نقاط التحكم هذه لضبط نظام ألوان التراكب.

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

تعديل آخر يمكنك إجراؤه هو نوع نظام الألوان. يمكنك الاختيار بين النوع الخطي والنوع الشعاعي . باستخدام الكتابة الخطية ، يمكنك أيضًا اختيار اتجاه التراكب.

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

الطريقة الثانية: استخدام CSS

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

لتراكب التدرج

أضف هذا الرمز لتراكب التدرج:

 .background-gradient {
    الموقف: نسبي ؛
}
.background-gradient :: قبل {
    المحتوى: ''؛
    الخلفية: التدرج الخطي (135 درجة ، # 0693e3 ، # 9b51e0) ؛
    الموقف: مطلق.
    أعلى: 0؛
    اليسار: 0؛
    أسفل: 0؛
    اليمين: 0؛
    مؤشر z: 1 ؛
    العتامة: .5 ؛
}

للتراكب الصلب:

أضف هذا الرمز للتراكب الصلب:

 .background-opacity {
    الموقف: نسبي ؛
}
.background-opacity: قبل {
    المحتوى: ''؛
    الموقف: مطلق.
    أعلى: 0؛
    اليسار: 0؛
    أسفل: 0؛
    اليمين: 0؛
    مؤشر z: 1 ؛
    العتامة: .5 ؛
    لون الخلفية: # 000 ؛
}

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

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

• صلب: <div class="background-opacity"> … </div>
• التدرج اللوني: <div class="background-gradient is-style-default"> … </div>

فمثلا:

هكذا أنجزها!

حكم

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