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

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



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

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

0 108 ۲۳ آبان ۹۵

mjml

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

در جلسه قبل در مورد قرار دادن صورت حساب یا فاکتور صحبت کردیم و توضیح دادیم. در این جلسه قصد داریم در مورد قرار دادن دکمه و لینک با استفاده از تگ mj-button، توضیحاتی رو خدمتتون بیان کنیم.

قرار دادن دکمه با استفاده از تگ mj-button

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

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

همونطور که دیدید به زیبایی دکمه مورد نظر نمایش داده شد. ویژگی هایی که برای این تگ قابل استفاده هستند:

  • background-color : رنگ پس زمینه دکمه رو مشخص میکنه و پیش فرض اون 414141 هست
  • border : مثل همون قواعدی که درون CSS وجود داره، میتونین اینجا هم border قرار بدین و استایل اون رو مشخص کنید
  • border-bottom
  • border-top
  • border-left
  • border-right
  • border-radius : گوشه های دکمه رو گرد میکنه و مقدار پیش فرض اون 3 پیکسل هست
  • font-size : سایز فونت رو مشخص میکنید و مقدار پیش فرض اون 13 پیکسل هست
  • font-wight : ضخامت متن رو مشخص میکنه
  • font-family : نام فونت مورد نظر برای متن رو مشخص میکنه
  • color : رنگ متن رو مشخص میکنه و پیش فرض اون fff یا سفید هست
  • text-decoration : میتونین خطی رو در رو، زیر یا بالای متن قرار بدین
  • text-transform : میتونین حروف متن رو بزرگ و کوچک کنید
  • align : ترازبندی خود دکمه در ستون رو مشخص میکنه و پیش فرض اون Center هست
  • vertical-alignment : ترازبندی عمودی رو مشخص میکنه و مقدار پیش فرض اون middle هست
  • href : اگر لینکی رو درون این ویژگی قرار بدین، دکمه بصورت لینک در میاد و هر زمان که بر روی اون کلیک بشه، کاربران به اون لینک منتقل میشن. مثل کد زیر:
  • inner-padding : فاصله یا حاشیه درونی دکمه رو مشخص میکنه و پیش فرض اون 15px 22px هست
  • padding : فاصله رو از طرفین تنظیم میکنه
  • padding-right
  • padding-left
  • padding-top
  • padding-bottom
  • width : عرض دکمه رو مشخص میکنه
  • height : ارتفاع دکمه رو مشخص میکنه

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

موفق باشید

یا علی

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram