See other templatesSee other templates

JSN Fidem با تمرکز قوی بر روی تایپوگرافی برنامه نویسی شده است و ما امیدوار هستیم توانایی ارائه جامع ترین محتوا را داشته باشد. سرتیتر، متن، پیوند ها، جدول ها، تصاویر و همه با سطح بالایی از پالایش طراحی شده اند. بیایید نگاهی به آن بیندازیم.

عنوان

این یک عنوان H1 است

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

این یک عنوان H2 است

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

این یک عنوان H3 است

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

این یک عنوان H4 است

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

این یک عنوان H5 است

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

این یک عنوان H6 است

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


ستون های متنی

شما می توانیدمتن ود را در چند ستون توسط یک کد ساده html مرتب کنید. JSN Fidem تعداد ستون هایی را که تعریف کرده اید تشخیص داده و بطور اتوماتیک آنها را مرتب می کند.

استفاده: <div class=”grid-layout”><div>متن ستون 1</div><div>متن ستون 2</div></div>

محتوا در 2 ستون مرتب می شوند

ستون متن

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

ستون متن

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

محتوا در 3 ستون مرتب می شوند

ستون متن

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

ستون متن

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

ستون متن

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

محتوا در 4 ستون مرتب می شوند

ستون متن

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

ستون متن

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

ستون متن

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

ستون متن

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

محتوا در 5 ستون مرتب می شوند

ستون متن

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

ستون متن

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

ستون متن

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

ستون متن

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

ستون متن

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.


سبک های متن

متن بدون قالب(<pre> تگ)

div.grid-layout2 div.grid-col {
 float: left;
 width: 49.95%;
}
div.grid-layout3 div.grid-col {
 float: left;
 width: 33.3%;
}

متن نقل قول (<blockquote> تگ)

شما می توانید این سبک را برای نقل قول کردن صحبت ها، ایده های یک شخص یا قسمتی از یک کتاب، مقاله و غیره استفاده کنید. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.

طرز استفاده: <blockquote>این نقل قول شماست</blockquote>

Drop Cap

شما می توانید این سبک علامت را برای پاراگراف متنی روزنامه / مجله بکار ببرید. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.

طرز استفاده: <p class="text-dropcap">این یک متن با نماد Drop Cap می باشد</p>

متن برجسته

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

طرز استفاده: <span class="text-highlight">.این متنی است که برجسته شده است</span>

متن برجسته شده با حرکت موس

شما می توانید این سبک را برای برجسته کردن متن های مهم توسط حرکت موس استفاده کنید. فقط کافیست موس را روی این قسمت حرکت دهید تا ببینید چطور برجسته می شود.

طرز استفاده: <div class="text-box-highlight">.این متنی است که برجسته شده است</div>

شما می توانید این سبک را برای برجسته کردن متن های مهم توسط حرکت موس استفاده کنید. فقط کافیست موس را روی این قسمت حرکت دهید تا ببینید چطور برجسته می شود.

طرز استفاده: <div class="text-box-highlight">.این متنی است که برجسته شده است</div>

متن هشدار

شما می توانید این سبک را برای ساخت پاراگراف متنی هشدار یا اخطار که نیازمند توجه کاربر است استفاده کنید. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. 

طرز استفاده: <p class="text-alert">این متنی است که نیازمند توجه کاربر است.</p>

متن اطلاع رسانی

شما می توانید از این سبک برای پاراگراف متنی اطلاع رسانی که نیاز چندانی به توجه کاربر ندارد استفاده کنید. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. 

طرز استفاده: <p class="text-info">این متنی است که نیازمند توجه کاربر نمی باشد.</p>

متن دانلود

شما می توانید این سبک را برای پاراگراف متنی اطلاع رسانی که مربوط به فرایند دانلود است استفاده کنید. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. 

طرز استفاده: <p class="text-download">این متن مربوط به دانلود است.</p>

متن نکته

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

طرز استفاده:<p class="text-tip">این متن اشاره ای یا راهنما می باشد.</p>

متن توضیح

شما می توانید این سبک را برای پاراگراف متنی توضیحی بکار ببرید. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. 

طرز استفاده: <p class="text-comment">این متن توضیحی شما است.</p>

متن ضمیمه

شما می توانید این سبک را برای پاراگراف متنی مرتبط با ضمیمه بکار ببرید. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. 

طرز استفاده: <p class="text-attachment">این متن مرتبط با ضمیمه می باشد.</p>

متن ویدئویی

شما می توانید این سبک را برای پاراگراف متنی مرتبط با ویدئو بکار ببرید. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. 

طرز استفاده: <p class="text-video">This is your video related text.</p>

متن صوتی

شما می توانید این سبک را برای پاراگراف متنی مرتبط با فایل صوتی بکار ببرید. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. 

طرز استفاده: <p class="text-audio">این متن مرتبط با فایل صوتی است.</p>


سبک های پیوند

سبک های آیکن پیوند

شما می توانید با اضافه کردن یک کلاس ساده، تا 20 آیکن از پیش تعریف شده به جلوی هر پیوند اضافه کنید.

طرز استفاده<a class="link-icon jsn-icon-xxx">.این متن پیوند است</a>، که xxx نام آیکن است. اطلاعات تفصیلی در مورد همه نام آیکن ها در مستندات قالب آورده شده است.

مثال: <a class="link-icon jsn-icon-download">.این پیوند برای دانلود است</a>

سبک های دکمه پیوند

JSN Fidem شش سبک دکمه برای هر پیوند فراخوانی که در محتوایتان دارید پیشنهاد می کند.

طرز استفاده: <a class="link-button button-xxx">این متن پیوند است.</a>، که xxx نام رنگ دکمه است که از این ها انتخاب می شود: روشن، تیره، سبز، نارنجی، آبی و قرمز

نمونه: <a class="link-button button-orange">مشاهده پلن ها وقیمت ها</a>

ترکیب سبک های آیکن و دکمه

شما می توانید سبک های آیکن و دکمه پیوندها را با هم ترکیب کنید.

طرز استفاده: <a class="link-button button-xxx"><span class="link-icon jsn-icon-yyy">این متن پیوند است</span></a>، که xxx و yyy رنگ دکمه و نام آیکن است.

نمونه:<a class="link-button button-green"><span class="link-icon jsn-icon-cart">افزودن به سبد خرید</span></a>

دکمه با سبک علامت و آیکن

JSN Fidem با سبک دکمه علامت دار

طرز استفاده: <a class="link-button button-xxx button-flag"><span class="link-icon jsn-icon-yyy">این متن پیوند است.</span></a>، که xxx و yyy رنگ دکمه و نام آیکن می باشد.

نمونه: <a class="link-button button-green button-flag"><span class="link-icon jsn-icon-cart">افزودن به سبد خرید</span></a>

سبک های پیوند افزونه ها

JSN Fidem نه تنها قادر است آن طوری که در بالا گفته شد آیکن به جلوی یک پیوند اضافه کند، بلکه 23 آیکن افزونه را هم می تواند به انتهای آن اضافه کند.

همه آیکن ها می تواند به صورت اتوماتیک و با فعال کردن یک پارامتر در قالب و یا به صورت دستی با افزودن یک کلاس به پیوند اختصاص داده شوند.

طرز استفاده: <a class="link-icon-ext jsn-icon-ext-xxx">این متن پیوند است.</a>، که xxx نام آیکن است. اطلاعات تفصیلی درباره همه نام آیکن ها در مستندات قالب آورده شده است.


سبک های جدول

سبک جدولی ردیف های ساده

سرتیتر جدولسرتیتر ستون 1سرتیتر ستون 2سرتیتر ستون 3
سرتیتر ردیف 1 لورم ایپسوم متن ساختگی تولید سادگی
سرتیتر ردیف 1 لورم ایپسوم متن ساختگی تولید سادگی
سرتیتر ردیف 1 لورم ایپسوم متن ساختگی تولید سادگی
سرتیتر ردیف 1 لورم ایپسوم متن ساختگی تولید سادگی
سرتیتر ردیف 1 لورم ایپسوم متن ساختگی تولید سادگی
پانویس جدول اطلاعات پانویس

سبک جدولی نوار رنگی

سرتیتر جدولسرتیتر ستون 1سرتیتر ستون 2سرتیتر ستون 3
سرتیتر ردیف 1 لورم ایپسوم متن ساختگی تولید سادگی
سرتیتر ردیف 1 لورم ایپسوم متن ساختگی تولید سادگی
سرتیتر ردیف 1 لورم ایپسوم متن ساختگی تولید سادگی
سرتیتر ردیف 1 لورم ایپسوم متن ساختگی تولید سادگی
سرتیتر ردیف 1 لورم ایپسوم متن ساختگی تولید سادگی
پانویس جدول لورم ایپسوم

سبک جدولی نوار طوسی

سرتیتر جدولسرتیتر ستون 1سرتیتر ستون 2سرتیتر ستون 3
سرتیتر ردیف 1 لورم ایپسوم متن ساختگی تولید سادگی
سرتیتر ردیف 1 لورم ایپسوم متن ساختگی تولید سادگی
سرتیتر ردیف 1 لورم ایپسوم متن ساختگی تولید سادگی
سرتیتر ردیف 1 لورم ایپسوم متن ساختگی تولید سادگی
سرتیتر ردیف 1 لورم ایپسوم متن ساختگی تولید سادگی
پانویس جدول اطلاعات پانویس

سبک های فهرست

سبک های فهرست استاندارد

فهرست غیر مرتب
  • لورم ایپسوم متن ساختگی
  • با تولید سادگی نامفهوم
  • از صنعت چاپ و با استفاده
فهرست نامرتب
  1. لورم ایپسوم متن ساختگی
  2. با تولید سادگی نامفهوم
  3. از صنعت چاپ و با استفاده

سبک فهرست پیکاندار

پیکان قرمز
  • لورم ایپسوم متن ساختگی
  • با تولید سادگی نامفهوم
  • از صنعت چاپ و با استفاده
پیکان آبی
  • لورم ایپسوم متن ساختگی
  • با تولید سادگی نامفهوم
  • از صنعت چاپ و با استفاده
پیکان سبز
  • لورم ایپسوم متن ساختگی
  • با تولید سادگی نامفهوم
  • از صنعت چاپ و با استفاده

سبک های فهرست آیکنی

فهرست با آیکن مطلب
  • لورم ایپسوم متن ساختگی
  • با تولید سادگی نامفهوم
  • از صنعت چاپ و با استفاده
فهرست با آیکن پوشه
  • لورم ایپسوم متن ساختگی
  • با تولید سادگی نامفهوم
  • از صنعت چاپ و با استفاده
فهرست با آیکن تصویر
  • لورم ایپسوم متن ساختگی
  • با تولید سادگی نامفهوم
  • از صنعت چاپ و با استفاده
Online icon list
  • لورم ایپسوم متن ساختگی
  • با تولید سادگی نامفهوم
  • از صنعت چاپ و با استفاده
فهرست با آیکن ستاره
  • لورم ایپسوم متن ساختگی
  • با تولید سادگی نامفهوم
  • از صنعت چاپ و با استفاده
فهرست با آیکن کاربر
  • لورم ایپسوم متن ساختگی
  • با تولید سادگی نامفهوم
  • از صنعت چاپ و با استفاده

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

سبک های فهرست شماره دار

فهرست شماره دار بالت آبی
  • لورم ایپسوم متن ساختگی
  • با تولید سادگی نامفهوم
  • از صنعت چاپ و با استفاده
فهرست شماره دار بالت سبز
  • لورم ایپسوم متن ساختگی
  • با تولید سادگی نامفهوم
  • از صنعت چاپ و با استفاده
فهرست شماره دار بالت بنفش
  • لورم ایپسوم متن ساختگی
  • با تولید سادگی نامفهوم
  • از صنعت چاپ و با استفاده
فهرست شماره دار نارنجی
  • لورم ایپسوم متن ساختگی
  • با تولید سادگی نامفهوم
  • از صنعت چاپ و با استفاده
فهرست شماره دار بالت قرمز
  • لورم ایپسوم متن ساختگی
  • با تولید سادگی نامفهوم
  • از صنعت چاپ و با استفاده
فهرست شماره دار بالت طوسی
  • لورم ایپسوم متن ساختگی
  • با تولید سادگی نامفهوم
  • از صنعت چاپ و با استفاده
فهرست شماره دار رقم آبی
  • لورم ایپسوم متن ساختگی
  • با تولید سادگی نامفهوم
  • از صنعت چاپ و با استفاده
فهرست شماره دار رقم سبز
  • لورم ایپسوم متن ساختگی
  • با تولید سادگی نامفهوم
  • از صنعت چاپ و با استفاده
فهرست شماره دار رقم بنفش
  • لورم ایپسوم متن ساختگی
  • با تولید سادگی نامفهوم
  • از صنعت چاپ و با استفاده
فهرست شماره دار رقم بنفش
  • لورم ایپسوم متن ساختگی
  • با تولید سادگی نامفهوم
  • از صنعت چاپ و با استفاده
فهرست شماره دار رقم قرمز
  • لورم ایپسوم متن ساختگی
  • با تولید سادگی نامفهوم
  • از صنعت چاپ و با استفاده
فهرست شماره دار رقم طوسی
  • لورم ایپسوم متن ساختگی
  • با تولید سادگی نامفهوم
  • از صنعت چاپ و با استفاده
به ما اهدا کنید

عشق خود را با یک هدیه گسترش دهید.

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

برو بالا