АНАЛИЗ ФУНКЦИОНАЛЬНЫХ ВОЗМОЖНОСТЕЙ КОНСТРУКТОРА BLOXY ПРИ СОЗДАНИИ ЦЕЛЕВОЙ СТРАНИЦЫ

Хлебород София Анатольевна1, Горбунов Александр Николаевич2
1Брянский государственный университет имени академика И.Г. Петровского, магистрант
2Брянский государственный университет имени академика И.Г. Петровского, кандидат технических наук, доцент кафедры информатики и прикладной математики

Аннотация
В статье выполнен анализ функциональных возможностей конструктора Bloxy при создании целевой страницы.

Ключевые слова: , ,


Рубрика: 05.00.00 ТЕХНИЧЕСКИЕ НАУКИ

Библиографическая ссылка на статью:
Хлебород С.А., Горбунов А.Н. Анализ функциональных возможностей конструктора Bloxy при создании целевой страницы // Современные научные исследования и инновации. 2018. № 1 [Электронный ресурс]. URL: https://web.snauka.ru/issues/2018/01/85393 (дата обращения: 18.04.2024).

С помощью конструктора Bloxy пользователь сможет создать, а также в дальнейшем запустить сайт/целевую страницу [1]. Главная страница сайта не содержит отвлекающих элементов, оформлена в бело-голубом цвете (рис. 1).



Рис. 1. Главная страница сайта

Чтобы воспользоваться возможностями конструктора, необходимо зарегистрироваться. Для регистрации необходимо ввести имя и почту, а так же пароль (рис. 2). Можно зарегистрироваться через социальные сети «Facebook» и «Вконтакте». Пробный период предоставляется на семь дней [1,2].


Рис. 2. Регистрация

При запуске конструктора, появляется страница с количеством созданных сайтов/страниц (рис. 3). Максимальное количество создаваемых проектов равно десяти, страниц – 100. Для создания новой страницы необходимо нажать на кнопку «Создать сайт».


Рис. 3. Вкладка с созданными сайтами

Далее появляется заставка загрузки конструктора (рис. 4).


Рис. 4. Загрузка конструктора

Далее открывается конструктор (рис. 5) Он разделен на четыре главных элемента: «Меню», «Область редактирования», «Панель виджетов» и «Быстрые сочетания».


Рис. 5. Конструктор Bloxy

I. Меню конструктора содержит следующие кнопки [1,3]:

  1. «Выход с редактора» – позволяет выйти из редактора.
  2. «Адрес страницы» показывает адрес создаваемой страницы, генерируется автоматически при создании страницы.
  3. «Шрифты» позволяет настроить размеры и стили шрифтов разных заголовков (рис. 6).


    Рис. 6. Настройка шрифтов

  4. «Версии» позволяет выбрать одну из трех версий отображения страницы (мобильная, планшетная и компьютерная версии).
  5. «Отмена» позволяет отменить последние действия.
  6. «Повтор» позволяет повторить последние действия.
  7. «Помощь» предоставляет обучающее видео, «Базу знаний» по созданию целевой страницы, а так же предоставляет возможность задать вопрос в техническую поддержку, которая работает с 10:00 до 20:00 по Московскому времени.
  8. «Предпросмотр» позволяет просмотреть актуальное состояние оформления страницы.
  9. «Опубликовать» позволяет применить последние сохраненные изменения к реальной версии сайта и опубликовать, если не был ранее опубликован, сайт/страницу в сети Интернет.
  10. «Сохранить изменения» позволяет сохранять изменения в работе.
  11. «Разговоры с технической поддержкой» позволяет незамедлительно разрешить вопрос, спросив у технической поддержке.
II. Область редактирования разделена на три части. Первая часть предназначена, чтобы добавить шапку целевой страницы с помощью кнопки «Добавить Шапку». Обычно в шапке пытаются донести основную идею/услугу, создаваемой страницы, в одном предложении.

