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

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



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

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

0 208 ۹ آبان ۹۵

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 اون بصورت زیر خواهد شد:

بهمین راحتی.

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

موفق باشید

یا علی

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram