نحوه افزودن تصویر به متن در Elementor

باید دریابید که چگونه یک تصویر را در متن اضافه کنید Elementor ?

Elementor این امکان را برای همه فراهم کرد که بدون نیاز به مهارتهای پیشرفته CSS به یک طراح وب تبدیل شوند. ویرایشگر بصری آن به شما امکان می دهد بدون نوشتن حتی یک خط کد CSS یک صفحه وب زیبا ایجاد کنید. شما فقط می توانید عناصر طراحی (ابزارک) مورد نظر خود را اضافه کرده و در پانل تنظیمات سفارشی کنید.

با این حال، داشتن برخی از مهارت های CSS یک امتیاز عالی در استفاده خواهد بودElementor. شما می توانید با استفاده از تابع، استایل های منحصر به فردی را در صفحه وب خود اعمال کنید CSS سفارشی D 'Elementor. در این مقاله به شما نشان خواهیم داد که چگونه با استفاده از ویژگی CSS سفارشی Elementor، یک تصویر به متن در Elementor اضافه کنید.

در برخی ابزار در طرح هایی مانند GIMP و Photoshop معمولاً برای افزودن یک تصویر در متن نیاز به اضافه کردن یک نشانگر لایه دارید. در Elementor، می‌توانید همین کار را با افزودن کد CSS انجام دهید که ویجت Elementor Title و ویجت Text هیچ گزینه تنظیمی برای افزودن تصویر به عنوان پس‌زمینه ندارد.

یک تصویر به متن Elementor اضافه کنید

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

همچنین ببینید: Elementor: نحوه اضافه کردن فهرست مطالب

ابزارک Title را به جعبه ویرایش اضافه کنید.

به صفحه تنظیمات بروید تا متن پیش فرض را در زیر برگه جایگزین کنید محتویات.

همچنین راهنمای ما را در اینجا بخوانید: Ementor: نحوه استفاده از انتخابگر رنگ

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

سپس به برگه بروید پیشرفته و بلوک را باز کنید سفارشی CSS و کد CSS زیر را جایگذاری کنید. URL تصویر را با URL تصویر خود جایگزین کنید.

selector .elementor-heading-title
{
     background: url("https://www.wppagebuilders.com/wp-content/uploads/2020/05/gradient-progress-bar-elementor.jpg") green repeat 30% 70%  ;
     -webkit-background-clip:text;
     -webkit-text-fill-color:transparent;
}

در اینجا مثال آورده شده است.

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

نتیجه

اینجاست این برای این مقاله است که به شما نشان می دهد چگونه می توانید تصویر را در Elementor به متن اضافه کنید. اگر در مورد چگونگی رسیدن به آنجا نگرانی دارید fبه ما اطلاع دهید در نظر.

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

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

...