Как сделать темную тему на Tilda
Привет! Меня зовут Богдан. Я продуктовый дизайнер, который очень любит Tilda. Я часто использую Zero Block в Tilda при создании сайтов. На примере базы знаний комьюнити-бюро Compot я покажу, как сделать тёмную тему на Tilda в Zero Block.
Шаг 1 из 6
Делаем фон основных блоков бесцветным (выставляем значение background - 0).
Шаг 2 из 6
Добавим сам переключатель. Открываем Zero Block (в блоке, где будет переключатель) и добавляем в него HTML-код из левой панели. Вставляем туда код:
Шаг 3 из 6
Добавьте блок T123 (HTML-код) из раздела «Другое». Вставляем этот код:
Расшифровка:
root — светлая тема;
support — темная;
- --bg-panel — цвет хедера;
- --color — цвета заголовков и основного текста.
Шаг 4 из 6
Узнаем класс элемента, у которого хотим поменять стиль на темную тему. Как узнать класс элемента, смотрите здесь.
Покажу на примере. Мы хотим, чтобы блок с основным контентом переключался на темную тему. Нам нужно узнать класс элемента.
На видео я скопировал класс элемента фона карточки — она будет черной. Вам нужно также скопировать класс текста (отдельно заголовка, отдельно основного). Запишите классы куда-нибудь и подпишите, что это.
Шаг 5 из 6
Добавьте блок T123 (HTML-код) из раздела «Другое» и вставьте код:
Расшифровка:
rec168746003 .tn-elem[data-elem-id="1583581372881"] .tn-atom - это класс элемента. Замените на свой.
- var(--bg-panel); — это цвет, на который будем менять. Возьмите из шага 3.
Шаг 6 из 6
Добавьте блок T123 (HTML-код) из раздела «Другое» и вставьте код:
Опубликуйте страницу и все готово! Если что-то не получилось или есть вопросы пишите в Telegram @al_bogdan.
Лучшая благодарность – подпишитесь на мой телеграм-канал Design Fintech. Подобные штуки буду публиковать там.
Насколько актуально в 2020 году верстать серьёзные проекты на Tilda?
Я вот дизайнер, который на тильде сделал сайт, зарабатывающий реальные деньги (бизнес не связан с дизайном). Мне не приходится по каждому чиху бежать к верстальщикам и прогерам что-то подправить и платить за это временем и деньгами. Это можно серьезным проектом назвать?
Серьезные в значении большие, масштабируемые
Вы же не будете для выкапывания картошки использовать экскаватор? Больших и масштабируемых проектов не так уже и много, нежели простых сайтов или лендингов. У меня на проекте около 60 страниц (каталог). Полет нормальный. Сайт отлично индексируется и вносить изменения очень легко, я очень доволен платформой
а на чем верстают серьезные проекты в 2020 и как определить серьезность? вордпресс подойдет?
Серьезные проекты верстают руками и сразу думают об оптимизации всех процессов на странице. А тильда удобная штука, но из-за огромного количества стилей и анимаций, подтормаживается.
У сайта моей студии почти 80 страниц на Тильда. Супербыстрые правки. Супербыстрая верстка. Суперудобно. Оборот студии - много Лямов в год. Серьёзный проект?
Расскажите пожалуйста, какие проекты на Ваш взгляд считаются серьёзными и почему Тильда не подходит для их реализации?
Форум? Чат? Соц сеть? Биржа? Каталог товаров? ИМХО тильда для лендингов
Я спрашивал не Вас, но благодарю за ответ. Согласен, что для создания социальной сети и биржи Тильда вряд ли подходит. А вот для каталога товаров и, например, интернет-магазина вполне годится. Равно как и для создания многостраничного сайта компании.
Вопрос даже не в серьезности, а в функционале под ряд задачи Тильда очень ограничена в плане изменений настроек внутри себя и работы с данными. Примеры:
1. Если есть потребность переодически менять определенные платежные настройки - для этого нет API(как и для других настроек).
2. Нет возможности отдельно получить список "Заявок из формы" по API. Только если "копить" у себя на WebHook.
3. Это скорее баг: невозможно качественно отслеживать незавершенные заявки программно. Можно поставить галочку в настройках аля "Получать информацию об любых платежах", после заявка об начале платежа пользователем поступит на WebHook и всё(!). Если он даже оплатит - отдельное оповещение не придёт. И нет метода типа "getLead" чтобы проверить была ли оплата.
Круто, пусть Тильда введёт это сама)
Тильда вообще нормальный конструктор или есть лучше ? Пытаюсь сейчас сайт на нем делать. Но уже проблемка, хедер не перекрашивается, что только не делал.
Хороший конструктор, особенно для лендосов одностраничных
Инструмент огонь! Вы пытаетесь темную тему сделать и хедер не перекрашивается при переключении?
попробуйте посмотреть на редактор Nicepage. Быстрый, делает чистую верстуку, поддерживает создание совеменных дизайнов.
На все 100% актуально. А почему-бы и нет? Я могу понять, что high-load проекты не делаются на тильде, когда нужна субд и тд, и тп.
Хоспади! Да ты программист!!!
А есть ссылка на реализованный пример?
https://compot.me/knowledgebase/metodology
Комментарий недоступен
Там ограничение только на страницы. Ограничений по контенту нет. Только техническое на 5000 постов
Поехал немного сайт
Спасибо! Какой девайс и браузер?
И лично от себя добавлю, что возможность скролить левое меню немного раздражает, хочется убрать этот ползунок вообще, он как-то не в тему, а в остальном очень круто, вы молодец!
у меня тоже
Chrome Версия 80.0.3987.132
дисплей FullHD
у блоков #rec168582198 .t396__artboard появилось свойство overflow-y: scroll? если его убрать, то норм становится
Спасибо за фидбек! Да, там в боковом меню будут еще разделы, поэтому там нужен скролл. Надо поработать над адаптивностью, так как там позиционирование в пикселях стоит, а по-хорошему надо в процентах.
Хром, версия 80.0.3987.132
Хром, версия 80.0.3987.132
Крутяк, спасибо за статью!
Спасибо за статью! Присматриваюсь к тильде.
Заметил одну вещь, в FireFox на Win 10 едет переключатель. Фиксится скрытием инпута через display: none.
Спасибо! Поправлю)
К сожалению данный вариант работает, но некорректно. Если к примеру вы возьмете блог новостей, и добавите к нему "Смотрите также" то при клике на новость, откроеться попап, но он будет по дефолту белый даже если вы до этого переключили темную тему. Или к примеру у вас магазин и с низу список рекомендованных товаров, также. Суть что если вы переходите с попапа в попап тема не сохраняется.