منظور از تایپوگرافی برای یک قالب، استفاده از کلاس هایی است که اگر در کدهای HTML شما (در ادیتور محیط مدیریت) وارد شوند، می توانند ظاهر سایت را جذاب تر کنند. این کلاس ها به کدهایی متصل هستند که قبلا در فایل های CSS قالب نوشته شده اند، پس در زمان شما صرفه جویی خواهد شد و شما تنها با ذکر نام کلاس، کلیه افکت ها و رنگبندی ها را خواهید داشت.
در ادامه با اسامی برخی ازین کلاس های و نحوه استفاده آشنا خواهید شد. در نظر داشته باشید اگر اولین بار است که می خواهید از کلاس های در کدهای html استفاده کنید باید دقت بیشتر داشته باشد و شاید این پروسه قدری وقت گیر باشد اما در دراز مدت این کار بسیار آسان خواهد شد و شما به ارزش استفاده از تایپوگرافی قالب کاملا پی خواهید برد
استفاده از آیکون های متحرک
افکت های روی تصویر (به کمک CSS)
مثال های زیر در رابطه با ایجاد افکت بعد از قرار گرفتن ماوس روی تصاویر می باشند
مثال یک
مثال دو
مثال سه
حاشیه دور عکس
ویدئو از یوتیوب
تیترها و سایزبندی
تیتر شماره یک (h1)
در این قسمت می توانید از اندازه هر تگ هدر (h) تخمینی بدست آورید. بطور کلی هدرها هم برای جلب توجه کاربر و هم ربات های گوگل مفید هستند و استفاده بموقع از آن ها توصیه می شود
تیتر شماره دو (h2)
در این قسمت می توانید از اندازه هر تگ هدر (h) تخمینی بدست آورید. بطور کلی هدرها هم برای جلب توجه کاربر و هم ربات های گوگل مفید هستند و استفاده بموقع از آن ها توصیه می شود
تیتر شماره سه (h3)
در این قسمت می توانید از اندازه هر تگ هدر (h) تخمینی بدست آورید. بطور کلی هدرها هم برای جلب توجه کاربر و هم ربات های گوگل مفید هستند و استفاده بموقع از آن ها توصیه می شود
تیتر شماره چهار (h4)
در این قسمت می توانید از اندازه هر تگ هدر (h) تخمینی بدست آورید. بطور کلی هدرها هم برای جلب توجه کاربر و هم ربات های گوگل مفید هستند و استفاده بموقع از آن ها توصیه می شود
تیتر شماره پنج (h5)
در این قسمت می توانید از اندازه هر تگ هدر (h) تخمینی بدست آورید. بطور کلی هدرها هم برای جلب توجه کاربر و هم ربات های گوگل مفید هستند و استفاده بموقع از آن ها توصیه می شود
تیتر شماره شش (h6)
در این قسمت می توانید از اندازه هر تگ هدر (h) تخمینی بدست آورید. بطور کلی هدرها هم برای جلب توجه کاربر و هم ربات های گوگل مفید هستند و استفاده بموقع از آن ها توصیه می شود
بلوک های شمارشی
aبه کمک بلوک های شمارشی می توانید ویژگی های یک موضوع را بررسی کنید. برای اینکار ابتدا یک تگ پاراگراف ایجاد کرده و سپس داخل آن به ازای هر شماره یک تگ اسپن ایجاد کنید
bبه کمک بلوک های شمارشی می توانید ویژگی های یک موضوع را بررسی کنید. برای اینکار ابتدا یک تگ پاراگراف ایجاد کرده و سپس داخل آن به ازای هر شماره یک تگ اسپن ایجاد کنید
cبه کمک بلوک های شمارشی می توانید ویژگی های یک موضوع را بررسی کنید. برای اینکار ابتدا یک تگ پاراگراف ایجاد کرده و سپس داخل آن به ازای هر شماره یک تگ اسپن ایجاد کنید
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>
آیکون های شبکه اجتماعی
<a class="readmore2" />
<a class="readmore3" />