Как в Тильде изменить шрифт и размер одного или нескольких слов без дубляжа текстовых контейнеров

Всем привет😘👋 Не забываем ставить 👍 и подписываемся на канал 🛎 — впереди много интересного🔥🥳 С вами — Наталья Чистякова, UX/UI Веб-дизайнер, в этом видео расскажу о том, как, работая с типографикой на Тильде и используя всего пару строк CSS, изменять в слово или целое предложение по размеру и его шрифту/начертанию, не прибегая к дубляжу текстовых блоков и последующему неизбежному выравниванию, адаптации и т. п.🔥 🦊Желающим задонатить — к боту-помощнику 👉 ⏱Тайминг — для вашего удобства❤️ (ниже даю краткий пересказ словами): 00:00 — вступление 01:23 — обзор темы 01:36 — что именно будем менять 02:49 — переходим к анализу возможностей настроек текста в зеро 04:00 — перехожу к самому алгоритму 07:20 — смотрим на результат внесённых изменений на опубликованной странице 08:13 — прописываем пример кода для адаптива (здесь — для разрешений 640-960px) 10:30 — приглашаю в чат🙌 11:06 — ДОПОЛНЕНИЕ ПО ПОВОДУ ПОРЯДКА ТАКИХ ИЗМЕНЕНИЙ В СТАНД БЛОКЕ И НАСЧЁТ ИЗМЕНЕНИЯ САМОГО СЕМЕЙСТВА, а не путём изменения начертания для выбора шрифта Всем спасибо за❤️🙏 Краткий перессказ: 1) выяснили, что изменить размер и шрифт для фрагмента текста в Тильде через настройки в правой панели инструментов возможности нет; 2) выделяем наш необходимый текстовый фрагмент, и нам открывается верхняя панель редактирования текста, которая даст возможность поменять цвет, а начертания — только на normal и bold, поэтому-то мы и прибегаем к помощи CSS; 3) выделили текстовый фрагмент и в редакторе цвета сверху РУКАМИ ВПИСАЛИ или тот же цвет, или свой и нажали Apply — теперь изменённый таким, кастомным, образом текстовый фрагмент в разметке получил класс span; закрыли окно редактирования; 4) всему текстовому контейнеру, внутри которого находится наш span, задали класс через ПКМ — Add CSS Class Name (в примере — class1); 5) закрыли блок, добавили внизу блок 123, в нем прописали следующие строчки (объяснения — см.по таймингу к видео): /*код открывается тегом style в угловых скобках (Ютуб не даст использовать скобки)*/ .class1 span { font-size: 54px; font-family: ’GS’, Arial, sans-serif; font-weight: 900; } /*код закрывается тегом /style в угловых скобках (Ютуб не даст использовать скобки)*/ Для регулирования изменений в других разрешениях используем медиа-запросы вида (в примере я задаю ограничения для 640-960px, а вы можете использовать любые свои — max-width: 480px или min-width: 1200px, например): @media screen and (max-width: 960px) { .class1 span { font-size: 32px; font-family: ’GS’, Arial, sans-serif; font-weight: 900; } } Так же всё пишем с открывающим и закрывающим тегами, указывая те значения для свойств, которые актуальны в нужных разрешениях (не забывайте менять значения ширины экрана); будут вопросы, пишите в ЛС🙌 ДОСМОТРИТЕ ДО КОНЦА — РАССКАЗЫВАЮ, как вносить такие изменения в стандартных блоках💪 ✔️Полезные ссылки: 📌 Документация по классу span 👉 📹Хочешь предложить свою тему для видео или давай соберём эфир вместе — пиши в ТГ (никнейм: @chistyakova_website) или в комментах к этому видео🔥 Ещё раз напоминаю о том, что это и другие полезные видео выкладываю, в том числе, в рамках нашего дизайнерского душевного чата, в котором являюсь Админом — чат Pro.дизайн 👉 Вливайтесь для человеческого и профессионального общения, а также на случай, если давно хотели закинуть какую-нибудь интересную тему, но не решались😁 — мы периодически проводим эфиры, так что у вас есть реальный шанс стать приглашённым спикером-экспертом и поделиться своими знаниями, инсайтами и компетенциями с грамотной интеллигентной и просто клёвой аудиторией🔥✨☺️, а потом взять и выложить запись своего бенефиса в соцсетях😉 — отличный инфоповод💪 Если есть вопросы ко мне: ► дизайн; ► типографика и композиция на сайте; ► анимация любого сценария и уровня сложности; ► подбор креативных идей; ► оформление документов для сайта (Политика конфиденциальности, Публичная оферта, РКН, согласие субъекта ПД); ► оформление отношений с заказчиками, разрешение спорных ситуаций, составление актов и претензий); ► любой вопрос за рамками поименованных — мои компетенции гораздо шире заявленных😉, — пишите в ЛС, разберёмся в любой ситуации🤝
Back to Top