Os usuários de internet de hoje têm muitas opções, e um site mal projetado dificilmente encontrará qualquer favor do público. Isso é parte da razão pela qual a estética está se tornando cada vez mais importante: você precisa prender seus visitantes não apenas com seu excelente conteúdo (criar o que é difícil o suficiente), mas também com a forma como ele é apresentado.
Neste tutorial, gostaríamos de mostrar uma forma de apresentar o conteúdo de sua imagem: a galeria de cartões. Uma galeria de cartas é simplesmente uma galeria que “embaralha” como um baralho de cartas. É mais ou menos assim:
Adicionar uma galeria de cartões ao seu site WordPress é fácil e grátis, então, se você acha que isso poderia melhorar o seu site, não há razão para hesitar. Mas como saber se você poderia usar uma galeria de cartões? É só uma escolha estéticaou é também um elemento de design funcional? Gostaríamos de abordar essas questões e responder a algumas perguntas que você possa ter antes de chegarmos às porcas e parafusos de como fazer.
Aqui está o que vamos falar:
Uma galeria de cartões tem vários usos, mas principalmente é uma galeria: uma vitrine para fotos ou outras imagens seus visitantes podem navegar em seu lazer.
Cada uma das imagens em uma galeria de cartões também pode ser usada para criar um link para outra página. Assim você pode use sua galeria de cartões para navegação a outros sites ou ao seu próprio site. Você pode, por exemplo, criar logotipos para seus projetos, apresentá-los como cartões e vinculá-los a páginas de projetos individuais, tornando as galerias de cartões ideais para portfólios. Ou você pode usá-los em vez das páginas da equipe, por meio das quais um visitante pode clicar em uma imagem em miniatura de um membro de sua equipe e ter um link para sua página de biografia.
No entanto, mesmo que não seja usada para navegação, uma galeria de cartões é um elemento animado clicável. Sua os usuários se sentirão mais engajados quando recebe algo para fazer, em vez de simplesmente olhar as imagens, tornando a experiência do usuário melhor no geral.
O que acontece com as galerias de imagens é que elas necessariamente contêm imagens e, claro, a galeria de cartões não é exceção. Isso significa que, quando uma página contendo uma galeria é carregada, pode levar muito mais tempo para carregar do que carregar uma página sem muitas imagens.
Se você estiver usando imagens de alta resolução para suas galerias, isso pode significar longos tempos de carregamento, o que pode, por sua vez, afetar negativamente sua taxa de rejeição e suas classificações SERP. Se isso for uma preocupação sua, use os gráficos com moderação.
Claro, certos sites (carteiras de artistas, estúdios de tatuagem e estúdios de fotografia vêm à mente, em particular) têm que usar muito as imagens por sua própria natureza. É por isso que você deve olhar para a otimização de imagens se quiser melhorar a experiência do usuário.
Mostraremos como adicionar uma galeria de cartões usando nosso próprio plugin Qi Addons for Elementor. Antes de usá-lo, no entanto, você precisa instalar e ativar a versão mais recente do editor visual Elementor (a versão gratuita é adequada) e, em seguida, instalar e ativar Complementos Qi. Qi Addons é um plugin totalmente gratuito, para que toda a configuração não precise custar um centavo.
O Qi Addons for Elementor expande o conjunto já impressionante de elementos de design do Elementor com 60 novos widgets projetados profissionalmente. Inclui uma ampla variedade de opções de galeria, e o widget da galeria de cartões é apenas uma delas. Mostraremos como adicionar o widget a uma postagem, mas você pode adicione-o a qualquer área pronta para widget de seu site. Estaremos usando nosso tema Qi gratuito, mas o plug-in deve funcionar bem com qualquer tema que você esteja usando.
Com Complementos Qi para Elementor, criando uma bela e funcional galeria de cartões leva apenas alguns minutos de mexer em algumas configurações simples do widget. Você pode assistir como isso é feito em nosso tutorial em vídeo:
Mas se você prefere seus tutoriais em formato de texto, nós temos tudo o que você precisa: continue lendo.
Adicionar uma galeria de cartões Qi Addons ao seu site WordPress começa como com qualquer outro widget Elementor: encontre-o no menu do lado esquerdo e arraste-o para onde quiser.
A versão padrão do elemento contém três imagens de espaço reservado. Usando o Em geral seção do Contente guia, você pode preencher sua galeria de cartões com suas próprias imagens.
A primeira opção é o Estilo de imagem aleatória, que está definido para Direito por padrão, o que significa que os cartões clicáveis estão à direita. Você também pode fazer com que suas cartas sejam embaralhadas no Deixou, ou Esquerda e direita, que é o que selecionamos.
Em seguida, encontramos o Itens de imagem seção. É aqui que você pode adicionar as imagens que quiser à sua galeria de cartões. A versão padrão do widget contém três imagens, e é disso que precisamos, mas você pode adicionar mais clicando no + Adicionar Item botão.
Para adicionar uma imagem a um Item, Clique nisso. Um Item tem dois controles: Link e Imagem do item. O Link O campo pode ser usado para vincular a uma página quando um item é clicado. Definiremos o nosso como #, vinculando à mesma página em que o elemento está, para que você possa ver como ficará e como se comportará quando vinculado. Deixá-lo em branco significa que o item da página não será vinculado a nenhum lugar.
Para adicionar uma imagem, clique no Imagem do item caixa. O Escolha a imagem o botão deve estar visível ao passar o mouse.
Você pode escolher uma imagem de sua biblioteca de mídia ou carregar uma nova. Depois de selecionar uma imagem, clique em Inserir mídia.
Colocamos o # no Link campo e selecionou uma imagem para cada Item. O último controle no Em geral seção é o Proporções de imagem cardápio. Isso controla o tamanho e as proporções da imagem para todos os itens. Você pode escolher entre Miniatura, Quadrado, Paisagem, Retratoe várias outras opções. Nós fomos com Original, preservando o tamanho de nossas imagens.
Seguindo para o Estilo guia, você verá que existem apenas dois controles deslizantes. O primeiro a subir é Escala. Você pode usar este controle deslizante para reduzir as imagens inativas (clicáveis) para uma porcentagem de seu tamanho original. Definir este controle deslizante para 0 manterá o tamanho original das imagens. Nós escolhemos 0,19 para nossa configuração de escala, tornando as imagens inativas 81% de seu tamanho original.
O Etapa de deslocamento O controle deslizante é usado para deslocar as imagens inativas em relação à ativa, ou seja, quanto da imagem inativa (clicável) é exibida. Definir este controle deslizante como 0 iria ocultá-los inteiramente, tornando-os impossíveis de clicar e inutilizando todo o widget. Definimos o nosso para 37.
E aí está, uma galeria de cartões animados simples, elegante e eficaz, feita em minutos.
Para concluir
Como você pode ver, com Complementos Qi para Elementor, você pode adicionar um widget bonito, atraente e envolvente ao seu site WordPress em minutos e totalmente gratuito. Se um site que você está desenvolvendo pode se beneficiar dessa exibição impressionante, agora ele faz parte do seu kit de ferramentas do WordPress. E se esta é a primeira vez que você encontra Complementos Qi para Elementor, observe que este é apenas um de seus muitos usos possíveis.
Apoie o nosso trabalho ❤️
Se você gostou deste artigo, considere deixar uma gorjeta para nos ajudar a continuar publicando conteúdo de qualidade.
