Создавая сайты на джумле так или иначе мы тратим множество времени и усилий на поиск, установку, изучение, настройку, адаптацию к конкретному проекту дополнительных приложений – слайдеров, меню из иконок, многостраничных меню, форм обратной связи, всплывающих окон, галерей, видеогалерей. Задача осложняется, поскольку прошли те времена, когда можно было вставить 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Testimonials

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

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

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

Tabs

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

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

Карусель

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

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

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

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

Joomla Module

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

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

Video

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

Empty Space

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

Divider

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

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

Icon

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

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

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

Accordion

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

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

Alert

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

Button

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Материалы

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

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

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

Аудио

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

Блок номера

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

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

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

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

Carousel Pro

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

Клиенты

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

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

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

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

Галерея

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

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

Flickr Галерея

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

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

Карта Google

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

OpenStreetMap

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

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

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

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

Заглавие

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

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

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

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

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

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

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

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

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

Instagram галерея

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

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

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

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

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

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

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

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

Навигация

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

Opt-inForm

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

Персона

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

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

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

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

Price List

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

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

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

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

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

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

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

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

HTML Код

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

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

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

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

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

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

Sound cloud

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

Отзывы Pro

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

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

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

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

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

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

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

Лента Twitter

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

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

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

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

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

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

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

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

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

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

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

 

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