Блоки из категории «Список страниц»
Блоки из этой категории позволяют отображать ссылки на страницы сайта в одном месте, например, это удобно для ведения блога или представления работ портфолио.
С чего начать
Создайте несколько страниц сайта, которые будут отображаться в блоке. В настройках каждой из них необходимо задать заголовок, описание, адрес страницы и загрузить бейджик.
Важно: заголовок, описание и бейджик, заданные в настройках страницы, будут автоматически отображаться в блоке со списком страниц.
Как добавить и заполнить блок
Перейдите в библиотеку блоков → категория «Список страниц» → добавьте подходящий блок.
В меню «Контент» добавленного блока отметьте галочками страницы, которые необходимо вывести в этом блоке и сохраните изменения.
Тут же можно указать цель для всех ссылок блока: открывать страницы в этом же окне или в новом, а также задать название для кнопки «Показать еще».
Настройки блока
Внешний вид блока редактируется в меню «Настройки». Тут вы можете изменить количество отображаемых страниц в ряду, высоту изображений, настроить типографику и анимацию.
Помимо этого, в настройках блока можно регулировать отображение информации о страницах в карточках. Например, вы можете отключить описание страниц или задать формат даты.
Как редактировать содержание блока
Изменения в содержании блока необходимо производить в настройках конкретной страницы. После сохранения изменений информация автоматически обновится в блоке списка страниц.
Например, чтобы изменить бейджик страницы, нужно перейти в ее настройки → вкладка «Бейджик» → загрузить новое изображение → сохранить изменения и опубликовать страницу.
В настройках страницы → во вкладке «Дополнительно» можно задать подзаголовок. Он будет отображаться в блоке списка страниц.
Как сделать ссылку на страницу, которой нет в проекте
В блоки этой категории можно добавить ссылку на страницу, которая не находится в проекте. Например, можно указать ссылку на сторонний ресурс.
Для этого необходимо создать новую пустую страницу сайта, в ее настройках указать заголовок, описание и загрузить бейджик. Далее перейти во вкладку «Дополнительно» и указать ссылку на сторонний ресурс в поле «Специальная ссылка для блоков с выбором страниц» → сохранить изменения и опубликовать страницу.
Как изменить порядок страниц
Порядок страниц в блоке зависит от того, как они расположены в списке страниц сайта. Eго можно изменить перетаскиванием или указав порядковые номера страниц в их настройках → вкладка «Дополнительно» → поле «Номер очередности в списке страниц».
Как в блоке IX04 сделать изображение во весь экран
По умолчанию изображения в этом блоке устанавливаются в половину ширины экрана. Чтобы изображение размещалось во всю ширину экрана, необходимо перейти в настройки страницы с этим изображением (бейджиком) → вкладка «Дополнительно» → поставить галочку у пункта «Сделать фичером в списке писем на главной».
Также вы можете добавить изображение отличное от бейджика, если страница установлена как фичер. Для этого загрузите изображение в поле «Картинка для фичерного бейджика».
Как сделать навигацию
на сайте удобной
Рассказываем, как помочь пользователю легко ориентироваться с помощью навигации по сайту. Статья будет полезна дизайнерам, предпринимателям и маркетологам, которые хотят создать удобный сайт самостоятельно. Поможет в этом продуманная навигация по сайту.
Мы рассмотрим 13 способов улучшения навигации на сайте с помощью простых инструментов за минимальное количество времени. В Тильде есть много готовых блоков с элементами навигации, из которых можно выбрать наиболее подходящий для вашего проекта вариант.
Сделать меню навигации для сайта лаконичным
Меню — один из главных инструментов навигации на сайте. Его удобство будет критическим.
При создании меню старайтесь использовать не более 4−5 пунктов и в целом не перегружать его большим количеством элементов. Если пунктов меню все-таки получается много, как вариант, можно использовать меню «гамбургер».
Советы и инструкции по дизайну удобного меню сайта
sistersbakery.ru
www.linelo.ru
fyrclothes.tilda.ws/story01
Поставить ссылку на главную страницу на логотип
Пункт «Главная» в меню — это пережитки навигации сайта 90-х. Вместо этого сделайте кликабельный логотип.
Сейчас уже сложилась устойчивая модель: при клике на логотип происходит переход в начало главной страницы. Поэтому смело удаляйте «Главная» из меню и не забывайте добавить ссылку для логотипа.
Кстати, чтобы на Тильде сделать ссылку на главную страницу, достаточно поставить просто косую черту (/) вместо полного адреса в настройках блока.
Слеш ( / ) в поле «ссылка» будет вести на первый экран главной страницы сайта.
Сделать меню на одностраничном сайте
Меню также может быть навигатором внутри одной страницы, когда вы делаете лендинг или лонгрид.
Если информации много, добавьте меню с ссылками на разделы страницы — это упростит навигацию.
Чтобы сделать на Тильде меню с ссылками на разные блоки внутри страницы, в настройках контента меню пропишите в ссылках номера этих блоков (номер каждого блока указан в его настройках), либо используйте якорные ссылки.
Якоря и ссылки внутри страницы
Зафиксировать меню
Чтобы посетитель в любой момент мог найти нужный раздел, можно сделать фиксированное меню — оно всегда будет оставаться в поле зрения при скролле. Такая навигация для сайта будет хорошим решением.
Для того, чтобы сделать фиксированное меню в настройках блока в разделе «Основные настройки» выберите вариант позиционирования меню «Фиксация при скролле».
Выделить активный пункт меню для постраничной навигации
Меню может показывать в каком разделе сайта находится пользователь, выделяя пункт, который относится к данному разделу.
В настройках Тильды можно установить дополнительные параметры отображения активного пункта меню. Есть несколько вариантов выделения активного пункта меню: можно изменить его насыщенность, непрозрачность и цвет. Кроме того, активный пункт меню можно подчеркнуть или зачеркнуть.
Такие же настройки можно применить и для пункта меню, на который наведена мышь. Не стоит переусердствовать, пункт меню достаточно выделить одним или двумя параметрами.
Добавить индикаторы (точки) для определения местоположения
Индикаторы в виде точек не отвлекают внимание от контента, но подсказывают в какой части страницы находится посетитель.
На Тильде у таких навигаторов есть также всплывающая подсказка с названиями разделов для удобной навигации по сайту . Блок находится в категории «Меню» под номером ME604.
Показать процесс загрузки и прокрутки страницы
Анимация загрузки страницы подскажет пользователю, что процесс идет, и контент загружается.
На Тильде блок индикатора находится в категории «Другое» под номером Т228. Чтобы индикатор работал, разместите блок в самом верху страницы.
В настройках блока можно задать цвет индикатора загрузки. Лучше использовать цвет, который будет выделяться на фоне контента и не сольется с цветом меню или обложки.
Индикатор прокрутки страницы — очень наглядный пример навигации. Он подсказывает, в каком месте страницы находится пользователь, и загружается по мере прокрутки страницы вниз. Использовать индикатор прокрутки страницы есть смысл, когда длина страницы превышает 3−4 экрана.
Чтобы добавить индикатор прокрутки на Тильде, используйте блок T333 из категории «Другое». В настройках блока можно задать цвет и толщину индикатора.
Выделить кнопку с более важным действием
Из двух соседних кнопок более важная должна визуально выделяться.
Обычно первая кнопка целевого действия страницы, например — «Записаться на мероприятие», «Купить курс», «Посетить первый урок бесплатно». Вторая кнопка менее значительна, в большинстве случаев это ссылка на дополнительную информацию: «Подробнее», «О нас», «Как это работает».
Самое простое — использовать яркий цвет для фона кнопки. Она должна быть контрастной по отношению к кнопке меньшего значения. Для второй кнопки достаточно использовать цветной бордюр без заливки, либо фон нейтрального цвета.
Помимо настроек стиля кнопок в Тильде есть дополнительные настройки, где можно отрегулировать стиль кнопки при наведении на нее мышью. В настройках можно указать цвет кнопки, бордюра, поменять насыщенность, цвет и шрифт текста, а также добавить тень и отрегулировать скорость анимации при наведении.
Как сделать блог
Блог обычно состоит из страницы, на которой собраны ссылки на посты, и отдельных страниц для каждого поста. В Тильде это можно реализовать двумя способами: через список страниц и через Потоки.
Создание блога через список страниц
Этот способ подходит, если вы хотите сделать блог, который обновляется до 2-3 раз в неделю и у каждого поста должен быть уникальный дизайн и структура. Страницами блога в данном случае являются отдельные страницы сайта, которые можно произвольно изменять, используя всю библиотеку блоков и Zero Block.
Посмотрите подробное видео или инструкцию ниже:
1. Создайте несколько постов на отдельных страницах. В настройках каждой страницы напишите заголовок и описание, добавьте картинку.
2. Создайте главную (индексную) страницу . Разместите на ней информацию, о чем блог, несколько слов об авторе, не забудьте про кнопки для расшаривания в социальных сетях.
Добавьте один из блоков из категории «Список страниц», это будет индексный блок с ссылками на ваши посты.
3. Зайдите в Контент блока и отметьте ваши посты . Название, описание и картинка подгрузятся автоматически.
4. Перейдите в Настройки сайта → Главная страница и назначьте страницу с индексным блоком как главную. Она будет открываться первой, когда посетители будут заходить на ваш сайт.
В дальнейшем, создав и опубликовав новый пост на отдельной странице, перейдите на главную страницу, отметьте страницу с новым постом в индексном блоке и опубликуйте.
Как делать красивые статьи на Тильде
В статье рассказываем основные приемы, как работать с текстом на Тильде. Эти правила помогут красиво и быстро верстать статьи и выработать стиль издания или блога. Правила верстки универсальны и пригодятся всем, кто работает с текстом и типографикой.
1. Текст должен легко читаться
Главная цель верстки статьи — читателю должно быть комфортно и удобно читать. Поэтому основной текст на сайте должен быть оформлен максимально просто.
Используйте ширину текста 8 колонок, а не 10 или 12. В кириллице для комфортного восприятия в строке должно помещаться от 55 до 70 символов. Если строки длинные, то, пока читатель переводит глаза от конца предыдущей строки к началу следующей, он может потерять строку или смысл текста.
Оформление элементов контента в статье (текста, заголовков, изображений и др).
Лонгрид «Мечты об Арктике»
Истории выпускников БВШД. Мария Саблина
Лифт Space. Михаил Пономаренко об изменениях методов продвижения в социальных сетях
В европейской культуре принято читать текст слева направо и поэтому выравнивать текст также лучше по левому краю, так его удобнее читать. Равнение по середине уместно только в узких колонках или когда очень мало текста — например, так можно выделить ключевую фразу.
Делим текст на абзацы
Для удобного чтения текст лучше всего располагать посередине страницы на уровне глаз. При ширине текста 8 колонок можно сделать отступ 2 колонки от левого края.
Разделяйте текст на смысловые абзацы и используйте отбивку между ними, чтобы человек не потерялся в полотне слов. Не бойтесь делать побольше вертикальные отступы между главами статьи, дайте тексту дышать.
Дополнительная пустая строка между двумя абзацами.
Баухауз: когда стул — предмет искусства. Лонгрид
Журнал Oh, my Moscow! Машина времени. Часть 1
Магадан — культурный город. Лонгрид «Ледник»
Немного математики: отступ между заголовком и относящимся к нему текстом должен быть равен расстоянию между абзацами или быть в полтора раза больше. Отступ над заголовком должен быть в раза 2 больше, чем под ним. Так заголовок не прилипнет к предыдущей главе и будет относиться к последующему тексту.
Выбираем шрифты, которые не отвлекают от содержания текста
Выбор шрифтов с засечками или без зависит исключительно от тематики и стилистики сайта.
Акцидентные шрифты не подходят для набора основного текста, потому что они сложны для восприятия, но их можно использовать для заголовков.
Короткий штрих или расширение на конце основного или дополнительного штриха, обычно перпендикулярного к засечке.
Акцидентные шрифты
Декоративные и стилизованные шрифты, а также заголовочные и выделительные начертания практически всех шрифтов. Чаще всего используются в крупных кеглях в заголовках или ключевых фразах. Их основная задача — привлечь внимание читателя.
Лучше выбрать нейтральные текстовые шрифты, которые не будут отвлекать читателя от содержания. Хорошо читаются шрифты без засечек PT Sans, Arial, Futura, Open Sans. Из шрифтов с засечками в сплошном тексте хорошо считываются PT Serif, Times New Roman, Baltika или Charter.
Подробнее о выборе шрифтов для статьи
На Тильде в настройках сайта вы можете выбрать сочетание шрифтов из нескольких готовых вариантов, либо выбрать шрифт вручную или загрузить свой.
Оптимальная насыщенность шрифта для основного текста — это normal (нормальный). Light (тонкий), super light (очень тонкий) или bold (жирный) не стоит использовать — текст будет плохо читаться.
Если в статье много текста, используйте размер шрифта 18 или 20 px. А если много изображений и текст используется минимально, можно выбрать шрифт покрупнее — 22 или 24 px.
Используем возможности Тильды
В Тильде есть инструмент — типограф, который автоматически заменит все неправильные кавычки и тире, уберет лишние пробелы, а также поставит неразрывные пробелы, чтобы в тексте не было «висячих» предлогов.
«Висячие» предлоги
Однобуквенные предлоги и союзы в конце строки. Разрыв строки после предлога искажает повествование текста и смотрится неэстетично с точки зрения типографики.
Когда в тексте неправильные кавычки и тире, текст выглядит неаккуратно и замусорено. Например, у дефиса «-» и тире «—» в русском языке разные значения. Дефис — знак орфографический, а тире — пунктуационный.
Французские кавычки «елочки» — другая важная часть русской типографики, им отдается предпочтение. »Английские двойные» кавычки используются в английских текстах, но в русских им не место — это все равно, что писать латиницей русские слова.
Типограф используется во время режима редактирования текста. Как будет выглядеть окончательный вариант текста с применением типографа можно увидеть в режиме предпросмотра страницы и в опубликованном виде
2. Типографика: делаем текст визуально интересным
Порядок в тексте: заголовок, подзаголовок и лид
Чтобы информация лучше воспринималась, текст разбивают на смысловые части. Заголовки, подзаголовки и разделение на абзацы — все это делает текст более читабельным. Используйте один стиль заголовков, подзаголовков и основного текста в статье — чем чище и последовательней типографика, тем лучше читается текст.
Самыми крупными должны быть заголовки. Не бойтесь использовать большой размер шрифта, от 52 пикселей и больше. Контраст в типографике смотрится красиво и интересно, а читателю проще ориентироваться в статье. Еще к заголовкам можно применить другой шрифт, контрастный по отношению к шрифту основного текста.