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

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



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

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

4 148 ۲۴ آبان ۹۵

mjml

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

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

قرار دادن hero با استفاده از تگ mj-hero

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

همونطور که دیدید تگ mj-hero رو قرار دادیم و تعدادی ویژگی رو برای اون مشخص کردیم. همونطور که میبینید ویژگی mode رو برابر با fixed-height قرار دادیم. دو نوع mode وجود داره، یکی از اونا fixed-height هست و دیگری fluid-height. زمانی که از حالت fixed height استفاده میکنید، باید از ویژگی height هم استفاده کنید و یک ارتفاع ثابت رو برای hero در نظر بگیرید. در اینصورت چه این تگ محتوا داشته باشه و چه نداشته باشه، این ارتفاع رو اشغال میکنه. با استفاده از ویژگی background-position میتونیم موقعیت تصویر در پس زمینه رو مشخص کنیم. حالت fluid-height برای سرویس Outlook.com پشتیبانی نمیشه و کار نمیکنه. محتویات درونی این تگ درون تگ mj-hero-content قرار میگیره. شما متن و تصویر و دکمه و ... رو باید حتما درون این تگ قرار بدین تا نمایش داده بشن. کد زیر رو در نظر بگیرید:

میبینید که در ابتدا تگ mj-hero-content رو درون mj-hero قرار دادیم و درون اون یک متن با استفاده از mj-text و یک دکمه با استفاده از mj-button قرار دادیم. خروجی در مرورگر بصورت زیر خواهد بود:mjml heroمیبینید که محتویات قرار داده شدن. بهترین حالت اینه که از یک تصویر پس زمینه که عرضش برابر با عرض container باشه استفاده کنید و همیشه یک رنگ هم با استفاده از background-color مشخص کنید تا اگر در لود عکس مشکلی بوجود اومد، حداقل یک رنگ نمایش داده بشه. همچنین ممکنه بعضی از سرویسهای ایمیل قدیمی از تصویر پس زمینه پشتیبانی نکن، با اینکار درون اون موارد، یک رنگ نمایش داده میشه. همچنین همیشه ارتفاع کل container رو کمتر از ارتفاع تصویر پس زمینه قرار بدین. در غیر اینصورت در برخی از سرویسهای ایمیلی، قالبتون با مشکل مواجه خواهد شد. ویژگی هایی که برای تگ mj-hero استفاده میشه، بصورت زیر هستن:

  • width : مشخص کردن عرض hero
  • mode : مشخص کردن حالت ارتفاع hero
  • height
  • background-width
  • background-height
  • background-url
  • background-color
  • background-position
  • padding
  • padding-top
  • padding-bottom
  • padding-right
  • padding-left
  • vertical-align

ویژگی هایی که برای تگ mj-hero-content مورد استفاده قرار میگیره:

  • width : عرض این المنت رو مشخص میکنه و پیش فرض اون 100% هست
  • align : ترازبندی افقی رو مشخص میکنه و پیش فرض اون وسط هست
  • background-color : رنگ پس زمینه رو مشخص میکنه و پیش فرض اون transparent یا بی رنگ هست
  • padding
  • padding-top
  • padding-bottom
  • padding-left
  • padding-right

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

موفق باشید

یا علی

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

دیدگاه ها 4 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

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

  • ‏‏

    سلام
    خسته نباشید؛
    من امروز با وبسایت 7 لرن آشنا شدم و تو این مدت کوتاه خیلی هم از مطالبش(دنیای کدها) استفاده کردم.ممنونم.

  • ارسال دیدگاه

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram