Você gostaria de criar uma seção de membro da equipe com Elementor ?
Bem você veio ao lugar certo. Hoje mostraremos como criar uma seção maravilhosa de membros da equipe com o Página do construtor Elementor.
Para concluir este tutorial, você precisará de um Versão Pro Elementor, porque nós usar código CSS personalizado o que só é possível com a versão pro doElementor. Se você ainda não fez isso, atualize-o.
E para entender do que estamos falando neste tutorial, convidamos você a assistir ao seguinte vídeo:
Para começar, crie uma página e edite-a com o Elementor.
Em seguida, insira uma estrutura com 3 colunas neste último, depois no painel, abaixo da aba Conteúdo, defina Altura como Altura mínima e selecione Altura mínima VH e defina o controle deslizante como 100.
Vamos selecionar a coluna do meio para editá-la e ir para a guia Avançado. Vamos definir todas as margens internas para 30.
Vamos inserir um widget de Seção Interna nesta coluna, depois deletar uma das colunas contidas na Seção Interna e depois no painel abaixo da aba Conteúdo, vamos também definir a altura como Altura mínima e o controle deslizante como 450px.
NoAlinhamento vertical selecionar Meia e Transbordar selecionar mascarar.
Na aba Style Altere o fundo para clássico e selecione uma imagem da sua biblioteca.
Leia nosso guia sobre: Como criar um cartão de produto com Elementor
em Posição selecionar Superior centrado, Ficheiro em anexo defende rolagem, Diga novamente defende Não repetido et Tamanho defende cobertura
Nas bordas defina o fronteiras defende 12.
Vamos adicionar efeitos de sombra. Em Shade of box vamos modificar vertical defende 22, Flou defende 40 et Difusor defende -10.
Vamos adicionar um Widget de título na seção Interna e dê um nome ao nosso membro e Centro o widget.
Leia também: Como alterar o cabeçalho na rolagem da página com o Elementor
Na aba Style, vamos modificá-lo cor do texto e tipografia escolher 22 para o tamanho da fonte e 500 para o graxa, Transformação defende Maiúsculas et espaçamento entre letras defende 1.2
Então vamos duplicar o widget de título e modifique o título do segundo widget e na tipografia escolha 15 para o tamanho da fonte e 500 para a largura, transformação em défaut e espaçamento entre letras em 1.2
Vamos para a aba avançado e definir o Margem Superior defende -15. Vamos adicionar o widget de ícones de mídia social à nossa seção interna.
Vamos para a aba Style, altere a cor para Personalizado, torne a cor primária transparente e defina as margens internas para 0.30
Na aba avançado, Defina as margens Alto em -15 e baixo em 20
Em seguida, selecione a coluna da Seção Interna para modificá-la e na aba Style selecione o tipo clássico e na cor vamos aproveitar #FFFFFF28.
Leia também: Como percorrer uma longa imagem de um portfólio com o Elementor
Em seguida, selecione a coluna da Seção Interna para modificá-la e na guia avançado no campo classes CSS, vamos pegar informação de membro
Então selecione Seção Interna então na guia avançado no campo CSS customizado, cole o seguinte código:
/ * Efeito de vidro CSS * /
seletor {
–Altura: 150px;
–Inferior: -150px;
estouro: oculto! importante;
}
selector .member-info {
altura: var (- altura);
posição: absoluta;
filtro de fundo: desfoque (15px);
inferior: 0;
transição: facilidade de entrada e saída de 5s;
}
Após o primeiro código CSS, cole o seguinte:
/ * CSS para ocultar ou mostrar ao passar o mouse * /
selector .member-info {
fundo: var (–fundo);
}
seletor: hover .member-info {
inferior: 0px;
}
Agora, quando você passa o mouse sobre a imagem, as informações do membro aparecem.
Duplique a coluna 2 vezes e exclua as outras colunas vazias
Em seguida, selecione a Seção Interna e altere a imagem de fundo para a imagem de outro membro da equipe, altere seu nome e profissão, faça o mesmo com a outra coluna.
Visualize seu trabalho no tablet e celular enquanto melhora as margens e muito mais para uma melhor visualização.
E é assim que você pode criar uma seção maravilhosa de membros da equipe
Obtenha o Elementor Pro agora!
Conclusão
Assim ! É isso para este tutorial que mostra como criar uma seção de membro da equipe. Se você tiver alguma dúvida sobre como chegar lá, avise-nos no 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.
...
