SP Page Builder - руководство по использованию

Sp Page Builder - современный и уникальный конструктор лендингов на Joomla. С его помощью можно создать удивительный сайт, который не будет похож ни на один другой, при этом не используя код и знаний программирования.

Здесь мы рассмотрим как пользоваться стандартными средствами Page Builder `а для редактирования контента на сайте.

Работа со строками

Для начала необходимо зайти в админ панель своего сайта.

После того как вы зашли в админ панель, вверху на панели навигации необходимо нажать на пункт SP Page Builder и выбрать "Страницы".

Далее следует выбрать страницу, которую вы хотите отредактировать.

В редакторе вы увидите строки (ROW). В каждой строке находится свои аддоны. Управление строками осуществляется в меню справа от названия (№1 на рисунке ниже). Управление аддонами осуществляется ниже (№2 на рисунке)

Чтобы скрыть\удалить\дублировать строку, нужно нажать на три вертикальные точки и выбрать необходимый пункт. После редактирования страницы нажать на кнопку вверху "Сохранить".

Важно!!! Настоятельно рекомендуем не удалять контент а просто его скрывать.

Чтобы отредактировать строку, нужно нажать на шестеренку.

В первой вкладке General (нижний рисунок слева) Можно прописывать\редактировать заголовки и позицию заголовков. Во вкладке Style (нижний рисунок справа) можно менять внутренние отступы в строке (Padding) и внешние отступы строки (Margin). Вкладка Style имеет практически одинаковые настройки во всех расширениях, так что если у вас все получилось все сделать правильно, то и в дальнейшем у вас не должно быть проблем. После всех изменений нажать на кнопку внизу окна "Apply" или "Сохранить".

Так же, можно задавать фоновое изображение для строки. для этого на вкладке Style в разделе "Включить настройку фона" выбрать "image" (№1 на рисунке ниже) и ниже нажать на кнопку (№2 на рисунке ниже), чтобы выбрать или загрузить изображение.

После того, как изображение добавилось, ниже появятся настройки, которые необходимо выставить таким образом, чтобы изображение фона выглядело корректно на сайте и после нажать на кнопку внизу окна "Apply" или "Сохранить".

Если вам нужно разбить строку на несколько колонок, то нажмите на иконку "+" (как показано на рисунке ниже). В появившемся окне можно выбрать, как разбить вашу строку. Ниже есть поле "пользовательское" (custom). В нем вы сможете самостоятельно разбить строку на необходимое вам число колонок. Не забудьте нажать на кнопку "Генерировать" (generate).

Важно!!! Общая сумма в пользовательском поле должна быть 12, иначе можно все сломать. Например: 6+6 (это две одинаковые колонки по ширине) или 3+2+7 (будут 3 колонки разной ширины).

Работа с аддонами

В joomla page builder `е есть множество дополнительных расширений, около 100, здесь же мы рассмотрим самые главные, которые используются чаще всего. Это текстовый блок (Text block), Изображение (image), joomla модуль (joomla module) и блок особенностей (feature box). Чтобы быстро найти нужное вам расширение можно воспользоваться поиском. Ниже представлен список всех доступных аддонов в sp page builder.

Joomla модуль (Joomla module)

Если вам необходимо вывести какой-либо модуль на сайт с вкладки "Расширения -> модули", то вам необходимо выбрать данный аддон и в строке "Модуль" выбрать нужный, после чего нажать на кнопку внизу окна "Apply" или "Сохранить". и "Сохранить" в главном окне Page Builder (вверху страницы).

Текстовый блок

Чтобы добавить новый аддон в пустую строку нужно нажать на изображение в центре или выше на надпись "Дополнение". В появившемся окне выберите Текстовый блок.

Как только вы его выбрали, появится окно управления этим аддоном. На вкладке General можно указать заголовок, подзаголовок а так же, пролистав ниже, написать\отредактировать текст в поле "Содержимое". На вкладке Style можно изменить отступы, цвет текста или задать фон или фоновую картинку. Делается это все аналогичным образом (рассказывается в начале статьи), как и в строке. После всех изменений нужно нажать на кнопку внизу окна "Apply" или "Сохранить".

Изображение

Аддон Изображение (image) в конструкторе страниц добавляется так же как и "Текстовый блок".

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

Чтобы изменить текущее изображение, необходимо нажать на кнопку под ним.

В появившемся окне нажмите не кнопку "Upload files" и загрузите новую картинку с компьютера. Выберите загруженную фотографию и нажмите "insert". После всех изменений нужно нажать на кнопку внизу окна "Apply" или "Сохранить".

Блок особенностей (Feature box)

Один из самых полезных аддонов в Page Builder. Он включает в себя как картинку так и текст. В поле "заголовок" можно указать сам заголовок, который будет выводится под картинкой. Картинка меняется аналогичным способом как в аддоне "Изображение" а в поле редактора "Содержимое" можно добавлять\изменять текст. Так же перед блоком с картинкой в поле "Title/Image/Icon Url" можно задать ссылку, чтобы по нажатию на этот блок пользователь мог перейти на нужную вам страницу.

Итог

SP Page Builder является функциональным помощником разработчика сайта. Он так же практически не требует знаний языков программирования, если необходимо сделать простую задачу. Поэтому с ним сможет справится практически любой пользователь Joomla.

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

• Мы задали фоновое изображение для строки;
• Черными квадратами отмечено разделение строки на 2 половины (6+6);
• Зеленым цветом указан аддон "Текстовый блок";
• Синим цветом обозначен аддон "Картинка";
• Коричневым - аддон "Блок особенностей"