Меню

Page builder joomla 3 настройка



Page builder — создание лендингов на joomla

Page builder joomla от компании joomlashine — один из десятков других конструкторов лендингов, для движка joomla. В этом обзорном видео я расскажу о важном отличии этого компонента от всех остальных представленных на рынке.

С его помощью можно не только создавать новые, но и редактировать уже созданные ранее страницы или посты, даже если вы новичок и только познакомились с cms-joomla. До недавнего времени бытовало мнение о том, что подобные компоненты способны только создать лендинг или сайт-визитку, но теперь это полнофункциональный конструктор сайтов со всеми вытекающими отсюда выводами.

Для более опытных администраторов движка, такой инструмент — просто подарок. Компонент page builder joomla сэкономит вам кучу времени, поскольку все элементы страницы собираются с помощью готовых блоков.

После традиционной установки компонента, в визуальном редакторе движка появится дополнительная кнопка переключения редактора между режимами (классический и page builder).

Конечно в joomla можно создавать лендинги бесплатно, без специализированных компонентов, но для этого необходимы знания языков web-программирования и поработать ручками перекроив исходный код каждой страницы.

А с подобными расширениями, необходимость в этом практически отпала, да и делается все на «раз-два». По сути это готовый лендинг пейдж, нужно только скомпоновать правильные блоки и придать им нужные настройки.
Вот неполный перечень возможностей компонента page builder

  1. Перетаскивание элементов
  2. Встроенная анимация
  3. Параллакс эффекты
  4. Создание видеофона
  5. Встраиваемые модули
  6. Визуальное редактирование
  7. Окно предварительного просмотра
  8. Встроенный стиль
  9. Гибкие варианты элементов
  10. Адаптивный дизайн и многое другое.

Компонент имеет большое количество дополнительных элементов, поддержка виджетов и анимированных эффектов.
Предоставляет неограниченные варианты стилей на ваш выбор. Окно предварительного просмотра покажет вам сразу, как будет выглядеть ваша страница без переключения между backend и frontend.

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

Учитывая тот факт, что популярность лендингов в последнее время растет в геометрической прогрессии, подобные решения как компонент page builder joomla, будет незаменимым инструментом в создании одностраничников.

В чем основная фишка page builder joomla.

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

Представьте себе такую ситуацию. У вас настроены разные модули в которых показывается реклама, слайдеры, баннеры или простой рекламный текст, не важно. А теперь вы решили создать лендинг с помощью page builder. Всего лишь одним нажатием мыши мы сможем добавить уже готовый модуль в страницу.

Как выбрать разработчика page builder.

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

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

Наверняка не получиться использовать все эти элементы от разных разработчиков. Вывод напрашивается сам собой.

Среди большинства популярных компаний много сделано в этом направлении, но объединяет их одно. Чтобы создать лендинг на joomla бесплатно, можно использовать лишь часть возможностей page builder.

А вот компания joomlashine , все свои инструменты предоставляет любому желающему совершенно бесплатно, ограничения действуют лишь на количество создаваемых приложений. В нашем случае, с помощью компонента page builder joomla мы можем создать 5 профессиональных лендингов использую весь функционал без ограничения.

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

Поэтому грех не воспользоваться предоставленной возможностью от разработчиков joomlashine и попробовать создать лендинг пейдж на joomla самостоятельно используя все инструменты для создания одностраничника.

Обзор возможностей page builder

Лендинг на joomla как сделать практика смотрите в первом уроке

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

Список уроков миникурса pagebuilder

Источник

Page builder joomla 3 настройка

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

Вот пример страницы, созданной в SP Page Builder — http://kb52.ru/goszakupki/bankovskie-garantii

Это типичная посадочная страница под рекламу в Директе или лендинг. Примечательно то, что страницы, созданные в SP Page Builder корректно отображаются в любом шаблоне Joomla — фиксированном, резиновом, одно- и несколькоколоночном. Я успешно использую данный компонент с шаблоном Protostar.

Читайте также:  Обновить настройки просмотра с биллинга что это такое

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

Где скачать SP Page Builder?

Я рекомендую качать с официального сайта — https://www.joomshaper.com/page-builder. Компонент имеет 2 версии — бесплатную с ограниченной функциональностью и полнофункциональную платную (за $39). Я на одном проекте использовал полную версию SP Page Builder, на остальных — бесплатную и могу сказать, что для большинства задач вполне можно обойтись бесплатной версией.

Установка SP Page Builder

Установка SP Page Builder не отличается от установки любого другого компонента Joomla и выполняется через менеджер расширений.

После успешной установки в главном меню админки появляется новый пункт — SP Page Builder. Под ним — выпадающее меню, через которое можно посмотреть имеющиеся страницы, создать новую и почитать документацию (на английском языке).

Создание страницы на SP Page Builder

Выбираем пункт меню Add New Page. При этом открывается конструктор страницы. Вид его может показаться странным, поскольку он не содержит визуального редактора. Выглядит он так:

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

Row — горизонтальная строка. В этой строке есть Columns, то есть, столбцы. В столбцы, в свою очередь, вставляются элементы — аддоны. Принцип вложенности показан на картинке ниже:

То есть, вначале создаем новую строку (row), затем разбиваем его на колонки (columns), и уже в них добавляем аддоны (addon).

SP Page Builder предлагает разные варианты разбиения строки на колонки. Они могут быть разной ширины и число колонок — до 12.

Когда колонки созданы, жмем кнопку Add Addon. Аддоны в бесплатной версии следующие:

    1. Joomla Module — вставляет в страницу любой модуль. Например, список последних новостей или форму обратной связи.
    2. Accordion — вставляет так называемый «аккордеон», такая штука часто используется в разделах FAQ. На странице список вопросов, кликаем по воросу, под ним появляется ответ. Кликаем по другому вопросу — предыдущий ответ закрывается, открывается новый.
    3. Alert — предупреждение с кнопкой закрытия. Пример ниже:

    1. Button — кнопка на странице. Можно выбрать размер и настроить внешний вид. По нажатию кнопки осуществляется переход по указанной ссылке.
    2. Carousel — слайдер с картинками и надписями. Слайды могут листаться вручную и автоматически. Со слайда возможен переход на заданный URL.
    3. Divider — горизонтальная черта, отделяющая строки друг от друга
    4. Empty Space — пустое пространство, чтобы разнести строки чуть дальше друг от друга
    5. Feature Box — полезная фишка для перечисления, например, направлений деятельности, преимуществ или порядка каких-то действий. Выглядит примерно так:
    6. Icon — иконка, пиктограмма из состава иконочного шрифта Font Awesome (в Feature Box-ах использованы как раз иконки из Awesome).
    7. Image — произвольное изображение.
    8. Tabs — набор вкладок.

    1. Testimonials — инструмент для размещении на сайте отзывов клиентов. Выглядит так:

  1. Text Block — произвольный текст, в который можно вставлять картинки, списки, все остальное, кроме скриптов.
  2. Video — видео с Youtube или Vimeo Video.

После вставки и настройки всех аддонов нужно нажать кнопку «Сохранить» вверху слева. Чтобы вывести страницу на сайт, создаем новый пункт меню, выбираем для него тип SP Page Builder и указываем нужную страницу.

Для каждой строки, колонки и аддона можно настраивать цвета текста и фона, отступы (margin, padding), фоновые изображения, даже фоновое видео. Также можно настроить анимацию, чтобы элементы появлялись на странице с задержкой и спецэффектами.

То есть, если поразбираться с компонентом SP Page Builder, можно создавать вполне качественные презентационные страницы даже в бесплатной версии.

Чем платная версия лучше?

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

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

Выводы

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

Читайте также:  Alcatel one touch настройка будильника

Важное замечание от 29.11.2016 г.

Не повторяйте мою ошибку! В конце ноября 2016 года вышел SP Page Builder версии 2.0. В связи с этим система обновления Joomla предложила мне обновить платную версию 1.2 до 2.0, на что я согласился. В итоге, старая, но полная версия была обновлена до новой урезанной. При этом половина аддонов перестала работать. Пришлось делать откат сайта до прежнего состояния.

Источник

Обзор SP Page Builder Lite (часть 2). Конструктор контента для Joomla

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

Есть вариант создания сайта или отдельных страниц на основании шаблонов, но они доступны в платной версии расширения. Для тех, кто создаёт сайт с нуля рекомендую обратить внимание на готовые шаблоны сайта – быстрые старты. Их использование сильно упрощает и ускоряет процесс достижения хорошего результата в виде современного и стильного сайта. Тем более, что быстрые старты можно менять, в том же SP Page Builder, под свои задачи.

В предыдущей статье «Обзор SP Page Builder Lite (часть 1). Конструктор страниц Joomla» мы рассмотрели основные возможности компонента, отличия платной и бесплатной версий, поговорили о станицах и начали рассматривать аддоны/дополнения. В этой части рассмотрим оставшиеся аддоны и поговорим про категории, медиа-менеджер компонента и его настройки.

В обзоре участвует последняя, на момент написания статьи (04.07.2020), русскоязычная версия SP Page Builder Lite 3.6.7 в Joomla 3.9.19. Шаблон фронтальной части сайта – Helix Ultimate 1.1.2.

Видео обзор

  • Отзывы – 00:01:06.
  • Вкладки – 00:03:25.
  • Аккордеон – 00:05:10.
  • Иконка – 00:06:15.
  • Блок особенностей – 00:07:22.
  • Пусто промежуток – 00:08:59.
  • Разделитель – 00:09:58.
  • Изображение – 00:10:46.
  • Видео – 00:11:35.
  • Кнопка – 00:13:32.
  • Уведомление – 00:14:27.
  • Категории – 00:15:21.
  • Медиа – 00:16:03.
  • Настройки – 00:16:47.

