Типография [ наши стили оформления ] текстов
Добро пожаловать!
Раз вы здесь, то смеем предположить, вы также не в восторге от унылых текстов с невнятным оформлением, которым переполнен Интернет. На нашем портале, в частности и в блоге, мы предоставляем вам набор гибких и мощных инструментов по оформлению текстов с помощью которого вы сможете сделать свой авторский материал оригинальным и "вкусным" для читателей.
Мы предлагаем своим авторам широкие возможности по оформлению текстов.
Вы, как зарегистрированный пользователь, помимо прочего, сможете добавлять свои авторские материалы в блог.

При создании / редактировании материала, в нижней части диалогового окна редактирования есть кнопка - "RokCandy Macros" в ней-то и собрано все самое интересное по части оформления.
Итак, начнем!

Кликнув на данную кнопку перед вами появится диалоговое окно с двумя выпадающими списками:
TYPOGRAPHY > text
Во втором выпадающем списке выбираем опцию -"text".

В появившемся окне слева будут сгруппированы тн Макросы (HTML-коды) которые мы используем (по мере их обновления / внесения новых данная статья будет дополнена).

Вы должно быть подумали: Что, что?! Макросы / html?.. Спокойствие, только спокойствие все довольно просто - ниже мы поясним каждый из них детально, с примерами. Еще несколько слайдов, ваш кофе даже не остынет, а вы уже будете знать "матчасть" и станете настоящим гуру.
Макросы (примеры оформления)
number
"цифры"
Как следует из названия, позволяет добавить нумерацию в текст. Столь простая и очевидная казалось бы опция, но вы вспомните, где видели ее в последний раз?.. Целесообразно использовать при наличии множества разделов / медиа контента, который вам хочется структурирвать.
Синтаксис: макрос где вместо {text} вы указываете номер в формате
01
, 02
... 25
Результат:
number
дополнительная информация "info"
позволяет добавить слово "info" в текст. Также имеет смысл, чтобы лучше структурировать ваш материал.
Синтаксис: макрос где вместо {text} указываете один из двух вариантов слова "info" (есть два типоразмера - один большой
info
и второй поменьше info-small
) ниже примеры их использования:
Результат большой:
Результат малый:
дополнительная информация "see it"
позволяет добавить фразу "see it" в текст. Также имеет смысл, чтобы лучше структурировать ваш материал.
Синтаксис: макрос где вместо {text} указываете один из двух вариантов фразы "see-it" (есть два типоразмера - один большой
see-it
и второй поменьше see-it-small
) ниже примеры их использования:
Result large:
Result small:
ваше медиа здесь
blockquote
Цитирование. Вроде бы стандартная опция, но ее мы тоже сделали вкуснее.
Синтаксис: макрос где вместо {text} вы указываете цитируемый текст. Вы также можете оформить цитируемого вами автора при помощи дополнительного макроса
Результат:
Люди как люди. Любят деньги, но ведь это всегда было... Человечество любит деньги, из чего бы те ни были сделаны, из кожи ли, из бумаги ли, из бронзы или золота. Ну, легкомысленны... ну, что ж... обыкновенные люди... в общем, напоминают прежних... квартирный вопрос только испортил их... Михаил Булгаков, роман "Мастер и Маргарита"
HeroIcon
Позволяет вам сделать акцент в тексте в виде: отдельной большой иконки, либо иконки и части текста с ней.
Синтаксис: макрос где вместо {text} вы можете:
- указать часть своего текста и он также выделится -
Результат:
важно
дальше ваш текст ... - либо удалить поле {text} внутри макроса, в этом случае останется лишь сама иконка перед остальным текстом
Результат:
дальше ваш текст ...
читайте также
Позволяет оформить ссылку на другой материал (он может быть как в нашем блоге, так и внешним)
Синтаксис: макрос где вместо {text} вы вставляете свою html-ссылку
Результат:
Читайте также Гендиректор "Лахта-центра" Елена Илюхина: зачем городу небоскреб
Примечание: расположенный рядом с ним в выпадающем списке макрос как, вы наверное, догадались служит для англоязычной версии. При желании, вы можете использовать и его - наш портал поддерживает две языковые версии (русскую и английскую). Мы предоставляем вам уникальную возможность - создавать материалы и в другой языковой версии блога, тем самым, значительно расширяя свою аудиторию!
success
Позволяет вам выделить блок текста зеленым, подразумевая успех, какой-то позитивный факт / событие.
Синтаксис: макрос где вместо {text} вы вставляете свой блок текста для выделения.
Результат:
warning
Позволяет вам выделить блок текста желтым, подразумевая внимание, какой-то факт / событие заслуживающие подобного акцента.
Синтаксис: макрос где вместо {text} вы вставляете свой блок текста для выделения.
Результат:
error
Позволяет вам выделить блок текста красным, подразумевая опасность, какой-то факт / событие заслуживающие подобного акцента.
Синтаксис: макрос где вместо {text} вы вставляете свой блок текста для выделения.
Результат:
info
Позволяет вам выделить блок текста голубым, подразумевая что какой-то факт / событие заслуживают акцента как информация.
Синтаксис: макрос где вместо {text} вы вставляете свой блок текста для выделения.
Результат:
info text-grey
Позволяет вам выделить блок текста серым, дополнительно уменьшив шрифт, подразумевая что какой-то факт / событие заслуживают акцента как дополнительная информация.
Синтаксис: макрос где вместо {text} вы вставляете свой блок текста для выделения.
Результат:
small-info
Позволяет вам выделить текст дополнительно уменьшив шрифт, сделав его по центру. Как вариант, используя как описание к медиа-файлу.
Синтаксис: макрос где вместо {text} вы вставляете свой текст для выделения.
Результат:
описание вашего медиа-файла
PullQuote
Позволяет вам сделать акцент, сдвинув блок влево с обтеканием его основным текстом справа. Используется, как правило, для выделение НЕБОЛЬШОЙ части текста (желательно до 140 знаков) для привлечения дополнительного внимания. В мобильной версии на смартфоне он будет выделен внутри текста (протестируйте). Не стоит им злоупотреблять - в зависимости от объема текста рекомендуем применять не более 1-2 раз в материале.
Синтаксис: макрос где вместо {text} вы вставляете свой текст для выделения.
Результат:
Здесь размещен произвольный текст в качестве примера. Википедия (англ. Wikipedia) — общедоступная мультиязычная универсальная интернет-энциклопедия со свободным контентом, реализованная на принципах вики. Принадлежит Википедия американской некоммерческой организации «Фонд Викимедиа», имеющей 39 региональных представительств. Википедия на русском языке — часть этого многоязычного проекта, целью которого является создание полной энциклопедии на всех языках Земли. Название энциклопедии образовано от английских слов wiki («вики», технология, лежащая в основе функционирования сайта; в свою очередь заимствовано из гавайского языка, в котором оно имеет значение «быстро») и encyclopedia («энциклопедия»).
TYPOGRAPHY
3D-FirstLetter
Очень эффектный способ в буквальном смысле оживить текст! Данный макрос позволяет его делать анимированными (приоткрывающимся).
Синтаксис: макрос где вместо {text} вы указываете букву. Более одного символа в один макрос лучше не вставлять, тк результат может вас неприятно удивить.
Результат: ниже примеры по количеству символов / слов внутри одного макроса
Как видно из примера, более 1-3 букв, не говоря уже о фразах, внутри одного макроса лучше не применять.
OVERLAY
Позволяет вам вставить большой медиа-файл (изображение / инфографику / видео / текст) которое для просмотра стоит развернуть во весь экран. Работает в сочетании двух макросов - первый -body
где указаывается медиа-файл, второй (-nav / -see) иконка для лучшей наглядности. Есть два варианта иконок: -nav
иконка меню для текста, -see
иконка глаза для изображений / видео.
Синтаксис: макрос где вместо {text} вы указываете медиа-файл / текст и дополнительный макрос
либо
Результат:
смотри во весь экранПримечание: если ширина вашего изображения менее ширины экрана, добавьте style="width: inherit;"
так, в вышеуказанном примере макрос -body
выглядит так:
МЕДИА > видео
Макросы из раздела видео позволяют вам легко вставлять видео с популярных новостных сайтов и видеохостингов. Из выпадающего списка меню выбираем раздел "video".

Внутри него два подраздела: phone (для мобильных устройств) и large (для настольных компьютеров).
Важно! Рекомендуем вам использовать оба типа макросов -phone
и -large
для каждого медиа-файла одновременно (тн кроссплатформенность) так как это позволит пользователю видеть ваш файл на любом устройстве.


Рассмотрим на примере видеохостинга YouTube
вместо {text} вы указываете часть кода для вставки видео, которую берем прямо с видеохостинга, нас интересует часть кода после https://youtu.be/
...

Синтаксис (для настольных компьютеров): макрос
Синтаксис (для мобильных устройств): макрос
Результат: проверьте, он работает как на настольной так и на мобильной версиях:
МЕДИА > Фото слайдер
Позволяет вам добавить эффектный фото слайдер в ваш материал. Поддерживаются множество вариантов, включая возможность добавления анимации и текста.
HTML + CSS верстка
PHOTOREPORT виджет
Позволяет эффектно вставлять в материал блок с изображениями и кратким анонсом из другого источника (может быть как с нашего портала, так и с любого внешнего). Имеет смысл при достаточно большом количестве изображений в материале-источнике. Рекомендуемое число превью-изображений с источника в данном блоке не более 4 шт. оптимально 2-4 шт.
Синтаксис: типовой код для вставки, с преднастроенными классами:

Результат: проверьте, виджет работает как на десктопной, так и на мобильной версиях устройств:



Примечание: в указанном примере, как мы видим, использованное количество изображений с источника =3 шт. (33% от общей ширины) с использованием класса .gantry-width-33
соответственно для 2-х изображений используйте .gantry-width-50
а для 4-х используйте .gantry-width-25
. Все что необходимо - определиться с изображениями с источника и вставить их в код, превью изображений виджет сделает сам, что весьма удобно.
Весь этот функционал [ мы его расширяем ] нами изначально разрабатывался "под себя", но.. мы с удовольствием предоставим его интересным авторам. Качественный контент - это актив, выиграют все!

Интересно? Давайте начнем!
Регистрация на нашем портале позволит Вам дополнительно размещать собственные новости в блоге, общаться на форуме, добавлять в базу новые объекты, и не только...
Если у вас возникли вопросы, пожалуйста свяжитесь с нами
либо напишите здесь ниже используя свой соц. аккаунт: