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

- visibility ٠ mode_comment

mjml

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

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

میبینید که یک Section قرار دادیم و رنگ پس زمینه اون رو هم مشخص کردیم. بعد از اون با استفاده از mj-text یک متن رو قرار دادیم و اون رو وسط چین یا center کردیم. درون ویژگی color میتونیم رنگ فونت رو قرار بدیم. برای قرار دادن رنگ میتونیم از hex color یا hsl یا rgb استفاده کنیم. خروجی در مرورگر تا اینجا بصورت زیر هست:newsletter template 4

حالا بریم سراغ ردیف بعد که درون اون یک تصویر ادیتور قرار میگیره. کدهای اون بصورت زیر هستن:

میبینید که با استفاده از mj-image یک تصویر رو قرار دادیم. آدرس تصویر رو درون ویژگی src قرار دادیم. خروجی در مرورگر بصورت زیر خواهد بود:newsletter template 5

حالا میریم سراغ ردیف بعد. این ردیف هم دو ستونه هست و مثل قبل یک تصویر در سمت چپ و یک متن در سمت راست قرار میگیره. کدهای اون بصورت زیر هست:

توضیح کدهای بالا شبیه به کدهای قبلی هست. خروجی بصورت زیر میشه:newsletter template 6

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

میبینید که در ابتدا یک متن کوتاه قرار دادیم و بعد از اون با استفاده از mj-social برای دو شبکه اجتماعی twitter و facebook، آیکونهاشونو قرار دادیم. با استفاده از ویژگی mode هم نحوه قرار گیری اونا رو vertical یا عمودی در نظر گرفتیم. خروجی در مرورگر بصورت زیر خواهد بود:newsletter template

کل کدهای mjml سازنده این قالب بصورت زیر هستن:

خروجی HTML اون بصورت زیر خواهد شد:

بهمین راحتی.

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

موفق باشید

یا علی

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.