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

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



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

0 166 ۱۸ آبان ۹۵

mjml

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

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

قرار دادن جدول با استفاده از تگ mj-table

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

همونطور که دیدید کدنویسی اون شبیه به HTML هست. در ابتدا تگ mj-table رو قرار میدیم و برای ساخت هر ردیف از tr و برای ساخت هر سلول یا ستون از td استفاده میکنیم. همونطور که در بالا میبینید، سلولهایی که در ردیف اول قرار داده شدن، th هستن و مخفف table heading هستن. با اینکار متنهایی که در ردیف اول قرار دارن، ضخیم تر نمایش داده میشن. برای هر tr یا td یک ویژگی style قرار دادیم و ویژگی هایی رو برای اونا مشخص کردیم. بیشتر در بالا با استفاده از padding، فاصله متن از چارچوب سلول رو مشخص کردیم. خروجی بصورت زیر خواهد بود:mjml table

ویژگی های قابل استفاده برای این تگ:

  • color : مشخص کردن رنگ متن
  • cellpadding : فاصیه بین سلولها رو مشخص میکنه و بر حسب پیکسل هست
  • cellspacing : فاصله بین سلول و border رو مشخص میکنه
  • font-family : نام فونت جدول رو مشخص میکنه
  • font-size : سایز فونت رو مشخص میکنه و مقدار پیش فرض اون 13 پیکسل هست
  • line-height : فاصله بین خطوط رو مشخص میکنه
  • padding : فاصله از اطراف رو مشخص میکنه
  • width : عرض جدول رو مشخص میکنه و مقدار پیش فرض اون 100% هست
  • table-layout : قالب جدول رو مشخص میکنه

قرار دادن موقعیت مکانی با استفاده از تگ mj-location

با استفاده از این تگ میتونین یک لینک از موقعیت مکانی با استفاده از Google maps قرار بدین. برای مثال کد زیر رو در نظر بگیرید:

همونطور که دیدید تگ mj-location قرار داده شده و درون ویژگی address اون، آدرس موقعیت مکانی مورد نظر قرار داده شده. خروجی اون در مرورگر بصورت زیر خواهد بود:mjml location

اگر شما فیلترشکن نداشته باشید، آیکون قرمز براتون نمایش داده نمیشه. اگر بر روی آیکون یا لینک موجود در عکس بالا کلیک کنید، یک تب جدید باز میشه و این آدرس درون Google Maps به شما نمایش داده میشه. با اینکار میتونین موقعیت مکانی مورد نظرتون رو برای کسانی که براشون ایمیل میفرستید نمایش بدین. این تگ ویژگی های زیر رو قبول میکنه:

  • color : رنگ لینک رو مشخص میکنه و مقدار پیش فرض اون #3aa7ed هست
  • font-family : فونت متن رو مشخص میکنه
  • font-size : سایز فونت رو مشخص میکنه و مقدار پیش فرض اون 18 پیکسل هست
  • font-weight : ضخامت فونت رو مشخص میکنه و پیش فرض اون 500 هست
  • padding : فاصله اون از اطراف رو مشخص میکنه
  • img-src : آدرس آیکونی که قراره نمایش داده بشه رو مشخص میکنه. میتونین آدرس آیکون مورد نظر خودتون رو قرار بدین. آدرس پیش فرض اون http://i.imgur.com/DPCJHhy.png هست.

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

موفق باشید

یا علی

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram