Чтобы создать классный продающий сайт необязательно учиться веб-разработке или заказывать сайт у дизайнеров и верстальщиков. Есть более простой путь – конструкторы сайтов. Конструкторы созданы именно для этих целей, чтобы можно было в удобном интерфейсе создать сайт лишь с помощью мышки с добавлением текстового контента. Здесь есть множество красивых дизайнов под любую тематику, остаётся лишь выбрать наиболее понравившийся.

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

Создаём продающий сайт в конструкторе WIX

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

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

к содержанию ↑

Редактирование текстов

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

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

Конструктор WIX работает по типу «drag and drop», т.е. все элементы можно перетаскивать по шаблону с помощью мышки. Если не нравится результат, то откатите изменения с помощью клавиш «Ctrl+Z» или стрелками «вперёд/назад», как обычно.

Выделив любой элемент, справа активируется панель инструментов, здесь можно:

  • Копировать/вставить элемент
  • Создать копию
  • Перенести на другой слой
  • Выровнять по горизонтали/вертикали
  • Повернуть на указанный угол
  • Отразить по горизонтали/вертикали
  • Изменить размер и координаты ручным вводом
  • Удалить элемент

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

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

к содержанию ↑

Изменение фона и картинок

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

В базе уже есть десятки готовых фонов, просто выберите подходящий или загрузите свой. Перейдите в загрузчик с помощью кнопки «Фото», далее «Медиа от Wix», здесь вы найдёте больше фонов. Здесь же интегрирован каталог интернет сервиса Shutterstock с самой большой базой фото и Unsplash. Фон можно сделать однотонным, для этой цели используйте инструмент по кнопке «Цвет». Интересная функция «Видео» позволяет добавить видео-фон, который также можно выбрать из базы и настроить автоповтор.

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

Присутствует довольно обширный функционал, можно кардинально изменить изображение:

  • Откорректировать яркость, контраст, свет, тень, насыщенность, зернистость и другие параметры
  • Применить цветовые фильтры и автоудаление фона
  • Добавить текст
  • Автоматически улучшить фото с помощью алгоритмов машинного обучения
  • Кадрировать, повернуть, отразить
  • Изменить дизайн, добавив рамку или округлить углы
  • Добавить ссылку и всплывающую подсказку
  • Использовать анимацию, например, с эффектом «Проявление»

Нет, разве что, встроенного фотошопа, но он и не нужен, ведь это конструктор сайтов.

к содержанию ↑

Добавление элементов

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

  • Кнопка, например, «Купить»
  • Фотогалереи
  • Видео и аудио
  • Интерактивные элементы: подписка, акции, контакты
  • Боксы: разные прямоугольники, сноски и т.д.
  • Пользовательские меню
  • Формы обратной связи
  • Интернет-магазин
  • Кнопки социальных сетей
  • Блог и др.

Также, можно вставить произвольный HTML-код. Чтобы добавить элемент, нажмите кнопку «Добавить» в виде плюсика в меню слева. Давайте добавим галерею-слайдер. Для этого выберем «Галерея -> Слайдеры»

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

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

Чтобы работали кнопки, на них нужно повесить действие, доступно несколько вариантов:

  • Веб-адрес: здесь можно ввести произвольную ссылку на внешний сайт
  • На страницу: выберите другую страницу вашего сайта
  • Якорь: другая или эта же страница, но с позиционированием на конкретный раздел внутри страницы, например, «Услуги» или «Контакты»
  • Документ: можно загрузить прайс и ссылаться на этот документ
  • Электронная почта: откроет почтовый клиент с новым письмом
  • Телефон: на смартфоне перейдёт в телефон с введённым номером для звонка
  • Промобокс: покажет выбранный промобокс, например, с рекламой акции
к содержанию ↑

Приложения Wix

Изюминка Wix в том, что можно добавить на страницы целые приложения из каталога. Откройте Wix App Market чтобы увидеть весь каталог приложений. Давайте добавим популярное дополнение «Simple Push Notifications», с его помощью мы будем собирать подписчиков. При заходе на сайт, посетители увидят всплывающее сообщение с предложением разрешить уведомления в браузере.

Потом мы сможем отправлять сообщения, которые всплывают в браузере пользователя, даже когда сайт закрыт. Это эффективный метод в маркетинге для привлечения внимания подписчиков к вашим услугам, товарам, акциям. Чтобы добавить приложение нажмите кнопку «Добавить на сайт». Для включения такой возможности нужно активировать премиум доступ.

Другое популярное приложение – «Wix Счётчик». Это не счётчик аналитики, который вы можете установить добавлением HTML-кода, он служит для отображения внизу сайта количества посещений сайта за всё время. Посетители не любят сайты-пустышки, на которые никто не заходит. Кстати, в каталоге работает поиск, чтобы не искать нужное приложение по разделам. После добавления приложения, чтобы открыть его параметры прокрутите окно каталога в самый низ и нажмите «Мои приложения».

Чтобы настроить счётчик, нужно заполнить несколько параметров:

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

Wix насчитывает десятки, если не сотни, приложений под любые задачи.

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

p.s. Если статья была полезной и вас переполняет чувство благодарности, можете поддержать меня долларом на патреоне

Об авторе

Web Developer. Имею экспертизу в таких вещах как FrontEnd, Backend, Devops. PHP, Python, Javascript (Vue.js, React.js)

Смотреть посты