Статья подготовлена по материалам вебинара «Как создать продающий сайт. На примере создания сайта в Tilda», организованного Школой регионов. Спикер: Ольга Реутова, директор по маркетингу компании «Фабрика сайтов», эксперт в digital- и performance-маркетинге, веб-аналитике и управлении проектами.
Школа регионов Деловой среды — это бесплатные образовательные программы сроком от двух недель до 14 месяцев для владельцев и руководителей бизнеса в России. В 2021 году Школа регионов провела больше 700 обучающих мероприятий в 43 регионах суммарно для 54 000 участников. Обучение проходит в онлайн-формате и на базе региональных центров «Мой бизнес».
Программы по актуальным темам для бизнеса: развитию лидерства, управлению командой, бизнес-проектированию, выходу на маркетплейсы и другим — ведут сертифицированные спикеры Деловой среды.
Деловая среда Премиум
Вступайте в закрытый клуб и получите доступ к материалам по развитию бизнеса
Подготовка контента для сайта
- продажа — продать представленные на сайте товары или услуги;
- презентация или портфолио бизнеса, эксперта — рассказать о себе, своих компетенциях, побудить начать сотрудничество;
- лидогенерация — получить контакты пользователей;
- подписка — монетизировать доступ к эксклюзивному контенту;
- трафик — собрать ядро аудитории, чтобы показывать релевантную рекламу;
- оказание услуг — побудить пользоваться сервисом по бронированию, оформлению доставки или покупке билетов;
- маркетинговый онлайн-инструмент — собрать данные о пользователях для аналитики.
❗️ Внимание
ЛУЧШИЙ КОНСТРУКТОР САЙТОВ ТИЛЬДА: обзор и обучение
Контент — это все материалы в текстовом, видео- и аудиоформате, которые работают на то, чтобы цель сайта была достигнута. Важно подготовить контент заранее. Запускать пустой сайт — ошибка.
При подготовке контента желательно, чтобы он отвечал на два основных вопроса, возникающих в голове у потенциального клиента:
- Чем полезен этот продукт, зачем он мне нужен?
- Почему я должен купить его именно здесь?
Полезно провести мозговой штурм, проанализировать поведение текущих клиентов. Зафиксировать, что им нравится, какие у продукта сильные стороны и возможности, чем можно покрыть слабые стороны и риски.
Пример
Слабой стороной может выступать высокая цена. При этом продукт отличается высоким качеством, а в его стоимость входят сервис и гарантия, чего нет у конкурентов.
Советы по подготовке контента
Первая фраза о компании или о продукте должна быть емкой, давать четкое представление о специфике бизнеса и предлагаемых товарах или услугах.
Описание деятельности компании обычно содержит ее ключевые характеристики и преимущества. Среди задач описания — рассказать о команде, создающей продукт. Клиенты не будут покупать у абстрактной малоизвестной компании, они купят у живых людей.
Отзывы реальных пользователей и цифры, особенно с привязкой к выгодам клиента, полезным техническим характеристикам, повышают доверие к компании и ее продукции. Их желательно собирать, обновлять и показывать посетителям. Конкретика работает лучше абстрактных фраз.
Сайт на Тильда или сайт на WordPress: что может убить ваш бизнес?
Пример
«Аккумулятор заряжается за 30 минут до 100%» лучше, чем «аккумулятор заряжается с впечатляющей скоростью».
Формулировки. Нужно постараться избегать банальных фраз и «воды» вроде «наша компания динамично развивается», «у нас работают квалифицированные специалисты», «у нас хорошее соотношение цены и качества». Так о себе может сказать кто угодно. Выделиться не получится.
Видео и анимация. Тильда позволяет добавлять не только тексты и изображения, но и видео. Клиентам иногда проще посмотреть, как работает продукт, чем вникать в описание. Анимация и изображения в формате .gif помогают акцентировать внимание потенциальных клиентов. Однако перебарщивать с ними не стоит: когда на странице все двигается, клиенту неудобно читать основной текст.
Структура проекта предполагает описание того, что должно быть на каждой странице. Если она одна, то как устроена. Описание удобнее подготовить заранее в текстовом редакторе. После этого оценить объем контента, который придется подготовить, продумать, на скольких страницах его реально уместить.
В конструкторе Tilda можно делать многостраничные сайты — до 500 страниц, организовав несколько разделов, например блог, отзывы, контакты, история компании и другие.
Telegram Деловой среды
Работающие советы и анонсы мероприятий — каждый день в нашем Telegram-канале
Создание прототипа сайта
Для создания прототипа необходимо собрать идеи и проанализировать сайты конкурентов. Мониторинг проводится не для того, чтобы полностью скопировать их структуру, шаблоны, шрифты и изображения, а чтобы найти варианты «лучших практик», развить насмотренность, понять тенденции в современном «сайтостроении».
Идеи важно адаптировать под свои задачи и концепцию бизнеса. Для поиска идей может быть полезна подборка Madeontilda, где собраны примеры сайтов на Тильде.
В содержании сайтов конкурентов можно рассмотреть:
- представление и пункты меню;
- контент на главной странице;
- имеющиеся разделы;
- типографику;
- сочетание цветов;
- удачные фотографии, их представление;
- бросающиеся в глаза ошибки, которые допустили конкуренты, — чтобы понять, как делать не надо.
С учетом планируемого контента, структуры и собранных идей создается прототип сайта — схематичный эскиз основных блоков и их расположения.
Пример
В прототипе можно сначала показать блок с самим продуктом, затем — три его главных преимущества списком, чтобы они бросались в глаза. Затем рассказать кратко о компании, команде, показать сертификаты и отзывы.
Прототип можно нарисовать фломастерами или ручками на листе А4 либо в программах вроде Figma. Оптимально сделать несколько вариантов прототипов в рамках мозгового штурма, затем обсудить их с коллегами и выбрать наиболее подходящий.
Возможности Zero Block в Tilda тоже позволяют создать прототип, используя готовые блоки и их элементы.
В прототипе используются стандартные элементы:
- текст обозначается полосами, заголовки — более толстыми линиями;
- изображения — квадратами и прямоугольниками, перечеркнутыми по диагонали;
- шапка и подвал — большой полосой, отделяющий верх и низ страницы;
- на обложке толстая линия — заголовок, тонкие линии — описание, короткие полоски вверху — меню.
Пример прототипа, источник unsplash.com
Верстка сайта
Когда структура и контент готовы и прототип создан, можно приступать к верстке сайта в конструкторе Tilda.
У Тильды есть возможность создать бесплатный сайт размером до 50 страниц и с ограничением размера диска 50 Мб. Он подходит для небольшого проекта. Бесплатную версию можно использовать в качестве ознакомления с основными возможностями конструктора либо создать с помощью нее полноценное портфолио, визитку или лендинг, который будет работать и индексироваться в поисковых системах.
Чтобы получить доступ к версии Free, нужно зарегистрироваться на Tilda с помощью электронной почты. Можно попробовать больше возможностей Тильды на тарифе Personal. Тариф включает две недели бесплатного пробного периода.
Затем нужно перейти в раздел «Мои сайты» и создать новый сайт.
Задать название, описание, имя субдомена. Далее нужно нажать на «Создать новую страницу».
Конструктор позволяет сверстать сайт «с чистого листа», используя Zero Block. Новичкам для создания сайта удобно взять готовые шаблоны.
Каждый из предложенных 200 шаблонов можно менять, переставлять модули, удалять ненужные. Чтобы отредактировать модуль, нужно навести на него курсор.
Создание сайта происходит с ориентацией на прототип. Нужно открыть библиотеку блоков и подобрать подходящие элементы, например «текстовый блок», «список», «кнопка», «изображение».
В меню «Настройки» можно выбрать опции для работы с блоками. С их помощью есть возможность менять размеры блоков, настраивать внешний вид, типографику, выбирать тег для заголовка: h1 для основного, h2 и h3 — для заголовков последующих уровней.
Текстовая информация, которую нужно опубликовать в модуле, добавляется в меню «Контент».
В некоторых типах блоков, например в обложке, можно выбрать фон, логотип, менять заголовки, описания. Также информация редактируется на нужной строке с помощью курсора и добавления записи либо с через визуальный редактор. Меню отображается в верхней части экрана.
Вверху справа представлено меню управления модулем. Оно позволяет копировать, удалять, скрывать, менять расположение модуля.
Чтобы добавить на страницу дополнительные модули, нужно нажать на знак «плюс» на границе блока и выбрать нужный модуль. Таким образом можно добавить модули «Меню», «Колонки», «Галерея».
Чтобы читателю было легче сориентироваться в том, что есть на сайте, и найти нужную ему информацию, полезно обеспечить навигацию с помощью меню, которое добавляется и настраивается через Библиотеку блоков.
Меню должно быть визуально выделено и при этом не перегружать страницу. Важно, чтобы названия пунктов меню помещались на экран, не урезались. Желательно, чтобы они состояли из одного, максимум из двух слов: «История компании», «Блог», «Клиенты», «Отзывы», «Кейсы», «Контакты».
Деловая среда Премиум
Вступайте в закрытый клуб предпринимателей и получите поддержку бизнес-сообщества
Что учесть в дизайне
Изображения. Акцент стоит сделать на качество и продуманность первого экрана или обложки, в зависимости от структуры сайта. Первый экран — это то, что в течение нескольких секунд оценивает пользователь, когда принимает решение остаться сайте или закрыть его. Важно подобрать хорошую фотографию или фон, цепляющий заголовок.
Не рекомендуется использовать клипарты и стоковые фотографии, особенно для обложки. Клипарты подходят в качестве разделителей в презентациях для сотрудников, но не для сайта: картинки морально устарели, выглядят скучными.
Пример клипарта, источник istockphoto.com
Бесплатные фотостоки лучше оставить для личных постов в соцсетях или для блогов. Неясно, зачем на сайте компании размещать картинку, разошедшуюся по всему интернету.
Пример «заезженной» стоковой картинки, источник unsplash.com
Лучше пригласить профессионального фотографа и отснять себя, сотрудников, офис, создать ролик о компании, нанять иллюстратора. Оригинальные материалы вызывают больше доверия и симпатии у клиентов, чем изображения натянуто улыбающихся посторонних людей в костюмах и галстуках.
Типографика — это источник коммуникации, каждый шрифт передает настроение бренда и стиль. На сайте компании лучше использовать фирменный шрифт. Профессиональные дизайнеры рекомендуют создать и применять два, максимум три шрифта: один — для выделения акцентов, заголовков, второй — для остального текста. При этом выбор шрифтов должен быть гармоничным. Если создать их нет возможности, стоит использовать гарнитуры одного семейства.
Цветовая палитра. Похожий принцип дизайна соблюдается в отношении цветов: используют два, максимум три, помимо черного и белого. Допускается в рамках одного цвета применять его оттенки, например светло-бежевый, бежевый, темно-бежевый, но основных цветов не должно быть много. В противном случае получается аляповатый сайт, который отвлекает внимание от основных смыслов и продукта.
В то же время желательно использовать для фона и текста контрастные цвета, чтобы информация читалась: белым цветом писать на бежевом — ошибка.
Возможности конструктора Тильда и как их использовать бизнесу
Продвижение в Интернете
Редактирование контента и адаптация к мобильным устройствам
После того как сайт сверстан, его нужно отредактировать: устранить погрешности в отступах, расстояниях, неровностях расположения блоков. Заголовки должны быть выполнены в едином стиле, одним шрифтом и размером.
Важно предусмотреть «воздух» — свободное пространство между блоками, чтобы читателю было легче воспринимать текст. Элементы и блоки не должны наезжать друг на друга, слипаться.
❗️ Внимание
Если используется Zero Block, необходимо вручную адаптировать структуру сайта к каждому из типов устройств: десктопная версия, планшет, экраны смартфонов. Менее важные элементы на экранах мобильных, возможно, придется убрать, где-то поменять размер шрифта. Если работа велась с готовым шаблоном, адаптация к мобильным устройствам происходит автоматически по умолчанию.
Тестирование сайта
Первое тестирование можно провести самостоятельно: зайти на сайт из другого браузера, нажать на все кнопки и пункты меню, посмотреть, как открываются разделы, все ли работает. Важно обратить внимание на:
- ссылки — на правильные ли страницы они ведут;
- отображение сайта на всех устройствах, если был использован Zero Block;
- корректность работы форм сбора данных.
Готовый сайт сначала лучше показать коллегам, друзьям, собрать обратную связь. После корректирования ошибок и неточностей проект можно представить наиболее лояльным постоянным клиентам, спросить их мнение.
Совет
Если выяснится, что сайт загружается дольше трех-четырех секунд — в таком случае появляется риск, что человек не дождется загрузки и уйдет, — нужно оптимизировать изображения, сократить их размер без потери качества с помощью специальных программ, например Optimizilla.
Публикация
Для публикации сайта нужно подключить домен. Можно использовать бесплатный домен третьего уровня либо купить домен второго уровня у регистратора.
Домен выбирают в разделе «Настройки сайта». Там же указывают название и описание проекта, которые будут отображаться в поисковой выдаче, сниппетах и социальных сетях.
После редактирования и тестирования сайта нужно настроить каждую страницу: заголовок, описание, задать url. Это делается с помощью меню «Еще» в правом верхнем углу экрана. В раздел «Бейджик» необходимо загрузить изображение, которое будет отображаться при размещении ссылок на страницы сайта в соцсетях.
Также желательно настроить инструменты аналитики Яндекса и Google, чтобы собирать данные о посещениях, конверсиях, времени нахождения посетителей на сайте, об аудитории. Коды Яндекс.Метрики и Google Analytics нужно прописать в настройках Тильды в разделах «Аналитика и SEO».
Сделав все настройки, останется нажать на кнопку «Опубликовать» в верхней части экрана. После публикации сайт будет виден пользователям.
Сервис для быстрого старта бизнеса
Источник: dasreda.ru
Плюсы и минусы сайта на конструкторе Тильда
Скорость сайта на Тильде, продвижение, функционал и тарифы. Какие есть недостатки и что с этим делать?
Оглавление
Предисловие. Почему одни говорят о преимуществах, а другие – о недостатках Тильды?
Разработчики сайтов, которые говорят о Тильде, обычно делятся на две категории:
— первая: разработчики, дизайнеры сайтов на Тильде. Они же – те, кто говорят только о плюсах данной платформы, часто не обращая внимания на реальные недостатки.
— вторая: разработчики сайтов на других платформах. Они, как правило, ругают Тильду и дезинформируют клиентов относительно ее функционала, по причине поверхностных знаний по данной теме либо полного отсутствия опыта работы с Тильдой. 😀
Важно понимать реальную мотивацию обеих категорий: Первые – зарабатывают деньги, продавая сайты на Тильде, а вторые – теряют огромную долю клиентов, в следствие реальной эффективности Тильды и роста ее популярности.
Клиенты в этой ситуации зачастую вводятся в заблуждение и принимают неверные решения. Мы твердо уверены в том, что для всеобщего развития в бизнесе важна честность и важна добросовестная работа. Поэтому мы решили собрать известные и малоизвестные факты, а также мнения о Тильде и выложить объективный материал, который поможет Вам понять, какие в действительности есть плюсы и минусы сайта на Тильде и какие есть решения существующих проблем.
Наша реферальная ссылка на Тильду: tilda.cc. При регистрации по ней и оплате любого тарифа Вы получите дополнительные дни подписки бесплатно.
Начнем, как полагается, с плюсов сайта на Тильде 🙂
— Высокая скорость разработки и более низкая стоимость. За счет чего это работает так?
— Тильда является инструментом для верстки сайта. Можно сказать, что это визуальный редактор кода, но без доступа к самому коду из интерфейса платформы. Безусловно, разработать хороший сайт на Тильде можно быстрее, чем написать код в ручную с нуля.
Кроме того, при разработке сайта «на чистом коде» существует вероятность ошибок и потери времени при их поиске и исправлении.
Важно также и то, что Тильда исключает дополнительное звено между дизайнером, маркетологом и разработкой. UX-UI дизайнер сам воплощает все идеи в Тильде, что, по нашему мнению, является более правильным подходом.
В случае с разработкой при помощи консервативных платформ и html, дизайнер создает макет, отдел разработки его реализует. И зачастую, для понимания и реализации задумки дизайнера, маркетолога и клиента программистам требуется пройти через ряд согласований, ошибок и исправлений, что увеличивает время разработки и затраты на проект.
Речь здесь не идет о нагруженных и сложных проектах, где не обойтись без команды программистов и где баланс между дизайном и функционалом может быть смещен в сторону функционала.
Например, если стоит задача создать онлайн-базу товаров на 1000+ позиций с парсингом с внешних ресурсов и кучей автоматизаций – заложите весомый бюджет и выберите хороших разработчиков, например, на Битрикс. Если Вам нужен достойный корпоративный сайт, лендинг или обычный интернет-магазин – напишите нам.
— Говорят, что Тильда отлично подходит для разработки лендингов (посадочных страниц). Так ли это?
— Да, Тильда идеально подходит для создания и управления посадочными страницами. Это напрямую связано с первым тезисом о более высокой скорости разработки. Благодаря упрощенной схеме разработки возможно оперативно создавать посадочные страницы под разные направления. Отсюда вытекает следующий фактор.
Второй фактор, который делает Тильду для посадочных страниц вне конкуренции – это возможность внесения коррективов маркетологом или другим штатным специалистом. Интерфейс удобный. Функции для опытных пользователей скрыты, а все самое необходимое интуитивно понятно.
Представьте ситуацию: отдел маркетинга запустил рекламную кампанию. При промежуточном анализе эффективности маркетолог принял решения о необходимости: 1) Сделать заголовок крупнее 2) Добавить номер телефона во второй и третий блоки 3) Сделать динамическую смену первого экрана для повышения релевантности ключевым запросам. И теперь представьте, что пока Вы пишите и согласуете техническое задание с отделом программирования, реклама идет и деньги капают.
И третий фактор – это наличие в Тильде всех необходимых виджетов и интеграций для лендинг-пейдж: вам не нужно дополнительно разрабатывать и покупать функционал для посадочной страницы, – к Тильде легко подключаются приемщики форм, сервисы аналитики и коллтрекинга, платежные системы, сервисы email-рассылки, CRM-системы. Кроме того, в Тильде есть встроенная легкая CRM-система и краткая сводка по источникам заявок и их характеристикам. Мы за 4+ лет ни разу не сталкивались с ситуацией, когда при разработке и управлению посадочными страницами для рекламы нам чего-то не хватило в рамках любого тарифа.
В случае с некоторыми другими популярными платформами, можно столкнуться с тем, что отсутствует или «отваливается» функционал, потому что его нужно дополнительно оплачивать, нужно что-то докупать, процесс настройки аналитики более трудозатратный и так далее.
— Стоимость подписки на Тильду от 6 000 рублей в год (550 руб./мес.). Тариф включает все, что нужно?
— Все верно, стоимость подписки на стартует от 6 000 рублей в год (либо от 750 рублей в месяц при оплате помесячно) при оплате от физического лица или от 15 000 рублей в год при оплате по счету от юридического лица (на данном тарифе Вам будет доступно 5 сайтов).
При этом абсолютно все возможности сервиса для сайтов включены в любой тариф.
Что входит в эту сумму?
Нужно понимать, что на любом тарифе Вам доступен весь этот функционал для сайта без каких-либо ограничений. Дорого ли это? По нашему опыту, это недорого, если сравнивать с функционалом и тарифами совершенно любой платформы или конструктора.
— Учитывая то, что Тильда очень популярна, для нее есть практически любые интеграции с внешними сервисами?
— Да, есть десятки готовых интеграций с CRM, системами бронирования, платежными системами, модулями доставки и так далее. И, что самое главное, в Тильду можно добавить сторонний HTML код. Это может быть скрипт любого сервиса, который дает возможность интеграции с сайтом.
— В сегодняшних реалиях следует учитывать перспективы развития Тильды на российском рынке. Тильда — это российский сервис.
— Конечно, в феврале 2022 года мы начали волноваться за проекты клиентов, искать официальную информацию от руководства Тильды по поводу дальнейшего развития платформы в России. И они обозначили свою позицию таким образом, что стало ясно, что Тильда не остановится и будет работать, а также команда Тильды сделает все возможное, чтобы продолжать работать для пользователей в России. Также усилен отдел по работе с предотвращением DDoS-атак. Прошло уже больше года, и был момент, когда падали сайты на других движках (например, в марте 2022), а наши сайты всегда работали без перебоев.
— В Тильде есть возможность выгрузки каталога товаров и интеграции с внешними каталогами?
— Да, товары можно загружать в каталог и выгружать через CSV или YML форматы, настраивать поля. Загрузить каталог товаров в Тильду можно за 5 секунд. Также есть возможность настройки обмена данными с 1C.
— Возможно ли вести блог на Тильде?
— Да, в Тильде есть прекрасный модуль «Потоки» для оперативной публикации новостей. При помощи этого инструмента можно решать ряд других задач. Например, публиковать отчеты о проделанных работах, инструкции к товарам и пр. При этом в «Потоках» есть все необходимые SEО-настройки.
Теперь рассмотрим минусы Тильды.
— Первый недостаток, о котором многие говорят и пишут статьи – это низкая скорость загрузки сайта на Тильде. Насколько это критично и что с этим делать?
— Да, при работе с сайтом на конструкторе мы сталкиваемся с таким нюансом: все стили, состояния элементов, шрифты и модули, которые используются на том или ином сайте, созданном на конструкторе, подгружаются с сервера автоматически, даже если пользователь в данный момент не взаимодействует с блоками, в которых они используются. Это особенность конструкторов сайтов, по причине наличия готовых библиотек.
При этом сейчас Вы читаете этот контент на сайте, который создан на Тильде. На нем 100+ страниц, большое количество фотографий, есть кастомный код и анимации, есть модуль для блога. Чувствуете ли Вы какой-либо дискомфорт, взаимодействуя с нашим сайтом? Вряд ли. Он грузится отлично.
Некоторые сайты на Тильде реально тормозят. Но почему, что с этим делать и как предотвратить проблемы загрузки? Наши коллеги напишут, что нужно оптимизировать картинки.
- Разумеется, во-первых стоит сжимать все изображения, в среднем, до 300 килобайт перед загрузкой на сайт, для фотографий использовать формат JPG, для векторной графики CSV.
- Во-вторых, не стоит перегружать сайт скриптами. Используйте только то, что нужно, лишнее — удаляйте.
- И, что самое важное, следует свести к минимуму количество поп-апов (всплывающих окон) на сайте.
— Следующий недостаток — это отсутствие возможности создавать стили для элементов, да и вообще ряда возможностей для верстки
— Существует такой минус. Итак, о чем здесь речь: когда мы создаем дизайн, еще на этапе создания макета, а также при разработке сайта на Webflow, мы создаем стили, варианты и компоненты для оформления блоков, заголовков, текстов, кнопок и других элементов. Это делается для того, чтобы стили элементов можно было переиспользовать в других блоках и на других страницах.
Например, Вы создали заголовок. Он имеет определенный цвет, размер, отступы с каждой из сторон. Например, в Веблоу мы бы задали ему класс и на всех страницах заголовок с таким классом имел бы нужные настройки. В Тильде это происходит сложнее. Да, мы можем задать имя класса для элемента, но в интерфейсе нет библиотеки стилей и ими нельзя управлять также, как в том же Вебфлоу.
В Тильде классы применяются, как правило, для добавления каких-либо эффектов для отдельно взятых элементов. Кроме того, задать можно только один класс, следовательно, невозможно для одного элемента добавить два и более эффектов и стилей.
Еще, если Вы хотите сверстать на 100% «резиновый» сайт, Вы не можете задать размеры для элементов в единицах измерения VW. Да, Вы можете верстать сайт в Window Container, задать элементам позиционирование и размеры в % от размера устройства. Но, например, задать шрифту размеры в EM и межстрочный интервал в % нельзя.
Но недавно вышло обновление Тильды, которое позволяет добавлять любые брейкпоинты в пикселях (размеры экранов устройств), это очень круто и, в целом, это решает проблему, поскольку можно по-другому расположить элементы, например, для FULL HD.
— Еще один нюанс. При разработке, например, на Вебфлоу, мы создаем внутри блоков (секций) контейнеры, которые имеют внутренние отступы и в которых задается позиционирование элементов. В Тильде таких возможностей пока нет.
Например, у Вас есть индивидуальный или ZERO-блок (это когда Вы создаете блок с нуля, такой, как Вы хотите). У него есть определенная высота. В этом блоке есть текст и изображение. В таком случае, когда Вы будете менять текст, этот текст «расползется», налезет на другие элементы или наоборот будет слишком большой отступ от текста до других элементов, и дизайн блока будет нарушен. Это связано с тем, что в Тильде нет возможности создавать контейнеры внутри блока и задавать им параметры, которые могли бы зафиксировать отступы для элементов внутри блока.
По тем же причинам, когда у Вас на сайте используются ZERO-блоки, они расположены на разных страницах и часто подвергаются изменениям, Вам нужно постоянно править адаптивные версии. В конечном итоге это приводит к тому, что на всех страницах могут быть разные отступы, разные оформления элементов, что выглядит неаккуратно. Также это влечет за собой дополнительные трудозатраты на работу с такими блоками.
Какие есть решения:
– во-первых, стандартизируйте все, что возможно стандартизировать, чтобы в дальнейшем было проще с этим работать. Если требуется кастомизировать стандартные блоки — используйте CSS-стили, меняйте элементы под свой дизайн. Мы научились уместно применять и кастомизировать стандартные блоки, чтобы нашим клиентам было удобно наполнять их.
– во-вторых, пользуйтесь alias-блоками (это образы блоков-оригиналов), при правильном использовании они могут быть очень полезными
– в-третьих, задавайте настройки типографики и цветов на уровне настроек сайта
– в-четвертых, создайте техническую страницу с некоторыми элементами и используйте их на соответствующих страницах (этим нужно очень уместно и осторожно пользоваться)
– создайте документ с CSS-стилями для Вашего сайта, добавите код в настройки сайта (в разделе Еще) и задавайте нужные классы элементам, где это требуется
Это больше просто нюансы, с которыми нужно уметь работать.
Ниже, для наглядности, Вы можете увидеть настройки двух примерно аналогичных блоков в WebFlow и в .
Источник: luckyleads.ru
Обзор Tilda
Когда вы ближе познакомитесь с конструктором сайтов , то обратите внимание, что множество довольно качественных ресурсов разработаны именно на нём. Чем обусловлена такая популярность? Простота использования и обширный функционал – основные плюсы платформы, созданной в 2014 г. российским предпринимателем Никитой Обуховым.
Принцип работы сервиса основан на внедрении блоков, на которых строится весь сайт. Можно применять готовые блоки от разработчика. Второй вариант – использование редактора Zero Block, который даёт возможность конструировать собственные блоки в режиме drag and drop (перетаскивание элементов мышью).
Какие проекты можно сделать на Tilda?
Не обладая навыками программирования, вы создадите сайт без лишних затрат по времени. Платформа позиционируется в качестве удобного конструктора, предназначенного для запуска и продвижения:
- небольших интернет-магазинов;
- корпоративных сайтов компании;
- лендингов и промо-страниц мероприятий;
- информационных сайтов, онлайн-журналов, блогов и лонгридов;
- презентаций и писем для e-mail рассылки;
- сайтов визиток и портфолио.
Самые интересные проекты, реализованные на Tilda, разработчик собрал на своём сайте в разделе made on tilda. Примеры хороших сайтов сгруппированы по тематикам. Там же можно отправить запрос на добавление своего сайта на Тильде в коллекцию с помощью кнопки «Предложить сайт».
Список возможностей
- Блочный механизм редактирования с базой готовых блоков (более 450) – обложки, меню, формы, кнопки, преимущества, отзывы, карты Google и Яндекса, якорные ссылки и многое другое.
- Эффектная подача визуального контента с помощью встроенного редактора изображений.
- Набор опций для встраивания видео и аудио контента, включая добавление любого плеера путём вставки html-кода.
- Продвинутый редактор Zero Block для создания уникальных блоков собственными руками, конструктор писем для формирования e-mail рассылок.
- Широкий спектр функций для онлайн-магазинов – виджет корзины, форма заказа, карточки товаров, подключение платёжных систем, передача сведений в онлайн-кассу и т.д.
- Возможность интеграции сервиса со сторонними CRM-системами (Битрикс24, Мегаплан, AmoCRM) или использования Tilda CRM.
- Автоматическая адаптация созданного сайта под мобильные устройства, есть возможность дорабатывать мобильную версию вручную.
- Командная работа над сайтом с разграничением прав доступа других пользователей.
- Подключение собственного домена или покупка доменного имени у разработчика, в бесплатной версии используется субдомен на tilda.ws.
- Сбор аналитики в Google Аnalytics и Tag Manager, Яндекс.Метрике с помощью подключения счётчика, а также SEO-инструменты.
- Работа с социальными сетями (кнопки шеринга и базовые настройки для продвижения).
Тарификация
Оплата за пользование сервисом осуществляется по подписке. Если по истечению оплаченного срока подписка не будет продлена, сайт снимается с публикации. При этом данные сохраняются на Tilda в течение полугода. При внесении оплаты вы снова можете работать над своим проектом. В противном случае через 6 месяцев все данные автоматически удаляются.
В Тильда предложены 3 тарифных плана:
- Free – бесплатно навсегда. Предполагает работу над 1 сайтом с базовым функционалом без подключения своего домена.
- Personal – 750 руб/мес, при подписке на год 500 руб/мес. Даёт возможность работать над 1 сайтом, применяя все перечисленные выше возможности за исключением безналичной оплаты, экспорта исходного кода и API.
- Business – 1250 руб/мес, при подписке на год 1000 руб/мес. Включает весь функционал платформы, а также позволяет создавать одновременно и работать над 5 сайтами с одного аккаунта на Тильде.
Начало работы: регистрация
Откройте , нажимайте «Регистрация». На данный момент для новых пользователей доступен пробный период работы в тарифном плане Personal на 14 дней. Этим и воспользуемся.
После введения данных система предложит вам активировать тариф Personal бесплатно. Готово.
Базовые настройки сайта
Откройте раздел «Мои сайты» или нажмите «+ Создать сайт». Задайте проекту название.
Дальше откройте «Настройки сайта» и заполните описание, укажите субдомен на Тильде или подключите собственный домен (для платного тарифа).
Официальный мануал по подключению своего домена в Центре Помощи Tilda.
В разделе «Шрифты и цвета» выбираются наиболее подходящие вам шрифты, их размер, насыщенность и цвета. Можно загружать свои собственные шрифты.
В разделе «Аналитика» просматриваются данные по сайту, автоматически собранные системой. Здесь же подключается счётчик Google Analytics и Яндекс.Метрики.
Подключение Google Analytics:
- автоматически в системе – кнопка «Подключить»-«Разрешить» доступ к данным в аккаунте Google.
- вручную – выбрать код счётчика из списка в Google, ввести его в соответствующую строку на Тильде.
Дополнительно подключается Google Tag Manager, чтобы отслеживать события на стороне сервиса. Мануал на сайте разработчика.
Подключение Яндекс.Метрики:
- авторизуйтесь в Метрике и создайте счётчик, нажимайте кнопку «Подключить»-«Разрешить» доступ к данным в аккаунте Яндекса.
- вручную – выберите код счётчика в Метрике, скопируйте и введите в соответствующую строку в Тильде.
В этом же разделе подключаются PIXEL Facebook – через Менеджер рекламы FB, и VKontakte – через рекламный кабинет VK во вкладке «Ретаргетинг».
В разделе SEO подключаются сервисы Google Search Console и Яндекс.Вебмастер. Вам нужно кликнуть «Редактировать»-«Подключить». Добавление ресурса к сервисам возможно после публикации главной страницы сайта.
В разделе «Экспорт» можно скопировать проделанную на Тильде работу на другой сервис с помощью исходного кода. Опция доступна только на бизнес-аккаунте.
Раздел «Формы» отображает доступные сервисы для сбора информации из форм, чтобы собирать заявки, получать данные на электронную почту, создавать списки рассылок, отправлять лиды в CRM.
Создание страницы сайта в Tilda
Открывайте проект и нажимайте «+ Создать новую страницу». Максимальное число страниц 1 сайта на бесплатном тарифе – 50, на платных тарифах – 500.
Если у вас есть минимальные навыки дизайнера или хотя бы хороший вкус в оформлении сайтов, то воспользуйтесь блоком «Пустая страница». В остальных случаях лучше использовать шаблоны, редактируя их под собственные цели. Они сгруппированы по категориям, можно воспользоваться функцией поиска.
Я выберу категорию «Событие». На примере одного из шаблонов покажу доступный функционал редактора.
Интерфейс весьма минималистичный. Страница делится на блоки, к каждому из которых есть одинаковый функционал – ряд опций справа и слева в верхней части экрана (выделены красным прямоугольником). При нажатии на некоторые опции выдвигается блок настроек.
- Настройки – редактирование внешнего вида данных: выравнивание, высота, отступы, размеры шрифтов, межстрочное расстояние, настройка фонового видео и анимации и т.д.
- Контент – редактирование содержимого блока: текст надзоголовка, заголовка, вставка фонового изображения или видео.
- Duplicate (2 сдвоенных квадрата) – создать дубль блока.
- Delete – удалить блок.
- Hide – спрятать/показать блок.
- Короткая стрелка – под ней находятся опции «вырезать», «копировать», «вставить», «выделить» для управления блоками.
- Стрелки вниз и вверх – перемещение блоков в нужное место страницы.
- Знак + в кружке – прокрутите блок вниз и нажмите на значок плюса, чтобы добавить новый блок на страницу. В библиотеке блоков есть масса шаблонов: обложка, о проекте, ключевая фраза, преимущества, прямая речь, отзывы, расписание, контакты и т.д.
В самом верху по горизонтали расположены опции «Отменить» действие, «Предпросмотр» страницы, «Опубликовать» сайт и получить ссылку, «Настройки» страницы. О последнем пункте стоит упомянуть более развёрнуто. Под кнопкой «Ещё» находятся настройки аккаунта.
Настройки страницы включают несколько опций:
- Главное – заголовок, описание и адрес страницы.
- Бэйджик – позволяет загрузить другое изображение для бэйджика страницы (по умолчанию используется первая картинка).
- Facebook and SEO – показывает, как будет отображаться страница в соцсети Facebook и поисковой выдаче. Здесь же задаются meta-данные.
- Экспорт – скачивание страницы в формате zip архива или через открытый код.
- Действия – передача страницы на другой аккаунт в Тильде, создание копии, удаление и перенос страницы на другой сайт на Тильде.
- Дополнительно – отключение адаптации страницы под мобильные устройства, снятие страницы с публикации, просмотр статистики и др.
Создание «Меню» с пунктами и ссылками
Рассмотрим пример создания «Меню» без использования шаблона. Нажимаем «Создать страницу»-«Пустая страница»-«Все блоки»-«Меню» и выбираем подходящий тип.
Названия пунктов и ссылки задаются во вкладке «Контент». Там же есть подробная инструкция по проставлению ссылок.
Создание интернет-магазина: краткая инструкция
Сервис подходит для работы небольших онлайн-витрин. Есть возможность подключить сервисы Яндекс.Деньги, Яндекс.Касса, PayPal, Robokassa, CloudPayments, Stripe, чтобы клиенты оплачивали товары/услуги картой Visa/Mastercard, Яндекс.Деньгами, с мобильного счёта, через Сбербанк Онлайн, Альфа Клик. Заявки и оплата могут приниматься в сервисе с помощью CRM-системы, форма заказа товаров легко настраивается под конкретные нужды.
Сначала вам нужно сохранить проект. Дальше добавляются страницы. Вы можете использовать шаблоны из категории «Магазин».
Продажа товара ведётся одним из выбранных способов:
- Через корзину – подходит для продажи одного или множества товаров.
- Без корзины (прямая) – без возможности выбора варианта и количества товаров.
- Без онлайн оплаты – клиент заказывает товар на сайте, а оплачивает потом.
- Один товар/услуга – подходит для продажи через корзину или с прямым переходом к онлайн оплате.
- С выбором параметров товара/услуги – клиент может выбрать цвет, модель, размер и т.д.
При необходимости добавляется скидка – промокод. Опция расположена в настройках сайта: «Платёжные системы»-«Промокоды», где указываются необходимые данные.
Для передачи сведений в онлайн-кассу требуется зайти в «Настройки сайта»-«Платёжные системы» и выбрать свою платёжную систему, где вы зададите необходимый параметр.
О профессиональном редакторе Zero Block
Редактор потребуется в том случае, если вы хотите создавать блоки со своим уникальным дизайном. Zero Block (нулевой блок) добавляется двумя способами: прокрутите страницу вниз и кликните на значок Zero или выберите его в библиотеке блоков «Другое».
Настройки нулевого блока почти идентичные настройкам шаблонов, но для редактирования используется не кнопка «Контент», а «Редактировать блок».
Визуально он похож на графический редактор:
- «+» – кнопка для добавления изображений, текста, видео, формы и т.д.
- Две рабочие области – Grid Container (сетка) и Window Container (границы экрана браузера), то есть весь контент должен располагаться в области с вертикальными линиями.
Элементы можно редактировать мышкой – перемещение, изменение размера, копирование, выделение.
Для оперативной работы разработчик предлагает горячие клавиши.
В настройках каждого элемента, который вы вставляете с помощью значка +, есть функция добавления анимации двух типов – базовая и пошаговая. В свою очередь, пошаговая анимация имеет 3 опции:
- Animation – различные варианты появления анимации на экране.
- Parallax – эффект параллакса элемента.
- Fixing — эффект фиксации элемента.
К каждой категории есть дополнительные опции, скрытые под знаком стрелки вниз.
Что хочу сказать: вполне удобный и простой редактор. Если вы владеете азами работы в Photoshop, то Zero Block вообще не вызовет никаких сложностей.
Как создавать рассылки в редакторе: конструктор писем
Открываете главную страницу своего аккаунта и нажимаете «+ Создать рассылку».
Задаёте название проекту, к которому также можно подключить отдельный домен/ поддомен. Настройки немного отличаются от сайта, но общий принцип работы схожий: выбираете шаблон и на его основе создаёте письмо под собственные нужды. Количество рассылок, доступных для создания, равно числу сайтов для вашего тарифа. То есть в одном аккаунте на тарифном плане Personal можно создавать 1 сайт и 1 рассылку одновременно.
Вопрос-ответ
Как передать сайт или отдельную страницу на другой аккаунт в Тильде?
Это можно сделать только в платном тарифе. Открываете «Настройки сайта/страницы», дальше «Действия»-«Передать сайт/страницу на другой аккаунт».
Как скопировать сайт?
Нужно сделать дубли всех страниц сайта: «Настройки страницы»-«Действия»-«Дублировать страницу». Затем создать новый проект и перенести туда дубли. Перенос страниц между проектами осуществляется через «Настройки страницы»-«Действия»-«Перенести страницу».
Как экспортировать сайт на свой хостинг?
Опция доступна только на максимальном тарифе Business. Опять же, открываете «Настройки сайта»-«Экспорт». Вы получите статичный html и файлы – картинки, css, js. Сайт будет запакован в архив. Вам потребуется разархивировать файл и скопировать на сервер.
При этом все изменения и обновления придётся вносить на Тильде. Потом заново экспортировать сайт аналогичным образом.
Как удалить сайт на Тильде?
Открываете «Настройки сайта»-«Действия»-«Удалить сайт». Он будет находиться в корзине 24 часа. По истечению этого срока сайт безвозвратно удаляется.
Как убрать надпись Made on Tilda?
Опция доступна в платных тарифах и только при годовой оплате: «Настройки сайта»-«Ещё»-«Platform Label»-«Не выводить». После сохранения изменений переопубликуйте страницы сайта.
Как добавить фавикон?
Для загрузки иконки сайта, которая будет отображаться в браузере, нужно открыть «Настройки сайта»-«Ещё». В строке favicon загрузите файл размером 32х32 в формате .ico. Заново переопубликуйте страницы сайта.
Как добавить на сайт карты Яндекса или Google?
Откройте «Библиотека блоков» и выберите блок Т143 (карта Google или Яндекс). Второй вариант – использование блоков из категории «Контакты»: CN401, CN402, CN402A, CN403, CN404.
Что говорят пользователи Тильды?
На официальном сайте Tilda есть отдельный раздел с отзывами пользователей. В сети интернет вы встретите больше положительных отзывов от русскоязычной аудитории. Она вполне довольна имеющимся функционалом, несмотря на то, что существуют более бюджетные конструкторы. Есть негодование в адрес технической поддержки.
Вывод
– приличный сервис для создания и продвижения лендингов/многостраничных веб-ресурсов, сайтов-визиток, лонгридов и небольших интернет-магазинов. Среди ключевых преимуществ я выделю: удобный и интуитивно понятный интерфейс, отличную коллекцию шаблонов, широкий спектр функционала для новичков и дизайнеров. Работая с Тильда, вы не совершите ошибок, как это может произойти при использовании WordPress.
Недостаток конструктора – относительно высокая стоимость. Что касается аналогов Тильды, то эту информацию вы узнаете в моей прошлой публикации Обзор Wix, который является одним из основных конкурентов Tilda, причём с более низкой стоимостью за пользование.
Источник: quokka.media