Типография

Заголовки

Это заголовок H1

Текст с оф. сайта "Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu." перевести его я не смог, если кто сможет перевести пишите, по моему там просто бутер.

Это заголовок H2

Текст с оф. сайта "Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu." в остальных пунктах он повторяется.

Это заголовок H3

Текст с оф. сайта "Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu." в остальных пунктах он повторяется.

Это заголовок H4

Текст с оф. сайта "Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu." в остальных пунктах он повторяется.

Это заголовок H5

Текст с оф. сайта "Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu." в остальных пунктах он повторяется.

Это заголовок H6

Текст с оф. сайта "Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu." в остальных пунктах он повторяется.


Текстовые столбцы

Вы можете организовать содержимое в нескольких столбцах, используя очень простой html-кода. JSN Epic определит количество столбцов и автоматически их раставит.

Использование: <div class=”grid-layout”><div>Текст 1 колонки</div><div>Текст 2 колонки</div></div>, (я думаю понятно для трех ещё просто добавляете)

Содержание, расположены в 2 колонки

Столбец с текстом

Текст с оф. сайта "Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu." эта непереводимая гадость повторяется.

Столбец с текстом

Текст с оф. сайта "Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu." эта непереводимая гадость повторяется.

Содержание, расположены в 3 колонки

Столбец с текстом

Текст с оф. сайта "Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu." эта непереводимая гадость повторяется.

Столбец с текстом

Текст с оф. сайта "Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu." эта непереводимая гадость повторяется.

Столбец с текстом

Текст с оф. сайта "Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu." эта непереводимая гадость повторяется.

Содержание, расположены в 4 колонки

Столбец с текстом

Текст с оф. сайта "Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu." эта непереводимая гадость повторяется.

Столбец с текстом

Текст с оф. сайта "Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu." эта непереводимая гадость повторяется.

Столбец с текстом

Текст с оф. сайта "Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu." эта непереводимая гадость повторяется.

Столбец с текстом

Текст с оф. сайта "Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu." эта непереводимая гадость повторяется.

Содержание, расположены в 5 столбцов

Столбец с текстом

Текст с оф. сайта "Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu." эта непереводимая гадость повторяется.

Столбец с текстом

Lorem ipsum dolor sit amet батик eleifend Элит vel tellus laoreet.

Столбец с текстом

Текст с оф. сайта "Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu." эта непереводимая гадость повторяется.

Столбец с текстом

Текст с оф. сайта "Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu." эта непереводимая гадость повторяется.

Столбец с текстом

Текст с оф. сайта "Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu." эта непереводимая гадость повторяется.


Стили текста

Отформатированый текст (<pre> тег)

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

Цитировать текст (<blockquote> тег)

Вы можете нам этот стиль процитировать чужой речи, идея или фрагмент из некоторых книг, статей и т.д. Текст с оф. сайта "Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu." эта непереводимая гадость повторяется.

Использование: <blockquote>Это ваша цитата</blockquote>

Буквица

Вы этот стиль можно использовать специальные буквица символ для журнала / газета текст пункта. Текст с оф. сайта "Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu." эта непереводимая гадость повторяется.

Использование: <p class="text-dropcap">Это текст с большим символом.</p>

Выделенный текст

Этот стиль для выделения важных слов и/или ключевое слово выражение можно использовать в странице результатов поиска. Текст с оф. сайта "Lorem ipsum dolor sit amet consectetuer eleifend elit vel tellus laoreet. At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu." эта непереводимая гадость повторяется.

Использование: <span class="text-highlight">Текст который будем выделять.</span>

Выделенный текст при наведении

Этот стиль можно использовать для выделения важных текстовый блоков. Просто наведите курсор мыши на этот блок текста, чтобы увидеть, как он выделяется.

Использование: <div class="text-box-highlight">Текст который хотите выделить данным оброзом</div>

Этот стиль можно использовать для выделения важных текстовый блок на мыши над. Просто наведите курсор мыши на этот блок текста, чтобы увидеть, как он выделяется.

Использование: <div class="text-box-highlight">Текст который хотите выделить данным оброзом</div>

Список стилей

Стандартный список стилей (в пунктах опять идет непереводимый набор слов)

Неупорядоченный список
  • Lorem ipsum dolor sit amet
  • Consetetur sadipscing elitr
  • Sed diam voluptua
Упорядоченный список
  1. Lorem ipsum dolor sit amet
  2. Consetetur sadipscing elitr
  3. Sed diam voluptua

Стрелка списка стилей

Красная стрелка
  • Lorem ipsum dolor sit amet
  • Consetetur sadipscing elitr
  • Sed diam voluptua
Синяя стрелка
  • Lorem ipsum dolor sit amet
  • Consetetur sadipscing elitr
  • Sed diam voluptua
Зеленая стрелка
  • Lorem ipsum dolor sit amet
  • Consetetur sadipscing elitr
  • Sed diam voluptua

Все остальные пункты работают только на коммерческом шаблоне.

Текст оповещения

