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

Работа с текстовым редактором

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

Добавление и редактирование текста

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

Использование панели «Контент»
Редактирование текста при клике на блок

Форматирование текста

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

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

Типограф

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

Дополнительно размер, цвет, насыщенность, межстрочное и межбуквенное расстояние можно отрегулировать в меню «Настройки» у блока, с которым вы работаете: Настройки → Типографика

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

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

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

Нужно выделить текст и затем нажать на иконку «Очистить стили».

Текстовый редактор в Zero Block

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

Zero Block позволяет создать собственный уникальный элемент для сайта, поэтому содержит расширенные настройки. Такой настройкой для текста является параметр ‘Spacing’ — он дает возможность изменить кернинг (межбуквенное расстояние) у слова. В некоторых стандартных блоках такая опция также присутствует, но чтобы избежать некорректного отображения мы рекомендуем использовать её с осторожностью.

Как сделать навигацию
на сайте удобной

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

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

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

При создании меню старайтесь использовать не более 4−5 пунктов и в целом не перегружать его большим количеством элементов. Если пунктов меню все-таки получается много, как вариант, можно использовать меню «гамбургер».

Советы и инструкции по дизайну удобного меню сайта

sistersbakery.ru

www.linelo.ru

fyrclothes.tilda.ws/story01

Поставить ссылку на главную страницу на логотип

Пункт «Главная» в меню — это пережитки навигации сайта 90-х. Вместо этого сделайте кликабельный логотип.

Сейчас уже сложилась устойчивая модель: при клике на логотип происходит переход в начало главной страницы. Поэтому смело удаляйте «Главная» из меню и не забывайте добавить ссылку для логотипа.

Кстати, чтобы на Тильде сделать ссылку на главную страницу, достаточно поставить просто косую черту (/) вместо полного адреса в настройках блока.

Слеш ( / ) в поле «ссылка» будет вести на первый экран главной страницы сайта.

Сделать меню на одностраничном сайте

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

Если информации много, добавьте меню с ссылками на разделы страницы — это упростит навигацию.

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

Якоря и ссылки внутри страницы

Зафиксировать меню

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

Для того, чтобы сделать фиксированное меню в настройках блока в разделе «Основные настройки» выберите вариант позиционирования меню «Фиксация при скролле».

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

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

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

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

Добавить индикаторы (точки) для определения местоположения

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

На Тильде у таких навигаторов есть также всплывающая подсказка с названиями разделов для удобной навигации по сайту . Блок находится в категории «Меню» под номером ME604.

Показать процесс загрузки и прокрутки страницы

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

На Тильде блок индикатора находится в категории «Другое» под номером Т228. Чтобы индикатор работал, разместите блок в самом верху страницы.

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

Индикатор прокрутки страницы — очень наглядный пример навигации. Он подсказывает, в каком месте страницы находится пользователь, и загружается по мере прокрутки страницы вниз. Использовать индикатор прокрутки страницы есть смысл, когда длина страницы превышает 3−4 экрана.

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

Выделить кнопку с более важным действием

Из двух соседних кнопок более важная должна визуально выделяться.

Обычно первая кнопка целевого действия страницы, например — «Записаться на мероприятие», «Купить курс», «Посетить первый урок бесплатно». Вторая кнопка менее значительна, в большинстве случаев это ссылка на дополнительную информацию: «Подробнее», «О нас», «Как это работает».

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

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

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

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

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

В статье мы рассмотрели 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

Как сделать меню для многостраничного сайта в Tilda

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

Тая Штоль

Веб-дизайнер. Помогает бизнесу создавать эффектные и удобные сайты на Tilda.

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

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

Подготовка главной страницы

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

Как создать страницу с базовыми блоками

Зайдите в настройки своего сайта на Tilda и нажмите кнопку «Создать новую страницу». В появившемся окне выберите «Пустая страница».
Внутри самой страницы нажмите на чёрную кнопку «Все блоки» и добавьте любые из них. Например: «Обложка», «О проекте», «Преимущества» и «Контакты».

Страница готова. Теперь нужно её минимально настроить, чтобы будущее меню работало:

1. В правом верхнем углу нажмите на кнопку «Настройки».

2. Дайте название страницы и укажите её URL. Например, «Атриксис» и index.

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

3. Нажмите кнопку «Сохранить».

Как создать меню на главной странице

1. Нажмите на чёрную кнопку «Все блоки» и выберите подходящее меню в соответствующей вкладке. Например, МЕ201. Если меню появилось не вверху страницы, переместить его можно с помощью стрелки ↑.

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

2. Наведите курсор на ваше меню и нажмите кнопку «Контент».

3. В появившемся окне откройте «Список пунктов меню» и укажите названия ваших блоков из главной страницы. Чтобы пунктов было больше трёх, нажмите на кнопку «Добавить пункты меню».

4. Если вам нужно поменять пункты меню местами, зажмите правой кнопкой мыши иконку и тяните её вверх или вниз.

5. Нажмите кнопку «Сохранить и закрыть».

Чтобы меню работало, нужно привязать каждый пункт к конкретному блоку:

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

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

Как сделать переход на другую страницу

Если на вашем сайте есть отдельная страница блога, важно добавить на неё ссылку в меню, иначе её никто не найдёт.

Чтобы научиться это делать, создайте ещё одну страницу на сайте:

В редакторе главной страницы в левом верхнем углу около названия сайта нажмите на иконку . В появившемся меню выберите «Создать новую страницу».
В появившемся редакторе страницы выберите пустую и нажмите на кнопку «Все блоки».
Выберите любой блок из категории «Новости и потоки», например FD101.
Чтобы переименовать страницу, нажмите на кнопку «Настройки» в правом верхнем углу. Затем укажите в названии «Блог», а в URL — blog. Сохраните изменения и опубликуйте страницу.

Вернитесь на главную и откройте редактор меню. В строке «Блог» нажмите «Выбрать страницу», укажите свою страницу с блогом и сохраните её.

Обратите внимание на разный синтаксис. Если ссылка из меню ведёт на блок внутри той же страницы, она прописана через хештег — #rec. Если на другую страницу, то через слеш — /blog.

Ссылку на другую страницу можно указать самостоятельно — просто напишите её адрес в соответствующем поле. Но в таком случае не нужно указывать её полный путь, иначе при смене доменного имени этот пункт работать не будет. Например, вместо mywebsite.com/blog нужно указать просто /blog.

Как поставить одно меню на все страницы

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

Создайте новую страницу и выберите нужное меню. Например, ME204.
Пропишите в настройках страницы название и URL — header.
Наведите мышку на ваше меню и нажмите кнопку «Контент».
В появившемся окне откройте «Список пунктов меню» и укажите названия страниц, на которые будет вести меню.
У каждого пункта меню нажмите «Выбрать страницу» и выберите её.
Сохраните и опубликуйте страницу.

Как привязать меню сразу ко всем страницам

Перейдите в настройки сайта.
Откройте вкладку «Шапка и подвал».
Выберите в графе «Назначить шапку» страницу header.
Сохраните изменения.

Теперь в самом низу списка страниц сайта появился отдельный блок «Шапка и подвал», где лежит ваше меню. Его можно отредактировать в любой момент:

Если нужно сделать так, чтобы это меню не отображалось на какой-то конкретной странице, то можно её отключить.

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

Как настроить меню для многоязычного сайта

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

Меню, которые поддерживают смену языков: ME204, ME301, ME302, ME303, ME304, ME401, ME402, ME403.

Создайте страницу и добавьте меню с несколькими языками. Например, МЕ303.
Наведите курсор на блок с меню и нажмите кнопку «Контент».
Перейдите во вкладку «Языки» и укажите нужные, например Ru и En.
Прикрепите ссылки на соответствующие страницы: /ru и /en.
Сохраните изменения.
Перейдите в настройки страницы.
Укажите URL — ru.
Сохраните изменения.

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

Зайдите в «Настройки» в правом верхнем углу страницы.
Выберите пункт «Действия».
Выберите «Дублировать страницу».
Перейдите на новую страницу.
Измените текст страницы с одного языка на другой (например, с русского на английский).
Зайдите в «Настройки».
Измените название страницы и URL. Например, напишите Food travel и en.
Сохраните и опубликуйте страницу.

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

Как настроить сокращённое мобильное меню

Если вам не нравится, как выглядит стандартная мобилизация вашего меню, то его можно заменить. Например, можно сделать, чтобы в десктопной версии стояло меню ME204, а на мобильных экранах — ME401.

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

Выберите в библиотеке блоков нужное меню. Например, ME401.
Укажите в нём те же ссылки на блоки и страницы, что и в главном меню.
Наведите курсор на блок с главным меню и нажмите на «Настройки».
Настройте этому блоку диапазон видимости «больше 980 px».
Сохраните изменения.
Наведите мышку на блок меню для мобильных экранов и нажмите на «Настройки».
Настройте диапазон видимости «до 980 px».
Сохраните изменения.

Теперь на телефонах и планшетах будет отображаться меню ME401, а на больших мониторах — меню ME204.

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

Больше о Tilda

Осваиваем конструктор Tilda: делаем сайт-визитку с нуля
Учимся работать с Tilda: создание отзывчивого дизайна в Zero-блоках