Добавление изображений в Блок HTML в конструкторе Tilda
Только начала разбираться с конструктором Tilda и у меня возник вопрос. Как добавить изображения в блоке T123? Я хочу сделать полностью кастомный блок, сверстала его и тут встал вопрос изображений. Как их добавить, не используя другие блоки?
Отслеживать
51.6k 200 200 золотых знаков 61 61 серебряный знак 242 242 бронзовых знака
задан 13 янв 2020 в 12:11
13 1 1 серебряный знак 2 2 бронзовых знака
каким боком конструктор Tilda имеет отношение к html ?
13 янв 2020 в 13:07
не совсем по теме, но мне помогло) спасибо
17 фев в 19:23
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Конкретно в блок 123 вы загрузить изображение не сможете, однако вы можете загрузить его в какой-нибудь другой блок (например галерею), сохранить и скопировать оттуда URL на изображение.
Ещё как вариант — загрузить изображение на сторонний сервер (например Vkontakte) и взять ссылку оттуда.
Дальше вы можете просто вставить в HTML блок код изображения.
Даст вам результат:
В том же ВК сохраняется не только обработанная и сжатая версия файла, но и оригинал (если требуется прикрепить его).
Библиотека изображений
При подготовке контента для сайта не всегда есть возможность нарисовать иллюстрации с нуля. Чтобы было удобно подбирать подходящие картинки для своего сайта не выходя из редактора, в Тильде есть библиотека изображений. Она включает в себя иконки и векторные изображения.
Чтобы перейти в библиотеку изображений, перейдите в Контент блока с изображением и нажмите на ссылку «Искать в библиотеке» или на иконку с лупой.
В Zero Block перейдите в настройки элемента (изображения или шейпа) и нажмите на иконку с лупой.
Откроется панель выбора изображений из разных источников.
В этом разделе мы отобрали лучшие банки изображений, которые вы можете задействовать для вашего сайта. Для дополнительного удобства мы разделили их на категории: фотографии, иллюстрации, конструкторы иллюстраций, иконки.
Tilda Icons
Tilda Icons — коллекция бесплатных иконок от Tilda Publishing. Все иконки вы можете использовать на Тильде в своих личных и коммерческих проектах. Подробности об условиях использования читайте на странице лицензии.
Выберите тему из предложенных, чтобы посмотреть все варианты иконок. Для загрузки иконки в блок, наведите на нее и нажмите на кнопку «Выбрать» — изображение автоматически загрузится в блок.
Скачать наборы иконок на странице Tilda Icons
Как поменять цвет иконок Tilda Icons
Иконки от Linea.io
Linea.io — коллекция иконок, нарисованных дизайнером Дарио Фернандо. Все изображения имеют лицензию Creative Commons Attribution, что означает, что вы можете копировать, модифицировать, распространять и использовать фотографии бесплатно, включая коммерческие цели.
Выберите тему иконки из предложенных, чтобы посмотреть все варианты. Для загрузки иконки в блок, наведите на нее и нажмите на кнопку «Выбрать» — изображение автоматически загрузится в блок.
Добавление собственных фото из Instagram
Компания Meta Platforms Inc., владеющая социальными сетями Facebook и Instagram, по решению суда от 21.03.2022 признана экстремистской организацией, ее деятельность на территории России запрещена.
Работа с обложкой
Посмотрите видеоурок о том, как работать с обложкой страницы или прочитайте подробную инструкцию ниже.
Как правильно подобрать фоновое изображение: размеры, формат, пропорции
Настройка заголовка, подзаголовка и остального текста
Как сделать узкую обложку, которая занимает не всю высоту первого экрана
Как сделать цветной фильтр для фона, залить обложку сплошным цветом или сделать переход на следующий блок
Настройка видео, которое будет отображаться на фоне или при клике на кнопку Play
Как сделать так, чтобы обложка хорошо смотрелась на мобильных устройствах
Настройка приема данных сразу на первом экране
Добавление таймеров обратного отсчета до определенного времени и даты
Как конвертировать обложку и доработать в редакторе Zero Block
Обложка — первое, что человек видит на странице. Обложка сообщает, о чем материал, и побуждает его прочесть или сообщает уникальную ценность продукта, емко объясняет, почему он интересен. Чаще всего обложка содержит фоновое изображение — это может быть стильная фотография, атмосферное видео, просто цвет, иллюстрация или градиент, текстура.
Существует несколько вещей, которые нужно знать, чтобы правильно работать с обложками и фоновыми изображениями и видео.
Видимая часть браузера
В интернете, в отличие от печатной продукции, нет фиксированного размера видимой области браузера. У всех разные экраны и разные пропорции. Причем даже в разных браузерах видимая область тоже разная. Например, видимую область может уменьшать панель закладок. Изображение в обложке кадрируется таким образом, чтобы всегда показаться на экране пользователя без полей.
Изображение для фона обложки загружается в Контенте блока → Фоновое изображение.
Чтобы изображение выглядело хорошо, мы составили рекомендации по оптимальным параметрам фонового изображения.
Оптимальный размер изображения для фона:
Формат: jpg
Размер по ширине: 1680 px
Кол-во точек на дюйм: 72 dpi
Цветовая модель: RGB
Степень сжатия: 10
Если ваше изображение сильно отличается от оптимального, то его нужно заранее подготовить в графическом редакторе с помощью справочной статьи ниже.
Справочная статья об оптимизации изображений для сайта
Перед тем, как начать выбор изображения, прочитайте нашу статью «Как сделать обложку» в Tilda Education. Она содержит советы по созданию своей обложки и ссылки на сервисы, в которых можно найти удачное изображение.
Текст — это самая важная часть обложки, так как это первое сообщение, которое увидит посетитель сайта. Для донесения сообщения и расстановки акцентов в обложках есть заголовок, подзаголовок, описание и надзаголовок.
Наполнить обложки текстом можно двумя способами: с помощью панели «Контент» блока и при клике на текст на странице редактирования страницы.
Редактирование текста при клике на блок
Редактирование текста в Контенте блока
Форматировать текст можно как с помощью панели сверху, так и изменив размер, цвет или другие параметры текста в Настройках блока → Типографика.
Форматирование текста с помощью верхней панели
Изменения форматирования в настройках блока
Чтобы сделать классную обложку, читайте статью «Как сделать обложку» с практическими примерами сочетания текста и фонового изображения и статью «Как сделать продающий оффер (УТП) для сайта» для того, чтобы ваша обложка помогла привлечь внимание в первые 10 секунд.
Изменение высоты обложки
Узкая обложка — это обложка по высоте не 100%, а около 60 или 70%. В этом случае у обложки скорее утилитарная, чем имиджевая функция, ведь акцент смещается на информацию, которая следует за ней.
Для создания таких обложек в настройках блока есть параметр «В ысота ». Задавать высоту можно либо в пикселях (например, 400px), либо в процентах от высоты экрана (vh, 1vh равен 1% области просмотра экрана). Задавать высоту в vh предпочтительнее.
Работа с редактором изображений
Редактор изображений — встроенный инструмент, позволяющий отредактировать загруженное на сайт изображение.
Обработать изображение можно в любом из блоков, где предусмотрено его наличие. Исключением являются блоки из категории «Магазин». Карточки товаров рекомендуется подготовить перед загрузкой на сайт.
Загрузка изображения и активация редактора
Выберите подходящий для вашей страницы блок, перейдите в меню «Контент» этого блока, и затем в разделе с изображением загрузите нужную картинку.
После успешной загрузки рядом с изображением появится иконка карандаша. При клике на нее в всплывающем окне откроется редактор.
Интерфейс редактора
Доступны базовые операции, которые можно произвести с изображениями: изменить размер, отразить по горизонтали и вертикали, обрезать, добавить текст, обработать фильтрами. Также вы можете отменить, вернуть, или полностью сбросить действия над изображением, если что-то пошло не по плану.
Если же вам требуется сложная обработка изображения, то мы рекомендуем воспользоваться специализированными графическими редакторами и после этого загрузить изображение на сайт.
Изменить размер
Вы можете задать собственное разрешение для изображения. Но необходимо учитывать исходный размер картинки. Можно уменьшить картинку без потери качества, но её увеличение уже грозит ухудшением детализации.
Размер можно указать вручную или установить галочку у параметра «Сохранить пропорции», чтобы система автоматически подбирала оптимальное разрешение.
Рекомендованный максимальный размер изображения для загрузки на сайт — 1680×900 пикселей. Подробнее о подготовке изображений перед загрузкой на сайт можно узнать в нашем справочном материале.
Обрезание изображения
Если требуется оставить только часть изображения, для этого можно воспользоваться специальным инструментом.
Вы сможете выделить поле на изображении, которое вы хотите оставить. Чтобы изменения сохранились, нажмите на кнопку «Применить» и затем на кнопку «Сохранить».
Также вы можете использовать готовые пропорции: 1:1, 3:2, 4:3, 5:4, 7:5, 16:9.
Ориентация изображения
В некоторых случаях для идеального сочетания текста и изображения достаточно его отразить по горизонтали или вертикали. Это можно сделать с помощью инструмента «Развернуть».
Поворот изображения
Если вы хотите повернуть изображение на определенный градус, то для этого откройте в редакторе соответствующий пункт.
С помощью ползунка можно задать любое значение от -360 до +360 градусов. Либо использовать шаг в 30 градусов.
Добавление текста
При работе с большинством блоков из нашей библиотеки вы можете добавить текстовый элемент отдельно от изображения. Для этого есть соответствующие поля в меню «Контент».
Но иногда может возникнуть необходимость добавить текст прямо в изображение. В этом случае на помощь придет инструмент «Текст».
После активации инструмента нажмите на любом месте изображения, чтобы появился контейнер с текстом. Контейнеру можно задать подходящий размер и изменить его наклон. Также добавленный текст можно отформатировать: изменить цвет, установить курсив, добавить жирности, или подчеркнуть слово.
Дополнительно можно задать выравнивание текста по центру, левой и правой сторонам.