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

mjml

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

در جلسه قبل در مورد قرار دادن آیکونهای شبکه اجتماعی صحبت کردیم و توضیح دادیم. در این جلسه قصد داریم در مورد قرار دادن تصویر با استفاده از تگ mj-image و همچنین قرار دادن فاصله با استفاده از تگ mj-spacer، توضیحاتی رو خدمتتون بیان کنیم.

قرار دادن دادن تصویر با استفاده از mj-image

با استفاده از این تگ میتونین تصاویر واکنشگرا و Responsive رو درون ایمیل خودتون قرار بدین. این تگ کار همون تگ img درون html رو انجام میده. اگر ویژگی width رو مشخص و مقداردهی نکنید، عرض تصویر با استفاده از width ستونی که درونش قرار داده شده، مشخص میشه. کد زیر رو در نظر بگیرید:


  
    
      
        
          
        
      
    
  

همونطور که دیدید، تگ mj-image رو قرار دادیم و درون ویژگی src اون، آدرس تصویری که قصد داریم نمایش داده بشه رو گذاشتیم. با استفاده از ویژگی width هم عرض تصویر رو مشخص کردیم. ارتفاع هم متناسب با عرض تغییر میکنه تا Aspect Ratio و نسبت تصویر بهم نریزه. خروجی در مرورگر بصورت زیر میشه:mj-image

بهمین راحتی. ویژگی هایی که برای این تگ مورد استفاده قرار میگیره:

  • Padding
  • padding-top
  • padding-bottom
  • padding-left
  • padding-right
  • container-background-color : رنگ پس زمینه المنت رو مشخص میکنه. مثلا اگر این مورد رو برابر با رنگ قرمز قرار بدم، خروجی بصورت زیر میشه:mj-image 2
  • border : میتونین مانند border که درون css وجود داره، اون رو مقدار دهی کنید و برای تصویرتون border‌های مورد نظرتون رو قرار بدین.
  • border-radius : میتونین با استفاده از این ویژگی گوشه‌های تصاویر رو گرد کنید
  • width : عرض تصویر رو مشخص میکنه و مقدار پیش فرض اون ۱۰۰% هست
  • height : ارتفاع تصویر رو مشخص میکنه و پیش فرض اون auto هست
  • src : آدرس تصویر
  • href : با قرار دادن آدرس مورد نظرتون در این ویژگی، تصویر درون یک لینک یا a قرار میگیره و با کلیک بر روی اون، به آدرس مورد نظر خواهید رفت
  • alt : مشخص کردن توضیحاتی برای تصویر. زمانی که تصویر لود نشه، نمایش داده میشه
  • align : میتونین ترازبندی و موقعیت تصویر رو مشخص کنید. پیش فرض اون center هست.
  • title : عنوان تصویر رو مشخص میکنه و زمانی که بر روی تصویر هاور کنید، درون Tooltip نمایش داده میشه. همچنین برای Accessibility هم مفید هست.

قرار دادن دادن فاصله عمودی با استفاده از تگ mj-spacer

با استفاده از این تگ میتونین درون ایمیلتون، فضای خالی یا فاصله عمودی ایجاد کنید. برای اینکار بصورت زیر عمل میکنیم:


  
    
      
        
        	
        		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        		cillum dolore eu fugiat nulla pariatur.
        	

        	

          
        
      
    
  

میبینید که در ابتدا یک متن رو قرار دادیم و در انتها هم یک تصویر رو گذاشتیم. در بین این دو المنت، یک تگ mj-spacer قرار دادیم و height اون رو برابر با ۱۰۰ پیکسل قرار دادیم. با اینکار به اندازه ۱۰۰ پیکسل فضای خالی بین این دو المنت به وجود خواهد آمد. خروجی در مرورگر بصورت زیر خواهد بود:mj-spacer

بهمین راحتی.

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

موفق باشید

یا علی

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











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

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

نظر دهید

پاسخ دهید

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