Empilhável: o plugin que desbloqueia seus blocos

Você se lembra dos anos 80? A chegada da nova onda, o advento dos cortes de cabelo mullet, o sucesso de Cyndi Lauper, Michael Jackson, Madonna, Prince, Whitney Houston, Duran Duran e assim por diante. Nos anos 80, é também a explosão do videogame e o lançamento de um jogo em que somos numerosos por ter estado perto do estalar do polegar: Tetris.

Este jogo, com o seu princípio simples, consistia em empilhar blocos de diferentes formas otimizando o espaço disponível.

O conceito pode ser resumido em uma linha: “Tetris se encaixa perfeitamente na definição do melhor jogo: um minuto para aprender, uma vida inteira para dominá-lo” , como disse o jornalista Bill Kunkel (também conhecido como The Game Doctor).

Uma declaração que pode ser aplicada a muitos programas, como o WordPress.

Falando em WordPress, se eu menciono Tetris, é porque o plugin que vou dissecar hoje se chama Stackable. E por uma boa razão, este plugin adiciona novos blocos Gutenberg para serem aninhados em seu site WordPress .

Pronto para este novo teste? Em sua marca, prepare-se, vá!

Originalmente escrito em julho de 2021, este artigo foi atualizado em novembro de 2021 com as versões 3.0.5 gratuita e premium do Stackable.

Seus melhores projetos WordPress precisam do melhor host!

O WPMarmite recomenda Bluehost: ótimo desempenho, ótimo suporte. Tudo o que você precisa para um ótimo começo.

Experimente o Bluehost

O que é empilhável?

“Fornecendo a próxima geração de web design”. Esta é a missão do Stackable em seu site oficial, onde o plugin se define como uma “nova experiência de construção de página para Gutenberg”. Não menos!

Deve-se dizer que no diretório do WordPress, o plugin de bloqueio tem mais de 40.000 instalações ativas e uma boa classificação de 4,9 de 5 estrelas, acompanhada por uma série de elogios.

Se você já está procurando por novos blocos Gutenberg , talvez já tenha encontrado plugins como Ultimate Addons for Gutenberg, Qubely, Getwid ou Coblocks.

Falamos sobre eles em nosso artigo sobre addons para aumentar os poderes de Gutenberg. A sua missão é simples: diversificar a gama de blocos Gutenberg disponíveis no editor de conteúdos.

Stackable também é um plugin desenvolvido para Gutenberg, ao qual traz uma infinidade de blocos, desde os grandes clássicos (cabeçalho, galeria, call to action) até os mais exóticos (cotações, tabelas de preços, cronômetro, depoimentos, etc.).
Esses blocos estão prontos para uso e personalizáveis.

Então, você pode pensar, qual é o objetivo de instalar o Stackable? São apenas blocos entre outros blocos. Bem, Gutenberg fornece muitos blocos úteis, mas com Stackable, as possibilidades são multiplicadas.

Além disso, você tem acesso a recursos de personalização mais avançados do que os oferecidos nativamente com Gutenberg, como: ajustar o layout dos elementos dentro dos blocos, espaçamento, alterar o plano de fundo, adicionar efeitos de foco, etc.

Existem duas versões do Empilhável:

• Uma versão gratuita está disponível no diretório WordPress.

• Uma versão paga está disponível no site oficial do plugin, a partir de $ 49 para uso em um site.

Como você pode imaginar, o segundo dá acesso a mais blocos e permite personalizá-los com mais precisão.

Para este teste, focamos na versão Premium.

Configurações empilháveis

Para começar a configurar o Stackable, instale e ative o plugin. Em seguida, vá para Configurações> Empilhável.

Em sua interface, você terá acesso às seguintes configurações:

• Font Awesome icons Pro (premium): para integrar um kit Font Awesome Pro ao Stackable.
• Configurações do Editor: permite controlar certos recursos do editor do Stackable. Por exemplo, você pode desabilitar a Design Library, definir a largura de determinados blocos, fechar painéis do editor que você não está usando e vincular colunas para que sofram as mesmas alterações.
• Gerenciador de funções (premium): para dar ou bloquear acesso ao editor de blocos para algumas funções de usuário e permitir que editem apenas o conteúdo. Nota: esta gestão funciona em todos os blocos , não apenas nos incluídos no Stackable.
• Campos personalizados (premium): esse recurso permite criar campos personalizados que você pode adicionar dinamicamente ao seu conteúdo a partir do editor. Para isso, vá para a seção Campos da sua administração WordPress, clique em “Adicionar novo”, defina um tipo de campo (Texto, Número, Data, Hora ou URL) e um nome.

Em seguida, clique em “Salvar campo”, insira um valor para o seu campo e clique em “Salvar alterações” para salvá-lo.

Para integrá-lo ao seu conteúdo, posicione o cursor onde deseja que apareça o valor do seu campo e clique no ícone do banco de dados (corresponde a Campos Dinâmicos).

Selecione “Site” como “Fonte Dinâmica”, depois seu campo recém-criado (aparece em “Campos Personalizados Empilháveis”) e, finalmente, clique em “Aplicar”. É isso!

Isso é muito bom, mas por que fizemos tudo isso? Graças à magia do conteúdo dinâmico, assim que eu o atualizo, meu endereço de e-mail será atualizado automaticamente em todos os locais do meu site onde o campo personalizado estiver integrado.

• Pontos de interrupção responsivos: é possível alterar a largura da tela a partir da qual seu site será visualizado no modo Tablet ou Celular e, assim, exibir as configurações que você definiu para esses dispositivos.
• Configurações globais: dois recursos estão disponíveis para superar possíveis incompatibilidades com o tema em vigor em seu site. Você pode entrar no seletor da área de conteúdo do seu tema e forçar o uso das fontes do Stackable para que elas assumam as do seu tema.

Assim como o Elementor, o Stackable possui configurações globais: as cores e a tipografia que se aplicam às páginas criadas com o Elementor. Mas com Stackable, você tem a possibilidade de definir essas configurações para todos os blocos que compõem seu site .

• Habilitar e desabilitar o bloco: se você não precisa de alguns blocos, você pode desabilitá-los para que eles não apareçam na lista de blocos disponíveis.
• Configurações de otimização (premium): permite carregar arquivos JavaScript e CSS apenas em postagens contendo blocos empilháveis ​​em vez de em todo o site. O objetivo deste recurso é melhorar o desempenho do seu site. Esse recurso se aplica apenas aos blocos da versão 2 porque já se aplica aos blocos mais recentes do plugin (da versão 3).

Como usar Empilhável?

kits e blocos

Empilhável é usado diretamente do editor do WordPress. Para fazer isso, crie ou abra uma página ou postagem e selecione Biblioteca de Design na parte superior da postagem.

A Biblioteca de Design contém kits e categorias de interface do usuário. O que é isso?

Na verdade, essas duas seções contêm os mesmos elementos, mas categorizados de forma diferente. Os UI Kits reúnem os blocos disponibilizados pelo guia de estilo e as Categorias os agrupam por tipo de bloco: cabeçalho, depoimento, call to action, etc., que podem ser encontrados em todos os guias de estilo disponíveis.

Categorias e kits de interface do usuário são duas maneiras diferentes de encontrar o bloco certo para você.

Cada bloco vem com um design pronto para usar e personalizável. Veremos como personalizá-los na próxima parte.

Para encontrar o bloco que você precisa, você também pode usar a barra de pesquisa à sua disposição. Os quatro ícones no canto superior direito da janela permitem que você atualize os resultados da pesquisa e altere o tamanho das miniaturas para obter uma visão mais precisa ou maior dos diferentes blocos.

Como integrar um bloco empilhável em um post

Você também pode simplesmente clicar no ícone “+” como faria para adicionar qualquer bloco, e você reconhecerá facilmente os blocos de plug-in empilháveis, pois eles são adornados com um gradiente laranja-púrpura.

Ao clicar no botão “Browse All”, você pode acessar todos os blocos Gutenberg à sua disposição. Os blocos Empilháveis estão presentes nas seções “Texto” e “Aparência”, e estão todos agrupados na seção homônima “Empilhável”, que também dá acesso à Biblioteca de Design.

Todos esses caminhos levam a Roma para os blocos empilháveis, sim, mas é principalmente o caminho da Biblioteca de Projetos que dá acesso aos projetos pré-construídos.

Veja este bloco Testemunho, por exemplo, que tem formatação mínima, texto de preenchimento e nenhuma imagem de exemplo:

E veja outro bloco Testimonial, adicionado da Design Library (o bloco Prime Testimonial 2 ):

Depois de encontrar o ajuste perfeito, clique no item desejado para incorporá-lo diretamente à sua postagem. Você pode então reorganizar o elemento na página, como qualquer bloco Gutenberg, e personalizá-lo.

Personalizando Empilhável

Para personalizar um bloco empilhável, vá até a seção “bloco” do lado direito do seu post, onde você encontrará várias opções, classificadas em três categorias: Bloco , Estilo e Avançado .

Encontrar o que você está interessado pode ser tedioso porque há muito por onde escolher, mas você também pode encontrá-lo simplesmente clicando duas vezes no elemento do bloco que deseja alterar. Você será levado para as configurações desse bloco em um clique.

As diferentes opções de personalização estão agrupadas em três abas:

• Bloco : é onde você pode personalizar o layout dos diferentes elementos que compõem seu bloco, adicionar bordas e sombras e atuar no fundo, espaçamento e alinhamento do texto.

Você também pode ajustar o espaçamento entre os elementos em seus blocos passando o mouse sobre eles e usando as alças na parte inferior do elemento. Você pode até ver o número de pixels separando-o de seu vizinho. Muito útil!

• Estilo : permite gerenciar as colunas e atuar na tipografia, cores, botões e separadores. É mais inesperado, mas você também pode adicionar um título e uma descrição ao seu bloco.
• Avançado : aqui você tem acesso a recursos avançados como a tag HTML associada ao bloco e o gerenciamento do responsivo (possibilidade de ocultar o bloco no computador, tablet ou celular). Você pode ajustar as margens do bloco e o alinhamento do conteúdo, mas também se divertir adicionando efeitos de animação ou transição aos seus elementos (no entanto, vá com calma).
  A cereja do bolo para os aficionados de CSS é a possibilidade de modificar o CSS do bloco diretamente nesta interface, ao lado do bloco, e com uma prévia das mudanças em tempo real.
  Por fim, a exibição condicional permite exibir um elemento somente quando uma condição definida anteriormente for atendida.

Junte-se aos assinantes do WPMarmite

Obtenha os últimos posts do WPMarmite (e também recursos exclusivos).

INSCREVA-SE AGORA

Se você não estiver completamente satisfeito com o design de um bloco, você tem a possibilidade de modificar muitos parâmetros para ajustá-lo ao seu gosto.

Por exemplo, gostei de poder adicionar facilmente efeitos ao foco dos elementos ou do elemento pai (aplicar um plano de fundo ao bloco pai para aproveitar esse último recurso) ou modificar facilmente as margens de cada elemento do bloco .

Melhor ainda: você pode escolher margens diferentes no celular e no tablet! Assim, você pode alterar facilmente o aspecto responsivo do seu site. Para fazer isso, primeiro clique no ícone da área de trabalho (computador) para exibir os ícones de outros dispositivos.

Outra boa opção é adicionar separadores na parte superior ou inferior de um elemento, como no Elementor. É claro que você pode ajustar a aparência desses separadores e até adicionar uma ou duas camadas mais leves na versão Premium.

Isto é o que parece na parte inferior deste hambúrguer apetitoso:

Quando você passa o mouse sobre o nome, algumas configurações ficam roxas e seu cursor se transforma em um ponto de interrogação. Se você não sabe o que são, clique para ver uma animação que vai te ajudar a entender para que servem. Bastante útil para encontrar o caminho em torno de todas essas opções.

Que adaptação a temas e plugins?

Adaptação a temas

De acordo com a documentação oficial, “Stackable deve funcionar com qualquer tema”, desde que o tema que você tenha em seu site seja otimizado para Gutenberg.

Falando em temas, mencionei no início deste post: existe um tema interno , projetado para funcionar com o editor Gutenberg e o plugin Stackable. É gratuito e está disponível no diretório oficial do WordPress. Com ele, a compatibilidade é garantida, em suma.

Está nas cores do plugin de mesmo nome, então espero que você não se importe com o rosa doce.

Baixe o tema empilhável:

Adaptação a plugins

A documentação empilhável garante que seja compatível com o construtor de páginas elementor (link aff). Mas cuidado, você não poderá usar blocos empilháveis ​​no editor do construtor de páginas.

Na verdade, é da mesma forma que para os blocos Gutenberg, você não pode usá-los no editor Elementor, você tem que fazer uma escolha: construir sua página com o Elementor ou com o editor WordPress.

O site oficial do Stackable também afirma que seus blocos são compatíveis com qualquer plugin , então você pode usá-los com outras bibliotecas de blocos sem nenhum problema.

Construa seu site com Elementor

Projete facilmente a aparência do seu site WordPress com o famoso construtor de páginas. Experimente o Elementor

Experimente o Elementor

Documentação e suporte

Caso você tenha alguma dificuldade ao usar o Stackable, você pode consultar a documentação oficial a qualquer momento.

Você vai encontrar lá:

• Uma seção dedicada a começar com o plugin.
• Uma seção de solução de problemas.
• Detalhes de preços e licenças.
• Guias direcionados.
• Um FAQ.
• E outros recursos.

Você também pode encontrar esta documentação em Configurações > Empilhável, guia Documentação .

Em caso de falhas técnicas, a equipe responsável pelo plugin fornece aos usuários uma lista de problemas encontrados com frequência, bem como soluções para corrigi-los.

Se você ainda estiver preso, ligue para o suporte do Stackable ou participe do grupo do Facebook para obter respostas às suas perguntas.

Em relação ao suporte, a equipe Stackable pode ajudá-lo se você enviar sua solicitação por meio do formulário de contato na guia Fale Conosco em Configurações > Empilhável ou para o endereço de e-mail [email protected] .

Qual é o valor para o dinheiro?

A versão premium é naturalmente mais generosa na variedade de blocos oferecidos. As opções de personalização também são mais numerosas.

Para o bloco Feature , por exemplo, há 2 opções de layout na versão gratuita (Basic e Plain ), contra 13 na versão Premium.

Na versão Premium, também existem parâmetros mais ou menos interessantes, dependendo do uso do Stackable, como a integração com Font Awesome Pro e o Role Manager , bem como a possibilidade de modificar qualquer bloco em CSS.

Para usar este último recurso, vá para a seção Avançado , depois CSS personalizado . Conveniente: suas alterações são exibidas em tempo real.

A versão Premium também dá acesso a um ano de suporte e atualizações .

Usando Stackable ou um construtor de páginas: eis a questão

É isso, analisamos os recursos e configurações do Stackable juntos. Agora você tem uma ideia mais clara do que o plug-in de bloco reserva.

Se você é fã de construtores de páginas, ou já deu uma olhada neles de perto, pode estar se perguntando: por que usar Stackable em vez de um construtor de páginas?

Porque as opções oferecidas pelo Stackable e a versão gratuita do Elementor, por exemplo, são comparáveis. E por uma boa razão, o Stackable aborda uma experiência de design com um construtor de páginas , conforme afirmado em seu site oficial: “Tenha a confiança para criar facilmente os sites mais rápidos usando uma nova experiência de criação de páginas para Gutenberg” .

E com a chegada do Full Site Editing, que permitirá atuar em todos os elementos da interface do site (e não apenas no conteúdo dos posts), o Stackable poderá se aproximar ainda mais. Dito isso, o Stackable tem a vantagem de ser usado diretamente no editor de conteúdo do WordPress , o que simplifica a experiência de design em comparação com os construtores de páginas atuais.

Por outro lado, a versão pro do Elementor oferece widgets e recursos muito mais avançados. Como ambos os plugins custam o mesmo para um uso em um único site (US $ 49), sugerimos que você recorra ao gigante dos construtores de páginas.

Nossa opinião final sobre Stackable

Em suma, podemos dizer que Stackable é um plugin bastante intuitivo que oferece designs modernos e estéticos.

Stackable é para qualquer criador de site que queira ter blocos mais avançados para personalizar o design do seu site , sem precisar mexer em nenhuma linha de código (mas tendo a possibilidade, se dominar o CSS, colocar os blocos ao seu gosto).

No entanto, você deve usá-lo ou ir diretamente para um construtor de páginas mais avançado como o Elementor?

De fato, com o Stackable estamos nos aproximando de uma experiência de design de um construtor de páginas diretamente no editor do WordPress. Pode-se dizer que este é o início do objetivo final do Projeto Gutenberg, que é se tornar um verdadeiro “construtor de sites”.

No entanto, ainda não estamos lá. Por enquanto, o Stackable ajudará você a criar postagens da mesma maneira que a versão gratuita do Elementor, sem nenhum gerenciamento de modelos (o Stackable permite carregar designs pré-fabricados, mas não salvar os seus).

Se você gosta de trabalhar com o editor WordPress e os blocos fornecidos pelo Stackable são suficientes para o seu projeto, vá em frente! O uso do Elementor não será necessário.

No entanto, se você precisar de recursos mais avançados ou precisar projetar um site do zero (ou seja, personalizar todos os modelos de página), o Elementor (link aff) ou um de seus concorrentes será indispensável.

E se você é um dos usuários que já foi seduzido pelo Elementor, Stackable pode não ser um grande sucesso. Afinal, você tem seus próprios hábitos, então não há motivo real para mudá-los.

Se você está interessado na versão Pro do Stackable, não hesite em ver a demo disponível e navegar na versão gratuita, para garantir que os blocos e opções sejam do seu agrado.

Baixe o plug-in empilhável:

E você, já usou? Este artigo fez você querer usá-lo? Compartilhe seus pensamentos nos comentários.