تخفیف ویژه

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

دسته بندی: آموزش
زمان مطالعه: 4 دقیقه
۲۰ آبان ۱۳۹۵

mjml

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

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

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

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

<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>
          <mj-image width="300" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

همونطور که دیدید، تگ 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 : عرض تصویر رو مشخص میکنه و مقدار پیش فرض اون 100% هست
  • height : ارتفاع تصویر رو مشخص میکنه و پیش فرض اون auto هست
  • src : آدرس تصویر
  • href : با قرار دادن آدرس مورد نظرتون در این ویژگی، تصویر درون یک لینک یا a قرار میگیره و با کلیک بر روی اون، به آدرس مورد نظر خواهید رفت
  • alt : مشخص کردن توضیحاتی برای تصویر. زمانی که تصویر لود نشه، نمایش داده میشه
  • align : میتونین ترازبندی و موقعیت تصویر رو مشخص کنید. پیش فرض اون center هست.
  • title : عنوان تصویر رو مشخص میکنه و زمانی که بر روی تصویر هاور کنید، درون Tooltip نمایش داده میشه. همچنین برای Accessibility هم مفید هست.

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

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

<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>
        	<mj-text font-size="16px">
        		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-text>

        	<mj-spacer height="100px" />

          <mj-image width="300" href="https://7learn.com" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

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

بهمین راحتی.

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

موفق باشید

یا علی

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

جلسات دوره

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

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