Этот стиль можно использовать для оповещения или предупреждения текста абзаца, требующих внимания пользователя. В eros sem quis ut pellentesque пзиз et consequat эним lorem. Текст с оф. сайта "Aenean lorem consequat consequat ЕС." мне перевести тоже не удолось.

Использование: <p class="text-alert">Это текст, который требует внимания пользователя.</p>

Информация текст

Этот стиль можно использовать для регулярной информации текст пункта, который не требует много пользователя внимания. В eros sem quis ut pellentesque пзиз et consequat эним lorem. Текст с оф. сайта "Aenean lorem consequat consequat ЕС." мне перевести тоже не удолось.

Использование: <p class="text-info">Помещаем информационный текст.</p>

Скачать текст

Этот стиль можно использовать для информации текста абзаца, относящиеся к процессу загрузки. Текст с оф. сайта "At ut pellentesque risus quis sem eros et consequat enim lorem. Aenean lorem consequat consequat eu.." мне перевести тоже не удолось.

Использование: <p class="text-download">Это будет загрузить соответствующий текст.</p>

Текст подсказки

Этот стиль можно использовать для полезной информации как советы, подсказки или текст справки. Текст с оф. сайта "Aenean lorem consequat consequat ЕС." мне перевести тоже не удолось.

Использование: <p class="text-tip">Текст подсказки или помощи.</p>

Текст комментария

Этот стиль можно использовать для комментариев. Текст с оф. сайта "Aenean lorem consequat consequat ЕС." мне перевести тоже не удолось.

Использование: <p class="text-comment">Это ваш текст комментария.</p>

Вложение текст

Этот стиль можно использовать для абзаца текста информации, связанных с файлами вложения. Текст с оф. сайта "Aenean lorem consequat consequat ЕС." мне перевести тоже не удолось.

Использование: <p class="text-attachment">Это ваши вложения связанные с текстом.</p>

Видео текст

Этот стиль можно использовать для описания текста абзаца, связанных с видео-файлами. Текст с оф. сайта "Aenean lorem consequat consequat ЕС." мне перевести тоже не удолось.

Использование: <p class="text-video">Это ваше видео и соответствующий текст.</p>

Аудио текст

Этот стиль можно использовать для описания текста абзаца, относящиеся к аудио-файлам. Текст с оф. сайта "Aenean lorem consequat consequat ЕС." мне перевести тоже не удолось.

Использование: <p class="text-audio">Это ваш аудио соответствующий текст.</p>


У меня бесплатный шаблон, поэтому здесь приводится перевод текста с официального сайта, в будущём покавыряю код, может будет работать не хуже чем pro.

Стили ссылок

Значок стили ссылок

Вы можете прикрепить до 20 стандартные иконки фронт любую ссылку, добавив простой класс к нему.

Использование: < класс = «связь значок значок xxx» >Это текст ссылки.</a>, где xxx — имя значка должен применяться. Подробную информацию о всех имена значков можно найти в документации шаблона.

Пример: < класс = «связь значок значок скачать» >Это ссылка на что-то скачать.</a>

Стили кнопки ссылок

JSN Epic предлагает 6 стилей кнопок для украшения любые ссылки призыв к действию, у вас в содержании.

Использование: < класс = «кнопка ссылки кнопку xxx» >Это текст ссылки.</a>, где xxx — это имя цвета кнопки, выбранных из: свет, темные, зеленый, оранжевый, синий и красный.

Пример: < класс = «кнопка ссылки кнопку апельсин» >Посмотрите планы и цены.</a>

Сочетание кнопки и значок стили

Вы можете использовать кнопку и значок ссылки стиль в сочетании.

Использование: < класс = «связь значок значок xxx» >Это текст ссылки.</a>, где xxx — имя значка должен применяться. Подробную информацию о всех имена значков можно найти в документации шаблона.

Пример: < класс = «связь значок значок скачать» >Это ссылка на что-то скачать.</a>

Стили кнопки ссылок

JSN Epic предлагает 6 стилей кнопок для украшения любые ссылки призыв к действию, у вас в содержании.

Использование: < класс = «кнопка ссылки кнопку xxx» >Это текст ссылки.</a>, где xxx — это имя цвета кнопки, выбранных из: свет, темные, зеленый, оранжевый, синий и красный.

Пример: < класс = «кнопка ссылки кнопку апельсин» >Посмотрите планы и цены.</a>

Сочетание кнопки и значок стили

Вы можете использовать кнопку и значок ссылки стиль в сочетании.

Использование: < класс = «кнопка ссылки кнопку xxx» >< span class = «связь значок значок yyy» >Это текст ссылки.</span> </a>, где xxx и yyy кнопку Цвет и значок имена соответственно.

Пример: < класс = «кнопка ссылки кнопку зеленых» >< span class = «связь значок значок корзину» >Добавьте в корзину.</span> </a>

Расширение ссылки стили

JSN Epic способен придавать Отдел связи как описано выше в разделе, но также 23 расширение иконы в конце соединения в не только описательные значок.

Все значки могут быть назначены автоматически, позволяя параметра шаблона, или вручную, добавив простой класс по ссылке.

