Как в Тильде изменить шрифт и размер одного или нескольких слов без дубляжа текстовых контейнеров
Всем привет😘👋
Не забываем ставить 👍 и подписываемся на канал 🛎 — впереди много интересного🔥🥳
С вами — Наталья Чистякова, 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
1259
516
1 week ago 00:02:20 3
Будущее России начинается с молодёжи
1 week ago 00:05:28 5
⛔️ВОТ И ВСЁ❗❗❗ НОВАЯ ВОЛГА 2025 ГОДА УЖЕ В ПРОДАЖЕ🔥 ЦЕНА VOLGA К30, К40, C40✅ НО
1 week ago 00:38:19 1
Ротшильды: Почему их называют тайными властителями мира? / Истории миллиардов @MINAEVLIVE
1 week ago 01:04:54 5
“Кто говорит, что мы что-то у кого-то украли, тот грешит безбожно!“ // Историк про наследие ВКЛ
1 week ago 00:26:07 1
Строительные хитрости. Самый быстрый монтаж шпилек. Анкера DKC и многое другое.
1 week ago 00:00:00 1
Святой Розарий с дополнениями. Крещение Господне
1 week ago 00:15:31 1
КУЗБАСС: Угольное сердце России | Самый известный угледобывающий регион. Специальный репортаж
1 week ago 00:04:02 1
Маринованные патиссоны - очень простой рецепт.
1 week ago 00:20:18 1
ЛУЧШИЕ РЕЦЕПТЫ ДОМАШНИХ ПИРОГОВ ОТ ШЕФА ИВЛЕВА
1 week ago 00:35:46 1
Эти цифры удивили даже привычных. Хватит прятаться от нас за спинами.
1 week ago 00:01:01 1
Двигатель “выпрыгивает“ из-под капота при нажатии на газ? Появились вибрации при работе на холостых?
1 week ago 00:38:15 1
Как мама скажет | Миронов, Юлиан, Пороховщиков, Караченцов, Добрынин, Ронинсон
1 week ago 00:11:30 1
ЭТИ сложные АККОРДЫ на гитаре можно сыграть ОЧЕНЬ ЛЕГКО! Я просто беру...
1 week ago 00:05:12 1
Депутаты Ахнули!🔥Генерал Шаманов в Госдуме🔥 Шокирующие подробности о бедственном положении армии!
1 week ago 01:10:27 3
Новые пандемии, Путин и будущее России: что нас ждёт в 2025 году? // профессор Осипов Алексей Ильич
1 week ago 00:29:19 1
Загадка Зеркальной Вселенной: Хиральность на Земле и в Космосе
1 week ago 00:02:25 1
Тонкие Блинчики на кефире с Дырочками. Удачный рецепт блинов на кефире в Масленицу и на каждый день
1 week ago 00:04:02 1
Я московский озорной гуляка!!!Вспомним 80-90?!!
1 week ago 00:35:20 1
23 ЯНВАРЯ твои БОЛЕЗНИ ОТСТУПЯТ и ИСЧЕЗНЕТ Даже РАК! Эта молитва ПОМОГАЕТ РАЗ В ГОДУ!
1 week ago 00:48:35 1
Чему учит курс «Основы российской государственности»?// Роман Осин. Философский камень №7
1 week ago 00:57:56 1
Как купить масло | Благоразумные и безрассудные девы | Проповедь
1 week ago 00:17:59 10
Исследование, о Котором Никто не Говорит | Связь музыки и ДНК
1 week ago 00:24:20 3
Его открытия боялись, а книги сжигали… Кто был Виктор Вейник? Шокирующая история
1 week ago 00:49:19 1
БОГ ЕСТЬ? Правда о Религии и Происхождении Человека