Read in:
Русский
English

Instagram-карусели

layout: trip2g/instaframe превращает markdown-файл в карусель из готовых PNG для Instagram и других соцсетей — без Canva, без дизайнера, без экспорта.

Посмотреть карусели вживую: Галерея примеров.

Как это работает

  1. Кладёте файл в любую папку хранилища, в frontmatter указываете layout: trip2g/instaframe.
  2. Пишете intro и слайды, разделяя их ###-заголовками.
  3. Открываете страницу — layout превращает разметку в слайды и рисует PNG через html2canvas.
  4. Скачиваете PNG кнопкой на странице.

Правите текст в заметке — карусель пересобирается при следующем открытии страницы.

Быстрый старт

Создайте файл, например instaframes/my-carousel.md:

---
title: Название карусели
layout: trip2g/instaframe
---

Описание карусели — контекст для себя, в слайды не попадает.

### ПОЧЕМУ ДОМА КОФЕ [ГОРЧИТ]?

Текст слайда. 2–3 предложения максимум.

### СЛЕДУЮЩИЙ [СЛАЙД]

Каждая секция `###` — отдельный слайд.

Откройте страницу хранилища — увидите карусель.

Структура файла

Файл состоит из двух частей:

Intro — всё до первого ###-заголовка. Рендерится под каруселью как контекст, в слайды не входит.

Слайды — каждая секция ### становится отдельным слайдом. Заголовок идёт в верхнюю строку слайда, тело — в основной текст.

Выделение слов

[СЛОВО] в заголовке ### получает рамку. Одно выделенное слово на заголовок.

Пример:

### ПОЧЕМУ ДОМА КОФЕ [ГОРЧИТ]?

Слово ГОРЧИТ отобразится в рамке, остальной заголовок — обычным текстом.

Скачивание

На странице карусели три кнопки:

  • Левая — скачать текущий слайд
  • Центральная — скачать все слайды
  • TXT — выгрузить текст всех слайдов

Файлы именуются: 1-ЗАГОЛОВОК.png, 2-ЗАГОЛОВОК.png и так далее.

Правила хороших каруселей

Первый слайд — крючок

Первый слайд останавливает скролл. 3–5 слов, вопрос или интрига.

Работает:

  • Короткий вопрос: ПОЧЕМУ ДОМА КОФЕ [ГОРЧИТ]?
  • Неожиданное утверждение: ДЕЛО НЕ В ЗЁРНАХ

Не работает:

  • Абстракции без интриги
  • Длинные заголовки: 8+ слов никто не читает на скролле
  • Банальности, которые говорят все

Текст слайда

Одна мысль на слайд. Конкретные примеры вместо абстракций. 2–3 предложения.

Чего избегать

  1. Длинные тире (—) — используйте среднее тире (–)
  2. Шаблонные противопоставления «не X, а Y»
  3. Параллельные конструкции «X больше, Y меньше»
  4. Рубленые предложения без смысла: «Бесполезно.», «Это сигнал.»
  5. Назидательный тон — делитесь опытом, не поучайте

Структура карусели

  • 8–12 слайдов
  • Слайд 1: крючок (вопрос или история)
  • Слайды 2–10: развитие темы с примерами
  • Предпоследний: что делать (конкретный шаг)
  • Последний: призыв к действию

Формат заголовка

  • 3–5 слов капсом
  • Одно слово в рамке [СЛОВО]
  • Вопрос или короткое утверждение

Технические детали

  • Формат слайда: 4:5, ширина экспорта 1080 px
  • Шрифты: Inter, Montserrat
  • Рендер PNG: html2canvas

Брендинг

Подпись @trip2gcom захардкожена в шаблоне _layouts/trip2g/instaframe.html.

Чтобы изменить подпись, отредактируйте этот файл в своём хранилище. Если рядом с каруселью есть файл instaframes/_footer.md, шаблон покажет его содержимое под каруселью.

После создания карусели

  1. Проверьте первый слайд — он должен останавливать скролл.
  2. Прочитайте вслух — звучит как живой человек?
  3. Покажите кому-то — спросите «свайпнул бы дальше?»