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:

crie um cartão com efeito portfólio

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.

seção de 3 colunas

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

crie um cartão com efeito portfólio

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

crie um cartão com efeito portfólio

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.

crie um cartão com efeito portfólio

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.

crie um cartão com efeito portfólio

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.

crie um cartão com efeito portfólio

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.

crie um cartão com efeito portfólio

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

crie um cartão com efeito portfólio

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.

crie um cartão com efeito portfólio

Vamos exibir nossa página em modo tablet Veremos que as imagens não serão exibidas corretamente.

crie um cartão com efeito portfólio

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.

crie um cartão com efeito portfólio

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.

crie um cartão com efeito portfólio

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:

crie um cartão com efeito portfólio

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.

...