в каком блоке содержится сравнительная характеристика товара или услуг в tilda
Продажа товара с выбором параметров
В Тильде есть два способа добавления товаров — через Каталог товаров и через Контент блока. Добавление параметров в этих способах различается.
Через Каталог товаров можно добавить несколько вариантов товара, добавить необходимые свойства (в том числе фотографии) для всех вариантов и прописать их. Также кроме вариантов можно задать дополнительные опции, которые влияют на цену товара, например, опция подарочной упаковки или дополнительных аксессуаров.
Через Контент блока можно добавить только опции (параметры), которые работают так же как дополнительные опции в Каталоге, но их можно сделать аналогом свойств товара.
Посмотрите видеоурок о том, как добавить варианты и опции товаров или прочитайте подробную инструкцию ниже.
Варианты товара — это уникальные наборы свойств товара, которые отличаются друг от друга. Чтобы сделать уникальный вариант, нужно добавить свойства (например, цвет, размер, и т.д) и создать вариант, указав ему конкретный цвет, размер, цену и любое другое свойство.
Дополнительные опции — это параметры, которые являются общими для всех вариантов товара. Например, каждому варианту можно добавить упаковку или дополнительную услугу. Каждая дополнительная опция может влиять на конечную цену товара
Характеристики — это параметры, которые общие для всего товара и его вариантов, но не влияют на его цену. Например, это может быть страна-производитель товара, материал.
О продукте или услуге: примеры оформления блоков
Сайт на Тильде состоит из различных смысловых блоков. О том какие еще группы блоков существуют, мы говорили в статье Структура сайтов и прототип лендинга. Сразу после заголовка в обложке клиенту нужно рассказать о продукте, проекте или услуге. Как может выглядеть обложка, он же первый экран смотрите здесь.
Рассказ о продукте — очень обширная группа блоков. Здесь совершенно нет границ фантазии, ведь от того как вы презентуете свой продукт, равно заинтересуется ли посетитель.
Безусловно, в данном случае предполагается четкая презентация проекта. В которой коротко и ясно, все то, что нужно знать клиенту. Помним, что слишком длинные описания и «вода», как правило, отталкивает людей. Поэтому только самое важное, то, что должно помочь принять решение в пользу вашего продукта или услуги.
Что входит в группу блоков О продукте или услуге: примеры
Давайте вспомним, о чем мы говорим, когда хотим понравиться?
Стараемся подчеркнуть достоинства, сразу сообщить почему следует к нам обратиться.
Так что же обычно помещают в эту группу блоков? Для кого этот продукт (услуга), о компании, как проходит обучение, подробности курса, как сделать заказ и пр.
Итак, теперь можно рассмотреть примеры.
Подробное описание продукта
Одностраничный сайт посвященный программе питания для похудения: ниша красота и здоровье
рис. 1
Обратите внимание, как расположены текст и картинка, выбранное цветовое решение. Зеленые оттенки в дизайне — правильный выбор! Зеленый экологичный цвет, дружелюбный. Это идеальный цвет для сайта, посвященного здоровью и красоте.
В представленном блоке (рис.1) есть: заголовок, подзаголовок, изображение, перечень составляющих программы, сопровождающийся иконками.
рис. 2
Заголовок раздела с описанием курса по модулям вынесен в отдельный блок в виде текста, выделенного желтым цветом (рис.2). Это отличное решение, ведь яркий фон сзади сразу привлекает внимание и не сможет быть не замеченным.
Далее идет стандартное решение: текст + картинка, которое идет в пользу к восприятию. Содержание картинки отражает написанное и мотивирует к действию присоединиться к точке старта. Подобным образом расписаны и следующие модули курса.
Ниже я привела другой вариант оформления программы обучения (рис.3): модули с подробностями — что внутри. В данном варианте таблички расположены каруселью. Положительный выбор дизайнера, так как карусель, как правило, имеет прокрутку вправо — влево, и не удлиняет и без того длинные одностраничники. Если посетитель сайта твердо намерен пойти на обучение, то он пролистает карусель и изучит подробности уроков модуля.
рис. 3
Подробнее об обучении: помогает понять формат проведения занятий:
Этапы с нумерацией сразу дают правильный настрой и понимание структуры. Убедительные карточки с обещанием результатов подкрепляют уверенность в том, что это необходимо для каждого человека.
Формат обучения в виде карточек, на которых расположены наглядные иконки, жирным выделены заголовки пунктов и дано краткое описание — создает впечатление надежности. Создается образ четкой структуры и экспертности спикера.
Для кого
В этой группе помещаются тексты с перечнем — кому может подойти продукт или услуга. Для наглядности помещайте картинки в виде иконок или изображений по теме. Подберите точные попадания в Целевую аудиторию, чтобы заинтересовать посетителя!
Посмотрите на примерах, как это сделали дизайнеры:
Программа курса
Опишите поэтапно программу, если вы создаете сайт для онлайн-курса или мастер-класса. Как построен, из чего состоит, что нужно будет делать? Не забывайте, что банальный перечень пунктов идеально разбавляют иконки, цифры или интересные элементы, как на этих примерах:
Как проходит обучение
Несколько интересных решений: стандартно — заголовок и описание. А вот как они расположены смотрите ниже:
Тарифы и цены
Если ваша задача разместить блок с ценами и описанием тарифа, то вот несколько вариантов оформления. Примеры, как оформить цены:
рис. 4
Тарифы с описанием оформлены ступеньками (рис.4), согласитесь, выглядит неплохо.
Теперь вы познакомились с блоками О продукте или услуге и посмотрели примеры. Я собрала для вас разные формы подачи от классического стиля картинки, иконки и текста, так и более креативных, например, каруселью. Так же вы могли обратить внимание на тот факт, что смелые решения смотрятся очень даже не плохо, наоборот — интересно и привлекает внимание.
Смотрите в других статьях:
Как сделать сайт на Тильде: пошаговая инструкция
Автор статей и SMM-специалист Svoemedia Ирина Сорогина рассказала о первом опыте создания сайта на Тильде ― о том, с какими сложностями столкнулась и сколько времени на это ушло.
Я занимаюсь контентом, но захотела сделать лендинг онлайн-курса на Тильде. Чтобы сайт получился сильным, я расспросила об этапах создания сайта коллегу Антона Чикова — главного дизайнера оперативной группы Svoemedia. Советы Антона включила в этот материал.
Перед созданием сайта я отвела день на подготовку: продумала структуру сайта, подобрала контент, сделала прототип, выбрала цвета и шрифт.
Структура сайта
Структура сайта зависит от задачи и типа сайта. Например, студии дизайна интерьера нужно показать готовые проекты, а организатору онлайн-курса — рассказать о программе.
У многостраничников и интернет-магазинов своя структура, а у лендингов ― традиционная: оффер на первом экране, описание компании или продукта, призыв к действию, преимущества, отзывы и контакты.
Сайты на Тильде состоят из блоков и страниц. Один блок — один экран.
Чтобы продумать структуру лендинга, я использовала шаблон с универсальными блоками и оставила только те, что решают мою задачу: обложка, команда, главные цифры, содержание курса, цены, FAQ, контакты.
Количество блоков на сайте неограниченно, всё зависит от задач. Чем сложнее задача, тем больше блоков нужно: для сайта пейнтбольного клуба хватит 6‒7 блоков, а продавцу буровых установок может не хватить пятнадцати.
Подготовка контента для сайта
Дальше я подготовила текст и фотографии. Вот несколько советов по подготовке текста:
В блоге Тильды есть статья, которая поможет написать полезный текст для сайта.
Я подобрала иллюстрацию для главной страницы, скачала фотографии авторов курса, сделала скриншоты страниц с уроками.
Используйте свои иллюстрации или покупайте на стоках. Мы берём фото с Энвато — недорого и с коммерческой лицензией. Обратите внимание на оптимальный размер фото для Тильды — 1680px по большей стороне.
Если у вас много иллюстраций на сайте, сожмите их. Иначе у пользователя с нестабильным интернетом сайт не загрузится и он уйдёт. Сжимать фото можно на бесплатном сервисе Optimizilla.
Прототипирование
Прототип — схема сайта, которая показывает, как будут располагаться кнопки, текст, картинки и другие элементы. Мне как начинающему ребята советовали нарисовать прототип на бумаге или расписать структуру сайта в гуглдоке.
В Svoemedia делают прототипы и согласовывают проекты сайтов в Фигме: в ней удобно работать командой и не приходится менять дизайн в Тильде.
Шрифты, цвета, иконки
Для начинающих самый простой способ подобрать шрифт и цвет — подсмотреть на других сайтах по схожей тематике. Несколько ресурсов, где можно вдохновиться: One Page Love, Lapa Ninja, Land-Book.
Если у вас уже есть корпоративные цвета и шрифт, используйте их. Шрифт и цвета можно посмотреть с помощью расширения для Google Chrome CSS Pepper.
Лучше не использовать на сайте больше 2‒3 цветов. Один цвет — основной, остальные — акцентные.
Советуем не использовать больше двух разных шрифтов. Лучше пользоваться шрифтовыми парами, уже подобранными дизайнерами Тильды. Забудьте о курсиве и шрифте Roboto — он «состарит» сайт».
Я не стала искать иконки, решила ограничиться стандартными иконками Тильды. Мои коллеги-дизайнеры для поиска иконок пользуются сайтами Flaticon или Thenounproject. На первом сайте иконки бесплатные, их можно скачать в любом цвете и в формате SVG. На втором сайте — хорошие подборки, можно найти несколько разных иконок в едином стиле.
курс
Landing Page
Вёрстка в Тильде
Вёрстка сайта заняла один день. Чтобы быстро собрать сайт на Тильде, я взяла готовый шаблон. Впоследствии от него осталось только три блока, остальное я добавляла из библиотеки блоков Тильды.
Собирать сайт из блоков было легко, интерфейс Тильды интуитивно понятный. Мне даже не пришлось обращаться к инструкциям на этом этапе. Если вам что-то будет неясно, в справочном центре Тильды — ответы на все вопросы.
Вот несколько блоков моего лендинга:
Все стандартные блоки Тильды хорошо сочетаются между собой. И лучше не вносить много правок.
Проверяйте, чтобы одинаковыми были цвета, формы кнопок, отступы, размер шрифта для заголовков разных уровней и основного текста.
Мысленно проведите две линии слева и справа ― элементы сайта не должны выходить за эти линии.
Отрегулировать ширину блока можно в его настройках. Можно установить ширину 12 колонок.
Чтобы сайт на Тильде не выглядел шаблонным, его можно кастомизировать. Есть несколько простых приёмов, которые помогут сделать сайт непохожим на все остальные:
Опытные дизайнеры часто всё делают в zero. Начинающим для кастомизации лучше попробовать сторонние сервисы, которые легко интегрируются с Тильдой. Например, на сайт можно добавить фотогалерею из Instagram, калькуляторы, интерактивные картинки.
Действия перед публикацией сайта
Я собрала всё в Тильде, но мне предстоит ещё один важный этап: оптимизация и тестирование. У нас есть чеклист, который дизайнеры Svoemedia каждый день используют в работе. В нем всё, что нужно сделать перед публикацией сайта с нашими лайфхаками. Ещё у Тильды есть инструкции для каждого из этих действий.
Я перечислю только самое важное, без чего сайт не будет функционировать полноценно. Вот что нужно сделать:
Что в итоге
Чтобы сделать сайт на Тильде, за который не будет стыдно, нужно продумать структуру, написать текст, подобрать картинки, собрать всё в Тильде, оптимизировать, протестировать и опубликовать.
Чтобы сайт получился достойным, вдохновляйтесь сайтами из вашей ниши. Смотрите, что в них работает и почему, применяйте лучший опыт на своём сайте.
Создание лендинга заняло 2 дня: один на подготовку контента и прототип и день на вёрстку в Тильде, оптимизацию и тестирование.
В каком блоке содержится сравнительная характеристика товара или услуг в tilda
Tilda Publishing запись закреплена
Блоки лендинга: Часто задаваемые вопросы
Чаще всего лендинг состоит из нескольких смысловых блоков, каждый из них выполняет определенную задачу. Сегодня мы расскажем об ответах на часто задаваемые вопросы.
С помощью блока можно проработать возражения клиентов. Это хороший ход — поймите страхи и сомнения вашего пользователя, превратите их в вопросы и развернуто напишите ответ. Часто блок оформляют как чат или интервью.
Ещё с помощью блока с часто задаваемыми вопросами можно структурировать информацию о продукте и сопутствующих услугах. Например, чтобы рассказать про доставку, сплошной текст можно трансформировать в вопросы и ответы. Понять нюансы будет проще.
В библиотеке Тильды такие блоки можно найти в категории «Текстовый блок».
Подробнее про другие функциональные блоки ищите по хэштэгу #созданиелендинганатильде или читайте в третьей лекции бесплатного курса Tilda Education «Создание Landing Page»: https://tilda.education/courses/landing-page/anatomiy..
🤓 С помощью блока можно проработать возражения клиентов. Это хороший ход — поймите страхи и сомнения вашего пользователя, превратите их в вопросы и развернуто напишите ответ. Часто блок оформляют как чат или интервью.
Ещё с помощью блока с часто задаваемыми вопросами можно структурировать информацию о продукте и сопутствующих услугах. Например, чтобы рассказать про доставку, сплошной текст можно трансформировать в вопросы и ответы. Понять нюансы будет проще.
В библиотеке Тильды такие блоки можно найти в категории «Текстовый блок».
Обзор конструктора сайтов Tilda: возможности, ограничения, советы
Руководитель и стратег в студии веб-дизайна и контент-маркетинга Svoemedia Александра Иващенко рассказала блогу Нетологии, как её команда использует Tilda в работе.
Сайты на конструкторе сайтов Tilda я начала делать ещё в 2014 году. Тогда это был настоящий прорыв по визуальной части: было ощущение, что прикоснулся к искусству, и до конца не верилось, что оно станет таким доступным. В маленькой группе на 400 человек (сейчас подписчиков 18 тысяч) мы обсуждали возможности Тильды, поддерживали команду платформы и давали советы.
Сейчас, в рамках Svoemedia, создание сайтов на Tilda стало полноценным направлением нашего бизнеса и предпочитаемой CMS. О её возможностях, функциях и об опыте нашей команды хочу рассказать в этом обзоре Тильды.
Дизайн: что можно сделать на Тильде и как это будет выглядеть
Начать дизайн сайта можно с чистого листа, используя Zero-блоки, или с готовых шаблонов и блоков, которые можно группировать по типу конструктора.
Готовые шаблоны
Шаблоны разделены на группы по тематике и назначению: Бизнес, Магазин, Событие, Контакты, Анкета.
Готовые блоки
Из библиотеки блоков можно выбрать самостоятельные дизайн-элементы: меню, текстовые блоки, изображения, видео, формы и кнопки, этапы, команда, отзывы, карты Гугл и Яндекс и так далее.
Готовые блоки автоматически подстраиваются под разные устройства — компьютер, смартфон, планшет. Для корректировки отступов или размера текста задайте режим отображения внизу настроек блока, двигая ползунок:
Подробнее о корректировке мобильной версии читайте в справочнике Тильды.
Текст и изображения
Для редактирования текста нужно кликнуть по нему. То же можно сделать из меню «Контент» (в стандартных блоках) и через «Редактировать блок» в Zero. Встроенный в редактор типограф для текстов убирает висячие предлоги, ставит правильные тире и кавычки.
Изображения можно загрузить с диска, перетащить, вставить ссылку на изображение в интернете. В стандартных блоках можно менять цвета, шрифты, иконки.
Zero-блоки
Для реализации сложных идей, мы используем Zero-блоки. В Zero-блоках все элементы создаются самостоятельно. Адаптировать сайт для разных устройств тоже нужно вручную.
Работа в Zero-блоке похожа на работу в графическом редакторе, только созданный индивидуальный дизайн можно сразу посмотреть в Тильде
Елена Сартасова, шеф-дизайнер Svoemedia
«Zero-тренды и минимализм в дизайне сайтов диктуют дизайнерам задачу больше акцентировать внимание на колористике и типографике. Главное – это контент, а дизайнер лишь создаёт атмосферу, помогающую считать его суть. Чем чище и однообразнее фоны и проще графика на сайте, тем интуитивнее и интеллектуальнее воспринимается сайт пользователем: когда ничто не мешает, сайт действительно хочется читать, а не просто рассматривать его дизайн. Простая блочная структура Тильды позволяет довольно легко создавать такой дизайн за счёт простоты компонентов: фон, текст, форма и картинка, которые есть в Zero-блоке и стандартных блоках».
С помощью Zero-блоков можно делать анимацию, но если сайт предполагает постоянную редактуру (особенно это актуально для сайтов мероприятий), нужно будет вносить правки во все разрешения.
Елена Сартасова, шеф-дизайнер Svoemedia
«Микроанимации — это возможность сделать сайт живым и говорящим. Тильда дает возможность настройки такой анимации. Сайт, дающий обратную тактильную связь, создает игру с пользователем, продлевая этим его время пребывания на сайте и упрощает знакомство с контентом».
Проанализировав задачи клиентов, мы создали библиотеку шаблонов на Тильде для типовых решений. Мы хотим, чтобы заказчики клиентов быстрее находили на сайтах то, что им нужно. А клиенты экономили деньги для развития бизнеса: такое решение позволило нам сократить стоимость разработки сайта для клиента в 12–15 раз.
Тильда позволяет делать эффектные сайты и, если овладеть её инструментами, сложно наткнуться на ограничения: немного изменив взгляд на элемент, можно адаптировать его без потерь.
Сценарии использования: для каких типов проектов подходит Тильда
Тильда — комфортная среда для создания, публикации, хранения и модификации проектов. В агентстве мы работаем преимущественно с большими проектами по классической схеме веб-разработки: схема, прототипирование, контент, дизайн, техническая оптимизация.
Тильда позволяет исключить полностью дорогостоящие этапы HTML-верстки и программирования и сократить стоимость разработки для нашей команды и клиента.
Александра Назмеева, менеджер проектов Svoemedia
«Тильда позволяет вовсе не привлекать полноценного разработчика даже для многостраничных сайтов (исключение — сложные калькуляторы и иные нетиповые задачи). По сравнению с разработкой сайтов полного цикла, сайты на Тильде сокращают время создания крупных проектов до 1,5–2 месяцев, включая этапы от прототипирования и написания контента до запуска работоспособной версии».
Сайт компании и лендинги
Если нужен сайт-презентация продукта или услуги, посадочная страница с формами обратной связи — Тильда подойдёт идеально.
Функции личного кабинета пользователя в Тильде на данный момент нет. В проекте компании UNIUP все презентационные страницы и блог сделаны на Тильде, а личный кабинет — внешняя ссылка на другой сайт:
Личный сайт или портфолио
На Тильде можно собирать сайты-портфолио, личные сайты специалистов.
Контент-проекты
На Тильде мы сделали и ведём самое большое медиа по химической промышленности в России: проект Инжинирингового химико-технологического центра в Томске.
Для этой ниши цифры очень приятные — 10 000 посетителей в месяц. По словам Ильи Мазова, директора по развитию ИХТЦ, контент-проект приносит от 15% годового оборота компании.
Максим Колташов, главный редактор SVOEMEDIA
«Я рад, что команда чаще всего использует для вёрстки статей именно Тильду: это позволяет разместить нужные блоки (подписка, ссылка на соцсети, перелинковка на другие материалы) быстро и именно там, где мне это необходимо. Результат всегда эстетически приятен, что улучшает поведенческие характеристики и в итоге положительно сказывается на ранжировании сайтов».
Полезные функции Тильды для контент-проектов:
В Тильде есть возможность дополнить текстовый контент фото- или видеоматериалами, что делает её удобным решением для публикации книг и лонгридов.