Конструктор сайтов Тильда: архивы страниц

Инструменты для дизайнеров

Редактор Zero Block и анимация

Zero Block

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

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

Анимация

В Тильде есть базовая и продвинутая анимация.

Базовая делится на 3 типа:

• Animation (появление по центру, справа, слева, сверху, снизу и с увеличением).
• Fixing (фиксация на границах или по центру экрана).
• Parallax (медленное движение фонового изображения в перспективе при скролле).

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

Каталог экспертов Tilda Experts

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

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

Перед публикацией

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

Назва­ние стра­ни­цы меня­ет­ся по кноп­ке «Настрой­ки» в верх­нем меню. Пишем там то же самое, что и про­шлый раз:

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

Домен — тот же сайт в интер­не­те с отдель­ным име­нем. Yandex.ru, tilda.ws, thecode.media — это всё при­ме­ры доме­нов. А если у сай­та есть под­раз­дел со сво­им отдель­ным име­нем в интер­не­те, это уже суб­до­мен: rabota.yandex.ru, docs.google.com, mihailmaximov.tilda.ws. Суб­до­ме­ны обыч­но нуж­ны, что­бы офор­мить раз­де­лы на раз­ные темы в рам­ках одно­го сай­та. Наш суб­до­мен mihailmaximov озна­ча­ет, что внут­ри боль­шо­го сай­та tilda.ws будет раз­дел про Миха­и­ла Мак­си­мо­ва — и толь­ко про него.

Цве­та, шриф­ты, ана­ли­ти­ка и про­чие гло­баль­ные вещи настра­и­ва­ют­ся через то же меню сле­ва:

Редактирование страницы

• Как сделать всплывающее окно?
• Как добавить видео?
• Как добавить ссылку на конкретное место на странице (якорь)?
• Как добавить на сайт PDF?
• Как добавить свой HTML, CSS или Javascript-код?
• Как скопировать блок на странице?
• Как добавить ленту Instagram?
• Как отменить действия на странице?
• Как сделать таблицу?
• Как снять страницу с публикации?
• Как добавить микроразметку (Schema.org или JSON-LD)?
• Как сохранить страницу в PDF файл?
• Как переместить блок?
• Как добавить кнопку?
• Как скопировать сайт?
• Как подключить второй Instagram аккаунт?
• Как отвязать Instagram аккаунт и подключить другой?
• Как изменить цвет иконок социальных сетей?
• Как уменьшить (увеличить) отступ у блока?
• Как добавить ссылку для текста?
• Как изменить порядок страниц в блоке из категории «Список страниц»?
• Как включить модульную сетку?
• Как сделать отображение разных блоков для мобильной и десктопной версии?
• Как изменить количество блоков в ряд?
• Как отразить по горизонтали — поменять местами текст и картинку?
• Как добавить аудио или музыку на сайт?
• Как добавить иконки из пакета Tilda Icons?
• Где находится библиотека блоков?
• Как задать главную страницу?

Настраиваем заголовок

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

Что­бы уви­деть все эле­мен­ты, из кото­рых мож­но соби­рать стра­ни­цу, нажи­ма­ем на «Все бло­ки»:

У нашей стра­ни­цы нет облож­ки, она сра­зу начи­на­ет­ся с заго­лов­ка. Откры­ва­ем раз­дел «Заго­ло­вок» и выби­ра­ем тот, кото­рый под­хо­дит боль­ше все­го. Неваж­но, что там напи­са­но боль­ше, чем нам нуж­но — лиш­нее мы уда­лим или скро­ем. Допу­стим, мы реши­ли, что самый пер­вый заго­ло­вок (TL01) нам под­хо­дит, поэто­му нажи­ма­ем на него, и он сра­зу попа­да­ет на стра­ни­цу:

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

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

Оста­лось настро­ить раз­мер и поло­же­ние тек­ста как на уже гото­вой HTML-странице. Для это­го сна­ча­ла выде­ля­ем текст и с помо­щью инстру­мен­тов, кото­рые появ­ля­ют­ся на верх­ней пане­ли, дела­ем заго­лов­ку нуж­ный раз­мер и вырав­ни­ва­ем по лево­му краю:

Но у нас оста­лись боль­шие отсту­пы сле­ва и свер­ху, их тоже нуж­но попра­вить. Нажи­ма­ем кноп­ку «Настрой­ки» воз­ле заго­лов­ка и в появив­шем­ся меню настра­и­ва­ем раз­ме­ры отсту­пов и нажи­ма­ем «Сохра­нить и закрыть»:

Какие такие конструкторы

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

Бло­ки мож­но настро­ить по вку­су, но в целом они огра­ни­че­ны по воз­мож­но­стям. Зато их не нуж­но про­грам­ми­ро­вать: в боль­шин­стве кон­струк­то­ров всё про­ис­хо­дит в режи­ме drag’n’drop. Это зна­чит, что доста­точ­но выбрать блок, пере­та­щить его на нуж­ное место, впи­сать текст, вбро­сить кар­тин­ку, и всё — блок рабо­та­ет. В ито­ге мы жерт­ву­ем гиб­ко­стью и воз­мож­но­стя­ми настрой­ки ради того, что­бы делать сай­ты было про­сто.

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

