برای مشاهده اطلاعات این بخش به مدیریت ماژول رفته و فیلتر موقعیت را روی "offcanvas" قرار دهید

منوی اصلی

ویژه

سینک ظرفشوییسینک ظرفشویی
۱۳۹۲-۰۸-۲۳ ۱۶:۵۰:۱۰مبلمان385,000 تومان
توضیحات مربوط به کالا را بطور خلاصه در این بخش وارد کنید ...

ورود

ورود

نام کاربری / ایمیل
رمز عبور
ذخیره سازی اطلاعات

تایپوگرافی قالب

منتشر نشده

منظور از تایپوگرافی برای یک قالب، استفاده از کلاس هایی است که اگر در کدهای HTML شما (در ادیتور محیط مدیریت) وارد شوند، می توانند ظاهر سایت را جذاب تر کنند. این کلاس ها به کدهایی متصل هستند که قبلا در فایل های CSS قالب نوشته شده اند، پس در زمان شما صرفه جویی خواهد شد و شما تنها با ذکر نام کلاس، کلیه افکت ها و رنگبندی ها را خواهید داشت.

در ادامه با اسامی برخی ازین کلاس های و نحوه استفاده آشنا خواهید شد. در نظر داشته باشید اگر اولین بار است که می خواهید از کلاس های در کدهای html استفاده کنید باید دقت بیشتر داشته باشد و شاید این پروسه قدری وقت گیر باشد اما در دراز مدت این کار بسیار آسان خواهد شد و شما به ارزش استفاده از تایپوگرافی قالب کاملا پی خواهید برد

استفاده از آیکون های متحرک

<div class="jm-icon"><a href="/#link"><img src="/images/modules/icon.png" border="0" /></a></div> <div class="jm-custom-title">نیازمندی های رایگان</div> <div class="jm-custom-subtitle">آسان بفروشید، آسان پیدا کنید</div>

 

نیازمندی های رایگان
آسان بفروشید، آسان پیدا کنید

 

افکت های روی تصویر (به کمک CSS)

مثال های زیر در رابطه با ایجاد افکت بعد از قرار گرفتن ماوس روی تصاویر می باشند

 

مثال یک

<div class="ch-item ch-first" style="background: url('/images/modules/animated.jpg') no-repeat;"> <div class="ch-info"> <div class="ch-container"> <div class="ch-outer"> <div class="ch-inner"> <p><a href="/#link">پیشنهاد ویژه<br /><span class="smaller">برای شما</span></a></p> </div> </div> </div> </div> </div>

 

 

مثال دو

<div class="ch-item ch-second" style="background: url('/images/modules/animated.jpg') no-repeat;"> <div class="ch-info-wrap"> <div class="ch-info"> <div class="ch-info-front"> </div> <div class="ch-info-back"> <div class="ch-container"> <div class="ch-outer"> <div class="ch-inner"> <p><a href="/#link">پیشنهاد ویژه<br /><span class="smaller">برای شما</span></a></p> </div> </div> </div> </div> </div> </div> </div>

 

 

مثال سه

<div class="ch-item ch-third"> <div class="ch-info"> <div class="ch-info-front" style="background: url('/images/modules/animated.jpg') no-repeat;"> </div> <div class="ch-info-back"> <div class="ch-container"> <div class="ch-outer"> <div class="ch-inner"> <p><a href="/#link">پیشنهاد ویژه<br /><span class="smaller">برای شما</span></a></p> </div> </div> </div> </div> </div> </div>

 

 

حاشیه دور عکس

<img class="border_img1" src="/image.jpg" />
Typography

 

<img class="border_img2" src="/image.jpg" />

 

<img class="border_img3" src="/image.jpg" />
Typography

 

ویدئو از یوتیوب

<div class="view view-video"><img src="/images/modules/video.jpg" border="0" alt="Video" /> <div class="mask"> <span class="space"> &nbsp; </span> <a class="modal readmore" href="/#link" rel="{handler: 'iframe', size: {x: 800, y: 600}}"><span class="jm">مشاهده ویدئو</span></a></div>

 

تیترها و سایزبندی

تیتر شماره یک (h1)

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


تیتر شماره دو (h2)

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


تیتر شماره سه (h3)

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

تیتر شماره چهار (h4)

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


تیتر شماره پنج (h5)

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


تیتر شماره شش (h6)

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

 

بلوک های شمارشی

<p class="jm-block second"><span class="jm">01</span>متن خود را اینجا وارد کنید</p>

aبه کمک بلوک های شمارشی می توانید ویژگی های یک موضوع را بررسی کنید. برای اینکار ابتدا یک تگ پاراگراف ایجاد کرده و سپس داخل آن به ازای هر شماره یک تگ اسپن ایجاد کنید

bبه کمک بلوک های شمارشی می توانید ویژگی های یک موضوع را بررسی کنید. برای اینکار ابتدا یک تگ پاراگراف ایجاد کرده و سپس داخل آن به ازای هر شماره یک تگ اسپن ایجاد کنید

