Как сделать контурный шрифт в тильде
Здесь нам на помощь приходит CSS
1.Создаем блок в Tilda с HTML кодом 123
3. Идём в браузер Chrome открываем его в режиме Inspect (правой кнопкой мыши по странице и самая нижняя строчка)
4. Ищем значок на открывшейся панели с иконкой телефона. Жмём её - сайт превращается в мобильную версию
5. Далее ищем все блоки текста на нашей странице, которые выглядит меньше нужного размера шрифта. Не забываем , что есть меню, футер, header, попапы. копируем их CSS-селекторы.
Как это делается - кликаем на текст и ищем справа CSS селектор, который содержит свойство font-size. Оно должно быть не зачеркнуто - активное. Например:
6. Копируем этот селектор вместе с закрывающими скобками внутрь скобок из пункта 2 , меняем шрифт на нужный. Например на 16px и сохраняем и закрываем наш блок HTML 123.
7. Переопубликуем страничу. Чих-пых всё готов.Ставим лайк подписываемся на канал :)
Tilda и Zero Block | Блог Дмитрия Рыбалка запись закреплена
Как добавить тень к тексту в Zero Block?
1 способ — отрисовать в графическом редакторе текст, добавить тень и разместить в Зеро Блок. Минусы — этот текст не будет отображаться в поисковой выдачи и к нему нельзя применить теги H1-H3.
2 способ — открыть Зеро Блок, разместить текстовый блок и скопировать его. Скопированный текстовый блок поместить под основным текстовым блоком, залить черным цветом, сместить на 1-5 пикселей вниз и уменьшить непрозрачность до 10-50%. Минусы — поисковики будут видеть два одинаковых текстовых блока и могут пометить его как спам.
3 способ — добавить текстовый блок и заранее подготовленную тень.
Где .tn-elem__462156811519824072411 номер текстового блока. Спасибо Николай Кириллов.
Пока в Тильде нет возможности добавить к тексту тень, я советую вам подбирать фотографии, чтобы на них удобно размещался и хорошо читался текст. Это должно быть фото с чистым фоном, где основные элементы расположены по краям или однотонное изображение с крупными объектами.
Ни для кого не секрет, что шрифт — один из самых важных составляющих сайта. Именно он, зачастую, может полностью перевернуть дизайн сайта. В поиске вы сможете найти довольно много вариантов шрифтовых пар, как для кириллицы, так и для латиницы.
Давайте вместе рассмотрим всевозможные варианты работы со шрифтами внутри конструктора Тильды.
Чтобы начать работу со шрифтами, для начала нужно перейти в настройки сайта:
В открывшемся окне вы найдете вкладки библиотек шрифтов, с помощью которых можно выбрать шрифт или загрузить свой:
О всех вариантах по-порядку.
Стандартные шрифты в Тильде
Как только подобрали нужную шрифтовую пару, сохраняйте настройки, публикуйте все страницы и переходите на ваш сайт, чтоб увидеть все изменения.
Библиотеки шрифтов Adobe fonts и Google fonts
Adobe Fonts
После оплаты вы сможете выбирать шрифт из огромнейшей библиотеки Adobe.
Этапы:
Google Fonts
В отличие от Adobe Fonts эти шрифты полностью бесплатны.
В окне шрифта вы увидите следующее:
Как только вы добавляете начертание шрифта, справа появляется окно с настройками вашего выбора. Вы можете продолжить выбирать начертания. Я выбрал два и получил следующее:
Обратите внимание на подчеркнутую ссылку. Эту ссылку вы можете копировать и вставлять в Тильду, чтоб подключить шрифт.
Но давайте сначала рассмотрим вариант сложнее. Я хочу подключить второй шрифт. Для этого возвращаемся назад на страницу всех шрифтов и ищем подходящий. Я выбрал Jura для заголовков и проделал те же действия, как и для шрифта Nunito.
Теперь видим такую картину:
Копируйте подчеркнутую ссылку и возвращайтесь в настройки Тильды.
В поле CSS LINK нужно вставить скопированную ссылку.
Поле HEADING FONT FAMILY NAME — тут вы задаете шрифт для заголовков. Вставьте сюда точное название шрифта из Google fonts, в моем случае Jura.
Поле BODY TEXT FONT FAMILY NAME — — тут вы задаете шрифт для обычного текста. Вставьте сюда точное название шрифта из Google fonts, в моем случае Nunito.
Если вы загружали только один шрифт, то в оба поля вставляйте одно название.
Нажимаем сохранить изменения и публикуем все страницы сайта. На своем сайте у меня получились такие изменения шрифта заголовка и текста:
Загрузить свой шрифт в Тильду
Тут вы увидите 6 возможных начертаний, которые можно загрузить 6 файлов одного шрифта: Thin (100), Light (300), Normal (400), Medium (500), Semi-Bold (600) и Bold (700).
Дальше вас вернет на страницу настроек шрифта:
На этой странице вы увидите, сколько начертаний вы подгрузили (потом можно удалить какие-то начертания или добавить новые). Укажите в полях ниже точное название загруженного шрифта для заголовков и текста.
Сохраните изменения, опубликуйте все страницы и проверяйте изменения на сайте.
Другие настройки шрифтов
Как вы могли заметить, в Настройки сайта → Шрифты и цвета → Расширенные настройки, есть еще несколько важных полей:
Здесь вы можете задать настройки по-умолчанию для всех страниц:
- выбрать начертание шрифта для обычного текста;
- назначить шрифт для текста;
- выбрать начертание шрифта для заголовков
На этой же странице ниже вы сможете задать цвет для заголовков и текста, цвет ссылок и цвет фона для всех блоков.
Если остались еще какие-то вопросы по подключению шрифтов к Тильде, советую пересмотреть видео ниже. В нем я все детально описываю на конкретных примерах.
У меня есть шрифт в форматах otf или ttf, который компания использует в своей айдентике, и нужно загрузить его в Тильду.
Нам нужно будет решить две задачи — получить формат woff для загрузки (только такой формат принимает Тильда) и корректно загрузить свои начертания. Конвертировать шрифт в woff можно с помощью любого онлайн-конвертера (загуглите otf to woff или ttf to woff или воспользуйтесь Convertio): просто загрузите туда все свои начертания и сохраните их.
Какие начертания нужны?
← В открывшемся окне мы можем загрузить до 6 начертаний шрифта — от самого тонкого до самого жирного. Как правило, в шрифтовом наборе есть все эти начертания
Основное требуемое начертание — regular (или normal). Можно загружать не все начертания, а только несколько (или вообще одно).
Мы будем демонстрировать загрузку на примере бесплатного шрифта Golos. Этот шрифт можно скачать с Paratype сразу в нужном формате, однако в реальности часто нужного формата нет, поэтому начнем с конвертации нужных нам начертаний.
← Задайте это же название в Headline font family name (Название шрифта для заголовка) и Text font family name (Название шрифта для наборного текста). Сохраните изменения
← Проверить, все ли получилось, можно на любой из страниц сайта. Выделите текстовый блок и нажмите на А — там вы увидите, какие шрифты загружены для заголовков и наборного текста
Как быть, если вы хотите загрузить несколько шрифтов
Ответ простой — загрузите все их в 6 имеющихся начертаний. Например, мы хотим использовать для заголовков шрифт Mak, а для остального — Manrope.
← Мы загрузили во все начертания, кроме Medium, основной шрифт — Manrope. А в Medium — шрифт Mak. В дальнейшем мы будем просто устанавливать это начертание там, где нам нужен этот шрифт. При этом он не повлияет ни на какие важные элементы — кнопки, таблицы, где не всегда можно изменить начертание
Пополняемая библиотека готовых шаблонов сайтов и блоков для Tilda Publishing, Figma, соцсетей, понятных инструкций и чек-листов от практиков
CMS (Content Management System) — система управления контентом, в данном случае — сайтом (например, Тильда, Битрикс, Вордпресс).
ОКВЭД (Общероссийский классификатор видов экономической деятельности) — именно по этим кодам, которые указываются при регистрации ИП или юрлица, можно осуществлять деятельность. Коды можно добавить, но это не дело 5 минут.
Работа с компанией Своёмедиа длится уже более двух лет. За это время реализовано много мероприятий по поддержке и развитию сайта, включая глубокую и неоднократную переработку концепции и взгляда на этот ресурс — в том числе в мыслях у управленцев нашей компании.
Развитие сайта как основного ресурса медийной поддержки компании (мы работаем в достаточно сложном сектор — b2b в химической отрасли) оказывает существенную поддержку нашему бизнесу. И эту поддержку можно разделить на 2 вида — прямую и косвенную.
Общий объем таких работ за последние пару лет можно оценить в 10−15 млн рублей, около 15% от общей выручки. Это является серьезным достижением, безусловно.
Такого рода поддержку трудно оценить в прямых доходах, однако можно уверенно сказать, что она очень важна в нашем бизнесе.
В ближайших планах развития медийного ресурса Инжнирингового центра стоит увеличение доли работ, приходящих через сайт, до 30−50%. У нас есть уверенность, что в сотрудничестве с коллегами из Своёмедиа мы справимся с этой задачей.
Читайте также: