Как вставить текст в тильде

Все инструменты для работы с текстом при создании сайтов на Тильде

Если ваш проект не требует платных шрифтов, а так бывает чаще всего, то вполне достаточно бесплатных: Google fonts, TypeType,и Fontsquirrel.

За деньги

Если все же вам нужны платные: Myfonts. Не забывайте читать лицензию, базовая версия подходит для 10 000 просмотров в месяц. Библиотека Adobe TypeKit — еще один хороший вариант для платных шрифтов. Тут можно купить подписку на месяц / год.

Подобрать шрифтовую пара

Сервис Canva поможет, если нужно подобрать второй, дополняющий шрифт. Просто выберите один шрифт, сервис подберет ему пару.

Подключить шрифт к Тильде

Инструкции из справочника Tilda Publishing

Подключение Google Fonts TypeKit Свой файл шрифта в формате WOFF Через внешний файл CSS

Видеоинструкции

Наше видео о работе со шрифтами, и как их подключить Видео Молнии «Как загрузить два шрифта»

Конвертация шрифта в WOFF

Конвертер в WOFF — как вы возможно догадались, на сайте можно конвертировать шрифты в WOFF.

Подобрать размеры шрифта

TypeScale — сервис подбора размеров шрифта для всего текстового контента на сайте. Чтобы все они выглядели гармонично.Для сложных проектов может понадобиться целая система. Удобно выписать все в таблицу:

Сделать длину строки удобной для чтения

На сайте дизайна государственных систем прекрасно проиллюстрировали, какая длина строки оптимальна для наилучшего чтения и почему:

Узнать количество символов

text.ru — удобно использовать, когда нужно узнать количество слов, символов в предложении.

Найти редкий символ

Glyphy — минималистичный сайт собрал не только часто используемые символы, но и предоставил возможность скопировать символ одним кликом по нему. Сайт с бОльшей коллекцией символов, чем на предыдущем сайте. Менее эстетично, зато выбор и правда большой.

Типографировать текст

Типографировать текст можно и в самом редакторе внутри Тильды, но если привычней вручную, установите Типографскую раскладку Бирмана. Типограф Лебедева — классика.

Редактировать текст

Справочник Главреда (осторожно! Много букв) — поможет понять, каким должен быть текст на сайте и вообще.Сборник от Ильи Бирмана с правилами русского языкаСпеллер — чтобы проверить орфографию Грамота ру — на крайний случай, для проверки любых правил русского языка Главред — помогает почистить текст от лишних слов

Улучшить текст в Zero Block

Модификации от Тильдошной

Искажение текста в Zero Block Анимация чисел в Zero Block Цвет выделения текста

Видеоуроки

Как сделать эффект печатной машинки Эффект бегущей строки

Узнать все о шрифтах на другом сайте

Fontface Ninja — с помощью этого виджета можно посмотреть всю информацию о тексте на сайте: размеры, цвет, начертания и т. д.

Как на Тильде сделать ссылку

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

1. Создание ссылки в тексте.
2. Создание ссылки в готовом блоке.
3. Создание ссылки с элемента в Zero Block.
4. Создание якорной ссылки.

Создание ссылки в тексте

Самое простое, что может быть в Тильде. Чтобы сделать ссылку, нужно кликнуть на текст в готовом блоке, при этом вверху появится панель с функциями. Выделите мышкой часть текста, которую вы хотите сделать ссылкой и нажмите в верхнем меню на иконку скрепки. В поле «Укажите ссылку» введите относительную (если это ссылка на внутреннюю страницу на Тильде) или абсолютную (если это внешняя ссылка) ссылку. Отметьте чекбокс «Открыть ссылку в новой вкладке», если это внешняя ссылка.

Ниже вам будут доступны дополнительные настройки: цвет текста, цвет и толщина линии, rel=»nofollow».

Создание ссылки в готовом блоке

Чтобы на Тильде сделать ссылку в любом готовом блоке, необходимо навести на блок и нажать на кнопку «Контент» в левом верхнем углу блока. В зависимости от категории блока (меню, плитка и ссылка, форма и кнопка и т. д.) нужно выбрать поле, в котором предусмотрено место для добавления ссылки. В указанное место необходимо добавить ссылку вручную, либо нажать на ссылки «Выбрать страницу» или «Выбрать блок». Здесь также можно отметить чекбокс «Открыть в новой вкладке», если ссылка должна открываться в новой вкладке.

Создание ссылки с элемента в Zero Block

В зависимости от того, с какого типа элемента в Zero Block нужно сделать ссылку, мы выполняем различные действия. Принцип добавления ссылки в текстовый блок такой же как для готового блока. Необходимо дважды кликнуть по текстовому блоку и в открывшейся панели нажать на иконку скрепки. Далее появляется панель, описанная в главе «Создание ссылки в тексте».

