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

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

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

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

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

Размеры:

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

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

Отступы:

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

- 480px - слева или справа 15 и снизу 10

- 1190 - снизу 10 или 15

Обработка изображений:

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

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

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

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

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

Текст:

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

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

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

Для разметки текста используются теги:

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

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

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

Не должно быть никаких феерических цветов и шрифтов - это правило хорошего тона.

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

Ссылки:

Класс выбирается в "Вставить/редактировать ссылку"

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

Списки:

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

  • Стилизованный список: ul class="stars"

Прочие:

  • Заголовок h2 или div на фоне основной гаммы: class="mainproduct"
  • Заголовок h2 или div на синем фоне: class="mainproduct blue"
  • Блок (div) для привлечения внимания: class="attention"
  • Синий текстовый блок для рекламы: class="advertblue"
  • Белый текстовый блок для рекламы: class="advertwhite"
  • Красный текстовый блок для рекламы: class="advertred"
  • Тэги: p class="tags"
  • Красная кнопка (тэги: a, input, span): class="buttonred"

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

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

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

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

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

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

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

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

Еще нет своего сайта? Создайте интернет-магазин на платформе 5CMS - Все для продаж уже внутри!