Создание сайтов на Тильде https://kodea.ru ru Тильда - конструктор сайтов. Введение https://kodea.ru/tpost/t3yl7d3d21-tilda-konstruktor-saitov-vvedenie https://kodea.ru/tpost/t3yl7d3d21-tilda-konstruktor-saitov-vvedenie?amp=true Sat, 17 Apr 2021 09:51:00 +0300 Создание сайтов на Тильде Обзор Тильды Что такое конструктор сайтов? Когда его можно, а когда нельзя применять? Что такое Тильда? Возможности конструкторов сайтов в целом и, в частности, Тильды.

Тильда - конструктор сайтов. Введение

Что такое конструкторы сайтов?

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

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

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

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

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

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

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

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

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

Также Вам доступно подключение платежных систем, CRM систем, форм приема данных, которые Вы можете интегрировать как с google-таблицами, так и с различными мессенджерами, например, Телеграм и др. Вы можете получать заявки как на e-mail, так и во встроенную в Тильду CRM-систему.

Итак, что же такое Тильда?

Тильда - это один из самых популярных в России конструкторов сайтов. На основе него сейчас создается более 50% всех посадочных страниц для рекламы в Рунете. Это очень много.

Чем же так хороша Тильда?

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

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

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

При создании сайтов на Тильде Вам доступно большое количество шаблонов по различным тематикам. Вы можете сделать сайт для ресторана, СПА-салона, для школы, для чего угодно. Для каждой тематики найдется 1, 2, 3 и более шаблонов, которые содержат в себе базовую информацию, какие-то подходящие тематические картинки. Они изначально оформлены какими-то цветами, шрифтами и т.д. При этом Вы можете не ограничиваться базовым набором шаблонов и создать свой.

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

Для этого нужно зарегистрироваться в Тильде.
После чего создать страничку и наполнить ее контентом.

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

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

Не так давно в Тильде появился так называемый ZERO блок, который позволяет воплощать в жизнь самые смелые фантазии дизайнера.

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

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

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

Итак, мы с Вами разобрали:

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

]]> Блоки Тильды https://kodea.ru/tpost/o822pomg41-bloki-tildi https://kodea.ru/tpost/o822pomg41-bloki-tildi?amp=true Sun, 18 Apr 2021 09:51:00 +0300 Создание сайтов на Тильде Обзор Тильды Блоки Тильды строятся на основе 12-колоночной сетки, по которой располагаются элементы сайта, такие как картинки, заголовки, текстовые блоки и кнопки. Блок настроек позволяет контролировать внешний вид всего информационного блока.

Блоки Тильды

Интерфейс Тильды состоит из двух частей:

Редактирование контента.
Настройки блоков.

Блоки Тильды строятся на основе 12-колоночной сетки, по которой располагаются элементы сайта, такие как картинки, заголовки, текстовые блоки и кнопки.

Блок настроек позволяет контролировать внешний вид всего информационного блока.

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

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

Для большинства блоков доступен выбор ширины этого блока. Вы можете выбрать ширину как 12 колонок, так и меньше, кроме того, можно использовать всю ширину экрана, 100%.

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

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

В Тильде доступны порядка 500 готовых блоков, которые разбиты на различные категории.

Первая категория - это обложки. С обложек начинается большинство сайтов. Она может включить в себя фоновое изображение, видео, заголовок, подзаголовок, описание, кнопки и стрелку.

Некоторые обложки обладают функционалом, например, формой записи, слайдером или таймером.

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

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

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

Следующая категория блоков Тильды - это "Изображение". Изображения на сайте играют важную роль, так как создают настроение сайта и формируют его образ. Можно использовать как обычное изображение, так и полноэкранное. Есть различные вариации наложения текста на изображение.

В Тильде доступен большой выбор галерей. Это может быть галерея-слайдер, которая листается слева направо и наоборот, два или три изображения рядом, различные комбинации из изображений, любое количество изображений в одну строку, последовательность слайдов или видео. То есть Вы можете сделать так, что изображения и/или видео будут менять друг друга по-очереди. Можно сделать полноэкранную комбинацию из изображений, всплывающую галерею, которая будет раскрываться по клику на кнопку или на другое изображение. Также имеется полноэкранный слайдер и различные галереи-сетки.

Блок типа "Цитата" поможет выделить Вам цитату, также заголовок или любую важную мысль Вашего сайта.

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

Блок колонок позволит Вам структурировать информацию по вертикальным колонкам. Это могут быть две колонки, две колонки с заголовком, три, четыре, а также блоки с изображением и колонкой текста. Некоторые блоки являются полноэкранными. Также доступен слайдер с текстом и изображением. Кроме того, Вы найдете здесь таблицу.

Для визуального структурирования информации Вы может применять также блоки категории "Разделители". Это могут быть линии, черточки, различные иконки, цифры. Также есть интересные блоки, которые меняют цвет текста и фона по мере скроллинга сайта. И блоки, которые разделяют сайт фигурными границами.

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

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

Блок "Плитка и ссылки" помогает Вам структурировать информацию на одной странице, а также показывать ее при наведении на какую-нибудь картинку. Доступны различные варианты. Здесь Вы можете анонсировать какие-то свои продукты, делать переходы на другие страницы, разбивать информацию на колонки.

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

Блок "Видео" позволяет Вам вставлять на сайт видео с Youtube и Vimeo. Это может быть одно видео, либо кнопка, которая откроет видео во всплывающем окне. Также Вы можете вставлять любое HTML5 видео путем указания ссылки на него. При этом видео Вам придется заливать на отдельный хостинг. Некоторые видео могут располагаться в две колонки. Также Вам доступна возможность расположения теста и видео рядом, видео во всплывающем окне и видео на обложке сайта. Недавно в Тильде появилась возможность размещения на сайте Youtube-трансляции с комментариями.

Одним из часто используемых элементов на сайте являются кнопки. В Тильде доступен большой выбор кнопок и различных форм. Это могут быть просто кнопки, блок из двух или трех кнопок, формы подписки, формы приема данных как горизонтальные так и вертикальные, блок с анонсом и кнопкой. Также в Тильде имеется выбор из нескольких всплывающих форм. Это может быть форма подписки, форма с большим количеством полей, например, анкета или форма регистрации, или просто всплывающая информация с изображениями, текстом и кнопками "Поделиться" в социальные сети. Кроме того, есть возможность интегрировать формы с сервиса Typeform и зафиксировать ссылку на форму в верхнем углу. Также есть интересный блок, который позволяет скрывать часть контента на сайте до нажатия кнопки. После нажатия на кнопку текст не изменится и блок раскроется. Если Вы на сайте размещаете ссылки на мобильные приложения, в Тильде есть для этого специальный блок с ссылками. Если Вам требуется сделать ссылку на скачиваемый файл, Вы можете также использовать специальные кнопки, в том числе с указанием формата файла. В Тильде также доступны кнопки для быстрой связи пользователей сайта с Вами. На компьютере эти кнопки вызывают специальные формы, например, форму для заказа обратного звонка или форму сообщения, а на мобильном телефоне они автоматически запускают звонок на Ваш номер. В Тильде есть возможность также реализовать различные голосования. Это могут быть пошаговые формы или простой тест.

Также на Тильде доступен блок приема платежей через различные платежные системы.
Если Вы на Тильде хотите реализовать Интернет-магазин, Вам поможет блок "Интернет-магазин". В нем доступны корзина, прием платежей, различные вариации каталога и отдельных товаров, например, блок с изображениями или блок одного товара с кнопкой. В каждом из блоков Вы можете указывать старую и новую цены, какие-то акционные лейблы, несколько изображений и информацию о товаре. Есть также блоки товаров во всплывающем окне.

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

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

Если Вы делаете сайт для какого-либо мероприятия или у Вас есть спортивный центр, Вы можете добавить на сайт расписание. Оно также доступно в нескольких видах.

Чтобы показать на сайте различные этапы производства или оказания услуги, Вы можете использовать блок "Этапы". Он позволяет добавлять Вам несколько шагов для достижения цели. Если Вы используете больше четырех этапов, то лучше использовать вертикальные блоки этапов, если до четырех - то горизонтальные. Также Вы можете использовать иконки, цифры или просто буллеты.

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

Блоки категории "Услуги" позволит рассказать Вам, чем занимается компания. Это могут быть тексты с заголовками и изображениями, тексты с иконками, доступные в различных видах, а также раскрывающиеся блоки, которые показывают информацию при наведении на них.

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

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

Чтобы показать список партнеров или клиентов компании, Вы можете использовать блоки категории "Партнеры". Это может быть список иконок, к каждой из которых Вы можете добавить ссылку на сайт партнера или ссылку на страницу своего сайта, а также Вы можете использовать слайдеры из нескольких блоков и вертикальные списки.

Также Вам доступны блоки категории "Другое", которые помогут Вам реализовать различные дополнительные возможности Тильды, которые позволяют сделать сайт более живым, интересным и более функциональным.
Например, блок "html" позволит Вам добавить на сайт любой внешний виджет. При этом Вы его можете использовать как непосредственно на странице, так и во всплывающем окне.
Блок "Якорная ссылка" позволит Вам сделать якорные ссылки внутри сайта.
Блок "Плавный скролл" позволяет применить красивый эффект плавного скролла до нужного места на сайте.
В любом месте Вы можете также вставить карту Google или Яндекс, добавить на ссылка всплывающие подсказки, например, когда Вам нужно пояснить какое-то слово. Популярным сейчас эффектом является ползунок, показывающий процесс скроллинга страницы, меняющий свои размеры в зависимости от скроллинга.
Также Вы можете показать эффект загрузки страницы.
Вы можете создавать эффект печатной машинки.
Также есть возможность установить фиксированный фон.
Также Вам доступны блоки с различными триггерами, например, поп-ап, появляющийся при закрытии вкладки сайта, или появляющийся через некоторое время после загрузки сайта.
Имеются различные блоки для уведомления пользователей сайта о сборе персональных данных и куки, предупреждений о возрастном ограничении, а также переадресовать страницу на другую ссылку.
Ближе к Новому году можно использовать блок, который добавит снег на Ваш сайт.
Alias блок является очень важным блоком, потому что он позволяет использовать один и тот же блок в разных места одной страницы или на разных страницах без необходимости дублировать этот блок вновь и вновь. В таком случае информацию этого блока можно менять лишь в одном месте, в остальных местах информация изменится автоматически. Также доступны различные виджеты. Можно добавить поиск по сайту, в том числе через виджет Google.

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

В этой статье:

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

Таким образом, в Тильде содержится большое количество различных видов блоков, скомбинировав которые, Вы можете создать сайт любой сложности.]]> Контент сайта на Тильде https://kodea.ru/tpost/9ohglx53u1-kontent-saita-na-tilde https://kodea.ru/tpost/9ohglx53u1-kontent-saita-na-tilde?amp=true Tue, 20 Apr 2021 09:52:00 +0300 Создание сайтов на Тильде Обзор Тильды В Тильде доступно два подхода к редактированию контента: 1. Редактирование через блок "Контент"; 2. Визуальное редактирование.

Контент сайта на Тильде

Контент - это содержимое Вашего сайта: текст, картинки, видео, ссылки, кнопки и т.д., то есть все то, что видит на сайте пользователь.

В Тильде доступно два подхода к редактированию контента:

редактирование через блок "Контент"
визуальное редактирование.

Редактирование через блок Контент

После добавления на сайт например текстового блока, при наведении на этот блок мыши в верхнем левом углу появится ссылка на редактирование контента:

После нажатия на эту кнопку попадаем в окно редактирования контента блока с помощью простого текстового редактора:

Здесь мы можем:

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

Визуальное редактирование контента в Тильде

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

И здесь мы аналогично можем редактировать контент блока, не заходя в блок Контент.

Помимо редактирования текстовых блоков, мы можем менять содержимое и других типов блоков. Например, создадим блок Преимуществ:

Здесь блок Контент выглядит немного иначе, чем в предыдущем примере, так как содержит в себе несколько элементов, каждый из которых также включает в себя такие элементы как заголовок, иконка и текст:

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

В шапке блока мы можем написать заголовок и описание всего блока:

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

Для изображения можно написать альтернативный текс для SEO целей, нажав на три маленькие точки напротив изображения:

В качестве иконки можно вставить иконку, имеющуюся в библиотеке тильды, нажав на лупу напротив изображения карточки:

В Тильде доступна библиотека различных изображений и иконок:

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

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

Итак, в данной статье мы рассмотрели 2 основных способа редактирования контента сайтов в Тильде.]]> Настройки блоков Тильды https://kodea.ru/tpost/4jhyk6lt51-nastroiki-blokov-tildi https://kodea.ru/tpost/4jhyk6lt51-nastroiki-blokov-tildi?amp=true Wed, 21 Apr 2021 09:52:00 +0300 Создание сайтов на Тильде Обзор Тильды Подробная инструкция о том, как работать с настройками внешнего вида блоков Тильды при создании сайтов.

Настройки блоков Тильды

Как настроить внешний вид блока Тильды?

Создадим какой-нибудь блок, например, текстовый.
Итак, у нас есть текст, выполненный черным цветом, расположенный посередине экрана:

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

Для каждого блока в настройках доступны:

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

Подробнее о настройках блока в сайтах на Тильде

Как настроить ширину блока в сайте на Тильда?

Напомним, что в Тильде для построения сайта используется 12-колоночная сетка.
Чтобы настроить ширину блока, нам необходимо указать количество колонок, которое будет занимать блок - от 1 до 12 колонок:

Изменив ширину блока, например, на 8 колонок, необходимо настроить отступ слева у этого блока. Так как блоком мы заняли 8 колонок, свободными у нас остаются 4 колонки. Если мы хотим, чтобы блок отображался по центру, тогда для отступа слева нужно задать 2 колонки (для отступа справа также останется 2 колонки: 4-2=2).

Выравнивание текстового содержимого блока в Тильде. Настройки типографики

Выровнять содержимое блока в Тильде можно:

по левому краю,
по центру,
по правому краю.

Настройки текста в Тильде

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

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

Настройка анимации элементов блоков в Тильде

В Тильде можно настроить анимацию появления элементов сайта при его загрузке и скроллинге. Доступны следующие стандартные виды анимации:

прозрачность,
прозрачность (снизу),
прозрачность (сверху),
прозрачность (справа),
прозрачность (увеличение).

Как задать отступы снизу и сверху блока Тильды

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

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

Как настроить цвет фона для блока Тильды

Для того, чтобы указать цвет фона для блока Тильды, необходимо кликнуть мышью в соответствующее поле, после чего появится встроенная в Тильду палитра цветов, в которой Вы можете подобрать необходимый цвет. Либо напечатать в это поле код в формате hex заранее подготовленного цвета (например, #ff00ff). Такие цвета легко найти, воспользовавшись, например, поиском Яндекс или Гугл, также в макете сайта в Фотошопе, Фигме или другом графическом приложении, кроме того, цвет можно определить с помощью различных специализированных расширений для браузеров.

Как включить или отключить анимацию появления блоков Тильды

Для управления анимацией появления блоков сайта на Тильде в настройках предусмотрен переключатель - чекбокс:

Диапазон видимости блоков Тильды на различных устройствах

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

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

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

Спасибо за внимание!]]> 1. Создание сайта на Тильде. Настройки сайта https://kodea.ru/tpost/d8oljnpgd1-1-sozdanie-saita-na-tilde-nastroiki-sait https://kodea.ru/tpost/d8oljnpgd1-1-sozdanie-saita-na-tilde-nastroiki-sait?amp=true Thu, 22 Apr 2021 21:00:00 +0300 Создание сайтов на Тильде Быстрый старт Описание процесса создания сайта на Тильде с нуля (быстрый старт). Пошаговая инструкция с описанием и скриншотами. Субдомен, настройка шрифтов. Создание страницы.

1. Создание сайта на Тильде. Настройки сайта

Как создать сайт на Тильде с нуля (быстрый старт)

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

В самом начале у Вас не будет ни одного сайта.
Поэтому нажимаем на кнопку "Создать сайт".
Указываете желаемое название и создаете новый сайт.

После этого открываем "Настройки сайта".

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

Сохраним изменения.

Вернемся в настройки сайта.

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

Итак, в настройках сайта мы можем выбрать шрифт из предустановленных в Тильде. Выбор их небольшой. Но шрифты можно добавлять в расширенных настройках (об этом далее).

В данных настройках мы можем также указать размер и насыщенность шрифта, цвет текста, цвет ссылок, основной фон сайта.

Рассмотрим Расширенные настройки:

Как загрузить дополнительные шрифты в Тильде?

После нажатия на кнопку перед нами появится окно с четырьмя вкладками.
Здесь Вы сможете указать отдельный шрифт для заголовков, отдельный - для основного текста сайта.
Во вкладке Basic Fonts к настройке доступен базовый набор шрифтов Тильды.

Во вкладке Adobe Fonts Вы сможете настроить шрифты для сайта Тильды из библиотеки шрифтов сервиса Adobe, указав в соответствующей строке Typekit ID:

Во вкладке Google Fonts нам доступны для настройки шрифты из одноименной библиотеки шрифтов от Google:

Если Вам недостаточно шрифтов из предложенных библиотек, то Вы можете обратиться к четвертой вкладке Your Own Font, где сможете загрузить в Тильду свой собственный шрифт, найденный в просторах Интернета. Необходимо использовать формат шрифта WOFF. Кроме того, Вы можете указать ссылку на файл CSS с прописанными стилями, расположенный на Вашем другом сервере:

Итак, со шрифтами разобрались, настроили.

Как создать новую страницу сайта в Тильде?

Создадим новую страницу нашего сайта:

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

Выберем пустую страницу. Получим:

У каждой страницы должны быть название, ссылка, бейджик и описание.
Переходим в Настройки страницы:

На вкладке Главная укажем для нашей страницы:
- заголовок - это наш Title,
- описание - это Description,
- ссылку - это адрес страницы в Интернете.

На вкладке Бейджик загрузим изображение для нашей страницы, которое будет выводиться, например, при описании ссылки в социальных сетях:

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

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

Спасибо, что дочитали до конца ;)]]> 3. Как в Тильде настроить шапку и подвал сайта https://kodea.ru/tpost/uhx8gtu671-3-kak-v-tilde-nastroit-shapku-i-podval-s https://kodea.ru/tpost/uhx8gtu671-3-kak-v-tilde-nastroit-shapku-i-podval-s?amp=true Sat, 24 Apr 2021 21:00:00 +0300 Создание сайтов на Тильде Быстрый старт Шапка и подвал сайта - это те блоки, которые располагаются сверху и снизу на всех страницах сайта. В этих блоках Вы можете размещать, например, меню, контактную информацию, различные всплывающие формы, блоки аналитики и т.д.

3. Как в Тильде настроить шапку и подвал сайта

Настраиваем шапку (header) и подвал (footer) сайта в Тильде

Шапка и подвал сайта - это те блоки, которые располагаются сверху и снизу на всех страницах сайта.

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

Создадим пустую страницу:

Добавим в ней блок меню:

Получим:

В настройках страницы укажем название "Меню" и в ссылке напишем - header. Сохраним изменения:

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

Перейдя по полученной ссылке, мы попадем на страницу с меню:

Страница:

Аналогично создадим еще одну новую страницу. Это будет Главная страница сайта. Разместим на ней пока блок с Обложкой:

У нас есть две страницы - Главная и Меню.
Зайдем в настройки сайта:

Переходим в раздел "Шапка и подвал" и выберем наше меню из выпадающего списка в качестве шапки сайта:

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

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

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

Спасибо за внимание.]]> 2. Настройки страницы сайта, созданного на Тильде https://kodea.ru/tpost/2te03vr9x1-2-nastroiki-stranitsi-saita-sozdannogo-n https://kodea.ru/tpost/2te03vr9x1-2-nastroiki-stranitsi-saita-sozdannogo-n?amp=true Mon, 26 Apr 2021 09:54:00 +0300 Создание сайтов на Тильде Быстрый старт Как создать новую страницу сайта в Тильде. Рабочая область. Настройки. Интерфейс.

2. Настройки страницы сайта, созданного на Тильде

Чтобы создать новую страницу сайта в Тильде, необходимо в админ панели нажать на кнопку "Создать новую страницу":

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

Выбрав пустую страницу, получим ее рабочую область:

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

Итак, создадим три страницы нашего сайта - шапка, Главная, подвал - так, как это описано в статье нашего блога "Как в Тильде настроить шапку и подвал сайта".

Шапку и подвал сайта мы создаем отдельными страницами, так как они практически всегда присутствуют на всех страницах сайта, независимо от содержимого этих страниц. Чтобы каждый раз не создавать одинаковые элементы, мы через настройки сайта укажем, какая страница данного сайта будет выполнять роль меню, а какая будет представлять подвал сайта. Это очень удобно, чтобы не дублировать одно и то же. Редактирование таких блоков осуществляется только в одном месте, не нужно вносить изменения в шапку и подвал на каждой странице сайта.

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

Отсюда мы можем:

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

Рассмотрим подробнее панель Настроек страницы сайта на Тильде.
На вкладке Главное мы можем указать Заголовок страницы, ее Описание, задать понятный адрес для страницы согласно ее содержимому:

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

На вкладке Facebook and SEO видно, как наша ссылка будет отображаться в Фейсбуке и в результатах поисковой выдачи:

А также доступны к управлению специальные мета-данные, которые можно использовать в Фейсбук или в поисковой выдаче:

Здесь можно также запретить поисковиками индексировать страницу, например, если она пока находится в разработке. Кроме того, Вы можете запретить поисковикам переходить по ссылкам на странице.

На вкладке Экспорт доступен к просмотру код страницы и доступен к скачиванию архив страницы. Эта функция доступна только для аккаунтов с бизнес-планом. При этом при экспорте Вы получите статичный html-код страницы со всеми необходимыми файлами (картинки, css, js). Но сервисы - такие как, например, получение и обработка данных из форм, корзина, каталог товаров, потоки, личный кабинет - не экспортируются и работать будут только при активной подписке на Тильду:

На вкладке Действия Вы можете:

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

На вкладке Дополнительно доступны возможности настройки страницы сайта, созданного на Тильде:

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

Здесь доступны также параметры, необходимые для некоторых отдельных блоков страницы, таких как, например, меню или список страниц:

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

Дополнительно можно:

увидеть информацию о количестве блоков на странице,
редактировать html-код, который вставляется внутрь тега head на странице (например, коды сервисов аналитики),
просматривать корзину, куда помещаются блоки страницы после удаления. Можно восстановить в течение дня,
Задать пароль на страницу, если необходимо ограничить к ней доступ:

Друзья, рассмотрели с Вами подробно настройки страниц сайтов, созданных в Тильде.
Спасибо за внимание!

]]> Анимации появления блоков https://kodea.ru/tpost/vbtt5srn51-animatsii-poyavleniya-blokov https://kodea.ru/tpost/vbtt5srn51-animatsii-poyavleniya-blokov?amp=true Sat, 30 Apr 2022 09:57:00 +0300 Создание сайтов на Тильде Оформление сайта Функционал Тильды позволяет анимировать страницы сайта от минимальной, едва заметной анимации появления элементов, до сложной эффектной анимации ZERO-блока.

Анимации появления блоков

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

Каким образом можно добавить анимацию элементов на странице в Тильде?

1. Базовая анимация в настройках стандартных блоков

Каждый блок Тильды имеет определенный набор настроек в зависимости от типа блока. И для всех или большинства элементов блоков можно задать какую-либо анимацию появления на экране. Пример:

Как видно на изображениях сверху, существуют следующие типы базовой анимации для стандартных блоков в Тильде:

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

2. Базовая анимация в настройках элемента в ZERO-блоке

Стандартную анимацию появления элемента на странице можно задать также в том случае, если блок в Тильде собирается в таком инструменте как ZERO-блок:

Типы анимации здесь аналогичны тем, которые имеются в настройках стандартных блоков:

None - анимация отсутствует,
Fade In - элемент появляется на экране из прозрачного в видимый без изменения своего размера или положения,
Fade In UP - элемент появляется на экране из прозрачного в видимый, вылетая снизу вверх,
Fade In Down - элемент появляется на экране из прозрачного в видимый, вылетая сверху вниз,
Fade In Left - элемент появляется на экране из прозрачного в видимый, вылетая справа налево,
Fade In Right - элемент появляется на экране из прозрачного в видимый, вылетая слева направо,
Zoom In - элемент появляется на экране из прозрачного в видимый, увеличиваясь в размерах от центра.

3. Step By Step анимация (анимация по шагам) в настройках элемента в ZERO-блоке

Помимо стандартной анимации для элемента можно создать совершенно уникальную сложную анимацию по шагам через настройки элемента в ZERO-блоке:

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

element on Screen - проигрывание анимации, когда элемент появляется на экране,
block on Screen - проигрывание анимации, когда блок появляется на экране,
on Scroll - проигрывание анимации по скроллу,
on Hover - проигрывание анимации при наведении курсора мыши,
on Click - проигрывание анимации при клике по элементу.

После выбора триггера для проигрывания анимации можно настраивать сколько угодно шагов анимации. Для каждого шага анимации можно менять следующие настройки:

duration - продолжительность проигрывания анимации,
move x, y - движение по осям х и у элемента,
scale x, y - увеличение или уменьшение элемента относительно осей х и/или у,
opacity - изменение прозрачности элемента,
rotate - поворот элемента,
easing - стиль проигрывания анимации (линейная, с ускорением, с замедлением и т.д.)
delay - продолжительность паузы перед проигрыванием анимации.

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

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

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

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

Итак, еще один способ добавления анимации:

4. Анимация, описанная с помощью пользовательского кода, использующая возможности CSS, JavaScript.

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

Ну что же, спасибо за внимание! ;)

Спасибо, что читаете мой блог.

Желаю Вам удачи в Вашем деле!

]]> Как в Тильде загрузить шрифт Adobe Fonts https://kodea.ru/tpost/xr9i9fcax1-kak-v-tilde-zagruzit-shrift-adobe-fonts https://kodea.ru/tpost/xr9i9fcax1-kak-v-tilde-zagruzit-shrift-adobe-fonts?amp=true Sat, 24 Apr 2021 18:45:00 +0300 Создание сайтов на Тильде Быстрый старт Чтобы его использовать, Вам необходимо завести аккаунт сервисе Typekit от компании Adobe и оплатить подписку либо на Photoshop либо на другой графический редактор.

Как в Тильде загрузить шрифт Adobe Fonts

Подключение шрифта Adobe Fonts в сайте на Тильде

Это сервис компании Adobe - https://typekit.com. Для того чтобы его использовать, Вам необходимо завести аккаунт в этом сервисе и оплатить подписку либо на Photoshop либо на другой графический редактор, за что компания Adobe дарит Вам в подарок данный сервис с библиотекой шрифтов, которая насчитывает огромное их количество.

Зайдем в настройки сайта:

Выберем пункт меню слева "Шрифты и цвета". Перейдем во вкладку Adobe Fonts:

Чтобы использовать шрифт Typekit, Вам необходимо получить KIT ID интересующего шрифта.

Переходим на сайт - https://typekit.com.

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

Когда Вы выбрали шрифт, Вы создаете в сервисе Новый проект (Ad to Web Project), отмечаете в чекбоксах все необходимые начертания шрифта, после чего сохраняете настройки проекта, получаете ссылку шрифта, в которой нас интересует набор символов перед .css (выделено жирным и подчеркнуто в строке ниже):

<link rel="stylesheet" href="https://use.typekit.net/hrn4rjc.css">

Данный набор символов ( hrn4rjc ) Вы вставляете в строку ADOBE FONTS KIT ID в настройках шрифта сайта Тильды. Сохраняете и теперь можете использовать загруженный шрифт при создании сайта в Тильде.

Удачи в Вашем творчестве! Спасибо за внимание!]]> Как загрузить свои шрифты в Тильде https://kodea.ru/tpost/rf1o6hnda1-kak-zagruzit-svoi-shrifti-v-tilde https://kodea.ru/tpost/rf1o6hnda1-kak-zagruzit-svoi-shrifti-v-tilde?amp=true Fri, 16 Jul 2021 18:47:00 +0300 Создание сайтов на Тильде Быстрый старт В Тильде можно использовать шрифты из наборов самой Тильды, шрифты Adobe, Google Fonts. Но также есть возможность загрузить свои собственные шрифты, если перечисленных наборов недостаточно.

Как загрузить свои шрифты в Тильде

Как добавить собственный шрифт в Тильду?

Переходим в Настройки сайта - Шрифты и цвета - Расширенные настройки.
Выбираем вкладку Your Own Fonts.

Здесь Тильда предлагает загрузить имеющиеся у Вас файлы шрифтов обязательно в формате WOFF. Обратите на это внимание.

Кроме того, есть возможность в поле CSS LINK указать ссылку на файл стилей в том случае, если Ваши шрифты находятся где-то на другом сервере, хостинге, и в саму Тильду Вы их загружать не планируете. А просто хотите подключить к сайту этот указанный сторонний файл стилей.

Предполагаем, что Вы уже заранее подготовили необходимые файлы, скачав их с одного из сервисов, предлагающих бесплатные или платные наборы шрифтов. Если нет, то сделайте это, воспользовавшись поиском в Яндексе или Гугле с поисковой фразой типа Скачать шрифты. Это просто. Даже если у Вас файлы в другом формате, ничего страшного, Тильда предложит инструкцию по их конвертации в необходимый формат. Это видно на картинке ниже.

Итак, нажимаем на кнопку Загрузить файлы шрифта, видим окошко, в котором нужно последовательно подгрузить шрифты для каждого начертания (толщины шрифта).

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

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

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

Сохраняете. Готово.
Используйте свои собственные шрифты в работе.

Спасибо, что дочитали статью до конца! Надеюсь, была полезна.
Желаю Вам успехов в Вашем творчестве!]]> Как устроена Тильда. Обзор интерфейса https://kodea.ru/tpost/l0bhg410s1-kak-ustroena-tilda-obzor-interfeisa https://kodea.ru/tpost/l0bhg410s1-kak-ustroena-tilda-obzor-interfeisa?amp=true Sat, 23 Apr 2022 19:04:00 +0300 Создание сайтов на Тильде Обзор Тильды Общее представление об интерфейсе: как выглядит, что значит, как создать, загрузить, отредактировать, опубликовать...

Как устроена Тильда. Обзор интерфейса

Основная панель управления сайтами в Тильде

CRM - в Тильде имеется своя простая CRM, то есть система управления заявками, поступающими от клиентов с сайта.
Тарифы и планы - ваш тарифный план, интерфейс оплаты, информация о других тарифных планах.
Профиль - ваш email, пароль, язык интерфейса.
Найти партнера - каталог дизайнеров по разработке сайтов на Тильде.
Справочный центр - инструкции по работе с Тильдой.
Вебинары - расписание вебинаров, на которых обучают делать удобные, красивые сайты на Тильде.
Уроки и статьи - образовательный журнал платформы для создания сайтов Tilda Publishing. Практические руководства по дизайну и маркетингу для цифровых проектов.
Наталья - ссылка на Ваш профиль.
Создать новый сайт - ссылка на создание нового сайта.
Создать рассылку - ссылка на создание новой рассылки.
Карточка сайта - карточка из которой можно: перейти в панель управления конкретным сайтом; перейти по ссылке на главную страницу сайта; перейти к любому разделу основных настроек сайта, если нажать на три вертикальные точки вверху справа при наведении курсора на карточку.
Карточка рассылки - карточка из которой можно: перейти в панель управления рассылкой; перейти к любому разделу основных настроек рассылки, если нажать на три вертикальные точки вверху справа при наведении курсора на карточку.
Журнал ошибок в Тильде.
Новости Тильды.
Справочный центр Тильды.

Панель управления конкретным сайтом.

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

Подключить домен - ссылка на подключение собственного домена.
Опубликовать все страницы - опубликовать все имеющиеся в сайте страницы.
Заявки - заявки, поступающие с сайта в CRM Тильды.
Товары - ссылка для перехода в каталог товаров интернет магазинов на Тильде.
Потоки - ссылка для перехода к потокам новостей для блога на Тильде.
Адрес сайта - ссылка для перехода на главную страницу сайта.
Настройки сайта - переход к редактированию основных настроек сайта.
Создать новую страницу - создание новой страницы сайта.
Настройки - настройки отельной папки.
Папки - созданные в Тильде страницы сайта можно распределять по папкам. При нажатии на плюсик происходит создание папки.
Ссылка для перехода в конкретную папку со страницами сайта, которые включены в эту папку.

Интерфейс Настроек сайта выглядит следующим образом (подробно будет рассмотрен в другой статье):

А так выглядит список страниц сайта:

Настройки - настройки отдельной страницы.
Публиковать - опубликовать страницу в сети интернет.
Ссылка - переход на страницу.
Удалить - удаление отдельной страницы.

Интерфейс Настроек страницы выглядит так (подробнее в другой статье):

Как создать новую страницу в Тильде

Перейдем к соответствующей опции в панели управления сайтом:

На открывшейся странице мы можем выбрать Пустую страницу, которую будем формировать с нуля, либо можем выбрать уже готовый шаблон, имеющийся в Тильде:

Кстати, выбранный шаблон никак не ограничивает нашу творческую фантазию, мы можем редактировать его как угодно на свое усмотрение.

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

Интерфейс редактирования страницы

Ссылка для перехода на домашнюю страницу аккаунта в Тильде, в интерфейс настроек сайта или в интерфейс редактирования отдельной страницы, смотря что Вы выберете.
Отмена - отмена последнего совершенного при редактировании страницы действия.
Предпросмотр - при переходе по данной ссылке мы попадем на нашу редактируемую страницу, чтобы оценить, как она будет выглядеть в Интернет для пользователя.
Опубликовать - публикация внесенных в страницу изменений, после которой они станут доступными для пользователей сайта.
Настройки - переход к детальным настройкам страницы - заголовок, описание, ссылка, SEO, действия и т.д.
Помощь - переход в справочный центр Тильды.
Еще - дополнительные команды меню, предоставляющие быстрый доступ к таким опциям, как:

настройки сайта,
настройки страницы,
шрифты,
мои сайты,
профиль,
тарифы и оплата,
помощь,
карта блоков,
выйти.

Как добавить блок (секцию) на страницу сайта Тильда

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

Добавьте блок на страницу, используя одну из представленных на изображении ниже опций:

Значок "+" между блоками на странице.
Панель часто используемых блоков в самом низу страницы
Раздел ВСЕ БЛОКИ рядом с панелью часто используемых блоков. Этот раздел содержит в себе все имеющиеся в арсенале Тильды блоки для создания веб-страниц.

На рисунке ниже показано, как выглядит библиотека блоков Тильды:

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

Как добавлять и редактировать контент внутри блоков

Добавлять и редактировать контент блоков можно прямо на странице, кликнув по редактируемому элементу. Также можно редактировать содержимое, воспользовавшись вкладкой КОНТЕНТ (оранжевая кнопка видна в левом верхнем углу блока при наведении на него курсора мыши).

Изображение можно заменить с помощью перетаскивания или через диалоговое окно загрузки:

Так выглядит окно редактирования содержимого через вкладку КОНТЕНТ:

Настройки блока

Каждый блок имеет свои собственные настройки, состав которых зависит от типа блока (изображение, заголовок, описание, видео, кнопка):

С блоками на странице можно совершать следующие операции:

Дублировать
Удалить
Спрятать / Показать - блок будет присутствовать на странице, но не будет виден на опубликованной странице.
Другие действия (ниже)
Переместить вверх или вниз
Копировать
Вставить
Выделить

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

После того, как Вы произвели необходимые настройки блока, добавили в него контент, Вы можете предварительно, без публикации, посмотреть, как блок будет выглядеть на опубликованной странице. Для этого нажмите на кнопку ПРЕДПРОСМОТР.

Посмотрели, все отлично! Теперь можно делать страницу доступной в сети Интернет, нажав на кнопку ОПУБЛИКОВАТЬ.

Поздравляю, Ваша страница готова!
Спасибо, что дочитали до конца! Надеюсь, что статья была полезна.
Желаю Вам творческих успехов! ;)

]]> Новые шаблоны сайтов на Тильда в категории Z https://kodea.ru/tpost/3e9j2o7zm1-novie-shabloni-saitov-na-tilda-v-kategor https://kodea.ru/tpost/3e9j2o7zm1-novie-shabloni-saitov-na-tilda-v-kategor?amp=true Sun, 09 May 2021 13:04:00 +0300 Создание сайтов на Тильде Новости Тильды 📢 Architecture и Color Cards — новые шаблоны сайтов, созданных на Тильда. Они собраны из Zero блоков. Подробнее о них в данной статье.

Новые шаблоны сайтов на Тильда в категории Z

Новые шаблоны сайтов, созданных на Тильда в категории Z

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

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

👉 Вы можете посмотреть данные шаблоны по ссылкам ниже:
http://architecture.template.tilda.ws
http://colorcards.template.tilda.ws

✨ Шаблоны страниц в Тильда из категории Z доступны Вам при создании новой страницы для проекта. После того, как Вы добавили шаблон на свою страницу, Вам нужно загрузить необходимые шрифты.

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

Удачи в творчестве и Вашем деле! Спасибо за внимание!]]> Новый блок TB105 для создания сайтов в Тильде https://kodea.ru/tpost/vucj2435k1-novii-blok-tb105-dlya-sozdaniya-saitov-v https://kodea.ru/tpost/vucj2435k1-novii-blok-tb105-dlya-sozdaniya-saitov-v?amp=true Thu, 13 May 2021 12:10:00 +0300 Создание сайтов на Тильде Новости Тильды 📢 Новый блок TB105 Тильды в категории Расписание представляет собой две колонки с надзаголовками и горизонтальной линией.

Новый блок TB105 для создания сайтов в Тильде

Новый блок Тильды TB105 - это простое расписание с минимумом информации в две колонки. Блок включает в себя общий заголовок и надзаголовок.

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

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

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

В настройках блока Вам доступны возможности менять ширину и отступы обеих секций, указывать стиль разделителя и кнопки и настройки анимации элементов.]]> GL27 - новый блок Тильды - галерея в формате Stories https://kodea.ru/tpost/nz9tlevhh1-gl27-novii-blok-tildi-galereya-v-formate https://kodea.ru/tpost/nz9tlevhh1-gl27-novii-blok-tildi-galereya-v-formate?amp=true Fri, 16 Jul 2021 21:00:00 +0300 Создание сайтов на Тильде Новости Тильды 📢 С помощью блока Вы можете добавить на сайт емкую галерею с вертикальными карточками в стиле Stories.

GL27 - новый блок Тильды - галерея в формате Stories

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

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

В настройках блока Вы можете указать стиль галереи, а также всех элементов управления: доступно изменение цвета и толщины стрелок, также полосы прогресса. Кроме того, можно изменить стили стрелок при наведении и регулировать их размер.]]> Как увеличить или уменьшить ширину блока сайта, созданного на Тильде https://kodea.ru/tpost/kyusprfne1-kak-uvelichit-ili-umenshit-shirinu-bloka https://kodea.ru/tpost/kyusprfne1-kak-uvelichit-ili-umenshit-shirinu-bloka?amp=true Wed, 21 Jul 2021 16:31:00 +0300 Создание сайтов на Тильде Пользовательский код Стандартная ширина блоков Тильды в десктопной версии сайта составляет 1200 пикселей. Но как нам все-таки можно изменить данный параметр. В этом посте.

Как увеличить или уменьшить ширину блока сайта, созданного на Тильде

Стандартная ширина контентной части сайта, созданного на Тильде в десктопной версии составляет 1200 пикселей.

Как же нам быть, если наш дизайн предусматривает другие размеры?

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

Как увеличить ширину блока в Тильде? Можно ли?

Да. Можно. Используя пользовательский код CSS, мы можем влиять на ширину отдельных блоков Тильды - как стандартных, так и Zero блоков.

Разберем на конкретном примере.

Добавим на страницу, например, блок AB201.
Видим, что контент блока расположен по центру экрана и занимает определенное место в нем.

С помощью инструментов разработчика (F12 в Яндекс-браузере, например) исследуем макет сайта и конкретно нашего блока.
Выясняем, что контент заключен в блоке
<div class="t-container t-align_center">
класс которого t-container,имеет ограничение ширины, равное 1200 пикселей, о котором упоминалось выше в посте.

Так вот, этот параметр мы с Вами изменим, например, на 1400 пикселей, тем самым увеличив ширину нашего блока на 200 пикселей.

Добавим на нашу страницу в Тильде блок из категории Другое - Т123 "HTML код".

И во вкладке Контент этого блока напишем следующее:

Опубликуем страницу после внесенных изменений, увидим, что блок стал шире:

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

Во-первых, в Настройках блока, для параметра Отступ слева укажем Без отступа.

Получим:

Как видим из разметки в инструментах разработчика, заголовок блока и описание располагаются в div блоке

<div class="t-col t-col_8 ">

Очевидно, чтобы центрировать эти элементы, нам необходимо переопределить стили класса:t-col_8, но конкретно для нашего блока с указанием его id (на сайте, вероятно, будут присутствовать другие элементы с этим классом. Если мы не укажем id блока, то стили будут переопределены для всех элементов с классом t-col_8).

Итак, напишем в добавленный ранее блок с HTML кодом следующие строчки:

#rec338186146 .t-col_8 {
display: block;
float: none;
margin: 0 auto;
}

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

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

<div class="t-row t-clear">

Переопределять стили будем для класса:t-row. А точнее, не переопределять, а дописывать необходимые для решения нашей задачи.
В блок с HTML-кодом допишем строчки:

#rec338186146 .t-row {
display: flex;
justify-content: center;
}

Опубликуем страницу после внесенных изменений, увидим требуемый результат - ширина блока 1400 пикселей, контент располагается по центру:

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

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

Надеюсь, статья была Вам полезна и помогла в реализации Ваших задач.

Спасибо, что дочитали до конца!
Желаю Вам удачи!]]> Политика конфиденциальности (обработки персональных данных) в Тильде https://kodea.ru/tpost/giptrctxm1-politika-konfidentsialnosti-obrabotki-pe https://kodea.ru/tpost/giptrctxm1-politika-konfidentsialnosti-obrabotki-pe?amp=true Thu, 22 Jul 2021 16:42:00 +0300 Создание сайтов на Тильде Подготовка к запуску Политика конфиденциальности по смыслу является документом, который разъясняет посетителям Вашего сайта, как Вы используете его персональные данные. Соблюдение норм 152-ФЗ.

Политика конфиденциальности (обработки персональных данных) в Тильде

Политика конфиденциальности по смыслу является документом, который разъясняет посетителям Вашего сайта, как Вы используете его персональные данные. Соблюдение норм 152-ФЗ.

Для составления Политики конфиденциальности Вы можете воспользоваться конструктором Политики конфиденциальности Тильды.

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

Для кого необходима Политика конфиденциальности?

Политику конфиденциальности должны применять все операторы персональных данных.

Согласно Федеральному закону "О персональных данных" 152-ФЗ:

Персональные данные — любая информация, относящаяся прямо или косвенно определенному или определяемому физическому лицу (субъекту персональных данных).
Если сказать проще, это все то, что позволяет Вас идентифицировать, любые данные, связанные с Вами.

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

Примеры:

Если Вы продаете через свой сайт детские наборы для художника и просите посетителей указать адрес доставки, а также его имя и телефон? Вы являетесь оператором!
На Вашем ресурсе присутствуют формы для заказа услуг Вашей парикмахерской и формы их оплаты? Вы снова оператор!
Осуществляете продажу одежды через свой сайт и посетители заполняют данные об адресе доставки? Угадайте, кто Вы? Верно! Оператор!

Это немногие ситуации, при которых Вам необходимо применять Политику конфиденциальности.

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

Чаще всего она располагается на отдельной html-странице и ссылку на нее с призывами прочитать и согласиться располагают под всеми имеющимися на сайте формами.

Как составить Политику конфиденциальности?

Для составления Политики конфиденциальности Вы можете воспользоваться конструктором Политики конфиденциальности Тильды.

Но лучше всего для этого обратиться к юристу, чтобы не упустить каких-то нюансов.

Существуют некоторые рекомендации от Роскомнадзора, которые необходимо учесть при составлении Политики:

- На каком основании и с какой целью Вы собираете персональные данные о пользователях сайта;

- Какие данные обрабатываете и с помощью каких источников получаете, в том числе файлы cookie;

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

- Сроки обработки и хранения персональных данных;

- Сведения о том, что вы передаете данные за пределы территории РФ (если это имеет место);

- Как Вы соблюдаете права пользователей, закрепленные законом «О персональных данных»;

- Наименование Вашей организации, контактную информацию и адрес.

Все это Вы можете описать в свободной форме.

Какое наказание предусмотрено за несоблюдение требований 152-ФЗ?

Штраф за отсутствие политики конфиденциальности (ч. 3 ст. 13.11 КоАП РФ) для юрлиц — от 15 000 до 30 000 ₽, а для ИП — от 5 000 до 10 000 ₽

Кроме того, Роскомнадзор может применить блокировку Вашего ресурса в сети до устранения нарушений.

Будьте внимательны, применяйте Политику конфиденциальности, следуйте рекомендациям законодательства.

Спасибо, что читаете наши статьи!
Желаю Вам удачи!]]> Блок GL27 Тильда - Галерея в формате Stories. Полный обзор. https://kodea.ru/tpost/ojo6favdt1-blok-gl27-tilda-galereya-v-formate-stori https://kodea.ru/tpost/ojo6favdt1-blok-gl27-tilda-galereya-v-formate-stori?amp=true Fri, 23 Jul 2021 11:34:00 +0300 Создание сайтов на Тильде Галереи изображений В данном посте рассмотрим блок Тильды GL27. Его возможности и настройки. А также ответы на некоторые возникающие вопросы у пользователей по данному блоку.

Блок GL27 Тильда - Галерея в формате Stories. Полный обзор.

В данной статье рассмотрим вопросы:

настройки блока - общие, элементов управления, карточек, стиля галереи, кнопок, типографики;
управление контентом блока;
ответим на вопрос, как уменьшить отступ слева в блоке (в конце поста).

Добавим на страницу нашего сайта блок GL27:

Переходим в Настройки нашего блока и рассмотрим их подробнее.

В общих Настройках для блока GL27 мы можем изменять:

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

Переходим ко вкладке УПРАВЛЕНИЕ Настроек блока

