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

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



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

0 94 ۲ آبان ۹۵

mjml

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

در حلسه قبل 6 تا ردیف ساختیم و برای هر کدوم رنگ پس زمینه رو مشخص کردیم و همچنین برای ردیف اول، یک متن که نقش لوگو برند رو ایفا میکنه، بصورت Italic و وسط چین شده قرار دادیم.

Image Header یا بخشی که عکس مورد نظر رو درونش قرار میدیم

ردیف بعدی که قرار هست اونو طراحی کنیم، ردیفی هست که یک تصویر بعنوان پس زمینه داره و متنی بر روی اون قرار میگیره که slogan یا شعار سایت یا برند رو مشخص میکنه. در زیر اون هم یک دکمه قرار میدیم که کاربران رو به بخشی از سایتمون منتقل کنیم تا اطلاعات بیشتری در مورد چیزی مشخص بدست بیارن.

برای اضافه کردن تصویر مورد نظرمون به عنوان پس زمینه ردیف دوم، باید بجای استفاده از ویژگی background-color از ویژگی background-url استفاده کنیم، بصورت زیر:

میبینید که برای ویژگی background-url آدرس یک تصویر رو قرار دادیم تا بعنوان پس زمینه section یا ردیف مورد نظر قرار بگیره. با استفاده از ویژگی background-size هم کاری کردیم که این تصویر در هر سایزی، کل عنصر Parent که همون section میشه رو بپوشونه و هم اندازش بشه. با استفاده از ویژگی background-repeat هم گفتیم در جهت طولی و عرضی نمیخایم تکرار بشه. حالا مثل قبل باید یک mj-column درون این section قرار بدین، بصورت زیر:

میبینید که ستون مورد نظر رو قرار دادیم. برای قرار دادن متن شعار برند، مثل گذشته میتونین یک mj-text اضافه کنید و متن مورد نظرتون رو درونش قرار بدین:

میبینید که با استفاده از ویژگی align اون رو center یا وسط چین کردیم و رنگ و سایز و نام فونت اون رو هم تغییر دادیم. با استفاده از ویژگی padding-right و padding-left و padding-top و padding-bottom میتونیم فاصله المنت مورد نظر رو از بترتیب، راست و چپ و بالا و پایین مشخص کنیم و المنتها رو از هم دورتر کنیم و در مکان مورد نظرمون قرار بدیم.

در نهایت برای قرار دادن دکمه، یک mj-button بصورت زیر قرار میدیم:

میبینید که برای المنت mj-button مورد نظر، یک ویژگی background-image قرار دادیم که با استفاده از اون رنگ دکمه رو مشخص کردیم. همچنین با استفاده از ویژگی href هم آدرس لینک دکمه رو مشخص کردیم که با کلیک بر روی اون به این آدرس خواهیم رفت. خروجی تا اینجای کار در مرورگر بصورت زیر خواهد بود:mjml basic template 4

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

محلی که توضیحاتی مقدماتی در مورد محصول یا شرکتمون میدیم

در این ردیف ما یک عنوان داریم و همچنین یک متن توضیحی داریم و در آخر هم یک دکمه برای مطالعه بیشتر قرار میدیم. در ابتدا درون ردیف یا section سوم، یک column با طول 400 پیکسل قرار میدیم. علت 400 این هست که نمیخایم این ستون کل ردیف رو پوشش بده. بصورت زیر:

حالا باید دو تا المنت mj-text و یک المنت mj-button قرار بدیم، بصورت زیر:

توضیحات المنتها و ویژگی های بالا رو قبلا خدمتتون عرض کردیم. اگه کل کدها رو تا اینجا با استفاده از ابزار mjml به html تبدیل کنیم و اون رو در مرورگر باز کنیم، خروجی بصورت زیر میشه:mjml basic template 5

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

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

موفق باشید

یا علی

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram