Com o WordPress, criar um site é bastante fácil. Criar um site atraente e atraente é algo diferente, e o texto por si só não funciona quando não há escassez de elementos gráficos lindamente projetados para você escolher. Neste tutorial, mostraremos a você um deles: o controle deslizante de imagem.
Criar um controle deslizante de imagem no WordPress é fácil, e mostraremos como fazê-lo usando apenas um dos 60 widgets bonitos e funcionais que vêm com nosso próprio plugin Qi Addons para Elementor. Mas antes de mostrarmos como criar um controle deslizante de imagem atraente, gostaríamos de discutir os próprios controles deslizantes e alguns casos de uso que você pode querer considerar. Aqui está o que vamos falar.
Em web design, um controle deslizante de imagem é uma apresentação de slides de imagens usadas em uma página da web. Eles consistem em várias imagens que mudam de posição em uma animação de transição seja automaticamente ou como uma resposta à ação do usuário, como um clique, um pergaminho ou, em dispositivos móveis, um deslize. Sejam eles automáticos ou acionados pelo usuário, eles tendem a chamar a atenção.
Além do aspecto puramente estético, porém, um controle deslizante também pode realizar funções de navegação e transmitir informações importantes aos visitantes.
Um controle deslizante de imagem normalmente é usado como parte de um site de portfólio ou um site de negócios, mas não há limite real de quando um controle deslizante pode ser usado.
Um controle deslizante de imagem bem projetado normalmente contém a maior parte do informação importante um site deseja transmitir a um usuário em gráficos atraentes. Para um site de negócios, pode ser uma declaração de missão, por exemplo. Para uma livraria ou site de crítica de filmes, pode ser uma vitrine de novos lançamentos. E qualquer loja pode usá-lo para Anuncie uma nova oferta limitada por tempo ou um negócio semelhante.
Como alternativa, você pode adotar uma abordagem minimalista: simplesmente forneça seu site com belas fotos ou gráficos para seus visitantes desfrutarem – uma solução talvez mais adequada para sites de fotografia, galerias, portfólios de artistas ou museus.
Há uma desvantagem nos controles deslizantes de imagem: seu tamanho. Um controle deslizante normalmente contém muitas imagens de alta qualidade e resolução, que pode causar carregamento lento e lentidão no seu site, o que pode levar a experiências ruins do usuário, aumento das taxas de rejeição e classificações de SERP mais baixas.
Se estiver usando imagens de alta resolução, não exagere. E se as desvantagens superarem os possíveis benefícios, você deve evitar completamente os controles deslizantes.
Outra coisa a se considerar são os dispositivos móveis. Se a funcionalidade de seu controle deslizante depende de gráficos de grande formato com muitos detalhes finos, pode ser inútil em dispositivos móveis e provavelmente deve ser excluído ou modificado para a versão móvel de seu site.
Estaremos criando um controle deslizante de imagem usando Complementos Qi para Elementor, um plugin grátis nós desenvolvemos a fim de expandir a já impressionante variedade de widgets do Elementor. Antes de começar a usá-lo, porém, você precisa instalar a versão mais recente do Elementor e, em seguida, instale e ative Complementos Qi para Elementor.
Complementos Qi funcionará com a versão gratuita do Elementor, para que o kit completo e o caboodle não custem um centavo. Tudo o que importa é que sua versão do Elementor esteja atualizada. Também usaremos nosso tema Qi gratuito, que recomendamos vivamente, mas os complementos Qi funcionarão com qualquer tema.
Depois de fazer isso, adicionar um controle deslizante de imagem ao seu site WordPress é fácil e leva alguns minutos. Você pode ver como isso é feito no vídeo abaixo:
Mas se você preferir um tutorial textual passo a passo, nós o ajudamos. Leia.
Estaremos adicionando um controle deslizante de imagem a uma postagem, mas você poderia facilmente adicioná-lo a uma página. Adicionar o widget de controle deslizante de imagem funciona como qualquer outro elemento Elementor: simplesmente encontre-o no menu do lado esquerdo e arraste-o para onde quiser.
Agora você tem o elemento no lugar, mas ele não contém imagens. Para adicionar imagens, clique no mais ícone no Imagens seção do Conteúdo / Geral aba.
Agora você pode selecionar imagens de sua biblioteca de mídia ou fazer upload de algumas novas. Depois de fazer sua seleção, clique em Criar Galeria.
Agora você pode revisar ou editar esta galeria antes de inseri-la. Você também pode alterar a ordem das imagens conforme elas aparecem no controle deslizante, arrastando-as. Quando estiver satisfeito com sua galeria, clique Inserir Galeria.
Agora você deve conseguir ver o controle deslizante da imagem na seção de visualização.
Seguindo para o Configurações gerais / deslizantes seção, encontramos os controles para o comportamento de nosso controle deslizante de imagem.
Habilitar Slider Loop pode ser definido para sim ou Não, e faz o controle deslizante girar de volta sobre si mesmo. Queremos que nossas imagens continuem se movendo por conta própria, por isso estamos deixando em Sim, que é o padrão. O Habilitar slides centralizados controle é usado para centralizar imagens assimétricas, enquanto Ativar Slider Autoplay faz o controle deslizante funcionar sem interação do usuário.
O Duração do slide e a Duração da animação do slide são usados para definir o tempo durante o qual uma imagem está no lugar e a duração da animação de transição. A unidade usada é milissegundos. Vamos definir o nosso Duração do slide para 2000, mas não tocaremos no Controle de duração da animação.
O Habilitar navegação deslizante controle permite que o usuário use setas para navegar no controle deslizante, enquanto o Habilitar paginação de controle deslizante rege os pontos de paginação do controle deslizante. Não usaremos os pontos para este controle deslizante que estamos criando, então vamos mudá-lo para Fora.
Em seguida, o Proporções de imagem controle tem um conjunto de opções que você pode usar para fazer suas imagens parecerem mais uniformes, caso não sejam, como Miniatura, quadrado, retrato, e outros. Vamos deixar o padrão Original, mantendo as proporções originais das imagens.
Habilitar Coluna Parcial permite que você mostre a parte da coluna final que você definiu Valor de Colunas Parciais por. O Numero de colunas menu permite que você escolha o número de colunas de seu controle deslizante. Vamos definir o nosso para Um.
O Colunas responsivas menu permite configurar diferentes números de colunas para diferentes tamanhos de dispositivos, geralmente significando menos colunas em dispositivos menores. Uma vez que só temos uma imagem exibida por vez (de acordo com nosso Numero de colunas configuração), podemos deixá-lo em Pré-definido pois não há como mostrar menos de uma coluna.
O Espaço Entre Itens controle deslizante permite inserir um valor de pixel entre cada slide. Vamos definir o nosso como 0, pois não queremos nenhum espaço entre as imagens. O Efeito de slide menu permite que você escolha entre os Deslizar e Desaparecer animações de transição. Vamos deixar o nosso em Deslizar.
Em seguida, encontramos o Ativar Lightbox Popup. Se ativado, como é o padrão, ele abrirá uma imagem clicada em uma sobreposição. O Passe o mouse sobre a imagem O menu controla o comportamento do controle deslizante ao passar o mouse pelo usuário. Você pode escolher entre Mais zoom, menos zoom, nenhum, e Jogada. Estaremos deixando o nosso em Nenhum.
O Sobreposição de cor e a Overlay Hover Color as configurações fornecem a capacidade de escolher uma sobreposição de cores para suas imagens, seja por padrão ou ao passar o mouse. Não o usaremos para nossa demonstração.
Seguindo para o Estilo aba. Você verá duas seções: o Estilo de navegação do controle deslizante, que se preocupa com as setas de navegação, e o Estilo de paginação do controle deslizante, que tem a ver com paginação. Para os fins deste design, desativamos a paginação, portanto, não usaremos essas configurações.
No Estilo de navegação do controle deslizante seção a primeira opção é o Posição de Navegação cardápio. Aqui você pode escolher a posição das setas que fazem o controle deslizante mudar de imagem. Vamos colocá-los Lado de fora, mas você também pode escolher o padrão Dentro e Juntos, que os colocará abaixo da imagem.
Em seguida, encontramos o Esconder a Navegação opção, que permite ocultar as setas de navegação para dispositivos abaixo de uma determinada largura de tela. Vamos torná-los invisíveis para dispositivos Abaixo de 768 pixels Largo.
Os controles deslizantes de deslocamento (Deslocamento vertical de navegação e Deslocamento horizontal de navegação) permitem mover as setas de navegação de suas posições padrão. Você pode deslizar você mesmo ou inserir valores em pixels, ems ou porcentagens. Não usaremos o controle deslizante de deslocamento vertical, mas definiremos o Deslocamento horizontal de navegação para 6,5%.
As próximas duas opções são Seta de navegação anterior (seta para a esquerda), e Seta de Navegação Próximo (seta para a direita) permitem alterar as setas de navegação padrão. Você pode escolher um em sua biblioteca de ícones ou fazer upload de um SVG. Gostamos das setas como elas são, por isso não as mudaremos.
A seguir, você pode modificar o comportamento de suas setas de navegação usando o Normal / Hover alternancia. Definir os atributos das setas no Normal modo mudará as setas conforme aparecem para o usuário, enquanto o Flutuar modo governa seu comportamento ao passar o mouse.
As duas primeiras opções são Cor da seta de navegação e Cor de fundo da seta de navegação. Aqui você pode escolher ou inserir a cor das setas de navegação ou do plano de fundo. Não usaremos as opções de cores para este design.
Os últimos três controles deslizantes controlam as dimensões da própria seta e de seu suporte. O Tamanho da seta de navegação permite controlar o tamanho da seta, enquanto o “suporte” em Largura do suporte da seta de navegação e Altura do suporte da seta de navegação refere-se ao fundo da seta. Se você selecionou uma cor para Fundo de seta de navegação, você pode usar esses controles deslizantes para alterar suas dimensões. Vamos aumentar o tamanho de nossas flechas para 45 pixels.
Mudando para o Flutuar seção do alternador, podemos ver um controle adicional: Habilitar movimento de seta flutuante. Por padrão, ele anima a seta assim que o usuário passa o mouse sobre ela. Vamos mudar para Não.
O Estilo de paginação do controle deslizante A seção oferece um conjunto semelhante de opções: cores, deslocamento, bordas e tamanho, mas gostamos de nosso controle deslizante de imagem como ele é, apenas com setas de navegação, portanto, não usaremos as opções de paginação.
Dito isso, nosso controle deslizante de imagem está pronto.
Agora, suponha que você queira um controle deslizante de largura total. Com Complementos Qi para Elementor, você também pode fazer isso.
A primeira coisa que você precisa fazer é ir para o Configurações seção clicando no Engrenagem ícone na parte inferior do menu do lado esquerdo. Encontre o Layout da página menu e selecione Elementor Full Width como seu layout. Se você estiver usando nosso tema Qi, também pode selecionar Largura total Qi.
Em seguida, clique no ícone do meio da guia da seção azul para editá-lo.
Você deveria ver o Layout guia de sua seção. O primeiro menu é Largura do Conteúdo. Está definido para Encaixotado, mas você precisa mudá-lo para Largura completa. Depois de selecionar isso, o próximo menu abaixo deve ser o Espaço entre colunas cardápio. Selecionando Nenhuma lacuna nele não deixará nenhum espaço entre o elemento e as bordas da tela.
No entanto, mesmo se você estiver trabalhando com o Encaixotado layout, você ainda pode usar o Largura controle deslizante para alterar a largura do seu widget. Se você arrastá-lo totalmente para a direita ou inserir a largura do layout em pixels, também obterá um controle deslizante de imagem de largura total.
Para concluir
Como você pode ver, configurar um belo e atraente controle deslizante de imagem no WordPress é fácil e leva apenas alguns minutos. Com Complementos Qi para Elementor, também pode ser totalmente gratuito. O widget vem repleto de opções de estilo amigáveis com os efeitos imediatamente visíveis na seção de visualização do Elementor. Agora você sabe tudo o que precisa saber para criar lindos controles deslizantes de imagem para o seu site WordPress, não importa o estilo.
Apoie o nosso trabalho ❤️
Se você gostou deste artigo, considere deixar uma gorjeta para nos ajudar a continuar publicando conteúdo de qualidade.
