Как сделать одностраничный сайт
Собираем страницу на Тильде на примере лэндинга мероприятия.
Смотрите также:
Как сделать многостраничный сайт [видео]
Пошаговая демонстрация процесса создания сайта из нескольких страниц: от регистрации до публикации.
Как сделать интернет-магазин [видео]
Руководство по созданию магазина с корзиной и онлайн-оплатой.
Как сделать блог [видео]
Пошаговая демонстрация процесса создания блога: от регистрации до публикации.
Как сделать статью [видео]
Специальный выпуск с «Теориями и практиками»
Как сделать лонгрид [видео]
Пошаговая демонстрация процесса создания лонгрида: от регистрации до публикации.
Сайт, о котором вы мечтали, начинается прямо здесь
Зарегистрироваться
Как и где создать лендинг?
На платформе Tilda Publishing это можно сделать бесплатно и за один день. Все, что нужно, — это зарегистрироваться.
Как сделать одностраничный сайт, не зная языка программирования?
Достаточно зарегистрироваться на платформе Тильда. В каталоге готовых блоков вы выбираете понравившиеся модули, которые лучше всего позволят представить ваш продукт.
Одним кликом вы перетаскиваете блоки и создаете лендинг пейдж. Если у вас уже подготовлен контент, то после регистрации на Тильде можно запустить сайт уже на следующий день.
На русскоязычной платформе вы можете сделать одностраничный сайт для:
Демонстрации собственного портфолио
Презентации конкретного товара
Как сделать лендинг самому
Зарегистрируйтесь на платформе Тильда
Соберите сайт из блоков или воспользуйтесь готовыми шаблонами лендингов на самые разные темы
Наполните лендинг контентом
Продвижение
Поисковые системы хорошо индексируют одностраничные сайты, сделанные на платформе Tilda Publishing. Веб-ресурсы предусматривают метаописание, ключевые слова, sitemap, файлы robots и другие важные и необходимые для SEO- продвижения инструменты.
Адаптивность
Как сделать дизайн лендинга, чтобы он одинаково хорошо смотрелся со смартфона, компьютера и планшета? С Тильдой вам не придется об этом думать. Сайты автоматически подстраиваются под разрешение экрана. Не нужно будет создавать отдельно мобильные версии, что хорошо скажется на поисковом продвижении и повысит лояльность вашей аудитории.
Узнайте, как создать продающий лендинг
Начните с регистрации на Тильде
Пошаговое руководство по созданию лендинга на Тильде
Добрый день, уважаемые пользователи тильда. Сегодня мы с вами рассмотрим такой пример как, создать Landing page на конструкторе Tilda.
Если вам нужен Лендинг или простой сайт например, для портфолио, резюме, небольшого интернет-магазина, вы можете его создать самостоятельно с помощью Tilda. Даже новичок без навыков дизайна, вёрстки и программирования и администрирования сможет собрать сайт с нуля, используя готовые шаблоны и блоки.
Тарифные планы
Бесплатный тариф с ограниченным функционалом.
Позволяет создать один сайт до 50 страниц, занять не более 50 МБ на сервере, получить доступ к некоторым блокам и библиотеке иконок и изображений. CRM и автоматическая адаптация под мобильные устройства включены во все тарифы.
750 ₽ в месяц или 6 000 ₽ за год.
Разрешает создание одного сайта до 500 страниц и до 1 ГБ, открывает полную коллекцию блоков, позволяет принимать платежи с сайта. Можно подключить свой домен, есть возможность добавления товаров, SEO-оптимизации страниц и просмотра аналитики.
1 250 ₽ в месяц или 12 000 ₽ за год.
До 5 сайтов по 500 страниц, до 1 ГБ на сервере. Включает в себя тот же функционал, что и на тарифе Personal, плюс экспорт кода и безналичную оплату для клиентов.
Инструкция по созданию сайта на Tilda
Регистрация и вход
- Зарегистрируйтесь на сайте Tilda.
2. Платформа предложит создать новый сайт. Укажите его название и нажмите «Создать».
3. Перейдите в раздел «Тарифы и оплата». Даже если вам достаточно бесплатного тарифа, рекомендуем использовать бесплатный двухнедельный тестовый период тарифа Personal для тестирования возможностей конструктора.
4. Вернитесь в раздел «Мои сайты» и нажмите «Редактировать сайт» под названием проекта. Затем нажмите «Настройки сайта» в верхнем правом углу.
5. На вкладке «Главное» добавьте описание сайта и пропишите субдомен. Здесь также есть ссылка для подключения собственного домена.
Создаём первую странницу
Нажмите на кнопку «Создать новую страницу». Выберите, хотите ли вы создать страницу с нуля или использовать готовый шаблон.
Выбираем шаблон нашего будущего сайта
В Tilda доступно около 250 шаблонов для различных целей и видов бизнеса. Выберите подходящий по функционалу и дизайну шаблон, который можно будет настроить позже.
Измените заголовок сайта
Добавляем блоки
Если готовый шаблон не удовлетворяет вашим требованиям, вы можете редактировать страницы, добавляя нужные блоки.
1. Откройте страницу в режиме редактирования.
2. Блок можн�� добавить в любое место страницы, нажав на значок «+» под, над и между другими элементами.
3. Слева откроется библиотека готовых блоков, которые распределены по тематическим группам. Найдите группу «Меню» и выберите вариант блока с нужными вам элементами, например, ME301 (универсальное меню с логотипом слева).
4. Блок появился на странице, теперь вы можете его отредактировать. При наведении на меню вы увидите кнопки: номер блока (позволяет сменить тип блока, сохранив содержимое), «Настройки» (всё, что касается внешнего вида) и «Контент» (содержимое блока).
5. Чтобы изменить пункты меню, добавить логотип, ссылки на соцсети и другие элементы, нажмите на кнопку «Контент».
6. Выберите «Список пунктов меню». В открывшемся окне задайте названия пунктов и ссылки на них. Если вы создаёте одностраничник, проставьте якорные ссылки для навигации по лендингу. Если делаете многостраничный сайт, но другие страницы еще не создали, добавьте названия пунктов меню, а к ссылкам вернитесь позже
7.Ниже добавьте логотип или название компании/сайта и ссылки на соцсети.
8. Если хотите, чтобы посетители сайта совершали целевое действие прямо в верхнем меню (например, писали вам в мессенджер), разместите там соответствующие кнопки.
9. После того как внесли изменения, нажмите «Сохранить» (если планируете ещё что-то делать в контенте блока) или «Сохранить и закрыть».
После внесения изменений нажмите «Сохранить» или «Сохранить и закрыть».
Вы можете опубликовать сайт тремя способами:
- Нажать на кнопку «Опубликовать» в режиме редактирования страницы.
- В списке страниц сайта нажать на кнопку «Публиковать» напротив нужной страницы.
- В списке страниц кликнуть по ссылке «Опубликовать все страницы».
Теперь ваш сайт доступен в интернете!
UX/UI дизайнер, соосновательница студии helga.more
- Что такое Tilda
- Из каких блоков состоит лендинг
- Как добавлять и изменять блоки
- Что такое Zero Block и в каких ситуациях он нужен
- Где брать иллюстрации для лендинга
- Где брать тексты для лендингов
- Что такое шрифтовая пара и как ее составлять
-
Что взять на заметку, чтобы быть в тренде
Что такое Tilda
Tilda (Тильда) — это конструктор, который позволяет создать собственный сайт без специальных знаний и навыков. Он популярен, потому что это один из немногих российских ресурсов, а еще у него много функций, количество которых постоянно растет.
Встречаются дизайнеры, которые считают, что на Tilda не получится сверстать хороший сайт. Но обычно это специалисты, заставшие одну из первых итераций конструктора, когда у него действительно было мало возможностей. Альтернативы Tilda — это WordPress и Webflow, но эти сервисы сложнее и требуют знания кода.
Из каких блоков состоит лендинг
В Tilda есть шаблоны с готовыми вариантами страниц, где дизайнеру остается только вписать собственный текст и заменить изображения. Это быстро, но стандартные решения подойдут не для каждого проекта. Создавая лендинг, нужно учитывать целевую аудиторию, специфику продукта или услуги. Поэтому для качественного продающего лендинга лучше разработать индивидуальную структуру.
В качестве примера могу рассказать о своей работе для компании по ландшафтному дизайну.
- Меню и обложка. Меню — это верхняя строчка, которая встречается почти на каждом сайте. Она нужна для навигации по лендингу или перехода на другие страницы. Например, при клике на «Наши услуги» пользователь перейдет ниже на соответствующий блок. Также тут можно разместить логотип компании.
Обложка — это визитная карточка лендинга. На этом экране мы кратко описываем продукт, иногда добавляем «call to action» — кнопку для покупки, форму регистрации или окошко, в котором можно оставить контакты. Это самый важный блок, и если он не сработает, то пользователь может сразу закрыть страницу.
- Информация о продукте. Например, список услуг дизайнерской компании, ассортимент товаров в интернет-магазине или перечень учебных модулей в онлайн-курсе. В таких блоках часто используются пары «текст-картинка».
- Преимущества. Список с причинами выбрать именно нас, а не конкурентов.
- Этапы работы. В этом блоке с нумерацией можно пошагово описать, что ждет пользователя, если он совершит нужное нам действие.
- Call to action. В конце еще раз предлагаем пользователю совершить нужное нам действие — даем ссылку на скачивание программы или форму для регистрации или контактов.
Что еще можно добавить на лендинг:
- Отзывы. Обычно этот блок включает серию кратких цитат клиентов с их фотографиями.
- Цены. Информация о стоимости продукта и тарифах.
- Целевая аудитория. Блок, отвечающий на вопрос «кому подойдет этот продукт».
- Кейсы. Примеры выполненных работ — особенно актуально для компаний, чьи результаты можно представить в виде изображений. Например, для студий дизайна или архитектурных бюро.
Как добавлять и изменять блоки
Чтобы создать сайт на Tilda, нужно пройти регистрацию и кликнуть по ссылке «Создать новый сайт». После этого нажмите на кнопку «Создать новую страницу» и выберите «Пустая страница». Откроется рабочая область лендинга, на которую можно добавлять блоки.
Чтобы добавить первый элемент, выберите его в «Библиотеке блоков» — варианты разделены по категориям.
У большинства блоков есть два варианта редактирования — «Контент» и «Настройки». Обе кнопки находятся в левом верхнем углу блока.
В меню «Контент» можно набрать свой текст или поставить свои изображения вместо установленных по умолчанию.
В меню «Настройки» можно изменить дизайн экрана: установить ширину колонок, отредактировать отступы, заменить шрифты в блоке или добавить простую анимацию.
Одна из самых полезных функций в этом меню — «Отразить по горизонтали», которая нужна, чтобы выставить пары «текст-картинка» на лендинге в шахматном порядке.
Что такое Zero Block и в каких ситуациях он нужен
Zero Block — это встроенный редактор внутри Tilda. В нем можно создавать свои блоки вместо тех, что уже есть в библиотеке. Чтобы это сделать, пролистайте «Библиотеку блоков» до конца и выберите «Нулевой блок».
Zero Block поможет сделать что-то необычное. Например, сложную анимацию или градиентный переход между элементами, чтобы блоки плавно перетекали друг в друга.
Если лендинг не требует сложного дизайна, Zero Block лучше не использовать. Вот несколько причин почему:
- Визуальная уникальность нужна сайту гораздо меньше, чем его способность представлять продукт — а с этим справятся и стандартные блоки.
- Иногда уникальность все усложняет — проверенные стандартные блоки могут помочь достичь более высокой конверсии, чем что-то необычное.
- Если заказчику понадобится изменить текст или картинку в Zero Block без помощи дизайнера, он может все сломать.
- Стандартные блоки автоматически адаптируются под компьютеры, планшеты и смартфоны — в Zero Block придется настраивать элементы для каждого экрана вручную.
Где брать иллюстрации для лендинга
Лучше всего использовать иллюстрации от заказчика. Обычно это комплект фотографий, снятых и обработанных одним фотографом. Такой подход помогает сохранить единый стиль страницы.
Если клиент не предоставил изображения, можно использовать бесплатные стоки, например, Unsplash и Freepik. У этого способа есть свои сложности:
- Во-первых, вы должны выбирать фотографии с одинаковой цветокоррекцией, лучше всего из одной серии.
- Во-вторых, снимки со стоков часто смотрятся неестественно. Вряд ли кто-то поверит человеку на фото, который сидит за компьютером, улыбается во все 32 зуба и показывает в камеру большой палец. Но если дизайнер действительно хорошо поработал со стоками, то фотографии можно будет принять за сделанные заказчиком, а не взятые из интернета.
Часто заказчики делятся своими подборками с Pinterest и просят использовать их в дизайне, но так лучше не делать, чтобы не нарушать авторские права.
Еще один инструмент, который я использую при создании изображений — это Figma. Она поддерживает много плагинов, с помощью которых можно создавать объекты для декорирования сайтов на Tilda. Например, 3D-фигуры или эффекты для оформления заголовка. Все это можно сохранить в формате PNG и добавить на сайт.
Также важно, чтобы изображения не сделали сайт слишком «тяжелым», поэтому оценивайте время загрузки страницы и не используйте фото в слишком высоком разрешении.
По этой же причине я не рекомендую использовать видео на заставке обложки. Бывает, что вместо ролика пользователь видит просто черный экран, а к моменту загрузки видео он уже успевает все пролистать и уйти с лендинга.
Где брать тексты для лендингов
Дизайнер не пишет тексты — это делает копирайтер. Часто заказчик приходит с уже готовым материалом, в таком случае нужно договориться, чтобы вы могли редактировать хотя бы длину абзацев.
На лендинге не должно быть огромных полотен текста, его нужно делить на небольшие части. Обычно человек легко читает только три-четыре строчки. Также важно поддерживать консистентность — если у нас есть несколько пунктов в одном блоке, то в них должно быть примерно равное количество текста.
Лучше всего, если заказчик предлагает дизайнеру составить ТЗ для копирайтера — тогда текст не придется адаптировать под дизайн страницы. Бывает и так, что заказ для дизайнера включает копирайтинг, но тогда нужно выбирать: либо отказаться, либо попросить больше денег. Можно потратить на текст больше часов, чем на дизайн, при этом стоимость проекта останется той же.
Можно повышать ставку для разработки проектов «под ключ» и нанимать копирайтера как подрядчика самостоятельно. Например, в моей команде есть верстальщица и маркетолог, а сумма заказа у нас складывается с учетом гонорара каждого специалиста.
Что такое шрифтовая пара и как ее составлять
Чем больше вы используете шрифтов, тем менее аккуратно выглядит сайт. Три или больше шрифта могут подойти суперкреативным проектам с «кислотным» дизайном и безумной графикой. В то же время всего один шрифт на странице будет выглядеть скучно.
Я советую брать два шрифта и не больше трех-четырех вариантов различных их начертаний: для заголовков, подзаголовков, основного текста и, может, крупной надписи на обложке.
Шрифты бывают двух видов:
- антиква — с засечками;
- гротеск — без засечек.
К первым относятся, например, Times New Roman, Georgia, Adobe Garamond. Ко вторым — Helvetica, Roboto, Open Sans.
Оптимальное сочетание — это антиква в заголовке и гротеск в основном тексте. Декоративная антиква пришла из печати и выглядит выразительно, но при этом утомляет при чтении длинных текстов на экране. Гротеск же наоборот — прост, ясен и легко читается даже мелким кеглем.
Что взять на заметку, чтобы быть в тренде
Тренды в дизайнерской сфере отличаются от того, что просят заказчики. Представления о передовом дизайне у клиентов традиционно отстают от мировых тенденций на год-полтора.
Например, у заказчиков востребован минимализм — правда, после всех дополнений клиента он часто пресыщается деталями и становится «псевдоминимализмом».
Также часто встречаются заказы на проекты в стиле «глассморфизм» — дизайн с эффектом матового стекла.
Если говорить о трендах для дизайнеров, то в моде «кислотная» графика и «жидкое стекло» — дизайн с отражениями и характерными цветами, как в лужах после кислотного дождя.
Также сохраняется тренд на крупную типографику с гротескными шрифтами.
Уходит тренд на табличность в верстке — разделение страницы на поля, очерченные линиями.
Все эти тренды появились недавно, но в начале года все актуальные тенденции определяются как «прошлогодние», и трудно сказать, что будет актуально в ближайшие месяцы. Следите за вашими любимыми дизайнерами и изданиями, чтобы уловить новые веяния.
#Руководства
-
0
Научимся собирать красивый современный сайт из готовых блоков и настраивать его внешний вид, а потом опубликуем его в интернете.
Иллюстрация: Аня Макарова для Skillbox Media
Пишем про дизайн и искусство. Всё, что вы хотели знать о настоящем, прошлом и будущем визуальной культуры.
Tilda — онлайн-конструктор сайтов, с помощью которого можно быстро сделать и опубликовать сайт. Чтобы им пользоваться, не нужно покупать доменное имя или учиться программировать — достаточно расставить по местам готовые блоки.
В этой инструкции рассказываем, как устроена Tilda, а заодно показываем, как сделать себе сайт-визитку.
Простота. Внутри Tilda много готовых блоков, которые помогут быстро собрать страницу и не переживать, что где-то разъедутся отступы. Благодаря этому не придётся долго разбираться в функциях редактора.
Привлекательность результата. Так как всё шаблонизировано, сделать стройную структуру сайта будет проще и быстрее.
Экономия. У Tilda есть бесплатный тариф, который позволяет полностью настроить и опубликовать одностраничный сайт. Конечно, этого не хватит для полноценного магазина, но зато вам не придётся платить программистам за вёрстку портфолио.
Ограничения. Подход к вёрстке в Tilda во многом упрощает работу, но из-за этого вам придётся смириться со множеством ограничений. Например, если вам хочется поменять в блоке местами картинку и текст, а в конструкторе такой настройки нет, придётся работать с тем, что есть.
Все ограничения можно обойти, если использовать редактор Zero Block, но с ним нужно разбираться отдельно. Подробнее о Zero Block читайте в нашем разборе.
Цена. Большинство блоков из Tilda использовать нельзя, пока не оформите подписку. Часто можно обойтись и без них, но тогда вам придётся жертвовать красотой.
При этом вы в любой момент можете получить бесплатный доступ к платному тарифу на две недели. Но как только срок закончится, придётся платить 500 рублей в месяц.
1. Зарегистрируйтесь в Tilda, если у вас ещё нет аккаунта.
2. После регистрации платформа сразу же предложит создать свой первый сайт. Сделайте его и придумайте название — для практики можно просто «Мой сайт» или Test. Но лучше назвать его осмысленно, чтобы потом название не сбивало вас с толку.
3. Нажмите на кнопку «Создать новую страницу» — откроется каталог шаблонов Tilda. Выберите пустую, так как вы будете делать страницу с нуля.
4. По умолчанию эта страница будет называться Blank page. Чтобы поменять её название, нажмите на «Настройки» и напишите «Главная».
Чтобы не дизайнить пустоту, советуем подыскать референсы для своего сайта — посмотрите, как известные дизайнеры рассказывают о себе, показывают работы, предлагают услуги. Точь-в-точь как у них сделать не получится, но у вас будет структурная опора, которая поможет быстрее собрать сайт.
1. Нажмите кнопку «Все блоки», в появившейся панели нажмите «О компании» и выберите любой шаблон. Советуем взять шаблоны с номерами AB402 или AB603 — они будут указаны в серой плашке около названия.
В бесплатном тарифе доступно ограниченное количество блоков — остальные выглядят светлее и рядом с ними есть замочек. Если такие шаблоны вам нравятся больше, нажимайте на них и активируйте бесплатный доступ ко всем функциям на 14 дней. Но после истечения срока вам придётся купить и оплачивать подписку на сервис.
Страницу из нашей инструкции можно повторить в бесплатной версии.
2. Наведите курсор на блок и нажмите «Контент». В появившемся меню в заголовке напишите своё имя, в описании — кратко о себе. Подзаголовок заполните по желанию — если оставить его пустым, то и на сайте он отображаться не будет. В блоке «Изображение» загрузите свою фотографию. Затем нажмите «Сохранить и закрыть».
3. Наведите курсор на блок и нажмите «Настройки». В появившемся меню найдите пункты «Отступ сверху» и «Отступ снизу». Сверху укажите 2.5 line, а снизу — 0. Затем нажмите «Сохранить и закрыть».
1. Наведите курсор на меню и нажмите на плюсик — откроется меню с выбором модулей.
2. Обычно, чтобы коротко рассказать об услугах, используют структуру из трёх колонок. Поэтому советуем выбрать шаблон FR201 в категории «Преимущества».
3. Наведите курсор на блок и нажмите «Контент». В появившемся меню нажмите «Шапка блока» и в заголовке напишите «Услуги», а в описании — коротко о том, чем вы занимаетесь.
4. В блоке «Карточки» напишите три услуги, которые вы будете предоставлять клиентам, и описания к ним. А ещё в этом блоке удалите все картинки с иконками — в нашем случае эти абстракции не будут ничего говорить о вашей квалификации, поэтому они не нужны. Нажмите «Сохранить и закрыть».
5. Наведите курсор на блок и нажмите «Настройки». В появившемся меню найдите пункты «Отступ сверху» и «Отступ снизу». Сверху укажите 5 line (150 px), а снизу — 6 line (180 px). Затем нажмите «Сохранить и закрыть».
1. Наведите курсор на блок с услугами и нажмите на плюсик — откроется меню с выбором модулей.
2. Выберите шаблон TL02B в категории «Заголовок». Наведите курсор на этот блок, кликните на текст и напишите «Портфолио». Затем нажмите «Настройки», в появившемся меню найдите пункты «Отступ сверху» и «Отступ снизу». Сверху и снизу укажите 0. Нажмите «Сохранить и закрыть».
3. Наведите курсор на меню и нажмите на плюсик. Выберите шаблон IM10. Наведите курсор на этот блок и нажмите «Контент». Измените в нём текст — напишите короткое описание вашего проекта. Затем — поменяйте иллюстрацию.
4. Нажмите «Настройки», найдите пункт «Отступ сверху» и «Отступ снизу». Сверху укажите 2 line (60 px), а снизу — 0. Нажмите «Сохранить и закрыть».
5. Сделайте ещё один или два таких же блока с разными проектами. Чтобы вёрстка была разнообразнее, наведите курсор на любой из блоков, нажмите «Настройки» и поставьте галочку на «Отразить по горизонтали» — текст и картинка поменяются местами.
1. Наведите курсор на последний блок и нажмите на плюсик — откроется меню с выбором модулей. Выберите шаблон CN102 в категории «Контакты».
2. Наведите курсор на блок и нажмите «Контент». В появившемся меню в поле заголовка напишите «Связаться со мной». Из второго и третьего блоков просто удалите всё.
3. Ниже укажите, где именно вам можно написать: телефон, почта, Telegram или другие соцсети.
4. Нажмите «Настройки», в появившемся меню найдите пункт «Отступ сверху» и «Отступ снизу». Сверху и снизу укажите 5 line (150 px).
1. На верхней панели в правом углу нажмите кнопку «Предпросмотр» и проверьте свой сайт. Не забудьте протестировать и мобильную версию — в режиме предпросмотра нажмите на иконку с ноутбуком и вместо неё выберите телефон. При необходимости исправьте все ошибки.
2. Нажмите кнопку «Опубликовать». В появившемся меню введите название сайта — для сайта-визитки уместно писать в адресе своё имя, например dashaivanova.tilda.ws.
3. Если вы заметили какие-то ошибки, то их можно поправить в любой момент через редактор Tilda.
После публикации советуем настроить то, как ваш сайт будет отображаться в поисковиках и социальных сетях. Для этого в меню редактирования сайта нажмите кнопку «Настройки» и в блоках «Главное», «Бейджик», «Соцсети» и SEO измените всё, что вам нужно, — например, загрузите новые картинки, поменяйте заголовок и описание.
Другие инструкции по Tilda
Научитесь: Дизайнер сайтов на Tilda
Узнать больше