Sticky Header Effects for Elementor

Descripción

Sticky Header Effects para Elementor añade opciones útiles que faltan en la característica de cabecera fija introducida en Elementor Pro 2.0. Esto le da a los usuarios la opción de cambiar el color de fondo y la altura cuando el visitante comienza a hacer scroll en la página. Esto permite lograr un efecto de menú transparente que puede convertirse en cualquier color, semi-transparente u opaco, una vez que el visitante empieza a hacer scroll.

Este plugin es compatible con todos los navegadores y totalmente adaptable. Esto significa que funcionará en todos los navegadores, así como en tabletas y dispositivos móviles.

Este plugin está pensado para ser una extensión del maquetador de páginas Elementor Pro, ya que no es un plugin independiente.

Características

  • Panel de opciones incorporado en las opciones avanzadas de sección de Elementor Pro. – Los ajustes están justo donde deben estar sin abarrotar tu espacio de trabajo.
  • Aplicar opciones al hacer scroll – La distancia de desplazamiento para que se apliquen los efectos de la cabecera Fija se ajusta de forma adaptable para obtener los mejores resultados en cualquier situación.
  • Cabecera transparente – Utiliza la posición para mover la sección de cabecera hacia abajo en la parte superior de la página. No necesita márgenes negativos causantes de problemas.
  • Color de fondo de la cabecera: opciones para la cabecera tras hacer scroll con total compatibilidad con HEX, RGBA y nombres de colores.
  • Borde inferior – Permite al usuario cambiar el color y el grosor del borde inferior al hacer scroll.
  • Encoger cabecera – Un efecto que cambia la altura mínima de la sección para maximizar el espacio y conseguir un estilo estilizado sin perder funcionalidad.
    (Recuerda que el efecto «encoger» está limitado por la altura y el relleno del contenido de la cabecera. Consulta las preguntas frecuentes)
  • Reducir el logotipo – Capacidad para ajustar la altura del logotipo al hacer scroll.
    *Cambiar el color del logotipo – Cambia el color de la imagen del logotipo antes o después de que el usuario haga scroll. Útil para cambiar el diseño de la cabecera de monocromático a color completo.
    *Desenfocar el fondo – Agrega un efecto de desenfoque moderno a un color de fondo de cabecera semitransparente al hacer scroll.
    *Ocultar la cabecera al hacer scroll hacia abajo – Oculta la cabecera al desplazarse hacia abajo y muestra la cabecera al desplazarse hacia arriba. Tiene una distancia seleccionable para comenzar el efecto.

Próximamente características Pro

  • Sustituir logotipo – Cambia la imagen del logotipo por completo
  • Animaciones de entrada – Animaciones deslizantes y fundidas con duración de la animación
  • Ocultar elementos – Ocultar o mostrar los elementos de la cabecera tras hacer scroll
  • Sombra de caja – Añade o elimina el efecto de sombra de caja al hacer scroll con controles de color, horizontal, vertical, desenfoque y extensión
  • Animaciones de alternar menú – Animaciones de entrada y salida para el menú hamburguesa del móvil
  • Menú dividido – Menús que se dividirán para permitir el logotipo central

Haz una donación

¿Te gusta usar Sticky Header Effects? Por favor, considera hacer una donación.
Cada donación ayuda al continuo desarrollo, mantenimiento y soporte de este plugin.
¡Muchas gracias por tu apoyo!

Capturas

  • Ajustes incorporados en Elementor Pro.
  • Panel principal de ajustes.
  • Ajustes actuales de los efectos.

Instalación

Requisitos mínimos

  • WordPress 5.3 o superior
  • PHP versión 7.0 o superior
  • MySQL versión 5.6 o superior

Instrucciones de instalación

  • Asegúrate de que tienes instalados Elementor Free y Elementor Pro Page Builder. Este no es un plugin independiente y SOLO funciona con Elementor Pro.

  1. Instala el plugin usando el instalador de plugins integrado de WordPress o extrae el contenido del archivo ZIP en el directorio wp-content/plugins/ de tu instalación de WordPress.
  2. Activa el plugin desde el menú «Plugins» de WordPress.
  3. Ve a «Páginas > Añadir nueva»
  4. Pulsa el botón «Editar con Elementor».
  5. Añadir una sección o contenedor de cabecera.
  6. Ahora puedes encontrar la opción «Efectos de cabecera fija» en la pestaña «Avanzado» de la sección o contenedor.

FAQ

¿Por qué no funciona el efecto «encoger»?

¡La cabecera no puede reducirse más que los objetos que contiene!

El efecto «encoger» está limitado por el tamaño del contenido en la sección de cabecera. Como por ejemplo, logotipos, imágenes, menús, widgets, y también todos los rellenos y márgenes de esos elementos. Esto también incluye los rellenos y márgenes de las secciones y columnas en sí mismas.

Para obtener el mejor efecto de «encogimiento», utiliza estos ajustes:
* Establece el relleno superior e inferior en 0px en la sección de cabecera fija, columna y elementos dentro de ella.
* Establece una altura personalizada para el logotipo y otras imágenes (puedes dejar en blanco el ancho para «automático»).
* Establece la altura de la sección de cabecera como «altura mínima» y ajústala a la altura deseada.

Básicamente, lo que ocurre es que el contenido de la cabecera es «demasiado alto» para seguir reduciéndose.

¿Es un plugin independiente?

No. No puedes utilizar Sticky Header Effects para Elementor por sí solo. Es un plugin para Elementor Pro.

¿Funciona con cualquier tema de WordPress?

Sí, funcionará con cualquier tema de WordPress que esté utilizando Elementor Pro como maquetador de páginas.

¿Este plugin ralentizará la velocidad de mi web?

Sticky Header Options para Elementor es ligero y además puedes utilizar solo las opciones que quieras usar en tu web para un rendimiento más rápido.

Reseñas

13 de febrero de 2024 1 respuesta
Thank you for this shortcut / timesaver. Well done and it works perfect.
21 de noviembre de 2023 1 respuesta
A nice extension that takes a lot of coding out of your hands. It's easy to fix your header, but a lot of work to make it look good. Sticky Header Effects for Elementor does that for you. What's even better is the support. I had several problems I couldn't solve. Within 48 hrs I got a reply. Not only was my problem solved, but some helpful suggestions to improve on it as well. Highly recommend!
11 de noviembre de 2023 3 respuestas
I wish I would've users plug-in from the very beginning! I highly recommend this plug-in to anybody who wants a sticky header. It is a no-brainer to set up.
6 de septiembre de 2023 13 respuestas
Hi there, good plugin but when i increase and decrease the screen size the header width is not responsive and breaks, can you help me with this please.
3 de septiembre de 2023 2 respuestas
The latest version (6.7) caused my sticky header to not work any longer. (Using elementor header footer builder) I had to roll back to version 6.5 to get my particular problem to work. Other than that, works flawlessly.
Leer todas las 60 reseñas

Colaboradores y desarrolladores

«Sticky Header Effects for Elementor» es un software de código abierto. Las siguientes personas han colaborado con este plugin.

Colaboradores

«Sticky Header Effects for Elementor» está traducido en 8 idiomas. Gracias a los traductores por sus contribuciones.

Traduce «Sticky Header Effects for Elementor» a tu idioma.

¿Interesado en el desarrollo?

Revisa el código , echa un vistazo al repositorio SVN o suscríbete al registro de desarrollo por RSS.

Registro de cambios

1.6.10

  • Maintenance: WordPress 6.4 compatibility update

1.6.9

Corregido: Error de Javascript con las secciones
Corregido: Error en el ancho de la cabecera
Retoque: CSS optimizado

1.6.8

Fixed: Shrink logo bug
Fixed: Shrink header bug
Fixed: Transparent header bug
Fixed: All CSS color and size transitions
Added: Compatibility with new elementor «mega» menu
Added: Ability to override logo color change on elements using class «not-logo»
Tweaked: Logo color change optimized so «full color» option no longer overwrites elementor css settings

