في هذا البرنامج التعليمي الجديد ، سنوضح لك كيفية إنشاء زر متعدد الأسطر برمز Elementor.
وتجدر الإشارة إلى أنك لن تحتاج إلى أي مكون إضافي للقيام بذلك. النسخة Elementor سوف يمنحك Pro كل ما تحتاجه للوصول إلى هناك
للحصول على فكرة عما سنفعله في هذا البرنامج التعليمي ، سيظهر لك الفيديو التالي معاينة لما سنفعله معًا.
الآن دعنا نبدأ العمل.
اكتشف ايضا كيفية إنشاء صفحة مخصصة لـ WooCommerce بتنسيق هومعلمه
لنقم بإنشاء قسم جديد عن طريق اختيار القسم الذي يحتوي على عمود.
ثم في اللوحة الجانبية ، دعنا نختار ارتفاع الحد الأدنى إلى الإستكبار و أدنى ارتفاع دعنا نضغط VH واضبط شريط التمرير على 100.
الآن اسحب ملف القطعة زر في منطقة عملنا
في علامة التبويب محتويات من الشريط الجانبي دعنا نغير المجال نص عن طريق الدخول تنزيل من متجر التطبيقاتثم على انحياز دعنا نضغط مركز
ثم انقر فوق زر مكتبة الرموز ، واكتب apple في شريط البحث ، وحدد الرمز الذي نهتم به وانقر على زر الإدراج.
بالعودة إلى الشريط الجانبي ، دعنا نغير تباعد الرموز إلى 14
اقرأ أيضا: كيفية إنشاء بطاقة تأثير من محفظة في Elementor
في علامة التبويب الطراز، دعنا نعدل لون الخلفية زر على نوار
دعونا نغيره حجم تشغيل الطباعة 25
في نصف قطر الحد، دعونا ننتزع 20 لجميع أنصاف أقطار الحافة. بالنسبة إلى هوامش داخلية، دعونا ننتزع +14 36 للهوامش لأعلى ولليمين ولأسفل ولليسار.
انظر أيضا: كيفية تغيير الصورة بضغطة زر في Elementor
الآن سوف نذهب إلى علامة التبويب محتويات ودعنا نحول نص الزر إلى سطرين.
للقيام بذلك ، انسخ الكود التالي والصقه في حقل النص:
<span class="top-small-text">TEXTE DE PREMIERE LIGNE</span> <br> TEXTE DE DEUXIEME LIGNE
فلنقم بعد ذلك بتغيير النص FIRST LINE TEXT إلى تحميل على ونص SECOND LINE TEXT بتنسيق Apple Store
الآن نحن بحاجة إلى مزيد من التحكم في السطر الأول والثاني
للقيام بذلك ، دعنا ننتقل إلى علامة التبويب متقدم ثم في القسم CSS مخصصة، انسخ والصق الكود التالي:
selector .elementor-button-icon{
font-size: 62px;
}
selector .top-small-text{
font-size: 16px;
color: #ffffff;
}
تعليق : إذا لم يكن لديك هذا القسم ، فيجب عليك الترقية بسرعة إلى الإصدار المحترف.
لتخصيص الزر الخاص بك بشكل كافٍ ، يمكنك على سبيل المثال تكبير الرمز عن طريق تعديل قيمة font-size من قسم الكود:
selector .elementor-button-icon{
font-size: 62px;
}
اقرأ أيضا: كيفية تصدير واستيراد نماذج العنصر
لتخصيص لون السطر الأول فقط قم بتغيير قيمة color وإذا كنت تريد تغيير قيمة حجم الخط ، فعليك تغيير ملف font-size من قسم الكود التالي:
selector .top-small-text{
font-size: 16px;
color: #ffffff;
}
وهنا قمت للتو بإنشاء زر متعدد الأسطر برمز. يمكنك معاينته.
احصل على Elementor Pro الآن !!!
وفي الختام
لذا ! هذا كل ما في هذه المقالة التي توضح لك كيفية إنشاء زر متعدد الأسطر مع وجود رمز فيه Elementor. إذا كانت لديك أية مخاوف بشأن كيفية الوصول إلى هناك ، يسعدنا أن نسمع منك في تعليقات.
ومع ذلك ، يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...