Конструктор сайтов Tilda или как самостоятельно создать сайт

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

Раньше для создания сайта требовалось наличие следующих специалистов: веб-дизайнер, верстальщик, программист.

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

Перед тем, как начать…

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

Таким образом, если Вы, например, хотите реализовать на данном онлайн-конструкторе, интернет-магазин с подключением модулей оплаты или сразу предусмотреть аналитику и SEO-оптимизацию, то будьте готовы сразу перейти на платный тарифный план.

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

Создание сайта в онлайн-конструкторе «Tilda» на примере

Для примера в этой статье мы рассмотрим создание веб-сайта на условно бесплатном конструкторе «Tilda». Увидим, какие есть инструменты, настрой ки и попробуем сделать свой сайт. Ссылка на онлайн-конструктор: https://tilda.cc/ru/.

Итак, поехали.

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

Нажимаем кнопку «Создать страницу».

Далее выбираем подходящий нам шаблон сайта или выбираем пустую страницу. Для большей наглядности, в статье мы рассмотрим создание сайта с нуля, на основе PSD-макета, который был найден на просторах интернета. Вот так он выглядит:

Отображение макета в конечном варианте в конструкторе отличается от PSD-макета, так как он представлен для примера. В нем не учитывалось полное соблюдение цветов, размеров блоков, текстов, а также расстояний между ними.

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

Для большего интереса, нажимаем «Создать пустой блок», затем кнопку «Редактировать».

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

Приступаем к созданию шапки выбранного нами макета. Картинка добавляется весьма хитро. Для начала жмем «+» и «add image», а только затем переходим в «settings» и уже в ней загружаем подготовленную картинку.

Дальнейшие операции по добавлению, редактированию и изменений текста не должны вызвать сложностей, так как принцип такой же. «+» отвечает за добавление блока, «settings» - за настройку отображения.

Чтобы добавить кнопку, жмем «add button», редактируем аналогичным образом. После 5-ти минут, шапка для ПК-версий готова!

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

Затем нажимаем кнопочку «save» и «close». Чтобы увидеть свой сайт, жмем «Опубликовать», соглашаемся и видим следующее всплывающее окно:

Кликаем «Открыть ссылку», смотрим результат наших трудов:

Не забываем сразу отредактировать высоту блока, иначе получится вот так после добавления меню.

Для этого, кликаем «редактировать блок», затем левой кнопкой мыши по белому «пространству» и «settings» (не забываем про «save»):

Теперь на выходе получаем:

Редактируем меню. Отметим, что некоторые виды меню доступны только на платных тарифах, но и одного из «бесплатных» нам вполне будет достаточно.

Добавляем блок отсюда.

Затем нажимаем «контент»:

и после видим следующее окно:

В разделе «логотип» стираем все, что не нужно (ссылку, текст), потому что мы его реализовали ранее. В «списке пунктов меню» пишем названия и пути к страницам. Если страниц еще нет, то добавляем url позже. Чтобы изменить цвет фона, текст и т. д., сохраняем, то, что мы проделали. После снова наводим на блок и кликаем «настройки». После приблизительно 5 минут получаем:

Теперь добавляем слайдер. Можем воспользоваться «черным плюсиком» для добавления нового блока или кнопкой внизу «галерея».

Выбираем. Для загрузки фотографий, жмем «контент», пункт «настройки» - отображение слайдера на сайте.

После манипуляций, вот что получается в итоге:

Чтобы добавить разделитель следует обратиться к одноименному пункту меню.

Чтобы сделать так, как у нас представлено на макете, можно стандартный разделитель перетащить в редактор, сделать в нём все необходимое и его сохранить. Для этого, после того как мы добавили блок, заходим в настройки, опускаемся в самый низ и видим пункт «редактировать в zero block». Жмем на него.

Затем появится предупреждение, а далее, появится возможность редактировать блок, чем мы и займемся. На выходе получаем:

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

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

Поэтому, мы можем создать раздел с нуля или… воспользоваться другим способом. Находим ту блочную структуру, которая нам может подойти. Нашли пункт «Команда». Добавляем, конвертируем в «редактор зеро» (было описано ранее, где находится), изменяем. Чтобы картинка и текст вели на необходимый товар, заходим в свойства и прописываем путь напротив команды «link» и при необходимости указываем открытие ссылки в новом окне (пункт «target»). Не забываем сразу подправить отображение на мобильных устройствах.

Получаем следующее:

Фразу с разделителем «почему 1563 клиента выбрали нас» легче всего будет добавить путем копирования секции «популярная продукция». И перемещения в необходимое место с помощью предусмотренных кнопок в виде стрелок.

В итоге видим:

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

Для добавления партнеров (следующая часть нашей страницы), достаточно просто кликнуть по одноименному пункту меню и произвести в нем необходимые изменения через «конвертер zero». Разделитель делаем таким же образом, как описывали чуть ранее.

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

Предпоследний экран с оффером и формой обратной связи добавляем, выбрав пункт меню «форма и кнопки» и отредактировав привычным нам способом через «zero».

Счетчик, который идет в макете, есть в платных версиях тарифа. Также его можно добавить с помощью вставки html-кода (если он имеется), но эта возможность тоже подключается, если перейти на тарифный план стоимостью 750 рублей в месяц или более.

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

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

Вот и готова наша быстрая наброска примерно 65-70% главной страницы сайта, спустя примерно 40-60 минут.

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

• «справочный центр»;

• «вебинары»;

• «уроки и статьи».

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

Обзор настроек созданных страниц и сайта в онлайн-конструкторе.

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

В «настройках страницы» представлены следующие разделы:

• «Главное» - информация о названии страницы, ее ссылке, описании;

• «Бейджик» - картинка, отображающаяся в различных информационных источниках, а также в самой панели отображения страниц и сайтов;

• «Facebook and SEO» - позволяет задать необходимое отображение вашего веб-ресурса, как на поиске, так и на и в соцсети;

• «Экспорт» - позволяет открыть html-код страницы или сохранить исходник в архива zip (доступен только в тарифном плане «Бизнес»);

• «Действия со страницей» - позволяют дублировать, перенести на другой свой веб-сайт или аккаунт созданного проекта страницы, а также ее удалить;

• «Дополнительно» - функции, касающиеся анимации, ресурса страницы и т. д.

Настройки самого сайта:

• «Шрифты и цвета» - задают единый стиль для всего сайта;

• «Главная страница» - позволяет сделать главной любую проект-страничку;

• «Домен» - делегирование или покупка необходимого вам доменного имени сайта вместо стандартной ссылки;

• «Аналитика и SEO» - подключение инструментов для мониторинга посещения и активности пользователей (кроме той же «Яндекс Метрики» можно подключить такой замечательный сервис, как «Google Tag Manager» (подробнее: https://akiwa.ru/blog/obzor-google-tag-manager/ )) и SEO-оптимизация. Доступны только на платных тарифах!;

• «Формы» - позволяют производить интеграцию с различными CRM-системами. При бесплатном тарифе доступна только отправка заявок на указанный e-mail;

• «платежные системы» - подключение возможно только на платных тарифах!;

• «Шапка и подвал» - позволяют задать единую футер и хэдер для всех страниц сайта;

• «Ограничить доступ» - тут в принципе все понятно;

• «Еще» - предоставляет возможность загрузки favicon, указания API карт. Также предусмотрены: отключение подписи, подгрузки 404-ой ошибки, html-код для вставки  в <head>/</head>, своих ccs стилей (только на платных тарифных планах).

Рассмотренного материала в статье Вам должно вполне хватить, чтобы спокойно разобраться с онлайн-конструктором «Tilda» и предусмотреть возможные «подводные камни» (например, «SEO-оптимизация»), недоступные на бесплатной версии. Стоит отметить, что, несмотря на них, ценовая политика ресурса является одной из самых прозрачных и оптимальных с точки зрения цена/качество.