Время настройки: 3 минуты
Создаем изометрический эффект для текста в Tilda
Модификация может изменить текст для изометрической проекции с углом в 30 градусов, как в лежачем, так и в стоячем положении.
Смотрите, как быстро установить модификацию
Инструкция
ВАЖНО: Чтобы эффект сработал корректно не добавляйте текстовому элементу анимацию;
Вариант #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-стили → Сохранить.
Вариант #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-стили → Сохранить.
Сгенерируйте код для своего сайта
Копировать код <!-- Создаем изометрический текст в Tilda --> <!-- https://nolim.cc/isometric-text-tilda --> <style> .clsh1 { -webkit-transform:; -moz-transform:; -o-transform:; -ms-transform:; transform:; -webkit-transform: skew(360deg,-26deg); -moz-transform: skew(360deg,-26deg); -o-transform: skew(360deg,-26deg); -ms-transform: skew(360deg,-26deg); transform: skew(360deg,-26deg); text-shadow: , 1px 1px 1px #a8c7ff; } .clsh1 .tn-atom:after { content: "Нолим"; position: absolute; top: 15px; left: 25px; color: #0058ff; font-size: inherit; -webkit-transform: skew(-63deg) scale(1,.5); -moz-transform: skew(-63deg) scale(1,.5); -o-transform: skew(-63deg) scale(1,.5); -ms-transform: skew(-63deg) scale(1,.5); transform: skew(-63deg) scale(1,.5); text-shadow: -1px -1px 1px #aaa, -2px -2px 1px #999, -3px -3px 1px #888, -4px -4px 1px #777, -5px -5px 1px #666, -6px -6px 1px #555, -7px -7px 5px #888; } </style> Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 4
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 4 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 3
И получите доступ к библиотеке из более чем 200 модификаций.
Оплатите подписку
Шаг 2
Создать аккаунт — это быстро и просто.
Войдите или зарегистрируйтесь на платформе
Шаг 1
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Возобновите подписку
Шаг 1
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Оплатите подписку
Шаг 1
Популярные решения для вашего сайта
Не нашли нужное решение?
Часто задаваемые вопросы
Наши видеоинструкции позволяют внедрять модификации за 2−5 минут даже без технических знаний. Всё делается прямо в редакторе Тильды, без ручного редактирования кода
У нас есть оперативная техподдержка, которая поможет решить любые вопросы с установкой, настройкой или конфликтами нашего кода. Мы работаем без выходных с 11:00 до 19:00.
Мы уделяем особое внимание стабильности и надежности: все модификации проходят тестирование и корректно работают на Тильде, даже после крупных обновлений платформы. Регулярно добавляем новые эффекты и дорабатываем существующие, чтобы вы всегда могли реализовать дизайнерские идеи без перебоев.
Нет, все модификации доступны по подписке — вы получаете полный доступ к нашей библиотеке из более чем 200 модификаций и эффектов, а также ко всем новым обновлениям без доплат.
В каталоге есть фильтры по задачам и подробные описания с примерами. Если не уверены — напишите нам, мы подскажем оптимальное решение под ваш проект.
Мы постоянно расширяем каталог, дорабатываем функционал текущих модификаций и учитываем пожелания пользователей. У нас есть публичный роадмеп, и самые востребованные решения мы добавляем в библиотеку в первую очередь — расскажите о своей задаче, и, возможно, она появится в ближайших обновлениях.
Новые модификации и улучшения выходят почти каждую неделю. Мы быстро реагируем на изменения в Тильде: если платформа обновляется, мы оперативно корректируем код, чтобы все работало стабильно и без сбоев.
Да, у нас есть короткие видеоуроки, подробные текстовые инструкции и поддержка, которая подскажет на любом этапе.
Все решения оптимизированы для работы на Тильде. Если возникнут вопросы — поддержка поможет подобрать оптимальную конфигурацию для вашего проекта.
Наш сервис работает с 2021 года, нам доверяют десятки тысяч веб-дизайнеров и агентств по всей России и СНГ. Мы регулярно получаем положительные отзывы и кейсы от пользователей.