Alguma vez você já quis apresentar criar um cartão de produto com Elementor ?
É isso que mostraremos neste tutorial. Para ter uma ideia bastante precisa do que vamos falar hoje, convidamos você a assistir ao vídeo a seguir:
Este tutorial é sobre apresentar produtos que são sapatos, destacando seus tamanhos, cores e o botão comprar de cada um. Ao passar o mouse sobre cada um dos cartões, essa informação aparecerá. Aqui está um breve resumo do que faremos.
Para seguir este tutorial, convidamos você a encontrar fotos de sapatos e ter uma versão Pro do Elementor. Se você ainda não tem, clique neste link para obtê-lo.
Mas vamos voltar para o que estamos aqui.
Vamos criar uma página e modificá-la com Elementor.
Neste, vamos escolher uma estrutura com 3 colunas. Vamos resolver isso Altura defende altura mínima , a altura mínima em VH e defina o cursor para 100.
Na guia Estilo, escolha a cor de fundo para #130640
Na coluna do meio insira um Widget de imagem selecionando uma imagem de sapato de sua biblioteca.
Vá para a guia Estilo e na propriedade da imagem defina a largura para 80
Em seguida, arraste um Widget de título e digite o título sapatos da Nike - Este é um exemplo, poderia ser uma marca totalmente diferente -
Leia também: Como otimizar o layout do seu site com o Elementor
Defina a tag HTML para H3 e centralize o alinhamento
Vá para a guia Estilo e mude a cor do texto para branco
Mude a tipografia também
Em seguida, arraste um Widget de seção interna abaixo de Widget de título que você inseriu acima.
Por padrão, este widget oferece 2 colunas, exclua uma delas. Nisso Widget de seção interna, Insira um Widget de título.
Dê como um título Cortar : e definir a tag HTML para palmo.
Na guia Estilo, altere a cor do Título, Tamanho para 15 e Gordura para 300
Na guia Avançado, defina apenas a margem direita como 5 e na propriedade posicionamento selecionar Inline (Auto).
Adicione na mesma seção interna um widget de botão para Texto 8 e o espaçamento de ícone em 0.
Leia também: Como percorrer uma longa imagem de um portfólio com o Elementor
Na guia Estilo, altere a cor do texto e a cor de fundo do botão respectivamente para Preto e Branco e na Margem Interna digite 6-10-6-10 respectivamente para as margens Internas Superior-Direita-Inferior -Esquerda.
Na guia Avançado, defina apenas a margem esquerda como 5 e, na propriedade Posicionamento, selecione Inline (Automático).
Duplique este botão 3 vezes e altere o texto dos últimos 3 botões para 9,10,11 - você também pode fazer isso usando as letras S, M, L, XL, XXL-
Clique em editar seção e defina o alinhamento horizontal para o centro
Em seguida, duplique esta seção Interna -Seção interna- e modifique Tamanho por Cor remova 3 botões e no que permanecerá apaga o texto do botão.
Na aba Conteúdo do botão, selecione o ícone Círculo na biblioteca de ícones e clique em Inserir para adicioná-lo ao botão.
Na guia Estilo, dê o tamanho 24 para a tipografia e vincule as margens internas e insira 0. Na cor de fundo defina a transparência para min e então você pode alterar a cor do texto para azul, por exemplo.
Em seguida, duplique este botão 3 vezes e altere as cores dos outros dois para amarelo e vermelho. Em seguida, clique na seção interna para editá-la e na guia Avançado defina as margens superior e inferior como -5 e 10.
Agora vamos adicionar um widget de botão abaixo do segundo widget de seção interna, insira como texto Compre Agora e alinhamento ao centro. Na guia Estilo, defina o botão como Branco e o texto do botão como Preto e, em seguida, defina todos os raios da borda como 20.
Selecione a coluna principal em que trabalhamos e defina o alinhamento vertical defende Meio social, na guia Estilo, escolha o tipo de plano de fundo como Degradado e como tipo selecione Radial em seguida, na cor principal, defina a transparência e a localização para 94. Para a segunda cor, defina o local para 77 e o raio das bordas acima de 10.
Na guia Avançado, defina as margens como 0-35-0-35 e as margens internas como 50-20-50-20.
Você pode então ocultar o painel para ver a aparência do seu trabalho. Você verá que seu cartão é muito bonito, mas vamos dar vida a ele animando algumas seções. E para isso vamos animar o Size, a Color e o botão Buy.
Veja também: Como alterar o cabeçalho na rolagem da página no Elementor
Vamos primeiro cortar a primeira seção Interna que exibe o tamanho do produto e na guia Avançado, definir Fade In Up como efeito de movimento - animação de entrada e atraso de animação em 300.
Vamos fazer o mesmo com a seção interna que exibe as cores, mas com um atraso de animação de 800. Para o botão de compra, seu atraso será de 1000
Agora vamos atribuir a classe esconder primeiro Seção interna e botão de compra. Selecione a primeira Seção Interna, na aba Avançado e na propriedade Avançado insira hide-first no campo Classes CSS. Faça o mesmo para a outra seção interna e para o botão de compra.
Portanto, vamos adicionar o código CSS que animará a coluna inteira. Copie o seguinte código:
selector {
altura: 400px;
exibição: flex;
}
/ * CSS para Mostrar / Ocultar * /
selector .hide-first {
display: none;
}
seletor: hover .hide-first {
bloco de exibição;
}
/ * Transformação de imagem * /
selector img {
transição: facilidade .5s;
}
seletor: hover img {
transformar: traduzir (-20px, -40px) girar (-25deg) escala (1.4);
}
/ * Visão geral do celular * /
@media (largura máxima: 767px) {
seletor: hover img {
transformar: traduzir (-20px, 0px) girar (-10deg) escala (1);
}
selector {
margem: 50px 10px;
}
}
Selecione a coluna para modificá-la e vá para a guia Avançado e no campo CSS personalizado, cole este código.
NB: Você deve saber que esta opção só está disponível se você tiver a versão Pro doElementor.
Se for feito, seu mapa será animado ao passar o mouse enquanto, por padrão, esconde os tamanhos, cores e o botão de compra.
Em relação à explicação do código, a parte de comentários fornece uma visão geral. Mas modificando os valores você entenderá para que serve cada instrução.
Veja também: Como adicionar dois botões lado a lado na mesma coluna com Elementor
Se tudo funcionar normalmente, duplique esta coluna duas vezes e exclua as outras colunas vazias.
Basta substituir as imagens e títulos dos outros blocos e, por fim, visualizar seu trabalho.
Você acabou de criar um lindo cartão de produto.
Obtenha o Elementor Pro agora!
Conclusão
Assim ! É isso neste tutorial que mostra como fazer um cartão de produto com Elementor. Se você tiver alguma dúvida sobre como chegar lá, informe-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.
...
