هل تمنيت يومًا أن تعرف كيفية عرض نص أعلى صورة باستخدام Elementor ?

في هذا البرنامج التعليمي الجديد ، سنوضح لك كيفية القيام بذلك.

إذا لم تكن لديك فكرة عما نريد التحدث عنه اليوم ، فنحن ندعوك لمشاهدة الفيديو التالي:

ثم دعنا نعود إلى سبب وجودنا هنا.

لإكمال هذا البرنامج التعليمي ، سوف تحتاج النسخة الاحترافية من Elementor، حيث سنستخدم كود CSS مخصصًا مدعومًا فقط بواسطة هذا الإصدار منElementor.

اكتشف أيضًا دليلنا على: كيفية إنشاء معرض صور باستخدام Elementor

لنقم بإنشاء قسم جديد بهيكل من 3 أعمدة ، ثم في اللوحة ، دعنا نحدد ملف الإستكبار في ارتفاع الحد الأدنىثم أدنى ارتفاع دعنا نضغط VH واضبط شريط التمرير على 100.

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

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

اقرأ أيضا: العنصر: كيفية تكبير بطاقة الملف الشخصي

ثم على انحياز عمودي دعنا نختار محيط.

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

في علامة التبويب الطراز دعنا نعدل لون العنوان بحيث يكون مرئيًا إذا لم يكن كذلك ،

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

أنظر أيضا: Elementor: كيفية إضافة فاصل لإنشاء قسم

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

في القسم الحدود دعونا نعدل الكل نصف قطر الحد من أصل 12. في ظل الصندوق، اضبط شريط التمرير على 0 ل أفقيل 0 من أجل عمودي إلى 40 على Blur ، إلى -10 على البث. يجب أن ترى تأثير ظل جميل تحت صورتك.

في تراكب الخلفية، تحديد كلاسيكي إلى نوع الخلفية و COULEUR اختر واحدة لون أسود، في التعتيم ، دعنا نضبط شريط التمرير على 0.55

في علامة التبويب متقدم، دعونا ننتزع 20 لجميع الهوامش.

دعنا نختار القسم الداخلي وانتقل إلى علامة التبويب الخاصة به متقدم في قسم CSS المخصص ، انسخ والصق مقتطف الشفرة التالي:

/*Afficher ou masquer un contenu au survol*/
selector{
    opacity: 0;
    transition: 0.5s ease-in-out;
}
selector:hover{
    opacity: 1;
}

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

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

ثم انقر فوق علامة التبويب نظرة عامةثم على كلاسيكي إلى نوع الخلفية و COULEUR، حدد أ لون غامق، ثمغموض في 0.55، و ل مدة الانتقال دعنا نضبط شريط التمرير على 0.5.

ها هي النتيجة النهائية لتلاعبنا.

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

قم بمعاينة عملك على الجهاز اللوحي والهاتف الذكي لترى كيف يبدو. ثم احفظه أو قم بتحديثه.

لذا. لقد قمت للتو بعرض نص فوق صورة بامتداد منشئ الصفحة Elementor.

احصل على Elementor Pro الآن!

وفي الختام

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

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

ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...