Necesita crear un mapa hexadecimal con efecto de desplazamiento a través del poderoso creador de página Elementor ? Si es así, descubre en este artículo cómo llegar.
Si quieres tener una visión general de lo que hablaremos en este tutorial, te invitamos a ver el siguiente video:
Para completar este tutorial, necesitará la versión Pro de Elementor, ya que usaremos un código CSS personalizado que solo es compatible con esta versión deElementor.
Lea también nuestra guía sobre: Cómo agregar migas de pan a un sitio web con Elementor
Vamos a crear una nueva sección con una estructura para 3 columnas, luego en el panel, definamos el hauteur en Altura mínimay luego Altura mínima hagamos clic en VH y ajuste el control deslizante a 100.
Agreguemos un Widget de sección interna – Sección Interior – en la columna del medio. Este widget está configurado por defecto con 2 columnas, eliminemos una de ellas. Vamos a configurarlo hauteur en Altura mínima y Altura mínima vamos a definirlo deslizador a 400.
En la pestaña Estilo, configuremos la imagen de fondo seleccionando una imagen de su biblioteca, luego configuremos su posición en Centrado superior, Repetir en no repetido y el tamaño en Cubrir.
Sobre superposición de fondohacer clic en Degradado para tipo de fondo, seleccione y cambie el color principal en #2299EF y ubicación en 20, luego el color secundario en #1917BC y ubicación en 50, el ángulo en 140 y la opacidad en 0.85
Luego agrega un Widget de título en elSección interior y como Título, Démosle un Nombre, luego en la pestaña Estilo del widget Título, cambie el color a # FFFFFF. Luego agrega un Widget de editor de texto, y en la pestaña Estilo Centre el texto y cambie el color a # FFFFFF.
Ver también: Cómo agregar una imagen al widget de tabla de precios con Elementor
Seleccionar de nuevo Sección interior, ve a la pestaña Avanzado, en la sección Margen Interno, ingresar +25 (2) 2-2
Seleccione la Sección interna nuevamente y vaya a la pestaña Avanzado y en la sección CSS personalizado, copie y pegue el siguiente 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;
}
A continuación, agreguemos el segundo fragmento de código a continuación al 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;
}
Luego, peguemos también el fragmento a continuación.
/*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);
}
Luego seleccionemos la columna del medio y en la pestaña Avanzado, ingresar hexa-mamá en el campo Clases de CSS.
Dupliquemos esta columna 2 veces y eliminemos las otras 2 columnas.
Cambiemos la imagen de fondo de otros widgets Sección interior, el Título y el contenido del editor de texto y también los colores de los degradados de Superposición de fondo. Deberías obtener un resultado similar a este:
Aquí acabas de completar esta tarea fácilmente. Simplemente obtenga una vista previa del trabajo de su tableta y teléfono inteligente, tratando de cambiar los márgenes para que coincidan con cada dispositivo.
¡Obtenga Elementor Pro ahora!
Conclusión
Listo ! Eso es todo por este artículo que le muestra cómo crear un mapa hexadecimal con efecto. Si tiene alguna inquietud sobre cómo llegar, háganoslo saber dentro de comentarios.
Sin embargo, también puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
