Инструкция по работе с визуальным редактором

Для облегчения работы контентщиков мы используем современный визуальный редактор TinyMCE.

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

CMS имеет свой набор предустановленных классов, помогающих в форматировании текста.

Изображения:

Иконка:

Размеры:

Используемые в тексте изображения рекомендуется заливать с оригинальной шириной 480px (пол ширины текста) либо 1190px (на всю ширину).

У изображения на всю ширину текста (длина 1190px) класс можно не указывать либо "image-default".
Изображения используемые для вывода в пол ширины текста должны быть шириной 480px, а также в "Вставить/редактировать изображение" выбираем класс "image-half-width" (также изображения с данным классом в мобильной версии открываются по клику в модальном окне)
Для совсем мелкого изображения (чья ширина не превышает 100px) - в "Вставить/редактировать изображение" выбираем класс "image-real-size"

Отступы:

Выставляются при необходимости - в "Вставить/редактировать изображение" > "Расширенные" > "Вертикальный/Горизонтальный интервал"

Подготовка изображений:

Для обеспечения высокой скорости работы - не рекомендуется размещение изображений тяжелее 150 кб (для больших изображений), мелкие изображения должны весить пропорционально меньше.

Изменение размера изображения:

Для изменения геометрических размеров заливаемого изображения можно использовать программу Paint (есть стандартно в Windows)
Для изменения и размера и веса заливаемого изображения можно использовать Photoshop или онлайн-сервисы

Как обрабатывать изображения в графическом редакторе?

Открытие в модальном окне:

<a class="zoom" href="адрес_большого_изображения" src="адрес_маленького_изображения">текст ссылки</a>

либо

Видео:

Иконка:

В открывшемся окне вставляете ссылку (например с Ютуба):

Текст:

Важно! Не стесняйтесь пользоваться кнопкой "Очистить формат" при вставке текста извне.

Если при вводе текста вы видите, что получается "что-то не то" - нажмите кнопку "Очистить формат".

Если не помогает, то нажав "Исходный код" вручную удалите лишние теги (не забывайте, что теги должны где-то начинаться и где-то заканчиваться, напр.: <p>...</p>).

Важно! Копируя текст со стороннего сайта, вы копируете и всю его HTML-разметку, поэтому в идеале очищать вставляемый текст в "Блокноте" или Notepad++ следующим образом: скопировали текст со стороннего сайта > вставили в блокнот > скопировали из блокнота > вставили в визуальный редактор на своем сайте.

Примеры популярных тегов для разметки текста:

<h2>Заголовок 2</h2>
<h3>Заголовок 3</h3>
<p>Абзац/параграф</p>
<div>Блок</div>
<span>как правило внутритекстовые стилевые выделения (цвет, р-р шрифта)</span>
<table>Таблица</table>

Для выделения текста рекомендуется использовать:

<strong>полужирный</strong>
<em>курсив</em>

Якоря:

Якорь вставляется через визуальный редактор:

Вставить > Якорь

При вставке ссылки на якорь не забудьте выбрать класс anchor link либо ссылку указывать абсолютную. т.е. не "#link", а: http://site.ru/page#link

Предустановленные классы:

Ссылки:

Класс выбирается в редактировании ссылки:

Обычная ссылка - можно класс не указывать, либо "defaultlink"
Стилизованная ссылка с подчеркиванием пунктиром - "bluelink"
Cсылка без подчеркивания (жирн.) - "nonelink"

Списки:

В тексте страниц список стилизуется автоматически

Стилизованный список: ul class="stars"
Выбор изображения для стилизации списков в админке:
Настройки > Основные настройки > "Для списков ‹li› используется изображение"

Прочие:

* Их перечень видно в визуальном редакторе при клике по кнопке "Формат":

Заголовок h2 или div на фоне основной гаммы: class="mainproduct"
Заголовок h2 или div на синем фоне: class="mainproduct blue"
Заголовок h2 или div на сером фоне: class="mainproduct gray"
Блок для привлечения внимания: div class="attention blue"
Блок для привлечения внимания: div class="attention gray"
Текстовый рекламный блок на синем фоне: div class="advertblue"
Текстовый рекламный блок на красном фоне: div class="advertred"
Текстовый рекламный блок на белом фоне: div class="advertwhite"
Блок для заметок, серый: p class="note"
Кнопка (теги: a, input, span): class="button red l inline-b"
размер: xl, l, m, s, xs
цвет: red, blue, gblue, green, grey, orange
ориентация: left, right
отступы: left_10, left_15, left_20, right_10, right_15, right_20, top_5, top_10, top_20, top_30, top_40, bottom_5, bottom_10, bottom_20, bottom_30, bottom_40

Главная страница:

Разбиение текста на 2 колонки (как на главной): div class="main_left" и div class="main_right" соответственно

Редактирование Исходного кода в визуальном редакторе:

Он вам потребуется например для вставки HTML-кода в текст страницы

Ищем иконку: <>

При нажатии на нее открывается HTML-код страницы:

Редактирование исходного кода в визуальном редактореTinyMce

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

Подробнее...