Cómo crear un encabezado adhesivo en Elementor
El encabezado y el pie de página son una de las partes más importantes del sitio web. El encabezado de su sitio web es lo primero que nota un visitante cuando ingresa a su sitio. El encabezado anterior se refiere a la barra de navegación que muestra el logotipo de la empresa, enlaces a todas las páginas importantes, cualquier CTA y una forma de contactarlo a través de un número de teléfono o una dirección de correo electrónico.
Un encabezado bien estructurado es crucial para su sitio web y puede usarse para publicitar cualquier mensaje o promoción. Facilita a los clientes potenciales la exploración del sitio web. Un buen encabezado funciona como un buen vendedor; por ejemplo, usar la llamada a la acción del 20% de descuento solo hoy alentará a los usuarios a comprar su producto.
El encabezado puede ser de ciertos tipos, como pegajoso o fijo. Un encabezado adhesivo también se conoce como encabezado fijo. Es una herramienta de navegación inteligente que fija el menú principal en la parte superior de la página a medida que el visitante se desplaza hacia abajo.
Significado del encabezado fijo
Un encabezado fijo es un encabezado fijo que permite a los usuarios acceder rápidamente a la búsqueda y a todas las páginas importantes sin tener que ir a la parte superior de la página. estudiar, 22% de los internautas dijo que los sitios web con encabezados fijos son más fáciles de navegar estudiar descubrió que el uso de un encabezado adhesivo en un sitio web de comercio electrónico aumentaba las conversiones en un 3 %.
Crear un encabezado adhesivo en Elementor no es fácil, especialmente si está creando un sitio web por primera vez. Así que hemos creado una guía paso a paso para ayudarte a diseñar un encabezado fijo con Elementor sin escribir una sola línea de código.
¡Empecemos!
1. Cómo crear encabezados fijos usando Elementor Pro
Un encabezado fijo es una forma muy efectiva de crear facilidad de uso en su sitio web. Veamos cómo podemos diseñar rápidamente un encabezado fijo usando el generador de temas de Elementor que viene como una función premium en Elementor Pro.
Paso 1: crea un menú principal
Antes de crear el encabezado fijo para su sitio web, primero debe crear el Menú principal en su wp-admin> Apariencia> Menús. Agregue todas las páginas importantes que desea mostrar en su encabezado que deben enumerarse aquí.
Paso 2: Abra el generador de temas
Después de crear el menú principal, vaya a Plantillas de Elementor > Generador de temas En la página del generador de temas, haga clic en la sección Encabezado y seleccione "Agregar nuevo encabezado".
Entonces aparecerá una ventana emergente; escriba el nombre de la plantilla de encabezado y haga clic en "Crear plantilla".
Ahora será redirigido a la página del editor de Elementor. En esta página, puede seleccionar plantillas de encabezado prediseñadas o crear las suyas propias. Aquí crearemos un encabezado fijo desde cero.
Antes de comenzar a crear el encabezado, es importante resaltar que Elementor ofrece más de 7 widgets que puede usar para crear su encabezado.
Paso 3: crea una plantilla de encabezado en Elementor
Ahora selecciona la estructura con dos columnas (una columna para el logo y otra para el menú horizontal).
Luego vaya a diseño y seleccione la opción de cuadro de ancho de contenido.
Seleccione el ancho de columna al 20% en Editar columna.
Ahora agregue el logotipo de su sitio web a la columna izquierda y seleccione la alineación izquierda. Luego, en la columna derecha, agregue el menú de navegación y seleccione el menú que creó en el paso 1. Ahora alinee el menú principal al lado derecho.
En este tutorial, creamos un encabezado básico. Puede crear un encabezado más elegante agregando efectos de animación, color de fondo y botones.
Paso 4: Haz que el encabezado de Elementor sea fijo
Ahora que ha diseñado un encabezado básico, es hora de hacerlo pegajoso. Para solucionarlo, haga clic en la sección Editar y vaya a Avanzado > Efectos de movimiento.
En la sección avanzada, seleccione "adherirse a la parte superior" del menú desplegable, seleccione los dispositivos en los que desea que aparezca su encabezado fijo y haga clic en el botón publicar.
Una vez publicado, aparecerá una nueva pantalla emergente que le pedirá que "Agregue una condición" para su encabezado. La configuración de las condiciones determina dónde se utilizará su encabezado en su sitio web. Por ejemplo, seleccione "Todo el sitio" para mostrarlo en su sitio. .
Eso es todo, ahora sabes cómo crear un encabezado adhesivo en Elementor en unos pocos pasos.
Agregue más estilo con CSS personalizado
Puedes hacer tu propio encabezado fijo en Elementor más elegante usando una clase CSS personalizada. Puede agregar color de fondo, altura, efecto adhesivo y efectos de transición. Veamos cómo podemos lograr esto.
Regrese a la sección Editar y vaya a Avanzado > Efectos de movimiento.
Vaya a "Compensación de efectos" en Efectos de movimiento e ingrese un valor de 100. Esta es la distancia de desplazamiento a la que aparece el efecto de desplazamiento cada vez que un usuario llega a su sitio web.
Desplácese hacia abajo y abra el menú desplegable "CSS personalizado". Pegue la clase de CSS que se indica a continuación. También puede editar este CSS para diseñarlo como desee.
CSS personalizado:
selector.elementor-sticky–-effects {
background-color: rgb(255, 220, 168) !important;
}
selector {
transition: background-color 3s ease !important;
}
selector.elementor-sticky–-effects > .elementor-container {
min-height: 80px;
}
selector > .elementor-container {
transition: min-height 1s ease !important;
}También puedes usar Xpro GRATIS Creador de temas de Elementor para crear un encabezado fijo con una experiencia de diseño creativo completa. Este es un complemento gratuito de Elementor que le brinda la funcionalidad para crear un encabezado fijo utilizando plantillas de encabezado premium y widgets de creación de temas.
Veamos cómo podemos crear un encabezado fijo en Elementor usando este complemento de creación de temas.
Paso 1: Instale el complemento Xpro Theme Builder
Vaya a Panel de WordPress > Complementos > Agregar nuevo.
Ahora busca Creador de temas para Xpro Elementorhaga clic en el botón "Instalar ahora" y "Actívelo" después de instalarlo.
Después de activar el complemento, verá la opción "Xpro Addons" en la barra lateral de su panel de control.ss
Paso 2: Crea un encabezado fijo
Para crear el sticky, vaya a Xpro Addons > Theme Builder > Add new.
Agregue el título de su encabezado adhesivo. Seleccione la opción "Encabezado" del menú desplegable "Tipo de plantilla".
Seleccione "Habilitar" en la opción "Pegar título" y haga clic en el botón "Editar con Elementor" después de guardar su configuración. También puede cambiar otras configuraciones según su elección.
Ahora será redirigido a la página del editor de Elementor. En esta página, puede elegir una de las modernas plantillas prediseñadas o crear la suya propia. Aquí crearemos un encabezado fijo desde cero.
Elige la estructura de dos columnas, una para el logo y otra para el menú.
Ahora, desde la opción Diseño, establezca el ancho del contenido en Encuadrado.
Establezca la textura en una relación de aspecto de "33,66" en el menú desplegable Textura.
Agregue el "Logotipo del sitio" de su sitio web a la columna de la izquierda y seleccione la opción de alineación a la izquierda en el menú desplegable "General". Luego, en la columna de la derecha, agregue el menú de navegación y seleccione "Menú principal". Ahora alinee el menú principal al lado derecho.
Ahora haga clic en actualizar y su encabezado se activará en su sitio.
myStickymenu es otro complemento de WordPress que se puede usar para crear un hermoso encabezado personalizado para su sitio web de Elementor. Puede crear una barra de bienvenida para mensajes, agregar una cuenta regresiva para promociones y más.
Vamos a crear un menú fijo con mimenú fijo.
Paso 1: Instala el complemento
Para instalar el complemento, vaya a WP Dashboard > Complementos > Agregar nuevo.
Ahora busque myStickymenu, haga clic en "Instalar ahora" y luego haga clic en "Activar".
Paso 2: habilite la configuración fija
Vaya a Configuración > myStickymenu Active el botón Menú fijo y seleccione "Otra clase o ID" en el menú desplegable debajo de Clase fija.
Cambie otras configuraciones como la opacidad o el color de fondo de acuerdo con sus objetivos de diseño web. Ahora desplácese hacia abajo y haga clic en "botón Guardar". Actualice su sitio web para ver el encabezado fijo en acción.
myStickymenu es un buen complemento para crear un encabezado fijo, pero tiene un inconveniente. Solo puedes hacer un encabezado adhesivo básico con él. Para obtener más opciones de personalización, debe actualizar su plan a partir de $ 25 por año.
La última opción en nuestro blog para crear un encabezado adhesivo en Elementor es usar CSS personalizado en su tema de WordPress. Para crear una barra de navegación adhesiva usando CSS, inicie sesión en su panel de WordPress y siga los pasos a continuación.
Paso 1: Abra el Personalizador de WordPress
Ve a Apariencia > Personalizar > CSS adicional.
Paso 2: Agregar código CSS
Agregue el siguiente código CSS.
nav {
background: #ffff;
height: 70px;
z-index: 999;
margin: 0 auto;
border-bottom: 1px solid #dadada;
width: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
}
Ahora puede personalizar su encabezado a su gusto, pero esto requiere un conocimiento sólido de HTML y CSS. La mayoría de los temas ofrecen esta característica como característica premium. Pero nosotros nosotros usamos tema libre xpro como ejemplo.
Si su sitio ofrece contenido de formato largo, agregar un encabezado de navegación fijo puede ayudar a mejorar la experiencia del usuario. Crear un encabezado adhesivo con el generador de temas Elementor Pro y Xpro Elementor es bastante fácil en comparación con otros métodos destacados en este blog. El ofrecido por Xpro también viene con complementos gratuitos para XproEn última instancia, es su elección elegir el método que considere adecuado para su sitio web de Elementor.
Si tiene alguna pregunta relacionada con cómo crear un encabezado adhesivo en Elementor, infórmenos en la sección de comentarios. Estaremos encantados de ayudarte.
Deja una respuesta