css коды для тильда

Коды для сайтов на платформе Тильда

Градиентные кнопки для сайтов на платформе Тильда

Данную модификацию я использую на сайтах, которые имеют определённую стилистику и заказчики хотят видеть градиентные кнопки. В тильде нет стандартной настройки, что бы сделать такую кнопку. Поэтому я использовал код, который беру с сайта michailozdemir.dev

Тут нам достаточно зайти на страницу, вставить нужные цвета, здесь же посмотреть как будет выглядеть наша кнопка. После чего копируем код и вставляем на тильде в блок другое T123. И не забудьте класс кнопке прописать, об этом я рассказываю тут

Тоже интересный эффект, который можно применить на различных сайтах. Код для глитч эффекта можно взять с этого сайта romanyu.ru Там же есть инструкция, которая поможет сделать подобный эффект на своём сайте.

У Романа много интересных модификаций для Тильды, которые можно применять на своих сайтах. Если что-то не получится, то можно всегда ему написать и попросить помощи.

Глитч в zero block на Тильде для текста

Калькулятор и квиз в zero block на Тильде

Если вам мало модификаций на сайтах, которые я написал выше, то на этом mo-ti.ru их много.
Различные модификации и код начиная от изменения эффектов кнопки и заканчивая сложными калькуляторами и квизами, которые периодически я использую в своих проектах.

Автора данного ресурса с модификациями для Тильды зовут Дмитрий. За небольшую плату можно получить доступ ко всем видео инструкциям на сайте. А если вы дружите с кодом, то и так поймёте как установить модификацию на сайт.

Источник

