St-Petersburg

Типография [ наши стили оформления ] текстов

Добро пожаловать!

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

Мы предлагаем своим авторам широкие возможности по оформлению текстов.

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

При создании / редактировании материала, в нижней части диалогового окна редактирования есть кнопка - "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} вы вставляете свой блок текста для выделения.

Результат:

Космический аппарат «Кассини» восстановил связь с Землей после того, как впервые за 20 лет «нырнул» в щель между Сатурном и кольцами. В настоящее время аппарат передает научную информацию, собранную в результате «нырка», который был совершен 26 апреля. Для этого «Кассини» использовал своеобразный трюк — гравитационный маневр вблизи спутника Сатурна Титана.

warning

Позволяет вам выделить блок текста желтым, подразумевая внимание, какой-то факт / событие заслуживающие подобного акцента.

Синтаксис: макрос где вместо {text} вы вставляете свой блок текста для выделения.

Результат:

Несмотря на то что члены миссии были уверены в безопасности маневра, они приняли ряд мер предосторожности. Согласно существующим моделям, узкая щель между планетой и внутренним краем колец может содержать мелкие частицы, которые несли потенциальную угрозу аппарату, несущемуся сквозь них со скоростью 124 тыс. км/ч.

error

Позволяет вам выделить блок текста красным, подразумевая опасность, какой-то факт / событие заслуживающие подобного акцента.

Синтаксис: макрос где вместо {text} вы вставляете свой блок текста для выделения.

Результат:

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

info

Позволяет вам выделить блок текста голубым, подразумевая что какой-то факт / событие заслуживают акцента как информация.

Синтаксис: макрос где вместо {text} вы вставляете свой блок текста для выделения.

Результат:

Россия (Russia) Российская Федерация (РФ), от греч. "Русь" — государство, расположенное в Восточной Европе и Северной Азии. Крупнейшее государство мира. (17 075 400 км² или 11,46 % (1/9) площади всей суши Земли, или 12,65 % (1/8) заселённой человеком суши, что почти вдвое больше, чем у занимающей второе место Канады.

info text-grey

Позволяет вам выделить блок текста серым, дополнительно уменьшив шрифт, подразумевая что какой-то факт / событие заслуживают акцента как дополнительная информация.

Синтаксис: макрос где вместо {text} вы вставляете свой блок текста для выделения.

Результат:

Вся территория России поделена на 4 природные пояса и 11 природных зонах. На дальнем севере находится зона арктических пустынь. Тундра и лесотундра лежит в Субарктике, немного южнее. В умеренном поясе, самом большом поясе по площади, лежат зоны тайги, смешанных и широколистых лесов, лесостепи, степи, полупустыни и пустыни.

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/...

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

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

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


МЕДИА > Фото слайдер

Позволяет вам добавить эффектный фото слайдер в ваш материал. Поддерживаются множество вариантов, включая возможность добавления анимации и текста.

Arrow
Arrow
ArrowArrow
Slider

HTML + CSS верстка
Этот раздел будет интересен для тех, кто имеет опыт работы с текстом на более продвинутом уровне - с применением html, css-верстки. Здесь мы будем предлагать наши дополнительные возможности по стилистическому оформлению.

PHOTOREPORT виджет

Позволяет эффектно вставлять в материал блок с изображениями и кратким анонсом из другого источника (может быть как с нашего портала, так и с любого внешнего). Имеет смысл при достаточно большом количестве изображений в материале-источнике. Рекомендуемое число превью-изображений с источника в данном блоке не более 4 шт. оптимально 2-4 шт.

Синтаксис: типовой код для вставки, с преднастроенными классами:

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

Фотогалерея Крымские дикие тюльпаны: природная красота! Крымские дикие тюльпаны Крымские дикие тюльпаны Крымские дикие тюльпаны Без преувеличения - это одна из самых красивых достопримечательностей Крыма. Знают об этом не многие, да и увидеть можно буквально одну неделю в году Смотреть фотографии

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

Весь этот функционал [ мы его расширяем ] нами изначально разрабатывался "под себя", но.. мы с удовольствием предоставим его интересным авторам. Качественный контент - это актив, выиграют все!


Интересно? Давайте начнем!

Регистрация на нашем портале позволит Вам дополнительно размещать собственные новости в блоге, общаться на форуме, добавлять в базу новые объекты, и не только...

Если у вас возникли вопросы, пожалуйста свяжитесь с нами
либо напишите здесь ниже используя свой соц. аккаунт:

С-Петербург [ сообщество ] недвижимость