O Bloco de imagens do WordPress is super helpful when inserting and showcasing a single image on your website. But if you want to display multiple photos at once, the Gallery block is the right choice.
Therefore, you must learn how to use the gallery block in WordPress. Once you master the gallery block’s features, you can use it to enhance your website’s visuals, making it more professional and appealing.
Hoje, neste tutorial, discutiremos o bloco de galeria do WordPress, os recursos da barra de ferramentas, as opções de personalização e como usá-lo corretamente. Não deixe de nos acompanhar do início ao fim.
O que é o bloco de galeria do WordPress?
O bloco Galeria do WordPress is a core block in the WordPress block editor. It lets you create and display a collection of images in a grade format. It is perfect for displaying event photos, organizing images into an attractive layout, or presenting images with minimal effort.
Alguns recursos o beneficiam quando você usa o bloco. Confira esses recursos abaixo.
- Personalização: Ajuste as colunas, o espaçamento e as legendas de acordo com seu design. Você também pode definir resoluções diferentes para imagens individuais na galeria.
- Design responsivo: As imagens se adaptam automaticamente a diferentes tamanhos de tela para uma experiência perfeita em celulares, tablets e desktops.
- Integração incorporada: Não há necessidade de plug-ins adicionais; o bloco funciona de forma nativa no WordPress.
- Compatível com SEO: Alt text and captions can improve your content’s accessibility and search engine ranking. You can also set ALT text for separate images within the gallery.
Recursos da barra de ferramentas do Gallery Block
Quando você insere o bloco de galeria, uma barra de ferramentas é exibida na parte superior do bloco de galeria com vários recursos para personalizar sua galeria. Esses recursos estão abaixo.
- Transformar: Você pode transformar esse bloco em um bloco de Imagem, Colunas, Detalhes e Grupo.
- Arrastar: Permite que você arraste e solte o bloco dedicado em qualquer lugar do editor.
- Alça móvel: Permite que você mova seu bloco para cima e para baixo.
- Alinhar: A opção de alinhamento permite que você defina o alinhamento da imagem como None (Nenhum), Wide Width (Largura ampla), Full Width (Largura total), Left (Esquerda), Center (Centro) e Right (Direita).
- Link: Essa opção permite que você adicione links para o conteúdo selecionado dentro do bloco.
- Legenda: Você pode adicionar legendas usando a opção de editor para cada imagem.
- Adicionar: A opção de adição permite que você adicione ou carregue novas imagens na galeria.
- Mais opções: Oferece mais opções relacionadas à seção do bloco, como duplicar, copiar, agrupar, etc.
Como usar o bloco de galeria no WordPress
Using the Gallery block in WordPress is simple. Just follow the below steps:
Etapa 1: Adicionar o Gallery Block no Editor
Abra o post ou a página, clique no ícone "+" para adicionar um bloco e procure por "Gallery". Selecione o bloco Gallery para inseri-lo em seu post ou página.
Etapa 2: Faça upload de suas imagens
Você pode carregar suas imagens ou selecioná-las na biblioteca de mídia.
Como inserir imagens por meio da opção Upload
Para inserir arquivos de imagem, clique no botão de upload, selecione suas imagens usando o cursor enquanto segurando o botão CTRL de seu teclado e clique em abrir. É isso aí. Você poderá ver suas imagens no editor.
Como inserir uma imagem por meio da opção Biblioteca de mídia
Clique no botão Media Library (Biblioteca de mídia), selecione suas imagens e clique no botão Create a new Gallery (Criar uma nova galeria) e Insert Gallery (Inserir galeria) para inserir as imagens no editor.
Depois de inserir todas as imagens na galeria, você poderá ver todos os recursos da barra de ferramentas do bloco de imagens. Você pode conferir esses recursos aqui.
Etapa 3: Personalização da galeria
Para personalizar a galeria, navegue até Configurações (1) > Bloquear (2) > Configurações (3). Você encontrará as opções de seleção de colunas, resolução e outras opções.
- Colunas: As colunas permitem que você determine quantas imagens deseja exibir no editor. Quanto mais imagens você adicionar, mais colunas serão adicionadas ao Gallery. (4)
- Resolução: Você pode definir a resolução da imagem como Thumbnail (Miniatura) e Full Size (Tamanho total). (5)
- Cortar imagens para ajustá-las: Esse recurso mantém a proporção de cada imagem e ajusta seu tamanho.
- Randomize Order (ordem aleatória): Esse recurso não mantém a série, mas exibe imagens em uma série aleatória.
A opção Styles (Estilos) apresenta as seguintes opções.
- Cor: A opção de cor permite que você altere a cor do plano de fundo do bloco do Gallery.
- Dimensões: A opção Dimensions (Dimensões) permite modificar o espaçamento do bloco (espaço entre dois blocos, como imagens), a margem e o preenchimento.
- Borda e raio: Com esse recurso, você pode adicionar uma borda, uma cor de borda e um raio de borda à sua galeria.
Aqui está a demonstração completa da galeria que eu criei.
Create an Interactive Gallery with Galleryberg
While the default Gallery block is excellent for simple grids, it lacks features such as a lightbox, hover effects, and diverse layouts.
If you want a more engaging gallery without writing code, the Galleryberg plugin is a free alternative that extends the block editor with extra tools. It lets you switch between tile, masonry, justified, and square layouts, and adds a built‑in lightbox for zooming and navigation.
Galleryberg also includes subtle hover effects and responsive controls so your galleries feel modern on desktop and mobile.
Now let’s see how to use the Galleryberg plugin.
Etapa 1: Instalar o plug-in Galleryberg
Go to your WordPress dashboard and navigate to Plugins → Add New and search for Galleryberg. Then install and activate the plugin.
Step 2: Insert the Galleryberg Gallery Block
Create a new post/page or edit an existing one. Click the “+” button, search for Galleryberg, and add the block.
Step 3: Add Your Images
Upload new images or select them from the Media Library and click Select.
Etapa 4: Escolha um layout
By default, the block uses a Tiles layout. In the block’s sidebar, you can switch to Alvenaria, Justificadoou Quadrado to better match your design.
Each layout automatically rearranges the images, and you can adjust the columns, spacing, and borders.
Step 5: Enable the lightbox
Toggle Enable Lightbox in the block settings to let visitors click an image and view it in a pop‑up with zoom and slide navigation.
The lightbox includes keyboard and touch controls, so it works smoothly on desktops and phones.
Step 5: Explore hover effects and captions
Use the Caption settings to display text below images or as an overlay that appears on hover. Galleryberg’s hover animations (zoom in/out and overlays) make the gallery feel interactive without distracting the
Etapa 6: Visualizar e publicar
Once satisfied, preview your gallery and publish or update the post. Your gallery will be responsive and performance‑optimised thanks to server‑side rendering.
Why Use Galleryberg Instead of the Core Block?
The core Gallery block offers basic grid layouts but lacks features such as a lightbox, hover animations, and varied layouts. Galleryberg provides four different gallery styles, a responsive lightbox with zoom and keyboard navigation, and intuitive controls for spacing, colors, and captions. It even supports responsive hover effects to add subtle animations. If you need a gallery that encourages visitors to interact with your images and fits seamlessly into the block editor, Galleryberg is a lightweight, user‑friendly solution.
Considerações finais!
O Gallery Block é uma ferramenta avançada com o editor de blocos Gutenberg. Ele permite que você exiba suas coleções de imagens sem nenhum plug-in adicional.
É uma excelente opção para todos por sua flexibilidade, opções de personalização e integração perfeita com o WordPress.
Experimente-o e veja como ele pode transformar a forma como você exibe imagens em seu site.
Diga-me o que achou do tutorial na seção de comentários abaixo. Além disso, informe seus colegas sobre ele por meio de sua plataforma de mídia social.
Leia mais!
