A coleção de blocos para Gutenberg Getwid foi desenvolvida pela MotoPress, uma empresa relativamente grande de desenvolvimento de temas e plugins. Eles dizem que há mais de 40 blocos, mas na minha instalação “só” aparecem 38. Há um tema com o mesmo nome feito para ser usado com a coleção, mas falaremos sobre ele no fim do artigo.
Vamos começar vendo as opções do plugin, que ficam nas configurações de escrita do painel WordPress. É lá que você faz a conexão com serviços como Google Maps e Instagram, através de chaves de API e tokens. Também é possível desativar os blocos que quiser para facilitar na edição das páginas. Fiquei curiosa: será que isso teria algum impacto positivo na velocidade do site? Deixe sua opinião nos comentários!
Agora, seguem resumos sobre todos os blocos da coleção, separados nas categorias:
- versões diferentes de blocos do Gutenberg: seção, título avançado, banner (cobertura), ícones sociais, grupos de botões, posts recentes, espaçador avançado, vídeo pop-up, âncora, sumário/índice, tabela avançada e galeria empilhada.
- combinações de outros blocos: caixa de imagem, pessoa, depoimento, caixa de preços e lista de preços
- blocos que precisariam de plugins próprios: acordeão, abas, barra de progresso (e barra de progresso circular), contador, contagem regressiva, Google Maps, ícone (e caixa com ícone), instagram, sliders de imagem e de mídia e texto, slider de posts e carrossel de posts, posts customizados, linha do tempo de conteúdo e meu preferido, image hotspot.
Versões diferentes de blocos do Gutenberg
Seção (Section)
Normalmente, os blocos “Seção” são comparáveis às “Colunas” do Gutenberg, mas esse parece mais com um grupo de blocos (entenda a diferença). À medida que você adiciona blocos nele, um vai embaixo do outro. Você consegue personalizar de mil maneiras, incluindo colocar um fundo com imagem e sobrepor uma cor.
Banner
Equivale ao bloco “cobertura”, sem a vantagem de deixar o fundo fixo (criando o efeito “parallax”). Em compensação, tem as opções de animação hover (quando o mouse passa em cima) que vêm com o tema. Além disso, o próprio texto pode ser animado – mas o título não, o que não faz sentido (na minha opinião).
Título avançado (Advanced heading)
É avançado mesmo: Você consegue usar fontes do Google diretamente das configurações de blocos e personalizar completamente o texto e o espaçamento. O mais interessante é que com um clique você consegue transformar entre maiúsculas e minúsculas, como no Word. Tudo isso é feito com CSS sem você precisar adicionar.
Ícones sociais (Social links)
Mais personalizáveis do que os ícones sociais do Gutenberg em cores, tamanho e espaçamento.
Grupo de botões (Button group)
Agora que os botões do Gutenberg permitem alinhamentos diferentes, não vejo vantagens em relação ao bloco “botões” do Gutenberg.
Posts recentes (recent posts)
Igual ao bloco Posts Recentes do Gutenberg. A graça está nos blocos Post Slider, Post Carousel e Custom Post Type, que ficaram na categoria “blocos de page builder”.
Espaçador avançado (Advanced spacer)
Esse ganhou o “avançado” porque não é padrão para todos os tamanhos de dispositivo. Você pode esconder em tablets e celulares. De resto, é igual ao espaçador do Gutenberg.
Video popup
O bloco da Getwid é bastante diferente do bloco “Vídeos” do Gutenberg porque vai além de vídeos que você subiu para seu próprio servidor. Você pode puxar vídeos do YouTube ou do Vimeo, que são blocos de conteúdo incorporado. Além disso, em vez de o vídeo simplesmente tocar, ele abre maior, ocultando a tela (pop-up). É necessário colocar uma imagem de capa. Tudo é personalizável: botão de play, capa, cores e tamanho dos blocos.
Âncora (Anchor)
Âncora, como explico nesse artigo, é um pedaço da página marcado para links permitindo que você pule diretamente para aquele trecho. Parece besteira criar um bloco para algo que você pode fazer sem esforço em qualquer bloco, mas na minha opinião é uma ideia inteligente. Embora nada apareça no front-end (a página de verdade), há um ícone de âncora no Gutenberg para você saber que haverá um link ali. Também resolve o problema das âncoras de normalmente “colar” o trecho no topo da página, dificultando a visualização.
Sumário / índice (Table of contents)
Você pode criar uma lista de links com âncoras, como ensino a fazer no artigo sobre page jumps (o link está na seção acima). Mas a Getwid já cria as âncoras nos títulos por conta própria e cria uma lista com hierarquia (caso exista).
Tabela avançada (Table)
A maior vantagem da tabela da Getwid em relação à tabela do Gutenberg, na minha opinião, é poder trocar a cor de fundo. Também vem com uma legenda.
Galeria empilhada (Image Stack Gallery)
Ao contrário da galeria do WordPress, essa oferece várias maneiras de expor as imagens. Porém, dependendo do layout só agrupa até três arquivos. Muito bom para decorar a página sem precisar pensar muito.
Blocos de combinação da coleção Getwid
Caixa de imagem (Image box)
Uma imagem já com campos para título e descrição, que vêm com alinhamento central mas podem ficar lado a lado. Gostei muito desse bloco da Getwid que a ordem pode ser invertida em celular, algo de que sinto falta no Gutenberg. O principal efeito está nas animações quando o mouse passa em cima (hover), mas ele também é bem prático na alteração de margens e tamanhos.
Pessoa (Person)
Simples e com bom gosto, o bloco “Pessoa” reúne uma imagem com espaço para nome, cargo (subtítulo) e uma breve descrição, seguido de redes sociais na cor do tema. Não respondeu bem à mudança do tamanho da imagem, então recomendo já colocar uma foto do tamanho exato.
Depoimento (Testimonial)
Também simples, o bloco depoimento coloca a foto pequena e redonda, sem opções de personalização, embaixo da citação. Há espaço para nome e cargo (subtítulo).
Caixa de preço (Price Box)
Acredito que esse é um dos blocos que a Getwid fez melhor que a concorrência. Cada campo é simples e fácil de preencher: nome do produto, moeda usada, valor e periodicidade (por exemplo, “mensal” ou “anual”), além da descrição e um botão.
Lista de preços (Price list)
A diferença entre esse bloco e a “caixa de preço” é que a “lista de preços” tem espaço para uma imagem. Além da imagem, é só uma entrada com nome, descrição, preço e opção de um separador. Eu esperava que você o bloco fosse um conjunto de itens, permitindo adicionar outros produtos. Porém, ao contrário de outras coleções (como a CoBlocks), cada “lista de itens” é apenas um item de lista.
Blocos de page builder (que não estão no Gutenberg)
Acordeão (Accordion) e Toggle
Esses “gêmeos” têm a mesma função: colocar perguntas e respostas ocupando menos espaço na página. A diferença entre eles é que o acordeão só deixa abrir uma resposta por vez, enquanto o toggle deixa todas as perguntas ficarem abertas. Em outras coleções de blocos, são um bloco só com a opção de fazer isso.
Abas (Tabs)
Prima do acordeão e o toggle, ela faz o mesmo, porém com botões para trocar de questão. O diferencial desse bloco na Getwid é a opção “vertical” que coloca os botões ao lado, em vez do topo. Minha parte preferida é na usabilidade: adicionar uma opção antes ou depois, além de duplicar itens, facilita muito.
Barra de progresso (Progress bar) e barra de progresso circular (Circular progress bar)
Em ambas, você define um percentual e pode colocar uma animação enquanto os números crescem até chegar a esse valor. Interessante para mostrar resultados ou até qualificações. Senti falta de escolher a espessura da barra simples e de esconder o valor nas duas, o que daria um ar de ilustração ao bloco.
Contador (Counter)
Outro bloco interessante para mostrar resultados, nesse você coloca dois valores para uma animação percorrer. A melhor parte é a opção “smooth scroll”, que deixa a animação mais lenta perto do fim.
Contagem regressiva (Countdown)
É só marcar a data e o horário, escolher as unidades de tempo (semanas, dias, horas) e pronto!
Google Maps
Se você já leu artigos sobre as outras coleções de blocos, já sabe: esse bloco adiciona uma localização do Google Maps à sua página. Mesmo se você não tiver uma chave de API do Google, o mapa funciona mesmo assim. Caso tenha, pode atualizar todos os mapas do site de uma vez só.
O Google Maps disponibiliza chaves de API (que muitas coleções e plugins pedem) com um crédito mensal de US$200. O crédito é gasto à medida que pessoas acessam e clicam no seu mapa, pelo que entendi. Para chegar a esse valor, é preciso ser uma empresa muito grande. Mesmo sem sua empresa ter perspectiva de passar de US$200, o Google só deixa abrir a conta para pegar a chave de API se você der alguma forma de cobrança – como um cartão de crédito.
Ícone (Icon) e Caixa com ícone (Icon box)
São quase 200 opções de ícones para você escolher e inserir em combinações de blocos. Assim como os ícones sociais, podem ter fundo colorido ou contorno de um círculo em volta. A combinação de cores do ícone e fundo são livres. A caixa com ícone tem campos de título e texto para acompanhar, com diferentes opções de alinhamento.
Se você conectar à sua conta de Instagram, ele cria um token para exibir seu feed ali. Não há um cabeçalho nem botões para carregar mais ou seguir, como normalmente há em plugins com essa função.
Slider de imagens
Tem as principais funções de um plugin de slider: opção de adicionar um link personalizado e animação “fade” (desaparecer suavemente) além da clássica deslizar. Pode-se escolher entre setas, bolinhas ou nada para trocar de slide. Gostei das alternativas de variar a largura, mas só no “center mode”, porque permite a visualização de imagens com proporções diferentes.
Slider de mídia e texto
É como um slider do bloco “cobertura” no Gutenberg (ou “image box” nessa coleção”). Pensando em acessibilidade, é uma opção melhor do que o slider de imagens caso haja texto nos slides e você não fizer questão de uma fonte tipográfica específica. Por outro lado, não permite adicionar links aos slides. Mas isso faz sentido por causa do bloco slider de posts.
Slider de posts e carrossel de posts
Ambos servem para páginas e artigos, mas não para posts customizados. O filtro dos itens tem opções de nível avançado, chegando a ser tão específicos quanto incluir ou excluir com base na ID da página ou do post. ID, assim como nossos CPFs, são números atribuídos a toda página ou post que do site. É por isso que podemos trocar os títulos, ou ter títulos repetidos (o que é péssimo para SEO) sem “confundir” o servidor.
O interessante dos filtros é que você pode estabelecer vários critérios e definir se o item precisa obedecer a todos os critérios ou apenas a alguns. Dessa forma, pode pegar apenas alguns posts de uma categoria, ou de categorias diferentes, por exemplo.
Posts customizados (Custom Post Type)
Não é para você criar um post customizado, é para exibir os posts customizados em grade ou lista. Tem o mesmo sistema para filtrar que o slider e carrossel de posts.
Linha do tempo de conteúdo (Content Timeline)
Com visual clean, esse bloco tem muita personalização de cor e espaçamento, além de animações. Gostei que ele permite adicionar uma imagem aos itens e não força o marcador temporal a uma medida específica como anos ou um dia específico.
Image hotspot – o melhor da Getwid
Adiciona, sobre imagens, marcadores animados que abrem um balão com explicação quando seu visitante abre a página.
Tema Getwid
O tema é o que promete: uma base relativamente flexível para a coleção de blocos. Além das opções de cores que você encontra no “Personalizar” da maioria dos temas – cabeçalho, fundo, primária, secundária, títulos e textos – você já escolhe as seis cores que ficarão nas configurações de bloco.
Ele vem por padrão com uma barrinha de busca no cabeçalho e permite que você ajuste os quatro widgets do rodapé de várias maneiras diferentes, o que é minha parte preferida. Se você gostar do que ver na demo (demonstração) do tema, ele já sugere um plugin que importa uma página de exemplo para cada bloco com explicações (infelizmente, em inglês) e exemplos.
E aí, você vai testar essa coleção? Deixe suas opiniões nos comentários! Você pode compartilhar esse artigo, ou o vídeo correspondente a ele no canal do WordPress sem Código:
