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

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



  آیا می دانید تا کنون 6251 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

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

0 157 ۳ آبان ۹۵

mjml

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

در جلسه قبل تا ردیف سوم رو بصورت کامل ساختیم و در این جلسه قصد داریم این قالب رو به پایان برسونیم.

یک ردیف که از دو ستون تشکیل شده و هر کدام محتوی چیزی هستن

این ردیف از دو ستون تشکیل شده. یکی از اونا شامل یک تصویر و دیگری شامل متن می باشد. جهت صفحات یا Direction درون mjml بصورت پیش فرض از چپ به راست هست و هر ستونی که در ابتدا قرار بگیره، در سمت چپ قرار میگیره. بصورت زیر دو ستون رو قرار میدیم:

حالا باید درون ستون اول تصویر مورد نظرمون رو قرار بدیم. برای قرار دادن تصویر از المنت mj-image استفاده میکنیم. چون این المنت هیچ فرزند دیگه ای نداره، لازم نیس که تگ بسته شونده یا closing tag برای اون بکار برد و میشه با قرار دادن / در انتهای اون، کار رو به پایان رسوند. همچنین با استفاده از ویژگی src آدرس تصویر مورد نظر رو مشخص میکنیم و با استفاده از width هم عرض تصویر رو قرار میدیم. بصورت زیر:

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

حالا اگر خروجی رو در مرورگر مشاهده کنید، بصورت زیر خواهد بود:mjml basic template 6

میبینید که ردیف 4 هم به راحتی ساخته شد. حالا میریم سراغ ردیف پنجم.

بخش آیکونها

در اینجا شما باید سه ستون قرار بدین و درون هر کدوم آیکون مورد نظر خودتون رو قرار بدین. چون ما برای ستونها بصورت دستی عرضشون رو مشخص نمیکنیم، پس عرض اونا بصورت اتوماتیک و توسط mjml مشخص میشه و مقدار مساوی رو به اونا اختصاص میده:

بهمین راحتی. حالا اگر خروجی رو در مرورگر ببینید، بصورت زیر خواهد بود:mjml basic template 7

فقط یک ردیف دیگه باقی مونده تا این قالب ساده به پایان برسه.

بخش شبکه های اجتماعی

ما برای قرار دادن شبکه های اجتماعی در قالب ایمیل از المنت mj-social استفاده میکنیم که تقریبا همه شبکه های اجتماعی معروف رو در خودش جا داده. ما در اینجا از سه شبکه Facebook و Google Plus و Linkedin استفاده میکنیم. کدهای این Section بصورت زیر هستن:

میبینید که درون ویژگی display اسم شبکه های اجتماعی مورد نظر رو قرار دادیم و mjml بصورت اتوماتیک آیکون و بقیه چیزای لازم رو قرار میده. این المنت ویژگی ها دیگه هم داره که بعدا بصورت دقیق اونا رو بررسی میکنیم. فعلا فقط ظاهرش برامون مهمه. با این کد، این قالب به پایان میرسه. کد کدهای mjml بصورت زیر هستن:

اگر این کدهارو به HTML تبدیل کنیم، بصورت زیر خواهند شد:

میبینید که کدها چقد پیچیده هستن و mjml همه این کارهای سخت رو برای ما انجام داده. خروجی در مرورگر بصورت زیر هست:mjml basic template 8

میبینید که چقد زیبا این قالب نمایش داده میشه. اگه یادتون باشه گفتم که mjml یکی از مزیتهاش واکنشگرا یا Responsive بودنش هست. حالا اگر سایز مرورگر رو کم کنیم و اون رو ببینیم، خروجی بصورت زیر هست:mjml basic template 9

میبینید که بخوبی واکنشگرا شده و المنتها تغییر مکان میدن.

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

موفق باشید

یا علی

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram