آیا تا به حال آرزو کرده اید که می دانستید چگونه می توانید متن را در بالای یک تصویر با استفاده از آن نمایش دهید Elementor ?

در این آموزش جدید، نحوه انجام آن را به شما نشان خواهیم داد.

اگر نمی دانید امروز در مورد چه چیزی می خواهیم صحبت کنیم، از شما دعوت می کنیم ویدیوی زیر را تماشا کنید:

سپس برگردیم به اینکه چرا ما اینجا هستیم.

برای تکمیل این آموزش، شما نیاز دارید نسخه حرفه ای المنتور، زیرا ما از کد CSS سفارشی استفاده خواهیم کرد که فقط توسط این نسخه پشتیبانی می شودElementor.

همچنین راهنمای ما را در این زمینه کشف کنید: نحوه ایجاد گالری تصاویر با Elementor

بیایید یک بخش جدید با ساختار 3 ستونی ایجاد کنیم، سپس در پانل، اجازه دهید آن را تعریف کنیم ارتفاع سور حداقل ارتفاع، و سپس حداقل ارتفاع بیایید کلیک کنیم VH و نوار لغزنده را روی 100.

بخش 3 ستونی

بیایید ستون میانی و در تب را انتخاب کنیم سبک، در بخش زمینه بیایید کلیک کنیم کلاسیک برای نوع پس زمینه، سپس یک رنگ تیره انتخاب کنید.

بیایید در این ستون قرار دهیم ویجت بخش داخلی ویجت Internal Section به طور پیش فرض با 2 ستون پیکربندی شده است، بیایید یکی از آنها را حذف کنیم. بیایید بقیه را در پانل با تغییر آن پیکربندی کنیم ارتفاع سور حداقل ارتفاع و حداقل ارتفاع بیایید مکان نما را روی 400.

دفعات بازدید: Elementor: چگونه یک کارت پروفایل را بزرگنمایی کنیم

سپس، در چیدمان عمودی بیایید انتخاب کنیم محیط.

سپس رها کنید ویجت عنوان در بخش داخلی بیایید به عنوان عکس عنوان وارد کنیم، و در Alignment، بیایید انتخاب کنیم مرکز.

نمایش متن بالای یک تصویر با Elementor

در برگه سبک بیایید رنگ عنوان را طوری تغییر دهیم که در غیر این صورت قابل مشاهده باشد،

بیایید a را رها کنیم ویجت ویرایشگر متن زیر ویجت عنوان. سپس، در برگه سبک، در Alignment را انتخاب کنید مرکز. بیایید رنگ متن را نیز تغییر دهیم تا قابل مشاهده باشد.

همچنین ببینید: Elementor: چگونه یک تقسیم کننده برای ایجاد یک بخش اضافه کنیم

بیایید انتخاب کنیم ستون وسط و در تب آن سبک، رنگ پس زمینه را بازنشانی کنید و یک تصویر را بارگذاری کنید، سپس موقعیت بیایید انتخاب کنیم مرکز محور, تکرار سور عدم تکرار, پوشش سور اندازه.

نمایش متن بالای یک تصویر با Elementor

در بخش مرز بیایید همه را اصلاح کنیم شعاع مرزی از 12. به سایه جعبه، نوار لغزنده را روی 0 برای افقی، به 0 برای عمودی، به 40 در Blur، به -10 در پخش شما باید یک افکت سایه زیبا را در زیر تصویر خود ببینید.

نمایش متن بالای یک تصویر با Elementor

در باره پوشش پس زمینه، انتخاب کنید کلاسیک برای نوع پس زمینه و رنگ یکی را انتخاب کن رنگ سیاه، در Opacity، اجازه دهید نوار لغزنده را روی آن تنظیم کنیم 0.55

در برگه پیشرفته، بگیریم 20 برای همه حاشیه ها

بیایید خودمان را انتخاب کنیم بخش داخلی و به تب آن بروید پیشرفته در بخش Custom CSS قطعه کد زیر را کپی و جایگذاری کنید:

/*Afficher ou masquer un contenu au survol*/
selector{
    opacity: 0;
    transition: 0.5s ease-in-out;
}
selector:hover{
    opacity: 1;
}
نمایش متن بالای یک تصویر با Elementor

(اگر این بخش را ندارید پس نسخه Pro را ندارید، اگر می خواهید ادامه دهید باید نسخه خود را ارتقا دهید).

بیایید یک بار دیگر ستون میانی بخش خود را در تب آن انتخاب کنیم سبک، و در بخش پوشش پس زمینه، بررسی کنید که ما در برگه هستیم طبیعی، بیایید پایین بیاوریم کدورت à 0.

سپس بر روی تب کلیک کنید بررسی اجمالی، سپس ادامه دهید کلاسیک برای نوع پس زمینه و رنگ، a را انتخاب کنید رنگ تیره، سپسکدورت سور 0.55، و برای مدت زمان انتقال بیایید نوار لغزنده را روی آن تنظیم کنیم 0.5.

در اینجا نتیجه نهایی دستکاری ما است.

نمایش متن بالای یک تصویر با Elementor

بیایید ستون خود را 2 بار کپی کنیم و 2 ستون خالی دیگر را حذف کنیم. تنها چیزی که باقی می ماند تغییر تصویر پس زمینه و همچنین تغییر است. محتویات ویرایشگرهای متن برای 2 ستون جدید.

نمایش متن بالای یک تصویر با Elementor

کار خود را در تبلت و تلفن هوشمند پیش‌نمایش کنید تا ببینید چگونه به نظر می‌رسد. سپس آن را ذخیره یا به روز کنید.

بنابراین. شما به تازگی متنی را در بالای تصویر با علامت نمایش داده اید صفحه ساز Elementor.

اکنون Elementor Pro را دریافت کنید!

نتیجه

بنابراین ! این برای این مقاله است که به شما نشان می دهد چگونه متن را در بالای یک تصویر نمایش دهید. اگر در مورد نحوه رسیدن به آنجا نگرانی دارید، به ما اطلاع دهید نظر.

با این حال ، شما همچنین می توانید مشورت کنید منابع مااگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.

اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.

...