Чтобы сделать надпись на сайте, добавьте текстовый блок в конструкторе или элемент <p> в HTML, задайте оформление через CSS и проверьте результат на узком экране. Эта инструкция про видимый текст внутри страницы: абзац, короткую подпись или текст поверх изображения. Если нужно изменить название вкладки или главный H1, используйте отдельный разбор заголовка сайта.
Выберите правильный тип надписи
Сначала решите, какую работу выполняет текст. От этого зависит элемент, расположение и проверка. Размер шрифта не превращает абзац в заголовок, а положение поверх картинки не делает текст частью изображения.
- Обычное пояснение оформляйте абзацем. Элемент
<p>предназначен для связного фрагмента текста, что подтверждает справка MDN. - Главную мысль раздела оформляйте заголовком подходящего уровня. Не выбирайте H1 только ради крупного размера.
- Короткую подпись к кнопке, карточке или полю держите рядом с тем элементом, который она объясняет.
- Надпись поверх фотографии оставляйте отдельным текстовым слоем. Так её можно прочитать, перевести, скопировать и адаптировать под маленький экран.
- Декоративное слово без смысловой нагрузки можно оставить частью графики, но важные условия и призывы должны существовать обычным текстом.
Правило выбора: если без надписи человек не понимает действие, условие или содержание блока, текст должен быть отдельным элементом страницы, а не частью картинки.
Теория понятна, дальше нужен ваш сайт, а не пример из статьи. На бесплатном вебинаре страницу собирают с нуля и сразу публикуют в интернете.
Собрать свой сайтПодготовьте текст до оформления
Напишите надпись отдельно и проверьте её без макета. Для кнопки нужна команда действия, для подписи нужен конкретный объект, для пояснения нужен один законченный смысл. Если фраза работает только рядом с вашей заметкой или устным объяснением, на странице она тоже будет непонятной.
- Назовите предмет: что именно показывает или объясняет этот текст.
- Добавьте действие или условие только тогда, когда оно действительно относится к соседнему элементу.
- Уберите вводные фразы и повтор заголовка страницы.
- Прочитайте надпись отдельно от изображения. Смысл должен сохраняться.
- Сократите строку, если ради неё приходится уменьшать шрифт до плохо читаемого размера.
Безопасный пример для карточки услуги: «Настройка формы заявки» точнее, чем «Мы сделаем всё быстро и качественно». Первый вариант называет предмет, второй не помогает выбрать действие. Карту страниц и правила подготовки содержания удобно сверить с материалом как сделать контент сайта.
По теме: Как создать сайт без своего сервера: хостинг и домен
Добавьте надпись в конструкторе
В обычном блоке конструктора откройте содержимое, замените пример на свой текст и настройте шрифт, цвет, выравнивание и межстрочный интервал. В официальной справке Tilda указано, что текст можно менять через панель Content или кликом по самому тексту, а основные параметры доступны в редакторе: работа с текстом в Tilda. Названия пунктов в другой системе могут отличаться, но порядок остаётся тем же.
- Создайте копию страницы или откройте режим черновика.
- Добавьте готовый текстовый блок, если нужна обычная строка или абзац.
- Вставьте подготовленную фразу и выберите роль текста: заголовок, абзац или подпись.
- Настройте ширину блока до выбора окончательного размера шрифта.
- Переключите все доступные размеры экрана и поправьте переносы без ручных пробелов.
- Опубликуйте черновик и откройте его в новой вкладке, а не только внутри редактора.
Для свободного размещения можно использовать Zero Block. Его официальный редактор позволяет добавлять текст и отдельно настраивать расположение на разных типах экрана: руководство по Zero Block. Свободное размещение требует больше ручной проверки. Для длинного абзаца готовый адаптивный блок обычно надёжнее.
Самое долгое в своём сайте это первый запуск: страницы, домен, публикация. На бесплатном вебинаре по вайбкодингу весь путь проходят вживую, от идеи, описанной словами, до работающего адреса. Опыт в программировании не нужен.
Пройти путь до сайтаСделайте надпись в HTML и CSS
Если у вас есть HTML-файл, поместите обычный текст в <p> и назначьте ему класс. Оформление храните в CSS, чтобы не смешивать содержание и внешний вид. Блок <style> из примера поместите в <head> полного HTML-документа. Для простого блока достаточно такого примера:
<p class="notice">Запись подтверждается после ответа менеджера.</p>
<style>
.notice {
max-width: 42rem;
margin: 1rem auto;
padding: 0.9rem 1rem;
color: #242424;
background: #f6f1ec;
border-radius: 0.75rem;
line-height: 1.5;
}
</style>Горизонтальное выравнивание задаёт свойство text-align; оно действует на строчное содержимое внутри блока, а не перемещает сам блок. Это различие описано в справке MDN по text-align. Чтобы разместить блок по центру, в примере используется ограничение ширины и автоматические боковые поля.
Не подменяйте отступы пустыми абзацами. MDN отдельно предупреждает, что пустые <p> могут мешать людям, которые используют программы чтения с экрана. Отступы задавайте через margin и padding. Если нужен фирменный шрифт, сначала проверьте его загрузку по инструкции как подключить шрифт на сайт.
По теме: Как сделать временный сайт: публикация и отключение
Разместите текст поверх изображения без потери читаемости
Для надписи поверх картинки нужен контейнер с изображением, отдельный текстовый элемент и контрастная подложка. Не записывайте важную фразу внутрь файла изображения. Текстовый слой сможет переноситься и оставаться доступным при замене фотографии.
<figure class="promo">
<img src="workshop.jpg" alt="Рабочий стол с ноутбуком">
<figcaption>Практикум по созданию страницы</figcaption>
</figure>
<style>
.promo { position: relative; margin: 0; }
.promo img { display: block; width: 100%; height: auto; }
.promo figcaption {
position: absolute; left: 1rem; right: 1rem; bottom: 1rem;
padding: 0.75rem; color: white; background: rgb(0 0 0 / 72%);
}
</style>На маленьком экране длинная надпись может закрыть большую часть фотографии. Для такого случая перенесите подпись под изображение через мобильные настройки конструктора или медиазапрос CSS. Общий порядок проверки адаптивности есть в статье как сделать мобильный сайт.
Проверьте результат по короткому списку
Считайте задачу завершённой только после просмотра опубликованной страницы. Предпросмотр в редакторе не показывает все эффекты кэша, подключённых стилей и реальной ширины браузера.
- Текст виден без наведения мыши и не перекрыт меню, формой или изображением.
- На телефоне строка переносится по словам, не выходит за край и не становится мельче остального текста.
- Цвет текста остаётся различимым на самой светлой и самой тёмной части фона.
- Ссылка или кнопка рядом с надписью работает с клавиатуры и касанием.
- При отключённой картинке важный смысл остаётся в текстовом слое.
- В HTML нет пустых абзацев, повторяющихся H1 и стилей, вставленных случайно во все страницы.
По теме: Как сделать часы на сайт: HTML и JavaScript
Диагностика по симптому
Если надпись выглядит иначе после публикации, меняйте по одному параметру и каждый раз обновляйте страницу. Так можно отличить ошибку содержания от конфликта стилей.
- Текст пропал: проверьте цвет, прозрачность, скрытие блока на этом размере экрана и наличие содержимого в опубликованной версии.
- Шрифт не изменился: проверьте загрузку файла шрифта и более приоритетный стиль шаблона.
- Надпись уехала с картинки: убедитесь, что контейнер имеет
position: relative, а текст расположен внутри него. - На телефоне появляется горизонтальная прокрутка: удалите фиксированную ширину, проверьте длинные слова и задайте блоку
max-width: 100%. - Изменилась надпись на других страницах: стиль или поле относится к общему шаблону. Верните прежнее значение и создайте отдельный класс или локальный блок.
Когда этот способ не подходит
Инструкция подходит для редактируемой страницы или HTML-файла. Если надпись приходит из базы товаров, перевода или общего шаблона, править нужно источник данных, а не итоговую страницу. Если доступа к публикации нет, подготовьте текст, снимок нужного места и значения для компьютера и телефона, затем передайте их владельцу сайта.
Частые вопросы
Как сделать надпись по центру?
Для текста внутри блока используйте text-align: center. Если нужно центрировать сам блок, задайте разумную ширину и боковые поля margin-left: auto и margin-right: auto.
Как сделать надпись поверх картинки?
Поместите картинку и отдельный текст в общий контейнер. Контейнеру задайте position: relative, тексту position: absolute, затем проверьте контраст и мобильную версию.
Почему текст виден в редакторе, но не на сайте?
Проверьте, опубликована ли нужная версия, не скрыт ли блок на текущем размере экрана и не переопределяет ли шаблон цвет или прозрачность.
Нужно ли делать надпись картинкой?
Только если это декоративная деталь без важного смысла. Условия, подписи, призывы и объяснения оставляйте обычным текстом.
Хотите собрать страницу целиком и сразу проверить её на разных экранах? На воркшопе вы пройдёте путь от текста и блоков до опубликованного сайта.
Записаться на воркшоп