در این جلسه با ادامه آموزش mjml در خدمت شما هستیم.
همونطور که اطلاع دارید، در جلسه گذشته راجع به تگهایی که در mj-head قرار میگیرن، توضیح دادیم و بهتون آموزش دادیم. در این جلسه و جلسات بعدی قصد داریم المنتهایی که در تگ mj-body قرار میگیرن رو خدمتتون معرفی کنیم.
تگ mj-container
این تگ نقطه Start و شروع پروژه شما هست و همه چیز درون اون قرار میگیره. این تگ بصورت مستقیم درون mj-body قرار میگیره و تنها فرزند اون هست. برای مثال کد زیر رو در نظر بگیرید:
<mjml>
<mj-body>
<mj-container>
<!-- Your email goes here -->
</mj-container>
</mj-body>
</mjml>
همونطور که دیدید این تگ درون mj-body قرار گرفته و بقیه موارد درون اون جا میگیرن. این تگ، دو ویژگی بصورت زیر داره:
- width : با استفاده از این ویژگی میتونین عرض ایمیلتون رو مشخص کنید. مقدار پیش فرض این ویژگی 600 پیکسل هست.
- background-color : این رنگ، رنگ پس زمینه کل سند رو مشخص میکنه. یعنی رنگی که در پشت ایمیل هست. اگر اون رو بصورت html در بیاریم، در واقع میشه گفت همون رنگی که به المنت body نسبت داده میشه و کل مرورگر رو میگیره. مقدار اون هم با فرمت رنگی قرار میگیره.
تگ mj-section
sectionها بعنوان ردیف در ساخت ایمیلها به کار برده میشن. هر Section، یک ردیف رو بوجود میاره و محتویاتی رو درون خودش جا میده. این المنت یکی از المنتهایی هست که چارچوب و قالب بندی ایمیلتون رو به وجود میاره. کد زیر رو در نظر بگیرید:
<mjml>
<mj-body>
<mj-container>
<mj-section>
<!-- Your columns go here -->
</mj-section>
<mj-section>
<!-- Your columns go here -->
</mj-section>
<mj-section>
<!-- Your columns go here -->
</mj-section>
</mj-container>
</mj-body>
</mjml>
همونطور که میبینید، تگهای mj-section درون mj-container قرار داده میشن و ردیفها رو بوجود میارن. درون هر ردیف هم تگهای mj-column قرار میگیره که ردیفها رو به ستونهای متعددی تقسیم بندی میکنن. این تگ ویژگی‌های زیر رو قبول میکنه:
- full-width : با استفاده از این ویژگی میتونین عرض پس زمینه یک ردیف رو تغییر بدین. توجه کنید که فقط عرض پس زمینه تغییر میکنه و جا برای محتویات اون بیشتر نخواهد شد! بصورت پیش فرض عرض 600 پیکسل هست ولی اگر شما مقدار این ویژگی رو برابر با full-width قرار بدین، کل صفحه رو خواهد پوشاند. بصورت زیر:
<mjml> <mj-body> <mj-container background-color="red"> <mj-section full-width="full-width" background-color="blue"> <mj-column> <mj-text> Hello World! </mj-text> </mj-column> </mj-section> <mj-section background-color="green"> <mj-column> <mj-text> Hello World! </mj-text> </mj-column> </mj-section> </mj-container> </mj-body> </mjml>
خروجی اون در مرورگر بصورت زیر خواهد بود:
میبینید که رنگها چطوری قرار گرفتن. به اونا دقت داشته باشید.
- 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
امیدوارم از این جلسه خوشتون اومده باشه.
موفق باشید
یا علی
اولین دیدگاه این پست رو تو بنویس !