- Купить SP Page Builder Pro у разработчика (без посредников и переплат).
SP Page Builder Pro – русскоязычный платный компонент Joomla для упрощённого создания страниц со «сложным» макетом и различными объектами (изображения, текстовые блоки, галереи, формы, аккордеоны, «бегущие» цифры и т.д.).
Видео обзор
- Страницы – 00:01:01.
- Готовые секции – 00:01:32.
- Экспорт и импорт страниц – 00:04:58.
- Дублирование, копирование и вставка строк – 00:07:28.
- Шаблон страницы – 00:08:28.
- Параметры строки – 00:09:45.
- Строка в строке – 00:14:15.
- Параметры колонки – 00:15:11.
- Порядок столбцов – 00:15:45.
Видео лучше просматривать с качеством 720 HD. Этот и другие видео уроки можете найти на каналах сайта Aleksius.com в YouTube и Mail.ru.
Ссылки из видео:
С его помощью этого компонента можете превратить каждую страницу сайта в некий лендинг. При этом не обязательно владеть навыками работы с CSS, так как у каждой страницы, строки, столбца и отдельного объекта есть настройки как внешнего вида, так и функциональности. И таких настроек достаточно много.
В предыдущих статьях мы рассмотрели те возможности, которые предоставляет бесплатная версия компонента. В этой и следующих статьях рассмотрим, что есть в платной версии компонента. В цикле уроков по самостоятельному созданию сайтов на Joomla 4 рассмотрен пример работы с SP Page Builder Lite.
На сайте разработчика есть полноценная демонстрационная версия компонента, которая работает только в рамках тестового сайта.
В обзоре участвует последняя, на момент написания статьи (08.01.2021), русскоязычная версия SP Page Builder Pro 3.7.8 в Joomla 3.9.23. Сайт с быстрым стартом на базе Helix Ultimate 1.1.2.
Есть бесплатная версия плагина сравнение версий описано в предыдущей статье.
Страницы SP Page Builder Pro
Об опциях, доступных для страницы в платной и бесплатной версиях компонента можно прочесть в предыдущей статье. Ниже поговорим только про те возможности, которые есть в платной – Pro версии.
В панели инструментов в верхней части редактора страниц, нажав на кнопку Add section (добавить секцию), Вам будут доступны десятки готовых секций – строк с объектами внутри них (на вкладке Sections Library (библиотека секций)). Эти секции уже настроены и представляют собой фрагменты страниц: слайдеры, таблицы цен, отзывы, контакты, таблицы и т.д.. Естественно, что Вы сможете изменить любые настройки, чтобы адаптировать секцию или отдельные её объекты под свои потребности.
Обратите внимание, что добавление секций возможно в том случае, если в настройках компонента, на вкладке License & Update (лицензия и обновление), Вы указали свой e-mail и лицензионный ключ с сайта разработчика.
Тут же в Add section (добавить секцию) есть вкладка My Sections (мои секции) (рисунок ниже). Если на одной странице Вы настроили какую-то секцию/строку, которую нужно повторять на других страницах, то можно её сохранить и использовать на других страницах (в рамках одного сайта). Для сохранения достаточно нажать на иконку дискетки в правом верхнем углу строки и задать имя строки в списке сохранённых строк/секций.
Нажав на кнопку Экспорт, в панели инструментов верхней части редактора страниц, Вы сможете экспортировать всю станицу в виде файла формата JSON. Экспортируются все настройки страницы, строк, столбцов и объектов/аддонов, их взаимное расположение и даже текст, который в них содержится. Но в экспортированный файл не попадают изображения и другие «внешние» файлы. При этом в экспортированном файле сохраняются относительные пути к этим файлам. Вы сможете перенести папки с файлами с одного сайта на другой (на тоже место).
В принципе, таким образом можно сохранить все готовые строки из вкладки Sections Library (библиотека секций). Например, пока у Вас есть действующая лицензия можно создать страницу или страницы, на которой разместить все секции. После этого сможете экспортировать страницу. А затем, при помощи кнопки Импорт, импортировать её на любой свой сайт и использовать любую из секций. И это возможно даже без действующей лицензии.
Нажав на инструмент Шаблоны станиц (рисунок ниже), перед Вами откроется перечень из 50 наборов макетов (Layout Bundles) или 317 макетов (Layouts) страниц (на 09.01.2021). Это готовые макеты, которые Вы сможете настроить так, как захотите.
Набор макетов (Layout Bundles) – это совокупность страниц, оформленных в едином дизайне и с единой тематикой (рисунок ниже). А макеты (Layouts) страниц – это отдельные страницы. В макетах страниц есть те же страницы, что и в наборах, но они не сгруппированы. В любом случае, придётся добавлять готовые страницы по одной.
В инструментах строки (рисунок ниже) можно её отключить, скопировать/вставить или удалить. Плюс, можно продублировать строку. Дублирование работает только в рамках одной страницы, а копирование/вставка - в рамках разных страниц и даже в модуле SP Page Builder Pro, материалах Joomla, K2 и других расширениях, для которых включена интеграция.
Параметры строки и колонки
В параметрах строки есть три вкладки:
- General (основная).
- Style (стили).
- Animation (анимация). Вкладка позволяет задать настройки анимации для появления строки (тип анимации, длительность и задержку).
На первой вкладке General (основная) (рисунок ниже) Вы сможете задать заголовок строки, изменить его выравнивание, задать 100% ширину строки, удалить отступы между колонками строк и сконфигурировать другие параметры. Обратите внимание, что возле некоторых настроек есть три пиктограммы: компьютер, планшет и смартфон. Эти пиктограммы позволяют задавать разные настройки с учётом ширины экрана браузера (устройства). Можно, например, задать отступ между колонками для компьютеров 60, для планшетов 30, а для смартфонов 10 пикселей.
В спадающем списке некоторых числовых опций есть возможность задавать разные единицы измерения: px, %, em, rem. Немного подробнее о них можно прочесть в статье «Единицы измерения: px, em, rem и другие».
Включая и отключая разные опции, например, Выравнивание по середине, могут появляться дополнительные настройки, связанные с активированной опцией.
На второй вкладке Style (стили) (рисунок ниже) Вы сможете изменить различные настройки строки: высоту, ширину, поля, отступы, фон, рамки, наложения цвета и т.д.
Тут же есть Форма. Но это не форма с полями для отправки данных, а наложение изображения в форме облака и т.д. (рисунок ниже). В нижней части вкладки есть опции, которые позволят скрывать строку на компьютерах, планшетах или мобильных телефонах.
В параметрах колонки, которые можно вызвать, нажав на соответствующий инструмент (рисунок ниже), есть четыре вкладки. Вкладки General (основная), Responsive (адаптивность) и Animation (анимация) рассмотрены в предыдущей статье.
Эти вкладки (рисунок ниже) не сильно отличаются от тех, что есть в бесплатной версии компонента. Среди отличий стоит отметить возможность установки порядка столбцов для планшета и мобильного телефона. Обратите внимание, что для корректной работы данной опции нужно задать порядок следования не для одного или нескольких столбцов в строке, а для всех.
А вот в плане стилей (рисунок ниже), Pro версия содержит несколько больше настроек. Среди которых параметры высоты, цвета текста, фона, наложение, полей, отступов, границы, тени и т.д.
Ещё одной важной особенностью платной версии компонента является возможность создания строки внутри строки. При этом дочерняя строка может содержать любое доступное количество колонок (рисунок ниже).
Как видите, в платной версии конструктора страниц Joomla есть очень полезные опции, которые значительно облегчают и ускоряет процесс, а результат делают более качественным. В следующей статье «Обзор SP Page Builder Pro (часть 4). Аддоны» рассмотрим некоторые аддоны и их настройки.
| Похожие материалы |
|---|
| Автор статьи – Хорошевский Алексей |
|---|
 Кандидат технических наук, преподаватель Харьковского национального университета радиоэлектроники, веб-мастер и SEO-оптимизатор с опытом более 15 лет. Специалист по созданию сайтов на Joomla и WebSite X5. Автор научных публикаций, видеокурсов и обучающего контента по веб-разработке и SEO. Ведёт блог и YouTube-канал, где делится своими знаниями и практическим опытом. Предоставляет услуги по созданию, доработке, сопровождению и продвижению сайтов. Подробнее об авторе… Публикации и работа: |
Полезные ссылки:
- Купить Pro версию у разработчика (без посредников и переплат).
- Официальный сайт компонента.
- Документация компонента (на нагл.).