При нажатии на кнопку, открывается окно с выбором секции. Можно выбрать отдельно шапку и логотип целевой страницы из шаблонов [1, 2]. При необходимости, шаблоны можно фильтровать по таким критериям, как фон, тип (товар или услуга) и с чем (с кнопкой или с формой) (рис. 7).

Рис. 7. Выбор секции для шапки целевой страницы

После того, как секция будет выбрана, пользователь переносится обратно в конструктор. Если нет подходящей секции, то есть возможность создать собственную. Для того, чтобы создать новую секции, необходимо добавить в секцию необходимую информацию с помощью виджетов (рис. 8). Секции можно редактировать. Секция обладает функцией перемещения вверх или вниз относительно другой секции. Добавить секцию в избранное и в дальнейшем использовать ее при создании других целевых страниц. Секцию можно удалить. А так же настроить в секции фон, отступы, рамку, тени и переходы.

Рис. 8. Создание новой секции

В отдельной вкладке для секции настраиваются эффекты и настройки. Настраиваются позиции, такие как ширина и высота секции (стандартная или растянутая на 100%), вертикальное выравнивание колонок (стандартное или по центру), высота больших колонок внутри секции (резиновая или по высоте) (рис. 9) [1].

Рис. 9. Настройка позиций в секции

Выбирается один тип секции из трех. Выделяют стандартную секцию, слайдер секцию и мультисекцию. Слайдер секция – вся секция превращается в слайдер, в каждый слайд которой вставляются виджеты и настраивается дизайн. На рисунке 10 показаны варианты расположения элементов управления. Время переключения слайдов задается вручную или до 60 секунд. Для мультисекции характерно то, что вся секция становится мультисекцией и ее содержимое меняется в зависимости от параметров в UTM метке. Настраивается содержимое как и для слайдера.

Настраиваются эффекты секции. Задается обычный или фиксированный параллакс эффект.

Рис. 10. Варианты расположения элементов управления для слайдера

Вторая часть области редактирования предназначена, чтобы добавить контент целевой страницы с помощью кнопки «Добавить Контент». Например, добавление отзывов и описание товара. Третья часть области редактирования предназначена, чтобы добавить подвал целевой страницы с помощью кнопки «Добавить Подвал». В подвале страницы можно дать клиенту шанс связаться с вами, дать контакты, показать где находится офис [1,2]. Секции так же можно редактировать, как и для первой части области редактирования.

III. «Панель виджетов» содержит следующие элементы: «Изображение», «Текст», «Галерея и Слайдшоу», «Форма», «Видео», «Кнопка», «Продукт», «Меню», «Социальные сети», «Таймер», «Разделитель», «HTML код» и «Пустой блок для выравнивания контента» [1,3]. Для того чтобы добавить один из виджетов, необходимо его перетащить в секцию.

Виджет «Изображение» позволяет добавить изображание в необходимую секцию. Для добавления изображения, необходимо перенести виджет в секцию. Внутри секции автоматически образуется колонка, содержащая зеленый блок с надписью о загрузки изображения с компьютера (рис. 11) [1].

Рис. 11. Виджет «Изображение» и колонка

Колонку можно удалить или копировать. Так же предоставляется возможность настроить фон, рамку, отступы и тени. При нажатии на копку , появляется слева вкладка настройка дизайна (рис. 12) [1].

Рис. 12. Настройка дизайна

Для фона можно использовать палитру цветов и выбрать необходимый (рис. 13). Либо загрузить картинку и задать параметры. Картинка может повторяться по осям Х и У или же не повторяться [1]. Пользователь может задать расположение изображения (вручную, слева, справа, по центру), а так же растяжение изображения (по ширине, высоте секции, не задавать растяжение). Пользователь может задать область изображения, которая будет выступать фоном колонки.

Рис. 13. Палитра цветов для фона

Для рамки можно использовать палитру цветов и выбрать необходимый. Задать стиль линии рамки (одинарная, двойная, пунктирная), ее толщину до 20 px и радиус скругления углов до 100 px. Пользователь может выбрать расширенные настройки толщины линии рамки и задать толщину отдельно для каждой линии (верхней, нижней, левой, правой), такая функция доступна и для радиуса скругления углов [1]. Для каждого угла пользователь может задать свой угол скругления (рис. 14).

Рис. 14. Настройка скругления углов

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

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

Чтобы задать тени, необходимо чтобы был выбран непрозрачный фон. Доступно 12 видов теней (рис 15).

Рис. 15. Выбор тени

Основное изображение можно загрузить с помощью кнопки , а так же настроить фон, рамку, отступы, тень как и для колонки. Предоставляется возможность удалить и копировать блок изображение (рис. 16).

Рис.16. Виджет «Изображение»

Виджет «Текст» позволяет добавить необходимую текстовую информацию в секцию. Набранный текст можно отредактировать, удалить или копировать блоком (рис.17). Предоставляется возможность настроить фон, рамку, отступы и тени. При нажатии на знак редактирования появляется дополнительная панель инструментов (рис. 18).

Рис. 17. Блок с текстом

Рис. 18. Панель инструментов редактирования текста

Панель инструментов содержит такие функции, как применение жирного и курсивного начертания текста, подчеркнутого и зачеркнутого текст, стиль текста (заголовка) (рис. 19) [1].

Рис. 19. Выбор стиля текста

Текст можно выровнять по левому краю, по правому краю и по центру. Необходимый цвет шрифта и цвет выделения задается из палитры цветов (рис. 20).

Рис. 20. Палитра цветов текста

Текст можно маркировать и нумеровать. Панель инструментов позволяет добавить ссылку (рис. 21). Из панели инструментов можно добавить мультитекст [1, 3]. Выделенная часть текста, активированная функцией мультитекста, будет заменяться на значение введенного параметра в ссылке.

Рис. 21. Добавление ссылки

Виджет «Галерея и Слайдшоу» позволяет добавить изображения в секцию. Галере можно отредактировать, удалить или копировать блоком. Предоставляется возможность настроить фон, рамку, отступы и тени. При нажатии на знак редактирования открывается окно для загрузки изображений, а так же настройки (рис. 22). Во вкладке «Настройки» выбирается один из типов отображения контента: слайдшоу или галерея. Если выбрать слайдшоу, то изображения будут расположены в одном виджите и сменять друг друга по времени или клику. Можно задать элементы управления для слайдшоу, а так же задать время переключения слайдов [1].

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

Рис. 22. Загрузка изображений

Виджет «Форма» позволяет добавить на создаваемую страницу форму (рис. 23). По умолчанию форма имеет заголовок, два поля и кнопку. Форму можно отредактировать, удалить или копировать блоком. Так же предоставляется возможность настроить фон, рамку, отступы и тени. При нажатии на знак редактирования открывается окно, в котором дается возможность изменить параметры создаваемой формы. Окно редактирования предоставляет четыре вкладки: цель использования, структура и поля, действие после отправки данный, цели для статистики.

Во вкладке «Цели использования» выбирается один из типов формы. Различаю три типа формы: сбор базы контактов (интеграция с MailChimp, GetResponse и другие системы), заказ обратного звонка (интеграция с amoCRM, Bitrix24) и заказ продукта или услуги (интеграция с amoCRM, Bitrix24). Так же указывается о необходимости получения уведомлений о новы заявках по SMS и Email [1, 2, 3].

Рис. 23. Виджет «Форма»

Во вкладке «Структура и поля» настраивается форма. С помощью иконок, расположенных справа, пользователь с легкостью может добавить необходимые поля на форму (рис. 24). Добавленное поля редактируется и меняются местами. Создавать можно как вертикальную, так и горизонтальную форму [1].

Рис. 24. Добавление полей в форму

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

Во вкладке «Цели для статистики» указываются идентификаторы цели в Яндекс.Метрике, Google Analitics и Bloxy [1,3].

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

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

Рис. 25. Библиотека иконок

Виджет «Продукт» позволяет добавить на страницу необходимый продукт. Виджет «Продукт» можно редактировать, удалить или копировать блоком. Так же предоставляется возможность настроить фон, рамку, отступы и тени. При нажатии на кнопку редактирования, открывается новое окно, где добавляются новые продукты. Подбирается вид карточки продукта, пользователь сам выбирает что должно отображаться в карточке (рис. 26) [1]. Например, название продукта, описание продукта и так далее. Так же настраивается расположение продукта в виджите и назначение кнопки (добавление в корзину или покупка в один клик). Настраивается форма для покупки продукта.

Рис. 26. Вид карточки продукта

Виджет «Меню» позволяет добавить меню на страницу. По умолчанию меню содержит три пункта, которые в дальнейшем можно редактировать (рис. 27). Виджет «Меню» можно редактировать, удалить или копировать блоком. Так же предоставляется возможность настроить фон, рамку, отступы и тени. При нажатии на кнопку редактирования, открывается новое окно, где настраиваются пункты меню. Можно добавлять и удалять пункты меня, изменять названия, а так же задавать ссылку на которую перейдет пользователь или прокрутку к определенной секции [1].

Рис. 27. Виджет «Меню»

Виджет «Социальные сети» позволяет добавить значки социальных сетей на страницу. По умолчанию появляется четыре социальных сети, которые в дальнейшем можно редактировать (рис. 28).

Рис. 28. Виджет «Социальные сети»

Виджет «Социальные сети» можно редактировать, удалить или копировать блоком. Так же предоставляется возможность настроить фон, рамку, отступы и тени. При нажатии на кнопку редактирования, открывается новое окно, где можно выбрать социальные сети, которые необходимо использовать (рис. 29), а так же тип социальных сетей (поделиться с друзьями, ссылки на ваши аккаунты, комментарии Вконтакти и Facebook).

Рис. 29. Выбор социальных сетей.

Виджет «Таймер» позволяет добавить таймер на страницу. По умолчанию появляется таймер с часами, минутами и секундами, которые в дальнейшем можно редактировать (рис. 30). Виджет «Таймер» можно редактировать, удалить или копировать блоком. Так же предоставляется возможность настроить фон, рамку, отступы и тени. При нажатии на кнопку редактирования, открывается новое окно, где настраивается принцип работы таймера. Выбирается или ежедневное обновление с временем или определенная дата со временем [1, 2].

Рис. 30. Виджет «Таймер»

Виджет «Разделитель» позволяет добавить линию на страницу (рис. 31). Виджет «Разделитель» можно редактировать, удалить или копировать. Так же предоставляется возможность настроить фон, рамку, отступы и тени. При нажатии на кнопку редактирования, открывается новое окно, где задается текст, который вставляется в середину линии, и двойной стиль линии [1].

Рис. 31. Виджет «Разделитель»

Виджет «HTML код» позволяет добавить HTML код на страницу (рис. 32) [1, 2, 3]. Виджет «HTML код» можно редактировать, удалить или копировать. При нажатии на кнопку редактирования, открывается новое окно, где вставляется необходимый HTML код.

Рис. 32. Виджет «HTML код»

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


Рис. 33. Виджет «Пустой блок для выравнивания контента»

IV. Четвертый элемент «Быстрые сочетания» расположен в нижней части конструктора. С помощью данной заметки, пользователь сможет легко и быстро отменить, скопировать или вставить. Разработчики добавили быстрые сочетания и для операционной системы Мас (рис.34) [1].

Рис. 34. Быстрые сочетания

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


Библиографический список
  1. Bloxy [Электронный ресурс]. – URL: https://bloxy.ru/.  (Дата обращения: 8.01.2018).
  2. Site-builders [Электронный ресурс]. – URL: https://site-builders.ru/konstruktor-sajtov-bloxy. (Дата обращения: 10.02.2018).
  3. Startpack [Электронный ресурс]. – URL: https://startpack.ru/application/bloxy. (Дата обращения: 10.02.2018).


Количество просмотров публикации: Please wait

Все статьи автора «Хлебород София Анатольевна»


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

Связь с автором (комментарии/рецензии к статье)

Оставить комментарий

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

Если Вы еще не зарегистрированы на сайте, то Вам необходимо зарегистрироваться:
  • Регистрация