Как в тильде сделать содержание

Знакомство с блоками контента с точки зрения их информационно-маркетингового воздействия.
Значение и основные приёмы электронной типографики. Их маркетинговое значение.
Настройки блоков. Настройка и загрузка контента в блок контента. Настройка параметров отображения блока.

Методические и маркетинговые возможности блоков Тильды

CR01… — обложка курса, обложка темы, обложка структурного элемента темы. Вовлечение слушателей.

AB101… (о проекте) — лид для всего курса, лид для темы, короткое иллюстрированное предисловие. Вовлечение слушателей.

TL01…06 — заголовки частей темы. Структурирование контента.

TX16 — блок раскрывающегося текста. Контрольные вопросы, структурирование темы, дополнительный материал.

TX17, ТX21 (вопросы и ответы) — Диалог «знайкина» с «незнайкиным», Диалог — дисциплины: Риторика, Мененджмент, Психология, Социология.

TX22 (текст с цифрой в кружочке) — организация нумерованных списков. Структурирование контента.

IM11, 13 (текст обтекающий изображение) — важная иллюстрация к теме.

GL01 (GL10, GL17, GL21, CL21N, CL34N) галерея, слайдер — базовый блок для группы однотипных иллюстраций.

GL08 (спрятанный всплывающий слайдер), GL19 — структурирование темы, дополнительный материал. Убирает дополнительный иллюстративный материал из основного поля зрения.

GL09 (сравнение до-после) на основе jaxtopose — методический приём сравнения визуальной информации.

GL11, 12 (полноэкранная матрица изображений) — сравнение фаз процесса, портретная галерея, любые однотипные по смыслу и формату иллюстрации.

IP101…405 (ключевая фраза) — лид темы (подзаголовок), тезис, врезка. Структурирование темы, главные вопросы темы.

QT01… — цитаты, прямая речь. Прямое обращение автора курса. Цитаты великих. Тезис. Авторизованная врезка. Вопрос. Придуманные персонажи — аватары, маскоты.

FR101… (преимущества) — особо важные списки, варианты чего-л., основные цифровые параметры, список основных тезисов, тезисы с иллюстрациями и переходами на подробное описание, доводы за и против.

FR301 — тезисы с иллюстрациями и переходами на подробное описание.

FR303 (а также CL47, CL48) — доводы за и против с разделяющей иллюстрацией, сравнение двух стратегий, объектов, методов.

FR405 — кольцевые диаграммы (простейшая инфографика). Создание собственных иллюстраций непосредственно в Тильде!

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

CL46 — таблица. Несложная таблица средствами самой Тильды. Широкое применение.

DV01… — разделители. Структурирование темы. Разбиение темы на части, нумерованные части (это иногда удобно делать вместо именованных глав).

ME101… — меню. Структурирование курса на темы, оглавление внутри темы, оглавление курса, неизменные элементы страницы, не исчезающие при скроле и т. п.

ME401−405 — скрытые меню с элементом «Гамбургер». Удобно для оглавления, которое всегда под рукой, но не мешает.

ME601−602 — переключающиеся вкладки. Альтернативная информация, разветвление повествования, варианты.

IX01… — список страниц. Удобное графическое меню для курса, для библиотеки курсов. Структурирование учебного контента на верхних уровнях иерархии.

TE100… — плитка и ссылки. Альтернативный способ работы с иллюстрациями и их описаниями. Возможность ссылок с самих изображений.

TE600 — карточки с текстом. Набор тезисов с расшифровкой в другом месте страницы или на других страницах. Краткий глоссарий. Часто задаваемые вопросы.

FT101… — подвал страницы. Структурирование контента на уровне курса, библиотеки курсов. Контакты, данные об авторе.

VD01… — вставка видео. (YouTube, Vimeo, собственный сайт HTML5-плеер Тильды). Popup-видео (всплывающее по ссылке в тексте). Комбинации видео и текста, видео и изображения в разных колонках. Назначение — учебные и мотивирующие видеоматериалы

VD06, VD06a — сдвоенный плеер (YouTube, Vimeo)

VD9, VD10 — popup-видео, всплывающее по ссылке. Удобно применять, когда текст — главное, а видео не должно мешать его прочтению. Видео всплывает только при выборе ссылки или кнопки.

VD11 — видео YouTube с собственной обложкой. Удобно при помещении в курс чужого видео или видео, у которого в YouTube отсутствует обложка.

BF101… — форма и кнопки. Для связи со слушателями.

BF702 — висячая кнопка для промотки страницы вверх. Удобство навигации.

BF703 — показывает спрятанные блоки. Контрольные вопросы, дополнительная информация.

BF802, BF803 — кнопки для загрузки файлов. Домашние задания, инструкции, дополнительная информация.

TM101… — команда. Представление авторов курса, тьюторов, консультантов, ассистентов.

TS101… — отзывы слушателей. Может применяться как на промо-страницах, так и в самом курсе.

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

HW101… — этапы. Описание любого стадийного процесса по этапам. Таймлайны, блоки со стрелками, колонки.

HW101−HW103 — вертикальные таймлайны (простые). Описание процессов в развитии.

HW101−HW103 — колонки со стрелками. Описание процесса в развитии. Цели и их достижение.

CN101… — контакты. Контактная информация, адреса, соцсети, карты, телефоны и т. п. Для улучшения учебного и административного взаимодействия.

CN401−CN403 — Контакты с картами. Любая географически-привязанная информация.

SN101… — соцсети. Для улучшения внеучебного взаимодействия.

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

PR101… — партнёры. Набор логотипов партнёров учебного курса и т. п.

T123 — вставка произвольного HTML-кода. Вставка всего, что не может Тильда сама. Интерактивные элементы, таймлайны, путешествия…

T143 — карта Гугл или Яндекс (в чистом виде, т. е. одна карта) с отметками нужных точек.

Т148 (см. также T838) — поиск Гугла по вашему сайту (по вашему курсу, теме)

T153 — вставка звука с SoundClaud. Языковые курсы, риторика, исторические речи, история музыки, медицина, зоология и др.

Т158, Т163 — вставка комментариев. Обратная связь со студентами. Коллаборативное обучение. Простейший форум после темы.

Т168 — вставка SlideSare. Онлайн презентация, онлайн документ — вставка без загрузки файла. Так реализуется связь с любым контентом сложной вёрстки, которую невозможно реализовать непосредственно в Тильде. К сожалению, В России контент с SlideShare заблокирован Роскомнадзором по решению суда.

T198 — подсказки для ссылок. Улучшают смысловую связность гипертекста в курсе.

T203 — превращает страницу в презентацию. Блоки показываются как отдельные слайды. Альтернативный способ подачи информации в теме и курсе.

Т208 — модификатор для печати. При помощи его можно расставить разрывы страниц при печати страницы. Можно применять если автор курса предполагает, что онлайн-курс можно применять в печатном виде.

Т635 — эффект печатной машинки. Для мотивации и привлечения внимания.

T838 — внутренний поиск по сайту, курсу, теме (средствами самой Тильды — см. также T148).

Меню на Тильде в Zeroblock

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

HTML-код фиксированного меню

HTML-код фиксированного меню, которое появляется при прокрутке

   .fixed < position: fixed; top: 0; width: 100%; transition: transform 250ms linear; /* время появления/исчезновения меню — 250 мс */ z-index: 99999; >.pinned < transform: translateY(0%) >.unpinned

HTML-код меню-гамбургера на zero-блоке

Необхоимо создать блок меню ME403 с заданной шириной. Затем создать Zero-блок с выравниванием всех элементов в контейнере относительно «window». В поле с кодом вставить номер Zero-блока и ширину, которую мы задали в меню-гамбургере. Следите, что все элементы в Zero-блоке правее границы в указанные вами количество пикселей будут не видны при открытии меню.

  .t451m__container < padding: 0px !important;>.t451m .t451m__close < background-color: transparent;>.t451m__close_icon span

Если вы front-end или back-end разработчик, то с легкостью добавите необходимые функции к этому коду. В выпадающем меню на Tilda нельзя выделить пункты при наведении. Это тоже решается с помощью html-кода.

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

  /*Настройка высоты вкладок */ .t228__list_item < height: 80px; display: inline-block !important; padding: 0 15px !important; >/*Настройка вкладок */ .t228 .t-menu__link-item < height: inherit; display: table-cell !important; vertical-align: middle; >/*Цвет вкладок при наведении */ .t228__list_item:hover < background:#171717; -webkit-transition: all 0.35s; transition: all 0.35s; >/*Настройка для блока FT302 */ [data-record-type="420"] < position: fixed; width: 100%; top: 80px; z-index: 990; left: 0; opacity: 0; -webkit-transition: all 0.35s; transition: all 0.35s; visibility: hidden; background: linear-gradient(to bottom, #171717 45%, #484848); >/*Появление меню при наведении на вкладку */ .t228__list_item:hover .mainmenu

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

Как сделать меню сайта

Чтобы добавить на сайт меню, откройте библиотеку блоков, категорию «Меню» и выберите подходящий тип. Настройте его через кнопку «Контент».

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

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

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

Укажите абсолютную ссылку на страницу, например:
http://mysite.com/about

Либо относительную:
/about

Адреса отдельных страниц задаются в настройках каждой страницы:

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

По этому адресу открыть страницу можете только вы. В меню она работать не будет.

2. Воспользоваться помощником для расстановки ссылок

Наведите мышку на пункт меню. Вы увидите два варианта, как можно поставить ссылку: «Выбрать страницу» и «Выбрать блок».

Если нажать «Выбрать страницу», то появится список страниц вашего сайта. Кликайте на нужную страницу и ссылка поставится автоматически.

Читать:

Как разблокировать телефон через гугл аккаунт

Если нужно поставить ссылку к блоку на странице, нажмите «Выбрать блок». Вы переместитесь на страницу для выбора блока. Кликните в тот блок, к которому должен быть совершен переход, при нажатии на пункт меню и ссылка поставится автоматически.

Как сделать меню сразу для всех страниц

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

Меню для перемещения внутри одной страницы

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

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

Чтобы переход по странице был плавным, добавьте модификатор «Плавный скрол до локальной якорной ссылки». Это блок Т178 в категории «Другое».

Меню для двуязычного сайта

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

Настройте «шапку» в обоих проектах, добавив в нее блок меню, в котором есть настройка языков: ME204, МЕ301, ME302, ME303, ME304, ME401, МЕ402, МЕ403. В содержании блока укажите языки и ссылки на проекты.

Как сделать второй уровень меню
Создать меню второго уровня можно двумя способами:
1. Добавить подпункты меню в основном блоке

Добавьте на страницу блок меню.

Перейдите в Контент блока → Список пунктов меню → нажмите «Добавить пункты второго уровня» — слева появятся иконки «+» .

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

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

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

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

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

2. Использовать блок ME601/ME601A

Добавьте на страницу любой блок меню — это будет меню первого уровня. Затем добавьте блок ME601 (Меню: второй уровень).

Блок ME601 позволяет добавить подразделы к пунктам основного меню. Они будут показываться при наведении в формате выпадающего меню. В мобильных версиях меню будет открываться по тапу.

Как это работает :
1) В блоке МЕ601: пропишите ссылку вида #submenu:more
2) В основном меню: в поле ссылка, напротив пункта, к которому вы хотите сделать подразделы, укажите #submenu:more.

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

Примечание : «#submenu:more» может быть любым словом, например: #submenu:portfolio или #submenu:aboutus

Как в тильде сделать содержание

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

Как сделать меню сайта

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

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

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

Добавить на страницу блок ME301 и задать в настройках блока следующие параметры:

Основные настройки > Поведение позиционирования — С наложением на следующий блок, но без фиксирования
Фон меню > Непрозрачность фона меню — 0%

Посмотреть страницу с меню в браузере
Фиксированное меню

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

Добавить на страницу блок ME301 и задать в настройках блока следующие параметры:

Основные настройки → Поведение позиционирования → Фиксация при скролле
Фон меню → Цвет фона меню — на выбор
Фон меню → Непрозрачность фона меню — 0%
Фон меню → Непрозрачность фона меню после начала скролла — 80%

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

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

Добавить на страницу два блока ME301. И задать им следующие параметры:

Первое меню (остается на обложке)
Основные настройки > Поведение позиционирования — С наложением на следующий блок, но без фиксирования
Фон меню > Непрозрачность фона меню — 0%

Второе меню (появляется при скролле)
Основные настройки > Поведение позиционирования — Фиксация при скролле
Основные настройки > Появление меню при прокрутке через N пикселей — 600px
Фон меню > Цвет фона меню — на выбор
Фон меню > Непрозрачность фона меню — 70%

Первое меню
Первое меню
Второе меню
Второе меню
Посмотреть страницу с меню в браузере
Меню «гамбургер»

Как себя ведет:
Меню в виде трех полосок в углу экрана, при клике на которое раскрывается полная версия.

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

Как настроить видимость блока только для мобильных устройств

Добавить на страницу блок ME401/402/403/404/405, настроить поведение позиционирования, цвет иконки меню и цвет фона самого меню и цвет фона для пунктов меню. В нашем примере параметры будут следующими:

Основные настройки → Поведение позиционирования — Фиксация при скролле
Иконка меню → Цвет — черный
Фон меню → Цвет фона закрытого меню — прозрачный
Фон меню→ Цвет фона открытого меню — белый

Посмотреть страницу с меню в браузере
Многоуровневое меню

Как себя ведет:
При клике на пункт меню появляется выпадающий список вложенных пунктов.

Для чего используется:
В объемных сайтах со сложной структурой.

Добавить пункты подменю у основного блока или использовать сочетание меню ME301(или любого другого с пунктами меню) и ME601.

Пункты подменю основного блока

Добавить на страницу любой блок меню, который содержит пункты меню.

Перейти в Контент блока → Список пунктов меню → нажать «Добавить пункты второго уровня» — напротив пунктов меню появятся иконки в виде символа плюс.

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

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

Подпункты меню будут показываться при наведении в формате выпадающего меню. В мобильных версиях меню будет открываться по тапу.

Блок ME601

Добавить на страницу блок ME301, настроить меню, как в примерах выше и добавить блок ME601 (Меню: второй уровень).

Как это работает :
1) В блоке ME601: пропишите ссылку вида #submenu:more
2) В основном меню: в поле ссылка, напротив пункта, к которому вы хотите сделать подразделы, укажите #submenu:more.

Примечание : «#submenu:more» может быть любым словом, например: #submenu:portfolio или #submenu:aboutus

Как в тильде сделать содержание

Меню на Тильде в Zeroblock

Как сделать меню сайта

Как в тильде сделать содержание

Похожие записи