Gostaria de aprender a criar um cartão com efeito de portfólio? Neste novo tutorial, mostraremos como fazer isso com Elementor.
Se você não tem ideia do que queremos falar hoje, convidamos você a assistir ao vídeo a seguir:
Então vamos voltar ao porquê de estarmos aqui.
Para concluir este tutorial, você precisará a versão Pro do Elementor, porque usaremos o código CSS personalizado que é compatível apenas com esta versão doElementor.
Leia também: Como exibir texto acima de uma imagem com Elementor
Vamos criar uma nova seção com uma estrutura de 3 colunas, então no painel, vamos definir o hauteur defende Altura Mínimae, em seguida, Altura mínima vamos clicar em VH e defina o controle deslizante para 100.
Vamos selecionar a coluna do meio e soltar nesta coluna o Widget de seção interna. O widget Seção Interna é configurado com 2 colunas por padrão. Sob as 2 colunas, vamos soltar o widget Título com o título Restaurante, selecione H4 para a tag HTML e Centro para alinhamento.
Na aba avançado do widget Título, vamos inserir 30 para o Margem Superior
Vamos mais uma vez selecionar nossa Seção Interna. No painel, vamos modificar sua hauteur defende Altura Mínima e Altura mínima vamos definir o cursor para 380. Em seguida, vamos excluir a coluna direita ou esquerda da seção Interna
Vamos largá-lo Widget de imagem na Seção Interna e insira uma imagem da nossa biblioteca. vamos selecionar Todo para Tamanho da imagem et Centro para Alinhamento.
NB: Se você deseja ter páginas completas como a nossa, convidamos você a capturar as páginas com a ajuda da extensão do Chrome GoFullPage, mas você também pode usar outra.
Descubra também: Como criar uma galeria de imagens com Elementor
Em seguida, na aba Style, Clique em PX de Largura, vamos definir o controle deslizante para 260 e raios de fronteira defende 10
Em seguida, vamos modificar o Box Shadow alterando o Blur para 40 e o Diffuse para -10.
Na guia Avançado, na seção posicionamento, selecione absoluto para o Posição, Orientação Horizontal defende Acanhado, o décalage defende 0, AOrientação Vertical defende Meia.
Vamos duplicar nosso widget de imagem duas vezes. Inevitavelmente, todos eles serão sobrepostos. Vamos abrir o Navegador para que possamos acessar os outros widgets ocultos pelo primeiro.
Vamos substituir a imagem do segundo Widget e em sua aba avançado, vamos modificá-los margens inferiores et Acanhado inserindo 30 para cada. Agora você verá um pequeno atraso,
Faça o mesmo para o terceiro widget de imagem, mas aplique margens de 60 para as margens Inferior e Esquerda. Agora você deve ter uma visão geral de todos os 3 widgets de imagem.
Vamos selecionar nosso widget Seção Interna, vá para sua guia avançado e na seção CSS customizado, copie e cole o seguinte trecho de código:
selector .elementor-widget-image{
transition: ease-in-out 0.6s;
}
selector:hover .elementor-widget-image{
transform: scale(.65);
}
selector:hover .front-img{
transform-origin: center left;
}
selector:hover .mid-img{
transform-origin: center top;
}
selector:hover .last-img{
transform-origin: bottom right;
}
(Se você não tem esta seção, então você não tem a versão Pro, se você quiser continuar, você precisa atualizar sua versão)
Agora, se você passar o mouse sobre nosso mapa, você terá uma animação de zoom
Vamos selecionar nosso primeiro Image Widget (o mais baixo) e em sua guia avançado, vamos pegar imagem frontal para classes CSS.
Para o segundo widget de imagem, vamos digitar mid img para classes CSS.
Para o terceiro widget de imagem, vamos digitar última imagem para classes CSS.
Veja também: Como criar uma galeria de imagens com guias com o Elementor
Passando o mouse sobre nossa coluna agora veremos uma magnífica animação do conteúdo da nossa Seção Interna.
Vamos exibir nossa página em modo tablet Veremos que as imagens não serão exibidas corretamente.
Selecione o primeiro widget de imagem, em sua guia Estilo, vamos modificar a largura clicando em PC e inserindo 150 como largura. Vamos fazer o mesmo com os outros 2 widgets de imagem.
Vamos selecionar nossa Seção Interna, em sua seção Conteúdo, vamos modificar o Altura mínima defende 225.
Vamos exibir nossa página também no modo Smartphone, a priori não apresenta nenhum problema. Mas, caso apresente alguma, vamos selecionar nossa Seção Interna, em sua seção Conteúdo, vamos modificar a Altura Mínima.
Agora vamos duplicar nossa coluna do meio duas vezes e, em seguida, excluir as outras duas colunas vazias.
Vamos modificar os títulos dessas colunas e depois alterar as imagens
Você terá que ter uma seção magnífica da qual aqui estão os resultados:
Pronto, você acabou de fazer essa tarefa facilmente.
Obtenha o Elementor Pro agora!
Conclusão
Aí está ! É isso neste artigo que mostra como criar um cartão com efeito de portfólio. Se você tiver alguma dúvida sobre como chegar lá, avise-nos dentro Comentários.
No entanto, você também pode consultar nossos recursos, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.
Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais.
...