Здесь нам доступны настройки для элементов управления галереей - полосы прокрутки и кнопки PLAY/STOP:

для полосы прокрутки можно указать:

ее цвет,
толщину полосы в пикселях,
величину отступа полосы прокрутки от изображений в пикселях;

для кнопки PLAY/STOP моно указать:

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

Переходим ко вкладке КАРТОЧКИ Настроек блока

Здесь нам доступны следующие настройки:

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

Переходим ко вкладке СТИЛЬ ГАЛЕРЕИ Настроек блока

Нашему вниманию представлены настройки:

полноэкранная версия - очередное что-то непонятное, у меня не сработало, ничего не поменялось на экране;
автоматическая смена слайдов (в миллисекундах, 1 сек = 1000 млсек) - дает возможность указать скорость смены карточек;
размер стрелки - позволяет указать размеры стрелок галереи - маленький, средний, большой и самый большой;
толщина стрелки - можем сделать стрелки галереи тоньше или толще, в пикселях;
стрелка цвет - цвет самой стрелки;
цвет при наведении - цвет стрелки при наведении на нее курсора мыши;
стрелка: цвет фона - цвет фонового кружка под стрелкой;
цвет фона при наведении - цвет фонового кружка под стрелкой в момент наведения на него курсора мыши;
стрелка: непрозрачность фона - можем регулировать яркость фонового кружка под стрелкой;
непрозрачность при наведении - позволяет добавлять hover-эффект фону кружка со стрелкой при наведении;
показывать обводку - по моим ожиданиям, это предполагалась именно обводка кружка под стрелкой. Однако, при экспериментировании с данной настройкой оказалось, что она включает фон этого кружка (если, например, в настройках самого фона цвет не выбран), но не обводку. Взрыв мозга. Похоже на баг в библиотеках Тильды. Или я чего-то опять не понимаю...

Переходим ко вкладке КНОПКИ Настроек блока

Сразу нам доступны настройки:

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

Помимо перечисленных настроек существуют Дополнительные настройки для кнопок (Клик мышью по словам Дополнительные настройки. На скрине выше они видны):

Здесь мы можем изменять параметры:

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

Переходим ко вкладке ТИПОГРАФИКА Настроек блока

Здесь нам доступны настройки:

цвет заголовка карточки;
размер шрифта заголовка карточки;
шрифт для заголовка карточки;
межстрочное расстояние для заголовка;
можно отметить чекбокс для отображения заголовка карточки заглавными буквами;
отступ сверху для заголовка в пикселях;
отступ снизу для заголовка в пикселях;
цвет описания карточки;
размер шрифта описания;
шрифт для описания карточки;
межстрочное расстояние для описания;
насыщенность шрифта описания карточки;
также доступен чекбокс для отображения описания заглавными буквами;
отступы сверху и снизу для описания карточки в пикселях.

Итак, мы рассмотрели все возможные Настройки блока GL27.

Давайте теперь перейдем к Контенту блока и посмотрим, что нам доступно.

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

В карточках нам доступны следующие элементы:

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

Это все, что на данный момент доступно для редактирования на вкладке Контент блока.

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

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

С помощью добавления пользовательского кода можно изменить этот отступ и расположить карточки на всю ширину блока.

Для этого нужно добавить на страницу блок T123 HTML-код и написать в нем:

<style type="text/css">
#rec338811602 .t994__width-wrapper {
margin-left: 10px;
}

где - #rec338811602 - это id блока GL27, который Вы можете найти на вкладке Настройки блока, в самом низу.

Получим в результате отсутствие такого большого отступа слева в блоке GL27.

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

На этом я заканчиваю данный пост. Получился он очень длинный.

Надеюсь, статья была полезна и Вы нашли решение для своих задач.
Желаю Вам творческих успехов!]]> Как скрыть блок в Тильде? https://kodea.ru/tpost/1ul6dckiz1-kak-skrit-blok-v-tilde https://kodea.ru/tpost/1ul6dckiz1-kak-skrit-blok-v-tilde?amp=true Mon, 26 Jul 2021 14:11:00 +0300 Создание сайтов на Тильде Обзор Тильды Оформление сайта Пользовательский код В посте рассмотрим различные варианты и ситуации, когда и как скрыть определенный блок Тильды.

Как скрыть блок в Тильде?

Возможны различные ситуации, когда нам необходимо скрыть определенную секцию, или блок, на сайте:

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

Также могу привести несколько вариантов, как можно скрыть блок на Тильде:

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

Как скрыть блок на Тильде совсем?

Переходим в режим редактирования страницы Тильды, наводим курсором мыши на нужный блок, появляется меню (выделено красным на рисунке ниже):

В этом меню есть кнопка ВКЛ/ВЫКЛ (выделено синим на рисунке выше).
С помощью этой кнопки происходит скрытие блока Тильды с экрана на опубликованном сайте.
При этом блок остается на странице, но он скрыт:

В любой момент можно его активировать и продолжить работу над ним. Все, что было сделано в блоке до этого, сохранится.
Достаточно снова навести курсором на блок, воспользоваться верхним правым меню, кнопкой ВКЛ/ВЫКЛ:

Не забываем, чтобы применились те или иные изменения на странице, ее необходимо опубликовывать:

Следующий вариант:

Как скрыть блок Тильды для определенных разрешений экранов, имеющихся в настройках Тильды?

Скрыть блок Тильды для конкретных экранов устройств, например, для мобильных, можно, изменив соответствующий параметр на вкладке НАСТРОЙКИ для конкретного блока:

Диапазон видимости на устройствах

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

В примере ниже мы скрыли блок для экранов мобильных устройств шириной от 0 до 320 пикселей:

Информация о том, на каких экранах будет отображаться блок, доступна в верхнем левом меню конкретного блока при наведении на него курсора мыши:

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

320 пикселей,
480 пикселей,
640 пикселей,
980 пикселей,
1200 пикселей.

Однако, что если нам нужно скрыть блок для экранов, размеры которых не предусмотрены стандартными настройками Тильды???

Обратимся в таком случае к пользовательскому коду!

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

Многое, что невозможно сделать с помощью стандартных настроек Тильды, мы сделаем с помощью пользовательского кода, в том числе в данном конкретном случае.

Приступаем.

Добавим на страницу блок T123 HTML-код, если еще не добавлен.

Допустим, наш блок необходимо отобразить на экранах разрешения от 600 до 1000 пикселей (пример условный).

Значит, для разрешений

от 0 до 599 пикселей
от 1001 пикселя и выше

нам необходимо для нашего блока переопределить стили.

Напишем в блок Т123 код:

<style type="text/css">
@media screen and (min-width: 1001px){
#rec339649170 {
display: none;}
}

@media screen and (max-width: 599px) {
#rec339649170 {
display: none;}
}

где #rec339649170 - это id нашего блока, который можно найти на вкладке НАСТРОЙКИ блока, в самом низу.

Опубликуем изменения, переходим на страницу и видим, что на мониторе ПК (более 1000 пикселей) наш блок не отображается:

С помощью инструментов разработчика поменяем ширину экрана - менее 1000 px. Наш блок появится:

Продолжим уменьшать ширину блока до диапазона менее 600px. Блок снова исчезнет:

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

Надеюсь, пост помог Вам в решении Ваших задач.

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

Желаю Вам удачи в Вашем творчестве! ;)]]> https://kodea.ru/tpost/9150xco3a1-kak-ubrat-nadpis-made-on-tilda-znachok-t Как включить сетку в Zero блоке Тильда https://kodea.ru/tpost/19efn36sc1-kak-vklyuchit-setku-v-zero-bloke-tilda https://kodea.ru/tpost/19efn36sc1-kak-vklyuchit-setku-v-zero-bloke-tilda?amp=true Sun, 08 Aug 2021 12:34:00 +0300 Создание сайтов на Тильде Zero block Обзор Тильды 1 вариант - использовать горячую клавишу G, второй вариант - воспользоваться меню Zero блока. Подробнее в посте...

