Что такое сайт? Сайт – это веб-страницы в Интернете, объединенные единой темой и адресом, которые принадлежат одному владельцу. По-другому сайт – это площадка, которая помогает бизнесу и выполняет определенную цель. Цели создания сайта: генерация лидов, имидж компании, презентация нового продукта. Часто заказчики сами не понимают зачем нужен сайт. Есть одно выражение: если вашего бизнеса не существует в Интернете, то его вообще не существует.
Сайт нужен для позиционирования компании, упаковки и продаж. Сайт не будет работать сам по себе, для продаж ему нужна реклама. Если проводить сравнение сайта с офисом то вместо холодных продажников всю их работ выполняет сам сайт и настроенная на него реклама.
Практически невозможно сделать сайт идеально с первого раза. Без рекламы невозможно понять эффективность сайта.
ВИДЫ САЙТОВ
Корпоративный сайт. Такой сайт говорит пользователю, что это серьезная компания. Он отличается большим количеством информации, но это не сплошной текст, а грамотно написанный и расположенный текст, отвечающий всем потребностям потребителя.
Такой сайт состоит из 4-х и более страниц. Чаще всего это разделы главной информации о компании, услуги, о компании и контакты. В прямой зависимости от размера компании будет и количество разделов на сайте.
Лендинг. Лендинг часто называют страницей захвата или одностраничным сайтом. Информация на ленгдинге подана в виде блоков, листая которые посетитель знакомится с компанией и ее преимуществами. Основная задача лендинга – это зацепить клиента, чтобы он оставил свои контактные данные. Далее менеджер уже компании связывается с клиентом и закрывает его на покупку.
Преимущества лендинга: высокая конверсия, конкретное УТП и блоки, раскрывающие его и пользователю проще принять решение о покупке и оставить свои контактные данные.
Интернет-магазин. Интернет-магазин является специальным сайтом, предназначенным для купли/продажи всевозможной продукции и услуг. Интернет-магазины чаще всего делаются для более-менее стабильных бизнесов. У таких клиентов уже точно есть деньги на создание сайта. Чтобы делать действительно хороший интернет-магазин нужно уметь подключать оплату на сайте.
ФОРМУЛА ХОРОШЕГО САЙТА
Дизайн – это способ донести идею до посетителя сайта. Дизайн не должен быть ради дизайна, прежде всего это удобство и функционал. Мы делаем сайт не для заказчика, а для его клиента. В случае если заказчик хочет сайт с невнятным дизайнерским решением, вы должны его останавливать и аргументировать свою позицию.
Текст – это основа сайта. Без продающего оффера, понятной подачи для посетителя – сайт будет бесполезен. Текст должен вызывать желание купить.
Верстка. Всегда нужно проверять верстку сайта с различных устройств, прежде чем отдать заказчику.
Одним из важных параметров является конверсия. Это соотношение числа зашедших на сайт к числу оставивших заявку. Коверсию можно узнать только после запуска рекламы.
Если конверсия равно 0%, то это означает, что ни один зашедший на сайт не оставил заявку. Это значит, что вы допустили ошибку, например, текст составлен не для той целевой аудитории. Нормальное значение конверсии на лендинге 2-10%. Поэтому прежде, чем сделать сайт, проанализируйте бизнес заказчика или свой, если делаете сайт для себя.
ОСНОВЫ МАРКЕТИНГА
Целевая аудитория (ЦА) – это те люди, которые покупают ваш продукт или продукт клиента. Как разобраться кто ваша ЦА? Самое простое – спросить у клиента, кто чаще у него покупает его продукт или услугу. А также клиентов с которым ему выгодней и приятнее работать.
Но клиент не всегда может адекватно оценить свою аудиторию.
Так же можно провести анализ рынка и посмотреть другие сайты, сайты конкурентов вашего клиенту. Изучите для кого позиционирует себя компания. Понять какая боль есть у вашей ЦА. Текста на сайте составляется про решение этих болей и как мы можем их закрыть.
Текст на сайте должен составляться для нашей ЦА не про преимущества продукта ил услуги, а про то, какое решение дает собой этот продукт или услуга.
Оффер – это предложение клиенту ценности. Это самое основное на сайте. Он располагается на главном экране и это первое, что видит клиент. Наша задача с помощью оффера заинтересовать клиента в товаре или услуге. В среднем на главной странице клиент проводит несколько секунд и за такое короткое время нужно зацепить его, чтобы он не ушел с сайта.
Оффер прежде всего должен нести собой ценности и выгоду для клиента. Например «Строим дома из бруса» не несет в себе ничего. А вот «Построим дом «под ключ» из бруса за 20 дней» - уже конкретнее. Тут мы даем нашему клиенту ценность и выгоду. В проработке оффера помогает техника поставить себя на место клиента.
Призыв к действию (CTA или Call-to-action). CTA – состоит из призыва и кнопки или формы. Чтобы оффер сработал, необходимо чтобы посетитель совершил действие. Например, оставить заявку на замер, консультацию, расчет или составление сметы и т.д.
Прототип – это наглядное и схематичное расположение блоков на сайте. Сайт будет иметь успех без супер-дизайна, но не без хорошего прототипа. Прототип можно сравнить с фундаментом дома. Это основа проектирования сайта. Даже если вы заказываете сами сайт, вам нужно разбираться в прототипировании сайта, чтобы грамотно оставить техническое задание. Преимущества прототипов: легко и наглядно согласовать проект; быстро и наглядно вносить изменения; прототип упрощает дизайн, перед глазами есть наглядное представление того, как будет выглядеть сайт — это быстрый текст сайта.
Можно на ранних этапах уже начать его тестирование и понять, работает ли прототип или нет.
Moqups: https://moqups.com. Для создания прототипа в программе Moqups создаете новый проект. Белый лист — это контентная область. Контентная область, вы можете ее увеличивать и уменьшать, как вам будет удобно. В левой части находятся кнопки, которые вы можете добавлять на свою контентную область, например, это заголовки, будущие кнопки, изображения, иконки и т.д. Так же вы можете делать важные заметки на полях для клиента с помощи кнопки Note.
Опция LinkBar позволяет добавить меню. Основное правило - говорить с клиентом на языке выгод. Например, что я получу, сводив мою собаку в салон? Отличную стрижку, собака будет вычесана и ухожена, вам не нужно будет тратить несколько часов на совершение этой работы.
Не надо писать на сайте, что вот мы классные, приходите. Дайте клиенту почувствовать себя особенным в вашем (как в данном примере) салоне собак. Поэтому ваш текст на сайте — это лицо бизнеса, и оно должно отображать всю уникальность клиента. Перед написанием текста на сайт необходимо анализировать его через призму ЦА клиента. И давать ей то, что она хочет.
КОНВЕРСИЯ
Представьте, вы сделала красивейший сайт, вам он так нравится, да и заказчику вроде тоже. Но вот они запускают рекламу и ничего. Нет заявок. Возможно, виновата реклама. Криворуко настроили и получили такой плачевный результат. Но если нет? Если реклама настроена по ЦА заказчика, но ваш сайт просто не дает конверсии даже в 1%? Хотя вы так старались, он же такой классный.
А все дело в том, что вы скорее всего не думали о ЦА заказчика при создании сайта. Вы думали о том, как бы сделать сайт красивым, чтобы хорошо смотрелось в портфолио и радовало глаз. А о том, что сайт нужен прежде всего для продаж начисто позабыли. Поэтому есть сайты с не очень дизайном (если дизайн плох, то даже супер-текста не спасут, все взаимосвязано), но дающие потрясающую конверсию.
И наоборот. Дизайн лишь помогает, но зачастую дизайн сайта не продает, а продает текст, оффер. Поэтому весь ваш фокус должен быть на том, как сделать так, чтобы у вашего сайта была высокая конверсия.
ПРАВИЛА, ПОМОГАЮЩИЕ БОЛЬШЕ ЗАРАБАТЫВАТЬ
Работай с теми заказчиками, кто вам приятен по первому впечатлению. Если заказчик не приятен как человек, ты будешь жалеть, что вообще взялся за работу, даже если за нее хорошо оплачивают. В конечном счете будешь долго отрабатывать заказ, будут приходить вагоны правок над проектом, + заказчик может оказаться неадекватным по общению и нервам. Обходи таких стороной. Обязательно будут заказчики, с кем будет легко и просто работать.
Говори всегда правду. Я заметил, что если не уходить от ответа, а говорить правду как есть, заказчики начинают относиться с большим уважением и лояльностью, даже если работа ведется не гладко. Вранье чувствуется на уровне спинного мозга.
Соблюдай сроки и отвечай за свои слова. Для вас выполнение работы в срок и исполнение своих обязательств - главные индикаторы репутации. Именно с таким отношением клиент станет постоянным.
Не становитесь другом для заказчика. Не приводит ни к чему хорошему. Я не говорю про официальность общения, можно общаться и на «ты». Твоя задача качественно отработать заказ, взять деньги и отзыв. За этот период не должно сложиться никакой дружбы. Максимум приятельские отношения. Последствия дружбы могут быть, например такие: тебя будут часто просить, что-то исправить бесплатно по дружбе, будут просить скидки, будут показывать свои эмоции, жаловаться и т.д. Оно тебе надо?
Если клиент что-то просит доработать - всегда говорите ему да, если сможете это сделать. Если эта работа небольшая - сделайте бесплатно, все что больше 10 минут - говорите стоимость этих доработок - ничего наглого в этом нет. Труд должен оплачиваться.
Будь профессионалом. Разговаривай только по делу, если заказчик в ходе разговора отвлекается - направляй его. Задавай заказчику дедлайны, отказывай ему в бредовых идеях, когда это вредит проекту. Приведу пример: с одним из заказчиков я работал 2 недели, и заметил, что очень в эти недели просела моя производительность. Ничего не успевал. Я решил посчитать сколько времени я проговорил с ним за 10 рабочих дней - в WhatsApp я насчитал 8 часов, а это целый рабочий день. А всю суть общения и доработок, которые предлагал заказчик по телефону можно было расписать на 1 листе А4.
Общайся по проекту в той форме, которая тебе удобна. Я всегда рекомендую вести все диалоги в мессенджерах и соцсетях. Общение быстрое, оперативное, есть возможность голосовых сообщений. Крайне не люблю общение по проекту по электронной почте, очень долго и неудобно что-либо согласовывать. По телефону тем более. Формат первого общения — звонок отличный, дает познакомиться тебе с клиентом, а ему с тобой. Из первого звонка можно понять стоит работать с ним или нет.
ФУНКЦИОНАЛ TILDA
Вкладка «Мои сайты» – все сайты и сайты, сделанные вами на Tilda. Вкладка «CRM» – это такая система, которая ведет учет заявок, там можно ставить задачи, срок их выполнения и т.д. Вкладка «Тарифы и оплата» - просмотр вашего тарифного плана, если он подключен. Тариф Personal позволяет подключить только один домен, Business до 5 доменов. Вкладка «Профиль» - ваши данные профиля на Tilda.
Вкладка «Домены» - показаны домены, которые вы покупали с помощью Tilda. Вкладка «справочный центр» - вся информация о Tilda. Вкладка «Вебинары» - вебинары от Tilda. Вкладка «Уроки и статьи» - информация, в которой вы можете прокачать свои знания.
Сайт на Tilda – одно доменное имя. Кнопка Создать сайт – для создания нового домена, которое не может повторять друг друга. Под одним доменным именем можно создать до 500 страниц.
Кнопка «Статистика» показывает посещаемость сайтов. Приписка «Beta» показывает, что сайт работают в тестовом режиме. Дале показывается количество заявок на сайте. Аналитика сайта. Например, конверсия 0 августа была 29%.
Если вы внесете изменения на страницах, то после нажатия кнопки Опубликовать все страницы изменения автоматически внесутся на всех созданных сайтах. Вкладка Заявки отобразит все данные человека, оставившего заявку в той форме, которую вы запросили.
При этом так же отображается число и время заполнение заявки.
Можно создать пустую страницу без блоков и настроек. Далее будут представлены шаблоны, созданные Tilda с помощью стандартных блоков и самых популярных тем.
СОЗДАНИЕ ПУСТОЙ СТРАНИЦЫ
При создании сайта на Tilda можно объединить дизайн и верстку. При создании сайта обязательно включайте информацию о политике конфиденциальности. Обычно это шаблонный формат.
БЛОКИ
Обложка. Создание главного экрана лендинга. Выравнивание текста возможно по центру, верху и снизу. Эффект при скролле возможен: без эффекта, с фиксацией и параллакс. Он показывает, что происходит с вашей основной картинкой по мере того, как вы листаете сайт.
Высота определяет размер вашего блока на экране в пикселях. Оптимальная длина экрана составляет примерно 700 px. Цвет фильтра в начале и в конце создает определенный градиент блока. Так же можно выбрать непрозрачность цвета, в зависимости от которого будет видно изображение на фоне или нет.
Добавление стрелки внизу блока. Так же ее можно анимировать, чтобы показать потенциальному посетителю о продолжении сайта. Изменение стиля заголовка находится во вкладке типографика или при выделении текста.
Совет: лучше не меняйте межстрочное расстояние, пусть оно остается по умолчанию. То же касается и межбуквенного расстояния, которое растягивает строку.
Насыщенность заголовка меняет толщину букв, а заглавные буквы в заголовке устанавливается автоматически и эту опцию можно убрать.
Раньше в дизайне при появлении настройки тени очень часто это использовалось, и сейчас это не совсем хороший тон. Поэтому используйте их по минимуму. Те же самые настройки есть и подзаголовка – текста внизу основного заголовка. Так же на фоне можно устанавливать не только картинку, но и видео. Анимация заголовка. Задает его появление.
SEO-тег заголовка нужен для определения поисковыми роботами, что сайт по тематике, написанной в вашем заголовке. Выключение эффекта появление при скролле отключает анимацию появления блока заголовка снизу-вверх.
Диапазон видимости на устройствах – это настройка видимости сайта на разных устройствах, и если сделать его как на первой картинке, то сайт будет читабелен только на экранах ноутбука, вторая картинка – только мобильные устройства.
ПАНЕЛЬ КОНТЕНТ
В этой панели есть возможность менять заголовок, подзаголовок, фоновое изображение и видео. Но текст заголовка и подзаголовка можно менять и просто его выделением.
Фоновое видео можно установить через прямую ссылку, например, видео вашего заказчика и оно будет проигрываться во всю ширину экрана.
БЛОКИ С КНОПКАМИ
Настройки в этом блоке будут почти все те же, добавятся только настройка кнопки. Здесь можно настроить цвет заливки кнопки, цвет текста, цвет обводки и ее толщину. Так же можно скруглить кнопку, выставив определенны радиус скругления.
В дополнительных настройках кнопки можно изменять шрифты текста в кнопке, сделать замену цвета заливки, текста и бордюра при наведении на кнопку. Скорость анимации лучше оставлять 0,2-0,4 секунды, это будет наилучшим вариантом. Большее время наведения будет слишком долгим.
БЛОК О ПРОЕКТЕ
В этом блоке рассказывается о самом проекте или когда нужен какой-то текстовый блок на всю ширину страницы. Можно выбрать блок с фотографией. Во вкладке контент все тоже самое, что и в блоке Обложка.
Частые ошибки при написании текста: нет разделения на абзацы (такой текст читать не будут, потому что это делать сложно); висящие предлоги (это ошибка с точки зрения типографики); оставление в конце строки одного слова; слишком маленький или слишком большой текст (при этом заголовок должен быть жирным, ярким и заметным, а текст под ним – меньше заголовка и ни в коем случае жирным).
Так же вы можете добавить кнопку во вкладке Контент. Ширину блока можно настраивать во вкладке Настройки – Ширина блока.
БЛОК ЗАГОЛОВОК
Если у вас уже создан блок, но у него нет заголовка, то можно его добавить и перенести перед нужным вам блоком с помощью стрелок.
Текстовый блок нужен для добавления текста на сайт. Например, это сайт для блога. Можно использовать блок Вопрос-ответ. В нем будет раскрывающаяся строка, например, часто задаваемые вопросы. Во вкладке контент вы можете менять текст ваших вопросов-ответов. А также есть возможность загрузить изображение. Если вам нужно несколько карточек, то просто дублируйте или добавляйте элемент. Шрифты и цвета наведения на иконку «+» можно в настройках.
БЛОК ИЗОБРАЖЕНИЯ
Загрузить его можно через вкладку контент, с компьютера. В настройках можно задать ширину вашего изображения. Если ширина будет 100%, то оно полностью займет все пространство блока.
БЛОК ГАЛЕРЕЯ
В этом блоке есть слайдеры, то есть помещаются несколько изображений подряд. В настройках вы можете поменять соотношение сторон этих фото, отступы между изображениями, пространство, которое изображения будут занимать. Так же есть слайдер, со специальным разделителем, где можно, например, вставить изображение до/после.
Во вкладке контент вы загружаете два изображения, которые вам нужны. Между блоками вы можете добавлять другие блоки.
БЛОК КЛЮЧЕВАЯ ФРАЗА
Текстовый блок, но с другим оформлением, как цитата.
БЛОК ПРЯМАЯ РЕЧЬ
Этот блок выполняет туже функцию, что и блок цитата.
БЛОК ПРЕИМУЩЕСТВА
Все, что внутри блока, вы можете прописывать сразу или во вкладке Контент – Карточки. Настройки все остаются те же, но добавляется настройка иконки, которая обрезает вашу иконку по кругу или квадрату.
Вы можете сделать ваши преимущества в виде диаграмм. Заполнение диаграмм можно изменять во вкладке Контент. Так же можно добавлять кнопку и менять ее цвет и т.д. в настройках.
БЛОК КОЛОНКИ
Это текстовый формат. Колонки подходят для блога, новостного портала. Для лендинга больше подойдет формат колонок и все представленные ниже.
БЛОК РАЗДЕЛИТЕЛЬ
Это линия, разделяющая текст или блок. Изменить цвет, толщину и т.д. можно в настройках.
БЛОК МЕНЮ
Блок меню находится над первым слайдом, как требует это правила лендинга. Фиксация меню при скролле оставляет меню при скролле между блоками на сайте, оно прикреплено к верху. Это делается в настройках. Или без фиксации меню наложится на ваш первый блок, но при этом при скролле остается на нем же.
Высоту меню лучше не менять, так как по умолчанию она самая оптимальная. Пример высоты меню в 100 px.
Настройка появления меню при прокрутке N пикселей нужно настраивать с фиксацией при скролле. Тогда ваше меню будет показываться на сайте не сразу, а только при прокрутке сайта через заданное число пикселей. Размер контейнера меню показывает ширину, на которое меню располагается на вашем сайте.
«Бургер» на мобильной версии сайта – это иконка, по типу кружочка, когда меню не сверху находится, а всплывает при нажатии. На мобильном устройстве всегда нужно экономить место, поэтому всегда нажимайте данную функцию.
Так же можно менять цвет фона меню его прозрачность и прозрачность при скролле. Данная функция не оказывает никакого влияния на самом сайте, она нужна вам только для удобства.
Во вкладке «Пункты меню» вы можете менять цвет, выравнивание, расстояние, размер пунктов и текст внутри.
«Активный пункт меню» – это настройка отдельного пункта, в тот момент, когда пользователем сайта доходит до пункта, который вы настроили.
Добавление ссылки через вкладку Контент. Здесь вы выбираете или страницу, или блок (для лендинга), который подразумевает перенос пункта при нажатии на него. Если установить активным пункт «В новом окне», то открываться ваш выбранный пункт, он будет в новом окне браузера. Пункты меню второго уровня нужны в том случае, если у вас многостраничный сайт.
УСТАНОВКА ЛОГОТИПА
Вам нужно будет загрузить изображение и ввести ссылку, на сайт, который вы проектируете. То есть при нажатии на это изображение будет пользователя перебрасывает наверх. Можно выбрать блок, например ваш первый блок и пользователя сайта будет перебрасывать на него. Можно добавить ссылки на социальные сети. Так же можете добавить кнопку или наоборот убрать ее.
УСТАНОВКА ЯЗЫКОВ
Вы создаете сайт на двух языках и даете им разные ссылки. При нажатии на них пользователя перекидывает на сайт, язык которого он знает. У вас создается сайт на определенном домене, и вы можете прописать только подпапку /en или /ru и на одном доменном имени будет две страницы с нужными вам настройками.
БЛОК СПИСОК СТРАНИЦ
Обычно список страниц используется на большом многостраничном сайте, блоге или многостраничном портале. Страницы у вас подгружаются автоматически, созданные на вашем доменном имени.
БЛОК ПЛИТКА И ССЫЛКА
Этот блок можно использовать для показа вашего кейса. Во вкладке контент вы можете прописать текст каждой карточки и изменить изображение. Прописываете ссылку на него или подпапку, созданную на вашем домене. Вы можете прикрепить только сайты, находящиеся под вашим доменным именем.
БЛОК ПОДВАЛ
Это своеобразное завершение сайта, там можно указать контакты и ссылки на ваши социальные сети.
БЛОК ВИДЕО
Здесь вы добавляете видео с различным его воспроизведением. Во вкладке контент добавляете ссылку на нужное вам видео.
Popup video — это видео возникает при нажатии на кнопку. И в настройках кнопки, например, «Смотреть видео» прописываете ссылку на Popup. При клике на кнопку купить возникает видео.
БЛОК ФОРМА И КНОПКИ
Количество форм и кнопок должно быть от 3 до примерно 8 для лендинга.
В этом блоке есть как одиночные кнопки, так и формы вертикальные или горизонтальные, и формы с красивым и готовым оформлением от Tilda.
Ссылка на кнопку возьмем Popup форму с множеством полей. В контенте этой формы вы прописываете заголовок, ставите изображение, добавляете или убираете формы: E-mail или телефон, Имя, Фамилия и т.д.
Чем меньше полей, тем лучше для конверсии.
Так же выбираете поля, обязательные для заполнения. Сохраняете ссылку на Popup. В кнопке прописываете ссылку Popup и при нажатии на эту кнопку у пользователя появится всплывающее окно с формой, которую вы прописали.
БЛОК МАГАЗИН
Например, вы можете прикрепить корзину, настроить ее через контент и прикреплять к ней оплату. При нажатии на кнопку купить в режиме настройки сайта, нажимаете Setting. И прописываете ей Link с указанием цены.
Также Tilda сама прописывает инструкцию, как настроить корзину.
Вы можете настроить блоки для продажи товаров. Здесь уже можно автоматически прописывать цену и выбрать во вкладке подробнее о товаре – добавить в корзину и тогда появится кнопка «Купить сейчас», где пользователь сразу добавляет ваш товар в корзину. Так же можно сделать товар и как Popup объект, настройка будет происходить аналогично.
БЛОК КОМАНДА
Такой блок располагается ближе к концу сайта, чтобы познакомить посетителя сайта с людьми, делающими этот бизнес.
БЛОК ОТЗЫВЫ
Они тоже располагаются или в середине, или ближе к концу сайта. Они нужны для подкрепления посетителя в том, что эта компания хорошая, надежная и здесь можно заказать.
БЛОК РАСПИСАНИЕ
Нужен для лендинга или сайта компании, которая организует мероприятия.
БЛОК ЭТАПЫ
По сути, это тоже самое, что и преимущества, с небольшим отличием в оформлении.
БЛОК КОНТАКТЫ
Он делается в конце сайта, в нем информация про офис, телефон, почта и социальные сети.
БЛОК С КАРТОЙ
При настройке Google Maps нужно получение API ключа от Google. Это долгое согласование и возможно возникнет путаница. Лучше подключите Yandex Maps. Здесь вы настраиваете заголовок и описание точки, на которой находитесь и настраиваете описание по долготе и широте вашего расположения офиса. Это вы можете вбить вручную или сразу найти на карте с указанием адреса. Адрес на карте погрузится автоматически.
БЛОК УСЛУГИ
Делается так же, как блок Преимущества.
БЛОК СОЦ.СЕТИ
Прикрепление ваших социальных сетей к сайту. Например, для блогера вы можете прикрепить ленту в инстаграм. Во вкладке контент подключаете API инстаграма блогера.
БЛОК ТАРИФЫ
Нужен для описания тарифов в бизнесе вашего заказчика. В кнопках вы можете прописать перекидывание пользователя на определенные курсы с описанием блока или Popup окно купить или корзина.
БЛОК ПАРТНЕРЫ
Помещается в конец сайта. Рассказывает о сотрудничестве бизнеса с партнерами.
БЛОК ДРУГОЕ
Якорная ссылка – это переадресация на нужный блок. Блок другое очень редко используется новичками. Все основные функции есть в предыдущих блоках и пока блок другое не нужен.
ZERO-БЛОК
Найти Zero-блок можно внизу главной страницы или во вкладке «Все блоки» в самом низу.
ВИД
В настройках особо нет функций, а весь основной функционал находится во вкладке «Редактирование блока». В настройках есть одна важная функция «Диапазон видимости на устройствах», где вы можете настраивать то, на каких устройствах будет виден ваш сайт.
РЕДАКТИРОВАНИЕ БЛОКА
Все можно сразу удалить, оставив чистый лист. Линии на основном экране обозначают сетку для того, чтобы ваш текст или изображения, или что-то еще не «скакали». Вы может настраивать заголовки по сетке, выравнивать текст и т.д.
НАСТРОЙКИ
Grid Container – размер области вашего листа. Наилучшим размеров этих параметров будет 500-700 px. При большем значении главная страница сайта не будет входить на весь экран.
Window container – контейнер окна. Какой бы не был размер экрана у пользователя, при задании значения в этой настройке пользователя будет открываться страница на весь его экран. То есть если вам нужно чтобы ваша страница открывалась именно таким образом с любого устройства, то вы можете ее применить.
Grid container – отвечает за то, где будет отцентровка всей страницы. Если выбрать опцию Center, то отцентровка будет по середине, Top – вверху страницы и т.д.
Обычно лучше использовать стандартные настройки, чтобы блоки не растягивались под величину контентных устройств.
Так же вы можете настроить цвет фона вашего блока – BG Color, вставить изображение на фон – Uplood file. Функция Behavior позволяет устанавливать статично или нет ваше изображение при скролле. Если установить Scroll – то вместе со скроллом сайта изображение будет двигаться вверх или вниз соответственно, при значении Fixed – изображение остается на месте, а страница опускается или поднимется.
Position - фиксирует положение по какому-либо краю. Filter start и end устанавливают градиент на изображение со степенью прозрачности заливки градиента.
ДОБАВЛЕНИЕ ЭЛЕМЕНТОВ
Добавление текста Add text. Вы можете отцентровать текст по середине, справа, слева по горизонтали и вертикали. Данная настройка позволяет задавать отступ от края вашего текста, если вам, например не нужно настраивать его четко по середине или у самого края.
Так же вы можете выделить сразу несколько элементов и настроить их выравнивании сначала по центру по горизонтали, а потом по верху, и тогда все элемента выровняются относительно вашего первого выделенного элемента. Вы так же можете растянуть текст потянув за элементы справа или слева.
Здесь вы настраиваете текст по выравниванию его по центру, правому или левому краю, цвет текста, размер, шрифт, толщина и межбуквенное и межстрочное расстояние. Но лучше оставить настройки межбуквенного и межстрочного расстояния фиксированными, иначе текст становится нечитаемым.
Используйте это лишь в целях особенного дизайна.
Опции прозрачности и поворота текста. Опция наложения и опция копирования, удаления и закрепления текста. Если вам, например, нужно сделать наложения текста на изображение, то выдвигаете текст на слой вперед. При блокировании текста вы не можете уже передвинуть текст. Вы можете задать ссылку на ваш текст.
У пользователя, при нажатии на ваш текст, может всплывать форма или переход на другой сайт. Target – открытие в новом окне или в этом же.
НАСТРОЙКА SEO
Выбирайте настройку H1 и при поиске сайта поисковые роботы будут ссылаться на ваш сайт по направлению в данной тематике.
ЗАДАНИЕ АНИМАЦИИ ТЕКСТУ
Если вы хотите, чтобы ваш текст появлялся с какой-то задержкой, вы можете задать ему определенную анимацию и посмотреть ее, нажав на кнопку play element. Можно настроить анимацию появления элемента справа, слева, из точки и т.д. Установить ей время задержки, чтобы, например, ваши элементы появлялись не все разом, а по очереди. При помощи кнопки Play all вы можете посмотреть анимации на всей странице.
АНИМАЦИЯ ПРИ НАВЕДЕНИИ МЫШЬЮ НА ЭЛЕМЕНТ
При пользовании сайтом элемент будет выскальзывать на заданное число пикселей в сторону от мыши. Очень эффектно смотрится с изображением.
АНИМИРОВАННЫЕ С ФИКСАЦИЕЙ
При скролле страницы отдельные элементы остаются на месте и двигаются вместе со сколом страницы, а другие элементы (например, текст) скрываются из виду.
STP BY STEP АНИМАЦИЯ
При выборе этой анимации, все остальные виды анимации деактивируются. Start Trigger – момент, когда производится анимации. Trigger offset- задержка анимации, Loop – фиксирование анимации, если выбрать Loop: loop, то анимация будет происходить бесконечно.
Duration – длительность анимации, Move x, y – обозначает куда будет двигаться анимация по оси x и y, Scale x, y – увеличение или уменьшение анимации, Opacity – анимация прозрачности, Rotate – поворот текста на заданное количество градусов, Easing – линейность анимации: либо в, либо из и т.д., Delay – задержка в анимации.
Пример, если вы делаете анимацию на увеличение до 120%, со временем 1 секунда, то текст будет увеличиваться и резко обрываясь, возвращаться обратно, поэтому добавляем шаг и делаем уменьшение текста до исходных 100%, тогда пульсация текста будет более плавной и приятной.
Со всеми типами анимации лучше разобраться подробнее на практике, чтобы понять какие настройки существуют, больше нравятся. Анимация применима в конкретных случаях и нет одинакового пособия, когда и что лучше применять. При этом больше обилие анимации утяжеляет прогрузку сайта, а также дизайн может выглядеть дешево и некрасиво.
Add Image – добавить изображение. Чтобы довить изображение нажимаете на Upload file и грузите нужное вам изображение. Новые настройки изображения: установка краев изображения; установка тени; ленивая загрузка.
Это опция при плохом Интернет-соединении у пользователя. Сначала прогружается основа сайта – текст, кнопки и т.д. а уже потом изображение. Увеличение при наведении на изображение. Появляется иконка лупы и картинка открывается в ее полный размер.
Add Shape – добавление фигуры (квадрат, круг, линия). Вы можете на вашу фигуру добавлять изображение, а остальные настройки в целом остаются те же.
Add Button – добавление кнопки. Название, ссылка и открытие в этом или новом окне. Все настройки примерно те же, добавляется настройка цвета при наведении на кнопку.
Add Video – добавление видео. Настройка ссылки вашего видео. Настройка автопроигрывания видео, начала проигрывания при заходе на сайт и конца проигрывания. Добавление обложки видео. Все остальные настройки стандартные.
Add Tooltip – подсказка. При наведении пользователем на кнопку возникает подсказка. Вы можете выбрать иконку, которая будет показываться. Все остальные настройки остаются те же.
Add HTML – добавить HTML- код со стороннего источника Этот элемент нужен для добавления интеграции. Но обычно всех опций Tilda хватает и используется этот элемент крайне редко. Тем более не все HTML коды могут использоваться и быть интегрированы в Tilda, для этого либо нужно хорошо знать программирование, либо нанимать стороннего программиста.
Add Form – добавление формы. Задается стиль формы – расположение по вертикали или горизонтали и настройки текста и цвета внутри формы.
НАСТРОЙКА КНОПКИ
Так же форме можно задать анимацию. Настройка формы. Существуют поля: E-mail и Имя. Можно поменять форму. Здесь вы прописываете, как номер должен выглядеть при вводе его пользователем, или призы к действию: введите ваш телефон. Задаете маску вашей страны, где вводится, как пример, номер телефона. Обязательное поле. Добавление нового поля.
ВЕРСТКА
Например, сейчас все настройки производились для десктопных устройств. Планшет в вертикальном положении. Zero-блок не оптимизируется под устройство автоматически. Для каждого устройства вам нужно это делать вручную. Так вы можете настраивать мобильную версию отличную от десктопной версии.
Как посмотреть: нажимаем Save (сохранить); нажимаем «Опубликовать»; переходим по ссылке; нажимаем правой клавишей мыши и жмем посмотреть код; выберем устройство; все элементы съехали и отображаются неверно.
После настройки, например, версии для телефона ваша десктопная версия останется такой же, какой вы настраивали ее вначале, при этом вы можете менять размер элементов. Но если вы решите удалить элемент с одной из версий, то он удалится везде, поэтому вам нужно для разных версий просто прикатать их. Скрытие элементов происходит их выносом за экран.
ПРАВИЛА КНОПОК
Главное правило идеальной кнопки - она должна быть яркой, привлекать внимание, но кнопок не должно быть ни слишком мало, ни слишком много на сайте. Нужно искать золотую середину. В среднем нормально использовать на лендинге 3-10 кнопок (можно с призывами к действию).
Кнопка должна быть там, где нажатие на нее посетителем приведет к прибыли бизнеса клиента. То есть ориентируемся на этот показатель прежде всего. Например, кнопка «заказать» должна быть большой и яркой, а вот кнопка, например, «смотреть фото» наоборот поменьше и менее яркой.
Правила кнопок: используйте градиенты, тени и закругленные углы, чтобы сделать кнопку реалистичной. сейчас это в тренде используйте контрастные цвета; сделайте кнопку достаточно большой, но не неестественно огромной; используйте слова, призывающие к прямому и понятному действию. купить, получить, скачать и т.д.; иллюстрируйте призывы к действию иконками по возможности; используйте эффекты при наведении (увеличение кнопки, изменение цвета и т.д.).
ПОЛЕЗНЫЕ "ФИШКИ" ДИЗАЙНА
Визуализация работает. Не надо описывать с помощью кучи текста ваш сложный продукт/товар/ услугу. Визуализируйте и упрощайте. Объясните с помощью картинок/схем/цифр все самые сложные вещи. Ведь, если клиент их поймет, он будет больше вам доверять и с большей вероятностью купит.
Использование калькуляторов. Простой, но действенный инструмент для продаж с сайта. Если расчет цены складывается из нескольких параметров, то можно предложить “поиграть” с этими параметрами и самим рассчитать стоимость конечного продукта/услуги. Люди любят такое. Подходит отлично для темы строительства.
Адаптивность. Современный сайт просто обязан быть адаптирован под мобильные устройства. Статистика показывает, что 50% пользователей заходят в интернет с мобильного и ПК и 16% населения выходят в интернет только с мобильного.
Использование ярких карточек товара. Тоже относится к визуализации. Если есть товар, то покажите его во всей красе.
Больше пространства. Оставляйте на сайте больше воздуха и пространства. Не лепите фото, заголовки и не пытайтесь все заполнить ими. Оставляя пространство, мы даем посетителю сайта сконцентрироваться на главном – продукте.
Нестандартное расположение блоков. Классический способ расположения блоков уже считается устаревшим. Нет, он не теряет своей эффективности, но благодаря новым методам преподнесения информации можно значительно ее повысить.
Студийные минималистические фото. Попробуйте яркие и многоэлементные фотографии на своем сайте заменить на высококачественные снимки, где изображен всего один элемент, отображающий идею и концепцию компании. Это сфокусирует внимание посетителя и не позволит ему отвлечься.
ФОТОСТОКИ
https://shopdiz.pro/user/login; https://unsplash.com; https://www.pexels.com; https://pixabay.com; https://icons8.com/photos; https://www.firestock.ru/; https://www.pixelsquid.com/; https://www.shutterstock.com/ru/; https://getallstock.com; https://gratisography.com; https://negativespace.co; https://wallpapershome.com.
ИКОНКИ
https://icons8.com; https://iconmonstr.com; https://www.flaticon.com/; https://v1.iconsearch.ru/; https://themeui.net/free-icons/; https://www.toicon.com/; https://thenounproject.com; https://themeui.net; https://fontisto.com/icons; https://feathericons.com; https://iconscout.com/unicons.
