0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Как сделать сайт на tilda

Содержание

Как создать сайт на Тильде: пошаговая инструкция

Добавьте блоки из библиотеки

В каждом блоке дизайнеры уже правильно расположили текст, иконки и изображения. Просто наполните блок своим контентом. В настройках можно изменить шрифты, отступы, фон, размер кнопок — результатом будет уникальный сайт, не похожий на шаблон.

Все блоки из библиотеки уже адаптивны. Это значит, что они хорошо отображаются на экранах планшетов, телефонов и компьютеров без дополнительных настроек. Текст, картинки и другие объекты автоматически подстраиваются под размеры экрана.

Используйте шаблоны

Создайте блок с уникальным дизайном

Нулевой блок добавляется на страницу как стандартный, но внутри него можно работать как в графическом редакторе. Текст, изображения, кнопки, формы и другие элементы вы сможете расположить на экране как угодно. Просто перетаскивайте объекты и собирайте нужный дизайн.

В Zero Block отображение на мобильных устройствах нужно настраивать вручную — для этого переключитесь на режим редактирования для другого экрана и поменяйте расположение и размер элементов.

Добавьте анимацию

Создайте эффект появления заголовка и кнопки, поэкспериментируйте с эффектами параллакса и фиксации при скролле. С помощью пошаговой анимации в Zero Block можно заставить элементы двигаться и трансформироваться по вашему сценарию.

Не стоит применять анимацию к каждому блоку. Старайтесь привлечь внимание посетителя только к самым важным элементам сайта.

Получайте заявки от клиентов

Каждая форма сделана как конструктор — можно добавить неограниченное количество различных полей, чекбоксов, выпадающих списков. А еще можно добавить прикрепление файлов, выбор даты или калькулятор — стоимость заказа будет рассчитываться автоматически перед отправкой формы. В настройках вертикальных форм есть тип поля «Разбиение по шагам», который позволяет превратить обычную форму в пошаговую.

Заявки из форм отображаются в личном кабинете. Можно настроить передачу заявок во внешние сервисы: e-mail, мессенджеры, google таблицы, CRM-системы, сервисы рассылок — всего доступно 18 сервисов для интеграции.

Внутри конструктора уже есть удобный инструмент для работы с заявками — Tilda CRM. С ним легко разобраться и организовать работу с клиентами, чтобы превратить больше заявок в продажи.

Создание сайтов на Tilda. Получаем новую специальность самостоятельно.

В рубрике «без воды» будем конспективно рассматривать интересующие нас вопросы из серии «давно хотел узнать, но жалко выкидывать время на тонны воды».

Специализация

1. Определиться с тем, что буду разрабатывать: лендинги, сайты-визитки, интернет-магазины, лонгриды, промо-сайты.

2. Чтобы зарабатывать нужно не учиться всему, а стать профессионалом в узкой сфере.

3. Чтобы выбрать специализацию, нужно ответить на вопрос “Что мне интуитивно нравиться”, оценить рынок услуг разработчиков на Тильде и рынок запросов в группах и т.д.

4. Определиться с ЦА.

5. Это промо-страницы (мероприятия, курсы, обучение. ), лендинги (производства, строительство…), сайты-визитки (общ. организации, детские сады…)?

6. Сужение ЦА лучше продает, но требует большей подготовки.

1. Делать сайты для себя.

2. Делать сайты друзьям.

3. Делать сайты бесплатно или за символическую цену.

4. Делать сайты за отзыв.

Портфолио

1. Сделать в виде сайта/лендинга для себя.

2. Разместить свою фотографию или видео.

3. Описать кто я и чем полезен.

4. Показать свои лучшие работы.

5. Указать стоимость работ.

6. Разместить отзывы заказчиков.

7. Добавить свои контакты и возможность заказать услуги.

8. Описать подробно что я делаю и как это работает.

9. Указать тонкости: что делает меня хорошим.

10. Указать ограничения: чем не смогу помочь и что тогда делать.

11. Описать миссию, стратегическую цель и интересы.

12. Добавить изюминку.

13. Создать свою группу в соц. сетях.

14. Публиковать туда свои работы, как только заканчиваю их.

15. Собирать отзывы заказчиков.

16. Писать полезный контент.

17. Группа помогает развеять оставшиеся сомнения заказчика.

Чтобы научиться работать в Тильде, необходимо начать с копирования понравившихся сайтов.

  1. Изучить возможности Тильды . Справочный центр и практические руководства . Цель: знать в каком разделе искать инструменты.
  2. Копировать сайты. Это способ получения навыков разработки. Задача: выбрать 5-7 сайтов и скопировать с максимальной точностью.
Читать еще:  Как разобрать ми банд 2

Стратегия выхода на рынок

1. Копируем сайты, нарабатываем навык (2 нед)

2. Берем первые заказы, организовываем работу, делаем портфолио, нарабатываем отзывы, работаем по цене заказчика (2 нед.)

3. Поток заказов, качество выше цены, нарабатываем портфолио и репутацию, определяем цену работы (300 грн/час, 2 мес.).

4. Заказов больше, чем можем выполнить, зарабатываем деньги, выбираем проекты (3 мес. от начала деятельности).

5. Избирательно относимся к проектам, берем только дорогие и качественные проекты, поднимаем стоимость работ (1 год после начала)

Альтернативный подход

1. Сотрудничать с веб-студиями в роли подрядчика.

2. 2-3 студии обеспечат заказами.

Необходимые качества

3. Работа на результат.

4. Доводить дела до конца.

5. Работать сфокусировано.

Программы

— Уменьшение изображений, оптимизация по веб.

— Волшебный ластик — удаление фона.

— Размытие и резкость.

— Слой-маски — переход одного изображения в другое.

3. Svg explorer extension — отображение svg файлов в проводнике.

Расширения

1. ColorZilla — определение цвета.

2. WhatFont — определение шрифтов.

3. Emmet Re:vie — проверка адаптивности.

4. LastPass — менеджер паролей.

Сервисы

Учет рабочего времени

• https://toggl.com — расчет стоимости часа работ, доказательство работы для заказчика. Таблица статистики ( Проект/ Стоимость/ Время/ Стоимость часа )

Работа с заказчиками

1. Работать с теми, кто приятен по первому впечатлению.

2. Говорить правду.

3. Соблюдать сроки, отвечать за слова.

4. Поддерживать рабочие отношения, не дружеские.

5. Если клиент что-то просит — говорить “да”.

6. Направлять заказчика, общаться по делу.

7. Работать профессионально.

8. Общаться по проекту там, где мне удобно.

Алгоритм работы с заказчиком

1. Квалификация заказчика.

2. Выяснение подробностей проекта. 3. ТЗ.

4. Договоренность, предоплата.

5. Выполнение работы.

6. Оплата 2 части, обратная связь.

Квалификация заказчика

В месяц нужно 4-5 проектов. Не нужно браться за каждый. Задача понять:

1. Хочу ли работать с заказчиком?

2. Смогу ли выполнить проект?

3. Подходит ли проект по срокам и деньгам?

Вопросы на этапе квалификации:

1. Опишите максимально подробно вашу задачу.

2. К какому крайнему сроку нужно закончить проект.

3. Структуру сайта и тексты предоставите вы, или это с меня?

4. Какой бюджет проекта?

5. Есть ли ТЗ или прототип?

Если заказчик адекватно ответил на все вопросы — переходим к следующему этапу.

Подробности проекта

Управление проектом нужно брать на себя. Давать заказчику задачи с дедлайном.

1. Максимально подробно описать проект.

2. Скидываем каталоги лучших сайтов и просим выбрать ТОП-5: https://land-book.com , https://www.behance.net

3. Спрашиваем, есть ли сайты, откуда можно взять информацию.

4. Спрашиваем, есть ли тексты для сайта.

5. Просим подготовить видео, фотографии, кейсы, отзывы.

1. Это правила, по которым играем с заказчиком. Если правила не установлены -заказчик может их нарушать.

2. Контент можно включать в ТЗ, но не обязательно.

3. Составлять ТЗ в свободном стиле простыми словами.

4. Что должно быть в ТЗ:

— Какие блоки/страницы будут разрабатываться на лендинге/сайте.

— Время работы на каждой страницей

— Стоимость разработки за объем, прописанный в ТЗ

— Порядок оплаты и сроки разработки

— Как будет происходить разработка

Расчет стоимости проекта

1. Рассчитывается исходя из затрат времени на проект.

2. Трудозатраты зависят от скорости работы.

3. Чем выше скорость работы, тем больше стоимость часа.

4. Расчет делаем в 2 этапа:

— приблизительный расчет на этапе квалификации (кол-во блоков * 1 час * стоимость часа * 1,15 = стоимость проекта)

— точный расчет по техническому заданию, исходя из опыта определяем время на каждый блок (дизайн + настройка)

5. Прописывать время на каждый блок в ТЗ. Так происходит обоснование цены.

Расчет сроков

1. Поблочно по ТЗ рассчитываем количество часов на проект.

2. Прибавляем к рассчитанному времени 25% на согласование, правки, ступор.

3. Рассчитать количество рабочих дней исходя из 4-5 рабочих часов в день.

4. Не забывать про выходные, чтобы не перегореть.

5. Уведомлять заказчика, если не успеваем.

Взаиморасчеты

1. Уверенно называем цену из ТЗ, т.к. есть обоснование.

2. Преоплата 30-50%.

3. Создаем сайт на своем аккаунте, передаем проект только после полной предоплаты.

4. Вторую часть оплаты берем перед привязкой домена и формы оплаты.

Правовые отношения с заказчиком

  1. До оформления ИП можно работать как физ.лицо.
  2. Договор нужен когда расчеты ведутся через расчетный счет.
  3. Работать по договору только по просьбе заказчика. Пример

1. Группа ВК Тильды.

2. Свой сайт и группа в соц.сети.

3. Объявления в группах бизнес направленности.

4. Партнерство с веб-студиями.

6. Контекстная реклама Яндекс и Google.

7. Таргетированная реклама ВК, FB, Instagram.

9. При хорошем выполнении заказы нужно будет искать в течение 1-2 месяцев.

Этапы работы с проектом

1. Подготовка контента для сайта.

2. Создание дизайн-концепции.

3. Разработка дизайна в стандартных и Zero блоках.

4. Адаптация дизайна.

5. Настройка сайта.

6. Тестирование и публикация.

Контент на сайте

  1. Прежде чем начинать разработку, необходимо иметь дизайн будущего сайта: тексты, фотографии, видео, фирменный стиль.
  2. Весь контент оформляется в виде полного или упрощенного прототипа.
  3. Если не умею делать контент, нужно брать заказы, где он подготовлен.
Читать еще:  Что купить в индии

Разработка дизайн-концепции

Это 2 первых экрана, в которых отражена основная идея дизайна: цветовая палитра, шрифты, кнопки, изображения, структура, расположение и геометрия элементов. Дизайн-концепция нужна для того, чтобы выявить необходимый дизайн, который понравится заказчику.

Алгоритм разработки дизайн-концепции

1. Ищем референсы.

2. Придумываем идеи.

3. Подбираем изображения для первого экрана.

4. Подбираем цветовую палитру.

5. Подбираем шрифты.

6. Разрабатываем первый экран.

7. Показываем заказчику.

8. Дорабатываем варианты, пока не согласуем концепцию с заказчиком.

Поиск референсов

2. Собрать референсы. Сохранить понравившиеся элементы в документ.

3. Придумать на бумаге несколько вариантов, выбрать, что понравится больше.

Подбор изображений

1. Ширина изображения на фон — 1680 пикселей

2. Отсутствует пикселизация изображения

3. Форматы jpg, png

4. Каждое изображение оптимизируем под веб

Подбор шрифтов

1. В большинстве случаев шрифтов Тильды остаточно.

2. Для заголовков 36-60 пкс Для текстов 14-18 пкс Подзаголовки 18-24 пкс

Какие стандартные блоки используются

1. Ответы на частые вопросы.

2. Слайдер галереи.

3. Слайдер галереи в поп-ап.

5. Видео в поп-ап.

6. Открытые формы заявки.

7. Формы заявки в поп-ап.

8. Поп-ап карточка товара.

9. Слайдер отзывов.

11. Слайдер партнеры.

12. Блоки из “другое”.

Экраны адаптивности

1. 5 экранов. Адаптируем от большего к меньшему.

2. Наследственность элементов.

3. Сначала весь дизайн, после адаптация каждого блока.

Перед настройкой

1. Адаптацию и настройку страницы делать только после того, как будет полностью согласован Дизайн.

2. Перед адаптацией и настройкой продублировать все страницы. Сэкономит время, если заказчик после настройки решит изменить блок.

3. Сделать по завершению настройки резервную копию в свой аккаунт и аккаунт заказчика.

Адаптация дизайна

1. Только после создания всего дизайна.

2. Не копировать адаптированные блоки для создания новых.

3. Адаптируем от большего к меньшему экрану.

4. Сделав 1 блок, выпишите размеры шрифтов для заголовков и текста.

5. Для тестирования используем сервис Emmet Re:view .

Настройка страниц

1. Создаем всплывающие формы заявки и настраиваем их, привязываем формы к соответствующим формам.

2. Настраиваем якорные ссылки, прописываем их в меню страницы.

3. При необходимости создаем меню с фиксацией.

4. Создаем Поп-ап с политикой конфиденциальности.

5. Настраиваем теги h1 и h2.

6. Внимательно проверяем каждый блок.

7. Название и описание страницы.

8. Бейджик для соц.сетей.

Настройка сайта

1. Загружаем фавикон, если нет — делаем.

2. Подключаем домен по инструкции Тильды.

3. Подключаем приемщик данных.

4. Тестируем на прием заявок.

5. Отключаем галочку “не индексировать” с каждой страницы.

6. Проверяем сайт на ошибки в панели Веб-мастера.

7. Дополнительные фишки здесь

Передача проекта

1. Просим заказчика проверить сайт.

2. Если есть мелкие правки — исправляем.

3. Передать доступ к Тильда-аккаунту или передать сайт на аккаунт клиента.

4. Попросить отзыв.

Что еще просят клиенты

1. Обратный звонок, чат.

2. CRM-системы (подключаем по инструкции Тильды).

3. Яндекс.Метрика, Google Analytics — минимальный набор настроек для клиента.

Как сделать стильный сайт? Tilda Publishing!

Tilda — модульный конструктор, который позволяет за короткое время создавать классные сайты: портфолио, лендинги, лонгриды, спецпроекты, интерактивные истории, блоги. Всё ограничивается только вашим воображением. Как создать собственный сайт с помощью сервиса, читайте в инструкции от наших друзей из Tilda Publishing.

Чем Tilda отличается от других конструкторов

1. Дизайн-код

Вы собираете сайт не просто из элементов, а из блоков, предварительно спроектированных дизайнером. Если это текст, то в нём выверен размер шрифта, отступы и межстрочное расстояние. Если это картинка, то подпись к ней будет расположена в правильном месте. Большинство блоков состоят из нескольких элементов, которые дизайнер уже собрал в композицию. Вам не нужно ломать голову, где и что должно располагаться.

Например, обложка (первый экран). Она состоит из фотографии, заголовка, описания и иногда кнопки. Вы оцениваете контент, который у вас есть, выбираете подходящий вариант из 30 обложек, меняете фото и текст — готово. Не нужно думать, какого размера должен быть шрифт или отступ между заголовком и описанием, в каком месте должна располагаться кнопка. Дизайнеры подумали за вас. Естественно, все параметры можно изменить, если есть уверенность и понимание того, что делаете. Но в качестве отправной точки заранее спроектированные блоки — очень хорошая опора.

2. Гибкость использования

Разработчики продумали семь способов использовать Tilda: подключить собственный домен или субдомен, оставить сайт на субдомене Tilda, экспортировать сайт и разместить на своём сервере, сделать часть сайта на Tilda и встроить её в существующий сайт, наладить публикацию через API. Для интеграции с сайтом на WordPress и «Битриксе» есть плагины.

3. Сервисы приёма данных из форм

C Tilda интегрированы девять сервисов: email, Google Docs, MailChimp, SendGrid, UniSender, GetResponse, AmoCRM, «Мегаплан» и «Битрикс24». Можно получать заявки на email, формировать списки рассылок или собирать лиды в системе управления данными клиентов (CRM).

Читать еще:  Как называется главный город твоего региона

4. Добавление уникальных элементов

Если вам нужны специальные функции, которых нет по умолчанию, используйте возможность вставки HTML-кода. Можно найти готовые решения либо заказать разработку программисту — кусочек кода не будет стоить целого состояния.

Сервисы, которые легко добавить к проекту на Tilda:

  • Таймлайн для мероприятий — Timeline.knightlab.
  • Интерактивные карты — Storymap.knightlab.
  • Продажа билетов на мероприятие — TimePad.
  • Интерактивные изображения — Thinglink.
  • Обратная связь — Uservoice.

Начало работы в Tilda Publishing

Перейдём от теории к практике. После регистрации на Tilda вы сразу же увидите список шаблонов. Выберите подходящий и адаптируйте его либо начните с чистой страницы. Выбор никак не ограничивает ваше творчество: в любое время вы можете изменить шаблон до неузнаваемости. Это просто образец хорошего дизайна и пример использования блоков.

После того как вы выбрали шаблон, Tilda предложит вам посмотреть короткий ролик о том, как устроен интерфейс.

Интерфейс очень простой: слева — библиотека блоков, разбитых на категории. Всё содержание блока редактируется по принципу «кликнул — поменял».

Общие рекомендации по созданию сайта

Строго говоря, создание веб-проекта начинается не с регистрации на сайте-конструкторе. Сначала нужно сформулировать идею и подумать о структуре, потом провести исследование, затем схематично нарисовать несколько вариантов будущего сайта и подготовить контент. Детали этого процесса подробно описаны в статье команды Tilda Publishing «Как создать сайт. Пошаговое руководство».

Посмотрите видеоуроки о том, как создаются разные типы проектов: страница, многостраничный сайт, блог или лонгрид.

Раздел #madeontilda поможет лучше понять возможности платформы и найти вдохновение. Здесь собраны примеры хороших работ пользователей.

После того как вы оформили все блоки, удостоверьтесь, что сайт выглядит приятно и аккуратно. Выровняйте отступы, сделайте заголовки единообразными, проверьте, одинаков ли размер шрифта в тексте. Убедитесь, что на сайте достаточно свободного пространства. Подробнее об аккуратности можно прочитать в статье команды Tilda «Частые ошибки дизайна веб-страницы».

Подумайте о навигации по сайту или внутри одной страницы. Добавьте меню, убедитесь, что оно визуально хорошее: не слишком большое, не перегружает всю страницу. Пунктов меню не должно быть много, лучше всего не больше пяти. Смело укрупняйте разделы. Названия делайте короткими, они должны считываться с первого взгляда. Пункт меню, состоящий из трёх слов, явно не годится.

Обязательно подключите фирменный шрифт. Tilda позволяет подключить шрифты из Typekit и Google Fonts либо собственный.

Опубликуйте сайт. Задайте ему имя, используя субдомен Tilda, подключите собственный домен или экспортируйте код и разместите на своём сервере.

Не забудьте о статистике. Зарегистрируйтесь в сервисе Google Analytics или «Яндекс.Метрика», получите код и пропишите его в настройках.

Позаботьтесь о том, как будет выглядеть ваш сайт при выдаче в поисковиках или социальных сетях: заполните название сайта, описание, добавьте ключевые слова. Каждую страницу снабдите маленькой фотографией, тогда при расшаривании она будет качественно оформлена.

Преимущества Tilda Publishing

  1. Не нужно знать код. Вам не придётся учиться кодить или просить о помощи знакомых программистов. Все настройки в удобном редакторе.
  2. Дизайнер не нужен. Блоки спроектированы профессионалами, все пропорции выверены и гармоничны.
  3. Адаптивный дизайн. Блоки спроектированы так, чтобы не приходилось корректировать дизайн для планшетов и смартфонов. Сайт отлично выглядит на всех устройствах.
  4. Простое редактирование. Если вы делаете сайт для клиента, то в дальнейшем он сможет оперативно вносить изменения и поддерживать сайт самостоятельно, без помощи профессионалов.
  5. Домен или экспорт. Сайт подключается к собственному домену либо экспортируется в виде кода для размещения на другом сервере.
  6. Встроенная аналитика. Можно посмотреть посещения и пользователей (в том числе по страницам). Плюс счётчики Google или «Яндекса» подключаются в специальном интерфейсе простым указанием номера.
  7. Оптимизация для поисковиков. Вы контролируете, как сайт выглядит в поисковой выдаче или социальных сетях.
  8. Гибкая настройка. Любые специальные элементы добавляются с помощью вставки HTML-кода.
  9. Большой выбор шрифтов. Подключите любой шрифт из Typekit, Google Fonts или используйте свой.
  10. Формы приёма данных. Ваши клиенты смогут подписаться на обновления, оставить свой телефон или email. Интегрировано девять сервисов приёма данных.

Тарифные планы

Free. Один сайт, 50 страниц, 50 МБ места на сервере. Адрес сайта вида mysite.tilda.ws. Бесплатно.

Personal. Один сайт, 500 страниц, 1 ГБ места на сервере. Подключение домена и полная коллекция блоков. Пятьсот рублей в месяц при оплате за год.

Business. Пять сайтов, 500 страниц (для каждого сайта), 1 ГБ места на сервере. Экспорт кода. Тысяча рублей в месяц при оплате за год.

Tilda Education

В дополнение к сервису создания сайтов на платформе есть раздел образования — библиотека знаний по веб-дизайну и онлайн-журналистике. Раздел состоит из трёх частей: «Практика», «Развитие» и «Курсы». «Практика» — это объёмные руководства, которые отвечают на конкретный вопрос «как?» и помогают в ежедневной работе. «Развитие» содержит инструменты для поиска идей, расширения профессионального кругозора, формирования визуального вкуса и отслеживания трендов веб-дизайна. Курсы помогают освоить базовую теорию дизайна и повысить свою компетенцию в веб-паблишинге. Уже выпущен курс «Дизайн в цифровой среде», готовится к выпуску курс по интернет-маркетингу.

Источники:

http://www.kp.ru/putevoditel/spetsproekty/kak-sozdat-sajt-na-tilde/
http://zen.yandex.ru/media/id/5d59dffea660d700ad5f1988/5dac99567cccba00adead662
http://lifehacker.ru/tilda-publishing/

Ссылка на основную публикацию
Статьи c упоминанием слов:

Adblock
detector
×
×
×
×