cبه کمک بلوک های شمارشی می توانید ویژگی های یک موضوع را بررسی کنید. برای اینکار ابتدا یک تگ پاراگراف ایجاد کرده و سپس داخل آن به ازای هر شماره یک تگ اسپن ایجاد کنید

<p class="jm-block"><span class="jm">a</span>متن خود را اینجا وارد کنید</p>

aبه کمک بلوک های شمارشی می توانید ویژگی های یک موضوع را بررسی کنید. برای اینکار ابتدا یک تگ پاراگراف ایجاد کرده و سپس داخل آن به ازای هر شماره یک تگ اسپن ایجاد کنید

bبه کمک بلوک های شمارشی می توانید ویژگی های یک موضوع را بررسی کنید. برای اینکار ابتدا یک تگ پاراگراف ایجاد کرده و سپس داخل آن به ازای هر شماره یک تگ اسپن ایجاد کنید

cبه کمک بلوک های شمارشی می توانید ویژگی های یک موضوع را بررسی کنید. برای اینکار ابتدا یک تگ پاراگراف ایجاد کرده و سپس داخل آن به ازای هر شماره یک تگ اسپن ایجاد کنید

 

بلاک های رنگی

نام کلاس این پاراگراف : "blue"
<p class="blue" > Text goes here</p>

 

نام کلاس این پاراگراف : "green"
<p class="green" > Text goes here</p>

 

نام کلاس این پاراگراف : "red"
<p class="red" > Text goes here</p>

نام کلاس این پاراگراف : "bluefill"
<p class="bluefill" > Text goes here</p>

نام کلاس این پاراگراف : "greenfill"
<p class="greenfill" > Text goes here</p>

نام کلاس این پاراگراف : "redfill"
<p class="redfill" > Text goes here</p>

 

بلوک های نقل قول

نام کلاس نقل قول : "quote-left"
<p class="quote-left" > Text goes here</p>

نام کلاس نقل قول : "quote-right"
<p class="quote-right" > Text goes here</p>

 

آیکون های مربوط به بلوک ها

کلاس پاراگراف مربوط به این آیکون "jmbadge"
<p class="jmbadge" > Text goes here</p>

کلاس پاراگراف مربوط به این آیکون "jmcalendar"
<p class="jmcalendar" > Text goes here</p>

کلاس پاراگراف مربوط به این آیکون "jmchat"
<p class="jmchat" > Text goes here</p>

کلاس پاراگراف مربوط به این آیکون "jmcheck"
<p class="jmcheck" > Text goes here</p>

کلاس پاراگراف مربوط به این آیکون "jmcloud"
<p class="jmcloud" > Text goes here</p>

کلاس پاراگراف مربوط به این آیکون "jmdirection"
<p class="jmdirection" > Text goes here</p>

کلاس پاراگراف مربوط به این آیکون "jmdivide"
<p class="jmdivide" > Text goes here</p>

کلاس پاراگراف مربوط به این آیکون "jmerror"
<p class="jmerror" > Text goes here</p>

کلاس پاراگراف مربوط به این آیکون "jmfire"
<p class="jmfire" > Text goes here</p>

کلاس پاراگراف مربوط به این آیکون "jmflag"
<p class="jmflag" > Text goes here</p>

کلاس پاراگراف مربوط به این آیکون "jmheart"
<p class="jmheart" > Text goes here</p>

کلاس پاراگراف مربوط به این آیکون "jmhome"
<p class="jmhome" > Text goes here</p>

کلاس پاراگراف مربوط به این آیکون "jminfo"
<p class="jminfo" > Text goes here</p>

کلاس پاراگراف مربوط به این آیکون "jmlist"
<p class="jmlist" > Text goes here</p>

کلاس پاراگراف مربوط به این آیکون "jmmail"
<p class="jmmail" > Text goes here</p>

کلاس پاراگراف مربوط به این آیکون "jmpeople"
<p class="jmpeople" > Text goes here</p>

کلاس پاراگراف مربوط به این آیکون "jmstar"
<p class="jmstar" > Text goes here</p>

کلاس پاراگراف مربوط به این آیکون "jmstat"
<p class="jmstat" > Text goes here</p>

 

 

آیکون های شبکه اجتماعی

<div class="jm-social"> <div class="jm-social-title">ما را دنبال کنید</div> <p class="jm-icons"> <a class="jm-facebook" href="/#link"><span class="bg">&nbsp;</span><span class="ttip">facebook</span></a> <a class="jm-twitter" href="/#link"><span class="bg">&nbsp;</span><span class="ttip">twitter</span></a> <a class="jm-google" href="/#link"><span class="bg">&nbsp;</span><span class="ttip">google plus</span></a> <a class="jm-pinterest" href="/#link"><span class="bg">&nbsp;</span><span class="ttip">pinterest</span></a> </p> </div>

 

 

کلاس مربوط به کلید ادامه مطلب "readmore2"
<a class="readmore2" />

ادامه مطلب

 

کلاس مربوط به کلید ادامه مطلب "readmore3"
<a class="readmore3" />

ادامه مطلب