SP Page Builder Light и PRO обзор инструментов, настроек, дополнений и готовых решений

skin38 1

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

SP Page Builder или конструктор страниц от веб-студии JoomShaper пришел на смену всем этим приложениям. Конечно, некоторые «опции» приходиться до сих пор добавлять вручную, но многое теперь настраивается в одном компоненте. Работы с ним дают необходимый результат: мы получаем визуально приятный, легко воспринимающийся, современный, адаптированный под все экраны сайт.

 

Меню статьи

 

 
  Отличие Page Builder от Page Builder PRO

(Преимущества конструктора, возможности платных версий, цена годовой лицензии)

Как страницы Page Builder отображаются, выводятся на сайте

(Пункт меню и модуль SP Page Builder)

Обзор меню компонента

(Разделы панели управления: страницы, категории, интеграция, языковые пакеты)

Обзор инструментов и дополнений в режиме Backend

Бесплатные дополнения

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

Настройки аддонов на примере блока с характеристиками

 
   
 
Обзор бесплатных аддонов:
 
  Testimonials Tabs
 
  Карусель Joomla Module
 
  Video Empty Space
 
  Divider Icon  
  Accordion Alert  
  Button    
   

Параметры строки, параметры страницы             

 
  Дополнения (аддоны) в платной версии
 
   

Обзор аддонов версии PRO:

 
  Контактная форма
Анимированный заголовок  
  Анимированный номер (счетчик)
Материалы
 
  Лента новостей или скроллер Аудио  
  Блок номера Группа кнопок
 
  Carousel Pro Клиенты  
  Обратный отсчёт Галерея  
  Flickr Галерея Карта Google  
  OpenStreetMap
Вращающийся блок
 
  Заглавие Группа иконок  
  Изображение с текстом Цвет наложения  
  Instagram галерея Всплывающее окно  
  Навигация Opt-inForm  
  Персона Круговая Шкала  
  Price List Стоимость услуг  
  Индикатор Выполнения HTML Код  
  Социальные Сети Sound cloud  
  Отзывы Pro Временная Шкала  
  Лента Twitter    
   

Создание страниц в режиме Frontend

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

 

 

Отличие Page Builder от Page Builder PRO

Основные преимущества конструктора видны уже в версии free:

  • моментальное отображение изменений во Frontend редакторе, т.е. прямо на сайте (у версии free функционал редактора значительно урезан),
  • во время редактирования видно, как выглядет сайт на разных устройствах;
  • понятный интерфейс панели управления, готовые разделы (90), даже целые шаблоны страниц (25, но у версии Light они отсутствуют) вместо сложного кодирования (хотя если нужно можно добавить пользовательский css код);
  • более 40 встроенных приложений (аддонов), в облегчённой версии – 14 (это простые блоки, например, текстовый, блок с характеристиками, пустое пространство, иконка, изображение; доступна вставка модуля joomla). Уникальные дополнения – карты, формы, счетчики, плеер, галереи, кнопки соцсетей, индикатор, рассекатель, другие – доступны платно.
  • совместимость с шаблонами joomla;
  • сео оптимизация (метатеги, ключевые слова);
  • встроен собственный медиа-менеджер;
  • настройка шрифтов, простые, сложные структуры столбцов, дублирование, отмена/повтор, прочие облегчающие задачи функции.

Платная версия открывает доступ к:

  • экспорту/импорту элементов, целых страниц,
  • интеграции материалов Joomla, R2, J2 Store,
  • поддержке сторонних плагинов,
  • 13 языковым пакетам, включая русский;
  • а также к таким полезным функциям, как копирование, вставка, отключение строки/столбца/аддона (поля), вложение строк, другие.

Каждая из этих опций – огромный плюс разработчику, поэтому не стоит недооценивать эти возможности. Например, SP Page Builder PRO, который поддерживает работу с материалами joomla, позволяет создавать законченные статьи со встроенным адаптивным медиа-контентом. Нет необходимости создавать отдельный слайдер или галерею, добавлять шорткод, создавать модуль joomla. Всё происходит быстро, наглядно, внутри родного редактора материала joomla.

А как обойтись сайту компании без формы обратной связи? Может потребоваться встроить другие сторонние плагины. Безусловно, платная версия конструктора функциональнее, полезнее, чем бесплатная. С последней можно создавать всё то же самое, только дольше.

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

Платных версий три:

  • «Основная» для одного сайта без доступа к шаблонам страниц, расширениям – 49 долларов;
  • «Разработчик» – неограниченное количество сайтов, но также без доступа к шаблонам, расширениям – 179$;
  • «Расширенный» (1 шаблон) – 69$.

Как страницы Page Builder отображаются, как выводятся на сайте

Созданные страницы выводятся через соответствующий пункт меню (тип пункта меню – Page, Sp Page Builder). Этот тип меню присваивается любой из уже существующих страниц, например, главной. После выбора типа страницы, выбираем по названию созданную ранее страницу SP Page Builder.

Второй вариант отображение – модуль. Конструктор “поставляется” с модулем, который выводит любой элемент страницы в любой позиции шаблона. Причём создать элемент можно прямо внутри модуля.

skin38 2

Обзор меню компонента

Меню компонента (левое) состоит из 6 разделов:

  • PAGES (страницы),
  • CATEGORIES (категории),
  • INTEGRATIONS (интеграция с joomla и её расширениями),
  • LANGUAGES (языковые пакеты),
  • ABOUT (информация о компоненте),
  • MEDIA (медиа-менеджер).

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

skin38 3

Интерфейс на английском, языковые пакеты доступны только с pro версией. Причём перевод средствами браузера не доступен (опция не активна).

Раздел страницы пока пустой. Новая добавляется нажатием привычной кнопки – «Создать». Управление созданными страницами осуществляется привычными «изменить», «опубликовать», «не публиковать», «корзина», «настройки».

skin38 4

Следующий раздел – «Категории». Добавляя новую категорию, вы увидите привычный интерфейс joomla(со страницами всё не так, но об этом ниже). Те же вкладки, те же кнопки (метатеги, права доступа).

skin38 5

Раздел «Интеграция» предоставляет возможность подключить материалы joomla, контент К2 с помощью кнопки Install (опция доступна лишь в платной версии). После установки список аддонов пополнится соответствующим дополнением. Это дополнение заменит вам любой из ныне существующих модулей вывода новостей. Главное – настроить его так, чтобы материалыотображалиськрасиво.

skin38 6

skin38 7

skin38 8

Следующий раздел панели управления SP Page Builder – «Языки», где представлен среди прочих русский язык. Его установка возможна лишь после покупки платной версии.

skin38 9

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

skin38 10

Медиа-менеджер компонента SP Page Builder имеет удобный интуитивно понятный интерфейс, сюда загружаются файлы любых форматов: видео, аудио, изображения. Файлы раскладывают по папкам. Именно через него загружаются изображения, видеоматериалы, аудиофайлы.

skin38 11

skin38 12

skin38 13

Обзор инструментов и дополнений в режиме Backend

Создадим первую страницу. Дадим ей название. Здесь мы будем иметь весьма ограниченные возможности (по сравнению с версией pro): можно лишь самостоятельно создать ряды с ячейками.

skin38 14

skin38 15

Инструментарий

Добавим первый из них, пусть он будет состоять из 3-х ячеек. Изучим инструментарий. Кнопки «отменить»/ «вернуться» обязательно пригодятся.

skin38 16

«Шестерёнка» обозначает параметры: есть для страницы, строки, ячейки. Также для всех перечисленных предоставлены кнопки: «отключить» (т.е. не выводить, не показывать), «скопировать», «вставить», «удалить».

skin38 17

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

skin38 18

Бесплатные дополнения

В ячейку добавляется аддон (дополнение), бесплатных всего 14:

  • Video (вставляется mp4, ссылки Vimeo или YouTube),
  • Feature Box (настраиваемый блок особенностей, характеристик),
  • Empty Space (пустой промежуток, задаётся высота),
  • Divider (линия разделителя),
  • Icon (519 встроенных иконок),
  • Image (любое изображение),
  • Text Block (текстовый блок),
  • Testimonials (блок рекомендаций или отзывов),
  • Tabs (вкладки, количество неограничено),
  • Carousel (карусель изображений, которую удобно просматривать, прокручивая),
  • Joomla Module (легко добавляется любой созданный модуль joomla),
  • Accordion (блок, позволяющий разворачивать/сворачивать содержимое его пунктов),
  • Alert (окно уведомления),
  • Button (кнопка).

skin38 19

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

Добавим три картинки с заголовками, описанием. Эта секция будет отображать три разных по цене услуги (например, предложения строительной компании). При добавлении аддона «Изображение» открываются настройки. Впишем заголовок (Title), вставим картинку через медиа-менеджер компонента, сохраним. Также со второй картинкой.

skin38 20

 

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

После первого же сохранения, появится кнопка (предварительный просмотр). Нажав увидим, как выглядит созданная секция. Также появится кнопка “визуальный редактор”, который работает с полным функционалом в версии PRO.

skin38 21

skin38 22

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

skin38 23

skin38 24

Добавим описание под каждую из трёх картинок, отформатируем текст. Затем проверим, как наша первая секция будет отображаться на мобильных устройствах. Эту возможность также предоставляет визуальный редактор.

skin38 25

skin38 27

skin38 26

skin38 28

Готова первая секция, к сожалению, её нельзя сохранить (импортировать, чтобы позже применить на другом проекте). Нельзя добавить в библиотеку (Sections Library). Эти возможности доступны лишь с платной версией конструктора.

skin38 29

Настройки аддонов на примере блока с характеристиками

Логичнее для тех же целей использовать аддон Feature Box. Обратите внимание – у каждого аддона свои опции, но они обязательно разделены вкладками General (общие), Style (стиль), Advanced.

skin38 30

В общих настройках есть Title, метка для администратора (вместо Title), шрифты, настраивается размер шрифта, высота заголовка для ПК и мобильных устройств, задаётся уровень (H1, H2 или H3), имеется стиль заголовка, вес (полужирный), цвет текста, интервал между буквами. Отступы от заголовка (верхний, нижний) также настраиваются для ПК и мобильных устройств.

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

skin38 31

Также специфическими опциями аддона будут: добавление иконки (или полноценной картинки), назначение ей позиции (до заголовка или после, слева или справа). Дополнение “даёт” выбрать иконку из множества доступных вариантов, задать цвет, фон, размер, границы, радиус, ширину, расстояние до верхнего элемента и нижнего, отступы.

skin38 32

Опции самого аддона: описание товара или услуги, настройки (шрифт, размер букв, размер поля с описанием, цвет фона, отступы, выравнивание, например, по центру). В поле описания при необходимости добавляют мультимедийный контент.

skin38 33

Поле CSS Class предусмотрено для каждого аддона, оно пригодиться опытным веб-мастерам для более точных настроек стиля.

Последнее, что предстоит сделать, после введения всех настроек – это сохранить их. Нажимаем кнопку Apply (добавить).

skin38 34

Вкладка Style содержит типичные для всех аддонов настройки – изменяется фон, задаются цвета ячейки (см. пример настройки стиля на «Анимированном заголовке»).

Testimonials

На современных сайтах коммерческой направленности (особенно Landing Page) отзывы стали обязательным элементом главной страницы. Этот раздел призван завоевать доверие посетителей сайта. Поэтому стоит уделить его оформлению особое внимание.

С конструктором SP Page Builder сделать это будет легко – имеется аддон с соответствующими опциями:

  • метка для администратора;
  • название аддона;
  • поле ввода собственно отзыва или рекомендации клиента;
  • поле под имя клиента, поле для названия компании (если речь не о физлице);
  • аватар (здесь загружают фото клиента через медиа-менеджер SP Page Builder). Настраивается ширина аватара, его положение (влево, вправо).

skin38 35

Tabs

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

Вкладкам задают стиль: Default, Pills или lines. При желании вставляют иконку.

skin38 36

skin38 37

skin38 38

Карусель

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

skin38 40

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

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

skin38 39

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

Joomla Module

На страницу, разработанную с помощью конструктора SP Page Builder, легко вставляется любой заранее созданный модуль (joomla, сторонние приложения) – форма обратной связи, калькулятор стоимости, форма подписки, меню, сторонний слайдер, карта Яндекс, прочие.

Для этого во вкладке General аддона «Модуль Joomla» выберем тип – module (второй вариант модуль установки), выберем сам модуль из списка созданных.

skin38 41

skin38 42

Video

С помощью аддона легко добавляется видео с хостингов, вставляется собственный файл mp4 (через медиа-менеджер SP Page Builder). При необходимости настраивают конфиденциальность, добавляют информацию о видео.

skin38 43

skin38 44

Empty Space

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

skin38 45

Divider

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

Разделителем делают изображение, стоит выбрать соответствующий тип (не рамку, а изображение).

skin38 46

Icon

SP Page Builder содержит 519 встроенных иконок, с помощью соответствующего аддона любая из них вставляетсяв нужную позицию.

На иконку добавляют ссылку, выбирают цвет фона, границ, размер иконки, задают конкретную высоту, ширину, задают отступы, настраивают эффект при наведении мыши (например, увеличение иконки при наведении).

skin38 47

skin38 48

Чаще всего иконками SP Page Builder пользуются только в составе аддона «Блок с характеристиками».

Accordion

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

В аддоне «Аккордеон» настраивается многое: заголовок, стиль «гармошки» (в выпадающем списке их 8), аккордеон воводится с раскрывшемся первым пунктом, либо со всеми открытыми, либо, наоборот, со всеми закрытыми. Пункты добавляют в неограниченном количестве (с заголовком, иконкой, контентом). В контент пункта при необходимости (через графический редактор) добавляют мультимедийные файлы.

skin38 49

skin38 50

Alert

Alert – сообщение предупредительного характера. Помимо ввода самого текста сообщения добавляются файлы мультимедиа, кнопка закрытия окна. Доступно 4 стиля оповещения (на скриншоте приведён “основной” тип уведомления).

skin38 51

Button

В настройках кнопки меняется многое: текст, его цвет, размер, шрифт; стиль кнопки (есть готовые –  “Опасность”, “Внимание”, “Информация”, а есть “Пользовательский; меняется размер, форма (контур, 3D, градиент, плоская), добавляются иконки справа или слева от текста (выбираем из имеющихся).

skin38 52

skin38 53

Параметры строки, параметры страницы

Создали страницу из доступных аддонов, остается проверить настройки и опубликовать. Настраивается не только каждый отдельный аддон, но и строка (секция), сама страница. В каждой секции есть возможность добавить заголовок, подзаголовок, настроить их (выровнять, задать эффект – текущая строка, удалить переплёты между столбцами). Секции присваивают ID. Во вкладке Style работают с фоном секции, Animation– с анимационным эффектом. Во вкладке Responsive скрывают анимацию для пользователей мобильных устройств, планшетов и/или ПК.

skin38 54

skin38 55

В настройках всей страницы меняют фон, css, настройки публикации (задать категорию, изменить состояние – опубликовано/не опубликовано, открыть доступ пользователям определённой категории – по умолчанию public), а на вкладке Permissions – конкретные настройки доступа (права).

skin38 56

skin38 57

На этом возможности создания страниц с помощью SP Page Builder не заканчиваются.

Дополнения (аддоны) в платной версии

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

Контактная форма

Очень важное дополнение, особенно для коммерческих сайтов. Конструктор SP Page Builder предоставляет множество точечных настроек внешнего вида формы (капча, настраиваемая кнопка, поля формы, фон).

skin38 58

skin38 59

skin38 60

skin38 61

skin38 62

skin38 63

skin38 64

skin38 65

skin38 66

skin38 67

skin38 68

Анимированный заголовок

В аддоне предусмотрены разные настройки анимации (два стиля, несколько эффектов). Это дополнение пригодится вам, если потребуется уникализировать веб-проект. В нём задают цвет текста. Фон меняется во вкладке Style – вкладка с типичными для всех аддонов настройками (здесь задаётся цвет фона, используют вместо фона свои изображения, задают градиент).

skin38 69

skin38 70

skin38 71

skin38 72

skin38 73

Анимированный номер (счетчик)

Подобные элементы часто встречаются на корпоративных сайтах. Они позволяют отображать достижения компании: стаж работы, количество постоянных клиентов, выполненные проекты (например, на сайтах застройщиков отображается количество готовых объектов, строящихся многоквартирных домов). А анимация красиво подаёт важную информацию, обращает на неё внимание посетителей веб-ресурса.

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

skin38 74

Материалы

В общих настройках аддона «Материалы» настраивают заголовок, выбирают источник (либо контент joomla, либо К2), категорию статей или несколько, выбирают тип сообщения (например, ссылка), задаётся порядок вывода, количество отображаемых статей, столбцов, включается отображение описания статьи. Есть отдельные параметры для статей: отображение миниатюр, автора, категории, даты, кнопки «Далее», кнопки.

skin38 75

skin38 76

skin38 77

Лента новостей или скроллер

Лента новостей или скроллер – два более интересных способа вывода материалов. Выбираем режим работы аддона, источник, категории статей, порядок вывода материалов, изменяем при необходимости скорость промотки контента, устанавливаем изображение на фон (при желании). Задаём более точечные настройки внешнего вида (см. скриншот).

skin38 78

skin38 79

Аудио

Здесь настроек немного. Только общие – General и Style. Из специализированных только вставка аудиофайла (из медиа-менеджера), с автоматическим определением url-пути к файлу (а также автозапуск, повтор трека). Аддон «Аудио» – удобный инструмент для вывода звуковых файлов на сайтах музыкальной направленности, веб-библиотек со множеством аудио-записей.

skin38 80

Блок номера

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

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

skin38 81

Группа кнопок

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

skin38 82

Carousel Pro

Аналогичное аддону «Карусель» дополнение, но с расширенными настройками. Настраивается автозапуск, выводится контроллер под каруселью (отображает порядок слайдов), стрелки навигации. При добавлении нового слайда прописывается название, контент, добавляется фоновое изображение, изображение из медиа-менеджера, либо видео из Youtube (или Vimeo), кнопка с текстом (для неё имеются все те же настройки, как у аддона «Кнопка»), устанавливается ссылка.

skin38 83

skin38 84

skin38 85

skin38 86

Клиенты

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

skin38 87

Обратный отсчёт

Аддон отображает отсчёт времени до определённого события (до праздника, окончания акции). Смотрится весьма эффектно.

В таймере установим месяц, час, минуты, при необходимости секунды. Просто укажем дату окончания отсчёта, например, 2019/01/01 (день, когда отсчёт прекратится), а затем время (например, 00:01). При необходимости добавим текст, изменим высоту и ширину счётчика, размер шрифта, цвет текста, фона, настроим границы. Можем добавить метку, настроить её (цвет текста, размер шрифта).

skin38 88

skin38 89

Галерея

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

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

skin38 90

skin38 91

Flickr Галерея

Это дополнение позволяет выводить на сайте все ваши фото из Flickr.com (ресурс для фотографов со множеством стоковых изображений), если у вас таковые имеются.

Вводится идентификационный номер, полученный на idGettr (это ресурс, помогающий сгенерировать ID Flickr галереи). Обязательно указывается количество изображений из галереи, которые будут добавлены на ваш сайт. Если требуется более 20, то необходимо указать ключ (сгенерированный код). Ещё предусмотрена возможность указать, сколько фото выводить на одной строке.

skin38 92

skin38 93

Карта Google

Специальный аддон имеет следующие опции: цель, заголовок, точка на карте (адрес или координаты, т.е. широта/долгота – их можно получить с помощью специального сервиса, разработчик советует воспользоваться этим http://www.latlong.net), высота карты, тип (карта дорог, спутник, гибрид, ландшафт), зум (масштаб), опция «включить колесо прокрутки».

skin38 94

OpenStreetMap

Альтернативный аддон для вывода иных, чем Google Maps, карт. Имеется множество встроенных стилей, возможно добавить на карту несколько точек месторасположения.

skin38 95

skin38 96

Вращающийся блок

Дополнение позволяет выводить на сайт блок, который поворачивается обратной стороной при наведении на него или по клику мышью. В аддоне уже прописан html-код текста передней и задней сторон, его можно изменить (меняйте только ту часть кода, где отображается непосредственно сам текст, а не кодировка, её лучше не трогать).

Из других опций: доступен выбор стиля вращения (4 эффекта: вращение, листание, затухание, 3D), выбор направления вращения (снизу, сверху, справа), настройка высоты блока, выравнивание текста, стиль рамки, цвет, стиль лицевой стороны (по умолчанию установлено симпатичное фоновое изображение, но можно выбрать своё), цвет текста, цвет фона, а также цвет текста и фона при вращении.

skin38 97

skin38 98

Заглавие

Можно задать разный уровень заголовку – H1, H2, H3 и т.д. Можно установить ссылку на заголовок. И конечно настроить заголовок: размер, стиль и вес шрифта, высота строки, расстояние между буквами, отступы, выравнивание. К заголовку (до или после) можно добавить иконку (из 519 доступных) и настроить тень.

skin38 99

skin38 100

Если нужен фон под заголовком, воспользуйтесь вкладкой Style.

Группа иконок

Удобный инструмент вывода группы иконок. Настраивается расстояние между иконками, стиль отображения (линейный и вертикальный), а под размером шрифта здесь понимается размер иконки внутри рамки. При добавлении новой можно настроить её размеры, цвет, рамку.

skin38 101

Изображение с текстом

Это дополнение позволяет создавать блок, похожий на один из элементов карусели: картинка, заголовок и текст. Изображение выравнивается по левому краю, либо по правому. Настраивается заголовок (размер, шрифт, стиль, цвет, границы). Описание под заголовком меняется во встроенном текстовом редакторе. Можно добавить картинку, ссылку, цитату. После чего можно настроить внешний вид кнопки при помощи уже привычных параметров (цвет, форма, размер и т.д.).

skin38 102

skin38 103

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

Цвет наложения

Интересное дополнение, позволяет на фоновую картинку наложить цветовую «пелену» (полупрозрачный слой определённого цвета), с помощью анимации сдвигать фон с текстом в сторону (вверх или вниз) при наведении мыши. При такой подачи эффектно смотрится текст и фоновая картинка. Встроены параметры заголовка, описания, кнопки.

skin38 104

skin38 105

Instagram галерея

Настраивается по принципу Flickr галереи: указывается ID, ключ, ограничивается количество выводимых фото. При наведении на картинку она немного увеличивается (настройки по умолчанию).

skin38 106

Всплывающее окно

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

  • раздел «Модальный селектор» предусматривает три режима – кнопка, изображение или иконка;

далее идут параметры настройки кнопки (текст кнопки, стиль, вид и др. опции), если была выбрана кнопка (или параметры изображения – если выбрано было изображение и т.д.);

  • модальное содержание (тип контента – видео, изображение или текстовый редактор; текст, ширина всплывающего окна, высота, выравнивание);

если выбираем текстовый редактор, то во всплывающем окне будет текст, если выберем видео – во всплывающем окне будет открываться видео.

skin38 107

Таким образом, дополнение предоставляет множество вариантов отображения всплывающего окна и его «свёрнутого» вида.

skin38 108

skin38 109

Навигация

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

skin38 110

Opt-inForm

Аддон Opt-in Form позволяет создать форму подписки, созданную, например, в популярном Mailchimp (можно выбрать другой ресурс из доступных). Возможности аддона практически такие же, как у дополнения «Контактная форма».

skin38 111

Персона

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

Доступна загрузка фото, ввод имени, обозначение человека (например, должность), ввод адреса электронной почты. Есть поле для ввода текста, куда следует вписать информацию о человеке. Можно добавить ссылки на профили в соцсетях Facebook, Twitter, Google+, LinkedIn, Pinterest, Flickr, Instagram, Dribbble а также на канал YouTube и собственный сайт.

skin38 112

skin38 113

skin38 114

Круговая Шкала

Аддон позволяет наглядно отобразить процент выполнения. Изменить можно: размер цифры, размер всей круговой шкалы, цвет цифр, цвет шкалы (заполненной и не заполненной), толщину шкалы. Вместо цифр можно вставить иконку. Имеются настройки содержимого (заголовка и описания).

skin38 115

skin38 116

Price List

Аддон Price List – это блок с информацией о товаре или услуге, содержащий графический элемент по левой стороне, заголовок, краткое описание и цену по правой. Соотношение сторон меняется (можно сделать более узкий левый бок шире). Левый блок может состоять из фотографии товара (изображения услуги) или из порядкового номера с фоном.

В правом цену можно перенести из заголовка под описание, под ней появиться линия, её вид можно изменить (цвет, тип – сплошной или пунктир, толщина). Можно увеличить размер цифр, поменять их цвет. Изменения доступны в отношении заголовка (цвет, размер, стиль), описания (меняется в графическом редакторе).

skin38 117

skin38 118

Стоимость услуг

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

Блоку можно задать цвет фона. Меняется и цвет текста (есть и множество других опций, изменяющих заголовок и шрифт ценника). Описание меняется в графическом редакторе, где можно добавить изображение.

В поле продолжительность указывается срок действия тарифного плана (например, если цена указывается за месяц, этот нюанс стоит указать). Имеются все настройки для кнопки.

skin38 119

skin38 120

Индикатор Выполнения

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

skin38 121

HTML Код

Аддон позволяет вставить любой контент с помощью пользовательского HTML-код (именно HTML, а не JavaScript или PHP, но можно настроить стиль CSS). В поле код указан пример заполнения.

skin38 122

Социальные Сети

Аддон «Социальные Сети» даёт возможность пользователю делиться содержимым страницы сайта с друзьями в социальных сетях.

Можно выбрать соцсети из списка доступных: есть ВК, FB, Twitter, Google и др. Есть опции «показать название сайта» (выводится на иконках), «показать количество поделившихся» (на иконках), «показать общее количество поделившихся» (по левую сторону от иконок).

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

Над иконками можно ввести (и настроить) заголовок. Есть поле для ввода API. Выравнивание иконок соцсетей возможно по центру, по левому или правому краю.

skin38 123

Sound cloud

Аддон создан для вывода трека или альбома, имеющегося на ресурсе soundcloud.com. Вставляется с помощью кода в настройках аддона.

skin38 124

Отзывы Pro

Аддон «Отзывы Pro» имеет настройки автозапуска, элементы навигации (стандартный и/или стрелки). Можно изменить цвет и размер иконки, обозначающей цитату или вообще отключить её показ.

Дополнение отличается от обычного аддона «Отзывы» тем, что позволяет создать сразу несколько отзывов. Они будут выводиться как слайдшоу (кнопки навигации позволят «пролистывать» элементы).

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

Предусмотрены настройки аватара (ширина, форма, положение), заголовка и отзыва (шрифт, цвета).

skin38 125

skin38 126

Временная Шкала

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

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

skin38 127

Лента Twitter

Для отображения вашей ленты новостей из профиля Twitter потребуется указать название своего профиля, ключ пользователя и метку доступа. Ключ и метку можно получить в разделе для разработчиков: https://apps.twitter.com/ (после добавления учетной записи разработчика).

skin38 128

Создание страниц во Frontend

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

  • новые аддоны;
  • готовые секции (блоки);
  • целые шаблоны страниц (тематические).

skin38 130

skin38 131

А также к нашим услугам возможности редактора Frontend. Аддоны и блоки добавляются путём простого перетаскивания готового элемента на страницу.

skin38 129

В готовые секции можно добавлять новые аддоны.

skin38 132

Редактировать имеющиеся блоки можно по-разному. Например, можно менять отступы движением мыши (двигая стрелочку, пока не уменьшиться размер отступа, закрепим результат нажатием на значок замка).

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

skin38 133

Готовые шаблоны страниц добавляются путём выбора из каталога (несколько тематик).

skin38 134

В визуальном редакторе имеется набор инструментов: параметры страницы, мои разделы, мои аддоны, импорт, экспорт, пустой контент и “добавить в меню” (для добавления текущей страницы в главное меню сайта).

skin38 135

На страницу можно загрузить созданный ранее шаблон (с помощью функции экспорт).

skin38 136

skin38 137

 

Конструктор SP Page Builder имеет множество возможностей для создания современных сайтов, с наглядными медиафрагментами (новые форматы подачи материала, например, шкала времени, индикатор выполнения и т.д.), заготовками целых секций (например, отзывы, прокручивающиеся автоматически, ячейка с характеристиками тарифного плана, прайс лист, контактная форма и другие), некоторые из которых связаны со сторонними популярными ресурсами (лента twitter, форма из mailchimp). Удивляет в конструкторе веб-страниц не только наличие заготовок, но и множество настроек, включая фон, анимации, возможность сохранять и вставлять на сайт собственные разработки.