CSS: родственные селекторы (

При помощи родственного селектора можно выбрать все указанные элементы, идущие в коде за указанным элементом. Родственный селектор указывается символом «

Давайте на простом примере разберём работу этого селектора:

В этом примере родственный селектор h1

p сработал на все теги

, следующие за тегом

Теперь другой пример использования родственных селекторов:

Тут видно, что стиль сработает только для тегов

, которые являются потомками тега

То есть родственные элементы должны иметь общего родителя и находиться на одном уровне.

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

Pодственный селектор и псевдокласс :hover

Результат будет таким:

Рисунок 1. Родственные селекторы и :hover.

Более реальный и сложный пример

Сейчас мы рассмотрим немного сложный пример, если вы только начали изучение CSS, то вам может он показаться непонятным. Для понимания его работы нужно знать некоторые данные из CSS, которых вы, возможно, ешё не знаете. В таком случае пока просто пропустите его, вернётесь к нему позже.

Давайте рассмотрим код формы, в которой при активации поля формы появляется подсказка. Вот так она выглядит:

Рисунок 2. Поле формы с подсказкой.

Если поместить курсор в поле «Имя пользователя», то появится одна подсказка, если в поле «Пароль», то другая.

Для определения стиля появляющегося блока тут использован селектор input:focus

Сама подсказка состоит из трёх блоков div :

Источник

Эффект кнопок в стиле Material design для Tilda

Я расскажу, как сделать кнопки в стиле Material design с эффектом анимации ripple при клике. Данный эффект выглядит, как блик или полупрозрачная волна и исходит именно из того места где было произведено нажатие курсора мыши.

Данный метод достаточно прост, т.к. я заранее подготовил готовые файлы css и js для поключения к вашему проекту.

Кнопки в стиле Material design для Tilda

Эффект для кнопок в Zero block

Зайдите в редактор, создайте любой элемент, кликните по нему правой кнопкой мыши, в выпадающем меню выберите последний пункт «Add CSS Class Name» (см. изображение).

Напишите свое значение, например ripple-white, класс указывается без точки.

Данная манипуляция необходима, для того чтобы «зацепить» скрипт за необходимый нам элемент по названию его css класса и смены цвета эффекта, плюс удобно глобально стилизовать кнопки с помощью css кода. Так же это удобно, если элементы повторяются не только на странице, но и на всем сайте.

Я задал в редакторе цвет кнопок и выставил border-radius, остальное в примере ниже.

Источник

Конструктор сайтов Тильда: возможности и ограничения работы из личного опыта по сборке сайта

Для интернет-маркетолога Тильда доступный и простой в работе инструмент. Конструктор позволяет в короткие сроки собрать лендинг или довольно сложный по структуре проект, не привлекая к разработке верстальщиков и программистов, что существенно экономит ресурсы, а следовательно и деньги на разработку.

Однако в процессе сборки сайта мне удалось столкнуться с довольно большим количеством существенных ограничений. О некоторых моих наблюдениях речь пойдет в этой статье.

Исходные данные

Разработка сайта проводилась с конца августа по октябрь 2019 года. Дополнительно около недели проводили дебагинг и работу по исправлению найденных ошибок. Над проектом работал один дизайнер и два маркетолога. Общее затраченное время на реализацию составило 184 часа.

Сайт состоит из 9 коммерческих страниц и около 80 информационных страниц — новости и статьи блога. Причем контент информационных страниц был перенесен со старой версии сайта.

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

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

Zero-блок

Зеро-блок является ключевой фишкой Тильды. Найти блок можно в левом главном меню со списком стандартных блоков. Располагается он в самом низу. С его помощью можно создавать и редактировать каждый отдельный элемент.

Все что нужно для работы с таким блоков это:

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

Пользовательский код

В Тильде можно адаптировать любой JavaScript или HTML-код, добавить CSS-стили и создать абсолютно кастомные решения.

Например, на одной из коммерческих страниц мы реализовывали слайдер, который был собран полностью на зеро-блоке. При помощи уникального JS-скрипта настроили его работу.

Подключение кода происходит прямо на редактируемой странице. Просто используйте новый блок T123 и добавьте в пустую область ваш код. Блок поддерживает синтаксис HTML, JS и CSS.

К блокам и различным элементам можно подключать CSS-стили для всего проекта сразу. На уровне настроек сайта во вкладке Еще есть возможность задать пользовательский CSS.

Скрипт можно написать самостоятельно или же подыскать готовые решения на сайте mo-tilda.ru. Ресурс позволяет найти множество интересных решений, которые очень круто помогают прокачать существующий сайт. Некоторые фичи мы с командой подглядели именно там.

Адаптивность и мобильная версия

Как я писал ранее, в некоторых случаях при разработке сайта придется отойти от стандартных решений и использовать нулевые блоки.

Однако здесь приходиться столкнуться с некоторыми сложностями — каждый элемент нулевого блока придется подгонять под размеры и форматы отдельных экранов.

Безусловно это минус, так как простая задача по сборке превращается в кропотливый труд с множеством ручной работы.

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

Имейте это ввиду при использовании zero-блоков.

Сквозные блоки

Очень важный элемент при сборке практически любого сайта на Тильде — сквозные блоки или alias-блоки. Создаются и редактируются в одном месте. Использовать их можно на всех или на отдельных страницах сайта.

Блок позволяет создать элемент один раз и в одном месте, а далее уже сдублировать его содержимое на множестве других страниц, проставляя только уникальный ID-номер родительского блока.

Также есть возможность настроить сквозную шапку или подвал. Это можно сделать в стандартных настройках Тильды на уровне сайта. Перейдите во вкладку Шапка и подвал и выберите нужный блок, который будет отвечать за вывод Header и Footer.

Очень удобное решение, не нужно плодить множество одинаковых элементов по нескольку раз. Упрощает время сборки и последующее редактирование элементов.

Интеграция со сторонними сервисами

В Тильде предусмотрены богатые сторонние интеграции.

Например, можно настроить передачу лидов из форм в популярные CRM системы — Битрикс24 или AmoCRM, передавать данные в системы сквозной аналитики, например в Roistat. Существует также интеграция с сервисами почтовых рассылок или коллтрекинга.

Все это можно настроить во вкладке Формы на уровне настроек проекта.

При заполнении формы, размещенной на сайте, данные будут отправляться в подключенные сервисы. Чтобы собирать данные клиентов, добавьте на страницу блок из категории «Форма и кнопка», настройте поля и опубликуйте страницу. Справка по настройке сервисов приема данных и форм.

Поисковая оптимизация

Несколько слов хотелось бы сказать про SEO на Тильде.

Здесь все намного сложнее, чем в привычных коробочных решениях попялярных CMS. Например, нет возможности вручную настроить служебный файл robots.txt — он выглядит довольно криво, поправить его и настроить под свои нужды не получится.

Довольно странно ведут себя различные сеошные софтины. Например, при анализе сайта Screaming Frog, программа вообще не находила ни одной страницы кроме главной. А те страницы, что все таки удалось определить выводили серверную ошибку 307, вместо привычной 200.

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

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

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

Честно, я испытываю некоторые опасения по поводу ранжирования проекта в Яндекс и Google. Возможно, спустя несколько месяцев поделюсь своими наблюдениями и первыми результатами продвижения сайта, но пока писать о чем-либо очень рано.

Микроразметка Schema.org или JSON-LD

Нельзя настроить разметку для всех страниц сайта автоматически.

Например, для сайтов на WordPress можно установить плагин и задать правила разметки для всех информационных страниц.

К сожалению, в Тильде так сделать не получится.

Для того, чтобы сгенерировать код микроразметки, нужно использовать генератор. Каждую страницу придется размечать отдельно. Рекомендуемый сервис https://webcode.tools/json-ld-generator.

Перенос и бэкопирование

Сайты на Тильде хранятся в облаке, но вы можете легко экспортировать проект на ваш хостинг. Однако данная опция становится доступна только на линейке тарифов Business, от 5 сайтов и больше.

Если у вас только один сайт и вы используете бесплатный тарифный план, то увы, сделать бэкап или перенести сайт вы не сможете.

Вот еще несколько моментов связанных с бэкопированием сайта:

Техническая поддержка

Следует сказать несколько слов про работу технической поддержки.

Ответ от специалиста приходит в течение 4-6 часов, иногда немного дольше. Но в целом ответы очень развернутые и внимательные.

Добавлю, что в большинстве случаев вам возможно и не придеться писать свои вопросы в поддержку. У Тильды очень крутая справка, которая дает ответы на 90% возникающих в процессе сборке вопросов.

Резюмируем

Тильда прекрасный инструмент для создания коммерческих landing page или небольших проектов до 20-30 страниц, не требующих регулярного обновления и добавлений новых материалов — создал и забыл.

Выбрали Тильду для многостраничного сайта — готовьтесь к большому объему ручной работы. Конечно, вы обойдетесь без штатного верстальщика, но вам придется собирать множество элементов ручками. К этому нужно быть готовым.

Также дела обстоят с регулярно обновляемыми проектами — например блог компании, или новостной ресурс — здесь Тильда сильно проигрывает.

Например, в Тильде нет возможности автоматически выводить новые статьи и новости в блоке Похожие материалы или сортировать контент по категориям — таких возможностей просто нет. Каждую страничку придется связывать вручную с уже опубликованным контентом, что согласитесь, довольно не удобно, какое-то странное возвращение в начало 2000х годов.

Лучше выбрать коробочную CMS, например 1С-Битрикс или WordPress, очень упростите себе жизнь.

Для сборки нестандартных решений — Тильда точно не подойдет. Лучше подключите к работе группу программистов и выбирите подходящий фреймворк на каком-нибудь PHP или условном Ruby. Толко будет больше, уж поверьте.

Полезные ссылки

Поделюсь некоторыми полезными ссылками, которые значительно упростили мне процесс погружения в Тильду. Уверен, что помогут и вам.

Остались вопросы? Задавайте в комментариях к этому материалу!

Источник

Tilda и Zero Block | Блог Дмитрия Рыбалка

Меня зовут Дмитрий Рыбалка. Я знаю многое о Тильде и Зеро Блок, пишу статьи, веду блог, делаю аудиты сайтов, консультирую, обучаю работать в Тильде.

+1 месяц тарифа Тильда в подарок, регистрируйтесь по ссылке https://tilda.cc/?r=1582375

▪️Создаю сайты на Тильде с 2015 года
▪️Делюсь своим опытом работы в Tilda Publishing и Zero Block
▪️Выкладываю отборные полезные материалы и авторские идеи
▪️Отвечаю на все ваши вопросы
▪️Подписывайтесь!

Tilda и Zero Block | Блог Дмитрия Рыбалка запись закреплена

Как убрать нижнюю полосу прокрутки при горизонтальной прокрутке блока в мобильных устройствах без использования кода?

Вы должны знать, что в настройках блоках при выставлении значения overflow:auto и выезжающих за границы элементов появляется прокрутка блока. При этом прокрутка сопровождается полосами браузера, которая часто мешает и выбивается из общего оформления сайта. Вот именно эти полосы можно убрать в мобильной версии простым способом.
Показать полностью.

В мобильной версии полоса прокрутки занимает примерно 5 px (точно не замерял). Как оказалось, эта полоса располагается всегда сверху всех элементов, кроме кнопок.

И если разместить широкую кнопку в 1000 +- px и высокой 5-10 px в самом низу блока, то эта кнопка перекроет горизонтальную полосу прокрутки.

Вот такой лёгкий лайфхак без доработки кодом вы можете использовать в своих проектах

Ксения, добавь блок Т123 на странице с тем блоком, в котором нужно убрать горизонтальный скролл и скопируй в него этот css код:

ID блока меняешь на свой

Tilda и Zero Block | Блог Дмитрия Рыбалка запись закреплена

Презентация товара с помощью слайдера в Zero Block.

1. Загрузите в слайдер Zero Block фотографии высокого качества
2. Включите автоплей, уберите точки и стрелки
3. Поверните слайдер на 90 градусов
Показать полностью.
4. Увеличьте размер слайдера
5. Нестандартная презентация товара готова

Идея очень простая в реализации, но смотрится эффектно.

Tilda и Zero Block | Блог Дмитрия Рыбалка запись закреплена

Обновление загрузки шрифтов.

Теперь можно расширить количество начертаний шрифтов до 9.

Доступен к загрузке вариативный шрифт — это один файл шрифта, который включает в себя большое количество различных начертаний и свойств этого шрифта.
Показать полностью.

Tilda и Zero Block | Блог Дмитрия Рыбалка запись закреплена

Идея минималистичной формы в Zero Block.

Форма состоит из 3-х элементов:
Форма с белыми полями
Разделительная вертикальная линия (pointer events: none)
Показать полностью.
Подложка-шейк со скруглёнными краями, обводкой и непрозрачностью 50% при наведении на форму

Кто ещё не видел, я время от времени собираю различные идеи с их описанием на одной странице: https://dmitryrybalka.ru/other/ideas-page

Tilda и Zero Block | Блог Дмитрия Рыбалка запись закреплена

Новый блок: Галерея GL27.

На мой взгляд, если взять в сравнение все добавленные блоки за последние 6 месяцев, именно блок GL27 кажется наиболее свежим и современным.

В блоке настраивается: фото, заголовок, описание, расположение текста и галерея.
Показать полностью.

Где можно использовать этот блок? Например для быстрых новостей компании, последних работ, лучших товаров. Идей много, пробуйте!

5/5 Tilda Publishing выпускайте побольше современных блоков!

Tilda и Zero Block | Блог Дмитрия Рыбалка запись закреплена

Всем привет, друзья
У меня в мае был перегруз, накопленный за последние 1.5 года и пришлось срочно выехать отдохнуть душой, телом и головой. Одном словом перезагрузиться.

Сколько лет я уже работаю удалённо и получаю большое удовольствие от своей деятельности, при этом накопил огромный опыт в самоменджменте, правильном составлении и распределении большого списка дел, управлении своим времени, но до сих пор ещё не научился избавляться от рабочего перегруза.
Показать полностью. Всегда помогает отдых, но хочется иметь другую альтернативу, чтобы можно было на долгое время сосредоточиться на своих делах и не получить от организма красный цвет . Может у вас есть рабочие советы по избежание перегруза? Поделитесь!

В июне я «съедал лягушек», чтобы полностью сосредоточиться на своих проектах, крупных сайтах и новых заказах.

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

Пошёл дальше составлять список задач. До встречи!

Источник