Видео лучше просматривать с качеством 720 HD. Этот и другие видео уроки можете найти на каналах сайта Aleksius.com в YouTube и Mail.ru.

Ссылки из видео:

Аддоны Joomla SP Page Builder

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

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

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

Отзывы

В настройках дополнения, на вкладке General (рисунок ниже). Вы сможете задать текст отзыва, рейтинг и информацию о том, кто оставил отзыв. Также для разных элементов отзыва можно изменить настройки цвета, шрифта и отступов. Остальные вкладки были рассмотрены в предыдущей статье «Обзор SP Page Builder Lite (часть 1). Конструктор страниц Joomla».

SP Page Builder Lite

Вкладки (рисунок ниже). Позволяет отображать любые аддоны во вкладках.

Если Вам нужно больше возможностей, в плане создания вкладок Joomla, то ознакомьтесь с этими расширениями.

Вкладки

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

Joomla SP Page Builder

Аккордеон (рисунок ниже). Позволяет отображать любые аддоны в аккордеоне.

Если Вам нужно больше возможностей, в плане создания аккордеонов Joomla, то ознакомьтесь с Regular Labs Sliders Free и DJ-Tabs.

Аккордеон

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

Аддоны SP Page Builder

Иконка. Этот аддон позволяет выводить иконку из набора шрифтов FontAwesome 4 или FontAwesome 5. Набор шрифтов задаётся в общих настройках FontAwesome.

Читайте также:  Настройка антенн во владикавказе

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

Аддон Иконка

Блок особенностей (рисунок ниже). Содержит иконку (или изображение), заголовок и текст.

Блок особенностей

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

Настройки аддона Блок особенностей

Пустой промежуток. Позволяет задать пустое пространство высотой до 400 пикселей (рисунок ниже).

Пустой промежуток

Разделитель. Данный аддон SP Page Builder позволяет добавить горизонтальный или вертикальный разделитель – линию. В настройках (рисунок ниже) можно задать размер высоту вертикального разделителя, положение (слева, по центру, справа), толщину рамки, её цвет и другие параметры.

Разделитель

Изображение. В настройках (рисунок ниже) Вы можете добавить изображение с указанием радиуса скруглены его улов и альтернативным текстом (ALT). Также можно задать горизонтальное выравнивание и открытие увеличенной версии картинки во всплывающем окне (Lightbox).

Изображение

Видео. Это дополнение Joomla SP Page Builder предназначено для вставки видео с YouTube, Vimeo или MP4, OGV файла, расположенного в папке Вашего сайта. В настройках, при добавлении видео с YouTube или Vimeo (рисунок ниже, верхняя часть), можно указать адрес видео, включить отображение рекомендованного видео только с Вашего канала и отключить куки YouTube. Последнее может понадобиться для приведения Вашего сайта в соответствие с требованиями GDPR. Немного подробнее об этом Вы можете узнать в статье «Обзор компонента GDPR для Joomla. Соответствие GDPR и 152 ФЗ».

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

Если Вам нужно больше возможностей в плане вставки видео, то ознакомьтесь с этой статьёй «Обзор плагина AllVideos. Как вставить видео в Joomla».

Видео

Кнопка. Этот аддон SP Page Builder позволяет создать кнопку со ссылкой по её нажатию. В настройках (рисунок ниже) можно менять стиль кнопки, внешний вид, размер, форму, добавлять в неё помимо надписи иконку FontAwesome 4 или FontAwesome 5, задавать позицию иконки и т.д.

Аддон Кнопка

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

Уведомление

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

Настройки аддона уведомление

Категории

Менеджер категорий SP Page Builder, а также опции, доступные при создании или редактировании категорий, аналогичны менеджеру категорий Joomla (рисунок ниже). По большому счёту, категории в SP Page Builder Lite почти не нужны. Разделяя страницы по категориям Вы сможете фильтровать их на странице с их перечнем (в админке).

Менеджер категорий SP Page Builder

Медиа

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

Медиа

Настройки

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

  • Production Mode. Вы сможете включить рабочий режим. В этом режиме все CSS стили помещаются в один файл, что позволяет улучшить скорость загрузки страниц. Но при этом внесение изменений на страницу может потребовать очистки кэша.
  • Ключ API для Карт Google. Опция для вставки API ключа карт Google. Подробнее о том, как можно его получить написано и показано в видео в предыдущей статье «Обзор DJ-Classifieds 3.7.5. Новшества и получение API Google карты».
  • Загрузить FontAwesome. Если на страницах Joomla SP Page Builder Вы применяете шрифты FontAwesome, и они не загружаются шаблоном или другими расширениями сайта, то включите эту опцию.
  • SelectFontAwesomeVersion. Позволяет выбрать версию шрифтов – 4 или 5. Версия шрифта влияет на набор доступных иконок в аддонах, рассмотренных выше в статье.

Настройки

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

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

Источник

Adblock
detector