Продающая страница бесплатно. Визуальный редактор JustClick

Тема этой статьи – продающая страница бесплатно. Здесь расскажу, как её создать в визуальном редакторе  сервиса JustClick.

Ранее я рассказывала о создании страницы подписки с помощью конструктора. Об этом можно прочитать в моей статье.

Как начать работу в визуальном редакторе

Чтобы сделать продающую страницу бесплатно в визуальном редакторе сервиса JustClick, войдите в ваш аккаунт на сервисе.

В разделе «Сайт» выбираете «Страницы». Открывается окно с созданными ранее страницами подписки и продающими страницами.

Чтобы создать новую страницу, нажимаете «Добавить».

Открывается поле  редактирование создаваемой страницы.

  • Введите идентификатор страницы на латинице (2). Он отобразится в ссылке на создаваемую страницу.
  • Выберите способ создания страницы (3). Для этого ползунок передвиньте на «Визуальный редактор», так как тема этой статьи – создание продающей страницы в визуальном редакторе Джастклик.
  • Напишите название продукта на русском языке (4).

Как только ползунок будет передвинут на вкладку «Визуальный редактор», откроется поле 5, где будет расположена редактируемая страница. С правой стороны – колонка с различными блоками (6), которые можно вставлять в поле редактирования.

Вставка графических блоков в визуальном редакторе

Нажимаете на значок графических блоков – третий сверху в колонке 6.

Кликаем кнопку «Конструктор» и задаём параметры страницы.

Это: 100 % – ширина страницы, меняете по желанию цвет фона, убираете границы страницы, передвинув ползунки влево.

После этих изменений нажимаете «Вставить».

Чтобы изменить цвет любого блока, находите коды цветов html через любой поисковик.

Копируете его и вставляете на место установленного по умолчанию.

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

Напишите заголовок и подзаголовок вашего инфопродукта – размер шрифта 48.Цвет шрифта выберите контрастный по отношению к цвету блока.

Для того, чтобы убрать белую полоску – пробел над блоком, войдите в раздел меню «Источник» и уберите лишнюю строчку кода html. Она выделена красным на скриншоте внизу.

После изменений строчка с кодом «<div style=…..» будет находиться в самом верху страницы. В этой же строке кода  можно изменить и цвет блока, изменив код цвета html.

Внимание! Чтобы страница получилась без рамки, необходимо в графе «Шаблон страницы» выбрать «SL/empty.html».

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

  • Поставьте курсор на середину страницы;
  • Выставьте размер текстового блока, но уже не в процентах, а в пикселах: например 800 пк;
  • Выберите цвет блока.

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

На нижнем скриншоте видно, что текст выравнен относительно центра страницы. Отмечены пункты меню, которые применяются при редактировании страницы.

Пункт «Источник», в нём можно редактировать html-код страницы,  вставлять новые необходимые вам коды можно, используя пункт «html».

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

Вставка изображения

Вставить любое изображение можно, используя пункт «Изображение», на скриншоте этот пункт отмечен стрелкой.

На поле с текстом поставьте курсор по центру, нажмите на пункт «Изображение».

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

Для этого нажимаете «Загрузить», выбираете изображение с компьютера и нажимаете «Открыть». Изображение загрузиться на сервер, кликаете по нему два раза и оно появится в окне «Свойства изображения» в просмотре.

Здесь необходимо установить размер картинки, например, 450 пк по ширине, а высота будет устанавливаться автоматически в соответствие с пропорциями исходной картинки.

После этого нажмите «ОК», все изменения сохраняться и картинка появится на странице.

Вставка изображения, способ второй

Второй способ загрузки картинок и фото заключается в копировании URL – адреса картинки в строку «Ссылка». После копирования ссылки задайте нужный размер, а потом нажмите «ОК».

Вставка блока в готовый графический блок

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

  • Ставите курсор ниже предыдущего блока, нажимаете на значок графического блока;
  • Нажимаете «Конструктор»;
  • Ширину блока устанавливаете 100%;
  • Убираете границы, выбираете нужный цвет;
  • Нажимаете «Вставить».

Сразу текст писать или копировать в поле блока размером 100%  не будем. Мы уже знаем, что текст будет «прижат» к левому краю.

А поступить нужно следующим образом.

Создадим новый графический блок в этом же сером блоке, но размером 800 пикселей. Можно цвет этого блока сделать и другим, но правильнее сделать таким же, как и 100 процентный блок.

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

В данном случае текст удобнее печатать сразу во внутреннем блоке 2, так как при копировании с белого фона текст будет тоже на белом фоне.

Можно это исправить, подобрав нужный фон прямо в текстовом редакторе, используя пункт  «Цвет фона».

Вставка видео на продающую страницу

Для того, чтобы вставить видео, перейдите на Ютуб, выберите нужный видео-ролик. Нажмите на вкладку «Поделиться» справа под видео.

При этом открывается окно для того, чтобы пользователь мог поделиться понравившемся видео.

Красным кружком обведён значок HTML – кода. Нажмите на него, и перед вами откроется страница для редактирования встроенного видео с кодом.

как вставить видео на продающую страницу

Уберите выделенные на скриншоте «галочки» и скопируйте HTML -код.

Перейдите на страницу редактирования, выберите в редакторе вкладку «HTML», нажмите на неё и вставьте скопированный код в специальное поле.

как создать продающую страницу в визуальном редакторе

Нажмите «ОК».

Сохраните изменения и посмотрите в «Предпросмотре», что у вас получилось. Это важно, так как в редакторе видео может отображаться как простой прямоугольник с надписью «IFRAME».

Как установить кнопку заказа на продающую страницу

Зайдите во вкладку «Магазин», выберите «Продукты».

Из списка созданных вами продуктов выберите тот, для которого создаётся продающая страница. Нажмите на значок с изображением глаза рядом с  названием продукта, вернее рядом с его идентификатором.

Страница заказа

Вы будете перенаправлены на страницу заказа. Скопируйте ссылку в верхней части страницы.

Так как кнопка, которую нужно установить является простой картинкой, то её можно скопировать откуда угодно, например, найти картинку можно в поисковике Google.

Сохраните картинку себе на компьютер, а затем загрузите на страницу способом, описанным выше. Задайте размер кнопки – 400 – 450 пикселей.

Когда изображение кнопки появится на странице, выделите его.

Нажмите на значок ссылки в редакторе.

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

Если необходимо, отредактируйте страницу.

Вот таким образом можно сделать продающую страницу бесплатно в визуальном редакторе сервиса Джастклик.

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

Приятного творчества.

С вами была Матвеева Галина.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.