هل ترغب في معرفة كيفية إنشاء عنوان التدرج باستخدام Elementor؟

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

ستوضح لك هذه المقالة كيفية الوصول إلى هناك.

يمكنك أيضًا قراءة: كيفية إنشاء عنوان ثنائي اللون في Elementor

لا تقدم كتلة العنوان الأصلية لـ Elementor أي خيارات لتعيين تأثير التدرج اللوني. يمكنك فقط استخدام لون خالص لنص العنوان. ولكن يمكنك إضافة CSS مخصص لإضافة تأثير التدرج إلى عنصر العنوان في Elementor باستخدام CSS المخصص والذي لا يتوفر إلا في Elementor pro.

للقيام بذلك، نقترح طريقتين: إذا كنت تستخدم النسخة الاحترافية وتجيد التعامل مع لغة CSS، فاستخدم الطريقة الأولى. أما إذا كنت تفضل استخدام إضافات ووردبريس، فالطريقة الثانية هي الأنسب.

الطريقة الأولى: إضافة تأثير تدرج لوني إلى عنصر العنوان باستخدام CSS مخصص

بافتراض أنك قمت بترقية Elementor إلى الإصدار المحترف ، قم بإنشاء صفحة / قالب جديد وقم بتحريره باستخدام Elementor. يمكنك أيضًا تحرير صفحة أو قالب موجود.

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

في الكتلة لقب تحت علامة التبويب محتوى، حدد مستوى العنوان في الخيار علامة HTML. يمكنك استخدام أي مستوى من العنوان. ستحتاج هذا كمحدد CSS.

إنشاء عنوان التدرج

اذهب إلى علامة التبويب متقدم وافتح الكتلة عرف المغلق ولصق كود CSS التالي.

محدد h2 {صورة الخلفية: تدرج خطي (إلى اليمين ، # 463f64 ، # 463f64 ، # e2285c ، # e2285c) ؛ -webkit-background-clip: نص ؛ عرض: مضمنة كتلة ؛ الحشو: 14 بكسل ؛ -لون تعبئة النص -webkit: # 00000000 ؛ }

تأكد من مطابقة المحدد مع مستوى العنوان الذي حددته في الخطوة السابقة.

يمكنك تغيير الألوان عن طريق لصق الرمز السداسي العشري للألوان التي تريدها في الخاصية الصورة الخلفية.

أو يمكنك أيضًا استخدام الكود التالي لإنشاء عنوان تدرج بألوان أكثر على التدرج.

selector .elementor-address-title {background: linear-gradient (90deg ، أحمر ، أزرق ، أسود) ؛ -webkit-background-clip: نص ؛ -لون تعبئة النص -webkit: شفاف ؛ }
إنشاء عنوان التدرج

الطريقة 2: إنشاء عنوان تدرج في Elementor باستخدام مكون إضافي

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

اكتشف كيفية تثبيت (إضافة) مكون إضافي على WordPress

Happy Addons إضافة مجانية مع خيارات مدفوعة، وعنصر إنشاء عنوان متدرج الألوان متوفر في النسخة المجانية. يمكنك تحديد نوع التدرج (شعاعي أو خطي)، وموضعه، ومكانه.

يوفر عنصر العنوان أيضًا نفس خيارات تعديل التدرج اللوني التي توفرها إضافات Happy Addons.

هنا! لقد قمت للتو بإنشاء عنوان متدرج على Elementor.

احصل على Elementor Pro الآن!

اكتشف أيضًا بعض الإضافات المتميزة لبرنامج WordPress  

يمكنك استخدام مكونات WordPress الأخرى لإضفاء مظهر حديث وتحسين قبضة مدونتك أو موقعك الإلكتروني.

نحن نقدم لك هنا بعض الإضافات WordPress المتميزة التي سوف تساعدك على القيام بذلك.

1. صفحة خطأ 404 إعادة التوجيه إلى الصفحة الرئيسية أو الصفحة المخصصة

صفحة خطأ 404 إعادة التوجيه إلى الصفحة الرئيسية أو الصفحة المخصصة

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

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

اكتشف ايضا كيفية إصلاح الخطأ 413 على WordPress

لا يقوم برنامج WordPress الإضافي بإعادة التوجيه فحسب ، بل يمكن أن يكون أيضًا حلاً مناسبًا لتحسين تصنيف موقعك على الويب في نتائج محركات البحث.

تحميل | عرض | استضافة المواقع

2. لحمة 

مرشح منتجات Woof woocommerce بواسطة برنامج الترميز realmag777

WOOF هو إضافة قوية ومميزة لتصفية منتجات WooCommerce، تعمل على توسيع وظائفها للسماح لمستخدمي متجرك الإلكتروني بالبحث حسب الفئة وسمات المنتج المخصصة والمزيد. الكلمة وبأسعار شخصية.

إنه يوفر الكثير من الميزات الاحترافية والمتميزة وبدون أدنى شك ، سيكون هذا هو أكثر ما يلفت انتباهك ، إذا جربتها جميعًا. سوف يحسن البحث عن المنتج على متجرك الإلكتروني، مع سهولة استخدام استثنائية.

تحميل | عرض | استضافة المواقع

3. نموذج الاتصال 7 النجاح إعادة توجيه

نموذج الاتصال 7 إعادة توجيه النجاح

نموذج الاتصال 7 Success Redirect هو امتداد لملحق 7 للنموذج WordPress الذي يسمح لك بإعادة توجيه زائر أو مستخدم إلى صفحة بعد تقديم جهة اتصاله.

صُممت هذه الميزة لجعل النموذج أكثر سهولة في الاستخدام عند اكتمال عملية إرسال النموذج، وذلك عن طريق إعادة التوجيه إلى الصفحة التي يختارها المسؤول. وهي سهلة الإعداد للغاية، حيث يمكنك القيام بذلك عن طريق اختيار صفحة من الصفحات الموجودة في لوحة التحكم الخاصة بك أو عن طريق توفير عنوان URL مخصص إعادة التوجيه.

اكتشاف لدينا 8 ووردبريس الإضافات لتحسين كبار المسئولين الاقتصاديين من بلوق الخاص بك

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

تحميل | عرض | استضافة المواقع

الموارد الموصى بها

اكتشف موارد أخرى موصى بها ستساعدك في إنشاء وإدارة موقعك الإلكتروني.

خاتمة

هذا كل شيء! هذا كل ما في هذه المقالة. الآن تعرف كيفية إنشاء عنوان متدرج الألوان على ووردبريس باستخدام إضافة Elementor. شاركنا رأيك! تعليقات وإبداء الملاحظات إذا واجهتك أي صعوبة في القيام بذلك.

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

لا تتردد في شارك مع أصدقائك على الشبكات الاجتماعية المفضلة لديك

...