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

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



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

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

0 72 ۲۷ آبان ۹۵

mjml

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

در جلسه قبل در مورد قرار دادن navbar یا منو با استفاده از تگ mj-navbar صحبت کردیم و توضیح دادیم. در این جلسه قصد داریم در مورد قرار دادن گروه با استفاده از تگ mj-group، توضیحاتی رو خدمتتون بیان کنیم.

قرار دادن گروه با استفاده از تگ mj-group

با استفاده از تگ mj-group میتونین نحوه نمایش ستونها درون موبایل رو مدیریت کنید. با اینکار میتونین اجازه نمایش 2 یا چند ستون رو درون موبایل بدید. کد زیر رو در نظر بگیرید:

همونطور که میبینید، درون mj-section یک تگ mj-group رو قرار دادیم و درون اون هم دو ستون قرار دادیم. درون هر ستون هم یک تصویر و یک متن قرار دادیم. ستونهایی که درون mj-group قرار میگیرن، حتما باید عرض با مقدار درصدی داشته باشن و نمیشه اونا رو بصورت پیکسلی مقداردهی کرد. همچنین باید دقت داشته باشید که همیشه ستون رو درون گروه و گروه رو درون section قرار بدین. خروجی در مرورگر Desktop بصورت زیر خواهد شد:mjml group

خروجی در موبایل بصورت زیر خواهد بود:mjml group 2

این در حالتی هست که اگر از mj-group استفاده نمیکردیم، خروجی در موبایل بصورت زیر میشد:mjml group 3

بهمین راحتی. ویژگی هایی که برای تگ mj-group مورد استفاده قرار میگیره:

  • Width : عرض گروه رو مشخص میکنه
  • vertical-align
  • backgroun-color

خب تا اینجای کار تونستیم تقریبا همه تگها و موارد مربوط به mjml رو خدمتتون بیان کنیم و تقریبا به انتهای کار رسیدیم. در ابتدا بگم که علاوه بر اجزای یا Component هایی که خود mjml داره، شما هم میتونین جزء مورد نظر خودتون رو بسازید و از اون استفاده کنید. برای اینکار باید مطابق با این آموزش کامل عمل کنید.

شما میتونین این پروژه رو درون Github مشاهده کنید و تغییرات اون رو دنبال کنید. اگه به بخش Release اون برید، متوجه خواهید شد که ورژنهاش جدید 3.0.0 و 3.0.1 و 3.0.2 هم منتشر شدن و تغییرات زیادی رو بوجود آوردن و قابلیتهای زیادی رو اضافه کردن. تغییرات اصلی ورژن 3.0.0 رو میتونین در اینجا ببینید. همچنین برای بروزرسانی نسخه mjml سیستم خودتون باید دستور زیر رو درون cmd تایپ کرده و اینتر بزنید:mjml resource 2

همچنین اگه به صفحه اصلی mjml وارد بشید، گزینه های زیر در بالای صفحه قرار داده شدن.mjml resource

با استفاده از گزینه Try It Live وارد بخشی میشید که میتونین کدهای mjml رو در سمت چپ وارد کرده و خروجی اون رو بصورت اتوماتیک در سمت راست ببینید. این روش سریعترین روش برای تست کردن کدهای mjml هست. با کلیک بر روی Component به صفحه ای منتقل خواهید شد که همه اجزا رو در اختیار شما قرار میده.

در نهایت با کلیک کردن بر روی Template هم میتونین قالبهای از پیش ساخته شده ای که قرار داره رو ببینید و از اونا استفاده کنید و ازشون ایده بگیرید.

امیدوارم از این سری آموزشی نهایت بهره رو برده باشید و راضی بوده باشید. حالا دیگه توانایی این رو دارید که به راحتی ایمیلهای زیبایی برای خودتون بسازید و ازشون استفاده کنید.

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

موفق باشید

یا علی

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram