Добавьте блоки из панели слева
Добавьте блоки из панели слева
В верхней части экрана расположены кнопки управления. Вот что делает каждая из них:
| Кнопка | Что делает |
|---|---|
| Справка | Открывает это руководство — вы сейчас здесь |
| Копировать код | Копирует готовый HTML-код статьи в буфер обмена. Подходит, если вы хотите вставить код вручную в редактор OpenCart |
| Скачать TXT | Скачивает готовый HTML-код в текстовом файле. Удобно сохранить для себя или передать кому-то |
| Скачать ZIP статьи | Самая полезная кнопка! Собирает HTML-код + все картинки в один ZIP-архив. Этот архив можно загрузить на сайт |
| </> Export HTML | Скачивает полноценный HTML-файл для просмотра в браузере. Удобно проверить, как статья будет выглядеть на сайте |
| { } Export CSS | Скачивает файл стилей. Нужен один раз для подключения стилей к сайту (см. инструкцию ниже) |
| Превью | Показывает или скрывает панель предварительного просмотра справа |
Вы собрали статью в конструкторе и хотите показать её на своём сайте. Вот самая простая инструкция — следуйте пунктам по порядку:
Чтобы ваша статья выглядела красиво (шрифты, отступы, таблицы, кнопки), нужно один раз подключить стили. Есть два способа — выберите любой:
Способ А: Автоматический (рекомендуется)
ваш-сайт.ru/admin. Введите логин и пароль.content_constructor.ocmod.zip) и выберите его.Способ Б: Ручной
content-constructor.css.Ctrl+A) и скопируйте (Ctrl+C).catalog/view/theme/название_темы/stylesheet/stylesheet.cssТеперь, когда стили подключены, самое время загрузить вашу статью. Есть два варианта:
Вариант 1: Через кнопку импорта в админке (самый простой)
Этот вариант работает, если вы установили ZIP-файл (Способ А выше).
content-{slug}.html).Вариант 2: Вставка кода вручную
Если кнопка импорта не появилась или вы предпочитаете вставлять код сами:
Ctrl+V).Ctrl + F5 для очистки кэша браузера.Частые ошибки:
Ctrl + F5 на странице редактораНазвание статьи — вводится в первом поле в шапке. Используется как заголовок страницы при экспорте HTML и как основа для генерации слага.
Slug — автоматически генерируется из названия (например, apple-watch-obzor). Используется как имя файла при экспорте. Можно отредактировать вручную.
Домен — адрес вашего сайта (например, https://мой-магазин.ru/). Используется для отображения картинок в превью. Не влияет на сам контент.
Если вам не подходят стандартные цвета конструктора, их можно быстро заменить в файле стилей content-constructor.css. Для этого откройте сохранённый CSS-файл в текстовом редакторе Notepad++ (или любом другом) и воспользуйтесь функцией массовой замены (сочетание клавиш Ctrl + H).
Основные цвета в коде:
#5446f8 — Основной синий цвет (цвет бордера слева от цитирования, активные вкладки, кнопки, ссылки).#cfd8dc — Серый цвет рамки иконки вопроса в FAQ.#78909c — Цвет самого знака вопроса ? внутри круглой иконки в FAQ.#eaeaea — Цвет горизонтальных линий-разделителей под блоками FAQ.
Пример замены: Чтобы заменить основной синий цвет на свой (например, зеленый #27ae60), откройте файл CSS, нажмите Ctrl + H, введите в поле «Найти» значение #5446f8, а в поле «Заменить на» — #27ae60, после чего нажмите кнопку «Заменить все».
Конструктор понимает простые символы для форматирования. Вы пишете их обычным текстом, а конструктор автоматически превращает их в красивое оформление. Вот что можно делать:
Оберните текст в две звёздочки с каждой стороны:
Это очень важная информация
Когда нужно выделить ключевое слово, название продукта, цену или любую важную мысль.
Оберните текст в одну звёздочку с каждой стороны:
Модель Pro Max отличается увеличенным экраном
Для названий моделей, иностранных слов, цитат или терминов.
Напишите текст ссылки в квадратных скобках, а адрес — в круглых:
Ссылки на другие страницы вашего каталога, на инструкции, на сторонние ресурсы.
Каждый пункт начинайте с тире или минуса:
- Алюминиевый корпус
- Влагозащита IP68
- Батарея на 2 дня
Для перечисления характеристик, преимуществ, комплектации.
Каждый пункт начинайте с цифры и точки:
1. Включите устройство
2. Подключитесь к Wi-Fi
3. Следуйте инструкциям на экране
Для пошаговых инструкций, порядка действий, этапов установки.
Введите два двоеточия между названием параметра и его значением:
Вес :: 52 грамма
Экран :: 1.9 дюйма AMOLED
Время работы :: до 18 часов
Водозащита :: 50 метров
Идеально для описания характеристик товара — получается аккуратный список «название — значение».
Важно: Markdown-форматирование работает в блоках «Параграф», «Спойлер» и «Вкладки». В заголовках, цитатах и таблицах оно не нужно — там текст и так форматируется.
Блок «Сетка» позволяет расположить картинку слева, а текст справа (или наоборот). Или разбить контент на 3-4 колонки. Это как таблица, но для произвольного контента.
Как использовать — пошагово:
6 + 6 — две равные половины; 4 + 4 + 4 — три равных трети; 3 + 9 — узкая левая и широкая праваяНастройки: 2 колонки, схема 6 + 6
Настройки: 3 колонки, схема 4 + 4 + 4, на телефоне «2 в ряд»
Настройки: 2 колонки, схема 3 + 9
Спойлер прячет длинный текст под заголовком. Пользователь видит только заголовок и нажимает на него, чтобы развернуть содержимое. Очень удобно для вопросов и ответов.
Где использовать:
Пользователь видит только заголовки. Нажал — развернулся текст.
Вкладки позволяют разнести информацию по нескольким «страничкам» внутри одного блока. Пользователь нажимает на вкладку и видит только её содержимое.
Где использовать:
Экран 1.9", процессор S9, вес 52 г, водозащита 50м.
Пользователь переключается между вкладками одним кликом.
Совет: Во время редактирования вкладок можно добавлять и удалять их, менять заголовки и содержимое. Каждая вкладка — это отдельное поле для текста.
Есть два способа работать с картинками. Выбирайте тот, который удобнее:
Если картинка уже загружена на ваш сайт (или вы знаете, где она лежит), укажите путь к ней:
image/catalog/my-product.jpg — картинка в папке каталогаimage/catalog/photos/watch-front.png — картинка в подпапкеhttps://example.ru/picture.jpg — полная ссылка на интернет-ресурс
В превью картинка будет отображаться только если в шапке конструктора указан домен вашего сайта (например, https://ваш-сайт.ru/).
Самый простой способ — загрузить картинку прямо из конструктора:
Что происходит «под капотом»: Конструктор запоминает картинку как специальный код (base64). При экспорте ZIP-архива картинка автоматически сохраняется в правильную папку на сервере. Вам не нужно ничего делать вручную!
В OpenCart есть функция показывать информационные страницы (например, «Политика конфиденциальности» или «Условия доставки») во всплывающем окне. Конструктор позволяет сделать такую ссылку на любое слово в тексте.
Как сделать ссылку на статью:
[текст ссылки](agree:номер_статьи)[политикой конфиденциальности](agree:3)[условиями доставки](agree:6)[правилами возврата](agree:12)Где найти номер статьи (ID)?
[ваш текст](agree:номер).Если хотите сделать не текстовую ссылку, а яркую кнопку — используйте блок «Попап окно» из левой панели:
При нажатии откроется всплывающее окно с текстом статьи из OpenCart.
Большое спасибо за использование Content Constructor! Если этот инструмент сэкономил ваше время и помог в работе, вы можете поддержать автора. Это мотивирует развивать проект и добавлять новые функции!