آموزش استفاده از mjml برای ساخت ایمیلهای واکنشگرا (جلسه 20) - آموزش قرار دادن دکمه

- visibility ٠ mode_comment

mjml

در این جلسه با ادامه آموزش mjml در خدمت شما هستیم.

در جلسه قبل در مورد قرار دادن صورت حساب یا فاکتور صحبت کردیم و توضیح دادیم. در این جلسه قصد داریم در مورد قرار دادن دکمه و لینک با استفاده از تگ mj-button، توضیحاتی رو خدمتتون بیان کنیم.

قرار دادن دکمه با استفاده از تگ mj-button

با استفاده از این تگ میتونین درون ایمیلهای خودتون، دکمه های مورد نظرتون رو قرار بدین و کاربران با کلیک بر روی اونا به صفحات خاصی منتقل خواهند شد و چیزی که شما قصد دارید اونا ببینن رو خواهند دید. کد زیر رو در نظر بگیرید:

همونطور که دیدید یک تگ mj-button رو قرار دادیم و درون اون یک متن رو گذاشتیم. این متن در خروجی، درون دکمه نمایش داده خواهد شد. نام فونت مورد نظر رو براش مشخص کردیم و همچنین رنگ متن رو سفید و رنگ پس زمینه دکمه رو نازنجی رنگ کردیم. خروجی در مرورگر بصورت زیر خواهد بود:mjml button

همونطور که دیدید به زیبایی دکمه مورد نظر نمایش داده شد. ویژگی هایی که برای این تگ قابل استفاده هستند:

  • background-color : رنگ پس زمینه دکمه رو مشخص میکنه و پیش فرض اون 414141 هست
  • border : مثل همون قواعدی که درون CSS وجود داره، میتونین اینجا هم border قرار بدین و استایل اون رو مشخص کنید
  • border-bottom
  • border-top
  • border-left
  • border-right
  • border-radius : گوشه های دکمه رو گرد میکنه و مقدار پیش فرض اون 3 پیکسل هست
  • font-size : سایز فونت رو مشخص میکنید و مقدار پیش فرض اون 13 پیکسل هست
  • font-wight : ضخامت متن رو مشخص میکنه
  • font-family : نام فونت مورد نظر برای متن رو مشخص میکنه
  • color : رنگ متن رو مشخص میکنه و پیش فرض اون fff یا سفید هست
  • text-decoration : میتونین خطی رو در رو، زیر یا بالای متن قرار بدین
  • text-transform : میتونین حروف متن رو بزرگ و کوچک کنید
  • align : ترازبندی خود دکمه در ستون رو مشخص میکنه و پیش فرض اون Center هست
  • vertical-alignment : ترازبندی عمودی رو مشخص میکنه و مقدار پیش فرض اون middle هست
  • href : اگر لینکی رو درون این ویژگی قرار بدین، دکمه بصورت لینک در میاد و هر زمان که بر روی اون کلیک بشه، کاربران به اون لینک منتقل میشن. مثل کد زیر:
  • inner-padding : فاصله یا حاشیه درونی دکمه رو مشخص میکنه و پیش فرض اون 15px 22px هست
  • padding : فاصله رو از طرفین تنظیم میکنه
  • padding-right
  • padding-left
  • padding-top
  • padding-bottom
  • width : عرض دکمه رو مشخص میکنه
  • height : ارتفاع دکمه رو مشخص میکنه

امیدوارم از این جلسه خوشتون اومده باشه.

موفق باشید

یا علی

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.