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

Как сделать выпадающий список на Тильде

Приветствую! Подробная текстовая инструкция + html-код к видео о выпадающем списке на Тильде

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

Этапы создания выпадающего списка

1. Создать блок меню ME602. Настроить его дизайн и задать необходимую ширину.
2. Создать и адаптировать блоки для будущих пунктов выпадающего списка. Это могут быть зеро или стандартные блоки.
3. Задать названия вкладкам в блоке ME602 и прописать ID блоков, которые должны открываться по этим вкладкам
4. Вставить код на сайт для добавления новых вкладок в блоке ME602. Прописать в коде ID и названия дополнительных вкладок. На видео это показано на промежутке 2:25—4:20. Не забудьте убрать ненужные строки (вкладки) из кода
5. Добавить второй код для стилизации блока ME602 под выпадающее меню

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

Как сделать блог

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

Создание блога через список страниц

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

Посмотрите подробное видео или инструкцию ниже:

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

Добавьте один из блоков из категории «Список страниц», это будет индексный блок с ссылками на ваши посты.

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

4. Перейдите в Настройки сайта → Главная страница и назначьте страницу с индексным блоком как главную. Она будет открываться первой, когда посетители будут заходить на ваш сайт.

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

Как на Тильде сделать ссылку

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

1. Создание ссылки в тексте.
2. Создание ссылки в готовом блоке.
3. Создание ссылки с элемента в Zero Block.
4. Создание якорной ссылки.

Создание ссылки в тексте

Самое простое, что может быть в Тильде. Чтобы сделать ссылку, нужно кликнуть на текст в готовом блоке, при этом вверху появится панель с функциями. Выделите мышкой часть текста, которую вы хотите сделать ссылкой и нажмите в верхнем меню на иконку скрепки. В поле «Укажите ссылку» введите относительную (если это ссылка на внутреннюю страницу на Тильде) или абсолютную (если это внешняя ссылка) ссылку. Отметьте чекбокс «Открыть ссылку в новой вкладке», если это внешняя ссылка.

Ниже вам будут доступны дополнительные настройки: цвет текста, цвет и толщина линии, rel=»nofollow».

Создание ссылки в готовом блоке

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

Создание ссылки с элемента в Zero Block

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

Чтобы на Тильде сделать ссылку с элементов Image и Shape, необходимо кликнуть на элемент левой кнопкой мыши, затем нажать на кнопку Settings в правом нижнем углу. В открывшемся окне открываем секцию Link и указываем ссылку в поле URL. Также можно настроить дополнительные параметры: Target (открывать или нет в новом окне) и Rel Nofollow (запрет перехода по ссылке для поискового робота).

Для элемента Button все идентично предыдущим двум элементам, но в окне настроек отсутствует секция Link. Ссылка указывается в поле URL.

Создание якорной ссылки

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

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

Далее переходите к тому элементу, который должен ссылаться на выбранный блок. Это может быть один из элементов, описанных в предыдущих разделах. Необходимо указать имя якорной ссылки, поставив перед ним значок решетки. Пример якорной ссылки: #contacts. Если вы хотите указать ссылку на блок на другой странице, вы просто добавляете перед якорной ссылкой адрес этой страницы: /path/#contacts

Возможен еще один вариант. Вы можете навести на блок, на который хотите сослаться и в левом верхнем углу нажать на «Настройки». Необходимо прокрутить в самый низ окна и скопировать значение в поле Block ID — это имя уникальной якорной ссылки блока. Ее необходимо прописать в том месте, откуда вы хотите сделать якорную ссылку.

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

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

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

Настройки сайта → Ещё → HTML код для вставки внутрь HEAD

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

Код применяется на все страницы сайта

school_flashfamily
через блок T123 в редакторе страницы
тильда гуру

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

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

school_flashfamily
внутрь зеро-блока
тильда гуру

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

Кнопка плюс → add HTML

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

school_flashfamily

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

тильда гуру
school_flashfamily

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

тильда гуру
school_flashfamily

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

тильда гуру
school_flashfamily
модификации, которые мы часто используем в работе
тильда гуру

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

• уникальные кнопки в стандартной форме захвата в зеро-блоке
• слайдер и табы из зеро-блока (Nolim)
• подгонка стандартных блоков под автоскейл (Annexx)
• плавный скролл страницы
• скругление стандартных блоков

school_flashfamily
уникальные кнопки в стандартной форме захвата в зеро-блоке
тильда гуру

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

Модификация позволяет добавить кастомные кнопки в стандартные формы захвата в зеро-блоки, если на всём сайте используется нестандартный дизайн кнопок

Для этого мы используем скрипт с mo-ti.ru
Ссылка будет в документе к уроку

school_flashfamily
тильда гуру

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

school_flashfamily
слайдер в зеро-блоке
тильда гуру

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

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

Есть платный бесплатный вариант этой модификации
Ссылка будет в документе к уроку

school_flashfamily
тильда гуру

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

school_flashfamily
рубрикатор в зеро-блоке
тильда гуру

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

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

Есть платная и бесплатная версия
Ссылка на модификацию в документе

school_flashfamily
тильда гуру

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

school_flashfamily
автоскейл и стандартные блоки
тильда гуру

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

Подогнать стандартные блоки к зеро-блокам в автоскейле возможно только через Annexx.

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

После установки расширения, в меню блоков будет добавлена новая вкладка Annexx. В ней отобразятся все модификации

school_flashfamily
тильда гуру

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

Для масштабирования стандартных блоков необходимо выбрать блок anx812.

В контенте этого блока нужно выбрать те стандартные блоки, которые необходимо масштабировать.

Далее нужно выбрать вкладку «корректировать масштабирование» и там подгонять стандартный блок под свой экран.

Например на windows ноутбуках с разрешением 1920×1080, подходит значение -20