illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

0 134 ۲۰ آبان ۹۵

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

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

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

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

بهمین راحتی.

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

موفق باشید

یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram