Перейти к основному контенту

Код

Блок «Код» позволяет добавить в лонгрид собственный HTML-блок: визуальный элемент, интерактив, анимацию, калькулятор или другой нестандартный фрагмент. Блок можно создать двумя способами:

  1. сгенерировать прямо в Scrolltool;

  2. вставить код, подготовленный во внешней нейросети или редакторе.

Как добавить блок?

Наведите курсор на линию между блоками и нажмите на появившийся значок «плюс», чтобы открыть меню с блоками. Выберите блок «Код».

[Скриншот: блок «Код» в меню добавления блоков]image.png

 

Как выглядит блок?

В редакторе блок состоит из трех вкладок:

  • HTML — структура блока;

  • CSS — стили оформления;

  • JS — логика и интерактивность.

Ниже редактора отображается предпросмотр блока. В нем можно сразу увидеть, как код будет выглядеть в лонгриде.

[Скриншот: вкладки HTML, CSS, JS и предпросмотр блока]image.png

Вариант 1. Сгенерировать блок в Scrolltool

Откройте блок «Код» и разверните область «Сгенерировать с ИИ».

В поле промта опишите, какой блок хотите получить. Например:

Сделай блок из трех преимуществ рисования: снижает стресс, развивает креативность, помогает расслабиться.

Белый фон, три колонки, крупные иконки, тонкие линии, аккуратная типографика.

После генерации Scrolltool заполнит вкладки HTML, CSS и JS. Результат можно проверить в предпросмотре под редактором.

Если нужно изменить результат, напишите правку в том же поле и нажмите «Доработать».

Например:

Сделай иконки меньше, добавь больше воздуха между колонками, а на мобильном устройстве расположи блоки друг под другом.

Если хотите получить новый вариант с нуля, нажмите «Сгенерировать заново».

[Скриншот: готового блока]image.png


Вариант 2. Вставить код из внешней нейросети

Вы можете подготовить код в ChatGPT, DeepSeek, Claude или другом AI-сервисе, а затем вставить его в блок «Код».

Попросите нейросеть разделить результат на три части:

  • HTML 

  • CSS 

  • JS 

Пример запроса:

Сделай блок для Scrolltool и раздели код на три части: HTML, CSS и JS. И пишите ваш промт.

Затем вставьте каждую часть в соответствующую вкладку блока:

  • код из части HTML — во вкладку HTML;

  • код из части CSS — во вкладку CSS;

  • код из части JS — во вкладку JS.

[Скриншот: готового блока]image.png

Важное ограничение

Код в блоке должен быть самодостаточным. Не используйте внешние файлы, ссылки и  обращения к сети. Песочница Scrolltool их заблокирует.

Если внешняя нейросеть выдала код с такими строками:

<link rel="stylesheet" href="style.css">

<script src="script.js"></script>

их нужно убрать, а содержимое CSS и JS перенести во вкладки CSS и JS.

Но можно не руками а попросить нейросеть убрать ссылки, файлы и связь с внешними сервисами.

 

Наверх