Cerrar video

Cómo crear una sección de servicios con iconos flotantes en una composición circular con divi sin plugins

por | Nov 30, 2023 | Tutorial gratuito | 2 Comentarios

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.

Cómo crear una sección de servicios con iconos flotantes en una composición circular con divi sin plugins

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 😋


Descargar JSON desde

Tutoriales Relacionados

2 Comentarios

  1. Markho Dietsch

    Hola excelente el tutorial, pero no me mantiene el circulo en los iconos cuando lo hago con imagenes png, habla alguna solución.

    gracias!

    Responder
    • Oscar Viedma

      Hola Markho, ¿Cuál es el link de tu ejercicio? Lo inspecciono para saber que sucede por fa.

      Saludos

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Tutoriales Exclusivos

Tutoriales exclusivos OV Divi

Lleva tus sitios web creados con divi al siguiente nivel.

Accede a tutoriales exclusivos y únicos de divi y saca el máximo provecho del mejor tema y constructor visual para WordPress.

$8 USD / mes

Pin It on Pinterest