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

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

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

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

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

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

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

...