# Текст с изображением

Блок «**Текст с изображением**» позволяет добавить к лонгриду текст и картинку рядом с ним, и настроить их внешний вид.

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

[![text-image1-look.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/text-image1-look.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/text-image1-look.gif)

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

Наведите курсор на линию между блоками и нажмите на появившийся значок "**плюс**", чтобы открыть меню с блоками. [Подробнее о добавлении блоков](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-dobavlyat-kontentnye-bloki).

<details id="bkmrk-"><summary>Как выглядит блок в меню</summary>

![text-image0-menu.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-10/scaled-1680-/text-image0-menu.jpg)

</details><details id="bkmrk-%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B1%D0%BB%D0%BE%D0%BA%D0%B0-%D0%A7%D1%82%D0%BE"><summary>Добавление блока</summary>

[![imgtext2-new.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgtext2-new.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgtext2-new.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Как изменить содержимое?

В блоке «**Текст с изображением**» можно добавить:

- изображение с компьютера
- текст

<p class="callout info">Вы можете использовать изображения в формате **JPG**, **PNG**, **GIF**, **WEBP** и **SVG**.</p>

<details id="bkmrk-%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5-%D0%B1%D0%BB%D0%BE%D0%BA%D0%B0"><summary>Заполнение блока</summary>

Чтобы добавить своё изображение, нажмите на стартовую картинку и выберите нужный файл в проводнике. Чтобы ввести свой текст, поставьте курсор в текстовое поле и наберите его.

[![imgtext3-fill.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgtext3-fill.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgtext3-fill.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>Еще есть возможность сгенерировать картинку с помощью нейросети.

<details id="bkmrk-%D0%93%D0%B5%D0%BD%D0%B5%D1%80%D0%B0%D1%86%D0%B8%D1%8F-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8"><summary>Генерация картинки</summary>

[![bandicam 2024-07-04 13-37-00-691.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-07/bandicam-2024-07-04-13-37-00-691.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-07/bandicam-2024-07-04-13-37-00-691.gif)

</details>### Как изменить внешний вид?

В блоке «**Текст с изображением**» можно изменить:

- шаблон
- размер картинки
- форматирование текста (вы можете отформатировать текст с помощью текстового редактора. [Подробнее о редакторе](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-formatirovat-tekst).)

<details id="bkmrk-%D0%A8%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD-%D0%A8%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD-%D0%92%D1%8B%D0%B1%D0%BE%D1%80-"><summary>Шаблон</summary>

##### Шаблон

Выбор шаблона позволяет разместить картинку справа или слева от текста. Чтобы изменить шаблон, выберите соответствующий пункт.

[![text-image4-layout.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/text-image4-layout.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/text-image4-layout.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details><details id="bkmrk-%D0%A0%D0%B0%D0%B7%D0%BC%D0%B5%D1%80-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8-%D0%A0%D0%B0%D0%B7%D0%BC"><summary>Размер картинки</summary>

##### Размер картинки

Чтобы изменить размер изображения, двигайте ползунок ширины в правую или левую сторону. Или просто нажимайте на него в нужном месте. Текущая ширина указана в пикселях слева от ползунка. При изменении размера исходные пропорции сохраняются.

[![imgtext5-size.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgtext5-size.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgtext5-size.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Как настроить?

Вы можете запретить ученикам **увеличивать изображение**. В таком случае они смогут посмотреть его только в том размере, который вы укажете. По умолчанию увеличение изображения разрешено. Чтобы его запретить, нажмите на соответствующий переключатель.

<details id="bkmrk-%D0%9D%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0-%D0%B1%D0%BB%D0%BE%D0%BA%D0%B0"><summary>Запрет увеличения картинки</summary>

[![imgtext6-download.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgtext6-download.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/imgtext6-download.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

<p class="callout info">**Совет**: Если вы оставляете возможность для просмотра в полном размере **включенной**, то лучше не загружать в блок изображения с прозрачным фоном (такие изображения могут быть в формате png, gif, webp). Иначе при увеличении они не будут иметь фона.</p>

Пример с прозрачным фоном:

[![image3-transparent.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/image3-transparent.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/image3-transparent.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Есть ли альтернативные варианты этого блока?

Да. Вы можете добавить другой тип контентного блока <span style="color: rgb(35, 111, 161);">[<span style="color: rgb(0, 0, 0);">«</span>Изображение<span style="color: rgb(0, 0, 0);">»</span>](https://wiki.scroll-tool.ru/books/razdel-longridy/page/izobrazenie)</span>.

### Как я могу использовать этот блок?

Этот блок хорошо подходит, чтобы:

- Повысить наглядность лонгрида.  
    Вставьте свое изображение и дайте развернутый комментарий к нему.
- Украсить лонгрид или сделать акцент на какой-то теме.  
    Можно украсить текст лонгрида изображениями в тему. Так лонгрид будет восприниматься лучше.

---

<p class="callout success">Если у вас остались вопросы, напишите нам на почту <info@scroll-tool.ru>.</p>