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

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



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

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

0 159 ۱۹ آبان ۹۵

mjml

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

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

قرار دادن آیکونهای شبکه اجتماعی با استفاده از تگ mj-social

با استفاده از این تگ میتونین درون ایمیلهای خودتون CTA یا Call To Action هایی رو قرار بدین که با کلیک کردن کاربران بر روی اونا، به آدرس شبکه اجتماعی شما منتقل بشن. کد زیر رو در نظر بگیرید:

میبینید که تگ mj-social رو قرار دادیم و درون ویژگی display اون، دو شبکه google و facebook رو قرار دادیم. با اینکار موتور mjml بصورت اتوماتیک همه کارا رو انجام میده و آیکون شبکه های مورد نظر رو برامون قرار میده. خروجی در مرورگر بصورت زیر خواهد بود:mjml social

میبینید که آیکون دو شبکه اجتماعی Google Plus و Facebook قرار داده شده و بر روی هر کدوم کلیک کنیم، به یک آدرس منتقل میشیم ولی آدرسی نیست که مدنظر ما باشه. شما با استفاده از ویژگی facebook-href و google-href میتونین آدرس مورد نظرتون رو برای این آیکونها قرار بدین. بصورت زیر:

این ویژگی ها این لینک رو برمیدارن و در ادامه لینک مخصوص اون شبکه برای Share کردن یا به اشتراک گذاشتن قرار میدن. با اینکار اگر کاربران بر روی آیکون گوگل کلیک کنید، سایت 7learn رو درون گوگل به اشتراک میزارن و اگر بر روی facebook کلیک کنن، سایت 7learn رو درون facebook به اشتراک میزارن. وقتی روی آیکون گوگل کلیک کنید به آدرس زیر میرید:

و اگر بر روی آیکون facebook کلیک کنید، به آدرس زیر خواهید رفت:

اگر شما قصد به اشتراک گذاری نداشته باشید و بخواید مستقیما آدرس صفحه facebook یا google رو قرار بدین، باید بصورت زیر عمل کنید:

میبینید که درون ویژگی display، بعد از اسامی شبکه ها، : قرار دادیم و بعد از اون کلمه url رو قرار دادیم. با اینکار دقیقا همون چیزی که درون ویژگی facebook-href قرار داده میشه، بعنوان آدرس آیکون قرار داده میشه.

ویژگی هایی که میتونین برای این تگ بکار ببرید، بصورت زیر هستند:

  • facebook-content : متن روبروی آیکون facebook
  • facebook-href : آدرس مربوط به Facebook
  • facebook-icon-color : رنگ مربوط به آیکون facebook
  • font-family : فونت متنها رو مشخص میکنه
  • font-size : سایز متنها رو مشخص میکنه
  • google-content : متن روبروی آیکون google
  • google-href : آدرس مربوط به google
  • google-icon-color : رنگ مربوط به آیکون google
  • icon-size : سایز آیکونها رو مشخص میکنه و پیش فرض اون 20 پیکسل هست
  • instagram-content : متن روبروی آیکون instagram
  • instagram-href : آدرس مربوط به instagram
  • instagram-icon-color : رنگ مربوط به آیکون instagram
  • line-height : مشخص کردن فاصله بین خطوط
  • linkedin-content : متن روبروی آیکون linkedin
  • linkedin-href : آدرس مربوط به linkedin
  • linkedin-icon-color : رنگ مربوط به آیکون linkedin
  • mode : با استفاده از این ویژگی میتونین مشخص کنید که آیکونها افقی قرار بگیرن یا عمودی. اگر vertical بزارید، بصورت عمودی نمایش داده میشن.
  • pinterest-content : متن روبروی آیکون pinterest
  • pinterest-href : آدرس مربوط به pinterest
  • pinterest-icon-color : رنگ مربوط به آیکون pinterest
  • text-mode : اگر اون رو برابر با false قرار بدین، متن مربوط به آیکونها نمایش داده نمیشه
  • twitter-content : متن روبروی آیکون twitter
  • twitter-href : آدرس مربوط به twitter
  • twitter-icon-color : رنگ مربوط به آیکون twitter

همونطور که دیدید 6 شبکه اجتماعی Twitter و Linkedin و Facebook و Google Plus و Instagram و Pinterest رو میتونین قرار بدین. برای بقیه شبکه ها خودتون باید دستی مقادیر مختلف رو مشخص کنید. مثلا کد زیر رو در نظر بگیرید:

در بالا بصورت دستی یک آیکون و متن و ... برای 7learn ساخته شده. خروجی در مرورگر بصورت زیر خواهد بود:mjml social 2

بهمین راحتی.

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

موفق باشید

یا علی

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram