Если вам нужно быстро, качественно и без космических вложений запустить свой сайт, конструктор RU-CENTER будет оптимальным вариантом. Не нужно вдаваться в подробности программирования и дизайна, обсуждать множество деталей со сторонними специалистами. Достаточно выбрать готовый шаблон и адаптировать его под свои задачи.
В этой статье рассказываем, как собрать сайт в конструкторе RU-CENTER. Разбираемся, с чего начать и каким предварительным этапам уделить больше внимания, чтобы сайт успешно работал. А главное, показываем наглядно и по шагам, как запустить несложный лендинг за пару часов.
Что такое конструктор сайтов и кому он будет полезен
Конструктор сайтов — это инструмент, с помощью которого можно собрать сайт без написания кода, создания дизайна и верстки. Текст и изображения можно размещать сразу в готовом шаблоне.
В конструкторе можно создать практически любой сайт: лендинг, блог, сайт компании, простой интернет-магазин. Если вам нужен полноценный интернет-магазин, рекомендуем конструктор «Эквид». Он обладает полным функционалом, чтобы запустить подобный сайт с нуля или подключить новые каналы продаж к уже существующему.
Дальше пошагово разберем, как собрать несложный лендинг в нашем конструкторе.
Как собрать сайт в конструкторе
Шаг 1. Зарегистрируйте доменное имя
Лучше сразу зарегистрировать домен, чтобы быть уверенным, что его не займут, пока вы будете разрабатывать сайт. Если подходящее доменное имя в классических зонах .ru, .com, .net занято, присмотритесь к тематическим доменам.
Шаг 2. Поставьте заглушку на сайт
Сделайте заглушку «Сайт находится в разработке», чтобы не открывалась пустая страница или на экран не выводилась информация об ошибке сервера. На заглушке стоит разместить контакты для связи и ориентировочную дату запуска сайта. Так посетители будут знать, когда возвращаться.
Для начала возьмите тариф «Стартовый» или приступите к работе в тестовом режиме (на 30 дней). Прикрепите к выбранному варианту домен и используйте готовый шаблон «Сайт находится в разработке» из библиотеки конструктора.
Когда вы будете готовы наполнить сайт контентом, смените тариф на «Персональный» или «Бизнес». Это даст вам доступ к расширенной библиотеке шаблонов и опций.
Варианты шаблонов «Сайт находится в разработке» в конструкторе RU-CENTER
Опубликованная версия шаблона «Сайт находится в разработке»
Шаг 3. Соберите контент и структуру сайта
Лучше заранее подумать, какая визуальная стилистика вам близка и какие элементы точно должны быть на сайте. Так вам будет проще сориентироваться в библиотеке шаблонов и элементов конструктора.
Если у вас уже готовы текст и иллюстрации для будущего сайта, сразу переходите к Шагу 4. В этом блоке мы показываем, как быстро собрать сайт в редакторе.
Если контент еще не готов, читайте наши советы по порядку.
Определите, какой тип сайта вам нужен
Разные цели и задачи бизнеса требуют от сайта разных функций и разной организации контента.
Если вам нужно прорекламировать один товар или услугу, лучше выбрать посадочную страницу — лендинг. Для рассказа о компании и ее деятельности подойдет корпоративный сайт. А если вы предлагаете клиентам широкий выбор товаров или услуг, оптимальным решением будет интернет-магазин. Подробнее об этом мы рассказывали в статье «Как понять, какой сайт вам нужен».
Напишите тексты для сайта
Стартовые тексты вы можете написать сами. Расскажите о компании, ее товарах и/или услугах. Старайтесь быть лаконичными и конкретными. Избегайте слишком сложных формулировок, непонятных аудитории терминов и абстрактных фраз. Приводите больше примеров и фактов, чтобы читателю было легче представить ваш продукт в своей жизни.
В будущем, если потребуется больше текстового контента, можно нанять в штат редактора или воспользоваться услугами контент-агентства.
Найдите источники визуального контента
Уделите внимание созданию качественных фотографий и иллюстраций. Фотографии, картинки, иконки и другие визуальные элементы делают контент на сайте нагляднее, помогают верно расставить смысловые акценты и повысить конверсии. О том, как правильно искать и использовать изображения на своем сайте, мы рассказывали в отдельной статье.
Соберите структуру для хорошего SEO
Если вы планируете не лендинг или сайт-визитку, а большой сайт со множеством страниц, нужно продумать структуру сайта. Она напрямую влияет на продвижение ресурса в поисковиках. Важно уделить внимание структуре на первых этапах, чтобы не пришлось переделывать ее уже после запуска сайта. Подробно об этом мы рассказывали в статье «Как правильно сделать структуру сайта для SEO».
Соберите референсы
Изучите сайты, которые вам нравятся, и соберите мудборд — так называемую «доску настроения». Это подборка фотографий, иллюстраций, шрифтов и цветовых схем, которая поможет определиться, каким будет дизайн вашего сайта.
Отметьте на мудборде понравившиеся элементы, чтобы наглядно представить детали будущего сайта.
В каких сервисах можно собрать мудборд
Pinterest. Здесь можно собрать свою доску картинок: выбирать уже загруженные изображения других пользователей, прикреплять с других ресурсов или загружать свои.
Moodboard. Сервис позволяет создавать подборки картинок, составлять из них коллажи и сохранять мудборд в .pdf.
Miro. В бесплатной версии ресурса можно редактировать одновременно до трех досок, а также пригласить еще трех пользователей, чтобы работать над проектами вместе.
Figma. Этот инструмент потребует времени на освоение. Но, если вы хорошо знаете Photoshop, разобраться будет несложно.
Специальные сервисы удобны и позволяют быстро создавать красивые и гармоничные мудборды. Если же вы предпочитаете работать в графическом редакторе, используйте любой: Photoshop, Paint или Illustrator.
Пример мудборда для сайта в Figma
Шаг 4. Соберите сайт в конструкторе
Вот такой сайт можно создать в нашем конструкторе всего за пару часов, если вы уже подготовили текст и фотографии.
Сейчас покажем, как мы его собирали по шагам. Вы можете пройти этот путь самостоятельно прямо сейчас, оформив тариф «Конструктор на 30 дней».
1. Изучите панель инструментов
Интерфейс конструктора интуитивно понятен, но мы советуем посмотреть интерактивную справку перед тем, как начнете собирать сайт. Так вы быстрее разберетесь, как работать с панелью инструментов.
Автор этой статьи изучил интерактивную справку полностью за 38 минут
Чтобы перейти в режим видеоинструкций, нажмите кнопку «Помощь» на верхней панели. Здесь собраны короткие ролики с основными сценариями работы в конструкторе. Ролики без звука, поэтому их удобно смотреть в любом месте без наушников.
Особенно полезными будут инструкции для кнопок в верхней части панели — основных инструментов, с которыми вы будете работать.
Дополнительно можно обращаться к разделу «Помощь» — здесь есть ответы на частые вопросы и разборы сценариев использования конструктора.
Основная информация о работе с конструктором есть в разделе «Помощь»
Если у вас останутся вопросы, задавайте их нашим специалистам. Форма обратной связи ниже на этой же странице.
2. Выберите шаблон
У каждого шаблона есть готовая сетка и границы. Вам останется только расположить блоки на странице и наполнить их текстом, фотографиями и видео.
В тестовой версии конструктора доступно более 200 шаблонов
Для удобства все шаблоны разбиты по тематическим категориям: «Гостиница», «Еда», «Здоровье», «Транспорт» и т. д. Вы можете выбрать для своего сайта любой шаблон, который наиболее точно соответствует вашим задачам.
Прежде чем применить шаблон, посмотрите, как будет выглядеть готовый сайт в браузере:
3. Заполните блоки контентом
Вставьте текст и фото в блоки шаблона и подгоните их по размеру, чтобы макет смотрелся гармонично.
Двигайтесь от общего к частному. Сначала определитесь, как блоки и элементы будут расположены на главной странице, выделите ее основные разделы и организуйте меню. Затем «наводите красоту» — подбирайте подходящие шрифты и цвета. Если делать всё в другом порядке, велики шансы, что придется выполнять двойную работу или подбирать новый шаблон.
Чтобы наполнить шаблон контентом, используйте иконки в горизонтальном меню сверху. С их помощью можно вставить нужный элемент на страницу:
В блоке справа — навигация. Она поможет быстро перемещаться по разделам и элементам на странице:
Чтобы изменить один из блоков или элементов, нажмите на него правой кнопкой мыши. Появится список настроек для выбранного элемента или блока. Разверните каждый пункт и посмотрите, какие параметры можно поменять:
Теперь, когда мы выбрали шаблон и разобрались с основными инструментами конструктора, попробуем создать сайт.
Сначала определяемся с расположением крупных блоков на странице. У нас их три: раздел «О нас», «Карточки с проектами» и «Галерея с проектами».
Удаляем блок «Меню», так как он не пригодится для целей одностраничного сайта:
Добавляем логотип. Здесь же можно его отредактировать — повернуть, обрезать, изменить размер:
Выбираем и настраиваем фон для шапки страницы:
Вставляем заголовок и оцениваем, как он смотрится на разных устройствах:
Теперь создаем блок с карточками. Добавляем изображения и тексты:
Создаем раздел «О нас». Сначала добавляем заголовок:
Затем копируем блок с картинкой. Положение картинки меняется простым перетаскиванием мышью:
Создаем галерею. Сначала добавляем блок с заголовком:
Затем выбираем, как будут отображаться анонсы проектов в галерее:
После работы над структурой стоит заняться наполнением сайта: разместить информацию в блоке «О нас», выбрать шрифты и размеры шрифтов в тексте (кегль). Помните, что шрифт влияет на характер страницы не меньше, чем изображения.
Старайтесь избегать вычурных и слишком броских шрифтов. Вместе с иллюстрациями и остальным оформлением такой дизайн может выглядеть неопрятным. Для нашего сайта мы выбрали шрифт Exo 2:
Настраиваем форму обратной связи:
Добавляем блок с картой:
Оформляем футер сайта:
Мы почти закончили. Осталось установить настройки, чтобы сайт успешно ранжировался поисковиками, и протестировать его работу.
4. Добавьте настройки для SEO
Прописываем для страниц ключевые слова:
Затем в разделе «Настройки» активируем перенаправление на HTTPS. Чтобы сайт начал работать по защищенному HTTPS-соединению, нужен SSL-сертификат. Мы дарим его при покупке любого тарифа конструктора на срок от 12 месяцев. При этом сертификат устанавливается на хостинг автоматически.
Если вы хотите использовать SSL, купленный у другой компании, его потребуется подключить в панели управления хостингом RU-CENTER.
В разделе «Настройки» можно добавить метаинформацию и скрипты, а также отредактировать сообщение о cookie.
5. Протестируйте, как сайт выглядит на разных устройствах
Наш сайт best-room-design.ru готов! Осталось выяснить, как отображаются формы, кнопки и виджеты на разных устройствах.
Мы проверили сайт с помощью сервиса Mobile Friendly Test:
Все работает корректно, можно публиковать.
Мы рассказали, как за пару часов собрать сайт в конструкторе RU-CENTER. Но даже самая подробная инструкция не будет настолько полезной, как личный опыт. Оформите тариф «Конструктор на 30 дней» и попробуйте собрать свой первый сайт самостоятельно.
В дополнение к статье на нашем YouTube‑канале вышел выпуск «Создаем сайт за 15 минут. Возможности Конструктора». Эксперт RU‑CENTER рассказывает о функциях и инструментах Конструктора и показывает, как создать сайт кондитерской всего за 15 минут.