Yootheme builder — html конструктор на базе Uikit framework.
Это удобный качественный, но платный page builder (html конструктор), основанный на UIkit framework. Доступен для CMS WordPress и Joomla.
Особенности конструктора
- Редактирование осуществляется в стандартном режиме просмотра изменений тем wordpress
- Код конструктора генерируется в статичный html и хранится в БД WordPress в данных контента поста. Так же редактор генерирует JSON в виде html комментария, который так же хранится в данных поста. На основе этого json редактор восстанавливает свою структуру.
- Работает только с UIkit темой, но можно расширить своими элементами с любой версткой
- Хорошая документация
- Встроенные функции оптимизации (JS, CSS, Webp image)
Элементы редактора
Пример элемента доступен на github.
Базовые элементы
Базовые, предустановленные элементы находятся в папке modules в vendor/yootheme/builder/elements в YOOtheme Pro.
| Папка | Элементы |
|---|---|
builder/elements |
accordion, alert, button, code, column, countdown, description_list, divider, gallery, grid, headline, html, icon, image, layout, list, map, overlay, panel, popover, quotation, row, section, slider, slideshow, social, subnav, switcher, table, text, totop, video |
Создать элемент можно через создание файла конфигурации element.json
Дочерняя тема
Для добавления своих элементов нужно создать дочернюю тему. Для этого создаем стандартным способом дочернюю тему. В style.css пишем
/* Theme Name: YOOtheme MyTheme Template: yootheme Author: Alex T Description: YOOtheme Child Theme Version: 1.0.0 Text Domain: yootheme-child */
Создаем папку modules, functions.php, config.php
в functions.php пишем:
/**
* Boostrap theme.
*
* @link https://developer.wordpress.org/themes/basics/theme-functions
*/
$app = require get_template_directory() . '/bootstrap.php';
$app->load(__DIR__ . '/{vendor/yootheme/{platform-wordpress,theme{,-analytics,-cookie,-highlight,-settings,-wordpress*},styler,builder{,-source*,-templates,-newsletter,-wordpress*}}/bootstrap.php,config.php}');
в config.php :
$app->load(__DIR__ . '/modules/*/bootstrap.php');
return [];
в mudules копируем example с https://github.com/yootheme/example-element
Должна получиться такая структура (css, js, cache не нужны).
Готово, теперь новый элемент добавлен в билдер.
При внесении изменений в элемент, необходимо очистить кеш в папке основной теме.