Как в Тильде изменить шрифт и размер одного или нескольких слов без дубляжа текстовых контейнеров
Всем привет😘👋
Не забываем ставить 👍 и подписываемся на канал 🛎 — впереди много интересного🔥🥳
С вами — Наталья Чистякова, 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.дизайн 👉
Вливайтесь для человеческого и профессионального общения, а также на случай, если
давно хотели закинуть какую-нибудь интересную тему, но не решались😁 — мы периодически проводим эфиры, так что у вас есть реальный шанс стать приглашённым спикером-экспертом и поделиться своими знаниями, инсайтами и компетенциями с грамотной интеллигентной и просто клёвой аудиторией🔥✨☺️, а потом взять и выложить запись своего бенефиса в соцсетях😉 — отличный инфоповод💪
Если есть вопросы ко мне:
► дизайн;
► типографика и композиция на сайте;
► анимация любого сценария и уровня сложности;
► подбор креативных идей;
► оформление документов для сайта (Политика конфиденциальности, Публичная оферта, РКН, согласие субъекта ПД);
► оформление отношений с заказчиками, разрешение спорных ситуаций, составление актов и претензий);
► любой вопрос за рамками поименованных — мои компетенции гораздо шире заявленных😉,
— пишите в ЛС, разберёмся в любой ситуации🤝
1 view
1033
468
3 weeks ago 00:00:00 1
12 Апреля! Запуск Акции + Заработок в интернете! Доходы от 1000$ в месяц! Начало в 17:10 Москвы!
3 weeks ago 00:11:06 1
Были ли американцы на Луне? Экстракт ролика №17
4 weeks ago 00:03:13 1
Homay / Хомай Русский перевод всех куплетов и припевов
4 weeks ago 00:43:52 1
Анатолий Клесов “Поскреби русского - получишь ария!“
4 weeks ago 00:41:11 1
Путин “диктует“ условия. И Трампу это передают.
4 weeks ago 00:54:45 1
МотоВесна 25: «Когда в павильоне больше блогеров, чем тормозных дисков»
4 weeks ago 00:05:41 1
ЕСЛИ БЫ НЕ ТЫ. Александр Рыбинский и Алина Апетёнок. Текст+аккорды
4 weeks ago 00:16:01 8
Жадность как диагноз. Проклятые миллиарды Путина и его друзей. Миллер, Сечин
4 weeks ago 00:15:59 2
Как оставаться спокойным в любом конфликте | Миямото Мусаши
4 weeks ago 00:46:46 1
СТИРАНИЕ ПАМЯТИ Прямой ЭФИР АРиЯ в новую эру 12 лет 111 дней [ 21:21:21 МСК]
4 weeks ago 00:45:52 1
Вот почему скрипки Страдивари стоят $10,000,000! ft. Михаил Казиник
4 weeks ago 00:07:01 1
Кто на самом деле управляет армией Украины
4 weeks ago 00:19:04 2
Джеффри Сакс по русски - Геополитическая глупость
4 weeks ago 00:07:14 4
ШОКОЛАДНЫЙ ПИРОГ С ХУРМОЙ - рецепт от шефа Бельковича | ПроСто кухня | YouTube-версия
4 weeks ago 00:28:37 1
10 советских и российских танков, которые были сильнее Арматы.
4 weeks ago 00:00:00 5
ЛЕОНИД АГУТИН. КОНЦЕРТ НА ВТБ АРЕНЕ с группой «Эсперанто» и Тюменским филармоническим оркестром
4 weeks ago 00:35:11 4
Как работать с СРА-блогерами в 2025? Тренды, ловушки и секреты успеха
4 weeks ago 00:00:00 7
Россия и США не договорились. Белый дом предупредил Москву. Трамп: Мне Маск не нужен | УТРО