Stackable: плагин, который разблокирует ваши блоки

Вы помните 80-е? Приход новой волны, появление стрижек маллет, успех Синди Лаупер, Майкла Джексона, Мадонны, Принса, Уитни Хьюстон, Дюран Дюран и так далее. В 80-х это также взрыв видеоигр и выпуск игры, в которой мы, многие, были близки к щелчку большого пальца: Tetris.

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

Концепцию можно резюмировать одной строкой: «Тетрис идеально подходит под определение лучшей игры: одна минута, чтобы изучить ее, целая жизнь, чтобы овладеть ею» , как сказал журналист Билл Кункель (он же The Game Doctor).

Утверждение, которое можно применить ко многим программам, таким как WordPress.

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

Готовы к этому новому испытанию? По знаку, собирайся, вперед!

Первоначально написанная в июле 2021 года, эта статья была обновлена ​​в ноябре 2021 года с добавлением бесплатной и премиальной версий Stackable 3.0.5.

Вашим лучшим проектам WordPress нужен лучший хостинг!

WPMarmite рекомендует Bluehost: отличная производительность, отличная поддержка. Все, что нужно для отличного старта.

Попробуйте Блюхост

Что такое штабелируемый?

«Создание нового поколения веб-дизайна». Это миссия Stackable на официальном веб-сайте, где плагин определяет себя как «новый опыт создания страниц для Gutenberg». Не менее!

Надо сказать, что в каталоге WordPress блочный плагин имеет более 40 000 активных установок и хороший рейтинг 4,9 из 5 звезд, сопровождаемый рядом восторженных отзывов.

Если вы уже ищете новые блоки Gutenberg , возможно, вы уже сталкивались с такими плагинами, как Ultimate Addons for Gutenberg, Qubely, Getwid или Coblocks.

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

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

Итак, вы можете подумать, какой смысл устанавливать Stackable? Это просто блоки среди других блоков. Ну, Gutenberg предоставляет много полезных блоков, но с Stackable возможности умножаются.

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

Существует две версии Stackable:

• Бесплатная версия доступна в каталоге WordPress.

• Платная версия доступна на официальном сайте плагина по цене от 49 долларов за использование на одном сайте.

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

Для этого теста мы сосредоточились на версии Premium.

Стекируемые настройки

Чтобы начать настройку Stackable, установите и активируйте плагин. Затем перейдите в «Настройки» > «Стекируемые».

На его интерфейсе у вас будет доступ к следующим настройкам:

• Значки Font Awesome Pro (премиум): для интеграции набора Font Awesome Pro в Stackable.
• Настройки редактора: позволяет управлять некоторыми функциями редактора Stackable. Например, вы можете отключить библиотеку дизайна, установить ширину определенных блоков, закрыть панели редактора, которые вы не используете, и связать столбцы, чтобы они подверглись одинаковым изменениям.
• Менеджер ролей (премиум): чтобы предоставить или заблокировать доступ к редактору блоков для некоторых ролей пользователей и разрешить им только редактировать контент. Примечание: это управление работает со всеми блоками , а не только с включенными в Stackable.
• Пользовательские поля (премиум): эта функция позволяет создавать настраиваемые поля, которые вы можете динамически добавлять к своему контенту из редактора. Для этого перейдите в раздел «Поля» вашего администратора WordPress, нажмите «Добавить новый», определите тип поля (текст, число, дата, время или URL-адрес) и имя.

Затем нажмите «Сохранить поле», введите значение для вашего поля и нажмите «Сохранить изменения», чтобы сохранить его.

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

Выберите «Сайт» в качестве «Динамического источника», затем только что созданное поле (оно появляется в разделе «Настраиваемые настраиваемые поля») и, наконец, нажмите «Применить». Вот и все!

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

• Отзывчивые точки останова: можно изменить ширину экрана, с которого ваш сайт будет просматриваться в режиме планшета или мобильного устройства, и, таким образом, отобразить настройки, которые вы определили для этих устройств.
• Глобальные настройки: доступны две функции для преодоления возможных несовместимостей с темой на вашем сайте. Вы можете войти в селектор области содержимого вашей темы и принудительно использовать шрифты Stackable, чтобы они заменили шрифты вашей темы.

Как и Elementor, Stackable имеет глобальные настройки: цвета и типографику , которые применяются к страницам, созданным с помощью Elementor. Но с помощью Stackable у вас есть возможность определить эти настройки для всех блоков, составляющих ваш сайт .

• Включить и отключить блок: если вам не нужны некоторые блоки, вы можете отключить их , чтобы они не отображались в списке доступных блоков.
• Настройки оптимизации (премиум): позволяет загружать файлы JavaScript и CSS только в постах, содержащих блоки Stackable, а не на всем сайте. Цель этой функции — повысить производительность вашего сайта. Эта функция применяется только к блокам версии 2, поскольку она уже применяется к самым последним блокам плагина (начиная с версии 3).

Как использовать Stackable?

Комплекты и блоки

Stackable используется непосредственно из редактора WordPress. Для этого создайте или откройте страницу или публикацию, затем выберите « Библиотека дизайна» в верхней части публикации.

Библиотека дизайна содержит наборы и категории пользовательского интерфейса. Что это?

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

Категории и наборы пользовательского интерфейса — это два разных способа найти подходящий блок.

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

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

Как интегрировать стекируемый блок в пост

Вы также можете просто щелкнуть значок «+», как если бы вы добавили любой блок, и вы легко узнаете блоки плагинов Stackable, поскольку они украшены фиолетово-оранжевым градиентом.

Нажав кнопку «Просмотреть все», вы можете получить доступ ко всем имеющимся в вашем распоряжении блокам Гутенберга. Блоки Stackable присутствуют в разделах «Текст» и «Внешний вид», и все они сгруппированы в одноименном разделе «Stackable», который также дает доступ к библиотеке дизайна.

Да, все эти пути ведут в Рим к стекируемым блокам, но в первую очередь путь к библиотеке дизайна дает доступ к готовым проектам.

Возьмем, к примеру, этот блок Testimonial с минимальным форматированием, текстом-заполнителем и без примера изображения:

И посмотрите еще один блок Testimonial, добавленный из библиотеки дизайна (блок Prime Testimonial 2 ):

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

Настройка штабелируемого

Чтобы настроить стекируемый блок, перейдите в раздел «блок» в правой части сообщения, где вы найдете множество параметров, разделенных на три категории: « Блок », «Стиль» и « Дополнительно ».

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

Различные параметры настройки сгруппированы на трех вкладках:

• Блок : здесь вы можете настроить расположение различных элементов, составляющих ваш блок, добавить границы и тени, а также изменить фон, расстояние и выравнивание текста.

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

• Стиль : позволяет управлять столбцами и воздействовать на типографику, цвета, кнопки и разделители. Это более неожиданно, но вы также можете добавить заголовок и описание к своему блоку.
• Расширенный : здесь у вас есть доступ к расширенным функциям, таким как HTML-тег, связанный с блоком, и управление реакцией (возможность скрыть блок на компьютере, планшете или мобильном телефоне). Вы можете настроить поля блока и выравнивание содержимого, а также весело провести время, добавляя анимацию или эффекты перехода к своим элементам (но не торопитесь).
  Вишенкой на торте для поклонников CSS является возможность изменять CSS блока непосредственно в этом интерфейсе, рядом с блоком и с предварительным просмотром изменений в режиме реального времени.
  Наконец, условное отображение позволяет вам отображать элемент только тогда, когда выполняется условие, которое вы определили ранее.

Присоединяйтесь к подписчикам WPMarmite

Получите последние сообщения WPMarmite (а также эксклюзивные ресурсы).

ПОДПИШИСЬ СЕЙЧАС

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

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

Еще лучше: вы можете выбрать разные поля для мобильных устройств и планшетов! Таким образом, вы можете легко изменить адаптивный аспект вашего сайта. Для этого сначала нажмите на значок рабочего стола (компьютер), чтобы отобразить значки других устройств.

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

Вот как это выглядит на дне этого аппетитного бургера:

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

Какая адаптация к темам и плагинам?

Адаптация к темам

Согласно официальной документации, «Stackable должен работать с любой темой», если тема вашего сайта оптимизирована для Gutenberg.

Говоря о темах, я упомянул об этом в начале этого поста: есть собственная тема , предназначенная для работы с редактором Gutenberg и плагином Stackable. Он бесплатный и доступен в официальном каталоге WordPress. С ним совместимость гарантирована, короче.

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

Загрузите тему Stackable:

Адаптация к плагинам

Документация Stackable гарантирует, что она совместима с компоновщиком страниц elementor (аффилированная ссылка). Но будьте осторожны, вы не сможете использовать блоки Stackable в редакторе компоновщика страниц.

На самом деле это так же, как и для блоков Гутенберга, вы не можете использовать их в редакторе Elementor, вам нужно сделать выбор: создать свою страницу с помощью Elementor или с помощью редактора WordPress.

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

Создайте свой сайт с Elementor

Легко создавайте внешний вид вашего сайта WordPress с помощью известного конструктора страниц. Попробуйте Элементор

Попробуйте Элементор

Документация и поддержка

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

Вы найдете там:

• Раздел, посвященный началу работы с плагином.
• Раздел устранения неполадок.
• Информация о ценах и лицензиях.
• Целевые направляющие.
• Часто задаваемые вопросы.
• И другие ресурсы.

Вы также можете найти эту документацию в разделе « Настройки» > «Стекируемый», вкладка « Документация ».

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

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

Что касается поддержки, команда Stackable может помочь вам, если вы отправите им свой запрос через контактную форму на вкладке « Связаться с нами » в « Настройки»> «Stackable» или на адрес электронной почты [email protected] .

Каково соотношение цены и качества?

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

Например, для блока Feature в бесплатной версии есть 2 варианта макета (Basic и Plain ) по сравнению с 13 в версии Premium.

В версии Premium также есть более или менее интересные параметры, в зависимости от вашего использования Stackable, такие как интеграция с Font Awesome Pro и диспетчером ролей , а также возможность изменять любой блок в CSS.

Чтобы использовать эту последнюю функцию, перейдите в раздел « Дополнительно », затем « Пользовательский CSS ». Удобно: ваши изменения отображаются в режиме реального времени.

Премиум-версия также дает доступ к годовой поддержке и обновлениям .

Использование Stackable или компоновщика страниц: вот в чем вопрос

Вот и все, мы вместе рассмотрели функции и настройки Stackable. Теперь у вас есть более четкое представление о том, что готовит блочный плагин.

Если вы являетесь поклонником компоновщиков страниц или уже внимательно изучили их, вам может быть интересно: зачем использовать Stackable вместо компоновщика страниц?

Потому что варианты, предлагаемые, например, Stackable и бесплатной версией Elementor, сопоставимы. И по уважительной причине Stackable подходит к дизайну с помощью компоновщика страниц , как заявлено на его официальном сайте: «Имейте уверенность, чтобы легко создавать самые быстрые веб-сайты, используя новый опыт создания страниц для Gutenberg» .

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

С другой стороны, профессиональная версия Elementor предлагает гораздо более продвинутые виджеты и функции. Поскольку оба плагина стоят одинаково для использования на одном сайте (49 долларов США), мы предлагаем вам вместо этого обратиться к бегемоту конструкторов страниц.

Наше окончательное мнение о Stackable

В целом, можно сказать, что Stackable — довольно интуитивно понятный плагин с современным и эстетичным дизайном.

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

Однако следует ли вам использовать его или перейти непосредственно к более продвинутому компоновщику страниц, такому как Elementor?

Действительно, с помощью Stackable мы приближаемся к опыту проектирования конструктора страниц непосредственно в редакторе WordPress. Можно сказать, что это начало конечной цели Project Gutenberg, которая заключается в том, чтобы стать настоящим «конструктором сайтов».

Однако мы еще не там. На данный момент Stackable поможет вам создавать сообщения так же, как и бесплатная версия Elementor, без какого-либо управления шаблонами (Stackable позволяет загружать готовые дизайны, но не сохранять собственные).

Если вам нравится работать с редактором WordPress и блоков, предоставляемых Stackable, достаточно для вашего проекта, дерзайте! Использование Elementor не потребуется.

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

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

Если вас интересует Pro-версия Stackable, не стесняйтесь просмотреть доступную демо-версию и просмотреть бесплатную версию, чтобы убедиться, что блоки и параметры вам нравятся.

Загрузите подключаемый модуль Stackable:

А ты, уже пользовался? Эта статья вызвала у вас желание ее использовать? Поделитесь своими мыслями в комментариях.