{"id":6504,"title":"\u0417\u043d\u0430\u043d\u0438\u044f \u0438\u043b\u0438 \u043d\u0430\u0432\u044b\u043a\u0438 \u043a\u043e\u043c\u043c\u0443\u043d\u0438\u043a\u0430\u0446\u0438\u0438 \u2014 \u0447\u0442\u043e \u0432\u0430\u0436\u043d\u0435\u0435 \u0434\u043b\u044f \u0441\u0442\u0443\u0434\u0435\u043d\u0442\u0430","url":"\/redirect?component=advertising&id=6504&url=https:\/\/vc.ru\/fsteamchallenge\/288106-studentam-predlozhili-ocenit-svoi-kompetencii-i-gibkie-navyki&placeBit=1&hash=118553100066d9bc16989880064450525097b2f22a603a7346eca248be17a7ff","isPaidAndBannersEnabled":false}

Как сделать темную тему на Tilda

Привет! Меня зовут Богдан. Я продуктовый дизайнер, который очень любит Tilda. Я часто использую Zero Block в Tilda при создании сайтов. На примере базы знаний комьюнити-бюро Compot я покажу, как сделать тёмную тему на Tilda в Zero Block.

Шаг 1 из 6

Делаем фон основных блоков бесцветным (выставляем значение background - 0).

Шаг 2 из 6

Добавим сам переключатель. Открываем Zero Block (в блоке, где будет переключатель) и добавляем в него HTML-код из левой панели. Вставляем туда код:

<div class="container"> <div class="toggle-container"> <input type="checkbox" id="themeSwitch" name="theme" /><label for="themeSwitch"></label> </div> </div>

Шаг 3 из 6

Добавьте блок T123 (HTML-код) из раздела «Другое». Вставляем этот код:

<style> @import url('https://fonts.googleapis.com/css?family=Montserrat:400,700'); :root, [data-theme="default"] { --bg: #FCFCFC; --bg-panel: #f5f5f5; --color-headings: #ff035b; --color-text: #333333; } @supports (--css: variables) { [data-theme="dark"] { --bg: #000000; --bg-panel: #1b1b1b; --color-headings: #ff035b; --color-text: #FFFFFF; } } html { height: 100%; font-family: 'Montserrat'; align-items: center; justify-items: center; } label { cursor: pointer; text-indent: -9999px; width: 52px; height: 27px; background: #b1b1b1; float: left; top: 8px; border-radius: 100px; position: relative; } label:after { content: ''; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; background: #fff; border-radius: 90px; transition: 0.3s; } input:checked + label { background: var(--color-headings); } input:checked + label:after { left: calc(100% - 5px); transform: translateX(-100%); } label:active:after { width: 45px; } html.transition, html.transition *, html.transition *:before, html.transition *:after { transition: all 750ms !important; transition-delay: 0 !important; } </style>

Расшифровка:

  • root — светлая тема;

  • support — темная;

  • --bg-panel — цвет хедера;
  • --color — цвета заголовков и основного текста.

Шаг 4 из 6

Узнаем класс элемента, у которого хотим поменять стиль на темную тему. Как узнать класс элемента, смотрите здесь.

Покажу на примере. Мы хотим, чтобы блок с основным контентом переключался на темную тему. Нам нужно узнать класс элемента.

На видео я скопировал класс элемента фона карточки — она будет черной. Вам нужно также скопировать класс текста (отдельно заголовка, отдельно основного). Запишите классы куда-нибудь и подпишите, что это.

Шаг 5 из 6

Добавьте блок T123 (HTML-код) из раздела «Другое» и вставьте код:

<style> body { background-color: var(--bg); } #rec168746003 .tn-elem[data-elem-id="1583581372881"] .tn-atom { background-color: var(--bg-panel); } .t-feed__col-grid__content.t-feed__col-grid__content_paddingtop { background-color: var(--bg-panel); } grid-template-areas: { "title switch" "content content"; } input[type=checkbox]{ height: 0; width: 0; visibility: hidden; } </style>

Расшифровка:

  • rec168746003 .tn-elem[data-elem-id="1583581372881"] .tn-atom - это класс элемента. Замените на свой.

  • var(--bg-panel); — это цвет, на который будем менять. Возьмите из шага 3.

Шаг 6 из 6

Добавьте блок T123 (HTML-код) из раздела «Другое» и вставьте код:

<script> (function() { // Theme switch var themeSwitch = document.getElementById('themeSwitch'); if(themeSwitch) { initTheme(); // if user has already selected a specific theme -> apply it themeSwitch.addEventListener('change', function(event){ resetTheme(); // update color theme }); function initTheme() { var darkThemeSelected = (localStorage.getItem('themeSwitch') !== null && localStorage.getItem('themeSwitch') === 'dark'); // update checkbox themeSwitch.checked = darkThemeSelected; // update body data-theme attribute darkThemeSelected ? document.body.setAttribute('data-theme', 'dark') : document.body.removeAttribute('data-theme'); }; function resetTheme() { if(themeSwitch.checked) { // dark theme has been selected document.body.setAttribute('data-theme', 'dark'); localStorage.setItem('themeSwitch', 'dark'); } else { document.body.removeAttribute('data-theme'); localStorage.removeItem('themeSwitch'); } }; } }()); </script>

Опубликуйте страницу и все готово! Если что-то не получилось или есть вопросы пишите в Telegram @al_bogdan.

{ "author_name": "Богдан Алексеев", "author_type": "self", "tags": ["\u0442\u0435\u043c\u043d\u0430\u044f\u0442\u0435\u043c\u0430","tilda","rec168746003","ffffff","fff","ff035b","fcfcfc","f5f5f5","b1b1b1","333333","1b1b1b","000000"], "comments": 32, "likes": 22, "favorites": 137, "is_advertisement": false, "subsite_label": "design", "id": 112476, "is_wide": true, "is_ugc": true, "date": "Sun, 15 Mar 2020 14:10:27 +0300", "is_special": false }
0
32 комментария
Популярные
По порядку
Написать комментарий...

Насколько актуально в 2020 году верстать серьёзные проекты на Tilda? 

–3

Я вот дизайнер, который на тильде сделал сайт, зарабатывающий реальные деньги (бизнес не связан с дизайном). Мне не приходится по каждому чиху бежать к верстальщикам и прогерам что-то подправить и платить за это временем и деньгами. Это можно серьезным проектом назвать?

16

Серьезные в значении большие, масштабируемые

0

Вы же не будете для выкапывания картошки использовать экскаватор? Больших и масштабируемых проектов не так уже и много, нежели простых сайтов или лендингов. У меня на проекте около 60 страниц (каталог). Полет нормальный. Сайт отлично индексируется и вносить изменения очень легко, я очень доволен платформой

11

а на чем верстают серьезные проекты в 2020 и как определить серьезность? вордпресс подойдет?

4

Серьезные проекты верстают руками и сразу думают об оптимизации всех процессов на странице. А тильда удобная штука, но из-за огромного количества стилей и анимаций, подтормаживается.

2

У сайта моей студии почти 80 страниц на Тильда. Супербыстрые правки. Супербыстрая верстка. Суперудобно. Оборот студии - много Лямов в год. Серьёзный проект?

2

Расскажите пожалуйста, какие проекты на Ваш взгляд считаются серьёзными и почему  Тильда не подходит для их реализации?

0

Форум? Чат? Соц сеть? Биржа? Каталог товаров? ИМХО тильда для лендингов

0

Я спрашивал не Вас, но благодарю за ответ. Согласен, что для создания социальной сети и биржи Тильда вряд ли подходит. А вот для каталога товаров и, например, интернет-магазина вполне годится. Равно как и для создания многостраничного сайта компании.

0

Вопрос даже не в серьезности, а в функционале под ряд задачи Тильда очень ограничена в плане изменений настроек внутри себя и работы с данными. Примеры:
1. Если есть потребность переодически менять определенные платежные настройки - для этого нет API(как и для других настроек).
2. Нет возможности отдельно получить список "Заявок из формы" по API. Только если "копить" у себя на WebHook.
3. Это скорее баг: невозможно качественно отслеживать незавершенные заявки программно. Можно поставить галочку в настройках аля "Получать информацию об любых платежах", после заявка об начале платежа пользователем поступит на WebHook и всё(!). Если он даже оплатит - отдельное оповещение не придёт. И нет метода типа "getLead" чтобы проверить была ли оплата.

0

Круто, пусть Тильда введёт это сама)

2

Тильда вообще нормальный конструктор или есть лучше ? Пытаюсь сейчас сайт на нем делать. Но уже проблемка, хедер не перекрашивается, что только не делал.

0

Хороший конструктор, особенно для лендосов одностраничных

3

Инструмент огонь! Вы пытаетесь темную тему сделать и хедер не перекрашивается при переключении? 

0

попробуйте посмотреть на редактор Nicepage.  Быстрый, делает чистую верстуку, поддерживает создание совеменных дизайнов.  

0

На все 100% актуально. А почему-бы и нет? Я могу понять, что high-load проекты не делаются на тильде, когда нужна субд и тд, и тп.

1

Хоспади! Да ты программист!!! ред.

1

А есть ссылка на реализованный пример?

0

круто сделано, но ведь там чёртово ограничение на 500 страниц. Как обходить будете по количеству контента?

0

Там ограничение только на страницы. Ограничений по контенту нет. Только техническое на 5000 постов

0

Поехал немного сайт

0

Спасибо! Какой девайс и браузер?

0

И лично от себя добавлю, что возможность скролить левое меню немного раздражает, хочется убрать этот ползунок вообще, он как-то не в тему, а в остальном очень круто, вы молодец! ред.

1

у меня тоже
Chrome Версия 80.0.3987.132
дисплей FullHD

у блоков #rec168582198 .t396__artboard появилось свойство overflow-y: scroll? если его убрать, то норм становится

0

Спасибо за фидбек! Да, там в боковом меню будут еще разделы, поэтому там нужен скролл. Надо поработать над адаптивностью, так как там позиционирование в пикселях стоит, а по-хорошему надо в процентах.

0

Хром, версия 80.0.3987.132  

0

Хром, версия 80.0.3987.132

0

Крутяк, спасибо за статью!

0

Спасибо за статью! Присматриваюсь к тильде.

Заметил одну вещь, в FireFox на Win 10 едет переключатель. Фиксится скрытием инпута через display: none.

0

Спасибо! Поправлю)

0
Читать все 32 комментария
SEO для монобрендового интернет-магазина — бесполезная затея? Кейс с пятикратным ростом трафика

Рассказываем, как продвигали интернет-магазин с небольшим ассортиментом товаров, которые покупают только летом.

Производитель зенитных ракет выпустит гражданский электрогазомобиль E-NEVA Статьи редакции

Буква Е — сокращение от electric, а NEVA — в честь реки в Петербурге.

«Ожидали 100 тысяч просмотров, а вышло в восемь раз больше»: как и зачем крупные бренды снимают ролики для TikTok

Истории «Ситилинка», «Тинькофф», «Спортмастера» и «КиноПоиска».

Усиление защиты неквалифицированных инвесторов

11 июня 2021 года вступил в силу Федеральный закон, усиливший защиту прав физических лиц, не являющихся квалифицированными инвесторами.

Бывший университетский журнал обошёл Forbes по выручке: как Harvard Business Review стал большим медиа Статьи редакции

The Generalist разбирает бизнес с «вечными темами», на который приходится треть всей выручки Гарвардской бизнес школы.

В HPB работает 450 человек, в то время как NYT и The Economist нанимают по 4700 и 2500 сотрудников соответственно The Generalist
Уже 6000 самозанятых на AliExpress: маркетплейс выделил самые перспективные для них направления торговли
«Азбука вкуса» впервые за 15 лет обновит логотип и шрифт Статьи редакции

Изменились и цвета — компания выбрала другие оттенки зелёного.

«Азбука вкуса»
«Альфа-Капитал» освоил греблю — и проверил на прочность командный дух

Участники корпоративной секции тренировались все лето: сначала на тренажерах, потом на открытой воде. Большая финальная гонка расставила точки над i.

Вклад «Свободное управление»: управляйте деньгами свободно

Ставки по вкладам в банках опять начинают расти вслед за повышением ключевой ставки Банка России. У банка «Открытие» есть вклад, который позволяет получить более высокую доходность, чем большинство подобных вкладов на российском банковском рынке. Кроме того, он дает возможность свободно управлять деньгами. Не случайно этот вклад так и называется…

AliExpress Russia Overview: 9 главных трендов электронной коммерции

8 сентября «AliExpress Россия» собрал топов электронной коммерции и инвестиционных аналитиков на конференции AERO. Собрали самое важное из пятичасового обсуждения.

null