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

هل تريد معرفة كيفية إضافة صورة إلى النص في Elementor؟

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

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

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

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

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

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

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

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

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

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

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

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

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

...