Deseja incorporar um carrossel de imagens do WordPress em seu site?
Em meus mais de 10 anos de trabalho com o WordPress, descobri que os carrosséis de imagens são uma forma visualmente impressionante de aumentar o envolvimento em qualquer site. Mas muitas vezes é difícil encontrar um plug-in de carrossel do WordPress que seja poderoso e fácil de usar para iniciantes.
Neste artigo, mostrarei como criar facilmente um carrossel de imagens em seu site WordPress. Você verá como criar um carrossel de imagens responsivo, um controle deslizante simples ou uma galeria de produtos completa, dependendo da sua necessidade.
🧠 Resumo rápido: Como criar um carrossel de imagens no WordPress
- Usar o SeedProd 🧩 - Adicione carrosséis a qualquer página usando o bloco Image Carousel
- Experimente o Jetpack 📸 - Habilite carrosséis de galeria em tela cheia em posts e páginas
- Adicionar carrosséis de produtos 🛒 - Use um plugin gratuito para criar controles deslizantes de imagem do WooCommerce
Como criar carrosséis de imagens para páginas personalizadas do WordPress
O SeedProd é o melhor construtor de sites do WordPress, com mais de 1 milhão de usuários. Ele inclui um plug-in de carrossel integrado ao WordPress que facilita a adição de controles deslizantes de imagem sem código. Com o construtor de páginas de arrastar e soltar, você pode adicionar vários carrosséis de imagens e controles deslizantes a qualquer página do seu site sem codificação.
Você também pode usar o SeedProd para:
- Criar um tema WordPress personalizado
- Aumente sua lista de e-mails com formulários opt-in
- Mostre sua localização física com o Google Maps
- Crie urgência usando cronômetros de contagem regressiva
- Aumente o envolvimento com incorporações de mídia social
- Chame a atenção com títulos animados
- Envolva os visitantes com incorporações de vídeo
- Crie confiança e credibilidade com depoimentos
Com isso em mente, vamos ver como adicionar um carrossel de imagens ao seu site usando o SeedProd.
Etapa 1: Instalar e ativar o plug-in SeedProd
A primeira etapa é fazer o download de uma cópia do plug-in SeedProd. Embora o SeedProd tenha uma versão gratuita para criar landing pages simples, usaremos a versão Pro para acessar todos os recursos avançados.
Em seguida, carregue, instale e ative o plug-in em seu site do WordPress. Se precisar de ajuda com isso, siga estas instruções para instalar um plug-in do WordPress.
Depois de ativar o plug-in, vá para SeedProd " Settings, onde você pode inserir sua chave de licença do SeedProd. Você pode encontrar a chave de licença na área da sua conta do SeedProd, na seção Downloads.
Etapa 2: criar uma página de destino do WordPress
A próxima etapa é navegar até SeedProd " Pages para criar uma nova página de destino.
Na parte superior dessa página, há quatro modos de página diferentes que podem ser ativados com um único clique, incluindo:
- Em breve - Ative uma página em breve para informar os visitantes (e o 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 - Habilite uma página de erro 404 personalizada em seu site WordPress.
Na seção modo de página, você verá qualquer página de destino criada com o plug-in SeedProd. Você pode criar quantas páginas personalizadas do WordPress quiser.
Clique no botão Create New Landing Page (Criar nova página de destino ) para criar uma nova página. Isso mostra a biblioteca de modelos de página de destino responsivos do SeedProd.
Você pode escolher qualquer design de landing page que desejar, mas sugerimos que escolha um modelo que se aproxime da aparência desejada para a sua página. Dessa forma, você não precisará fazer muitas alterações.
Para esta postagem, usei o modelo Travel Webinar Page, que pode ser encontrado clicando na guia Webinar na parte superior da tela.
Para escolher esse modelo, passe o mouse sobre a miniatura e clique no ícone de tique laranja.
Em seguida, você verá uma janela pop-up onde poderá adicionar um nome de página. O nome da página não aparecerá no design da sua landing page, mas definirá o URL da página. Portanto, escolha um nome que faça sentido para seus visitantes quando eles visitarem sua página.
Agora, clique no botão Save and Start Editing the Page (Salvar e começar a editar a página ).
Etapa 3: Personalize o conteúdo de sua página de destino
Depois de iniciar seu modelo, você verá a tela do construtor de páginas do SeedProd. Com a interface de arrastar e soltar, você pode editar todas as partes do seu modelo.
A barra lateral esquerda tem uma ampla seleção de blocos que você pode arrastar e soltar em sua página. Quando um bloco estiver em sua página, você poderá clicar nele para exibir o conteúdo, os modelos e as configurações avançadas de personalização.
Por exemplo, se você quiser adicionar seu logotipo à página de destino, basta arrastar o bloco Image (Imagem) do painel esquerdo e soltá-lo na página.
A partir daí, você pode carregar uma nova imagem ou escolher um logotipo da sua biblioteca de mídia do WordPress. Você também pode ajustar o tamanho e o alinhamento e adicionar um link.
Se você quiser personalizar as cores, as fontes e os planos de fundo de sua página, é igualmente fácil. Na área inferior esquerda do construtor de páginas, clique no ícone de engrenagem para exibir o painel Global Settings (Configurações globais ) e as opções de personalização.
Você pode clicar nas guias Fontes, Cores ou Plano de fundo para personalizar sua landing page. Por exemplo, se você clicar na guia Plano de fundo, poderá carregar uma imagem de plano de fundo personalizada ou alterar o gradiente ou a sobreposição de cores.
Você também tem a opção de usar um vídeo de fundo ou uma apresentação de slides de fundo.
Etapa 4: Adicionar o bloco de carrossel de imagens do WordPress
Mas o motivo pelo qual você está aqui é para adicionar facilmente um carrossel à sua página. Para fazer isso, você pode usar o bloco Image Carousel do SeedProd.
Para este exemplo, você substituirá a imagem principal do herói por um carrossel deslizante. Portanto, primeiro, passe o mouse sobre a imagem existente e clique no ícone da lixeira para removê-la.
Em seguida, selecione o bloco Image Carousel no painel Advanced Blocks 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 Image 1 mostra uma opção para usar sua própria imagem do computador ou da biblioteca de mídia ou escolher uma imagem de estoque isenta de royalties.
Personalização do carrossel de imagens
Após adicionar uma imagem ao carrossel, você pode inserir uma legenda para a imagem e clicar no botão Add Images (Adicionar imagens ) para inserir mais fotos no controle deslizante do carrossel.
Para garantir que seu carrossel fique ótimo em qualquer dispositivo, o SeedProd ajusta automaticamente suas imagens para desktops, tablets e smartphones.
No painel Carousel Settings (Configurações do carrossel ), você pode ajustar mais o controle deslizante de imagens. Por exemplo, você pode:
- Escolha uma cor de navegação escura ou clara
- Escolha a reprodução automática de sua galeria de carrossel
- Selecione a velocidade de reprodução automática em segundos
- Mostrar ou ocultar legendas de imagens
- Selecione o alinhamento da galeria
Se isso não for suficiente, você pode clicar na guia Templates (Modelos) para alterar o estilo da imagem da galeria com menos cliques. Por exemplo, escolhi um estilo com uma sombra suspensa para a imagem.
Na guia Advanced (Avançado ), você pode personalizar a tipografia, as bordas e o espaçamento da legenda e escolher cores e estilos adequados à sua marca.
Quando estiver satisfeito com a aparência do carrossel da sua landing page, clique no botão verde Save (Salvar ) no canto superior direito da tela.
Etapa 5: Configure as definições de sua página de destino
Depois de aperfeiçoar o design da página de destino, há várias configurações que podem ser definidas.
Primeiro, você pode clicar na guia Connect (Conectar ) na parte superior da tela para conectar seu serviço de marketing por e-mail favorito. Essa é uma excelente maneira de garantir que todos os novos leads sejam adicionados automaticamente à sua lista de e-mails.
O SeedProd se integra a todos os principais provedores de marketing por e-mail, incluindo:
- MailerLite
- Sendy
- Contato constante
- GetResponse
- Mad Mimi
- E mais
Consulte a documentação de integração de e-mail para obter ajuda para conectar sua lista de e-mails.
Em seguida, clique na guia Page Settings (Configurações da página) para ver outras configurações que você pode definir no SeedProd. A página de configurações normalmente tem 5 seções, mas isso depende do tipo de página que você cria e do seu plano do SeedProd.
Por exemplo, você pode editar suas configurações gerais e dar à sua página um novo nome e URL ou defini-la como rascunho ou publicação.
Você também pode conectar um plug-in do Google Analytics e plug-ins de SEO do WordPress para rastrear e melhorar o desempenho da sua página.
E na área Scripts, você pode adicionar scripts personalizados e trechos de código, como cookies e pixels de rastreamento.
Por fim, a seção Custom Domain permite que você conecte sua página a qualquer nome de domínio que desejar sem instalar o WordPress nele.
Quando terminar de definir as configurações da página, lembre-se de clicar no botão Save (Salvar).
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 o design fique bom para os usuários móveis. Caso contrário, isso pode prejudicar a experiência do usuário.
Para ver uma prévia da sua página, clique no ícone Mobile Preview na parte inferior da tela.
Em seguida, você pode visualizar sua página como ela ficaria para qualquer pessoa que estivesse navegando em um dispositivo móvel e fazer alterações com o editor visual.
Você também pode alternar rapidamente entre elementos de texto para desktop e celular em qualquer bloco com configurações de tipografia. Isso permite que você faça alterações na página para celular ou desktop sem alternar o modo de exibição.
Quando estiver satisfeito com as versões da landing page para celular e desktop, clique na seta suspensa no botão verde Salvar e selecione Publicar.
Em seguida, você pode clicar no botão See Live Page (Ver página ao vivo ) na tela seguinte para visualizar sua página de destino.
Veja como ficou o carrossel de imagens em meu site de teste:
Sua página agora está no ar, com um carrossel de imagens do WordPress totalmente responsivo para exibir várias imagens de uma só vez.
Como adicionar carrosséis de imagens aos posts do WordPress
Costumo recomendar o Jetpack para iniciantes porque ele é fácil de usar e vem com um controle deslizante de imagem integrado para posts e páginas do WordPress.
O Jetpack é um plug-in gratuito que adiciona muitos recursos úteis ao seu site WordPress.
Por exemplo, ele pode verificar se há problemas de segurança em seu site e oferecer proteção de força bruta contra bots e hackers. Você também pode usá-lo para carregar imagens com lentidão, compartilhar conteúdo em mídias sociais e muito mais.
Mais importante ainda, o Jetpack tem um recurso que permite mostrar galerias de carrossel em tela cheia em posts e páginas. Esse recurso funciona perfeitamente com o editor de blocos (editor Gutenberg), simplificando a adição de carrosséis diretamente aos seus posts e páginas.
Continue lendo para saber como usar o recurso gratuito de carrossel de imagens do Jetpack no WordPress.
Etapa 1: Instalar e ativar o plug-in do Jetpack
A primeira etapa é instalar e ativar o Jetpack. Para fazer isso, acesse a área de administração do WordPress e clique em Plugins " Add New.
A partir daí, role para baixo até ver o plug-in Jetpack e clique em Install Now (Instalar agora) e, em seguida, em Activate (Ativar).
Etapa 2: Ativar a Galeria de carrossel em tela cheia
A próxima etapa é acessar Jetpack " Settings (Configurações ) no painel de navegação esquerdo e clicar na guia Writing (Redação ).
Na parte superior da tela a seguir, você verá o painel Mídia. Nessa área, clique na opção Exibir imagens em uma galeria de carrossel de tela inteira para ativar.
Você também pode optar por:
- Mostrar metadados Exif da foto no carrossel
- Mostrar a área de comentários no carrossel
E escolha um esquema de cores branco ou preto.
Certifique-se de clicar no botão Save Changes (Salvar alterações) antes de prosseguir.
Etapa 3: Adicionar uma apresentação de slides ao seu post ou páginas do WordPress
Agora, você está pronto para criar um carrossel de imagens em qualquer post ou página do WordPress gratuitamente.
Para adicionar facilmente um carrossel a uma postagem do WordPress, crie uma nova postagem ou edite uma postagem existente. Em seguida, clique no ícone de adição dentro do editor de blocos para adicionar um novo bloco do WordPress e clique no bloco Slideshow para adicioná-lo à sua postagem.
Em seguida, você pode clicar no botão Upload para começar a carregar imagens do seu computador para a galeria. Ou pode clicar no botão Media Library (Biblioteca de mídia) para inserir imagens que já estejam na biblioteca de mídia do WordPress.
Agora, escolha as imagens que você deseja adicionar e clique no botão Create New Gallery (Criar nova galeria ).
Na próxima tela, você pode adicionar legendas às suas fotos para explicar o assunto de cada imagem. Em seguida, basta clicar no botão Insert Gallery (Inserir galeria) para adicioná-la à sua postagem.
Etapa 4: Publique seu carrossel de imagens no WordPress
Agora você deve ver uma visualização do carrossel de imagens na postagem do WordPress. Ele terá setas que permitem que você navegue entre as fotos e pontos de paginação que mostram o número de imagens na galeria.
No painel de configurações da apresentação de slides à direita, você pode cativar seu público com efeitos de transição. Uma variedade de animações permite que você deslize ou desvaneça entre as imagens, criando uma experiência visual dinâmica que envolve seus visitantes.
Você também pode alterar o tamanho da imagem, reproduzir automaticamente os slides e atrasar as transições.
Quando estiver satisfeito com a aparência do carrossel de imagens, clique no botão Publicar ou Atualizar. Agora, você pode visualizar sua postagem para ver sua galeria de carrossel de imagens em ação.
Como criar carrosséis de imagens de produtos do WooCommerce
Se você tem um site que usa o WooCommerce, pode exibir facilmente as fotos dos produtos em um atraente controle deslizante de imagens. Para isso, usarei o plugin gratuito Product Gallery Slider para WordPress.
Depois de instalar e ativar o plug-in, navegue até Codeixer " Product Gallery em seu painel do WordPress. Aqui, você pode escolher o tipo de controle deslizante, as dimensões, as opções de navegação, o estilo e muito mais.
Em seguida, vá para a página do produto em que você deseja adicionar o carrossel de imagens. Na barra lateral direita, você verá um novo painel chamado Product Gallery.
É aqui que você adicionará as imagens para o carrossel de produtos. Basta clicar em Add Images (Adicionar imagens ) para selecionar imagens de sua Media Library (Biblioteca de mídia) ou arrastá-las e soltá-las de seu computador.
A partir daí, vá em frente e atualize o produto, e pronto. Agora, você pode visualizar a página e ver o carrossel de imagens do WooCommerce em ação.
Esse plug-in é uma das maneiras mais simples de adicionar um controle deslizante de imagem às suas páginas de produtos do WordPress.
Mais perguntas sobre carrosséis de imagens do WordPress
A seguir, mais dicas sobre imagens do WordPress
Espero que este post tenha ajudado você a aprender como criar um carrossel de imagens no WordPress.
Criar e personalizar qualquer página do WordPress com o SeedProd é muito fácil. Não requer nenhum código, você não precisará contratar um desenvolvedor, e o resultado é uma página de destino focada na conversão do seu tráfego em leads e vendas.
Então, o que está esperando?
Talvez você também goste dos seguintes guias para melhorar suas imagens do WordPress:
- Como adicionar uma imagem em destaque ao WordPress
- Como criar uma galeria de imagens de produtos no WooCommerce
- Como adicionar uma galeria às páginas do WordPress
- Como adicionar imagens de ponto de acesso ao WordPress
- Como adicionar texto a uma imagem no WordPress
- Como criar uma caixa de luz no WordPress para imagens
- Como escurecer uma imagem de fundo no WordPress sem CSS
Obrigado pela leitura! Gostaríamos muito de ouvir sua opinião, portanto, fique à vontade para deixar um comentário com perguntas e feedback.
Você também pode nos seguir no YouTube, no X (antigo Twitter) e no Facebook para obter mais conteúdo útil para expandir seus negócios.
