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

- visibility ۰ mode_comment

mjml

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

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

قرار دادن منو با استفاده از تگ mj-navbar

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

همونطور که دیدید یک تگ mj-navbar قرار دادیم و رنگ پس زمینه اون رو مشخص کردیم. درون اون دو تا ستون قرار دادیم. عرض ستون اول رو 20 و ستون دوم رو 80 درصد قرار میدیم. درون ستون سمت چپ و اولی یک آیکون رو قرار دادیم. درون ستون بعدی یک تگ mj-inline-links رو قرار دادیم و لینکهای اون رو درونش قرار میدیم. با استفاده از ویژگی base-url میتونین پایه آدرس رو مشخص کنید و آدرسی که در لینکها قرار میدین، در ادامه این پایه آدرس قرار میگیره. همونطور که دیدید 4 تا لینک قرار داده شده و با استفاده از href، آدرس لینک رو مشخص میکنیم. با استفاده از color هم رنگ متن رو تغییر دادیم. خروجی در مرورگر بصورت زیر خواهد شد:mjml navbar

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

  • full-width : با استفاده از این ویژگی، منو تمام عرض صفحه رو اشغال میکنه
  • border : میتونین با استفاده از این ویژگی میتونین برای منو border قرار بدین
  • border-top
  • border-bottom
  • border-left
  • border-right
  • border-radius : گوشه منو رو گرد میکنه
  • background-color : رنگ پس زمینه رو مشخص میکنه
  • background-url : آدرس عکس پس زمینه
  • background-repeat : میتونین پس زمینه رو تکرار کنید
  • background-size : سایز پس زمینه رو مشخص میکنه
  • vertical-align : ترازبندی عمودی
  • text-align : ترازبندی متن رو مشخص میکنه
  • padding
  • padding-top
  • padding-bottom
  • padding-left
  • paddiong-right

خروجی در برنامه های موبایل بصورت زیر هست:mjml navbar 2

در موبایل و سیستمهای ایمیلی بر پایه iOS، خروجی بصورت زیر هست:mjml navbar 3

همونطور که میبینید، یک آیکون همبرگر قرار داده میشه که با کلیک بر روی اون میتونین بقیه لینکها رو مشاهده کنید. ویژگی هایی که برای تگ mj-inline-links قرار میگیره، بصورت زیر هست:

  • base-url : میتونین پایه آدرس رو مشخص کنید
  • hamburger : اگر مقدار رو برابر با hamburger قرار بدین، حالت آیکون همبرگر نمایش داده میشه
  • align : میتونین تراز بندی رو مشخص کنید
  • ico-open : آیکون باز شدن رو مشخص میکنه
  • ico-close : آیکون بسته شدن رو مشخص میکنه
  • ico-padding : میتونین فاصله آیکون رو از اطراف مشخص کنید
  • ico-padding-top
  • ico-padding-left
  • ico-padding-right
  • ico-padding-bottom
  • ico-align : میتونین ترازبندی آیکون رو مشخص کنید
  • ico-color : رنگ آیکون رو مشخص میکنه
  • ico-font-size : میتونین سایز فونت رو مشخص کنید

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

موفق باشید

یا علی

comment دیدگاه کاربران

نیاز به لاگین

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