Un encabezado es generalmente lo primero que ve una persona cuando visita su sitio web y sirve como base para explorarlo.
Ya sea que tenga un sitio web de comercio electrónico, un sitio web personal, un sitio web para educación, un foro comunitario o un sitio web para los medios, el encabezado es lo que hace que navegar sea sencillo y agradable de usar.
Los encabezados adhesivos se están volviendo cada vez más populares entre los diseñadores web para organizar y estructurar un sitio web y mejorar la navegación del usuario.
Le mostraremos cómo crear su encabezado adhesivo usando Elementor en este tutorial.
Los encabezados fijos permiten a los usuarios ver el encabezado y la sección del menú de la página independientemente de qué tan abajo se desplacen.
Para agregar un encabezado fijo a su sitio web, vaya a wp-admin > Apariencia > Menús y cree un Menú principal. En el encabezado, escriba la sección que desea mostrar.
Vaya a Plantillas de Elementor > Creador de temas cuando haya terminado de construir el menú principal. Seleccione el área Encabezado en la página del creador de temas y haga clic en " Agregar nuevo encabezado ".
Asigne un nombre a la plantilla de encabezado y haga clic en " Crear plantilla " en la pantalla emergente.
Después de eso, serás llevado a la página de edición de Elementor. Puedes utilizar una de las plantillas de encabezado prediseñadas o diseñar la tuya propia desde cero.
Comenzaremos desde cero con nuestro encabezado fijo de Elementor en este tutorial.
Puede ver varios widgets de encabezado en el editor de Elementor antes de comenzar a diseñar una plantilla. Podemos diseñar rápida y fácilmente un encabezado usando estas secciones.
Crea un diseño de dos columnas. Asegúrese de que el ancho del contenido de la sección esté configurado en " Encuadrado ".
En la configuración de ancho de contenido en la sección de edición de Elementor, establezca el ancho de la primera columna en 20% en la columna " Editar ".
Coloque el logotipo del sitio de su sitio web en la primera columna y alinéelo a la izquierda.
Agregue un menú de navegación en la segunda columna y seleccione el menú principal que creó en el paso 1. Alinee el menú de navegación a la derecha.
Mantendremos el encabezado simple para este tutorial. Puede hacer que su encabezado sea más detallado agregando un color de fondo, efectos de animación flotante, botones y otros elementos.
Ahora que hemos creado nuestro encabezado básico de Elementor, es hora de convertirlo en un encabezado fijo.
Para hacerlo, vaya a la sección Editar (sección Encabezado completo). Seleccione Avanzado > Efectos de movimiento en el menú desplegable.
Seleccione " pegajoso en la parte superior " debajo de efectos de movimiento, luego " dispositivos " donde desea que aparezca el encabezado fijo.
Un encabezado fijo casi siempre no es deseable en dispositivos del tamaño de una tableta, y casi siempre tampoco es deseable en las pantallas de los móviles. Como resultado, haga clic en la "x" junto a ambas opciones en Sticky On, dejando solo "Escritorio" seleccionado.
Cuando esté satisfecho con su trabajo, haga clic en “ Publicar ”; Esto activará el encabezado fijo, pero no reemplazará el encabezado de su tema actual en este momento.
Elementor le solicita que agregue una condición para su encabezado después de haberlo publicado. Puede mostrar el encabezado donde desee en el sitio agregando condiciones.
Queríamos que este encabezado apareciera en todo el sitio, omitiendo la página 404. Como resultado, incluimos todo el sitio en la elección y omitimos la página 404.
Como puede ver, usar Elementor para crear su encabezado Sticky personalizado es simple e indoloro.
Haga que su encabezado fijo de Elementor se vea mucho mejor usando CSS personalizado Elementor le permite personalizar un encabezado fijo agregando una clase CSS para hacerlo más elegante.
Puede personalizar la altura del encabezado fijo, el color de fondo, la transición y los efectos fijos aquí.
Regrese al área Editar para darle más estilo a su encabezado adhesivo (sección Encabezado completo). Seleccione Avanzado > Efectos de movimiento en el menú desplegable.
En este caso, establezca el “ Desplazamiento de efectos Cuando un visitante utiliza su sitio web, esta es la distancia de desplazamiento donde se produce el efecto de desplazamiento.
Establezca el desplazamiento de movimiento en 100.
Tenga en cuenta que las opciones de Efectos de compensación solo funcionarán si se utiliza CSS personalizado. En consecuencia, si no agrega ningún CSS personalizado propio, puede omitir la última opción.
Antes de publicar el encabezado fijo final, opcionalmente puede agregar condiciones al último encabezado fijo. Un ejemplo amp una condición de encabezado fijo es donde desea que se muestre el encabezado fijo. Como ejemplo amp puede elegir el criterio " sitio completo ".
Ahora querrás incluir CSS personalizado en tu sitio web. El CSS personalizado es bastante flexible y puedes incluir lo que quieras si estás familiarizado con su funcionamiento.
Hemos completado la limpieza; Ahora pasamos a las complejidades del sitio web, incluida la adición del código CSS personalizado. Demostraremos tanto los fundamentos como las técnicas avanzadas para obtener efectos de encabezado adhesivo gratuitos para Elementor. Si está utilizando Elementor 2.9 o superior, puede utilizar las Reglas de estilo globales para incorporar este CSS en su sitio.
Siga los procedimientos que se describen a continuación para incluir el CSS personalizado:
Después de eso, pegue el código CSS a continuación.
encabezado.sticky-header { --header-height: 90px; --opacidad: 0,90; --encogerme: 0,80; --color-de-fondo-pegajoso: #0e41e5; --transición: .3s facilidad de entrada y salida; transición: var de color de fondo (--transición), var de imagen de fondo (--transición), var de filtro de fondo (--transición), var de opacidad (--transición); } header.sticky-header.elementor-sticky--efectos { color de fondo: var(--color-de-fondo-sticky); imagen de fondo: ninguna; opacidad: var(--opacidad); -webkit-fondo-filtro: desenfoque (10px); filtro de fondo: desenfoque (10px); } encabezado.sticky-header > .elementor-container { transición: min-height var(--transition); } encabezado.sticky-header.elementor-sticky--efectos > .elementor-container { altura mínima: calc(var(--altura-encabezado) * var(--shrink-me)); altura: calc(var(--altura-encabezado) * var(--shrink-me)); } header.sticky-header .elementor-nav-menu .elementor-item { transición: relleno var(--transition); } encabezado.sticky-header.elementor-sticky--efectos .elementor-nav-menu .elementor-item { padding-bottom: 10px; relleno superior: 10px; } header.sticky-header > .elementor-container .logo img { transición: var de ancho máximo (--transición); } encabezado.sticky-header.elementor-sticky--efectos .logo img { ancho máximo: calc(100% * var(--shrink-me)); }
Las instrucciones enumeradas anteriormente lo guiarán a través del proceso de creación de un encabezado fijo decreciente en Elementor. Si desea conocer más detalles sobre cómo personalizar aún más el encabezado, puede consultar el código CSS que se proporciona a continuación, que le permitirá ser más creativo con el diseño del encabezado. Dependiendo de sus necesidades, puede personalizar el encabezado adhesivo de Elementor cambiando numerosas configuraciones y haciéndolo más o menos adhesivo. Le recomendamos que utilice un editor de código para incorporar este cambio de CSS directamente en Elementor. Puede utilizar Visual Studio Code o Atom, que le ayudarán a crear el código rápidamente y aprovechar los beneficios. Estos editores son de uso gratuito y se puede acceder a ellos desde varios sistemas, incluidos Windows, Mac OS X y Linux.
Esta sección demostrará cómo puede ajustar los efectos del encabezado reductor de Elementor utilizando la hoja de estilos CSS. Si solo realiza un cambio en la propiedad personalizada, se cambiará inmediatamente para que coincida con el resto del código CSS.
Las opciones de personalización para el encabezado decreciente están disponibles en un total de cinco formas diferentes. No todas las variables deben personalizarse, pero tienes la opción de hacerlo si así lo deseas. Una vez que haya decidido qué variables desea modificar, sólo podrá modificar esas variables y dejar el resto de los parámetros sin cambios.
Aquí están las cinco variables CSS, con los valores predeterminados para cada variable mostrados en rojo.
El color de fondo fijo es #0e41e5 y la altura del encabezado es 90px. Otras opciones de estilo incluyen: opacidad de 0,90, reducción de 0,80, opacidad de 0,90 y transición de entrada y salida gradual de 300 ms.
Las propiedades personalizadas son los elementos que aparecen después del doble guión “–” en nuestro código de amp , y puede encontrarlos enumerados en la parte superior de nuestro código de amp . Todo lo que se requiere es ajustar el valor que aparece después de los dos puntos y antes del punto y coma en la oración.
Por amp , si desea aumentar la altura del encabezado a 100 px, así es como se verá antes y después de cambiar la altura:
Antes, la altura del encabezado era de 90 píxeles; después, la altura del encabezado era de 100 píxeles.
Con Elementor, puedes diseñar un menú de encabezado fijo de varias maneras diferentes. No solo puede crear un encabezado adhesivo Elementor gratuito, sino que también puede personalizar el encabezado agregándole CSS personalizado. Es posible obtener instrucciones detalladas sobre cómo construir un encabezado de Elementor adhesivo decreciente usando Elementor y modificar su CSS con esta guía paso a paso.
Elementor incluye una variedad de plantillas de encabezado; cada uno es distinto y elegante y ayuda a los visitantes a navegar por su sitio web.
Con Elementor, tienes control total sobre el estilo de los encabezados de tu sitio web. Por amp , puede colocar el logotipo del sitio en el centro de la página y el menú principal debajo. Puede agregar un encabezado encima del encabezado principal para mostrar el número de teléfono, enlaces de redes sociales y otra información.
Éstos son sólo algunos amp de las numerosas opciones de diseño de encabezado disponibles para los usuarios de Elementor.
Incluir un encabezado fijo en su sitio web puede facilitar que los visitantes recorran su sitio y aumenten los clics en todas las áreas de su sitio.
Elementor elimina la necesidad de generar manualmente encabezados fijos con Javascript y CSS, que antes era necesario. Crear un encabezado fijo para su sitio web nunca ha sido tan sencillo como ahora, gracias a los encabezados fijos de Elementor.
Los encabezados y pies de página de un sitio web son elementos esenciales. En la mayoría de los casos, el encabezado proporciona navegación...
Dos de los temas de WordPress más populares del mercado son Astra y OceanWP. Profesional…
Crear un excelente sitio web de noticias no requiere que te conviertas en diseñador web. Nosotros…
El tema Periódico es uno de los temas de WordPress más importantes diseñados por tagDiv, un…
Cuando se trata de configurar una tienda en línea, WooCommerce es el plugin ideal. Él…
Nuestro propio creador de páginas, Avada Builder, ahora está disponible en dos interfaces: Avada…
Ver comentarios
¡Muy buen artículo! ¿Podrían ayudarme con mi problema con el menú fijo en el sitio web de una página? El menú fijo cubre mi sección que definí como enlace de anclaje en el menú.
Hola,
Debe agregar un relleno superior en su primera sección ya que el menú cambió la posición para que sea pegajoso.
¡Señor! ¿Hay alguna forma de agregar un mega menú en el encabezado fijo?
¿Seguro Por qué no? ¿Estás enfrentando un problema?
Fiz um header usando o css, pero ahora desisti dele, y no consigo acceder a ningún elemento para desfazer, no es el elemento o el oyente.
Hola, supongo que puedes usar el clic derecho o el explorador de secciones.