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

Чтобы быстро создать красивый сайт в конструкторе сайтов Тильда, нужно сначала чётко понять его задачи и продумать структуру. Задайте себе пару важных вопросов: чем ваш проект отличается от конкурирующих, в чём ваша специализация, какую идею вы хотите передать пользователю. Идей может быть много, но придётся выбрать основную, которая будет отражена на главном экране, передавая понимание вашего предложения.

Шаг 1. Регистрация

Для начала работы в конструкторе Tilda нужно зарегистрироваться.

tilda2_1

Пройдите на регистрацию

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

tilda2_2

Регистрация интуитивно понятна

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

Шаг 2. Выбор шаблона

Войдите на сайт под своим логином и паролем и подберите шаблон, который больше всего вам подходит. Все шаблоны разделены по группам:

  • «Бизнес» (коммерческие проекты);
  • «Контент» (проекты с большим объемом текстовой информации);
  • «Контакты» (шаблоны с одной страницей, это своеобразные, но оригинальные визитки для фрилансеров, желающих разместить в сети свои контакты и портфолио).

Работать с готовым выверенным шаблоном будет очень просто и быстро, но, если выбрать и переделывать шаблон, опытный пользователь сети неизбежно увидит шаблонность вашего решения.

Поэтому лучше выбрать пустую страницу, и создавать сайт на Tilda «с нуля». Но этот вариант подходит только тем, кто смог изначально чётко прорисовать структуру своего сайта и создать хороший эскиз. Иначе вы рискуете зависнуть на этапе выбора вариантов блоков, и процесс разработки сайта затянется.

tilda2_3

Выбор шаблона

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

tilda2_4

Кнопка «Настройки сайта»

В предлагаемом слева меню представлена масса возможностей, каждая из которых подробно комментируется. Главное не забывать сохранять выбранные опции, нажимая на кнопку справа вверху.

tilda2_5

Не забывайте сохранять изменения!

На этом этапе есть маленький секрет. Большинство пользователей сразу смотрят на бесплатный тарифный план. Но можно пригласить своего друга (пользователя сети с электронным адресом, отличным от вашего) и получить автоматически месяц плана Tilda Personal, значительно расширяющего ваши возможности и позволяющего подключать к вашей разработке оплаченный заранее домен. Забегая вперёд, скажем, что достаточно указать домен в настройках сайта и прописать IP-адрес у своего регистратора. Всё гениальное просто.

Шаг 3. Работа с блоками

Чтобы начать конструировать свой сайт на Тильде, нажимаете на Blank page, смотрите видеоинструкцию, под которой будет библиотека с блоками.

tilda2_6

Нажмите Blank Page и подберите подходящие блоки

tilda2_7

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

Сверху размещается меню (11-й пункт в меню слева). Вариант меню можно легко сменить, нажав на треугольник вверху слева.

tilda2_9

Внешний вид меню

Далее выбираем обложку — это первый экран, который пользователь видит, попадая на сайт. Чтобы добавить следующий блок, наведите мышкой на нижний край предыдущего блока — появится плюсик, вызывающий меню для выбора типа блока.

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

tilda2_11

Главная страница сайта

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

tilda2_12

Нажимая на кнопку «Контент» меняйте фон и текст. Не забываете сохранять изменения

Наводя на левый верхний угол каждого блока, вы увидите, как появляются кнопки, среди которых есть «Настройки».

tilda2_13

Настройки блока появляются при наведении на левый верхний угол

Нажимая «Настройки», вы можете поменять размеры структурных элементов блоков, межстрочное пространство, фон, эффекты анимации, действия и другие приятные мелочи. Но важно то, что внизу есть цифры, это опознавательный номер блока (якорная ссылка). И если вам нужно на него сослаться, вы его копируете и вставляете в соответствующую строку «Контента» исходного блока. Так настраивается меню и кнопки. Подключать можно как отдельные блоки, так и другие страницы, поэтому в Tilda вы построите и одностраничные лендинги, и многостраничные комплексные проекты.

tilda2_14

Номер блока

tilda2_15

Перечень блоков

Очень удобно, что блоки можно дублировать, удалять, вырезать, перемещать, копировать и вставлять с помощью меню, всплывающего в верхней правой части каждого блока. Блоки, представленные в левом меню, разные, можно выбрать красивейший блок с видеоподложкой.

Вы без труда добавите изображения, презентации и видео (их можно загрузить или поместить их ссылку в разделе «Контент»). Периодически отслеживайте актуальность ссылок: если размещаете ссылку (например, на Youtube), а материал из этого первоисточника удалится, то и на сайте он перестанет отображаться.

Например размещаем презентацию на Google Диск. В конструкторе Tilda вызываем меню блоков (оно всплывает слева, если нажать на «плюсик» в конце предыдущего блока). Выбрав простую кнопку в разделе библиотеки «Форма и кнопка» в «Контенте» блока, указываем ссылку на презентацию на Google Диске. Видео добавляется почти также. Только в библиотеке блоков нужно выбрать раздел «Видео», а в «Контенте» указать ссылку на youtube-ролик или его id (эти данные находятся в информации о ролике на самом ютубе).