Как включить сетку в Zero блоке Тильда

Включить сетку в Zero блоке Тильда можно двумя способами:

Использовать горячую клавишу G (сетка - Grid, легко запомнить), которая включает и также отключает модульную сетку блока

Воспользоваться меню в панели редактирования Zero блока Тильды:

Находясь в панели редактирования Зиро блока, нажимаем на кнопку с тремя точками в правом верхнем углу:

Появится контекстное меню с командами, где нас в нашем случае интересует команда Show Grid (Hide Grid):

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

Желаю удачи! ;)]]> Верстальщик сайтов на Тильде https://kodea.ru/tpost/cr06j8lri1-verstalschik-saitov-na-tilde https://kodea.ru/tpost/cr06j8lri1-verstalschik-saitov-na-tilde?amp=true Sat, 21 Aug 2021 10:14:00 +0300 Создание сайтов на Тильде Промо Принимаю заказы на верстку сайтов в Тильде.

Верстальщик сайтов на Тильде

Предлагаю услуги верстки сайтов или их отдельных блоков и элементов в системе Тильда.

Узнать стоимость

от 300р. за элемент/блок
соблюдение сроков
всегда на связи
правки до победного (в рамках ТЗ)
работа с ZERO блоком
работа с кодом HTML, CSS, JS
анимация
интеграции с сервисами
поддержка

Узнать стоимость верстки сайтов на Тильде

Портфолио
Отзывы
Сертификаты
Контакты ]]> Шаблон мультиссылки для дизайнера - создание сайта на Тильде https://kodea.ru/tpost/801l4j0z41-shablon-multissilki-dlya-dizainera-sozda https://kodea.ru/tpost/801l4j0z41-shablon-multissilki-dlya-dizainera-sozda?amp=true Sun, 19 Sep 2021 15:47:00 +0300 Создание сайтов на Тильде Новости Тильды 📢 Дизайнеру необходимо, чтобы у него была страница, на которой представлены все контакты, ссылки и портфолио в одном месте.

Шаблон мультиссылки для дизайнера - создание сайта на Тильде

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

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

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

Измените фото или лого и свое имя, вкратце изложите информацию о своем таланте и добавьте нужные ссылки на Ваши соцсети и контакты.

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

Перейти к шаблону можно по ссылке 👉 https://tilda.cc/tpls/page/?q=designeroninstagram

Различные шаблоны для мультиссылок можно найти в категории КОНТАКТЫ в момент создания новой страницы Вашего сайта.

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

Желаю Вам успехов в Вашем творчестве!
Спасибо, что дочитали статью до конца ;)]]> Управление файлами ads.txt и app-ads.txt при создании сайтов в Тильде https://kodea.ru/tpost/ncrjy5o9k1-upravlenie-failami-adstxt-i-app-adstxt-p https://kodea.ru/tpost/ncrjy5o9k1-upravlenie-failami-adstxt-i-app-adstxt-p?amp=true Sun, 19 Sep 2021 16:12:00 +0300 Создание сайтов на Тильде Новости Тильды 📢 С недавнего времени появилась возможность изменять файлы ads.txt и app-ads.txt, если Вам необходимо, например, указать рекламную сеть, которая продает рекламу на сайте.

Управление файлами ads.txt и app-ads.txt при создании сайтов в Тильде

С недавнего времени появилась возможность изменять файлы ads.txt и app-ads.txt.

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

Опция доступна для управления в Настройках сайта → SEO → Управление файлами ads.txt и app-ads.txt.

Создавать сайты на Тильде и управлять ими становится все проще и эффективнее!

Желаю Вам успехов в Вашем деле!
Спасибо, что читаете мой блог ;)]]> Новая функция выравнивания расстояния между элементами в Zero блоке для сайтов на Тильде https://kodea.ru/tpost/agsu5b1i91-novaya-funktsiya-viravnivaniya-rasstoyan https://kodea.ru/tpost/agsu5b1i91-novaya-funktsiya-viravnivaniya-rasstoyan?amp=true Sun, 19 Sep 2021 16:24:00 +0300 Создание сайтов на Тильде Новости Тильды 📢 В Zero Block появилась новая функция, с помощью которой можно выравнивать расстояние между элементами.

Новая функция выравнивания расстояния между элементами в Zero блоке для сайтов на Тильде

В Zero Block появилась новая функция, с помощью которой можно выравнивать расстояние между элементами.

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

Указанные параметры расположены в новой панели в разделе align elements.

Рабочую область Zero блока Вы можете перемещать мышкой, зажав клавишу пробела. Эта опция заметно упрощает и ускоряет процесс работы над сайтом, делая его более удобным и приятным для дизайнера.

Спасибо, что дочитали пост до конца.
Желаю удачи в создании сайтов на Тильде ;)]]> Как настроить модульную сетку в Zero блоке Тильда https://kodea.ru/tpost/p2i63m2aa1-kak-nastroit-modulnuyu-setku-v-zero-blok https://kodea.ru/tpost/p2i63m2aa1-kak-nastroit-modulnuyu-setku-v-zero-blok?amp=true Sat, 16 Oct 2021 10:22:00 +0300 Создание сайтов на Тильде Zero block Новости Тильды Вы можете настраивать модульную сетку в Zero блоке Тильда как для одного блока, так и для всего сайта. Заказывайте необходимое количество колонок, их ширину, расстояние между ними, отступы, цвет линий и другие параметры.

Как настроить модульную сетку в Zero блоке Тильда

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

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

По умолчанию мы в Тильде работаем с 12-колоночной сеткой. Если нам нужна другая сетка, необходимо ее настроить.

Перейдем в Zero блок, рассмотрим настройки Artboard. Нажимаем кнопку Zero block settings и разберемся, для чего необходимо то или иное поле настроек:

HIDE GRID (горячая клавиша G)- переключатель, который показывает/скрывает модульную сетку Zero блока:

HIDE UI (горячая клавиша F)- переключатель, который показывает/скрывает панель управления настройками Zero блока:

SHOW LAYERS (горячая клавиша Ctrl + L)- переключатель, который показывает/скрывает панель элементов и групп элементов, имеющихся в Zero блоке:

SHOW GUIDES - переключатель, который показывает/скрывает имеющиеся направляющие линии в Zero блоке:

DISABLE SNAPPING - переключатель, который включает/отключает функцию примагничивания элементов друг к другу в Zero блоке.

COLUMNS — количество колонок в сетке.

COLUMN WIDTH — ширина колонок. При изменении ширины, меняется значение межколоночного расстояния COLUMN GUTTER и наоборот.

COLUMN MARGINS — отступы слева и справа от края артборда для колонок.

Кроме того, есть возможность настроить горизонтальную сетку. Она, как правило, применяется для типографики.

ROW BASELINE — шаг горизонтальной сетки. Обычно его величина берётся на основе базового размера Вашего шрифта. Например, если в качестве основного текста сайта Вы применяете шрифт размером 14px с межстрочным расстоянием 20px, то и расстояние между линиями будет 20px.

MODULE HEIGHT применяется, если Вам необходимы повторяющиеся модули в дизайне. Например, если указать значение 5, то через каждые пять рядов будет пустая строчка, а модуль будет начинаться заново.

ROW MARGINS — отступ сверху и снизу от края артборда:

Для каждого разрешения экрана модульная сетка настраивается отдельно: она будет разной для ПК и для мобильных устройствах. Включить и выключить сетку можно, нажав G или перейдя в раздел с трёмя точками в верхнем правом углу экрана.

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

Однако, если Вам необходима уникальная модульная сетка для конкретного блока, то зайдите в настройки сетки и выберите для параметра Use for опцию Current Block. Тогда настройки применятся только к текущему блоку.

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

Надеюсь, статья была Вам полезна.
Спасибо, что дочитали до конца!

Желаю Вам успехов и хорошего дня! ;)]]>