Como Criar um Carrossel de Imagens no WordPress (3 Maneiras Fáceis) bsp;

A maioria dos plugins de carrossel do WordPress parecem impressionantes em demonstrações, mas levam uma eternidade para configurar, e os populares são notórios por adicionar peso à página.

Se você está criando um portfólio, uma loja WooCommerce ou uma página de destino, existe um método de carrossel de imagens do WordPress feito para sua configuração. Vou mostrar as três opções mais rápidas.

Como crio um carrossel de imagens no WordPress?

A maneira mais rápida é o bloco Carrossel de Imagens do SeedProd. Arraste-o para qualquer página, carregue suas imagens e defina a velocidade de reprodução automática em cerca de 5 minutos.

Para posts do WordPress, o Jetpack adiciona um recurso gratuito de slideshow. Páginas de produtos WooCommerce podem usar o plugin gratuito Product Gallery Slider.

Como Criar Carrosséis de Imagens para Páginas Personalizadas do WordPress

SeedProd é o melhor construtor de sites WordPress, com mais de 1 milhão de usuários. Ele inclui um plugin de carrossel WordPress integrado que facilita a adição de sliders de imagem sem código. Com seu construtor de sites de arrastar e soltar, você pode adicionar vários carrosséis e sliders de imagem a qualquer página do seu site sem codificação.

Com isso em mente, vamos ver como adicionar um carrossel de imagens ao seu site usando o SeedProd.

Etapa 1: Instale e Ative o Plugin SeedProd

O primeiro passo é baixar uma cópia do plugin SeedProd. Embora o SeedProd tenha uma versão gratuita para criar páginas de destino simples, usaremos a versão Pro para acessar todos os recursos avançados.

Em seguida, carregue, instale e ative o plugin no seu site WordPress. Se precisar de ajuda com isso, siga estas instruções para instalar um plugin do WordPress.

Após ativar o plugin, acesse SeedProd » Configurações, onde você pode inserir sua chave de licença do SeedProd. Você pode encontrar sua chave de licença na área da sua conta SeedProd, na seção Downloads.

Etapa 2: Crie uma Página de Destino no WordPress

O próximo passo é navegar até SeedProd » Páginas para criar uma nova página de destino.

No topo desta página, há 4 modos de página diferentes que você pode ativar com um único clique, incluindo:

• Em breve – Ative uma página "Em breve" para informar aos visitantes (e ao Google) sobre seu novo site.
• Modo de manutenção – Informe aos visitantes que você está temporariamente fora do ar para manutenção.
• Login – Ative e crie uma página de login personalizada do WordPress.
• 404 – Ative uma página de erro 404 personalizada em seu site WordPress.

Abaixo da seção de modo de página, você verá qualquer página de destino que criar com o plugin SeedProd. Você pode criar quantas páginas personalizadas do WordPress desejar.

Clique no botão Criar Nova Página de Destino para criar uma nova página. Isso exibirá a biblioteca de modelos de página de destino responsivos do SeedProd.

Você pode escolher qualquer design de página de destino que desejar, mas sugerimos escolher um modelo que se aproxime de como você deseja que sua página fique. Dessa forma, você não precisará fazer muitas alterações.

Para este post, usei o modelo de página de webinar de viagens, que você pode encontrar clicando na guia Webinar na parte superior da tela.

Para escolher este modelo, passe o mouse sobre a miniatura e clique no ícone de tique laranja.

Em seguida, você verá um pop-up onde pode adicionar um nome à página. O nome da página não aparecerá no design da sua página de destino, mas define o URL da sua página. Portanto, escolha um nome que faça sentido para seus visitantes quando eles acessarem sua página.

Agora clique no botão Salvar e Começar a Editar a Página.

Etapa 3: Personalize o Conteúdo da Sua Página de Destino

Assim que o modelo carregar, você verá o construtor de sites de arrastar e soltar do SeedProd. Pule para a Etapa 4 para adicionar o carrossel.

Etapa 4: Adicionar o Bloco de Carrossel de Imagens do WordPress

Ao contrário de plugins de carrossel independentes, o bloco Carrossel de Imagens do SeedProd é integrado diretamente ao construtor de sites. Nenhum plugin separado para instalar e nenhum carregamento extra de JavaScript em sua página.

Mas o motivo pelo qual você está aqui é para adicionar facilmente um carrossel à sua página. Para fazer isso, você pode usar o bloco Carrossel de Imagens do SeedProd.

Para este exemplo, você substituirá a imagem principal do herói por um carrossel deslizante. Então, primeiro, passe o mouse sobre a imagem existente e clique no ícone da lixeira para removê-la.

Em seguida, selecione o bloco Carrossel de Imagens no painel Blocos Avançados e arraste-o para sua página.

Você pode clicar no bloco em sua página para ver as configurações do carrossel. Por exemplo, clicar na seção Imagem 1 mostra uma opção para usar sua própria imagem do seu computador ou biblioteca de mídia ou escolher uma imagem de estoque isenta de royalties.

Personalizando Seu Carrossel de Imagens

Após adicionar uma imagem ao carrossel, você pode inserir uma legenda para a imagem e clicar no botão Adicionar Imagens para inserir mais fotos em seu slider de carrossel.

Para garantir que seu carrossel fique ótimo em qualquer dispositivo, o SeedProd ajusta automaticamente suas imagens para desktops, tablets e smartphones.

No painel Configurações do Carrossel, você pode ajustar ainda mais seu slider de imagens. Por exemplo, você pode:

• Escolher uma cor de navegação escura ou clara
• Escolher reproduzir automaticamente sua galeria de carrossel
• Selecionar a velocidade de reprodução automática em segundos
• Mostrar ou ocultar legendas de imagem
• Selecionar o alinhamento da galeria

Se isso não for suficiente, você pode clicar na aba Modelos para alterar o estilo da imagem da sua galeria com menos cliques. Por exemplo, escolhi um estilo com uma sombra de imagem.

Na aba Avançado, você pode personalizar a tipografia da legenda, bordas e espaçamento, além de escolher cores e estilos que se encaixem na sua marca.

Quando estiver satisfeito com a aparência do carrossel da sua página de destino, clique no botão verde Salvar no canto superior direito da sua tela.

Etapa 5: Configure as Definições da sua Landing Page

Clique em Configurações da Página para dar um nome à sua página e configurá-la para publicação.

Etapa 6: Publique Sua Página de Carrossel de Imagens

Antes de publicar sua página de destino, visualize-a no celular para garantir que seu design fique bom para os usuários de celular. Caso contrário, isso pode prejudicar a experiência do usuário deles.

Para ver uma prévia da sua página, clique no ícone Visualização Mobile na parte inferior da sua tela.

Você poderá então ver sua página como ela apareceria para qualquer pessoa navegando de um dispositivo móvel e fazer alterações com o editor visual.

Você também pode alternar rapidamente entre elementos de texto de desktop e mobile em qualquer bloco com configurações de tipografia. Isso permite que você faça alterações na sua página mobile ou desktop sem mudar o modo de visualização.

Quando estiver satisfeito com as versões mobile e desktop da sua página de destino, clique na seta para baixo no botão verde de salvar e selecione Publicar.

Em seguida, você pode clicar no botão Ver Página ao Vivo na tela seguinte para visualizar sua página de destino.

Veja como meu carrossel de imagens aparece no meu site de teste:

Sua página agora está no ar, completa com um carrossel de imagens WordPress totalmente responsivo para exibir várias imagens de uma vez.

Como Adicionar Carrosséis de Imagens a Posts do WordPress

Eu costumo recomendar o Jetpack para iniciantes porque é fácil de usar e vem com um slider de imagens integrado para posts e páginas do WordPress.

Jetpack é um plugin gratuito que adiciona uma tonelada de recursos úteis ao seu site WordPress.

Por exemplo, ele pode escanear seu site em busca de problemas de segurança e oferecer proteção contra força bruta de bots e hackers. Você também pode usá-lo para carregar imagens lentamente (lazy load), compartilhar conteúdo nas redes sociais e muito mais.

Mais importante, o Jetpack tem um recurso que permite exibir galerias de carrossel em tela cheia em posts e páginas. Esse recurso funciona perfeitamente com o editor de blocos (editor Gutenberg), tornando simples adicionar carrosséis diretamente aos seus posts e páginas.

Continue lendo para descobrir como usar o recurso gratuito de carrossel de imagens do WordPress do Jetpack.

Etapa 1: Instale e Ative o Plugin Jetpack

O primeiro passo é instalar e ativar o Jetpack. Para fazer isso, vá para a área de administração do seu WordPress e clique em Plugins » Adicionar Novo.

A partir daí, role para baixo até ver o plugin Jetpack e clique em Instalar agora, depois em Ativar.

Etapa 2: Ative a Galeria de Carrossel em Tela Cheia

O próximo passo é ir para Jetpack » Configurações no painel de navegação esquerdo e clicar na aba Escrita.

Na parte superior da tela seguinte, você verá o painel Mídia. Nesta área, clique no controle deslizante Exibir imagens em uma galeria em tela cheia para a posição ativada.

Você também pode escolher:

• Mostrar metadados Exif de fotos na galeria
• Mostrar a área de comentários na galeria

E escolher um esquema de cores branco ou preto.

Certifique-se de clicar no botão Salvar alterações antes de prosseguir.

Etapa 3: Adicione um Slideshow ao Seu Post ou Páginas do WordPress

Agora, você está pronto para criar uma galeria de imagens em qualquer post ou página do WordPress gratuitamente.

Para adicionar facilmente uma galeria a um post do WordPress, crie um novo post ou edite um post existente. Em seguida, clique no ícone de mais dentro do editor de blocos para adicionar um novo bloco do WordPress e clique no bloco Slideshow para adicioná-lo ao seu post.

Em seguida, você pode clicar no botão Upload para começar a enviar imagens para sua galeria do seu computador. Ou você pode clicar no botão Biblioteca de mídia para inserir imagens que já estão em sua biblioteca de mídia do WordPress.

Agora, escolha quais imagens você deseja adicionar e clique no botão Criar nova galeria.

Na tela seguinte, você pode adicionar legendas às suas fotos para explicar sobre o que é cada imagem. Em seguida, basta clicar no botão Inserir galeria para adicioná-la ao seu post.

Etapa 4: Publique Seu Carrossel de Imagens do WordPress

Agora você deve ver uma prévia da sua galeria de imagens em seu post do WordPress. Ela terá setas que permitem navegar entre as fotos e pontos de paginação que mostram o número de imagens na galeria.

No painel de configurações do slideshow à direita, você pode cativar seu público com efeitos de transição. Uma variedade de animações permite deslizar ou desaparecer entre as imagens, criando uma experiência visual dinâmica que envolve seus visitantes.

Você também pode alterar o tamanho da imagem, reproduzir os slides automaticamente e atrasar as transições.

Quando estiver satisfeito com a aparência da sua galeria de imagens, clique no botão Publicar ou Atualizar. Agora, você pode pré-visualizar seu post para ver sua galeria de imagens em ação.

Como Criar Carrosséis de Imagens de Produtos WooCommerce

Se você tem um site que usa WooCommerce, pode exibir facilmente fotos de produtos em um atraente slider de imagens. Para isso, usarei o plugin gratuito Product Gallery Slider WordPress.

Após instalar e ativar o plugin, navegue até Codeixer » Galeria de Produtos no seu painel do WordPress. Aqui, você pode escolher seu tipo de slider, dimensões, opções de navegação, estilo e muito mais.

Em seguida, vá para a página do produto onde você deseja adicionar a galeria de imagens. Na barra lateral direita, você verá um novo painel chamado Galeria de Produtos.

É aqui que você adicionará as imagens para sua galeria de produtos. Simplesmente clique em Adicionar Imagens para selecionar imagens da sua Biblioteca de Mídia, ou arraste e solte-as do seu computador.

A partir daí, prossiga e atualize o produto, e é isso. Agora, você pode visualizar a página e ver seu carrossel de imagens do WooCommerce em ação.

Este plugin é uma das maneiras mais simples de adicionar um slider de imagens às páginas de produtos do seu WordPress. Para uma galeria completa de produtos com suporte a lightbox, consulte nosso guia sobre criação de uma galeria de imagens de produtos WooCommerce.

Mais Perguntas Sobre Carrosséis de Imagens do WordPress

Como adicionar um carrossel ao WordPress sem um plugin?

O bloco de Galeria nativo do WordPress permite adicionar várias imagens em um só lugar, e nosso guia sobre adicionar uma galeria a páginas do WordPress cobre os passos. Para um carrossel completo com controles de reprodução automática e navegação, o bloco Carrossel de Imagens do SeedProd é a melhor escolha, sem a necessidade de um plugin separado.

Qual é a diferença entre um slider de imagens e um carrossel no WordPress?

Um slider exibe uma imagem por vez em uma área de exibição em tela cheia. Um carrossel exibe várias imagens lado a lado que os usuários podem percorrer. Sliders funcionam bem para seções de herói e mensagens focadas. Carrosséis são melhores para galerias de produtos, portfólios e coleções onde você deseja mostrar vários itens ao mesmo tempo.

Qual é o melhor tamanho para um carrossel de imagens no WordPress?

O tamanho mais comum é 1200×600 pixels, que equilibra a qualidade da imagem e a velocidade de carregamento. Se o seu carrossel ocupar toda a largura da página, aumente para 1600px de largura. Mantenha todas as imagens do seu carrossel com as mesmas dimensões para que elas não mudem ou sejam cortadas ao percorrer a galeria.

O SeedProd tem um recurso de carrossel gratuito?

O bloco Carrossel de Imagens do SeedProd está disponível em planos pagos. A versão gratuita do SeedProd não inclui o bloco Carrossel de Imagens. Se você precisa de uma opção gratuita, o Jetpack adiciona funcionalidade de carrossel a posts e páginas do WordPress sem custo.

O que faz os carrosséis de imagens deixarem um site WordPress lento?

A causa mais comum são imagens com tamanho excessivo. Fazer upload de imagens de 3000px de largura quando seu carrossel é exibido a 800px força o WordPress a carregar muito mais dados do que o necessário. Plugins de carrossel que carregam JavaScript e CSS em todas as páginas, mesmo em páginas sem carrossel, também adicionam peso desnecessário. O bloco Carrossel de Imagens do SeedProd só carrega nas páginas onde você o utiliza.

Próximo, Mais Dicas de Imagens para WordPress

Criar um carrossel de imagens no WordPress não requer código ou um desenvolvedor. O bloco Carrossel de Imagens do SeedProd cuida disso em minutos.

Você também pode gostar dos seguintes guias para melhorar suas imagens do WordPress:

• Como Adicionar uma Imagem Destacada ao WordPress
• Como Criar uma Galeria de Imagens de Produtos no WooCommerce
• Como Adicionar uma Galeria a Páginas do WordPress
• Como Adicionar Imagens com Hotspots ao WordPress
• Como Adicionar Texto em uma Imagem no WordPress
• Como Criar um Lightbox no WordPress para Imagens
• Como escurecer uma imagem de fundo no WordPress sem CSS

Obrigado por ler! Adoraríamos saber sua opinião, então sinta-se à vontade para participar da conversa no YouTube, X e Facebook para mais conselhos e conteúdo úteis para expandir seus negócios.