Приветствую! Подробная текстовая инструкция + html-код к видео о выпадающем списке на Тильде
Каждый пункт из списка может открывать необходимые блок(и). Удобно использовать такой формат списка, если пунктов достаточно много. Например, какие-то тематики или города
Этапы создания выпадающего списка
- Создать блок меню ME602. Настроить его дизайн и задать необходимую ширину.
- Создать и адаптировать блоки для будущих пунктов выпадающего списка. Это могут быть зеро или стандартные блоки.
- Задать названия вкладкам в блоке ME602 и прописать ID блоков, которые должны открываться по этим вкладкам
- Вставить код на сайт для добавления новых вкладок в блоке ME602. Прописать в коде ID и названия дополнительных вкладок. На видео это показано на промежутке 2:25—4:20. Не забудьте убрать ненужные строки (вкладки) из кода
- Добавить второй код для стилизации блока ME602 под выпадающее меню
Если остались вопросы или Вы хотите заказать продающий лендинг, то напишите мне в соцсетях или в комментариях под видео.
Tilda. МЕНЮ САЙТА НА ТИЛЬДЕ | мобильное меню тильда
Источник: maxklimkov.ru
Как создать сайт на Тильде: пошаговая инструкция
Предприниматели регулярно делают веб-проекты: сайты для бизнеса, промо-страницы для акций и мероприятий, интернет-магазины. Для этого им не обязательно обращаться к дизайнеру или в веб-студию.
Конструктор сайтов Tilda поможет создать сайт, лендинг, небольшой интернет-магазин или блог без посторонней помощи. Рассказываем, как это сделать.
Добавьте блоки из библиотеки
Главная особенность сервиса — блочный редактор. Сайт создается из готовых смысловых секций, в которых элементы уже расставлены по своим местам. Выберите обложку, услуги, отзывы, форму заявки — всего в библиотеке больше 480 блоков в 28 категориях. Последовательно добавляйте блоки, чтобы собрать страницу сайта.
В каждом блоке дизайнеры уже правильно расположили текст, иконки и изображения. Просто наполните блок своим контентом. В настройках можно изменить шрифты, отступы, фон, размер кнопок — результатом будет уникальный сайт, не похожий на шаблон.
Все блоки из библиотеки уже адаптивны. Это значит, что они хорошо отображаются на экранах планшетов, телефонов и компьютеров без дополнительных настроек. Текст, картинки и другие объекты автоматически подстраиваются под размеры экрана.
Используйте шаблоны
Дизайнеры Тильды создали 180 шаблонов для разных бизнесов. В каталоге можно выбрать прототип для сайта компании, лендинга мероприятия, интернет-магазина или лонгрида для журнала. Всего 7 категорий: бизнес, магазин, событие, блог, контакты, анкета и внутренние страницы. Шаблоны подойдут, когда нужно протестировать идею или быстро собрать страницу для акции или вебинара.
Как сделать меню сайта на Тильде
Создайте блок с уникальным дизайном
Уникальный дизайн сайта можно создать во встроенном редакторе Zero Block. В нем профессиональные дизайнеры делают проекты без ограничений стандартных блоков.
Нулевой блок добавляется на страницу как стандартный, но внутри него можно работать как в графическом редакторе. Текст, изображения, кнопки, формы и другие элементы вы сможете расположить на экране как угодно. Просто перетаскивайте объекты и собирайте нужный дизайн.
В Zero Block отображение на мобильных устройствах нужно настраивать вручную — для этого переключитесь на режим редактирования для другого экрана и поменяйте расположение и размер элементов.
Добавьте анимацию
С помощью анимации можно акцентировать внимание пользователей на важном: преимуществах, заголовках с оффером, формах.
Создайте эффект появления заголовка и кнопки, поэкспериментируйте с эффектами параллакса и фиксации при скролле. С помощью пошаговой анимации в Zero Block можно заставить элементы двигаться и трансформироваться по вашему сценарию.
Не стоит применять анимацию к каждому блоку. Старайтесь привлечь внимание посетителя только к самым важным элементам сайта.
Получайте заявки от клиентов
Форма заявки — один из самых простых и эффективных способов превратить посетителей в клиентов. В библиотеке Тильды есть отдельная категория с формами. Вы сможете создать вертикальную, горизонтальную, pop-up или пошаговую форму для сбора контактов.
Каждая форма сделана как конструктор — можно добавить неограниченное количество различных полей, чекбоксов, выпадающих списков. А еще можно добавить прикрепление файлов, выбор даты или калькулятор — стоимость заказа будет рассчитываться автоматически перед отправкой формы. В настройках вертикальных форм есть тип поля «Разбиение по шагам», который позволяет превратить обычную форму в пошаговую.
Заявки из форм отображаются в личном кабинете. Можно настроить передачу заявок во внешние сервисы: e-mail, мессенджеры, google таблицы, CRM-системы, сервисы рассылок — всего доступно 18 сервисов для интеграции.
Внутри конструктора уже есть удобный инструмент для работы с заявками — Tilda CRM. С ним легко разобраться и организовать работу с клиентами, чтобы превратить больше заявок в продажи.
Источник: www.kp.ru
Как сделать сайт на Тильде: пошаговая инструкция
Автор статей и SMM-специалист Svoemedia Ирина Сорогина рассказала о первом опыте создания сайта на Тильде ― о том, с какими сложностями столкнулась и сколько времени на это ушло.
ирина сорогина
Я занимаюсь контентом, но захотела сделать лендинг онлайн-курса на Тильде. Чтобы сайт получился сильным, я расспросила об этапах создания сайта коллегу Антона Чикова — главного дизайнера оперативной группы Svoemedia. Советы Антона включила в этот материал.
Перед созданием сайта я отвела день на подготовку: продумала структуру сайта, подобрала контент, сделала прототип, выбрала цвета и шрифт.
Структура сайта
Структура сайта зависит от задачи и типа сайта. Например, студии дизайна интерьера нужно показать готовые проекты, а организатору онлайн-курса — рассказать о программе.
У многостраничников и интернет-магазинов своя структура, а у лендингов ― традиционная: оффер на первом экране, описание компании или продукта, призыв к действию, преимущества, отзывы и контакты.
Сайты на Тильде состоят из блоков и страниц. Один блок — один экран.
Количество блоков на сайте неограниченно, всё зависит от задач. Чем сложнее задача, тем больше блоков нужно: для сайта пейнтбольного клуба хватит 6‒7 блоков, а продавцу буровых установок может не хватить пятнадцати.
Подготовка контента для сайта
Дальше я подготовила текст и фотографии. Вот несколько советов по подготовке текста:
- Текст должен быть простым и понятным. Представьте, что вы рассказываете клиенту о своей компании или продукте. Так всё и запишите, а потом перечитайте вслух.
- Выделите главное и добавьте интересные подробности. Не старайтесь расписать на сайте всё, что возможно.
- Включите зануду: придирайтесь к словам, найдите неясные моменты, ответьте на свои вопросы.
В блоге Тильды есть статья, которая поможет написать полезный текст для сайта.
Я подобрала иллюстрацию для главной страницы, скачала фотографии авторов курса, сделала скриншоты страниц с уроками.
Используйте свои иллюстрации или покупайте на стоках. Мы берём фото с Энвато — недорого и с коммерческой лицензией. Обратите внимание на оптимальный размер фото для Тильды — 1680px по большей стороне.
Если у вас много иллюстраций на сайте, сожмите их. Иначе у пользователя с нестабильным интернетом сайт не загрузится и он уйдёт. Сжимать фото можно на бесплатном сервисе Optimizilla.
Прототипирование
Прототип — схема сайта, которая показывает, как будут располагаться кнопки, текст, картинки и другие элементы. Мне как начинающему ребята советовали нарисовать прототип на бумаге или расписать структуру сайта в гуглдоке.
В Svoemedia делают прототипы и согласовывают проекты сайтов в Фигме: в ней удобно работать командой и не приходится менять дизайн в Тильде.
Шрифты, цвета, иконки
Для начинающих самый простой способ подобрать шрифт и цвет — подсмотреть на других сайтах по схожей тематике. Несколько ресурсов, где можно вдохновиться: One Page Love, Lapa Ninja, Land-Book.
Если у вас уже есть корпоративные цвета и шрифт, используйте их. Шрифт и цвета можно посмотреть с помощью расширения для Google Chrome CSS Pepper.
Лучше не использовать на сайте больше 2‒3 цветов. Один цвет — основной, остальные — акцентные.
Советуем не использовать больше двух разных шрифтов. Лучше пользоваться шрифтовыми парами, уже подобранными дизайнерами Тильды. Забудьте о курсиве и шрифте Roboto — он «состарит» сайт».
Я не стала искать иконки, решила ограничиться стандартными иконками Тильды. Мои коллеги-дизайнеры для поиска иконок пользуются сайтами Flaticon или Thenounproject. На первом сайте иконки бесплатные, их можно скачать в любом цвете и в формате SVG. На втором сайте — хорошие подборки, можно найти несколько разных иконок в едином стиле.
курс
Landing Page
Узнать больше
- Научитесь создавать лендинги и отслеживать их эффективность
- Сделаете рабочую посадочную страницу для своего проекта уже во время обучения
- Разберётесь, как управлять вниманием пользователя, чтобы он совершал целевые действия
Вёрстка в Тильде
Вёрстка сайта заняла один день. Чтобы быстро собрать сайт на Тильде, я взяла готовый шаблон. Впоследствии от него осталось только три блока, остальное я добавляла из библиотеки блоков Тильды.
Собирать сайт из блоков было легко, интерфейс Тильды интуитивно понятный. Мне даже не пришлось обращаться к инструкциям на этом этапе. Если вам что-то будет неясно, в справочном центре Тильды — ответы на все вопросы.
Вот несколько блоков моего лендинга:
Все стандартные блоки Тильды хорошо сочетаются между собой. И лучше не вносить много правок.
Проверяйте, чтобы одинаковыми были цвета, формы кнопок, отступы, размер шрифта для заголовков разных уровней и основного текста.