Descubra como fazer um slide de cards e como apresentar qualquer coisa em forma de slide/carrossel no Elementor.
As opções de slides que o próprio Elementor oferece tem um formato fixo, você pode usar o carrossel de depoimentos, carrossel de imagens, mas as opções são limitadas.
Se você quiser criar designs mais originais, um carrossel de cards clicável, por exemplo, você não consegue com os widgets disponíveis.
Mas existe um truquezinho bem fácil pra contornar essa limitação, que eu mostro nesse tutorial.
📜 Códigos CSS:
selector{
--distance: -1.8em;
--background: #929292;
--padding: 2;
}
selector .elementor-swiper-button{
width: 2em;
transform: translateX(var(--distance)) translateY(-1em);
height: 2em;
}
selector .elementor-swiper-button.elementor-swiper-button-next{
transform: scaleX(-1) translateX(var(--distance)) translateY(-1em);
}
selector .elementor-swiper-button i{
width: 100%;
height: 0.1em;
background: currentColor;
position: relative;
opacity: 0.7;
transform: translateY(0.97em) scale(calc(1/var(--padding)));
transition: opacity 0.2s ease-**in**-out;
}
selector .elementor-swiper-button:hover i{
opacity: 1;
}
selector .elementor-swiper-button i:before,
selector .elementor-swiper-button i:after{
content: "";
position: absolute;
width: 50%;
transform: rotate(45deg) translateX(-0.04em);
transform-origin: left center;
height: 0.1em;
background: currentColor;
}
selector .elementor-swiper-button i:after{
transform: rotate(-45deg) translateX(-0.04em);
}
selector .elementor-swiper-button:before{
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: var(--background);
height: 100%;
width: 100%;
border-radius: 100%;
opacity: 0.3;
transition: opacity 0.2s ease-**in**-out;
}
selector .elementor-swiper-button:hover:before{
opacity: 0.8;
}
/* Small Desktop Device */
@media (max-width: 1250px){
selector{
--distance: 0em;
}
}
/* Tablet Device */
@media (max-width: 1024px){
selector{
--distance: 1em;
--background: #929292;
--padding: 2;
--size: 20px;
}
selector .elementor-swiper-button{
font-size: var(--size) !important;
}
}
/* Mobile Device */
@media (max-width: 767px){
selector{
--distance: 1em;
--background: #929292;
--padding: 2;
--size: 20px;
}
}
→ LINKS IMPORTANTES
👨🏻🎨 Elementor PRO: Licença ORIGINAL e Barata – https://elementortemplates.com.br/elementor-pro?utm_source=youtube&utm_campaign=slide-de-cards
🎨 Acervo de Templates para Elementor: https://elementortemplates.com.br/acervo-de-templates?utm_source=youtube&utm_campaign=slide-de-cards
☁️ Hospedagem com Desconto – https://hostinger.com.br/pnp
Cupom de desconto: PNP
💻 TREINAMENTO COMPLETO: https://paginasnapratica.com.br/treinamento
→ CONTINUE APRENDENDO
✨ Elementor Efeito de Texto sobre Imagem no HOVER – https://youtu.be/RFlXL4vPMN0
🃏 Como fazer um Carrossel de Cards com Elementor – https://youtu.be/dHhLkSJmMIw
🕵️ Top 17 Funções ESCONDIDAS do Elementor – https://youtu.be/Bvvy_n0IhQk
✨ 3 Truques de CSS para Elementor – https://youtu.be/MJCJydfYlt4
☁️ Como Hospedar um Site usando a Hostinger – https://youtu.be/8bqDaKl2G_w
🔒 Certificado SSL e Configuração de CDN – https://youtu.be/V15W0f7B21g
🎨 Como Baixar e Instalar Templates para Elementor – https://youtu.be/9KA0IZxECRA
💼 Como Criar Site de Portfolio com WordPress – https://youtu.be/wvGtYpJ5QCw
