كيفية إضافة صورة إلى النص في Elementor

تحتاج إلى معرفة كيفية إضافة صورة في نص في Elementor ?

Elementor جعل من الممكن للجميع أن يصبحوا مصممي ويب دون الحاجة إلى امتلاك مهارات متقدمة في CSS. يسمح لك المحرر المرئي الخاص به بإنشاء صفحة ويب جميلة دون كتابة سطر واحد من كود CSS. يمكنك فقط إضافة أي عناصر تصميم (عناصر واجهة مستخدم) تريدها وتخصيصها في لوحة الإعدادات.

ومع ذلك ، فإن امتلاك بعض مهارات CSS سيكون بمثابة مكافأة كبيرة في الاستخدامElementor. ستتمكن من تطبيق أنماط فريدة على صفحة الويب الخاصة بك باستخدام الوظيفة لغة تنسيق ويب حسب الطلب د 'Elementor. سنوضح لك في هذه المقالة كيفية إضافة صورة إلى نص في Elementor باستخدام ميزة CSS المخصصة لـ Elementor.

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

أضف صورة إلى نص Elementor

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

انظر أيضا: العنصر: كيفية إضافة جدول محتويات

أضف أداة العنوان إلى مربع التعديل.

انتقل إلى لوحة الإعدادات لاستبدال النص الافتراضي الموجود أسفل علامة التبويب محتويات.

اقرأ أيضًا دليلنا على: Elementor: كيفية استخدام منتقي الألوان

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

ثم انتقل إلى علامة التبويب متقدم وافتح الكتلة Custom 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. إذا كانت لديك أية مخاوف بشأن كيفية الوصول إلى هناك ، فاسمحوا لنا أن نعرف في تعليقات.

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

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

...