Deslizador Logo

Uma parede de logotipos de clientes empurra o resto da sua página para baixo e ainda mostra apenas um punhado de marcas Um controle deslizante de logotipo se encaixa em toda a lista em uma faixa compacta que gira por conta própria Deslizador Logo widget em Complementos Mestres para Elementor constrói essa faixa a partir de qualquer conjunto de imagens de logotipo e, em seguida, adiciona efeitos de hover, dicas de ferramentas, reprodução automática e setas de navegação sem um plugin de controle deslizante separado.

Cada logotipo pode vincular ao site do cliente, trocar para uma segunda imagem no hover ou revelar o nome da marca e uma breve descrição Este guia percorre o widget desde o primeiro arrasto na tela até o carrossel acabado na página ao vivo.

O que o widget Logo Slider faz #

O widget pega uma lista de imagens de logotipo e o transforma em um carrossel responsivo e de reprodução automática Você controla quantos logotipos aparecem ao mesmo tempo, a rapidez com que eles giram e o que acontece quando um visitante passa o mouse sobre um. Ele roda no motor Swiper, para que o controle deslizante seja compatível com o toque em telefones e tablets desde o início.

Ele fica no grupo de widgets de controle deslizante de complementos mestres, próximo ao Carrossel de Imagem e Galeria Slider widgets. Esses dois são construídos para fotos e galerias O Logo Slider é construído para marcas de marca: os logotipos permanecem pequenos, uniformemente espaçados e alinhados em uma única linha.

Antes de começar #

• WordPress com Elementor instalado e ativo.
• Complementos Mestres para Elementor instalado e ativo. Novo no plugin? veja o guia instalação.
• Os logotipos do seu cliente ou parceiro prontos como arquivos de imagem Os logotipos com as mesmas dimensões ficam melhor; algo em torno de 300 por 150 pixels com fundo transparente ou branco funciona bem.

Como adicionar o widget Logo Slider #

No editor Elementor, abra o Elementos painel e pesquisa Deslizador Logo, ou vá até a seção Complementos mestres Arraste o widget para sua página Ele carrega com seis itens de espaço reservado chamados Brand Name, para que você veja a forma do controle deslizante imediatamente e substitua os espaços reservados um por um.

Adicione seus logotipos na seção Logo Items #

No Conteúdo aba, abra Itens Logo. Cada entrada na lista é um logotipo Clique em um item para expandi-lo, ou use a cópia e excluir ícones à direita de cada linha O Adicionar Item botão na parte inferior estende a lista para quantos logotipos você precisar.

Na lista de itens estão três configurações que se aplicam a todo o controle deslizante:

• Resolução de imagem: o tamanho do WordPress serve para cada logotipo, desde miniaturas até Full. Os logotipos são arquivos pequenos, então Full geralmente fica bem.
• Título HTML Tag: a tag de cabeçalho enrolada em torno do nome da marca no hover, H5 por padrão Escolha uma tag que se encaixe na estrutura de cabeçalho da sua página.
• Selecione Evento: o que aciona o efeito de hover Como observa o painel, isso só é disparado quando um tipo de hover está ativado no Logotipo do Cliente.

Dentro de cada item, clique no Logotipo do cliente campo para abrir a biblioteca de mídia WordPress Carregue seus arquivos de logotipo ou escolha os já lá O painel de anexos mostra as dimensões do arquivo, útil para verificar se todos os logotipos compartilham o mesmo tamanho.

Defina o efeito de link e hover para cada logotipo #

Cada item de logotipo carrega o seu próprio Link campo. Cole o URL do cliente e o logotipo se torna clicável na página ao vivo O ícone de engrenagem abre as opções usuais do link Elementor, como abrir em uma nova guia.

O Pairar? dropdown decide o que acontece quando um visitante move o mouse sobre o logotipo. Possui três modos:

• Nenhum: o logotipo apenas fica lá Limpo e simples.
• Texto: o logotipo desaparece e a Marca Nome mais curto Descrição apareça em seu lugar.
• Imagem: o logotipo é trocado por uma segunda imagem que você escolher.

Com Texto selecionados, aparecem dois campos Digite o nome da marca e uma descrição de uma linha, e o widget mostra-os sobre o logotipo no hover Isso se adapta às agências que querem dizer o que fizeram por cada cliente sem sair do controle deslizante.

Com Imagem selecionado, a Imagem do logotipo do Hover campo aparece em vez disso Um truque comum: use um logotipo em escala de cinza como a imagem principal e a versão colorida como a imagem de pairar, para que os logotipos se iluminem à medida que os visitantes se movem pela faixa.

Adicione uma dica de ferramenta a um logotipo #

Cada item também possui um Dica de ferramenta alternar. Ligue-o e uma pequena bolha aparece quando os visitantes pairam sobre esse logotipo. O Configurações tab controla o comportamento:

• Conteúdo: o texto dentro da dica de ferramenta.
• Colocação: onde a bolha se senta, Topo por padrão.
• Siga Cursor: deixe a dica rastrear o mouse em vez de permanecer fixo.
• Animação e gatilho: como a dica de ferramenta aparece, Escale no Hover por padrão.

O Estilo tab ao lado de Configurações estiliza a bolha em si: cores, tipografia e espaçamento As dicas de ferramentas funcionam bem para rótulos curtos como “Partner desde 2019” que não precisam do modo de pairar de texto completo.

Configure as setas de navegação #

Abrir o Navegação seção para controlar como os visitantes movem o controle deslizante manualmente. O Navegação dropdown define o tipo de controle, com setas como a escolha padrão.

• Mostrar barra de rolagem?: adiciona uma barra arrastável sob o controle deslizante.
• Posição das setas: Centro coloca uma seta em cada lado do controle deslizante Centro superior ou Centro inferior agrupa ambas as setas acima ou abaixo dele.
• Colocação: mantém as setas dentro da caixa deslizante ou as move para fora dela.
• Esconder a seta no celular?: deixa cair as setas em telas pequenas, onde deslizar faz o trabalho.
• Próximo Ícone e Ícone Anterior: troque as divisas padrão por qualquer ícone na biblioteca Elementor.

Sintonize o comportamento do carrossel #

O Configurações Carrossel seção impulsiona o movimento do controle deslizante É aqui que uma linha estática de logotipos se torna a faixa rotativa que os visitantes esperam.

• Slides por coluna: quantos logotipos são exibidos de uma só vez, de 1 a 6. quatro ou cinco se adequam à maioria dos layouts de desktop, e o ícone responsivo permite definir uma contagem menor por dispositivo.
• Layout: Carrossel é o controle deslizante plano padrão.
• Altura Automática: deixa a altura do controle deslizante seguir a linha do logotipo.
• Velocidade de reprodução automática e reprodução automática: gire os logotipos automaticamente A velocidade é o atraso em milissegundos, então 5000 significa um novo conjunto a cada cinco segundos.
• Pausa no Hover: interrompe a rotação enquanto o cursor está sobre o controle deslizante, que combina bem com efeitos de hover e dicas de ferramentas.
• Slides para rolar: quantos logotipos avançam por etapa.
• Corrediça central, cursor de captura, modo sem arrastar: centralize o logotipo ativo, mostre um cursor de captura ou deixe os visitantes jogarem a tira livremente.
• Loop: executa o controle deslizante infinitamente, que é o que uma tira de logotipo quase sempre quer Uma coisa a ser observada: o loop precisa de mais logotipos do que a contagem de Slides por Coluna Com cinco colunas e apenas cinco logotipos, não há nada extra para girar.

Estilo o controle deslizante do logotipo #

Mudar para o Estilo guia. Quatro seções cobrem a aparência do controle deslizante: Itens de carrossel, Items de carrossel Hover, Ícone e Navegação.

Artigos Carrossel #

Esta seção enquadra cada célula do logotipo, com estados Normal, Hover e Ativo.

• Antecedentes, Tipo de borda, Raio de borda, Sombra de caixa: dê a cada logotipo uma moldura estilo cartão ou deixe tudo vazio para uma faixa limpa.
• Preenchimento e lacuna de itens: espaço dentro de cada célula e a distância entre os logotipos A lacuna é a maneira mais rápida de fazer uma faixa lotada respirar.
• Modo Sombra e Opacidade: sombras suaves e transparência para os logotipos.

Carrossel Itens Passe o mouse #

Esta seção estiliza o estado de hover escolhido na guia Conteúdo, incluindo a sobreposição de texto.

• Fundo, Fronteira, Sombra de Caixa, Preenchimento, Margem: a moldura em torno de um logotipo pairado.
• Nome Cor, Tipografia de Nome, Espaçamento: o texto da marca que aparece no modo de passagem de texto.

Ícone #

A seção Ícone estiliza o pequeno ícone mostrado com conteúdo hover: sua cor, fundo, borda, preenchimento, margem e tamanho da fonte.

Setas navegação #

A seção Navegação estiliza os botões de seta, com estados Normal e Hover separados.

• Cor e Fundo: o glifo da seta e o botão atrás dele.
• Tipo de borda, raio de borda, preenchimento, tamanho: moldar os botões; um raio completo faz os botões redondos que você vê na maioria dos sites modernos.
• Espaço entre setas: a lacuna entre os dois botões quando eles ficam juntos acima ou abaixo do controle deslizante.

O resultado na página #

Visualize ou publique, e o controle deslizante é executado ao vivo: os logotipos giram no temporizador de reprodução automática, respondem às setas e disparam seus efeitos de pairar e dicas de ferramentas Aqui está a faixa acabada com cinco logotipos por visualização e uma seta de cada lado.

Casos de uso comum #

• Tiras do logotipo do cliente nas páginas iniciais de agências e freelancers, com cada logotipo vinculado a um estudo de caso.
• Carrosséis parceiros e patrocinadores para eventos, organizações sem fins lucrativos e páginas de integração SaaS.
• “As apresentados nas barras de imprensa do” com logotipos de publicações vinculados à cobertura.
• Marca mostra em sites de distribuidores e varejistas listando os rótulos que carregam.
• Pilhas tecnologia em sites de portfólio, usando dicas de ferramentas para nomear cada ferramenta.

Dicas para um controle deslizante de logotipo melhor #

• Mantenha cada logotipo do mesmo tamanho. Dimensões mistas fazem a linha saltar à medida que desliza Exportar todos os logotipos em telas idênticas, como 300 por 150, mantém a tira estável.
• Use o hover escala de cinza para cor. Defina uma imagem principal em escala de cinza e a versão colorida como a Imagem do Logotipo Hover A tira permanece silenciosa até que os visitantes interajam com ela.
• Ative Pause on Hover com reprodução automática. Ninguém consegue ler uma dica de ferramenta em um alvo em movimento.
• Esconder setas no celular. A deslizamento os substitui e a tira permanece limpa em telas pequenas.
• Combine os slides por coluna com a largura do logotipo. Logotipos de marcas de palavras largas precisam de menos colunas do que marcas de ícones compactos Se um logotipo parecer espremido, solte a contagem em uma antes de tocar nos arquivos de imagem.

Perguntas frequentes #

Embrulhando #

O widget Logo Slider cobre todo o trabalho de um carrossel de logotipo do cliente no Elementor: um repetidor para os logotipos, links por logotipo e efeitos de hover, dicas de ferramentas, reprodução automática com loop e estilo até os botões de seta Para controles deslizantes de fotos e galerias, olhe para o Carrossel de Imagem e Galeria Slider widgets. Navegue pelo conjunto completo de Widgets e extensões Master Addons, e veja o página preços pelo que o Pro acrescenta por cima.