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

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



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

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

0 111 ۱۷ آبان ۹۵

mjml

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

در جلسه گذشته در مورد دو تگ Column و list صحبت کردیم و ویژگی های هر کدوم رو توضیح دادیم.  در این جلسه قصد داریم در مورد قرار دادن متون با استفاده از تگ mj-text و قرار دادن خطوط افقی با استفاده از mj-divider صحبت کنیم.

قرار دادن متن با استفاده از تگ mj-text

با استفاده از تگ mj-text میتونین متن مورد نظرتون رو درون ایمیل قرار بدین. کد زیر رو در نظر بگیرید:

همونطور که دیدید، تگ mj-text رو درون تگ mj-column قرار دادیم و متن مورد نظرمون رو درونش گذاشتیم. خروجی کد بالا در مرورگر بصورت زیر هست:mjml text

همچنین شما میتونین هر تگ html رو درون تگ mj-text قرار بدین تا در خروجی هم اعمال بشه. مثلا اگر متن رو درون یک تگ h1 قرار بدیم، بصورت زیر میشه:

خروجی اون هم در مرورگر بصورت زیر میشه:mjml text 2

همون که دیدید 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 ها استایل دهی کنید و به زیبایی اون بیافزایید.

برای مثال کد زیر رو در نظر بگیرید:

همونطور که میبینید، دو تا متن با استفاده از mj-text قرار دادیم و اونا رو با استفاده از mj-divider از هم جدا کردیم. ضخامت اون رو 3 پیکسل در نظر گرفتیم و اونو قرمز رنگ کردیم. همچنین استایل اون رو بصورت dashed یا خط خطی قرار دادیم. خروجی در مرورگر بصورت زیر خواهد بود:mjml divider

بهمین راحتی. ویژگی هایی که میتونین برای این تگ استفاده کنید، بصورت زیر هست:

  • border-color : با استفاده از این ویژگی میتونین رنگ خط رو مشخص کنید
  • border-style : با استفاده از این ویژگی میتونین نوع خط رو برابر با dashed یا dotted یا solid قرار بدین
  • border-width : صخامت خط رو مشخص میکنه و پیش فرض اون 4 پیکسل هست
  • width : طول خط رو مشخص میکنه و مقدار پیش فرض اون 100% هست
  • container-background-color : میتونین رنگ پس زمینه اون رو مشخص کنید
  • padding : میتونین فاصله اون رو از طرفیت مشخص کنید

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

موفق باشید

یا علی

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram