Você gostaria de aprender como Zoom em um cartão de perfil com o plug-in do construtor de páginas Elementor ?
Neste novo tutorial Elementor, mostraremos como aplicar um efeito Zoom em um cartão de perfil, revelando o nome do perfil e seus ícones de rede social.
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.
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 adicionar um widget Seção interna na coluna do meio. O widget Internal Section é configurado por padrão com 2 colunas, vamos deletar uma delas. Vamos configurar o resto no painel modificando seu hauteur defende Altura Mínima e Altura mínima vamos definir o cursor para 400.
Na aba Style, vamos modificar o Sobreposição de plano de fundo. Clique em clássico no tipo de plano de fundo e selecione uma imagem da biblioteca e nas configurações de imagem, selecione Centrado Centrado na posição cobertura em Tamanho. opacidade em 1 e
Na secção fronteiras clique % e entrar 4 para todos os raios do meio-fio.
Em número de caixas, defina o controle deslizante para 0 defende Horizontal Em 70 defende vertical Em 63 defende Flou Em -60 defende difusor. Você deve ver um belo efeito de sombra sob sua imagem.
No seção interna deslize o Widget de título. Como título digite Steve Jobs, na guia Estilo, selecione a cor branca # FFFFFF. Na tipografia, selecione o Tamanho 20.
Em seguida, selecione a coluna do Widget de Seção Interna e na guia Estilo, selecione o tipo de borda clicando em Sólido, todas as larguras em 1 e as cores em #FFFFFF.
Na aba avançado, altere as margens para 15 e margens internas 20.
Agora insira os ícones de mídia social arrastando o widget Ícones de mídia social para a seção Interna.
Edite links de mídia social na guia Conteúdo clicando em Cada rede social. Se você quiser adicionar outras redes sociais, clique no botão Adicionaré um elemento
No Campo de Ícones, clique em Biblioteca de Ícones e na barra de pesquisa digite as primeiras letras da sua rede social, assim que a encontrar, selecione-a e clique no botão Inserir.
Em seguida, vá para a guia Style, na seção ícone, mude a cor para personnalisé.
Leia também nosso guia sobre; Como adicionar paginação com Elementor
em Cor Principal, defina a transparência para o mínimo.
em Cor Secundária, selecione a cor # FFFFFF. Em Tamanho, insira 20, Margem Interna em 0.4.
Agora clique na aba avançado, e na seção posicionamentoClique em personnalisé. em largura personalizada, entrar 0.
Descubra também Como usar o seletor de cores com o Elementor
em Posição, selecione absoluto, no turno 15Em Orientação Vertical escolha Meiae mudança defende 20.
Selecione novamente o Seção interna e na guia avançado, na seção CSS customizado (Se você não tiver esta seção, atualize rapidamente para a versão pro do Elementor para continuar)
Copie e cole o seguinte código nesta seção:
/*CSS de superposition d'arrière-plan avec Zoom-In*/
selector{
overflow: hidden !important;
}
selector .elementor-background-overlay{
-webkit-transition: all 0.5s !important;
transition: all 0.5s !important;
-webkit-transform-origin: left;
transform-origin: left;
}
selector:hover .elementor-background-overlay{
-webkit-transform: scale(2);
transform: scale(2);
}A priori, você não deve ver muito, mas se passar o mouse sobre a imagem, verá um zoom aplicado à imagem.
Agora copie e cole o seguinte código após o código anterior para mostrar ou ocultar determinados elementos da coluna:
/*CSS pour Masquer/Afficher un élément de la colonne*/
selector .elementor-column{
opacity: 0;
-webkit-transition: all 0.75s !important;
transition: all 0.75s !important;
}
selector:hover .elementor-column{
opacity: 1;
}Agora, assim que você passa o mouse sobre a imagem, o zoom se aplica à imagem e aparecem os nomes e ícones das redes sociais.
Vamos duplicar esta coluna 2 vezes e excluir as outras 2 colunas.
Altere a imagem de fundo das Seções Internas, bem como o nome e os links das redes sociais.
Pronto, você acabou de fazer essa tarefa facilmente. Basta visualizar o trabalho do seu tablet e smartphone, tentando alterar as margens para corresponder a cada dispositivo.
Obtenha o Elementor Pro agora!
Conclusão
Assim ! É isso neste artigo que mostra como aplicar um efeito Zoom em um cartão de perfil. 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.
...
