Como adicionar um controle deslizante de largura total no Elementor: Um guia completo com exemplos

Largura total Os cursores deslizantes são um elemento de design popular que capta a atenção e é ideal para apresentar imagens em destaque, promoções e mensagens-chave. Elementor torna simples a criação de um deslizador de largura total num site WordPress. Este guia fornece passos e exemplos detalhados para o ajudar a configurar e personalizar um deslizador de largura total.

Passo 1: Instale e active o plug-in Elementor

Se o Elementor não estiver instalado, siga estes passos:

1. Inicie sessão no painel de controlo do WordPress.
2. Navegue até Plugins > Adicionar novo Plugins.

3. Na barra de pesquisa, escreva Elementore, em seguida, clique em Instale.

4. Uma vez instalado, clique em Ativar.

Este guia utiliza Elementor Pro, que inclui o Deslizador widget. Se o Elementor Pro não estiver disponível, pode utilizar um plugin de terceiros como o Addons essenciais para o Elementor também oferece a funcionalidade de deslizamento.

Passo 2: Crie uma nova página ou edite uma já existente

Para adicionar o seletor, pode criar uma nova página ou editar um já existente:

1. Aceda a Páginas > Adicionar novo Página para uma nova página, ou selecione uma página existente para editar.

2. Clique em Edite com o Elementor para abrir o editor do Elementor.

Passo 3: Adicione o widget Slider

No Elementor, utilize o widget Slider:

1. Clique no botão Adicionar novo contentor e selecione um layout de uma coluna.

2. No painel esquerdo, procure o ficheiro Deslizador e arraste-o para a secção.

Passo 4: Configure as definições da barra deslizante

Personalize o conteúdo da barra deslizante:

1. Adicionar conteúdo de diapositivos: Clique em cada diapositivo, carregue imagens e adicione um título, descriçãoe um apelo à ação botão.

2. Exemplo: Um blogue de viagens pode apresentar destinos populares com um "Saiba mais" ou "Explore".

3. Definir imagens de fundo: Utilize imagens de alta resolução (pelo menos 1920px de largura) para manter a clareza.
   • Melhores práticas: Optimize imagens entre 100KB e 300KB para um carregamento mais rápido.
4. Ligações de botões: Ligue o botão de cada diapositivo a páginas relevantes, como páginas de produtos ou publicações de blogues.

Passo 5: Defina o esquema de largura total

Para apresentar o seletor em largura total:

1. Selecione a secção com o widget do cursor e clique em Editar contentor.

2. No Disposição separador, defina Largura do conteúdo para Largura total.

3. Conjunto Diferença de coluna para Sem lacuna para que o cursor cubra toda a largura do ecrã.

4. Aceda ao Avançado e defina Margem e Acolchoamento para zero, assegurando que o cursor se alinha com as margens do ecrã.

5. Um portefólio de fotografia pode utilizar barras deslizantes de largura total para imagens de paisagens, cobrindo o ecrã sem margens.

Passo 6: Personalize o aspeto da barra deslizante

Para ajustar o estilo da barra deslizante:

1. Definições de altura: No Conteúdo ajuste a altura de acordo com o desenho. Opções como Adaptar ao ecrã ou definições de altura personalizadas (por exemplo, 600px) estão disponíveis.

2. Sobreposição de fundo: No separador Estilo, adicione uma sobreposição de fundo semi-transparente para melhorar a legibilidade do texto.
   • Utilize uma sobreposição escura em imagens claras ou uma sobreposição clara em imagens escuras.

3. Tipografia: Pode ajustar os tipos de letra, estilos e cores para corresponder à marca do sítio. O Elementor permite-lhe personalizar a tipografia para títulos, descrições e botões.

4. Efeitos de animação: Adicionar Animações de entrada ou Efeitos de pairar no Avançado para interatividade.

Passo 7: Guarde e pré-visualize

Depois de finalizar as definições do seletor:

1. Clique em Publicar ou Atualização.
2. Utilize o Pré-visualização (ícone de olho) para ver o aspeto do cursor ao vivo.

Verifique se a barra deslizante carrega corretamente e é bem apresentada em vários dispositivos (computador, tablet e telemóvel).

Conclusão

Um deslizador de largura total acrescenta impacto visual, destacando conteúdos em destaque, como promoções ou mensagens críticas. O Elementor oferece uma gama de opções de personalização, tornando simples a criação de um deslizador responsivo e atrativo.

Perguntas mais frequentes

1. Porque é que o cursor não está a ser apresentado em largura total?

Verifique se o Secção e Coluna os layouts são definidos como Largura total e que a Margem e Acolchoamento são definidos como zero.

2. Como é que posso acelerar os tempos de carregamento dos cursores?

Optimize as imagens, guardando-as em formatos como JPEG ou WebP. Idealmente, o tamanho dos ficheiros deve situar-se entre 100 KB e 300 KB.

3. Como posso tornar o seletor mais interativo?

Utilizar Animações de entrada e Efeitos de pairar na secção Avançado pode dar um toque dinâmico.

Seguindo estes passos e exemplos, pode criar uma barra deslizante de largura total que melhora a disposição do site e a experiência do utilizador.