Necessità di creare una mappa esadecimale con effetto hover attraverso il potente Page Builder Elementor ? Se è così, scopri in questo articolo come arrivarci.
Se vuoi avere una panoramica di ciò di cui parleremo in questo tutorial, ti invitiamo a guardare il seguente video:
Per completare questo tutorial, avrai bisogno la versione Pro di Elementor, perché utilizzeremo il codice CSS personalizzato che è supportato solo da questa versione diElementor.
Leggi anche la nostra guida su: Come aggiungere breadcrumb a un sito web con Elementor
Creiamo una nuova sezione con una struttura a 3 colonne, quindi nel pannello, definiamo il Hauteur su Altezza minimapoi Altezza minima clicchiamo su VH e imposta il cursore su 100.
Aggiungiamo un Widget Sezione interna – Sezione interna – nella colonna centrale. Questo widget è configurato di default con 2 colonne, cancelliamone una. configuriamolo Hauteur su Altezza minima e Altezza minima definiamolo cursore a 400.
Nella scheda Style, impostiamo l'immagine di sfondo selezionando un'immagine dalla libreria, quindi impostiamo la sua posizione su Centrato superiore, Ripetere Non ripetuto e la Taglia su Coperchio.
Sur Sovrapposizione di sfondo, Cliquez sur Degradato per Tipo di sfondo, seleziona e attiva il colore principale #2299EF e posizione su 20, quindi il colore secondario acceso #1917 a.C e posizione su 50, l'angolo acceso 140 e l'opacità 0.85
Quindi aggiungere un Widget del titolo a L 'Sezione interna e comme titolo, Diamo un Nome, quindi nella scheda Stile del widget Titolo, cambia il colore in # FFFFFF. Quindi aggiungere un Widget Editor di testoe nella scheda Style Centrare il testo e cambiare il colore in # FFFFFF.
Vedi anche: Come aggiungere un'immagine al widget della tabella dei prezzi con Elementor
Seleziona di nuovo Sezione interna, vai alla scheda Avanzate, nella sezione Margine interno, accedere 25-2-2-2
Seleziona nuovamente la Sezione Interna e vai alla scheda Avanzate e nella sezione CSS personalizzato, copia e incolla il seguente codice:
/*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;
}
Successivamente, aggiungiamo il secondo snippet di codice di seguito al precedente:
/*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;
}
Quindi incolliamo anche lo snippet di seguito.
/*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);
}
Quindi selezioniamo la colonna centrale e nella scheda avanzato, accedere esa-mamma nel campo Classi CSS.
Duplichiamo questa colonna 2 volte ed eliminiamo le altre 2 colonne.
Cambiamo l'immagine di sfondo di altri widget Sezione interna, il titolo e il contenuto dell'editor di testo e anche i colori dei gradienti di sovrapposizione di sfondo. Dovresti avere un risultato simile a questo:
Qui hai appena completato facilmente questo compito. Visualizza in anteprima il lavoro del tuo tablet e smartphone, cercando di modificare i margini in modo che corrispondano a ciascun dispositivo.
Ottieni Elementor Pro ora!
Conclusione
Ecco ! Questo è tutto per questo articolo che ti mostra come creare una mappa esadecimale con effetto. Se hai dubbi su come arrivarci, faccelo sapere all'interno commentaires.
Tuttavia, puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...
