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

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



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

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

0 88 ۲۶ آبان ۹۵

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 : میتونین سایز فونت رو مشخص کنید

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

موفق باشید

یا علی

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram