En este tutorial, aprenderás cómo crear un efecto en tu página web utilizando la versión gratuita de Elementor. El efecto consiste en reducir el alto de la cabecera y el tamaño del logo al hacer scroll, además de cambiar el color de fondo de la cabecera. Para lograr esto, seguiremos los siguientes pasos:
Preparación
1.1. Asegúrate de tener la versión gratuita de Elementor instalada en tu sitio web. Si tienes la versión Pro, no necesitas instalar ningún plugin adicional.
1.2. Accede al panel de WordPress y ve a «Apariencia > Elementor Header and Footer».
1.3. Haz clic en «Añadir nuevo» y asigna un nombre a tu cabecera. Asegúrate de seleccionar la opción para que esta cabecera se muestre en todas las partes de tu sitio web y sea visible para todos los usuarios. Luego, haz clic en «Publicar».
Diseñar la Cabecera
2.1. Después de publicar la cabecera, haz clic en «Editar con Elementor».
2.2. Agrega un contenedor de orientación horizontal. Puedes personalizar este contenedor según tus preferencias, como el grosor de la fuente.
2.3. En el contenedor, primero coloca el logo de tu web y luego el menú.
2.4. Define un punto de ruptura para la versión móvil si lo deseas.
2.5. Alinea verticalmente el contenedor y selecciona la justificación del contenido como «espacio intermedio».
Crear la Transición
3.1. Para crear la transición, utilizaremos JavaScript y CSS. Ve al «Contenedor Avanzado» y asigna una clase, por ejemplo, «micabecera» al contenedor.
3.2. Asigna otra clase, como «miimagen», al logo de la web.
3.3. Para que la cabecera se quede fija en la parte superior al hacer scroll, ve a «Efectos de Movimiento» y habilita «Stick». Configura el valor según tus necesidades.
Personalizar el Efecto con Código
4.1. Debes modificar el color de fondo y el alto de la cabecera antes y después de hacer scroll. Para esto, abre el archivo de código relacionado.
4.2. En el código, busca la línea 6 para definir el color de fondo inicial y la línea 19 para el color de fondo después de hacer scroll.
4.3. Las líneas 5 y 18 establecen el alto de la cabecera antes y después de hacer scroll. Ajusta estos valores según tus preferencias.
4.4. Para modificar el número de píxeles de scroll en los que se aplica el efecto, ve a la línea 10 y ajusta el valor.
Prueba y Ajusta
5.1. Actualiza tu página y verifica el efecto creado. La cabecera debería reducirse, el logo cambiar de tamaño y el color de fondo adaptarse al hacer scroll.
Finalización
¡Felicidades! Has creado con éxito un efecto de reducción de la cabecera y del logo al hacer scroll con Elementor. Ahora puedes personalizarlo aún más y ajustarlo a tu diseño.
Recuerda siempre guardar tus cambios y realizar pruebas para asegurarte de que el efecto funcione correctamente en tu sitio web.
Si te ha sido útil este tutorial, no olvides darle like, suscribirte y activar las notificaciones en el canal del autor. También, puedes dejar tus dudas o preguntas en los comentarios y compartir el contenido en tus redes sociales.
¡Hasta la próxima!