Чтобы на Тильде сделать ссылку с элементов Image и Shape, необходимо кликнуть на элемент левой кнопкой мыши, затем нажать на кнопку Settings в правом нижнем углу. В открывшемся окне открываем секцию Link и указываем ссылку в поле URL. Также можно настроить дополнительные параметры: Target (открывать или нет в новом окне) и Rel Nofollow (запрет перехода по ссылке для поискового робота).

Для элемента Button все идентично предыдущим двум элементам, но в окне настроек отсутствует секция Link. Ссылка указывается в поле URL.

Создание якорной ссылки

Бывают ситуации, когда ссылка должна вести не на отдельную страницу, а на конкретный блок внутри существующей или отдельной страницы. В этом случае нам на помощь приходит якорная ссылка. Чтобы на Тильде сделать якорную ссылку, необходимо в Библиотеке блоков нажать на категорию «Другое» и там выбрать блок Т173. Разместите его перед тем блоком, на который вы хотите ссылаться.

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

Далее переходите к тому элементу, который должен ссылаться на выбранный блок. Это может быть один из элементов, описанных в предыдущих разделах. Необходимо указать имя якорной ссылки, поставив перед ним значок решетки. Пример якорной ссылки: #contacts. Если вы хотите указать ссылку на блок на другой странице, вы просто добавляете перед якорной ссылкой адрес этой страницы: /path/#contacts

Возможен еще один вариант. Вы можете навести на блок, на который хотите сослаться и в левом верхнем углу нажать на «Настройки». Необходимо прокрутить в самый низ окна и скопировать значение в поле Block ID — это имя уникальной якорной ссылки блока. Ее необходимо прописать в том месте, откуда вы хотите сделать якорную ссылку.

Если у вас остались вопросы о том, как на Тильде сделать ссылку, пишите их в комментариях к этой статье.

Копирование текста по клику в Tilda

В этой статье я покажу, как можно копировать текст в буфер обмена по клику. Данный пример подойдет для промо-акций или для интернет магазинов на платформе Tilda. Промо код можно скопировать при клике на кнопку, или на сам промо код. При копировании пользователь получает уведомление о том, что текст скопирован. Остается только вставить его в поле ввода.

Как копировать текст кликом в Tilda

Пример №1

В данном примере копирование происходит при клике на элемент, содержащий в себе текст промо-кода, например кнопка или текст. Пример реализован в Zero block, для проверки результата добавил поле ввода.

Ваш промо-код:
Кликните, чтобы скопировать

1. Создаем Zero block;
2. Добавляем элемент «Текст» или «Кнопка», который содержит в себе текст промо-кода, который мы собираемся копировать;
3. Присваиваем данному элементу css class example-1 (у меня — это кнопка) ;
4. Вставляем код на страницу в блок T123;
5. Меняем текст об успешном копировании на свой (отмечен комментарием в коде).

  .example-1 

Пример №2

Во втором примере копируется текст, который находится рядом с кнопкой. Пример так же реализован в Zero block. Единственный нюанс — сообщение о копировании вы создаете с помощью элемента текст и пошаговой анимации.

Ваш промо-код:
Копировать
Текст скопирован!
Данный пример реализовать так же достаточно просто, но добавилось пара движений в Zero block.

1. Создаем Zero block;
2. Добавляем элемент «Текст» или «Кнопка», который содержит в себе текст промо-кода, который мы собираемся копировать;
3. Присваиваем данному элементу css class example-2-txt;
   
4. Создаём кнопку копирования;
5. Присваиваем кнопке css class example-2-btn;
6. Добавляем элемент с уведомлением о успешном копировании (у меня это кнопка);
7. Добавляем пошаговую анимацию:
   — выбираем кнопку с промо-кодом, задаем в первом шаге прозрачность: 100%, время анимации: 0. Во втором шаге — время: 0, прозрачность: 0%. Анимация по клику, в качестве триггера выбираем кнопку копирования (п.4.);
   — выбираем кнопку или текст с сообщением об удачном копировании, в первом шаге анимации — время: 0, прозрачность: 0%, во втором шаге, время: 0, прозрачность: 100%. Анимация по клику, в качестве триггера так же выбираем кнопку копирования (п.4).
8. Вставляем код на страницу в блок T123.

Обратите внимание, текст о копировании находится на нижнем слое, под блоком с промо кодом для того, чтобы оставить возможность копировать обычным выделением.

  .example-2-btn 

Пример №3

Данный пример совмещает в себе предыдущие. Текст копируется из соседнего объекта (Пример №2), но сообщение о копировании появляется в кнопке на которую осуществляется клик (Пример №1).

Ваш промо-код:
Копировать

1. Создаем Zero block;
2. Добавляем элемент «Текст» или «Кнопка», который содержит в себе текст промо-кода, который мы собираемся копировать;
3. Присваиваем данному элементу css class example-3-txt;
   
4. Создаём кнопку копирования;
5. Присваиваем кнопке css class example-3-btn;
6. Вставляем код на страницу в блок T123;
7. Меняем текст об успешном копировании на свой (отмечен комментарием в коде).

  .example-3-btn 

Пример №4

Все то же самое, что и в Примере №1 и Примере №3, но кнопка будет менять цвет текста и фона после клика.

Ваш промо-код:
Кликните, чтобы скопировать

1. Создаем Zero block;
2. Добавляем элемент «Текст» или «Кнопка», который содержит в себе текст промо-кода, который мы собираемся копировать;
3. Присваиваем данному элементу css class example-4 (у меня — это кнопка);
4. Вставляем код на страницу в блок T123;
5. Меняем текст об успешном копировании на свой (отмечен комментарием в коде);
6. Меняем цвет текста и фона в сообщении об успешном копировании.

  :root < --done-bg-color: #2ec700; /*цвет фона после копирования*/ --done-txt-color: #fff; /*цвет текста после копирования*/ >.example-4, .example-4 .tn-atom < cursor:pointer; transition:all 0s!important; >.done 

Ваш промо-код:
Копировать

1. Создаем Zero block;
2. Добавляем элемент «Текст» или «Кнопка», который содержит в себе текст промо-кода, который мы собираемся копировать;
3. Присваиваем данному элементу css class example-4-txt;
4. Создаём кнопку копирования;
5. Присваиваем кнопке css class example-4-btn;
6. Вставляем код на страницу в блок T123;
7. Меняем текст об успешном копировании на свой (отмечен комментарием в коде);
8. Меняем цвет текста и фона сообщения об успехе (отмечены комментарием в коде).

  :root < --done-bg-color: #2ec700; /*цвет фона после копирования*/ --done-txt-color: #fff; /*цвет текста после копирования*/ >.example-4-btn, .example-4-btn .tn-atom < cursor:pointer; transition:all 0s!important; >.done 

Пример №5

Пятый пример основан на Примере №2, отличается только тем, что нам не нужно возиться с пошаговой анимацией и созданием дополнительного объекта с сообщением об успешном копировании — это несомненно плюс. Плюс Примера №2 в том что вы можете стилизовать сообщение об удачном копировании, как захотите (в рамках функционала zero block. В данном примере я добавлю только фон и цвет текста.

Ваш промо-код:
Копировать

1. Создаем Zero block;
2. Добавляем элемент «Текст» или «Кнопка», который содержит в себе текст промо-кода, который мы собираемся копировать;
3. Присваиваем данному элементу css class example-5-txt;
4. Создаём кнопку копирования;
5. Присваиваем кнопке css class example-5-btn;
6. Вставляем код на страницу в блок T123;
7. Меняем текст об успешном копировании на свой (отмечен комментарием в коде);
8. Меняем цвет текста и фона сообщения об успехе (отмечены комментарием в коде).

  :root < --done-bg-color: #2ec700; /*цвет фона после копирования*/ --done-txt-color: #fff; /*цвет текста после копирования*/ >.example-5-txt, .example-5-txt .tn-atom < cursor:pointer; transition:all 0s!important; >.done 

Я надеюсь вы найдете необходимый стиль, подходящий для вашего проекта. Данные примеры можно реализовать в PopUp-окне, воспользовавшись кодом из статьи «Popup в Zero block Tilda». Так же все возможно адаптировать под стандартные блоки конструктора.

Если возник вопрос, задайте его в комментариях или через форму внизу страницы.
Не забудьте поделиться записью в соцсетях:)

Оформление сайта: как работать с текстом и изображениями

Изображения на сайте вызывают интерес и погружают человека в контекст. Вместе с текстом фотография работает на главную цель — донести до аудитории сообщение о продукте или сервисе.

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

Текст поверх изображения

Расположение текста поверх фотографии или иллюстрации — популярный и сильный графический прием оформления сайта. Он обращает на себя внимание, показывает важность информации.

Этот прием используется чаще всего в обложках и на первом экране сайта, в оглавлении в виде плитки (товары, статьи блога), в начале раздела, в блоках с призывами к действию и кнопкой.

Проектная мастерская R3, сайт: pmr3.ru

Обложка на сайте varenye.com

Обложка лонгрида Cycling’s Road Forward от Washington Post

Никита Обухов
Основатель Tilda Publishing

В обложках фотография является фоном, она должна соответствовать тематике сайта, но главное — это текст. Изображение не должно спорить с текстом, оно отвечает за создание правильной атмосферы. Текст должен хорошо читаться.

В обложках текст чаще всего располагают по центру. Поэтому лучше подбирать фотографию, у которой нет мелких деталей посередине — там, где будет заголовок. Это может быть простая фигура, например, стена дома или открытое пространство на пейзаже. Что-то однородное. Хорошо работают белые обложки — со светлой фотографией на фоне. Можно задать тексту цвет, чтобы создать яркий стиль.