Другие вопросы

• Можно ли давать отдельный доступ пользователям к проектам?
• Наблюдаются ли у вашего сервисы проблемы из-за блокировок Роскомнадзором?
• Как сделать бэкап проекта на Тильде?
• Выписался счёт для тарифа Бизнес на 15000 рублей без скидки. Почему?
• Где находится Ваш ЦОД?
• Яндекс.Вебмастер сообщил, что мой домен «Малополезный контент, спам, избыток рекламы» или «дорвей». Что делать?
• Как включить капчу?
• Для подтверждения нужно загрузить в корень сайта файл. Как это сделать?
• Что делать, если сайт не работает (не открывается)?
• Как сделать слайдер?
• Как добавить карту Google или Yandex на сайт?
• Где ввести промокод?
• Есть ли возможность отредактировать файл robots.txt?
• Я могу зайти на сайт по FTP?
• Могу ли я импортировать сайт в Тильду?
• Как добавить линию подчёркивания ссылки?
• Можно ли подключить Тильду к WordPress?
• Можно ли подключить Тильду к Битрикс?
• Есть ли у Тильды API?
• Как добавить Whatsapp или Viber?
• Почему не работают карты от Google?
• Как отключить Jivosite на мобильных устройствах?
• Что делать, если забыл почту (логин, аккаунт) для входа?
• Как загрузить MP4 или WEBM видео?
• Как сделать GIF из видео?
• У меня уже есть сайт в другом конструкторе. Как перенести сайт в Тильду из другой платформы или другого конструктора?
• В мобильном браузере показывает сообщение «Этот сайт заблокирован от автоматического запуска вызова». Почему?
• Почему я вижу на своём сайте рекламу? Откуда реклама на сайте?
• Как убрать капчу?
• У меня на сайте маленькая конверсия, помогите с маркетингом?
• Есть ли сервис для создания UTM меток?
• Где почитать новости про обновления Тильды?
• Как мне найти исполнителя для создания или доработки сайта?
• Вы занимаетесь разработкой сайтов на заказ?
• Я сделал сайт, как мне попасть в рубрику Madeontilda?
• Как подключить Почтовый Офис от Яндекса?
• Не могу войти в аккаунт, выдается сообщение, что пользователь с таким Email не найден.
• Где посмотреть статистику по utm меткам?
• Где найти публичную ссылку на блок?
• Что такое Tooltip (тултип) в Zero блоке?
• Есть ли сервис для создания «Соглашения об обработке персональных данных»?
• Как сделать анимацию на мобильных в Zero Block?
• Есть ли возможность отредактировать файл .htaccess?
• Скачал файл заявок в формате CSV. Не могу открыть в Excel, почему?
• Как настроить calltracking?
• Как подключить бота в группу Телеграм?
• Возможно ли в Тильде сделать горизонтальную прокрутку?

Формы приема данных

• Как отправлять заявки себе на почту?
• Заявки из форм не приходят
• Как отправлять заявки в SMS?
• Как отправлять заявки себе в Telegram?
• Как поменять цвет текста или фона в сообщении об успешной отправке формы?
• Как изменить текст ошибок форм?
• Как отправлять заявки из формы в Google Таблицы?
• Как добавлять контакты из форм в MailChimp?
• Как добавлять контакты из форм в GetResponse?
• Как добавлять контакты из форм в UniSender?
• Как добавлять контакты (лиды) из форм в AmoCRM?
• Как назначить разные воронки и разных ответственных для AmoCRM?
• Как получить данные из форм на свой скрипт через webhook?
• Как подключить к форме свой скрипт?
• Как добавлять контакты (лиды) из форм в Мегаплан?
• Как добавлять контакты из форм в SendPulse?
• Как добавлять контакты из форм в Трелло?
• Как изменить тему для письма с заявкой?
• Как поменять тему заявки в приемщике amoCRM?
• Как добавить голосование?
• Как добавить калькулятор?
• Как различать несколько форм на сайте?
• Как сделать форму, чтобы принимать данные?
• Как сделать, чтобы адреса с разных форм попадали в разные списки в Mailchimp
• Как начать работать с Tilda CRM?

Технические настройки и возможности для продвижения

Защита от DDos и скорость загрузки

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

Еще одно преимущество — высокая скорость загрузки сайта. Весь фотоконтент Тильды содержится в CDN (сети доставки содержимого). За счет использования географически распределенных серверов улучшается производительность и уменьшается нагрузка на трафик — время ожидания пользователя максимально сокращается.

Экспорт кода и интеграция по API

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

SEO

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

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

Доступны настройка редиректов, создание индивидуальной 404 страницы, связь с панелью вебмастера Яндекс и Google. Карта сайта генерируется автоматически, файл robots.txt обновляется сам — вручную страницы вносить не нужно.