Создаем изометрический эффект для текста в Tilda

ВАЖНО: Чтобы эффект сработал корректно не добавляйте текстовому элементу анимацию;

Вариант #1 «Текст лежит»

1. Добавляем свой текст в Зеро Блок и указываем класс к нему такой же как и в генераторе;

Что бы указать класс у элемента, нажимаешь на него правой кнопкой мыши и выбираем из списка предпоследнюю строку "Add CSS Class Name", далее, справа в настройках указываем тот же класс что и в генераторе;

2. Настраиваем перспективу текста, по другому направление, ↙ Лево или ↘ Право

3. Нажимаем кнопку "Сгенерировать пример", смотрим, что получилось;

4. Копируем сгенерированный HTML код и вставляем его в Настройки сайта → Ещё → Пользовательские CSS-стили → Сохранить;

Вариант #2 «Текст стоит»

1. Добавляем свой текст в Зеро Блок и указываем класс к нему такой же как и в генераторе;

Что бы указать класс у элемента, нажимаешь на него правой кнопкой мыши и выбираем из списка предпоследнюю строку "Add CSS Class Name", далее, справа в настройках указываем тот же класс что и в генераторе;

2. Настраиваем перспективу текста, по другому направление, ↙ Лево или ↘ Право

3. Добавляем объём к тексту и настраиваем глубину, цвет;

4. Настраиваем тень, положение по X и Y, Blur, цвет и прозрачность (Opacity)

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

5. Нажимаем кнопку "Сгенерировать пример", смотрим, что получилось;

6. Копируем сгенерированный HTML код и вставляем его в Настройки сайта → Ещё → Пользовательские CSS-стили → Сохранить;

Вариант #3 «Текст отбрасывает тень»

1. Добавляем свой текст в Зеро Блок, устанавливаем ему выравнивание по Левой стороне и указываем класс к нему такой же как и в генераторе;

Что бы указать класс у элемента, нажимаешь на него правой кнопкой мыши и выбираем из списка предпоследнюю строку "Add CSS Class Name", далее, справа в настройках указываем тот же класс что и в генераторе;

ВАЖНО: Перспектива текста автоматически стоит ↙ Лево, ↘ Право к сожалению реализовать нельзя;

2. Если нужно, добавляем цвет тени у текста, который у нас ложится в изометрическую плоскость, можно пропустить эту настройку;

3. Настраиваем цвет стоячего текста и объема;

4. ВАЖНО: В поле текст, дублируем вашу фразу, важно повторить регистры, если основной текст написан БОЛЬШИМИ буквами, то в поле пишем текст БОЛЬШИМИ, если в тексте есть только одна Заглавная, значит в поле пишем тоже с одной Заглавной.

5. С учетом того, что у текста может быть разный интервал (spacing) из-за этого нужно настроить координаты расположения текста.

ВАЖНО: Устанавливая координаты у нас в генераторе и то что отображается в сгенерированном примере, это может не совпадать с твоим текстом, потому что у твоего текста свой интервал (spacing)

6. Нажимаем кнопку "Сгенерировать пример", смотрим, что получилось;

7. Копируем сгенерированный HTML код и вставляем его в Настройки сайта → Ещё → Пользовательские CSS-стили → Сохранить;