1.6.7

  • Fixed: Transparent header bug

1.6.6

  • Fixed: Shrink header bug
  • Fixed: Bottom border color and size transitions
  • Added: Compatibility with new elementor «mega» menu
  • Added: Ability to override logo color change on elements using class «not-logo»
  • Tweaked: Logo color change optimized so «full color» option no longer overwrites elementor css settings

1.6.5

  • Tweaked: Logo transition CSS for image widget
  • Tweaked: Logo color CSS for image widget
  • Maintenance: WordPress 6.2 compatibility update

1.6.4

  • Fixed: Js bug
  • Fixed: Logo color not changing on scroll
  • Fixed: CSS for smooth transitions
  • Konwn Bugs: Shrink logo/header

1.6.3

  • Reverted to 1.5.5 only with container compatibility

1.6.2

  • Fixed: Section height bug

1.6.1

  • Fixed: Js bug
  • Fixed: Container shrink bug

1.6

  • Fixed: Shrinking Logo bug
  • Fixed: Container support using Elementor free
  • Fixed: Logo color change set to none doesn’t remove CSS filter settings
  • Added: Disable/enable completely transparent header
  • Tweak: Changed logo color settings to be more clear
  • Maintenence: Optimized CSS for v2.0
  • Maintenence: Optimized JavaScript for v2.0
  • Maintenence: Optimized Elementor controls for v2.0

1.5.5

  • Fixed: Shrinking Logo bug
  • Fixed: Header section top position
  • Maintenence: Optimized CSS code

1.5.4

  • Fixed: Shrinking Logo bug

1.5.3

  • Fixed: Gap above mobile header bug

1.5.2

  • Fixed: Gap above header bug

1.5.1

  • Fixed: WordPress admin bar bug

1.5

  • Fixed: Gap above header bug

1.4.9

  • Added: Compatibility with Elementor Containers
  • Maintenance: WordPress 6.0 compatibility update

1.4.8

  • Maintenance: WordPress 5.9 compatibility update

1.4.7

  • Fixed: Misc Bugs

1.4.6

  • Fixed: Hide header bug

1.4.5

  • Fixed: WP admin bar bug

1.4.4

  • Maintenance: WordPress 5.8 compatibility update
  • Fixed: Header width bug
  • Update: Better responsive Worspress admin bar handling

1.4.3

  • Fixed: Full color logo after scroll bug

1.4.2

  • Corregido: Fallos

1.4.1

  • Fixed: Gap above header bug

1.4.0

  • Added: WordPress 5.5 compatibility
  • Added: Elementor 3 compatibility
  • Added: Hide on scroll down feature
  • Added: Blur background feature
  • Added: Before and after scrolling logo color options
  • Fixed: Opera browser hash links not activating scrolling effects
  • Fixed: Editor handle bug
  • Fixed: All labels and descriptions to help with user operation
  • Fixed: Various code optimizations
  • Fixed: Transparent on mobile bug
  • Fixed: Stretched section broke transparent header

1.3.2

  • Fixed: Transition CSS

1.3.1

  • Corregido: Fallos

1.3.0

  • Added: Shrink Logo feature

1.2.3

  • Fixed: Hook on the new Elementor Pro 2.4.7 version

1.2.2

  • Removed: Stretched section condition

1.2.1

  • Added: Compatibility with the new Elementor 2.1.1 version
  • Fixed: JavaScript error

1.2.0

  • Removed: Sticky Header feature(Elementor fixed theirs)
  • Added: Transparent header feature
  • Added: Compatibility with the new Elementor 2.1 version
  • Added: Change javascript to external file
  • Corregido: Fallos

1.1.2

  • Corregido: Fallos

1.1.1

  • Fixed: Bug where section didn’t move to top of page

1.1.0

  • Añadido: Característica de cabecera fija
  • Added: Bottom border feature
  • Fixed: Bugs with tablet and mobile responsive modes
  • Fixed: Padding issues when using the «shrink» effect

1.0.0

  • Versión estable inicial