Использование: < класс = «связь икона ext значок ext-xxx» >Это текст ссылки.</a>, где xxx — имя значка. Подробную информацию о всех имена значков можно найти в документации шаблона.


Стили таблиц

Простой стиль таблицы строк

Заголовок таблицыЗаголовок столбца 1Заголовок столбца 2Заголовок столбца 3
Нижний колонтитул таблицы Данные нижнего колонтитула
Заголовок строки 1 Lorem ipsum Dolor sit amet Lorem ipsum
Заголовок строки 1 Lorem ipsum Dolor sit amet Lorem ipsum
Заголовок строки 1 Lorem ipsum Dolor sit amet Lorem ipsum
Заголовок строки 1 Lorem ipsum Dolor sit amet Lorem ipsum
Заголовок строки 1 Lorem ipsum Dolor sit amet Lorem ipsum

Цвет полосы стиль таблицы

Заголовок таблицыЗаголовок столбца 1Заголовок столбца 2Заголовок столбца 3
Нижний колонтитул таблицы Данные нижнего колонтитула
Заголовок строки 1 Lorem ipsum Dolor sit amet Lorem ipsum
Заголовок строки 1 Lorem ipsum Dolor sit amet Lorem ipsum
Заголовок строки 1 Lorem ipsum Dolor sit amet Lorem ipsum
Заголовок строки 1 Lorem ipsum Dolor sit amet Lorem ipsum
Заголовок строки 1 Lorem ipsum Dolor sit amet Lorem ipsum

Серые полосы стиль таблицы

Заголовок таблицыЗаголовок столбца 1Заголовок столбца 2Заголовок столбца 3
Нижний колонтитул таблицы Данные нижнего колонтитула
Заголовок строки 1 Lorem ipsum Dolor sit amet Lorem ipsum
Заголовок строки 1 Lorem ipsum Dolor sit amet Lorem ipsum
Заголовок строки 1 Lorem ipsum Dolor sit amet Lorem ipsum
Заголовок строки 1 Lorem ipsum Dolor sit amet Lorem ipsum
Заголовок строки 1 Lorem ipsum Dolor sit amet Lorem ipsum


Icon Список стилей

Статья список значков
  • Lorem ipsum dolor sit amet
  • Consetetur sadipscing elitr
  • Sed диам voluptua
Значок списка папок
  • Lorem ipsum dolor sit amet
  • Consetetur sadipscing elitr
  • Sed диам voluptua
Изображение значка список
  • Lorem ipsum dolor sit amet
  • Consetetur sadipscing elitr
  • Sed диам voluptua
Список онлайн значок
  • Lorem ipsum dolor sit amet
  • Consetetur sadipscing elitr
  • Sed диам voluptua
Значок звезды список
  • Lorem ipsum dolor sit amet
  • Consetetur sadipscing elitr
  • Sed диам voluptua
Значок списка пользователей
  • Lorem ipsum dolor sit amet
  • Consetetur sadipscing elitr
  • Sed диам voluptua

Можно назначить любого из предопределенных 20 значков для элементов списка. 6 икон, показано выше являются только образцами.

Число стилей списков

Синий список номеров пуля
  • 1Lorem ipsum dolor sit amet
  • 2Consetetur sadipscing elitr
  • 3Sed диам voluptua
Список Зеленый пуля
  • 1Lorem ipsum dolor sit amet
  • 2Consetetur sadipscing elitr
  • 3Sed диам voluptua
Пуля серый список номеров
  • 1Lorem ipsum dolor sit amet
  • 2Consetetur sadipscing elitr
  • 3Sed диам voluptua
Пуля оранжевый список номеров
  • 1Lorem ipsum dolor sit amet
  • 2Consetetur sadipscing elitr
  • 3Sed диам voluptua
Пуля красный список
  • 1Lorem ipsum dolor sit amet
  • 2Consetetur sadipscing elitr
  • 3Sed диам voluptua
Фиолетовый пуля список
  • 1Lorem ipsum dolor sit amet
  • 2Consetetur sadipscing elitr
  • 3Sed диам voluptua
Синий значный номер список
  • 1Lorem ipsum dolor sit amet
  • 2Consetetur sadipscing elitr
  • 3Sed диам voluptua
Список Зеленый цифр номера
  • 1Lorem ipsum dolor sit amet
  • 2Consetetur sadipscing elitr
  • 3Sed диам voluptua
Серый значный номер списка
  • 1Lorem ipsum dolor sit amet
  • 2Consetetur sadipscing elitr
  • 3Sed диам voluptua
Оранжевый значный номер списка
  • 1Lorem ipsum dolor sit amet
  • 2Consetetur sadipscing elitr
  • 3Sed диам voluptua
Цифра красный список
  • 1Lorem ipsum dolor sit amet
  • 2Consetetur sadipscing elitr
  • 3Sed диам voluptua
Фиолетовый значный номер списка
  • 1Lorem ipsum dolor sit amet
  • 2Consetetur sadipscing elitr
  • 3Sed диам voluptua