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

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



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

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

0 193 ۱۰ آبان ۹۵

mjml

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

در جلسات گذشته دو قالب ساده رو با همدیگه کار کردیم و یاد گرفتیم. دیدید که هر قالب از اجزای مختلفی نظیر تصویر، متن، دکمه و ... تشکیل شده. به هر کدوم از این موارد یک جزء یا Component میگن. این اجزاء یکبار بدست تیم mjml ساخته شدن و در اختیار شما قرار گرفتن و به راحتی میتونین از اونا استفاده کنید و دیگه لازم نیس هر بار مثلا برای قرار دادن یک دکمه همه مراحل رو از اول پیش برید. مثلا اگر المنت mj-button رو در نظر بگیرید، در زبان mjml بصورت زیر هست:

ولی همین جزء یا Component ساده که برای ما دکمه رو میسازه، وقتی به HTML تبدیل میشه، کدهای پیچیده تر زیر رو بوجود میاره:

میبینید که ابزار mjml همه کارای سخت رو برای ما انجام میده و ما بسادگی یک المنت mj-button رو قرار میدیم. اون اجزائی که توسط خود تیم mjml ساخته و قرار داده شده رو Standard Component میگن و اون اجزائی که توسط خود ما یا دیگران ساخته میشن دیگه جزء Standard Component نیستن. پس mjml این قابلیت رو به هر کسی داده که با توجه به نیاز خودش، بیاد و یک جزء رو طراحی کنه و هر بار که به اون نیاز داشت، ازش استفاده کنه.

خود Standard Components به دو جزء تقسیم بندی میشه:

  1. Standard Head Components
  2. Standard Body Components

Standard Head components

اجزائی که در این دسته قرار میگیرن، روند و فرآیند کلی کار رو ساده تر میکنن، استایلهای پیشفرضی رو اعمال میکنن و فونتی رو لود و وارد میکنن. در این بخش اجزای زیر قرار میگیره:

  • mjml-attributes
  • mjml-font
  • mjml-title

Standard Body components

اجزائی که در این قسمت قرار میگیرن باعث میشن که روند ساخت یک قالب با استفاده از امکانات پیش ساخته، بسیار سریع باشه و دیگه لازم نیست که برای هر کدام بصورت جداگانه استایل دهی کنیم. در این بخش اجزای زیر قرار میگیره:

  • mjml-button
  • mjml-column
  • mjml-group
  • mjml-container
  • mjml-divider
  • mjml-hero
  • mjml-html
  • mjml-image
  • mjml-invoice
  • mjml-list
  • mjml-location
  • mjml-navbar
  • mjml-raw
  • mjml-section
  • mjml-social
  • mjml-spacer
  • mjml-table
  • mjml-text

با استفاده از این اجزاء میتونیم تقریبا هر قالبی که نیاز داشته باشیم رو بسازیم. این امکان نیز وجود داره که خودمون جزء جدیدی رو اضافه کنیم. در جلسات بعدی در مورد هر کدام از موارد بالا بصورت کامل توضیح خواهیم داد.

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

موفق باشید

یا علی

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram