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

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



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

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

0 172 ۱۲ آبان ۹۵

mjml

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

همونطور که در جلسه قبل توضیح دادیم درون mjml، اجزائ زیادی وجود داره که بعضی از اونا در Head و بقیه در Body قرار میگیرن. در این جلسه قصد داریم همه مواردی که درون تگ mj-head قرار میگیرن رو براتون توضیح بدیم.

تگ mjml-attributes

این تگ درون mj-head قرار میگیره و قابلیت اینو داره که مقادیر پیش فرض یک تگ خاص رو مشخص کنه و یا اینکه کلاسهایی رو تعریف کنه که بقیه المنتها بتونن از اون استفاده کنن. کد زیر رو در نظر بگیرید:

حالا اگر بخایم mj-attributes رو قرار بدیم، بصورت زیر میشه:

حالا شما میتونین درون این المنت سه کار رو انجام بدین.

1. شما میتونین مقداری پیش فرض برای ویژگی های المنت مورد نظرتون انتخاب کنید. مثلا در بالا اگر بخایم کاری کنیم که همه mj-text ها دارای padding برابر با 0 باشن، براحتی بصورت زیر عمل میکنیم:

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

2. شما میتونین کلاسهایی رو با استفاده از تگ mj-class به وجود بیارید و تعریف کنید و اونا رو به المنتهای مورد نظرتون اعمال کنید. مثلا من میخام یک کلاس با نام blue درست کنم که رنگ متن رو آبی بکنه. برای اینکار بصورت زیر عمل میکنم:

میبینید که یک تگ mj-class اضافه کردم و ویژگی name اون رو برابر با blue و color اون رو برابر با رنگ آبی قرار دادم. حالا میتونیم این کلاس رو به المنتهای دیگه اضافه کنیم و استایل مورد نظر به اونا اعمال بشه. برای اعمال این کلاس به یک المنت، باید نام کلاس رو درون ویژگی mj-class قرار بدین. مثلا اگر بخایم به تگ mj-text کلاس مورد نظر رو وارد کنیم، بصورت زیر عمل میکنیم:

حالا مثلا میتونیم با قرار دادن تگ زیر، یک کلاس دیگه بنام big رو به وجود بیاریم که سایز فونت رو بیشتر بکنه:

حالا میتونیم از این کلاس برای المنتهای دیگه استفاده کنیم.

3. شما میتونین با استفاده از تگ mj-all کاری کنید که یک ویژگی به همه تگهای موجود اعمال بشه. بصورت زیر:

میبینید که تگ mj-all رو قرار دادیم و ویژگی font-family رو برای اون Arial مشخص کردیم. با اینکار فونت همه المنتهای ما Arial خواهند شد.

همونطور که میدونید درون CSS ویژگی ها بصورت آبشاری و اولویت بندی، اعمال میشن و بعضی از اونا نسبت به دیگر موارد، اولویت بیشتری دارن. در mjml هم ترتیب اعمال ویژگی از ضعیف به قوی بصورت زیر هست:

  1. defaultMJMLDefinition : همون مقداری که خود تیم mjml برای یک المنت مشخص کردن و دست ما نیس
  2. mj-attributes : همون مواردی که در بالا بیان کردیم
  3. کلاسها
  4. ویژگی های inline که مستقیما بر روی خود المنت مقداردهی میشن

پس یعنی اون ویژگی هایی که بر روی خود المنت تعریف میشن، از بقیه اولویت بیشتری دارن و در نهایت اعمال میشن.

تگ mjml-font

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

همونطور که دیدید درون href تگ mj-font، آدرس فونت مورد نظر رو قرار دادیم و با استفاده از ویژگی name هم نام اون رو مشخص کردیم. حالا برای تگ mj-text یک ویژگی font-family قرار دادیم و اون رو برابر با همون نامی که برای فونت مشخص کردیم، قرار دادیم. بهمین راحتی.

تگ mjml-title

با استفاده از این تگ میتونین برای سند MJML خودتون یک عنوان قرار بدین. بصورت زیر:

میبینید که متن Hello MJML رو برای عنوان این سند قرار دادیم.

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

موفق باشید

یا علی

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram