العنصر: كيفية إنشاء زر متعدد الأسطر برمز

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

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

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

...