En este tutorial gratuito aprenderás a crear una sección de servicios con iconos flotantes en una composición circular con divi sin plugins (ver demo).
La composición consta de una sección que incluye una fila con dos columnas. En la primera columna, tenemos un círculo central con iconos distribuidos alrededor. Cada icono representa un servicio y presenta un efecto hover; al desplazar el cursor sobre cada icono, se revela la información correspondiente dentro del círculo de la columna 1.
Mientras que en la segunda columna, se encuentra únicamente un título acompañado de una breve descripción general de los servicios. Además, se incluye un botón como llamada a la acción.
Este tipo de composición y funcionalidad no solo puede aplicarse a servicios, sino que también permite mostrar cualquier tipo de información que necesites con dicha disposición. Por ejemplo, puede ser utilizada para mostrar características, testimonios, una sección de equipo, entre otras opciones. En resumen, esta composición es versátil y adaptable a casi cualquier tipo de información; aquí dependerá más de tu creatividad.
Por cierto, esta composición se visualiza perfectamente en computadoras, tabletas y celulares.
En el transcurso de este tutorial vamos a requerir de algunos fragmentos de código CSS y JS que te voy a compartir a continuación para que llegado el momento solamente los copies y pegues:
1. Estilos CSS para convertir la columna 1 en un circulo:
width: 460px !important; min-width: 460px; height: 460px; border-radius: 100%; border: 1px solid #DFE2EE; display: flex; flex-direction: column; align-items: center; justify-content: center;
2. Estilos CSS para los iconos:
width: 22%; height: 22%; background: #ffffff; background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%); border-radius: 100px; box-shadow: 0px 6px 13px rgba(145, 145, 145, 0.2); display: flex; align-items: center; justify-content: center; transition: 0.6s; cursor: pointer;
3. Estilos CSS Generales:
/* Estilos OV Circular */
.ov-info-circular {
position: absolute;
top: 0;
width: 100%;
max-width: 60%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.6s ease, visibility 0.6s ease;
}
.ov-info-circular.open {
opacity: 1 !important;
visibility: visible !important;
}
.ov-icono-circular:hover,
.ov-icono-circular.active {
background:linear-gradient(135deg, #C56CD6 0%,#4741D7 100%) !important;
}
.ov-icono-circular:hover .et-pb-icon,
.ov-icono-circular.active .et-pb-icon {
color: #ffffff !important;
}
4. Código JavaScript para aplicar la funcionalidad:
<script>
document.addEventListener("DOMContentLoaded", function () {
const iconoCircular = document.querySelectorAll(".ov-icono-circular");
const infoCircular = document.querySelectorAll(".ov-info-circular");
let infoActual = null;
infoCircular[0].classList.add("open");
infoActual = infoCircular[0];
iconoCircular[0].classList.add("active");
function handleEvent(index) {
iconoCircular.forEach((ic) => {
ic.classList.remove("active");
});
iconoCircular[index].classList.add("active");
if (infoActual) {
infoActual.classList.remove("open");
}
infoCircular[index].classList.add("open");
infoActual = infoCircular[index];
}
// Agregar el evento según el tipo de dispositivo
iconoCircular.forEach((icon, index) => {
if ('ontouchstart' in window || navigator.maxTouchPoints) {
icon.addEventListener("click", function (e) {
e.stopPropagation();
handleEvent(index);
});
} else {
icon.addEventListener("mouseover", function () {
handleEvent(index);
});
}
});
document.addEventListener("click", function (e) {
let isInfoCircularClicked = false;
infoCircular.forEach((info) => {
if (info.contains(e.target) || e.target === info) {
isInfoCircularClicked = true;
}
});
if (!isInfoCircularClicked) {
return;
}
});
});
</script>
Descarga la demo del ejercicio haciendo click en el botón de abajo, es completamente gratis pero si deseas donarme un café será bien recibido 😋
Hola excelente el tutorial, pero no me mantiene el circulo en los iconos cuando lo hago con imagenes png, habla alguna solución.
gracias!
Hola Markho, ¿Cuál es el link de tu ejercicio? Lo inspecciono para saber que sucede por fa.
Saludos
Hola Oscar, gracias por haber respondido por youtube, lo del desborde ya lo solucione. Extrañamente era el menu de Divi. Pero lo que si sigue fallando es el tamaño en movil y el hover en desktop. Este es el proyecto. De antemano mil gracias
https://www.emprendeconcristina.com/sobre-mi/
Te reenvio por aqui porque no se si youtube apruebe colocar la url
Hola Lorena, estoy revisando tu web y veo bien el tamaño en todas las resoluciones. El hover en escritorio también logro verlo bien.
¿Ya lograste solucionar estos detalles?
hola Oscar, buenos dias mira mi comentario no tiene nada que ver con el tutorial necesito que te pongas en contacto conmigo, tengo unas dudas que quiero que me aclares antes de suscribirme a los tutoriales de pago buen dia.
Hola Carlos, no sé si ya hemos hablado. Pero en la página de suscripción tienes un chat por el cual podemos charlar 🙂
Buenas tardes,
¿Cómo podría poner mis propios iconos personalizados? Teniendo en cuenta el módulo únicamente deja seleccionar los propios iconos que aporta divi. Gracias, un saludo!
Hola Patricia, puedes probar usando el módulo «imagen» en lugar del módulo «icono». Desde el módulo imagen puedes cargar cualquier icono en formato png o jpg que desees.
Hola Oscar, me gustaría saber cómo podría integrar mis propios iconos en este tipo de sección circular.
Hola Irene, no sé si seas «Patricia» porque me ha preguntado lo mismo jeje. Aquí dejo mi respuesta también: puedes probar usando el módulo «imagen» en lugar del módulo «icono». Desde el módulo imagen puedes cargar cualquier icono en formato png o jpg que desees.
Hola Oscar, he hecho dos secciones con los iconos flotantes en la misma pagina, el problema es que en la segunda seccion no se muestra de inicio el texto en el centro, solo se muestra en la primera seccion, incluso si hago dos secciones, una visible para pc y otra visible para tablet y movil, solo se muestra el icono activo y el mensaje en el centro en la primera seccion, o en la seccion que esta mas arriba, solo funciona una sección, no funcionan las dos secciones a la vez, te dejo el link para que veas el problema. Como se podría activar en las dos secciones el icono con el texto en el centro? Gracias
Hola Francisco, entiendo. Para que sea compatible con más de dos secciones tienes que hacer lo siguiente:
1. A cada sección le vas a aplicar la clase «ov-seccion-circular» (sin comillas). Desde ajustes de la sección / Avanzado / ID y Clases de CSS / Clase CSS…
2. El código de la funcionalidad JavaScript lo vas a agregar una sola vez hasta el final de tu página. Pero ahora va ser este:
<script> document.addEventListener("DOMContentLoaded", function () { // Seleccionar todas las secciones const secciones = document.querySelectorAll(".ov-seccion-circular"); // Aplicar la funcionalidad a cada sección independientemente secciones.forEach((seccion) => { const iconoCircular = seccion.querySelectorAll(".ov-icono-circular"); const infoCircular = seccion.querySelectorAll(".ov-info-circular"); let infoActual = null; // Activar el primero por defecto if (infoCircular[0]) { infoCircular[0].classList.add("open"); infoActual = infoCircular[0]; iconoCircular[0].classList.add("active"); } function handleEvent(index) { iconoCircular.forEach((ic) => { ic.classList.remove("active"); }); iconoCircular[index].classList.add("active"); if (infoActual) { infoActual.classList.remove("open"); } infoCircular[index].classList.add("open"); infoActual = infoCircular[index]; } // Agregar eventos iconoCircular.forEach((icon, index) => { if ('ontouchstart' in window || navigator.maxTouchPoints) { icon.addEventListener("click", function (e) { e.stopPropagation(); handleEvent(index); }); } else { icon.addEventListener("mouseover", function () { handleEvent(index); }); } }); }); }); </script>Con esto debe quedar. Cualquier cosa me dices por fa.
Saludos
Funciona perfecto, Gracias
Hola, no me permite cambiar las dimensiones vw en el tamaño en modo para movil se queda igual todo en pixeles, de ahi en fuera todo esta super bien.
Hola, Narce. ¿Qué versión de Divi estás utilizando, la 4 o la 5? Te pregunto porque en Divi 4, para ajustar el tamaño en dispositivos móviles, debes posicionarte sobre la opción, hacer clic en el icono del teléfono y seleccionar la vista móvil. ¿Lo estás realizando de esa manera? Saludos.