Начиная с версии BaseKit 1.0.50, у пользователей появилась возможность самостоятельно создавать кастомные стили вывода элементов блоговой ленты и шорткода “Blogger” с помощью нашего Layouts Builder.

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

Каждый блок может включать в себя картинку (подставляется Featured image текущего поста), заголовок, мета-данные (автор, дата публикации, список категорий, счетчики, шаринг) в любом сочетании и количестве, краткое содержимое (excerpt) или полный текст поста. Также можно выводить содержимое кастомных полей по их названию (например, цена у продуктов, курсов или сервисов и т.п.). Для этого используется специально предназначенный шорткод “Blog item”, который позволяет вставлять в создаваемый блок любые части поста (картинку, заголовок, мета-данные, содержимое, кастомные поля) в любом количестве и сочетании.

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

Картинка поста может служить фоном для остальных элементов, которые могут позиционироваться поверх нее в одно из 9 положений. Для каждого элемента можно задавать цвет фона и текста в обычном и “hover” состоянии, а также анимацию появления и исчезания элемента при наведении/уведении мыши на блок.

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

Картинка может наследовать hover-эффект из темы (если для нее не задавать hover-mask) или иметь свою маску (цвет и прозрачность) в обычном и наведенном состоянии.

Ниже приведены примеры таких кастомных видов вывода шорткода “Blogger”. А в меню “Blog – Custom Blog Styles” они же продемонстрированы при выводе блоговой ленты. Нужно понимать, что это всего лишь несколько примеров. Реальное количество подобных выводов ограничено лишь фантазией пользователя!

Внимание! Ввиду того, что Элементор при выводе блоков пытается их распарсить, то когда обновляется содержимое шорткода “Blogger”, использующего какой-либо лайаут вывода ‘Blog’, возникает внушительная задержка – работает скрипт Элементора. Иногда даже появляется сообщение в браузере, что скрипт замедляет работу!
Поэтому рекомендация для кастомных типов вывода – вставляя шорткод “Blogger” при редактировании страницы в Элементоре сначала настраиваем все его параметры на дефолтном лайауте и в самую последнюю очередь выбираем тип вывода, чтобы не пережидать эту задержку при каждом изменении очередного параметра!