Как сделать колонки в тильде
Обновлено: 04.07.2024
Tilda — удобный конструктор сайтов, с помощью которого человек без опыта веб-разработки может создать функциональный ресурс. Пошаговое руководство поможет быстро разобраться с возможностями и особенностями платформы.
Почему стоит выбрать Tilda
Как все конструкторы, Tilda позволяет сделать сайт без специальных знаний. Интерфейс платформы интуитивно понятный. На каждом этапе работы система подсказывает пользователю следующие шаги. Готовые шаблоны и модули позволяют быстро создать красивый и функциональный ресурс.
У Tilda есть недостатки, которые будут рассмотрены ниже. Но главный из них нужно обсудить сразу.
Стоимость Tilda
Пользователям доступны три тарифных плана: Free, Personal и Business.
Возможностей бесплатного тарифа хватит для создания сайта-визитки. Пользователь получает 50 Мб дискового пространства, возможность создать один сайт и до 50 страниц. План Free предполагает доступ только к части модулей. Поэтому функциональность сайтов на бесплатном тарифе ограничена.
Доступ к конструктору сайтов стоит 6000 рублей в год. Это неоправданно дорого. Полноценный сайт на любой CMS, например, WordPress, Joomla!, Drupal, OpenCart, обойдется гораздо дешевле.
Тариф Business включает все возможности Personal. Дополнительно пользователь может создавать до пяти сайтов. Главное отличие — возможность экспортировать код и установить Tilda на свой сервер.
За подключение по тарифу Business нужно платить 1000 рублей в месяц или 12 000 рублей в год. Обратите внимание, услуги хостинг-провайдера нужно оплачивать отдельно.
Выбор тарифа зависит от формата сайта и потребностей владельца. Принять решение поможет таблица.
В этой. статье я расскажу, как сделать динамическое меню для Tilda. Чтобы добавить пункты, не надо каждый раз заходить на страницу и вставлять их руками. Поскольку единственный динамический блок - это "потоки", меню сделано на его основе, пункты будут добавляться через добавление записей в поток. Через данное меню удобно реализовывать блог, портфолио или каталог. Навигация спрятана в Popup и не занимает места на странице. Идея пришла в голову, когда читал блог Tilda, дизайн взял оттуда же.
Как сделать динамическое Popup меню в Tilda
Для начала нам нужно подключить "потоки" к нашему сайту. После чего на новой странице или в header, да хоть в footer, создать блок FD101, подключить в него нужный поток, настроить внешний вид. В примере я задал ширину 8 колонок и подключил поток с записями блога. Отступы снизу и сверху 0, чтобы убрать лишнюю прокрутку.
Далее создаем Zero block, задаем высоту 60px, добавляем логотип, стрелочку, все что вам надо, ну и самое главное - 2 кнопки, адаптируем всё это дело. Задаем кнопкам одинаковый размер. В примере высота 60px. Нижняя кнопка в цвет фона нашего меню (FD101), верхняя в цвет фона шапки (Zero block). Присваиваем верхней кнопке css класс OpenDinamicNav, нижней CloseDinamicNav .
Создаем блок popup BF503, отчищаем от контента, в настройки не пригодятся. Задаём ссылку открытия popup окна, копируем и вставляем в верхнюю кнопку в zero block.
Создайте блок T123, вставьте в него куски кода из примера (разделил на 3 части, чтобы было удобнее работать). Замените id блоков на свои. Следите за комментариями в коде, чтобы не допустить ошибок.
За последний год через мои руки прошли два десятка лендингов на Тильде. Некоторые я собирал сам, в некоторых помогал со сложными местами, за некоторыми просто наблюдал. Первые страницы выглядели скучно, я использовал стандартные блоки и боялся экспериментировать. Со временем я разобрался с тонкостями дизайна и с тем, как устроен код Тильды и как можно влиять на него.
Этот разбор поможет тем, кто работает с Тильдой, но использует только стандартные инструменты и либо боится, либо не знает, как расширять конструктор с помощью своих стилей и скриптов. Оказывается, не нужно быть разработчиком или изучать языки программирования, чтобы делать важные мелочи лучше.
Код в примерах может быть неидеальный, а объяснения — содержать технические неточности. Важно, что это не очередной урок про устройство интернета, а небольшой гайд, как я выжимаю максимум из Тильды без полноценного знания вёрстки или языков программирования.
С помощью этих простых решений я могу делать элементы, которые не соберёшь на стандартных блоках. Например, вот эта кнопка, наведите на неё мышкой (или пальцем).
Кнопка увеличивается. Так не получится сделать с помощью простых настроек блока — можно поменять цвет или тень, но не размер при наведении. Чтобы добавить этот эффект, напишем несколько строчек кода:
Тильда — гибкий инструмент и позволяет реализовать почти любую задумку. Почти — потому что иногда натыкаешься на ограничения: блокам нельзя поставить произвольную ширину, у элементов управления нельзя поменять цвет, карточки ведут себя не так, как тебе нужно.
С помощью своего кода можно менять цвета и поведение элементов, добавлять интерактивность и сложную логику. А чтобы написать простой код, вообще не нужно уметь программировать — достаточно уметь пользоваться гуглом и понимать основы вёрстки.
Если HTML и CSS вас не пугают, вы знаете, зачем нужны классы и id, то нажмите на кнопку ниже, чтобы не отвлекаться на экскурс в вёрстку. Кнопка отправит вас сразу к месту, где разберём пару примеров того, что можно сделать в Тильде, не проходя ни одного курса по программированию.
Вёрстка страницы — это просто работа с объектами, которые на ней расположены: заголовки, текст, изображения. С помощью кода мы говорим им, что они должны содержать, как выглядеть и как вести себя. Обычно за это отвечают HTML, CSS и JavaScript.
HTML — базовый язык разметки. Обычно с помощью HTML просто задают объекты на странице, их расположение и наполнение. Размечают текст на заголовки и абзацы, расставляют ссылки в нужные места, определяют положение картинок и других объектов относительно друг друга. Например, создадим какой-нибудь текст в абзаце. Абзац в HTML — это p, paragraph
JavaScript помогает делать страницу интерактивной: добавлять анимацию и эффекты, задавать правила поведения для кнопок. В примерах ниже JS мы рассматривать не будем, но принцип такой же — находим подходящее решение и используем в своих целях.
JavaScript помогает делать страницу интерактивной: делать анимацию и эффекты, задавать правила поведения для кнопок. В примерах ниже JS мы рассматривать не будем, но принцип такой же — находим подходящее решение и используем в своих целях.
HTML — базовый язык разметки. Обычно с помощью HTML просто задают объекты на странице, их расположение и наполнение. Текст в заголовки и абзацы, ссылки в нужные места текста, положение картинок и других объектов относительно друг друга. Например, нужно создать какой-то текст в абзаце. Абзац в HTML — это p, paragraph
Если вы только приступили к освоению Тильды и решили вдохновиться чужим дизайном, то будет сложно сходу определить на сайте используемый блок. А просматривать библиотеку блоков вручную очень долго, особенно если к нему применили нестандартные настройки.
В HTML коде сайтов сделанных на Tilda видно номера блоков, но они не соответствуют названиям в библиотеке Тильды. Здесь вы найдете таблицу соответствия номеров блоков в Тильде. А я покажу как посмотреть номер блока в коде сайта.
Видно номер блока Тильды в комментарии
Откроется панель средств для разработки и вы увидите исходный код. Будет подсвечен тот элемент, на который вы кликнули. Примерно в этом месте или выше вы увидите комментарий, которым отмечено начало блока. Если вдруг комментария не будет, то ищите в элементах что-то похожее на номер блока и проверяйте по таблице.
Дальше привожу таблицу соответствия кодов и номеров блоков. Можно фильтровать и искать. Когда узнали номер блока тильды, то в библиотеке тильды в строке поиска вставляйте номер блока.
Читайте также: