Elementor: Como criar um mapa hexadecimal com efeito

Precisa criar um mapa hexadecimal com efeito hover através do poderoso página Builder Elementor ? Se sim, descubra neste artigo como chegar lá.

Se você quiser ter uma visão geral do que falaremos neste tutorial, convidamos você a assistir ao vídeo a seguir:

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 o nosso guia sobre: Como adicionar migalhas de pão a um site com Elementor

Vamos criar uma nova seção com uma estrutura para 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 de seção interna – Seção Interna – na coluna do meio. Este widget é configurado por padrão com 2 colunas, vamos deletar uma delas. Vamos configurá-lo hauteur defende Altura Mínima e Altura mínima vamos defini-lo controle deslizante para 400.

Na aba Style, vamos definir a imagem de fundo selecionando uma imagem da sua biblioteca e, em seguida, definir sua posição como Superior centrado, Repetir em Não repetido e o Tamanho em cobertura.

em Sobreposição de plano de fundoClique em Degradado para Tipo de plano de fundo, selecione e altere a cor principal em #2299EF e localização em 20, então a cor secundária em #1917BC e localização em 50, o ângulo de 140 e a opacidade 0.85

Em seguida, adicione um Widget de título noSeção Interna e como Título, vamos dar um nome e, em seguida, na guia Estilo do widget Título, altere a cor para # FFFFFF. Em seguida, adicione um Widget Editor de texto, e na aba Style Centralize o texto e altere a cor para # FFFFFF.

Veja também: Como adicionar imagem ao widget da tabela de preços com o Elementor

Selecione novamente Seção Interna, vá para a aba Avançado, na seção Margem Interna, entrar 25-2-2-2

Selecione a Seção Interna novamente e vá para a aba Avançado e na seção CSS Personalizado, copie e cole o seguinte código:

/*Traçage Hexagone*/
selector{
    clip-path: polygon(0 25%, 50% 0, 100% 25%, 99% 75%, 50% 100%, 0 75%);
    -webkit-transition: all 0.5s !important;
    transition: all 0.5s !important;
}

Em seguida, vamos adicionar o segundo trecho de código abaixo ao anterior:

/*CSS pour Afficher/Masquer la Superposition du dégradé*/
selector .elementor-background-overlay{
    -webkit-transition: all 0.5s !important;
    transition: all 0.5s !important;
    opacity: 0 !important;
}
selector:hover .elementor-background-overlay{
    opacity: 0.85 !important;
}
/*CSS pour Afficher/Masquer l'élément de la colonne*/
selector .elementor-column{
    opacity: 0;
    -webkit-transition: all 0.8s !important;
    transition: all 0.8s !important;
}
selector:hover .elementor-column{
    opacity: 1;
}

Então vamos também colar o snippet abaixo.

/*CSS d'effet de transition avec ombre*/
selector:hover{
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
}
.hexa-mom::before{
    content: '';
    position: absolute;
    bottom: -70px !important;
    width: 100%;
    color: #fff;
    height: 60px;
    border-radius: 50%;
    background: -webkit-radial-gradient(rgba(0,0,0,0.15),transparent, transparent);
    background: radial-gradient(rgba(0,0,0,0.15),transparent, transparent);
    display: block;
    -webkit-transition: all 0.8s !important;
    transition: all 0.8s !important;
    z-index: 999;
}
.hexa-mom:hover::before{
    opacity: 1 !important;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
}

Então vamos selecionar a coluna do meio e na aba avançado, entrar hexa-mãe no campo classes CSS.

Vamos duplicar esta coluna 2 vezes e excluir as outras 2 colunas.

Vamos mudar a imagem de fundo de outros widgets Seção Interna, o título e o conteúdo do editor de texto e também as cores dos gradientes do Background Overlay. Você deve ter um resultado parecido com este:

Aqui você acabou de concluir esta 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 para este artigo que mostra como criar um mapa hexadecimal com efeito. 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.

...