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

mjml

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

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

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

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


  
    
      
        
          
            Don't click me!
          
        
      
    
  

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

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

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

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

موفق باشید

یا علی

چه امتیازی به این مقاله می دید؟











نویسنده
محمد اسفندیاری

بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

نظر دهید

پاسخ دهید

Logo
بازیابی رمز عبور
مقایسه موارد
  • کل (0)
مقایسه
0