Создание сайта для маникюрного салона необязательно перепоручать высокооплачиваемым специалистам. Сделай его самостоятельно вместе с нами всего за 120 минут. Расскажем пошагово, как создать сайт для салона, чем наполнить и какую информацию разместить, а еще – проиллюстрируем все примерами.
Чтобы больше посетителей сайта оставляли заявку или заказывали обратный звонок, сайт должен быть:
Сайты бывают:
С помощью сайта клиенты:
Кроме того, он служит дополнительным инструментом для продаж и продвижения салона. Чтобы продавать постоянно, нужно один раз создать сайт и периодически следить за его актуальностью и наполнением.
Выбор платформы для сайта
Примеры сервисов:
В этой статье, мы рассмотрим, как создать собственный одностраничный сайт на конструкторе Tilda Publishing, а также определим необходимый список блоков и функций. Ты можешь использовать любой из конструкторов – они имеют тот же принцип и отличаются, в общем-то, только оформлением и тарифами на использование.
Структура сайта
Существует определенный порядок разделов, который рекомендуется использовать при создании страницы.
Прописывая структуру, указывай, какие конкретно блоки будут у сайта, и что они будут включать. Для вдохновения посмотри сайты конкурентов, но для того, чтобы сделать то же самое. Свежим взглядом ты увидишь сильные и слабые стороны. Что-то возьмешь на заметку, а от чего-то категорически откажешься.
Создать прототип можно в Word или просто нарисовать на листе бумаги. Как лучше оформить – показано на рисунке.
Прототип сайта
Кстати, обрати внимание на горизонтальные разделения – это границы блоков. 1 блок – 1 раздел структуры.
В прототипе:
Контент для сайта
После того, как ты четко представила структуру и оформление будущего сайта, пора позаботиться о его наполнении. Запомни – все на сайте должно быть уникальным. Не выкладывай чужие работы и не копируй чужой текст – репутация стоит дороже, чем заказать тексты у копирайтера.
На одностраничном сайте текст должен быть цепляющим, но максимально коротким. Никто не любит читать полотна текста, вчитываясь в сложные предложения. Написать текст можешь самостоятельно или привлечь копирайтера. Текст пиши по порядку – от первого блока к последнему.
Изображения для сайта
Найди свои лучшие работы или работы мастеров, подготовь фото салона, сотрудников, лицензий и другой информации, которая может пригодиться. Для фонового оформления, изображения можно брать в интернете, но не просто вбив название в поисковую строку Google.
Требования к изображениям:
Разумеется, фотографии должны отражать тематику сайта, дополнять его, а не просто перекрывать серый фон.
Подумай, в каком цвете будет оформлен сайт. Рекомендуется использовать один яркий акцентный цвет. Им выделяются кнопки, стрелки, разделители и другие мелкие детали. В остальном оформлении лучше отказаться от яркости, чтобы не рассеивать внимание посетителя.
После того, как подготовлена вся информация, имеется прототип и структура, можно приступать к сборке сайта.
Регистрация на конструкторе Тильда
Регистрация на конструкторе Тильда простая:
Сразу после регистрации, перед тобой появится окошко и просьба выбрать название для проекта. Написать тут можешь что угодно – это имя будешь видеть только ты.
Нажми на кнопку «Создать новую страницу»;
Создание страницы
После нажатия ты попадешь на страницу шаблонов. Выбери самый первый, пустой. Тильда автоматически начнет подсказывать, на какие из кнопок нужно нажать, чтобы ознакомиться с функционалом. Посмотрев все всплывающие окна, нажми на кнопку «Обложка».
Создание обложки
В появившемся меню выбери один из шаблонов, подходящий к прототипу. В нашем прототипе на обложке располагается заголовок и описание под ним.
Процесс выбора обложки
Если прокрутишь шаблоны ниже, увидишь, что некоторые из ник закрыты «замочком». Это значит, что пользоваться шаблонами можно только в платной версии сайта. Для того чтобы создавать сайт без ограничений, щелкни по «закрытому» шаблону и подтверди активацию пробного периода. После того, как 14 дней закончатся, тариф снова изменится на «free», но все использованные блоки, даже из платной версии, сохранятся.
Активация пробного периода
Первым делом на выбранной обложке поменяй фоновое изображение. Тут как раз пригодятся фотография со стоков. Для того чтобы изменить фон, нажми на «Контент» левой клавишей мышки;
Кнопка "Контент"
И выбери свою картинку, нажав на «Загрузить файл». После загрузки обязательно сохрани изменения, нажав на соответствующую кнопку вверху.
Загрузка файла
Если фото кажется слишком темным, нажми на «Настройки» рядом с «Контент» и измени показатель насыщенности. Обрати внимание, что на фото произойдёт изменение только после сохранения правок.
Изменение насыщенности
Внеси данные – добавь заготовленный текст и изображение, если того предусматривает прототип.
Добавь новое окно, нажав на «+» краю обложки.
Настройки сайта
В открывшемся слева выбери «О проекте» и снова найти схожий с прототипом шаблон. Например, как у нас, текст с заголовком и изображение.
Информация о проекте
Отредактируй шаблон, вставив текстовые и графические заготовки.
О проекте
Для добавления нового экрана, снова нажми на «+» на границе блока «О проекте». Следующим разделом будут преимущества, поэтому берем шаблон из соответствующего раздела.
Добавление преимуществ
Выбери шаблон, максимально подходящий прототипу. И заполни его в соответствии с заготовленным текстом. Кстати, в этом разделе есть несколько шаблонов с иконками, которые можно заменить.
Иконки на сайте
Нажми в левом верхнем углу нужно блока «Контент» и в появившемся окошке разверни раздел «Карточки». Чтобы заменить иконку, щелки по «Загрузить файл» или выбери иконки из библиотеки Тильды.
Способ замены иконки
Помнишь, мы говорили про яркие акценты? Можешь сделать цветными графические иконки, но для этого придется скачивать их со стороннего ресурса.
Сайты для поиска иконок:
На этих ресурсах есть бесплатные и платные наборы.
Пример преимуществ
Добавим новый раздел, где поделимся фотографиями команды. По замыслу, это должны быть картинки с короткими подписями. Ищем нужный шаблон в библиотеке блоков. Там, кстати, есть специальный раздел «Команда».
Специальный раздел "Команда"
Действуем по уже изученной схеме – меняем картинки и текст на свои.
Замена картинок и текста
Чтобы изменить цвет разделителя, нажми на «Настройки» в левом верхнем углу и найди в открывшемся меню «Стиль разделителя». Открыв раздел, поменяй оттенок элемента, выбрав его в палитре.
Стиль разделителя
Добавим галерею лучших работ. В библиотеке блоков – «Галерея». Выбирай нужный вариант, походящий под задумку.
Выбор фото из галереи
В галерее такого плана поменяй цвет стрелок, выделив их ярким оттенком. Перейди в «Настройки», выбери «Стиль галереи» и настрой нужные детали. Кстати, для того, чтобы оттенок ярких элементов был одинаковым во всех блоках, просто скопируй его в «Буфер обмена». Для этого:
Настройки цвета
Теперь, когда будешь прорабатывать элементы цветом, просто вставляй его название.
Галерея с рисунками
Добавляем блок с ценами. В описании цен не обязательно указывать все услуги из прайса салона. Достаточно выделить самые основные и востребованные. Это делается для того, чтобы посетитель сайта мог составить представление об уровне цен и понять, подходит ли ему данное предложение. Блок с ценами находится в библиотеке шаблонов – раздел «Тарифы».
Раздел "Тарифы"
Выбери понравившийся вариант и заполни его в соответствии с ценами в прайсе.
Прейскурант на сайте
В последнем блоке размешаем призыв к действию – оставить заявку на запись. Для этого выбираем блок из раздела «Форма и кнопка», включающий заголовок, подзаголовок, поля для записи и кнопку.
Вкладка "Форма и кнопка"
Выбираем шаблон «Форма на обложке с множеством полей».
Шаблон «Форма на обложке с множеством полей»
Меняем фон, вставляем текст, делаем кнопку нужного цвета в «Настройки» - «Кнопки».
Для того чтобы поменять текст кнопки, перейди в «Контент», прокрути меню вниз до «Текст кнопки» и замени его на желаемый.
Замена текста кнопки
Обрати внимание на надпись под кнопкой. Изменить ее можно в самом конце меню «Контент». Пример фразы, которую можно использовать – на фото ниже. Данное требование выполняется на любом ресурсе, собирающем информацию о пользователях. Данное правило регулируется Федеральным законом № 152-ФЗ «О персональных данных» от 27.07.2006 г.
Согласие на обработку данных
Настраиваем поля для ввода. В «Контент» разверни меню «Поля для ввода» и выбери нужные. Как вариант – номер телефона клиента, а также дата и время процедуры.
Разделы настройки:
Для графы «Телефон» можно добавить маску – автоматическое проставление когда страны, например «+7». Данный пункт обязательным не является, но облегчает работу, если прозвон клиентов осуществляется через ip-телефонию из CRM-системы.
Пример оформления
Настроим подвал, а позже обсудим, куда будут уходить данные после нажатия кнопки. В библиотеке шаблонов найди «Подвал».
Вкладка "Подвал"
Подбери нужный вариант. Для настройки активности иконок социальных сетей, нажми «Контент». В списке выбери нужный ресурс и вставь ссылку на группу, страницу и паблик. Чтобы убрать ненужные соц. сети, просто удали любые символы в их строке.
Выбор соц. сетей
В этом же окне меняется название активной кнопки «В начало». Она может иметь и другое название, например, «Наверх» или «Прочитать еще раз».
Смена названия кнопки "В начало"
Вернись на форму с кнопкой и перейди в «Контент». В меню найди «Подключенные сервисы».
Подключенные сервисы
Нажми на «Подключить». Тильда предлагает несколько вариантов – CRM-системы, сервисы рассылок, формы. Если у тебя нет CRM или системы не нашлось в списке, выбери «Google Sheets». В этом случае все заявки будут отправляться в Google таблицы, откуда администратор сможет их обрабатывать.
Google Sheets
После выбора Google, потребуется только авторизоваться в Гугле и разрешить доступ Тильды к созданию и изменению таблицы. Таблица приема данных будет создана автоматически.
Вернись в режим редактирования и в верхнем левом углу щелкни на «Мои сайты». Выбери свой проект.
Вкладка "Мои сайты"
Нажми настройки и в появившемся окне исправь заголовок, где сейчас написано Blank page. Тут прописывается название, которое будет отображаться во вкладке браузера при открытии сайта.
Название сайта
Вернись в режим редактирования сайта и в правом верхнем углу нажми «Опубликовать».
Кнопка "Опубликовать"
В появившемся окне введи адрес сайта.
Заполнение адреса сайта
Кликни на «Сохранить и продолжить». Сайт салона красоты готов - вот что получилось is-lavanda.tilda.ws. Этим сайтом уже можно пользоваться. Но для удобства и запоминаемости имени сайта, лучше подключить к нему свой домен.
Подключить домен в конструкторе Тильда можно в тарифных планах «Personal» и «Business». Стоимость от 500 до 1000 рублей в месяц.
Тарифы в конструкторе Тильда
Для подключения домена, необходимо выбрать регистратора из списка тех, с которыми работает конструктор Tilda.
На странице регистратора введи интересующее имя сайта, по которому пользователи смогут найти его среди других страниц. Например – «is-lavanda». Убедись, что имя свободно.
Оплати покупку, предварительно удалив из корзины все автоматически добавленные компоненты, например, хостинг, – они тебе не пригодятся.
Раздел "Помощь"
Если не подключать платный тариф, сайт может существовать на поддомене tilda.ws. Это никак не влияет на его функционирование, индексацию в поиске и продвижение.
На представленной в примере платформе есть и другие возможности, но теперь, когда ты имеешь базовые знания – разобраться в них не составит труда. А если будут вопросы, не стесняйся задавать их в комментариях!
Еще можно создать своего бота в Телеграм для информирования об услугах, ценах и показа портфолио - никаких знаний не требуется, просто повторяй все шаги за нами:
Комментировать