tilda2_17

Вставка презентации

В разделе библиотеки «Другое» можно найти множество полезных опций для сайтов: Карту Google или Yandex, поиск по сайту от Google и прочее.

А в последнем разделе библиотеки блоков есть пункт «Нулевой блок», который позволяет проявить весь свой креатив и создать свой собственный уникальный блок. Чтобы его добавить, наживаем на кнопку «Нулевой блок».

tilda2_18

«Нулевой блок» — для тех, кому стандарты не по душе

Стоит только навести мышкой на левый верхний угол и появятся кнопки «Настройка» и «Редактировать блок». Поработав с предыдущими блоками, вы легко выставите настройки, а с помощью второй кнопки — откроете редактор в таком виде.

tilda2_19

Слева сверху вызывается меню для добавления текста, картинки, фигуры и/или кнопки. В конце нажимаете «Save» и возвращаетесь обратно в конструктор, чтобы наполнить созданный блок текстом и картинками.

Перед тем как отпустить свой сайт в свободное плавание, зайдите в «Настройки сайта» (в первой строке) и укажите максимум информации. Здесь можно подключить домен и платежные системы, интегрировать сайт с почтовыми рассылками, настроить счётчики аналитики, назначить страницы «шапкой» и «подвалом» и многое другое.

tilda2_20

Обязательно загляните в «Настройки сайта» перед завершением работы

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

Нажимая на «Настройки» во второй строке, вы можете управлять опциями каждой конкретной страницы, чтобы в последующем сайт красиво отображался и в поисковой выдаче, и при ссылке на него.

tilda2_21

Настройки каждой страницы отдельно

Шаг 4. Публикация сайта

Чтобы подключить к сайту, разработанному в конструкторе Tilda, свой домен, достаточно в настройках проекта указать адрес. При этом у своего регистратора, который продал домен, нужно прописать IP (одной строчкой). Можно пообщаться с сотрудниками компании-регистратора — они, как правило, помогают начинающим мастерам.

Шаг 5. Tестирование

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

Естественно, после этого этапа появятся первые коррективы. И даже опубликовав свой сайт, вы сможете легко вносить в него изменения. Для этого нужно снова войти в конструктор Тильды, исправить всё, что нужно, и нажать на кнопку «Опубликовать» в правом верхнем углу.

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

 

logo-azconsult-blog
AzСonsult.ru

 

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

2 × 3 =

©2012-2016.   Маркетинг с азов для малого бизнеса и микробизнеса
ИП Губина Мария Сергеевна, ОГРН 312784713800044, Санкт-Петербург

ГЛАВНАЯ БЛОГ БЕСПЛАТНО ОБ АВТОРЕ УСЛУГИ ОТЗЫВЫ ФОРУМ КОНТАКТЫ

Скачайте подсказки по бухгалтерии и образцы заполнения бухгалтерских документов

 

Оставьте ваши данные в форме, и мы пришлём вам архив с документами по электронной почте.

       

  •    

×
Скачайте подсказки по бухгалтерии и образцы заполнения бухгалтерских документов

 

Оставьте ваши данные в форме, и мы пришлём вам архив с документами по электронной почте.

       

  •    

×
Подписаться на мини-курс "Из чего состоит проект?"

 

Оставьте ваши данные в форме, и мы будем присылать вам материалы курса по электронной почте.



  •    

×
Скачайте подсказки по бухгалтерии и образцы заполнения бухгалтерских документов

 

Оставьте ваши данные в форме, и мы пришлём вам архив с документами по электронной почте.

×
Скачайте подсказки по бухгалтерии и образцы заполнения бухгалтерских документов

 

Оставьте ваши данные в форме, и мы пришлём вам архив с документами по электронной почте.


×

Введите имя и электронный адрес, и мы пришлем вам запись вебинара о правильной постановке целей и несколько полезных ресурсов

×

Оставьте ваше имя и электронный адрес ниже, и пришлем вам тест-шпаргалку от Валентины Власовой

×

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

×

Оставьте в форме ваше имя и электронный адрес, и мы пришлем вам ментальную карту «Виды и группы контента»

×

Заполните поля формы и получите чек-лист от Дарьи Капитоновой по ведению Инстаграм-аккаунта для начинающих

×

Заполните форму и скачайте шаблон для систематизации контактов и поиска потенциальных партнеров

×

Заполните форму и скачайте шаблон для оценки важности ваших задач и составления плана делегирования

×

Сложно начать писать — на сайт, в блог, в прессу?
Видите пустую страницу документа Word и сразу теряете мысли? Есть о чём писать, но не знаете, с чего начать? Заполните форму и скачайте вебинар!

×

Заполните форму ниже и получите бесплатный курс «Из чего состоит проект»

×

Оставьте ваши данные в форме и мы пришлём вам чек-лист с инструментами, помогающими в продажах услуг»

×

Оставьте в форме ваше имя и электронный адрес, и мы пришлем вам ссылку на вебинар о ранних списках

×

Заполните поля формы и получите чек-лист от Дарьи Капитоновой по ведению Инстаграм-аккаунта для начинающих

×