Como faço um carrossel de imagens no WordPress?

Publicados: 2021-12-06
Image Carousel

Última atualização - 8 de março de 2022

Você pode não estar ciente do termo carrossel, mas ainda os vê com frequência no mercado digital. Um carrossel de imagens é usado na maioria dos sites da nova era: imagens deslizantes, incluindo resumos sobre o produto ou serviços que as empresas oferecem. As imagens giram automaticamente e entram e saem da visualização.

O carrossel de imagens mantém os visitantes do site presos por mais tempo, pois as imagens deslizantes os tornam mais curiosos sobre o produto ou serviço que a empresa oferece. Em alguns casos, o deslizamento da imagem não é automatizado e o visitante precisa girar manualmente a imagem para revelar o próximo slide.

Faça um carrossel de imagens no WordPress

Dependendo do tom do negócio, o carrossel de imagens pode incluir algumas declarações ousadas e revelar muito sobre negócios sem uma descrição longa. Se você deseja aprender maneiras de incorporar um carrossel de imagens em seu site, você veio ao lugar certo.

Vamos descrever o processo de instalação do plugin Smart Slider 3 no word press. Existem várias outras ferramentas para o trabalho e o processo de instalação pode ser semelhante ao Smart Slider 3.

Antes de pular para o tutorial, há um pequeno aviso. Se você está vendendo produtos em um site, optar por um carrossel de imagens pode não ser a opção mais inteligente, no que diz respeito às conversões. Mas se você estiver executando fotografia ou projetando um site e quiser que pareça esteticamente agradável, leia o blog inteiro.

Comece escolhendo o tamanho da imagem

O slide inteligente 3 redimensionará a imagem no wordpress com base no formato de apresentação selecionado. Assim, se as imagens forem grandes, a ferramenta diminuirá o tamanho e vice-versa. E, você deve estar familiarizado, quando as imagens pequenas são ampliadas, a qualidade começa a se deteriorar. Portanto, tente não incluir imagens menores que a dimensão do Carrossel.

Além disso, imagens grandes ficam melhores no Carrossel, mas também têm maior tempo de download. Portanto, você precisa encontrar um equilíbrio entre qualidade e tamanho, para que ainda fique ótimo no Slider.

Uma pequena dica: os carrosséis de imagens deslizam horizontalmente, portanto, escolher imagens mais amplas será mais atraente do que as quadradas.

Instalando o Smart Slider 3

Instalando o Smart Slider 3.png

O processo de instalação do Smart Slider 3 é praticamente o mesmo para qualquer outra ferramenta disponível no mercado. Para começar, primeiro, faça login no seu painel de administração do wordpress. No lado esquerdo, você verá um painel de navegação com muitas opções diferentes para escolher. Entre as opções, escolha o plugin e clique no link “Adicionar novo”.

Uma barra de pesquisa aparecerá na sua frente. Procure o Smart Slider 3 nele. Depois que o plugin estiver instalado, clique na opção ativar.

Iniciando a jornada do carrossel de imagens

O Smart Slider 3 usa imagens da biblioteca de mídia, portanto, certifique-se de carregar algumas imagens antes de começar a fazer o Slider. Você pode assistir ao vídeo tutorial para obter uma visão melhor sobre como começar a selecionar imagens e adicioná-las ao formato da sua apresentação. Pressione no Smart Slider 3 e obtenha o vídeo introdutório “Learn Smart Slider 3” que fornece um conhecimento aprofundado de como usar a ferramenta.

Você pode ter a ajuda do vídeo ou apenas ler este artigo para começar.

Escolha a opção básica no menu.

  • Dê um nome ao seu Slider para facilitar a localização do seu carrossel ao manusear vários carrosséis ao mesmo tempo.
  • Largura e Dimensões afetam o tamanho e a forma do Slider. Ignore a seleção de qualquer pixel que você deseja configurar para ocupar toda a largura do dispositivo ou navegador.
  • Escolher largura e dimensão padrão definiria o carrossel na largura e tamanho atuais, enquanto escolher a opção “largura total” ignoraria qualquer dimensão e faria o carrossel girar em torno de toda a largura das janelas.

Após otimizar a imagem, pressione “Criar”.

Adicionando imagens ao controle deslizante

Adicionando Imagens ao Slider.png
Fonte

Depois de configurar o tamanho e a largura padrão do carrossel, o próximo passo óbvio é preencher o carrossel com imagens atraentes. Para isso, siga os passos abaixo:

  • Clique em Adicionar imagens de slides no Smart Slider 3.
  • Você terá a opção de selecionar uma imagem para o seu Slider. Clique nessa opção.
  • Escolha as imagens da biblioteca do wordpress.
  • O carrossel apresentará as imagens selecionadas. Quando estiver satisfeito com as imagens selecionadas, clique na seção “Publicar”.

Se você planeja inserir um controle deslizante dentro do código, basta copiar o código PHP da ferramenta ou selecionar a opção do editor de postagem.

Quando você começa a escrever um novo blog para o site, a opção três do controle deslizante inteligente aparecerá na página. Se você estiver usando um editor clássico, clique no ícone do controle deslizante inteligente. Agora, selecione o Slider personalizado que você preparou antes e, depois de publicar a postagem, o Slider é carregado no site e pronto para os visitantes verem.

O carrossel avançará ou fará backlinks em ambos os lados dos controles deslizantes para deslizar manualmente pelas imagens.

Por padrão, as imagens do carrossel não deslizariam automaticamente, mas você pode alterar isso.

Ciclo Automático para Imagens de Carrossel

No painel de administração do WordPress, clique no link Smart Slider 3 e selecione a opção de edição. Escolha o estilo “Autoplay” e pressione “Enable”. O tempo padrão entre a troca é de oito segundos. Agora salve a configuração atualizada no botão Salvar no lado direito do painel.

Usando o carrossel como widget

Smart Slider também pode ser usado como WordPress Slider Image. Esses controles deslizantes podem ser adicionados em qualquer lugar como um widget, como uma barra lateral.

  • Você verá um painel de navegação no lado esquerdo. Clique sobre a aparência e depois no link “Widget”.
  • Quando você vir a seção "Widgets disponíveis", clique no botão "Smart Slider".
  • Selecione a zona onde deseja que a imagem seja exibida e selecione o botão “Adicionar widget”.

Imagens ou Sem Imagens é a grande questão

O design e o desenvolvimento de sites são subjetivos, e o que outros podem achar atraente, outros não. Ele passa por várias fases de atualizações e modificações, e o carrossel de imagens já foi o requisito mais procurado em sites quando as empresas começaram a incorporá-lo em todos os lugares.

A discussão acima forneceu orientações passo a passo sobre como adicionar um carrossel de imagens ao site. O processo não é complexo e requer paciência e experiência na seleção de imagens relevantes para melhorar a aparência do site. Carrosséis seriam altamente atraentes para um site criativo, enquanto não seriam úteis em um site de comércio eletrônico.

Portanto, da próxima vez que você planejar adicionar imagens vibrantes nos controles deslizantes, considere avaliar se isso agregaria valor ao site ou afetaria a taxa de conversão de forma significativa.

Leitura adicional

  • Como otimizar o tamanho da imagem do produto?
  • Melhores plugins de zoom de imagem para WooCommerce
  • Dicas inteligentes para melhorar as imagens