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.

1. 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.
2. Design responsivo: As imagens se adaptam automaticamente a diferentes tamanhos de tela para uma experiência perfeita em celulares, tablets e desktops.
3. Integração incorporada: Não há necessidade de plug-ins adicionais; o bloco funciona de forma nativa no WordPress.
4. 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.

1. Transformar: Você pode transformar esse bloco em um bloco de Imagem, Colunas, Detalhes e Grupo.
2. Arrastar: Permite que você arraste e solte o bloco dedicado em qualquer lugar do editor.
3. Alça móvel:  Permite que você mova seu bloco para cima e para baixo.
4. 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).
5. Link: Essa opção permite que você adicione links para o conteúdo selecionado dentro do bloco.
6. Legenda: Você pode adicionar legendas usando a opção de editor para cada imagem.
7. Adicionar: A opção de adição permite que você adicione ou carregue novas imagens na galeria.
8. 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.

1. Cor: A opção de cor permite que você altere a cor do plano de fundo do bloco do Gallery.
2. 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.
3. 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!

Como usar o bloco de imagens no WordPress em 3 etapas fáceis
Como usar o bloco pré-formatado no WordPress em 3 etapas fáceis
Como usar o editor de blocos do WordPress (um guia para iniciantes)
7 melhores alternativas ao wpDataTables em 2024 (comparadas)
Melhores plug-ins do WordPress para sites e portais de notícias (2024)

<p>The post How to Use the Gallery Block in WordPress in 3 Easy Steps first appeared on Tableberg.</p>

Por isso, os web designers e criadores de conteúdo precisam dedicar muito tempo ao layout do site, aos ícones, às cores, às formas, à tipografia etc. Atualmente, há vários plug-ins on-line com os quais você pode apresentar o conteúdo da Web de forma visualmente atraente.

Esta postagem discutirá alguns dos melhores plug-ins de conteúdo do WordPress para aumentar o engajamento e o apelo visual. Dê uma olhada rápida neles na tabela abaixo.

Vamos discuti-las agora. 

1. Blocos definitivos

O Ultimate Blocks é um excelente plugin de blocos do Gutenberg para criar conteúdo impressionante em seu site. Ele tem mais de 25 blocos personalizados. Os mais populares são o controle deslizante de imagem, classificação, avaliação, linha do tempo, conteúdo com guias, caixa estilizada, depoimento, contagem regressiva, botão, chamada para ação, cupom e filtro de conteúdo.

Você pode usá-los nas postagens e páginas do seu blog. Cada bloco é altamente personalizável. Basta acessar a guia Settings and Styles (Configurações e estilos) na barra lateral direita. Você verá enormes opções de personalização. Você nunca ficará sobrecarregado, pois essas opções de personalização oferecem o layout nativo do WordPress.

Além disso, todos os blocos desse plug-in são compatíveis com dispositivos móveis. Eles automaticamente tornam seu conteúdo responsivo a dispositivos móveis sem a necessidade de seu toque. No entanto, você pode adicionar pontos de interrupção, se necessário. Por fim, o Ultimate Blocks é leve, permitindo que seu site seja carregado rapidamente.

Principais recursos do Ultimate Blocks:

• Fácil de instalar e configurar
• Inclui uma biblioteca de ícones integrada
• Tem um esquema no bloco Revisão
• Cada bloco abrange opções de personalização robustas
• Fornece um painel de controle minimalista no back-end
• Funciona perfeitamente com o WooCommerce e muitos plug-ins populares
• Oferece uma versão gratuita juntamente com a versão premium

2. Rank Math SEO

Sem SEO, você não pode alcançar organicamente seu conteúdo para muitos públicos. O Rank Math é um plugin de SEO bem conhecido no setor de WordPress. Esse plugin mostra em tempo real o quanto você conseguiu otimizar seu conteúdo para obter um desempenho de SEO de alto nível com vários indicadores.

Ele inclui pontuação de otimização de palavras-chave, legibilidade, recomendações de links internos/externos, etc. O Rank Math oferece suporte a rich snippets. Você pode adicionar marcações de esquema às suas páginas para melhorar as taxas de cliques.

O Rank Math SEO oferece um monitor 404 que detecta links quebrados e os redireciona adequadamente. Além disso, o plug-in se integra a vários consoles de pesquisa para mostrar o desempenho do seu conteúdo no painel do WordPress.

Principais recursos do Rank Math:

• Assistente de configuração simples
• Gerenciador de redirecionamento
• Oferece suporte ao gerenciamento de SEO local
• Gera um mapa do site em XML
• Suporte a SEO do WooCommerce
• Gerenciador de funções para permissões de usuário
• Conecte seu site a seis consoles de pesquisa populares

3. Tableberg

A adição de tabelas a posts e páginas da Web muitas vezes se torna obrigatória para apresentar determinadas informações, como estatísticas, números financeiros, resultados de pesquisas, dados quantitativos etc. Isso ocorre porque as tabelas podem organizar dados complexos em formatos claros e de fácil digestão.

O Tableberg é um plug-in promissor e repleto de recursos que você pode usar para criar várias tabelas interativas. Por exemplo, tabelas de preços, tabelas de comparação, tabelas de especificação de produtos, tabelas de apresentação de dados etc.

O Tableberg é um plug-in versátil. Você pode usá-lo para criar seções da Web, como seções de serviço, caixas de call-to-action, caixas de ícones, caixas de imagens etc.

Principais recursos do Tableberg:

• Permite adicionar imagens, classificações, ícones, faixas, listas e muito mais
• Personalizar a altura e a largura das linhas, colunas e células
• Fácil de alterar a cor de fundo de células individuais
• Permite que você adicione um filtro, uma caixa de pesquisa e uma linha/coluna fixa
• Ocultar/exibir bordas de células, linhas e colunas
• 100% responsivo a dispositivos móveis

4. OpinionCamp

OpinionCamp makes it easy to collect feedback and spark conversation on your posts or pages. Instead of relying on shortcodes, the plugin provides a Gutenberg‑native poll block. Just add a question, define answer options, and publish.  

You can visually adjust colours, button styles, and layouts without writing any CSS. Voters see results instantly, and you can choose to allow anonymous votes for privacy. OpinionCamp is lightweight and designed to feel like part of WordPress; data is stored locally, so there’s no need for external accounts.

Key features of OpinionCamp:

• 100 % block‑based polls: build and manage polls directly in the WordPress editor.
• Single and multiple-choice options: support for both single‑choice and multiple-choice polls.
• Visual customisation: customise colours, layout, and button styles without CSS.
• Instant preview: see how your poll will look as you edit.
• Anonymous voting & local storage: optional anonymous voting; all data is stored locally for privacy.
• Lightweight & modern: designed for speed with a clean interface that blends into any theme.

5. Galleryberg

Galleryberg helps you create attractive, professional‑looking image galleries in the Gutenberg editor. It offers multiple layout styles, including Masonry, Tiles, Justified, Square, and Mosaic. All layouts are fully responsive, and you can adjust column counts for tablets and phones.  

A built‑in lightbox provides smooth zooming and navigation, with keyboard and touch controls for an engaging viewing experience. Each image can be customized individually with borders, captions, aspect ratios, and duotone filters.  

Server‑side rendering keeps galleries lightweight and fast, while ARIA labels and keyboard navigation ensure they are accessible.

Principais recursos do Galleryberg:

• Multiple gallery layouts: choose from tiles, square, masonry, or justified layouts.
• Responsive design with column control: adjust the number of columns to ensure perfect display on any device.
• Built‑in lightbox: includes smooth zoom effects, keyboard and touch navigation, and loop functionality.
• Detailed image customisation: adjust borders, captions, aspect ratios, and spacing; apply duotone filters.
• Performance‑optimised: uses server‑side rendering for faster page loads.
• Accessibility ready: ARIA labels and keyboard navigation make galleries usable for all visitors.

6. WP Rocket

O carregamento rápido de páginas é essencial para o sucesso de qualquer site. De acordo com muitas estatísticas, mais de 60% dos usuários abandonam um site se ele demorar mais de três segundos para carregar. Um plugin de cache como o WP Rocket pode reduzir consideravelmente o tempo de carregamento da página.

O WP Rocket armazena cópias de seus posts e páginas da Web em um local temporário conhecido como cache. Sempre que um usuário visita seu site, o plug-in permite que o servidor envie arquivos pré-armazenados em vez de gerá-los do zero, melhorando o desempenho do seu site.

Principais recursos do WP Rocket:

• Suporta cache de página e de navegador
• Integra a CDN (rede de distribuição de conteúdo)
• Permite que você controle o Heartbeat
• Reduzir e combinar os arquivos CSS e JS
• Inclui a opção de carregamento lento
• Exclui arquivos desnecessários do banco de dados

7. Thrive Leads

A geração de leads é essencial para o futuro financeiro de qualquer site. Ela o ajuda a criar um banco de dados de clientes potenciais para executar campanhas de marketing e aumentar as vendas com sucesso. O Thrive Leads é um excelente plugin de geração de leads.

Com o plug-in, você pode criar vários tipos de formulários opt-in, como pop-ups, apresentações de slides e formulários incorporados, para capturar os endereços de e-mail de seus clientes em potencial. Quando sua lista de assinantes crescer, será fácil executar campanhas de marketing.

Principais recursos do Thrive Leads:

• Criador de formulários de arrastar e soltar
• Vários tipos de formulário (lightbox, slide-in, inline)
• Opções avançadas de segmentação
• Análises detalhadas para relatórios robustos
• Oferece muitos modelos pré-criados
• Integração com serviços de marketing por e-mail

8. Bit Social

O envolvimento com a mídia social é inevitável se você quiser aumentar a identidade da sua marca em qualquer lugar. De acordo com uma estatística da HubSpot, o envolvimento com a mídia social gera cerca de 3%- 4% do tráfego do site. Embora essa porcentagem não seja muito grande, ela pode ajudá-lo a desenvolver sua marca e aumentar as vendas durante as épocas de alta.

O Bit Social é um plugin que pode ajudá-lo muito nesse sentido. Ele permite agendar e compartilhar automaticamente suas postagens em plataformas de mídia social. O Bit Social tem integrações com mais de 7 plataformas de mídia social. Isso pode lhe poupar muito tempo, pois você não precisa compartilhar posts manualmente.

Principais recursos do Bit Social:

• Inclui um calendário de mídia social
• Filtrar postagens por categorias
• Compartilhe posts em diferentes plataformas sociais simultaneamente
• Funciona com 19 plataformas de mídia social
• Tem uma versão gratuita disponível

9. Análise independente

O estudo do tráfego da Web é indispensável para entender o comportamento dos visitantes e identificar o que mais repercute em seu público. Esse insight permite que você tome decisões informadas sobre campanhas de marketing para aumentar as conversões.

O Independent Analytics é um plug-in analítico de tráfego da Web minimalista, mas abrangente. Se o Google Analytics original for muito pesado e você quiser uma alternativa simples, experimente este plug-in. Ele pode fazer tudo o que o Google Analytics pode fazer.

• Configuração fácil e painel de controle amigável
• O painel exibe visitantes, visualizações, taxa de rejeição, visualização por sessão, etc.
• Mostra o desempenho do post/página em tempo real
• Exibe fontes de tráfego, suas localizações e dispositivos usados
• Ajuda a observar o desempenho da campanha
• A versão gratuita é suficiente para sites que não executam campanhas

10. UpdraftPlus

Seu site pode falhar por vários motivos, muitos dos quais podem estar fora de seu controle. A manutenção regular de um backup pode restaurar rapidamente seu site, independentemente de sua falha. O UpdraftPlus é um plugin de backup popular para WordPress.

Você pode programar backups automáticos de todo o seu site com o UpdraftPlus. Os backups incluirão seus bancos de dados da Web, temas, plug-ins e uploads, garantindo que todos os dados importantes estejam seguros e possam ser recuperados.

O UpdraftPlus tem integrações com vários sistemas de armazenamento em nuvem, como Google Drive, Dropbox, Amazon S3, etc., para salvar backups.

Principais recursos do UpdraftPlus:

• Capaz de fazer backup de grandes bancos de dados (até mais de 100 GB)
• Oferece suporte a backups de hora em hora, diários, semanais, mensais e quinzenais
• Suporte a mais de 14 nuvens e armazenamento remoto
• Os backups são criptografados para segurança
• Compatível com vários sites

11. Afiliados com sede

O Thirsty Affiliates é um plug-in completo de gerenciamento de links de afiliados para WordPress. Ele permite camuflar, organizar e rastrear todos os links de afiliados a partir do painel de controle. Ele oferece suporte a vários tipos de links, inclusive links de texto, imagem e botão.

Portanto, se você é um profissional de marketing de afiliados, deve experimentar esse plugin. Não importa se seu site tem vários milhares de links de afiliados. Você pode gerenciá-los como um profissional com o Thirsty Affiliates.

Principais recursos da Thirsty Affiliates:

• Vinculação automática de palavras-chave
• Categorização de links para organização
• Criação e edição de links em massa
• Rastreamento e análise detalhados de cliques
• Integra-se a criadores de páginas populares

Palavras finais!

A escolha do conjunto certo de plug-ins pode melhorar significativamente a funcionalidade do seu site e a experiência do usuário. Deixar de escolher o plug-in certo certamente levará a um enorme sofrimento. Novamente, a substituição de um plug-in no meio do caminho pode afetar a funcionalidade do seu site.

É por isso que listamos alguns dos melhores plug-ins de conteúdo do WordPress para aumentar o engajamento e o apelo visual, nos quais você pode confiar sem pensar duas vezes. Informe-nos quais plug-ins você selecionou na caixa de comentários abaixo.

<p>The post 11 Best WordPress Content Plugins to Boost Engagement and Visual Appeal first appeared on Tableberg.</p>

If you run a sports website, blog, or even sell sports gear, adding a league table can make your content more engaging and informative.

In this tutorial, we’ll show you two simple ways to create a league table in WordPress — using the Plug-in Tableberg.

• Método 1: Copy & Paste the Ready-Made Pattern
• Método 2: Create a League Table from Scratch

Method 1: Copy & Paste the Ready-Made Pattern

Don’t want to build everything from scratch?

You can instantly add a beautiful, pre-designed Classificação da Premier League Table to your site using Tableberg’s Pattern Library.

Here’s how

Step 1: Install the Tableberg Pro Plugin

Even though Tableberg has a versão gratuita, you’ll need the Versão Pro to access the ready-made patterns.

Get Tableberg Pro from the official website, install it, and activate your license.

Step 2: Visit the Pattern & Copy It

Go to this link: Premier League Standings Table Pattern and click on the “Copy Pattern” button on the page. The pattern will be copied automatically.

Step 3: Paste the Pattern into WordPress Block Editor

Now, open the post or page where you want to add your league table.

In the WordPress block editor (Gutenberg), paste (Ctrl/Cmd + V) — and the entire table will appear instantly.

Etapa 4: Personalizar a tabela

You can easily:

• Replace the team names and logos
• Update match stats (Played, Won, Lost, Drawn, Points, etc.)
• Adjust colors, borders, or typography from the sidebar settings
• Add or remove rows and columns

That’s it — your League Table is ready in seconds without building it manually.

Method 2: Create a League Table from Scratch

If you prefer full control or want to design your own layout, follow this step-by-step process to create a league table manually.

Etapa 1: Instalar e ativar o plug-in Tableberg

Tableberg é um plug-in avançado de criação de tabelas. Sem uma ferramenta tão avançada, não é possível criar tabelas de classificação abrangentes apenas com o bloco de tabelas padrão do WordPress.

Para instalar o plug-in, vá para Plug-ins > Adicionar novo plug-in. Para obter o plugin, digite Tableberg na caixa de pesquisa. Instale e ative-o depois que ele aparecer abaixo.

Etapa 2: Adicione o bloco Tableberg ao seu editor de postagem/página

Abra o post/página em que você deseja criar a tabela de classificação. Localize e adicionar o bloco Tableberg pressionando o botão Ícone (+).

Defina o número da linha e da coluna como desejar. Para este tutorial, selecionaremos o número da linha e da coluna 6*11.

O layout da tabela está pronto. Em seguida, adicionaremos conteúdo a ele.

Etapa 3: Adicionar conteúdo à tabela

O tipo de conteúdo que você adiciona à tabela depende muito do tipo de esporte. Normalmente, o conteúdo de uma tabela da liga de futebol principal é posição, logotipo do clube, nome do clube, jogo disputado, saldo de gols, e pontos.

# Definir posição (Pos)

A equipe com mais pontos geralmente fica mais alta na classificação. Essa seção vem na coluna mais à esquerda de uma tabela. Você pode ver que criamos essa coluna na tabela.

# Adicionar logotipo e nomes de clubes

Queremos colocar o nome e o logotipo do clube sob o mesmo título de coluna. Portanto, as próximas duas células superiores da coluna precisam ser mescladas. Selecione-as pressionando Shift + Clique com o botão direito do mouse (Windows) ou CMD + Clique com o botão direito do mouse (Mac).

Em seguida, selecione Mesclar do Editar tabela na barra de ferramentas. Assista ao vídeo abaixo. Depois disso, alinhamos o título de forma centralizada.

Cada célula vem com um bloco Gutenberg. Ao clicar no bloco Ícone (+)Se você quiser, pode adicionar outros tipos de conteúdo à tabela. Para logotipos, selecionaremos o bloco de imagem.

Você pode ver que adicionamos logotipos de clubes à tabela. Não se preocupe se as imagens carregadas forem grandes. O TableBerg permite que você as personalize arrastando-as.

Em seguida, adicione os nomes dos clubes, respectivamente, ao lado das células do logotipo.

# Adicionar número da partida jogada, diferença de gols e pontos

Isso é simples. Da mesma forma que a posição, você pode adicionar o número de partidas disputadas, a diferença de gols e a quantidade de pontos de cada clube aqui também, com texto simples. Você pode ver como fizemos isso na imagem abaixo.

Etapa 04: Estilizar a mesa

Com o Tableberg, você pode adicionar vários níveis de estilização e personalização à sua tabela. Com a barra de ferramentas Gutenberg, você pode personalizar o alinhamento e ousadia do conteúdo da tabela.

Você pode ver que alinhamos centralmente e aplicamos negrito à maior parte do conteúdo da tabela.

Em seguida, você pode alterar o cor do texto e do plano de fundo, tipografia, tamanho da fonte, e dimensão da tabela na barra lateral direita. Espero que você possa fazer isso sozinho.

Etapa 05: Alterar a largura da tabela e as cores das linhas

Se você tiver muito conteúdo, talvez queira aumentar a largura da tabela. Selecione a tabela inteira clicando no botão Ícone do TableBerg na barra de ferramentas consecutivamente três vezes.

O Guia Configurações aparecerá na barra lateral direita, onde você encontrará a opção Largura da mesa opção. Você pode aumentar a largura da tabela definindo o valor aqui.

Venha para o Guia Estilos. Logo abaixo, você terá opções para alterar a cor de fundo das colunas das linhas pares e ímpares. Faça você mesmo.

Assim, você pode criar uma tabela de classificação no WordPress.

Tutorial em vídeo

Nota final!

As pessoas que gostam de esportes estão sempre interessadas em saber as atualizações de seus times e jogadores favoritos. Você pode criar uma tabela no WordPress e compartilhar seus links nas mídias sociais para que as pessoas venham explorar seu site.

Você pode criar tabelas para produtos de comércio eletrônico de forma semelhante com esse plug-in. Saiba mais Como criar uma tabela de comparação de produtos com o Tableberg.

<p>The post How to Create a League Table in WordPress first appeared on Tableberg.</p>

O WordPress permite que você adicione imagens ao seu site de várias maneiras. Uma das maneiras mais eficazes de fazer isso é adicionar imagens em colunas e linhas. Isso permite que você apresente suas imagens de forma organizada.

Nesta postagem do blog, mostraremos a você várias maneiras de exibir imagens do WordPress em Columns & Rows.

• Método 1: Usando o bloco de colunas (Melhor para controle manual total e layouts personalizados)
• Método 2: Usando o bloco Gallery (Melhor para grades de imagens simples com estilo mínimo)
• Método 3: Usando o bloco Galleryberg (Ideal para layouts avançados com lightbox e personalização)
• Método 4: Usando o plug-in Tableberg (Ideal para grades de imagens estruturadas, como tabelas de preços, cronogramas ou produtos)

Criar mesas bonitas
Com o Block Editor

Experimente gratuitamente

Obter um profissional

Método 1: Usando o bloco de colunas

O WordPress tem um bloco de colunas padrão. Você pode adicionar muitos outros blocos dentro dele, inclusive o bloco de imagens. Aqui está o guia.

Etapa 01: Adicionar o bloco Gutenberg Column

Localizar e adicionar o bloco Column clicando no ícone de adição (+) no editor.

Selecione o número de variações de coluna que deseja adicionar ao bloco de colunas. Para este tutorial, selecionaremos a variação de coluna 50/50.

Etapa 02: Adicionar o bloco de imagem ao bloco de coluna

Como dissemos, você pode colocar outros blocos do Gutenberg dentro do bloco de colunas. Agora, clique no ícone de mais (+) dentro da coluna. Localizar e adicionar o bloco Image a ele.

Agora você pode adicionar imagens da Media Library ou da unidade local. Faça isso como desejar.

Etapa 03: Estilizar o bloco de imagem dentro do bloco de coluna

Você pode ver que adicionamos uma imagem. Você pode alinhá-la centralmente usando a opção de alinhamento na barra de ferramentas. Redimensione a imagem segurando o ícone de círculo de borda. Por fim, você pode estilizá-la mais usando as opções da guia Style (Estilo).

Da mesma forma, adicione uma imagem à outra coluna também.

Método 2: Usando o bloco Gallery

O WordPress tem um bloco Gallery padrão pelo qual você pode adicionar várias imagens com o mesmo layout de bloco.

Etapa 01: Adicionar o bloco Gallery

Como no método acima, encontre e adicionar o bloco Gallery ao editor.

Você terá permissão para fazer upload de imagens de seu unidade local ou o Biblioteca de mídia. Neste tutorial, faremos upload de imagens da Biblioteca de mídia.

Etapa 02: Selecione e faça upload de imagens

Selecione as imagens que você deseja carregar no bloco Gallery. Você pode selecionar quantas imagens quiser. Quando terminar, clique no botão Criar uma nova galeria.

Você pode adicionar legendas para cada imagem, se desejar. Não há problema se você não adicionar nada. Pressione o botão Botão Inserir galeria no final.

Você pode ver que as imagens foram adicionadas à galeria. Em seguida, você pode personalizar o bloco Image usando as opções da seção Configurações e Guia Estilos na barra lateral direita.

Espero que você consiga fazer isso sozinho, por isso não entrarei em detalhes.

Método 3: Usando o plug-in Galleryberg

Se você estiver procurando uma maneira mais flexível e visualmente refinada de exibir imagens em colunas ou linhas, o Galleryberg é uma opção fantástica. É um plug-in de bloco de galeria nativo do Gutenberg que oferece a você várias opções de layout - incluindo Tiles, Masonry, Justified e Square - todas com caixa de luz suporte.

Etapa 1: Instalar o plug-in Galleryberg

Vá para o painel do WordPress e navegue até Plug-ins > Adicionar novo. Em seguida, procure por "Galleryberg" e instale e ative o plug-in.

Etapa 2: Adicionar o bloco Galleryberg

Abra a página ou postagem onde você deseja exibir as imagens. Em seguida, clique no ícone + e procure pelo botão "Galleryberg". Adicione-o à página.

Etapa 3: Faça upload ou selecione imagens

Use a biblioteca de mídia ou carregue novas imagens. Você pode reorganizar as imagens arrastando e soltando.

Etapa 4: Escolha um layout

No painel de configurações do bloco, selecione o layout desejado:

• Ladrilhos: Layout de grade com espaçamento igual (ideal para linhas e colunas)
• Alvenaria: Layout empilhado no estilo do Pinterest
• Justificado: Linhas bem alinhadas e de igual altura
• Quadrado: Quadrados perfeitos para exibição uniforme da grade

Etapa 5: Ative a opção Lightbox

Na barra lateral de configurações do bloco, alterne a opção Ativar Lightbox opção.

Suas imagens agora serão abertas em um pop-up com transições suaves, efeitos de zoom e navegação por slides.

Etapa 5: Personalizar e publicar

• Defina o número de colunas (de 1 a 8)Na barra lateral de configurações do bloco, role para baixo até a seção Caixa de luz seção.
• Alternar o Ativar Lightbox opção.
• Suas imagens agora serão abertas em um pop-up com transições suaves, efeitos de zoom e navegação por slides.
• Ajuste o espaçamento, as legendas, as bordas e muito mais
• Habilite a caixa de luz para visualizações interativas de imagens

Clique em Publicar ou Atualização e sua galeria aparecerá em linhas e colunas limpas e responsivas.

Método 4: Usando o plug-in Tableberg

O TableBerg é um plug-in de criação de tabelas fácil de usar. Ele permite que você adicione vários blocos personalizados às células da tabela para criar tabelas multifuncionais. Nesta seção, mostraremos como adicionar imagens no WordPress usando o plug-in Tableberg plugin.

Etapa 01: Instalar e ativar o plug-in Tableberg

Ir para Plug-ins > Adicionar novo plug-in. Tipo Tableberg na caixa de pesquisa. Instalar e ativar assim que o plug-in for exibido abaixo.

Etapa 02: Adicione o bloco Tableberg ao seu post/página

O plug-in vem com um bloco do Gutenberg chamado TableBerg. Encontre e adicione o bloco Bloco TabelBerg para seu editor.

Defina o número da linha e da coluna da tabela. O processo é semelhante ao do bloco de tabela padrão. Faça você mesmo.

Etapa 03: Localizar e adicionar o bloco de imagem à tabela

Espero que sua tabela esteja pronta. Selecione a célula em que deseja adicionar uma imagem. Quando você seleciona uma célula, o botão ícone de mais (+) aparecerá.

Clique no ícone de mais (+). Você obterá o bloco Image. Clique no bloco Imagem.

Você terá opções para carregar imagens da unidade local ou da Biblioteca de mídia. Clique em qualquer opção desejada e carregue a imagem.

Etapa 04: Estilizar a imagem carregada

Esperamos que sua imagem já tenha sido carregada na tabela. Vá até a guia Styles (Estilos) na barra lateral direita. Você encontrará opções como Duotone, Border e Radius para estilizar o bloco Image.

Assim, você pode fazer upload de imagens para a tabela do WordPress com o plug-in. Explorar como criar uma seção de membros da equipe no WordPress usando o bloco de colunas.

Observações finais!

Para manter um website com sucesso, você precisa fazer upload e apresentar seu conteúdo de diferentes maneiras. Às vezes, o mesmo conteúdo precisa ser apresentado de maneiras diferentes em posts e páginas diferentes. E o mesmo acontece com o bloco de imagens.

Esperamos que, depois de ler este tutorial, você consiga adicionar seu bloco de imagens de várias maneiras no WordPress e trazer variações ao conteúdo.

<p>The post How to Display WordPress Images in Columns & Rows first appeared on Tableberg.</p>

Com o editor de blocos Gutenberg, você pode adicionar facilmente guias às postagens do seu blog. Neste artigo, mostraremos a você como criar guias no WordPress para organizar o conteúdo. Antes disso, responderemos a algumas perguntas básicas.

Criar guias para qualquer conteúdo no WordPress

A biblioteca de blocos padrão do Gutenberg não tem o bloco de guias. Você deve usar um plug-in como o Blocos definitivos para tê-lo na biblioteca de blocos. O plug-in tem mais de 25 plug-ins adicionais com os quais você pode levar seu web design e marketing de conteúdo para o próximo nível.

O "TConteúdo abarcado' da Ultimate Blocks permite que você adicione qualquer conteúdo em guias. Vamos ver como fazer isso.

Etapa 01: Instale e ative o plug-in Ultimate Blocks

Ir para Plug-ins > Adicionar novo plug-in. Tipo Blocos definitivos na barra de pesquisa no canto superior direito. Instalar e ativar o plug-in depois que ele aparecer abaixo.

Etapa 02: Inserir o bloco de conteúdo com guias

Abra um post ou uma página. Encontre a seção Conteúdo com guias pressionando botão de adição (+). Quando você encontrar o bloco, adicione-o ao editor do Gutenberg.

Etapa 03: Adicionar novas guias e renomeá-las

Ao clicar no botão ícone de mais (+)Se você quiser, poderá adicionar quantas guias quiser ao bloco.

Pegue o cursor e clique na guia, uma a uma. Você terá permissão para renomeá-las. Portanto, renomeie as guias com base no conteúdo que você exibirá.

Etapa 04: Adicionar conteúdo às guias

Selecione uma guia na qual deseja adicionar conteúdo. Em seguida, posicione o cursor em seu editor. Você verá o ícone botão de adição (+) do editor do Gutenberg. Clique e escolha o bloco de conteúdo de que você precisa.

Para o tutorial, adicionamos os blocos de texto e imagem à guia. Da mesma forma, você também pode adicionar outros blocos à guia. Faça o mesmo em outras guias.

Etapa 05: Personalizar as guias

Vá até a barra lateral direita e mantenha o bloco Tabbed Content selecionado. Você encontrará várias opções para configurar, como Tab Types, Tab Anchor e Responsiveness.

Depois de atualizar para a versão premium, você poderá adicionar ícones aos títulos das guias, textos secundários e botões de chamada para ação às guias.

Em seguida, vá até o Guia Estilos. Você terá opções para colorir o conteúdo da guia, alterar o layout da guia e definir uma nova dimensão. Espero que você possa explorar e fazer isso por conta própria.

Tutorial em vídeo

Criação de guias para tabelas no WordPress

As guias não são apenas para textos ou imagens - elas também são uma excelente maneira de organizar várias tabelas lado a lado em seu site. Se você quiser permitir que os usuários alternem entre preços mensais e anuais, Comparar os recursos do produtoou apresentar dados em vários idiomas, Tableberg torna isso mais fácil com o recurso Toggle Tabs.

Com o "Alternância para Tableberg", você pode:

Adicionar várias tabelas em guias separadas
Permita que os visitantes comparem planos de preços, recursos ou conjuntos de dados com um único clique
Mantenha suas tabelas organizadas, limpas e super fáceis de navegar

Veja como criar guias para tabelas usando o Tableberg:

Etapa 1: Insira o bloco "Toggle for Tableberg

• Abra sua postagem ou página no editor do WordPress.
• Clique no ícone (+) e procure por Alternância para Tableberge adicione o bloco.

Etapa 2: Configure e personalize suas guias

• Por padrão, você verá as guias rotuladas como "Guia 1", "Guia 2" e "Guia 3".
• Clique nos ícones + ou - para adicionar ou remover guias, conforme necessário.
• Renomeie cada guia (por exemplo, "Monthly" (Mensal), "Yearly" (Anual), "Standard" (Padrão), "Premium" (Premium)).
• Use o painel de configurações à direita para ajustar títulos, alinhamento, cores e bordas para seu estilo preferido.

Etapa 3: Adicionar uma tabela a cada guia

• Selecione uma guia e clique dentro dela para adicionar uma tabela Tableberg.
• Você pode criar uma nova tabela do zero ou inserir um dos padrões de tabela pré-projetados do Tableberg.
• Cada guia pode conter uma tabela exclusiva - ideal para comparações ou opções de exibição.

Etapa 4: Visualizar e publicar

• Use a visualização para garantir que suas tabelas com guias tenham a aparência e o funcionamento corretos.
• Quando estiver satisfeito, publique ou atualize seu post/página.

Veja um exemplo da aparência de uma tabela de preços com abas com o Tableberg:

Conclusão

O bloco Tabbed Content que vem com o plug-in Ultimate Blocks é automaticamente responsivo em todos os dispositivos. Como resultado, você não precisa gastar muito tempo para torná-lo responsivo ao dispositivo.

Mas o que você precisa fazer é colocar o bloco em um local adequado que torne toda a sua postagem/página perfeita. Explore nossa outra postagem - como criar um botão de chamada para ação no WordPress.

<p>The post How to Create Tabs in WordPress to Organize Content first appeared on Tableberg.</p>

Com um botão de alternância, os visitantes podem alternar instantaneamente entre duas ou mais opções, como preços mensais ou anuais, modo claro ou escuro ou até mesmo seções de conteúdo completamente diferentes, sem sobrecarregar a página.

Nesta postagem, você descobrirá duas maneiras simples de adicionar botões de alternância ao seu site WordPress:

• Método 1: Adicionar um botão de alternância para qualquer tipo de conteúdo (texto, imagens, formulários, etc.)
• Método 2: Adicionar um botão de alternância para tabelas de preços ou qualquer tipo de dados tabulares

Vamos mergulhar de cabeça!

Método 1: Adicionar um botão de alternância para qualquer tipo de conteúdo

Se quiser permitir que seus usuários alternem entre diferentes blocos de conteúdo, como Perguntas frequentesdetalhes do produto ou conjuntos de recursos diferentes, este método é para você.

Usaremos o Blocos definitivos que oferece um bloco Content Toggle (Conteúdo com abas) versátil que funciona para todos os tipos de conteúdo.

Etapa 1: Instalar o plug-in Ultimate Blocks

• Vá para o painel de controle do WordPress.
• Navegue até Plugins > Adicionar novo.
• Pesquise "Ultimate Blocks" e instale/ative-o.

Etapa 2: Adicionar o bloco de conteúdo com guias

• Abra um post ou uma página no editor do WordPress.
• Tipo /conteúdo da aba ou use o ícone + para adicionar o bloco Tabbed Content.

O bloco "Tabbed Content" terá a seguinte aparência

Etapa 3: Personalizar o bloco para a funcionalidade de alternância

Selecione o bloco e escolha a opção Estilo de pílulas nas configurações (isso faz com que as guias se pareçam com botões).

Centralize o alinhamento para obter um visual clássico de alternância.

Clique no botão + sinal ao lado da primeira guia para adicionar outra guia. Adicione pelo menos duas guias (por exemplo, "Monthly" (Mensal) e "Yearly" (Anual) ou "Details" (Detalhes) e "Summary" (Resumo)). Renomeie as guias para que correspondam às suas opções de alternância.

Use as Configurações de cores para definir cores contrastantes, de modo que fique claro qual guia está ativa.

Etapa 4: Adicione seu conteúdo

Clique dentro de cada guia para adicionar o conteúdo de sua preferência (texto, imagens, listas, formulários ou até mesmo outros blocos).

Personalize ainda mais, se necessário: altere os planos de fundo das guias, as cores do conteúdo e muito mais.

Etapa 5: Visualizar e publicar

• Use a opção Preview para testar a alternância.
• Quando estiver satisfeito, publique ou atualize a página.

É isso aí! Agora você tem um botão de alternância flexível para qualquer tipo de conteúdo em seu site WordPress.

Método 2: Adicionar um botão de alternância para tabelas de preços (e mais)

Deseja permitir que os usuários alternem entre tabelas de preços mensais e anuais ou comparem diferentes conjuntos de dados lado a lado? O Alternância para Tableberg no plug-in Tableberg foi projetado exatamente para isso!

Com Tableberg Provocê pode organizar qualquer número de tabelas em guias organizadas e clicáveis, perfeitas para planos de preços, comparações de produtos, tabelas em vários idiomas ou qualquer cenário em que várias tabelas façam sentido.

Etapa 1: Insira o bloco "Toggle for Tableberg

• Abra sua postagem ou página no editor do WordPress.
• Clique no ícone + (mais) e pesquise por "Toggle for Tableberg".
• Adicione o bloco à sua página.

Etapa 2: Configure e personalize suas guias

• Por padrão, você verá três guias rotuladas como "Guia 1", "Guia 2" e "Guia 3".
• Adicione ou remova guias conforme necessário usando os ícones + ou -.
• Renomeie cada guia (por exemplo, "Monthly", "Yearly" ou "Basic Plan", "Pro Plan").
• Use o painel de opções do lado direito para ajustar os títulos das guias, o alinhamento, as cores e as bordas para obter uma aparência de marca.

Etapa 3: Adicione suas tabelas

• Clique em cada guia para adicionar uma tabela exclusiva em seu interior.
• Crie uma nova tabela do zero ou insira um padrão de tabela Tableberg pré-criado.
• Cada guia pode conter uma tabela completamente diferente - excelente para comparações de recursos, níveis de preços, conjuntos de dados e muito mais.

Casos de uso populares

• Tabelas de preços: Permita que os usuários alternem entre preços mensais e anuais ou entre planos diferentes.
• Comparações de dados: Mostre dados regionais, especificações de produtos diferentes ou métricas de desempenho em guias separadas.
• Conteúdo educacional: Organize as lições ou o material do curso para facilitar a navegação.
• Tabelas em vários idiomas: Exibir os mesmos dados em diferentes idiomas para visitantes internacionais.

Etapa 4: Visualizar e publicar

• Visualize suas guias de alternância para ter certeza de que tudo parece e funciona como esperado.
• Publique ou atualize seu post/página quando estiver pronto.

Veja um exemplo de como a alternância se parece com uma tabela de preços.

Conclusão

Adicionar um botão de alternância ao seu site WordPress é uma ótima maneira de melhorar a navegação, economizar espaço e dar aos visitantes acesso instantâneo ao conteúdo que lhes interessa - seja alternando entre planos de preços, visualizando detalhes ou comparando dados.

• Para qualquer tipo de conteúdo, use Blocos definitivos para criar alternâncias flexíveis em segundos.
• Para tabelas de preços e layouts de tabela mais avançados, experimente Bloco de alternância do Tableberg Pro para uma experiência perfeita com guias.

Experimente esses métodos em seu site e torne seu conteúdo mais interativo e fácil de usar. Tem dúvidas ou precisa de ajuda? Entre em contato conosco nos comentários!

<p>The post How to Add a Toggle Button To Your WordPress Site first appeared on Tableberg.</p>

Neste artigo, mostraremos a você várias maneiras eficazes de colocar texto e imagem lado a lado no WordPress. Portanto, fique conosco até o fim. Você realmente aprenderá algo interessante.

Método 1: Usando o bloco de mídia e texto

Mídia e texto é um bloco padrão do editor de blocos do Gutenberg. Com esse bloco, você pode colocar texto e imagens lado a lado sem depender de nenhuma ferramenta de terceiros.

Etapa 01: Adicione a mídia e o texto ao editor

Clique no botão ícone de mais (+) no editor. Tipo Mídia e texto na barra de pesquisa. Adicione o bloco ao editor.

Etapa 02: Adicionar/carregar uma imagem no bloco

Você pode adicionar uma imagem fazendo upload da unidade local, da biblioteca de mídia ou da imagem em destaque. Escolha a opção de sua preferência.

Você pode ver que a imagem foi adicionada ao bloco.

Etapa 03: Adicionar texto ao bloco de mídia e texto

Escreva o texto desejado na coluna direita do bloco. Você pode personalizar a cor do texto, o alinhamento e muito mais, se desejar.

Etapa 04: Alternar a posição do texto e do arquivo de mídia

O bloco permite alternar a posição dos arquivos de texto e de mídia clicando nas respectivas opções na barra de ferramentas.

Método 2: Usando o bloco Columns

O Colunas também é um bloco padrão do editor. É um dos blocos mais usados na criação de conteúdo do WordPress.

Etapa 01: Adicionar o bloco Columns ao Editor

Você pode exibir texto e imagem lado a lado adicionando a tag Parágrafo e Blocos de imagem separadamente nos blocos de colunas.

Portanto, adicionar o bloco Columns primeiro para o editor.

Selecione um layout de duas colunas.

Etapa 02: Adicionar o bloco de imagem ao bloco de colunas

É melhor exibi-los à esquerda. Portanto, adicionar o bloco Image para a coluna da esquerda.

Aqui, novamente, adicione a imagem desejada, seja da unidade local, da biblioteca de mídia ou por meio de um URL.

Você pode ver que a imagem foi adicionada ao bloco.

Etapa 03: Adicionar texto ao bloco Cloumns

Adicione o Bloco de parágrafos para a coluna da direita. Isso permitirá que você adicione texto.

Você pode ver que o texto foi adicionado à coluna.

Em seguida, você pode personalizar o bloco de colunas, inclusive a imagem e o texto nele contidos.

Método 3: Usando o bloco Tableberg

Tableberg é um maravilhoso plug-in de criação de tabelas que permite que você crie várias partes para o seu site. Esse plug-in também permite que você coloque texto e imagens lado a lado. Faça o download do plug-in clicando nos botões anexados ao banner abaixo.

Criar mesas bonitas
Com o Block Editor

Experimente gratuitamente

Obter um profissional

Comece a seguir o tutorial agora.

Etapa 01: Adicionar o bloco Tableberg ao Editor

Esse plug-in adiciona um bloco chamado Tableberg à biblioteca de blocos do Gutenberg. Adicionar o bloco Tableberg para o editor.

Selecione o número de colunas e linhas de que você precisa para o layout. Selecionaremos 2*1.

Você pode ver que as colunas e as linhas estão prontas.

Etapa 02: Adicionar uma imagem a uma célula da tabela

O Tableberg permite adicionar vários blocos personalizados às suas células. Ao clicar no ícone ícone de mais (+), encontrar e adicionar o bloco Image para uma de suas células.

Carregue a imagem para a unidade local ou adicione uma da sua biblioteca de mídia.

Adicionamos uma imagem, que você pode ver abaixo.

Etapa 03: Adicionar texto à tabela

Basta adicionar texto à coluna da direita usando o bloco de parágrafos.

Etapa 04: Modificar a borda do Tableberg

Você pode tornar essa seção mais atraente removendo ou colonizando a borda da tabela. Ir para o Guia Estilos.

Borda do Come to Table rolando a guia para baixo. Você terá opções para remover ou colorir a borda da tabela nessas opções.

Assim, é possível criar seções da Web para colocar texto e imagem lado a lado no WordPress.

Método 4: Usando o bloco Sliderberg

Deseja exibir texto e imagens lado a lado em um controle deslizante interativo? O Sliderberg permite que você faça exatamente isso, usando o conhecido bloco Media & Text, com total flexibilidade. Veja como configurá-lo em apenas alguns minutos:

Etapa 1: Instalar e ativar o plug-in Sliderberg

Primeiro, vá para Plugins → Adicionar novo no painel do WordPress, procure por "Sliderberg" e clique em Instalar agora. Em seguida, ative o plug-in.

Etapa 2: Inserir o bloco do Sliderberg

Edite sua postagem ou página. Clique no botão + procure por "Sliderberg" e insira o bloco Sliderberg onde deseja que o controle deslizante apareça.

Etapa 3: Selecione o tipo "Blocks Slider" (controle deslizante de blocos)

Quando solicitado, escolha a opção Controle deslizante de blocos opção. Isso permite que você adicione qualquer bloco do Gutenberg dentro de cada slide.

Etapa 4: Escolha uma cor de fundo para o controle deslizante

Escolha uma cor de fundo para o controle deslizante que combine com o estilo do seu site ou mantenha-o transparente para obter uma aparência limpa.

Etapa 5: Adicione o bloco "Media & Text" dentro do controle deslizante

Dentro de seu primeiro slide, clique no botão + e insira o botão Mídia e texto bloco.

Etapa 6: Adicionar imagem e texto ao controle deslizante

Use o bloco Media & Text para carregar sua imagem (lado esquerdo) e adicionar seu texto (lado direito). Você pode usar títulos, parágrafos, botões ou qualquer outro bloco que precisar.

Etapa 7: Adicionar ou duplicar slides

Deseja mais slides? Clique aqui Adicionar slide para criar um novo, ou Duplicar slide para copiar um layout existente.

Etapa 8: Personalize o controle deslizante e publique

Ajuste as configurações do controle deslizante (animação, reprodução automática, setas de navegação etc.) de acordo com sua preferência. Quando estiver pronto, clique em Publicar para entrar no ar!

Agora você tem um controle deslizante suave e responsivo que mostra texto e imagem lado a lado, perfeito para apresentações de equipes, produtos, depoimentos e muito mais.

Dica profissional: Você pode usar qualquer dentro de seus slides do Sliderberg - não apenas Mídia e Texto! Seja criativo com botões, ícones, colunas ou até mesmo blocos de terceiros.

Conclusão

De fato, você pode aproveitar os blocos padrão do Gutenberg para criar e projetar seus posts e páginas da Web. Mas, como eles não têm muitos recursos avançados, você geralmente precisa de plug-ins de blocos adicionais que vêm com muitos recursos interessantes.

O Tableberg é um plugin interessante que você pode usar nesse caso. O Ultimate Blocks é outro excelente plug-in de blocos que você deve considerar. Explore as versões gratuitas desses dois plug-ins clicando nos botões anexados abaixo.

Leia também:

• Como colocar imagens lado a lado no WordPress
• Como adicionar texto à parte superior de uma imagem no WordPress
• Como redimensionar blocos no WordPress

<p>The post How to Put Text and Image Side by Side in WordPress first appeared on Tableberg.</p>

WYSIWYG significa "What You See Is What You Get" (O que você vê é o que você obtém). Isso significa que você constrói e edita tabelas de uma forma que espelha a aparência final, exatamente como faria ao trabalhar em um documento do Word. Se o bloco Table padrão deixa você querendo mais, este guia é para você.

Hoje, mostrarei a você como criar uma tabela visualmente impressionante usando o plug-in WYSIWYG table builder. A tabela está abaixo.

O que é uma tabela WYSIWYG no WordPress?

Uma tabela WYSIWYG permite que você edite o conteúdo visualmente, diretamente no editor do WordPress. Sem HTML. Sem códigos de acesso. Apenas resultados em tempo real e controles intuitivos.

Você recebe:

Edição em tempo real sem recargas
Formatação flexível com mídia avançada
Uma sensação de arrastar e soltar para a estrutura
Fácil integração de imagens, ícones e botões

É a maneira mais fácil de criar tabelas com conteúdo rico sem sobrecarga técnica.

Por que o bloco de tabelas padrão do WordPress é insuficiente

O bloco Table integrado faz o trabalho para layouts básicos, mas seus recursos acabam aí:

Sem arrastar e soltar para linhas ou colunas
Personalização limitada de bordas, espaçamento ou cores
Não é possível mesclar e dividir células
Não há suporte para mídia dentro das células
Baixa capacidade de resposta em dispositivos móveis

Se a sua tabela precisar de mais do que apenas texto simples, você terá dificuldades rapidamente.

Por que escolher um plug-in de tabela WYSIWYG?

Para liberar todo o potencial do design de tabelas, um plug-in visual de tabelas como o Tableberg é uma escolha inteligente. Ele oferece a você:

Editor visual: Faça alterações conforme você as vê - sem adivinhações
Arrastar e soltar: O rearranjo das células leva segundos
Blocos de mídia: Adicionar imagens, botões, ícones e classificações por estrelas
Estilos personalizados: Controle o preenchimento, as bordas, o alinhamento e as cores das células
Compatível com dispositivos móveis: Escolha como a sua tabela responderá em telas menores

Esse tipo de plug-in torna a criação de tabelas avançadas tão simples quanto editar uma postagem de blog.

Criar mesas bonitas
Com o Block Editor

Experimente gratuitamente

Obter um profissional

Como criar uma tabela WYSIWYG com o Tableberg

Para criar uma tabela WYSIWYG com o Tableberg, primeiro precisamos instalar o plug-in.

1. Instalar o plug-in Tableberg

Ir para Plugins (1) > Add New (2), procure por "Tableberg" (3) e clique em Install (4) seguido de Activate (Ativar).

2. Adicionar uma nova tabela

Abra um post ou página onde você deseja adicionar a tabela. Clique no botão ícone de mais (+) no editor (1). Tipo Tableberg na caixa de pesquisa (2). Adicionar o bloco ao editor (3).

Defina o número de colunas e linhas da tabela. Selecionaremos 3 × 5 por enquanto, mas criará ou excluirá colunas e linhas, se necessário. Clique no botão Criar tabela no final.

Você verá a tabela inserida no editor em breve, como abaixo.

Etapa 3: Adicionar conteúdo visualmente

A. Inserir conteúdo de texto

Coloque o cursor nas células da tabela e digite o que desejar.

B. Adicionar imagens

Agora, insira o bloco de imagens para inserir as imagens de seus produtos clicando no botão "+". É possível carregar imagens ou selecionar na biblioteca de mídia.

C. Adicionar classificação por estrelas

Adicione classificações com estrelas, se desejar. A classificação por estrelas é uma ótima maneira de demonstrar a qualidade de seus produtos.

D. Adicione seus botões

Os botões são uma forma eficaz de promover qualquer produto ou serviço. Portanto, coloque-os estrategicamente

Vincular um botão também é fácil: clique no botão, selecione a opção de link, insira o link de destino e ajuste os atributos do link.

Você pode ajustar e personalizar seus botões no painel do lado direito.

E. Inserir ícones

Os ícones funcionam muito bem para informar quais recursos estão disponíveis e quais não estão. A inserção do bloco de ícones é igual à de qualquer outro bloco.

F. Inserir lista com estilo

O Styled List é outro bloco essencial que o ajuda a adicionar um conjunto de recursos com ícones simultaneamente.

Agora, adicione seus recursos. Sempre que pressionar a tecla "Enter" no teclado, você poderá adicionar novos recursos.

Você pode acessar as opções de personalização do bloco Styled List no lado direito do editor.

Aqui está a tabela que criei usando o Tableberg sem personalização.

Adicionei algumas cores, preenchimento, margem e faixa de opções na parte superior. Abaixo estão as imagens da personalização que fiz.

Aqui estão os códigos de cores que usei na tabela. (Cor do cabeçalho: #f3f3f3, Cor do plano de fundo da linha par: #3fad3d63, Cor do plano de fundo da linha ímpar: #d1dec8)

Após a personalização, a versão final é apresentada a seguir.

Nome do produto	Canon EOS $1400 Adquira agora! Melhor opção	Lumix GH6 $1200 Adquira agora!
Vedação contra intempéries
Tela LCD sensível ao toque
Recursos adicionais	Autofoco rápido Alto controle de iso Opção AWB	Autofoco rápido Alto controle de iso Opção AWB
Conectividade WIFI

Quando estiver satisfeito, publique ou atualize a página. Sua tabela com estilo visual já está no ar.

Outros plug-ins de tabela WYSIWYG que vale a pena considerar

Enquanto Tableberg oferece uma experiência suave e baseada em blocos, mas há outras opções sólidas, dependendo de suas necessidades:

Construtor de tabelas WP - Arrastar e soltar, suporte a conteúdo flexível, compatível com todos os construtores de páginas.
Mesas Ninja - Rico em recursos com integrações e lógica condicional
TablePress (com extensões) - Bom para grandes conjuntos de dados

Cada um tem seus pontos fortes, mas o Tableberg foi desenvolvido para funcionar nativamente com o Gutenberg e prioriza a edição visual.

Casos práticos de uso

As tabelas WYSIWYG são perfeitas para:

Comparações de preços e detalhamento de recursos
Tabelas de afiliados com botões e classificações
Grades de membros da equipe ou programações de eventos
Catálogos de produtos com células ricas em mídia
Detalhamento passo a passo de como fazer
Resumos de conteúdo para postagens longas em blogs

Se o seu conteúdo envolve estrutura ou comparação, essas tabelas o tornam mais envolvente e informativo.

Considerações finais

Criar uma tabela de boa aparência não deve ser um desafio técnico. Um plug-in WYSIWYG como o Tableberg dá a você a liberdade de criar tabelas que correspondam ao seu estilo de conteúdo, sem tocar em uma única linha de código.

Se você quiser exibir recursos, comparações ou listas dinâmicas, o Tableberg facilita essa tarefa.

Pronto para experimentar o Tableberg?
Comece a usar o Tableberg hoje mesmo ➔

Leia mais!

Como criar sua primeira tabela com o Tableberg
Como a IA pode ajudá-lo a criar tabelas automaticamente no WordPress
Como gerar tabelas do WordPress a partir de arquivos CSV ou XML (sem necessidade de codificação)
Como gerar uma tabela de comparação a partir de uma publicação de blog usando o ChatGPT
Melhores maneiras de usar tabelas para marketing de afiliados no WordPress

<p>The post WordPress WYSIWYG Table: Create Visually Editable Tables Without Coding first appeared on Tableberg.</p>

Agora, o que acontece se você implementar os acordeões corretamente? Seu conteúdo se torna mais fácil de explorar, os usuários permanecem concentrados, a navegação móvel melhora e os mecanismos de pesquisa podem recompensá-lo com melhor visibilidade. Se você fizer tudo certo, eles funcionarão como um índice que responde às perguntas antes mesmo que os usuários as façam.

Este guia mostrará a você como implementar acordeões no WordPress usando ferramentas amigáveis ao editor que mantêm o processo simples e limpo, sem necessidade de codificação.

Adicionar acordeões no WordPress

Há mais de uma maneira de adicionar acordeões no WordPress, mas nem todas são fáceis de usar dentro do Block Editor. Nas próximas seções, começaremos com um método básico usando um bloco incorporado e, em seguida, passaremos para uma opção mais flexível com um plug-in.

Método 1: Usando o bloco de detalhes nativos

A maneira mais fácil de criar um acordeão no WordPress é usar o Bloco de detalhes. Vamos ver como isso funciona.

Etapa 1: Adicionar o bloco de detalhes

Abra seu post ou página no Block Editor. Clique no ícone de mais (+), procure por Details (Detalhes) e insira o bloco.

Etapa 2: Adicione o título e o conteúdo

Digite o título do seu acordeão no espaço reservado "Write summary" (Escrever resumo). Em seguida, clique no ícone de seta ao lado dele para expandir a seção. Uma vez expandida, uma área de conteúdo aparecerá abaixo, onde você poderá adicionar texto, imagens, listas ou quaisquer outros blocos.

Etapa 3: Adicionar botões adicionais

Para adicionar mais itens de acordeão, repita o mesmo processo inserindo novos blocos Details. Para um layout aninhado, expanda a área de conteúdo de um bloco Details existente, clique no ícone de mais (+) dentro dele e adicione outro bloco Details.

Esse método é perfeito para FAQs rápidas ou configurações mínimas. Lembre-se de que ele oferece apenas um estilo básico e não inclui opções avançadas de design.

Método 2: Usando o plug-in Ultimate Blocks

Se quiser mais opções de estilo e melhor controle sobre seu acordeão, o Blocos definitivos é uma ótima opção. Ele oferece um bloco Content Toggle que funciona perfeitamente no Block Editor.

Etapa 1: Adicione o plug-in ao seu site

No painel do WordPress, vá até o menu Plugins e clique em Add New (Adicionar novo). Na barra de pesquisa, digite Ultimate Blocks e clique em Install Now (Instalar agora) no cartão do plug-in. Após a conclusão da instalação, ative-o para que os novos blocos fiquem disponíveis no editor.

Etapa 2: Inserir o bloco de alternância de conteúdo

Abra a página ou o post em que você deseja colocar o acordeão. Clique no ícone de mais (+), procure Content Toggle e adicione-o. Esse bloco cria uma seção expansível com um título e uma área de conteúdo.

Etapa 3: Adicionar título e conteúdo

Digite o título do acordeão no campo de rótulo e, em seguida, adicione o conteúdo abaixo. Você pode incluir qualquer tipo de bloco dentro do toggle, como texto, imagens, botões, listas ou até mesmo outro bloco Content Toggle dentro da área de conteúdo para criar um acordeão aninhado. 

Para adicionar mais seções de alternância, basta clicar no ícone (+) ao passar o mouse sobre os painéis existentes. Para remover um painel, faça o mesmo, exceto que, em vez de clicar no ícone (+), você escolhe o ícone (x) no canto superior direito. 

Etapa 4: Personalizar o acordeão

No painel de configurações do bloco à direita, você pode controlar o título do painel, ajustar o estado de alternância, ativar o esquema de perguntas frequentes, adicionar uma opção de pesquisa integrada ao acordeão, escolher um ícone de status, alterar as cores do texto ou do plano de fundo e muito mais. 

Se estiver usando-o para perguntas frequentes, você também poderá ativar a marcação do esquema de perguntas frequentes nas configurações para ajudar seu conteúdo a se qualificar para rich snippets na pesquisa do Google.

Conclusão

Se seu objetivo é facilitar a leitura de conteúdo longo, os acordeões oferecem uma solução limpa. Você aprendeu duas abordagens: o bloco Details nativo oferece uma configuração leve, sem plug-ins extras e com carregamento rápido. O bloco Content Toggle da Ultimate Blocks adiciona controles de estilo avançados, painéis aninhados e esquema de perguntas frequentes incorporado. Ambos os métodos aumentam o engajamento da usabilidade móvel e o potencial de SEO. Escolha a abordagem que melhor se adapta ao seu fluxo de trabalho e às suas necessidades de conteúdo.

<p>The post How to Add Accordions in WordPress Block Editor first appeared on Tableberg.</p>

Mas sejamos honestos: criá-los manualmente pode parecer uma tarefa árdua. Até mesmo usuários experientes perdem tempo alinhando células e formatando layouts.

Agora há uma maneira melhor. A IA está entrando em cena para mudar a forma como criamos tabelas. Em vez de arrastar colunas ou mexer com HTML, você descreve o que precisa e vê a tabela ganhar vida. Isso não é o futuro - já está aqui.

Por que usar IA para a criação de tabelas no WordPress?

Depois de trabalhar com sites WordPress com muito conteúdo por anos, vi como a criação de tabelas pode consumir muito tempo. Para quem não é designer e para blogueiros ocupados, isso é um fator de perda de produtividade. A IA resolve isso.

1. Gera instantaneamente layouts de tabela utilizáveis.
2. Ideal para criadores com zero habilidades de design ou codificação
3. Elimina o incômodo de ajustes de formatação e layout
4. Transforma o conteúdo escrito em dados estruturados e resumíveis
5. Lida com conjuntos de dados longos ou complexos sem causar lentidão

Não se trata de substituir o esforço. Trata-se de redirecioná-lo para o que mais importa: seu conteúdo.

Que tipo de tabelas a IA pode ajudar você a criar?

A beleza da IA está em sua variedade. Ela não o limita a um único tipo de tabela. Ele se adapta ao seu fluxo de trabalho:

Tabelas de comparação: Desmembrar as diferenças entre produtos ou planos
Tabelas de preços: Perfeito para lojas SaaS, de serviços ou WooCommerce
Tabelas de dados: Útil para pesquisas, métricas de blog ou listagens
Tabelas de listas: "Principais ferramentas", "melhores aplicativos", "escolhas do editor" - tudo bem organizado
Tabelas de recursos: Ideal para recursos de plugins, especificações de produtos ou destaques lado a lado

Se o seu conteúdo tiver uma estrutura, a IA poderá apresentá-lo em um formato de tabela.

Criar mesas bonitas
Com o Block Editor

Experimente gratuitamente

Obter um profissional

Como a IA pode ajudá-lo a criar tabelas no WordPress

Veja como a IA está simplificando o processo para os usuários do WordPress:

1. Gerar uma tabela a partir do conteúdo do blog

Tem uma postagem em estilo de lista ou de resumo? A IA examina o conteúdo, extrai os pontos principais e constrói uma tabela estruturada em torno deles.

Exemplo: Você escreveu um blog sobre as "Principais ferramentas de SEO" - a IA extrai nomes, preços e principais recursos em um layout de tabela limpo. Confira a demonstração abaixo.

2. Gerar uma tabela a partir de um prompt

Mesmo que esteja começando do zero, você pode informar à IA o que precisa. Uma simples solicitação, como "tabela de preços em três colunas para um aplicativo de condicionamento físico", gera uma tabela pronta que pode ser facilmente ajustada.

Veja a demonstração abaixo.

3. Converter listas de marcadores ou dados brutos em tabelas

Esboçou alguns recursos ou anotações em formato de marcador? Cole-os e deixe que a IA os transforme em uma tabela refinada em segundos.

Como você pode ver abaixo, copiei alguns textos da WowStore e do Product Carousel do meu rascunho e colei no ChatGPT. Pedi que ele criasse uma tabela para mim a partir do texto que forneci. Veja como ele criou a tabela lindamente.

4. Criar tabelas a partir de planilhas ou CSV

Tem um arquivo CSV ou uma planilha? Envie-o para a IA. Ela estruturará os dados adequadamente e até ajudará a estilizá-los para que correspondam ao seu site.

5. Sugerir estilos ou layouts de tabela

Está em dúvida sobre a aparência de sua tabela? A IA pode sugerir formatos com base no tipo de conteúdo, como comparações de afiliados, planos de preços ou prós e contras.

Como o Tableberg está trazendo a criação de mesas com tecnologia de IA?

Se você tiver usado Tableberg antes, você já sabe que ele é um plug-in de tabela de destaque para o Gutenberg. Mas o que vem a seguir é a parte empolgante.

Em breve, o Tableberg permitirá que você o faça:

Criar uma tabela a partir do conteúdo existente do blog
Crie uma tabela apenas descrevendo-a em linguagem natural
Obtenha sugestões instantâneas de layout e estilo

Tudo isso se encaixa diretamente em seu fluxo de trabalho do Gutenberg. Sem ferramentas externas. Sem codificação. Basta escrever, descrever e publicar.

Por que isso é importante para os criadores de conteúdo?

Esses aprimoramentos não são apenas pequenas atualizações. Elas podem mudar todo o seu fluxo de trabalho de conteúdo:

Publique com mais rapidez e eficiência
Gaste menos tempo corrigindo layouts e mais tempo na estratégia
Use tabelas limpas e prontas para dispositivos móveis que aprimorem a experiência do usuário
Adapte-se rapidamente à medida que a IA se torna uma ferramenta padrão na criação de conteúdo do WordPress

Quando tempo é dinheiro, a automação não é mais opcional. Ela é uma vantagem.

Conclusão

A criação de tabelas com tecnologia de IA não é apenas uma conveniência - é uma maneira mais inteligente de trabalhar. Ela elimina as partes repetitivas do processo, permitindo que você se concentre na criação de um conteúdo melhor. De postagens de blog a comparações de produtos, as tabelas são mais fáceis, rápidas e limpas quando a IA cuida do trabalho pesado.

Curioso para experimentar? Dê Tableberg e explore o que é possível fazer com as mesas orientadas por IA.

Leia mais!

Como gerar uma tabela de comparação a partir de uma publicação de blog usando o ChatGPT
O futuro dos plug-ins de tabela: Tendências a serem observadas agora e no futuro
Melhores maneiras de usar tabelas para marketing de afiliados no WordPress
Os 5 principais recursos que economizam tempo do plug-in Tableberg
10 principais recursos que você deve procurar em um plug-in de tabela do WordPress (antes de comprar)
Como destacar produtos recomendados em uma tabela do WordPress

<p>The post How AI Can Help You Create Tables Automatically in WordPress first appeared on Tableberg.</p>