Como criar um carrossel de imagens vertical no WordPress usando o Elementor

Muneeb Tutoriais do WordPress Jan 21, 2022

Uma apresentação de slides de fotos ou informações que os espectadores podem selecionar pressionando um botão que as move para frente ou para trás na apresentação de slides é conhecida como carrossel de imagens. Ele ilumina a aparência geral do seu site e auxilia na promoção de serviços essenciais.

Fotos atraentes podem atrair novos visitantes ao seu site, atraindo sua atenção imediatamente. Este tutorial mostrará como utilizar o Elementor para criar um carrossel de imagens vertical no WordPress.

Como criar um carrossel de imagens vertical Elementor

Crie uma imagem adequada para o seu Elementor Vertical Smooth Carousel primeiro. Você precisará de uma imagem que já contenha todas as suas fotografias. Usando o Crello , um programa semelhante ao Canva, você pode criar um, mas qualquer software de edição de imagem deve ser suficiente.

Claro, isso tem a desvantagem de não ser dinâmico e pode ser inconveniente quando apenas algumas das fotos precisam ser alteradas. No entanto, oferece vários benefícios. Ele produz um carrossel somente CSS sem requisitos JS. A animação é muito suave, com muito pouca utilização da CPU. Em poucas palavras, é incrivelmente eficaz, embora um pouco inconveniente.

Create Amazing Websites

Com o melhor criador de páginas gratuito Elementor

Comece agora

Em seguida, dê à sua coluna a coluna de nome vertical como uma classe.
Defina o Espaço de Widgets para essa coluna como 0 nas configurações de Coluna e Layout .

Add an image element to that column and choose the picture you made. Adicione um elemento de imagem a essa coluna e escolha a imagem que você criou. Assign the class carousel vertical to the picture element . Atribua o carrossel de classe vertical ao elemento de imagem .

Faça tudo exatamente como você deseja e, em seguida, replique-o. Nessa coluna, você precisará de dois deles, cada um com parâmetros idênticos. E então, você pode avançar para usar o código CSS fornecido abaixo. Você pode usar esse código em qualquer lugar para fazer as alterações.

.carouselvertical {
    animation: 10s linear 0s infinite normal none running vloop;
}

.verticalcolumn 

Há comentários consideráveis com o código para permitir que você entenda o suficiente e faça as alterações sempre que precisar. Usando este código, você pode criar com sucesso um carrossel vertical Elementor .

5 melhores plugins de carrossel de imagens

1. Carrossel Postal Para Elementor

O Post Carousel For Elementor da iThemelandCo é um plug-in de complemento do Elementor que permite criar carrosséis de mídia incrivelmente criativos com seus layouts de carrossel prontos. O plugin se integra perfeitamente ao Elementor e oferece 19 layouts pré-construídos. Esses layouts são totalmente personalizáveis e podem ser facilmente personalizados de acordo com suas necessidades usando o mecanismo de arrastar e soltar do Elementor.

Carrossel de produtos para Elementor

O Product Carousel For Elementor é outro plug-in de complemento do Elementor projetado explicitamente para que as lojas de comércio eletrônico mostrem seus produtos em um carrossel. O plug-in oferece 12+ controles de carrossel, como Reprodução automática, Deslizar para rolar, Pausar ao passar o mouse, etc. O plug-in é altamente responsivo em todos os tipos de dispositivos e você pode criar quantos carrosséis desejar. Além disso, é um plugin 100% multilíngue, o que significa que funcionará mesmo que seu site seja traduzido para outro idioma.

3. Carrossel rápido para Elementor

Fast Carousel For Elementor é um plug-in de complemento do Elementor que afirma ser rápido o suficiente para construir um carrossel para você em um minuto. Por mais impressionante que pareça, também oferece diferentes tipos de galerias, além de mais de dez estilos únicos. O plugin está equipado com mais de cinco controles de carrossel, além de oferecer opções de cores personalizadas para cada carrossel. Para uma solução rápida, essa pode ser sua melhor aposta para um carrossel de imagens.

Esperamos que você tenha achado este tutorial útil para aprimorar seu site. Certifique-se de se juntar a nós em nosso Facebook  e Twitter para continuar recebendo tutoriais que tornam sua jornada no WordPress divertida e fácil.

Divi WordPress Theme