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

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



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

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

0 158 ۱۵ آبان ۹۵

mjml

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

در جلسه گذشته در مورد دو تگ mj-container و mj-section کردیم. در این جلسه قصد داریم در مورد تگهای mj-column و mj-list صحبت کنیم.

تگ mj-column

تگ mj-column به شما اجازه میده که section ها یا ردیفها رو بصورت افقی تقسیم بندی و مدیریت کنید. این تگ فقط بعنوان فرزند mj-section قرار میگیره و در غیر اینصورت موتور mjml اون رو نخواهد شناخت. برای اینکه Column ها قراره واکنشگرا و Responsive باشن، پس عرضها رو بصورت درصدی یا Percentage قرار میدیم. محتوای مورد نظر شما درون column یا ستونها قرار میگیره. المنتی که درون ستونها قرار میگیره، عرضش 100% میشه و کل عرض ستون رو میگیره.

ستونها بصورت زیر قرار داده میشن:

همونطور که میبینید، درون Section یا ردیف بالا، دو ستون قرار گرفته. موتور mjml بصورت اتوماتیک، کل عرض section رو به دو قسمت مساوی بین ستونها تقسیم میکنه. حالا میتونین درون ستونها، محتویات مورد نظرتون رو قرار بدین. ویژگی های زیر برای این المنت قابل استفاده هست:

  • width : این ویژگی عرض ستون رو مشخص میکنه که واحد اون پیکسل یا درصد هست. مقدار پیش فرض این ویژگی بر اساس کل ردیف یا section محاسبه میشه. برای اینکار 100 تقسیم بر تعداد ستونها میشه. هر ستون به اندازه این مقدار، از ردیف درصد دارن.
  • vertical-align : این ویژگی ترازبندی عمودی رو مشخص میکنه و سه مقدار top و bottom و middle رو قبول میکنه. مقدار پیش فرض اون، Top هست.
  • background-color : رنگ پس زمینه ستون رو مشخص میکنه

کد زیر رو در نظر بگیرید:

خروجی اون در مرورگر بصورت زیر هست:mj-column

تگ mj-list

شما با استفاده از تگ mj-list میتونین به راحتی لیستهای نامرتب یا unordered list بسازید و درون ایمیل خودتون قرار بدین. کد زیر رو در نظر بگیرید:

میبینید که آیتمهای منو درون li قرار گرفتن و درون تگ mj-list گذاشته شدن. خروجی در مرورگر بصورت زیر خواهد بود:mj-list

این تگ ویژگی های زیر رو میگیره:

  • color : رنگ متن رو مشخص میکنه. بصورت پیش فرض مشکی هست
  • font-family : فونت متن رو مشخص میکنه.
  • font-size : سایز متن رو مشخص میکنه و بصورت پیش فرض 13 پیکسل هست
  • line-height : فضای بین خطوط رو مشخص میکنه. مقدار پیش فرض اون 22 پیکسل هست
  • padding : فضای خالی نسبت به اطراف لیست به وجود میاورد. مقدار پیش فرض اون 10px 25px هست

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

موفق باشید

یا علی

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram