در این جلسه با ادامه آموزش mjml در خدمت شما هستیم.
در جلسه گذشته در مورد دو تگ Column و list صحبت کردیم و ویژگی‌های هر کدوم رو توضیح دادیم. در این جلسه قصد داریم در مورد قرار دادن متون با استفاده از تگ mj-text و قرار دادن خطوط افقی با استفاده از mj-divider صحبت کنیم.
قرار دادن متن با استفاده از تگ mj-text
با استفاده از تگ mj-text میتونین متن مورد نظرتون رو درون ایمیل قرار بدین. کد زیر رو در نظر بگیرید:
<mjml>
<mj-body>
<mj-container>
<mj-section>
<mj-column>
<mj-text>
This is sample text!
</mj-text>
</mj-column>
</mj-section>
</mj-container>
</mj-body>
</mjml>
همونطور که دیدید، تگ mj-text رو درون تگ mj-column قرار دادیم و متن مورد نظرمون رو درونش گذاشتیم. خروجی کد بالا در مرورگر بصورت زیر هست:
همچنین شما میتونین هر تگ html رو درون تگ mj-text قرار بدین تا در خروجی هم اعمال بشه. مثلا اگر متن رو درون یک تگ h1 قرار بدیم، بصورت زیر میشه:
<mjml>
<mj-body>
<mj-container>
<mj-section>
<mj-column>
<mj-text>
<h1>
Hey Title!
</h1>
</mj-text>
</mj-column>
</mj-section>
</mj-container>
</mj-body>
</mjml>
خروجی اون هم در مرورگر بصورت زیر میشه:
همون که دیدید Heading یا عنوان مورد نظر، بر متن اعمال شد و اون رو Bold و ضخیمتر کرد. اگر میخاید از کارکترهای خاص استفاده کنید، اونا رو encode کنید تا موتور mjml به اونا گیر نده. ویژگی هایی که برای تگ mj-text میشه ازشون استفاده کرد، بصورت زیر هستند:
- color : با استفاده از این ویژگی میتونین رنگ متن رو مشخص کنید. رنگ پیش فرض مشکی هست.
- font-family : با استفاده از این ویژگی میتونین فونت متن رو مشخص کنید.
- font-size : سایز فونت رو مشخص میکنه و پیش فرض اون 13 هست
- font-weight : ضخامت فونت رو مشخص میکنه و مقدار اون عددی هست
- line-height : فاصله بین خطوط متن رو مشخص میکنه. مقدار پیش فرض اون 22 پیکسل هست
- text-decoration : میتونین خطی رو در زیر یا بالا و روی متن قرار بدین
- text-transoform : میتونین حروف رو بزرگ یا کوچک و ... کنید
- align : ترازبندی متن رو مشخص میکنه و مقدار پیش فرض اون left یا چپ هست
- container-background-color : با استفاده از این ویژگی میتونین رنگ پس زمینه این المنت رو مشخص کنید
- padding : میتونین با استفاده از این ویژگی فاصله متن با اطراف المنت رو کم و زیاد کنید. این ویژگی 4 تا مقدار رو میگیره.
قرار دادن خط افقی با استفاده از تگ mj-divider
با استفاده از این ویژگی میتونین یک خط افقی رو درون ایمیلتون قرار بدین که بخشهای مختلف ایمیلتون رو از هم جدا کنه. شما میتونین این خط افقی رو همانند borderها استایل دهی کنید و به زیبایی اون بیافزایید.
برای مثال کد زیر رو در نظر بگیرید:
<mjml>
<mj-body>
<mj-container>
<mj-section>
<mj-column>
<mj-text>
<h1 align="center">
First Text
</h1>
</mj-text>
<mj-divider border-width="3px" border-style="dashed" border-color="red" />
<mj-text>
<h1 align="center">
Second Text
</h1>
</mj-text>
</mj-column>
</mj-section>
</mj-container>
</mj-body>
</mjml>
همونطور که میبینید، دو تا متن با استفاده از mj-text قرار دادیم و اونا رو با استفاده از mj-divider از هم جدا کردیم. ضخامت اون رو 3 پیکسل در نظر گرفتیم و اونو قرمز رنگ کردیم. همچنین استایل اون رو بصورت dashed یا خط خطی قرار دادیم. خروجی در مرورگر بصورت زیر خواهد بود:
بهمین راحتی. ویژگی هایی که میتونین برای این تگ استفاده کنید، بصورت زیر هست:
- border-color : با استفاده از این ویژگی میتونین رنگ خط رو مشخص کنید
- border-style : با استفاده از این ویژگی میتونین نوع خط رو برابر با dashed یا dotted یا solid قرار بدین
- border-width : صخامت خط رو مشخص میکنه و پیش فرض اون 4 پیکسل هست
- width : طول خط رو مشخص میکنه و مقدار پیش فرض اون 100% هست
- container-background-color : میتونین رنگ پس زمینه اون رو مشخص کنید
- padding : میتونین فاصله اون رو از طرفیت مشخص کنید
امیدوارم از این جلسه خوشتون اومده باشه.
موفق باشید
یا علی
خیلی ممنون آقای اسفندیاری عزیز دوره کامل و جامعی بود هر چند سرویس دهنده های ایمیلی کمی بدقلقی کردن در نمایش کدها
امیدوارم موفق و سر زنده باشید.
سلام
بله همینطوره
موفق باشید