Код
Блок «Код» позволяет добавить в лонгрид собственный HTML-блок: визуальный элемент, интерактив, анимацию, калькулятор или другой нестандартный фрагмент. Блок можно создать двумя способами:
-
сгенерировать прямо в Scrolltool;
-
вставить код, подготовленный во внешней нейросети или редакторе.
Как добавить блок?
Наведите курсор на линию между блоками и нажмите на появившийся значок «плюс», чтобы открыть меню с блоками. Выберите блок «Код».
Как выглядит блок?
В редакторе блок состоит из трех вкладок:
-
HTML — структура блока;
-
CSS — стили оформления;
-
JS — логика и интерактивность.
Ниже редактора отображается предпросмотр блока. В нем можно сразу увидеть, как код будет выглядеть в лонгриде.
Вариант 1. Сгенерировать блок в Scrolltool
Откройте блок «Код» и разверните область «Сгенерировать с ИИ».
В поле промта опишите, какой блок хотите получить. Например:
Сделай блок из трех преимуществ рисования: снижает стресс, развивает креативность, помогает расслабиться. Белый фон, три колонки, крупные иконки, тонкие линии, аккуратная типографика.
После генерации Scrolltool заполнит вкладки HTML, CSS и JS. Результат можно проверить в предпросмотре под редактором.
Если нужно изменить результат, напишите правку в том же поле и нажмите «Доработать».
Например:
Сделай иконки меньше, добавь больше воздуха между колонками, а на мобильном устройстве расположи блоки друг под другом.
Если хотите получить новый вариант с нуля, нажмите «Сгенерировать заново».
Вариант 2. Вставить код из внешней нейросети
Вы можете подготовить код в ChatGPT, DeepSeek, Claude или другом AI-сервисе, а затем вставить его в блок «Код».
Попросите нейросеть разделить результат на три части:
-
HTML
-
CSS
-
JS
Пример запроса:
Сделай блок для Scrolltool и раздели код на три части: HTML, CSS и JS. И пишите ваш промт.
Затем вставьте каждую часть в соответствующую вкладку блока:
-
код из части HTML — во вкладку HTML;
-
код из части CSS — во вкладку CSS;
-
код из части JS — во вкладку JS.
Важное ограничение
Код в блоке должен быть самодостаточным. Не используйте внешние файлы, ссылки и обращения к сети. Песочница Scrolltool их заблокирует.
Если внешняя нейросеть выдала код с такими строками:
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link href="https://fonts.googleapis.com/..." rel="stylesheet">
их нужно убрать, а содержимое CSS и JS перенести во вкладки CSS и JS.
Но можно не руками а попросить нейросеть убрать ссылки, файлы и связь с внешними сервисами.