Как собрать лендинг в конструкторе 1FASTPAGE: пошаговая инструкция

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

• Слева — ваша страница, справа — панель настроек. В панели цвета, шрифты, языки, валюты, SEO, метрики, эффекты и кнопка скачивания.
• Всё, что вы делаете, видите только вы. Конструктор работает в демо-режиме: это ваша копия, никто больше её не увидит. Сайт появится в интернете только после того, как вы скачаете файл и загрузите его на хостинг.
• Режим редактирования включается в панели справа. Когда он включён, на странице видны кнопки управления («Добавить медиафайл», «Добавить тариф», «+ Кнопка» и другие). Когда выключен, вы видите сайт таким, каким его увидят посетители после скачивания. Этим режимом удобно проверять результат.
• Мини-панель форматирования. Выделите слово или абзац, и сверху появится панель: жирный, курсив, подчёркивание, размер шрифта, выравнивание.
• Бояться нечего. Любую секцию можно скрыть, а кнопка «Сбросить оформление» возвращает цвета и шрифты к исходным. Ошибки видны в режиме просмотра, до скачивания.

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

1. Шаблон
2. Секции
3. Тексты и фото
4. Ссылки на кнопках
5. Оформление
6. Языки и валюты
7. SEO и метрики
8. Эффекты
9. Оферта
10. Проверка
11. Скачивание

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

1. Откройте в панели раздел «Шаблон сайта» и нажмите «Выбрать шаблон». В окне «С чего начнём?» выберите, чем вы занимаетесь, и впишите название вашего дела. Доступны готовые страницы для шести отраслей, а ещё можно начать с чистого листа.
2. Страница соберётся из подходящих блоков с примерами текстов и цветами. Любой текст, блок и цвет потом можно поменять.
3. В разделе «Готовые стили» выберите палитру. Один клик меняет сразу фон, карточки, текст, акценты, шапку и подвал. После этого любой цвет можно подправить вручную (подробнее в шаге 5).

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

Управление секциями

В разделе «Секции страницы» панели справа у каждой секции есть три кнопки:

• Стрелки — меняют секции местами.
• Глаз — скрывает секцию от посетителей. В режиме редактирования она остаётся видна, но помечена красным, поэтому не удивляйтесь. В режиме просмотра её уже не будет.
• Прицел — прокручивает страницу к этой секции.

Чтобы добавить секцию, нажмите «Добавить секцию» в том же разделе. Там же настраивается «Высота первого экрана»: «Ровно один экран», «Один экран, плотнее» (если заголовок и кнопки не помещаются) или «По содержимому».

Включите режим редактирования и заполняйте страницу сверху вниз.

Текст

• Нажмите на любой текст и напечатайте свой. Шаблонный текст нужно именно заменить, а не оставить рядом.
• Чтобы выделить главное, выделите слово и нажмите «Ж» (жирный) на мини-панели. Там же курсив, подчёркивание, размер шрифта и выравнивание.
• Пишите фактами: сроки, цифры, условия. Одна мысль — один абзац.

Кнопки управления под секциями

В режиме редактирования под секциями появляются кнопки. Какие именно, зависит от секции. Вот что они значат:

• «Скрыть текст» / «Скрыть медиа» — убирают текст или картинку в секции.
• «Поменять местами» — меняет местами текст и картинку.
• «Текст на всю ширину» — растягивает текст на всю ширину секции.
• «Добавить медиафайл» / «Медиа-окно» — добавляют окно для фото, GIF или видео.
• «3D-модель» — добавляет встроенный просмотр 3D-модели.
• «Плашка», «Заголовок», «Абзац» — добавляют соответствующий элемент.
• «Кнопка» — добавляет новую кнопку (ссылку для неё нужно задать, см. шаг 4).
• «В корзину» — добавляет кнопку добавления в корзину для карточки товара.

Если не уверены, что делает кнопка, нажмите её и посмотрите на результат. Это безопасно, потому что до скачивания всё можно изменить.

Фото и видео

1. Нажмите «Добавить медиафайл» (или кнопку загрузки в панели). Выберите пропорции окна: квадрат, 4:3, 16:9, вертикальное или «по картинке», и ширину: на всю ширину, половина или треть.
2. Загрузите файл с компьютера. Подходят фото, GIF и видео.
3. Можно вместо загрузки вставить ссылку: на картинку, GIF, видеофайл или страницу на YouTube, Rutube, VK Видео или Vimeo (для них вставится плеер). Учтите: при вставке по ссылке файл остаётся на чужом сервере. Страница от него не тяжелеет, но показываться он будет, только пока ссылка работает.
4. Следите за показателем «Вес готового сайта» внизу панели. Тяжёлые фото замедляют загрузку страницы, поэтому лучше заранее сжать их.

Фон секции

У секции можно изменить фон: выбрать цвет, загрузить своё изображение, убрать фон. Если на фоне фото, включите затемнение, чтобы текст оставался читаемым.

Карточки, тарифы, отзывы, вопросы

• Тарифы. Нажмите на цену и впишите свою. Пункты, которых в тарифе нет, оставьте в списке как недоступные или удалите. Метка «Выбирают чаще всего» подсвечивает тот тариф, который вы хотите продать.
• Отзывы. Нажмите на кружок с камерой, чтобы поставить фото клиента, на звёзды, чтобы изменить оценку. «Добавить отзыв» создаёт новую карточку.
• Вопросы. «Добавить вопрос» создаёт новую пару «вопрос — ответ».
• Иконки. Для иконок откроется окно «Выберите значок». Можно выбрать из списка или вписать класс Font Awesome вручную.

3D-модель позволяет посетителю повернуть товар или предмет и рассмотреть его со всех сторон. Кнопка «3D-модель» есть под первым экраном и под секциями «Почему выбирают именно нас», «Что мы предлагаем», «Цены» и «Готовы начать?». В отзывах и вопросах её нет.

Два способа добавить модель

• Загрузить файл. Выберите модель на компьютере, размер файла до 40 МБ. Она станет частью готового сайта и будет работать, пока работает сам сайт. Следите за показателем «Вес готового сайта» внизу панели: тяжёлая модель увеличивает его.
• Вставить ссылку. Подходит, если модель тяжелее 40 МБ или уже лежит в сервисе 3D-моделей либо на вашем хостинге. Страница от этого не тяжелеет, но модель будет показываться, только пока ссылка работает.

Как добавить

1. Включите режим редактирования и найдите нужную секцию.
2. Под секцией нажмите кнопку «3D-модель».
3. Выберите способ: загрузите файл с компьютера или вставьте ссылку на модель, дальше следуйте подсказкам в окне.
4. Выключите режим редактирования и проверьте, что модель загрузилась, поворачивается и нормально выглядит на телефоне.

Быстрый способ: одна ссылка для всех кнопок

Если все кнопки должны вести в одно место (например, в ваш Telegram), используйте раздел «Ссылки и SEO» в панели:

1. Впишите адрес в поле «Ссылка сразу для всех кнопок» и нажмите «Применить ко всем кнопкам».
2. Адрес заменится у всех кнопок и внешних ссылок разом. Ссылки на блоки этой же страницы (якоря) не изменятся.
3. Если какой-то кнопке нужен другой адрес, поменяйте его после этого отдельно.

Отдельная ссылка у каждой кнопки

1. Включите режим редактирования и нажмите на кнопку. Откроется окно «Куда ведёт ссылка».
2. Выберите, что нужно:
   • Адрес — любая ссылка на сайт или документ.
   • Telegram, WhatsApp — мессенджер.
   • Звонок — номер телефона, при нажатии на телефоне откроется набор номера.
   • Почта — адрес электронной почты.
   • «Или перейти к блоку на этой странице» — выберите нужную секцию из списка (например, «Цены»).
3. Отметьте «Открывать в новой вкладке», если ссылка внешняя и вы не хотите, чтобы посетитель уходил с вашего сайта.
4. Нажмите «Сохранить ссылку».

Так же привязываются иконки соцсетей и значки контактов в подвале. Они в шаблоне тоже ведут «в никуда».

Как убедиться, что ничего не забыли

• В панели есть раздел «Свои кнопки»: в нём у каждой кнопки видна подпись и адрес. Прицел рядом показывает, где кнопка стоит на странице. Пройдитесь по списку и убедитесь, что везде есть адрес.
• Выключите режим редактирования и нажмите каждую кнопку на странице: первый экран, тарифы, блок «Готовы начать?», подвал, шапку.

Плавающая кнопка связи

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

Корзина (если на странице есть товары)

В разделе «Ссылки и SEO» выберите, что происходит при оформлении заказа:

• «Заявка в мессенджер» — посетитель отправляет вам состав заказа с суммой через мессенджер, который вы указали в «Плавающей кнопке связи».
• «Платёжная ссылка» — посетитель переходит на оплату. Ссылку берут в ЮKassa, Продамус или Tribute. Если поле не заполнено, заказ уйдёт в мессенджер.
• «Скрыть корзину» — корзина не показывается. Выбирайте, если продаёте не товары, а услуги.

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

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

Этот шаг можно делать в любой момент: на тексты и ссылки он не влияет.

• Готовый стиль (раздел «Готовые стили») — самый быстрый вариант. Выберите палитру, и все цвета поменяются разом.
• Раздел «Цвета» — тонкая настройка: основной фон, фон секций, фон карточек, рамки и линии, цвет заголовков и обычного текста, два акцентных цвета (кнопки и иконки; градиенты), фон и прозрачность шапки, фон подвала. Шапку можно сделать полностью прозрачной или плотной.
• Раздел «Шрифты и текст» — шрифт заголовков и основного текста, общий размер шрифта, выравнивание заголовков и текста (слева, по центру, справа). Один абзац или заголовок можно выровнять отдельно с помощью мини-панели.
• Скругление углов и высота секций меняют общий вид карточек и отступы между секциями.
• «Сбросить оформление» возвращает цвета и шрифты к исходным, если что-то пошло не так.

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

Языки сайта

1. Сначала полностью закончите русскую версию: тексты, ссылки, цены. Новый язык создаётся копией текущей версии, поэтому всё, что вы уже исправили, перейдёт в копию.
2. В разделе «Языки сайта» нажмите «Добавить язык» и выберите язык из списка. Редактор сразу переключится на новую версию.
3. Тексты на странице останутся прежними, то есть русскими. Конструктор ничего не переводит сам. Вам нужно вручную заменить каждый текст переводом.
4. Переключаться между версиями можно по флажкам в разделе «Языки сайта» или по плашке с текущей версией внизу слева.
5. У посетителей в шапке появится переключатель с флагами. Выбранный ими язык запоминается. Для арабского страница сама разворачивается справа налево.

Валюта и цены

Если цены нужно показать не в рублях, используйте раздел «Валюта и цены»:

1. Нажмите «Найти цены на странице». Конструктор один раз пройдёт по всем текстам и пометит суммы с символом валюты. Только после этого их можно пересчитывать целиком.
2. Выберите валюту.
3. Впишите курс пересчёта: сколько единиц новой валюты приходится на одну исходную. Например, при переходе с рубля на доллар впишите 0.011, и цена 3 990 ₽ станет $44.

SEO: как сайт выглядит в поиске и во вкладке

В разделе «Ссылки и SEO» заполните:

• «Заголовок вкладки браузера» — он же заголовок страницы в результатах поиска. Напишите, кто вы и что предлагаете, например: «Фотограф в Казани: свадьбы и семейные съёмки». Пишите коротко, до 60 символов.
• «Описание для поисковиков» — одно-два предложения о том, что вы делаете и чем полезны. Ориентир — 120–160 символов.
• «Значок вкладки» — маленькая иконка рядом с названием во вкладке браузера. Можно выбрать эмодзи или загрузить картинку.

Это основы. Лендинг — одна страница, поэтому не ждите от SEO чудес: главное, чтобы заголовок и описание были понятными для человека, который увидит их в поиске.

Метрики и пиксели

Раздел «Аналитика и пиксели» позволяет подключить счётчики, не трогая код:

Все эффекты находятся в разделе «Эффекты и виджеты» и включаются переключателями. Они необязательны: для делового сайта хватит двух-трёх. Чем меньше эффектов, тем быстрее и спокойнее выглядит страница.

Подготовьте документ

1. Составьте оферту под вашу деятельность и сохраните её в формате PDF. Не копируйте чужую оферту: в ней должны быть ваши реквизиты, ваши услуги или товары и ваши условия.
2. Сделайте то же с политикой конфиденциальности.
3. Проверьте, что название, цены и реквизиты в документах совпадают с тем, что написано на сайте.

Прикрепите документ к сайту

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

• Загрузить PDF в конструктор. Файл вшивается в сам HTML-файл сайта, поэтому отдельно выкладывать его на хостинг не нужно. Минус: чтобы обновить оферту, нужно заменить документ в самом файле сайта (см. раздел «Как править сайт после скачивания»).
• Указать ссылку на файл на вашем сервере. Сначала загрузите PDF на хостинг (например, туда же, где будет лежать сайт), потом вставьте адрес документа. Плюс: чтобы обновить оферту, достаточно заменить PDF на сервере, сайт трогать не нужно. Минус: файл должен всё время лежать по этому адресу, иначе документ не откроется.

Если вы планируете часто менять оферту, выбирайте вариант со ссылкой.

Реквизиты в подвале

Замените примерные данные (ИП Иванов Иван Иванович, нули в ИНН и ОГРНИП, «Город, улица, дом 1», телефон и почту) своими. Лишние строки уберите. Расчётный счёт публикуйте, только если этого требует платёжный сервис или вы сами хотите его показывать. Следите, чтобы телефон, почта и адрес в подвале совпадали с контактами в оферте.

Проверка

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

Это самый важный шаг. Скачанный файл — это готовый сайт без панели редактора (как вносить в него правки, см. ниже), поэтому лучше найти ошибки сейчас.

Как проверить: выключите режим редактирования

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

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

Где чаще всего остаётся шаблонный текст

• Шапка и первый экран: «Ваш логотип», «Название компании и короткий слоган», «Опишите одним абзацем...», надпись «ваш-сайт.ру» в окне, серая картинка-заглушка «Ваше фото или видео».
• Преимущества и услуги: заголовки «Первое преимущество», «Первая услуга или товар», абзацы «Нажмите на этот текст...», «Вторая строка — детали...».
• Цены: названия «Базовый», «Оптимальный», «Максимальный», суммы 1 000, 3 000 и 5 000 ₽, пункты «Второй пункт тарифа», строки «Одной строкой: для кого этот вариант», подсказка «Подсказка для клиента: например, про рассрочку...». Лишние тарифы удалите крестиком.
• Отзывы: «Имя клиента», «Чем занимается или что заказал», примерные отзывы, кружки с буквами «АБ», «ВГ», «ДЕ». Замените на настоящие отзывы или скройте секцию. Имя и фото клиента публикуйте только с его согласия.
• Вопросы: примеры вроде «Сколько стоят ваши услуги?» и «Даёте ли вы гарантию?» с общими ответами. Оставьте только те вопросы, на которые отвечаете реально.
• Подвал: «Название компании», «Соцсеть», «+7 000 000-00-00», «mail@example.com», «Пн–Пт, 10:00–19:00», «Город, улица, дом 1», нули в ИНН, ОГРНИП и расчётном счёте, «Иванов Иван Иванович», название компании в строке © и в блоке «Документы».
• Служебные поля: заголовок вкладки браузера («Название вашего сайта») и описание для поисковиков в разделе «Ссылки и SEO».

Что ещё проверить

1. Ссылки. Нажмите все кнопки, иконки соцсетей и документы в подвале. Каждая должна открывать нужное место.
2. Языки. Если добавляли языки, переключитесь на каждый и проверьте тексты, цены и ссылки.
3. Цены. Все суммы правильные, валюта нужная.
4. Скрытые секции. В режиме редактирования скрытые секции помечены красным. В режиме просмотра их нет. Убедитесь, что скрыто именно то, что вы хотели.
5. Корзина. Если на странице есть товары, оформите тестовый заказ.
6. Чтение глазами клиента. Прочитайте страницу целиком так, будто видите её впервые. Понятно ли, что вы предлагаете, сколько это стоит и как с вами связаться?

1. Когда всё проверено, нажмите «Скачать готовый сайт» внизу панели. Рядом показан примерный вес готового сайта.
2. Оплатите. Оплата одноразовая: после неё вы получаете файл, который принадлежит вам. До оплаты вы работаете в демо-режиме.
3. Вы получаете готовый файл сайта: в нём ваши тексты, фото и оформление, но нет панели редактора и служебных кнопок. Сохраните его в надёжном месте и сделайте копию: это ваш сайт.
4. Чтобы сайт появился в интернете, загрузите файл на любой хостинг. Подойдёт и бесплатный, например Netlify. Если у вас уже есть домен и хостинг, разместите файл там и привяжите домен.
5. Если после загрузки адрес сайта не открывает страницу, проверьте, как называется файл. Многие хостинги ищут главную страницу в файле с именем index.html. Переименуйте файл, если нужно.

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

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

Подготовка

1. Сделайте копию файла и правьте копию. Оригинал оставьте на случай, если что-то пойдёт не так.
2. Откройте копию в текстовом редакторе: на Windows подойдёт Блокнот или Notepad++, на любой системе удобен бесплатный VS Code. Не открывайте файл в Word: он испортит код.
3. Используйте поиск (Ctrl+F, на Mac Cmd+F), чтобы найти нужное место по фразе с сайта. Для замены во всём файле сразу используйте Ctrl+H.
4. Сохраняйте файл в кодировке UTF-8, иначе русские буквы превратятся в нечитаемые символы.

Что можно безопасно менять

• Текст. Найдите фразу поиском и замените её. Меняйте только слова, а символы <, >, = и кавычки не трогайте. Всё, что стоит внутри угловых скобок, — это код, его не меняйте. Если сомневаетесь, лучше не трогать.
• Телефон, почта, адрес, цены. Найдите старое значение и замените на новое. Если оно встречается несколько раз (например, телефон в подвале и в кнопке), заменяйте везде. Если на сайте несколько языков, один и тот же текст может встречаться в файле по разу на каждый язык. Проверьте все совпадения.
• Ссылки на кнопках. Найдите старый адрес и замените на новый. Адрес находится в кавычках после href=. Кавычки оставьте на месте.
• Номер счётчика Метрики. Найдите старый номер и замените на новый.

После правок сохраните файл и откройте его двойным кликом: так вы увидите результат до загрузки на хостинг. Если всё в порядке, загрузите файл на хостинг вместо старого, с тем же именем.

Как заменить оферту

Что делать, зависит от того, как вы прикрепили документ в конструкторе (шаг 9).

Если документ прикреплён ссылкой на файл на вашем сервере. Это самый простой случай. Отредактируйте оферту в Word, сохраните в PDF, загрузите на сервер под тем же именем в то же место. Сайт править не нужно: по прежней ссылке откроется новая версия. Если вы хотите сменить адрес документа, найдите в файле сайта старую ссылку и замените на новую.

Если PDF был загружен в конструктор и вшит в файл сайта. Поменять текст внутри такого файла вручную нельзя. Сделайте так:

1. Исправьте оферту в Word и сохраните в PDF.
2. Загрузите новый PDF на хостинг рядом с сайтом, например под именем oferta.pdf.
3. Откройте файл сайта в редакторе и нажмите Ctrl+F, чтобы найти слова «Публичная оферта». Замените адрес документа у этого пункта на oferta.pdf. Если там стоит очень длинная строка, начинающаяся с data:, замените её целиком, от открывающей до закрывающей кавычки.
4. Сохраните файл, откройте его локально и проверьте, что оферта открывается. Затем загрузите файл сайта на хостинг.

Политика конфиденциальности и другие документы меняются точно так же.

Когда лучше вернуться в конструктор

В готовом файле удобно менять тексты, цены, контакты и ссылки. Для больших изменений (новые секции, перестройка страницы, замена фото) надёжнее создать новый сайт на конструкторе и скачать файл. Если что-то не получается, напишите в поддержку: контакты есть на сайте 1fastpage.ru.

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

• Шаблонные тексты заменены: на странице нет фраз вроде «Первое преимущество», «Имя клиента», «Нажмите на этот текст»
• Фото-заглушки заменены своими или скрыты
• Цены, тарифы и состав тарифов свои, лишние тарифы удалены
• Отзывы настоящие, фото и имена опубликованы с согласия клиентов (или секция скрыта)
• Контакты и реквизиты в подвале свои: телефон, почта, адрес, ИНН, ОГРНИП
• У каждой кнопки есть ссылка: первый экран, тарифы, «Готовы начать?», шапка, плавающая кнопка
• Иконки соцсетей в подвале ведут на ваши страницы
• Оферта и политика конфиденциальности прикреплены и открываются (если принимаете оплату, это обязательно)
• Корзина настроена и проверена тестовым заказом (или скрыта)
• Заголовок вкладки и описание для поисковиков заполнены
• Счётчики подключены (Метрика и другие): помните, что проверить их можно только после публикации
• Если есть другие языки, все версии переведены и проверены
• Если есть другая валюта, цены пересчитаны и проверены
• Лишние эффекты выключены, светлая и тёмная темы проверены
• Скрыты именно те секции, которые должны быть скрыты