Добавьте блоки из панели слева
Добавьте блоки из панели слева
В верхней части экрана расположены кнопки управления. Вот что делает каждая из них:
| Меню / Кнопка | Что делает |
|---|---|
| Справка | Открывает это руководство — вы сейчас здесь |
| Импорт / AI |
Выпадающее меню для загрузки данных в конструктор:
|
| Копировать код | Синяя кнопка для мгновенного копирования HTML-кода статьи в буфер обмена (для вставки в текстовый редактор OpenCart через кнопку </>) |
| Скачать / Экспорт |
Главное меню для сохранения результатов работы в файлы:
|
| Превью | Показывает или скрывает панель предварительного просмотра справа |
Вы собрали статью в конструкторе и хотите показать её на своём сайте. Вот самая простая инструкция — следуйте пунктам по порядку:
Чтобы ваша статья выглядела красиво (шрифты, отступы, таблицы, кнопки), нужно один раз подключить стили. Есть два способа — выберите любой:
Способ А: Автоматический (рекомендуется)
ваш-сайт.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 г, водозащита IP68, аккумулятор 410 мАч.
Смарт-часы нового поколения с продвинутым датчиком пульса, встроенным GPS и уведомлениями от смартфона.
В комплекте: смарт-часы, магнитный кабель зарядки, инструкция по эксплуатации.
Пользователь переключается между вкладками одним кликом.
Совет: Во время редактирования вкладок можно добавлять и удалять их, менять заголовки и содержимое. Каждая вкладка — это отдельное поле для текста.
Инфо-блок позволяет выделить важную информацию, ссылки или файлы для скачивания в красивую плашку с фоном, акцентной рамкой и кнопкой действия.
Доступно 4 стиля оформления:
Этот блок позволяет быстро выделить предупреждение, совет или примечание ярким цветом, привлекая внимание пользователя. Полностью совместим со стандартными классами Bootstrap 3.
Где использовать:
Вставка видеороликов с видеохостингов с автоматическим сохранением пропорций сторон 16:9 на любых экранах (от ПК до мобильных телефонов).
Как использовать:
https://www.youtube.com/watch?v=dQw4w9WgXcQ или короткую youtu.be).Интерактивная галерея изображений с возможностью пролистывания слайдов, текстовыми подписями поверх картинок и точечными индикаторами.
Рекомендации по заполнению:
Популярный интерактивный элемент, позволяющий пользователю плавно перетаскивать ползунок и сравнивать два изображения между собой (например, результат работы автосервиса, реставрации, тюнинга или ретуши).
Как сделать идеальный слайдер:
Блок красивых и кликабельных кнопок с иконками для моментального перехода к переписке в WhatsApp, Telegram, Viber или совершения прямого звонка с мобильного телефона.
Формат ввода данных:
79991234567 (без плюсов, пробелов и скобок).username) или полная ссылка на аккаунт/канал.79991234567 (конструктор сам сформирует специальный URI viber://chat...).+79991234567 для осуществления вызова.Специальный блок, предназначенный для внутренней рекламы товаров вашего магазина прямо в теле статьи. Помогает конвертировать читателей блога в покупателей.
Где и как использовать:
index.php?route=product/product&product_id=50 или ЧПУ-ссылку)./image/cache/) и суффиксы размеров, оставив путь к оригиналу картинки (например, image/catalog/product.jpg), который корректно отобразится после загрузки статьи на ваш сайт.
Есть два способа работать с картинками. Выбирайте тот, который удобнее:
Если картинка уже загружена на ваш сайт (или вы знаете, где она лежит), укажите путь к ней:
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.
Конструктор поддерживает интеграцию с ИИ (ChatGPT, Claude, Gemini). Каждый экспортированный проект содержит встроенную схему ai_specification, которая сообщает нейросети технические возможности конструктора и правила генерации блоков для безошибочного импорта.
Теперь не обязательно вручную скачивать файлы. Вы можете использовать встроенный промпт-генератор:
.json..json файл, вернитесь в конструктор, откройте меню **«Импорт / AI»**, выберите пункт **«Импортировать файл (.json, .html)»** и выберите этот файл.Благодаря встроенной спецификации, ИИ точно знает, как собирать следующие блоки:
| Тип блока (type) | Назначение | Поля в data (схема) |
|---|---|---|
heading |
Заголовки (H1-H6) | level (число 1-6), text (текст с поддержкой Markdown) |
paragraph |
Текст абзацев | text (поддерживает **жирный**, *курсив*, списки и [ссылки](url)) |
list |
Списки | ordered (true/false), items (массив строк) |
quote |
Цитаты с автором | text (строка), author (строка, опционально) |
table |
Таблицы данных | headers (массив заголовков), rows (массив массивов ячеек) |
image |
Изображение | path (путь к файлу на сервере), caption (подпись) |
before-after |
Слайдер До/После | beforeImg, afterImg (пути), beforeLabel, afterLabel (подписи) |
spoiler |
Сворачиваемый FAQ | title (вопрос), text (ответ), opened (true/false) |
tabs |
Вкладки (Табы) | tabs (массив объектов с title и content) |
product-card |
Карточка товара | url, image, name, price, buttonText |
grid |
Сетка (Bootstrap 3) | pcPattern (пропорции, сумма = 12), columns (массив колонок с nested blocks) |
id. При импорте конструктор сам создаст валидные и уникальные ID для всех блоков и колонок.text (для параграфов, цитат, спойлеров и вкладок) ИИ может смело использовать форматирование Markdown: жирный текст, курсив, списки и гиперссылки. Конструктор автоматически преобразует их в HTML.grid. Спецификация показывает ему, как объявлять дочерние элементы в массиве columns[i].blocks.Скопируйте один из этих промптов и отправьте его ИИ вместе со своим файлом JSON:
Большое спасибо за использование Content Constructor! Если этот инструмент сэкономил ваше время и помог в работе, вы можете поддержать автора. Это мотивирует развивать проект и добавлять новые функции!
Напишите своими словами, что нужно сделать с содержанием всей страницы (например: «Переведи на английский язык», «Исправь ошибки в тексте», «Добавь 3 преимущества товара» или «Сделай текст более профессиональным»).
Настройте параметры перед началом работы