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

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



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

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

0 144 ۱۴ آبان ۹۵

mjml

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

همونطور که اطلاع دارید، در جلسه گذشته راجع به تگهایی که در mj-head قرار میگیرن، توضیح دادیم و بهتون آموزش دادیم. در این جلسه و جلسات بعدی قصد داریم المنتهایی که در تگ mj-body قرار میگیرن رو خدمتتون معرفی کنیم.

تگ mj-container

این تگ نقطه Start و شروع پروژه شما هست و همه چیز درون اون قرار میگیره. این تگ بصورت مستقیم درون mj-body قرار میگیره و تنها فرزند اون هست. برای مثال کد زیر رو در نظر بگیرید:

همونطور که دیدید این تگ درون mj-body قرار گرفته و بقیه موارد درون اون جا میگیرن. این تگ، دو ویژگی بصورت زیر داره:

  • width : با استفاده از این ویژگی میتونین عرض ایمیلتون رو مشخص کنید. مقدار پیش فرض این ویژگی 600 پیکسل هست.
  • background-color : این رنگ، رنگ پس زمینه کل سند رو مشخص میکنه. یعنی رنگی که در پشت ایمیل هست. اگر اون رو بصورت html در بیاریم، در واقع میشه گفت همون رنگی که به المنت body نسبت داده میشه و کل مرورگر رو میگیره. مقدار اون هم با فرمت رنگی قرار میگیره.

تگ mj-section

section ها بعنوان ردیف در ساخت ایمیلها به کار برده میشن. هر Section، یک ردیف رو بوجود میاره و محتویاتی رو درون خودش جا میده. این المنت یکی از المنتهایی هست که چارچوب و قالب بندی ایمیلتون رو به وجود میاره. کد زیر رو در نظر بگیرید:

همونطور که میبینید، تگهای mj-section درون mj-container قرار داده میشن و ردیفها رو بوجود میارن. درون هر ردیف هم تگهای mj-column قرار میگیره که ردیفها رو به ستونهای متعددی تقسیم بندی میکنن. این تگ ویژگی های زیر رو قبول میکنه:

  • full-width : با استفاده از این ویژگی میتونین عرض پس زمینه یک ردیف رو تغییر بدین. توجه کنید که فقط عرض پس زمینه تغییر میکنه و جا برای محتویات اون بیشتر نخواهد شد! بصورت پیش فرض عرض 600 پیکسل هست ولی اگر شما مقدار این ویژگی رو برابر با full-width قرار بدین، کل صفحه رو خواهد پوشاند. بصورت زیر:

خروجی اون در مرورگر بصورت زیر خواهد بود:mjml body tags

میبینید که رنگها چطوری قرار گرفتن. به اونا دقت داشته باشید.

  • background-color : با استفاده از این ویژگی رنگ پس زمینه مشخص میشه
  • background-url : با استفاده از این ویژگی میتونین عکسی رو بعنوان پس زمینه قرار بدین. آدرس عکس مورد نظرتون رو باید بعنوان مقدار این ویژگی قرار بدین
  • background-repeat : با استفاده از این ویژگی مشخص میکنید که این تصویر تکرار بشه یا خیر. مثل همون ویژگی در CSS هست. مقدار پیش فرض اون repeat هست
  • background-size : سایز تصویر پس زمینه رو مشخص میکنید
  • vertical-align : همون ویژگی css vertical align در css هست و در اینجا بصورت پیش فرض مقدار top رو داره
  • text-align : مشخص کردن ترازبندی متن. بصورت پیش فرض وسط چین هست
  • padding : میتونین فاصله از اطراف رو با استفاده از ویژگی مشخص کنید. این ویژگی 4 مقدار رو دریافت میکنه و اونا رو جایگذاری میکنه. مقدار پیش فرض اون 20px 0 هست. یعنی 20 پیکسل از بالا و پایین و 0 از چپ و راست فاصله داره. همچنین میتونین بصورت تکی نیز این موارد رو مقداردهی کنید.
  • padding-top
  • padding-bottom
  • padding-left
  • padding-right

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

موفق باشید

یا علی

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram