Cómo crear cabeceras adhesivas verticales con contenedores en Elementor

¿Qué son los encabezados adhesivos verticales?

Los encabezados adhesivos verticales son un tipo de barra de encabezado que se fija a un lado de la página y permanece visible a medida que el usuario se desplaza por la página, lo que permite un acceso fácil a otras áreas de la página o una navegación rápida. Este diseño puede utilizarse para contenidos como catálogos, menús de navegación e información de contacto para facilitar la navegación al usuario.

preliminar

Antes de empezar, asegúrese de que dispone de lo siguiente:

Instalado y activado Elementor Pro plugin (porque el efecto adhesivo requiere la versión Pro).
Ha creado una nueva página o está listo para añadir cabeceras adhesivas verticales a una página existente.
Comprender ya el uso básico del contenedor Elementor (se recomienda que el Flexbox (funcionando en modo contenedor).

Paso 1: Crear una plantilla de página única

Creamos esta vez una plantilla de una sola página y para esta plantilla creamos cabeceras verticales adhesivas con contenedores.

Vaya a la página de creación de plantillas

En el backend de WordPress, navegue hasta Elementor > Plantillas > Nueva.

En la ventana emergente seleccione una sola página como tipo de plantilla y asigne un nombre a la plantilla, por ejemplo, "Plantilla de página de servicio de empresa".

Seleccione el tipo de página

En la parte superior de la galería de plantillas seleccione "Páginas". Etiquetas.
Navegue por la biblioteca de plantillas de página disponibles. Puede utilizar el cuadro de búsqueda para encontrar un estilo de plantilla adecuado, como "Servicios" o "Empresa".

Si está dedicado a un determinado tipo de página, también puede añadir una condición específica en los ajustes de la condición.

Paso 2: Crear un contenedor en Elementor

1,Añadir contenedores

En la página, haga clic en "Añadir un nuevo contenedor" y arrástrelo al área de diseño de la página. Este contenedor servirá como contenedor padre para el encabezado vertical adhesivo.

2,Fijar la orientación del contenedor

Seleccione el contenedor y, en el panel de ajustes de la izquierda, ajuste la orientación del contenedor a perpendiculares decir, alineados verticalmente para que el contenido pueda apilarse verticalmente. Este paso es la clave para conseguir encabezados verticales.

3,Definir la anchura del contenedor

En "tipo", ajuste la anchura del contenedor a un tamaño adecuado, como 200px o menos, para asegurarse de que no ocupa demasiado espacio en la página. Esta anchura puede personalizarse en función del diseño y los requisitos de la página.

Paso 3: Crear una barra de navegación vertical adhesiva

Inserción de encabezados y elementos de navegación

En el contenedor, añada un "leyenda", configure el título como "Navegación rápida" o "Catálogo".

Añadir lista

Debajo del título, siga añadiendo en el mismo contenedor que el título Lista de iconos tal vez Widget de botonesSe utiliza como elemento de navegaciónUtilizamos una lista de iconos.

Añadido:

Añadir proyecto

Quiénes somos: Haga clic en él para saltar a la sección de perfil de la empresa.
Servicios: Salta a la zona de introducción de la línea de servicio.
Testimonios: Vaya a la sección de comentarios de los clientes.
Contacte con nosotros: Ir a información de contacto y formularios.

Los nombres y los iconos pueden cambiarse.

Establecer enlaces de anclaje

Añada enlaces de anclaje a la lista de botones o iconos de cada elemento de navegación. Establezca anclajes para cada sección de contenido de la página, por ejemplo 1TP5Sobre nosotrosy1TP5Serviciosy#testimoniosy#contacto-Us etc.

establecerQuiénes somospunto de anclaje
- En el editor de Elementor, busque el "Anclas del menú" Widget. Arrastre el widget por encima del título de la sección Acerca de nosotros (u otro lugar adecuado). En la configuración del widget, introduzca un nombre para el punto de anclaje (por ejemplo sobre nosotros) para enlazar posteriormente con esa ubicación.

Establecer enlaces de anclaje
- Volver a la lista de iconosQuiénes somosen la parte superior de la página, añada1TP5Sobre nosotrosPuede hacer clic en el salto tras el enlace de anclaje.

El resto de elementos del menú siguen este procedimiento para establecer sus enlaces de anclaje.

Personalizar el estilo de la barra de navegación

En "tipo" para personalizar los tipos de letra, los colores y el espaciado y adaptarlos al estilo de la página web.

configurablecolor de fondo, márgenes y efectos de sombra para que la barra de navegación sea más clara e independiente.

Paso 4: Ajustar el efecto adhesivo

Para hacer que la barra lateral permanezca fija mientras el usuario se desplaza, siga estos pasos:

Configuración de ID CSS para barras de navegación y áreas de contenido

Seleccione el contenedor de la barra de navegación y "alto nivel "; por ejemplo, establezca el ID enbarra lateral .

Añadir código CSS personalizado

Abra el CSS personalizado en Elementor (Configuración global o CSS personalizado para el contenedor de la barra de navegación). Añada el siguiente código:

#sidebar{
    position: fixed; /* Posición fija de la barra lateral, no se mueve al desplazarse */
    left: 0; /* Alinear la barra lateral a la izquierda de la página */
    top: 0; /* La barra lateral comienza en la parte superior de la página */
    height: 100vh; /* Ajuste la altura de la barra lateral a la altura de la ventana gráfica */
    width: 200px; /* Ajuste la anchura de la barra lateral según sea necesario */
    z-index: 10; /* Asegúrese de que la barra lateral está por encima de otros elementos */
    padding-top: 250px; /* Ajuste el margen interior superior según sea necesario */
    overflow-y: auto; /* Permita el desplazamiento cuando el contenido de la barra lateral sea largo */

    display: flex; /* Utilice el diseño flexbox */
    flex-direction: column; /* Alinear el contenido verticalmente */ justify-content: center; //
    justify-content: center; /* Contenido centrado verticalmente */
}

Paso 5: Añada el estilo de fondo y el efecto de sombra (opcional)

Configurar el color de fondo
En "tipo", seleccione el color de fondo adecuado para que los contenedores se distingan claramente en la página.

Añadir un efecto de sombra
Para que el título adhesivo parezca más jerárquico, puede configurar el efecto de sombra en la "Sombra de caja", de forma que tenga un efecto visual de rondar por la página.

Paso 6: Vista previa y publicación

Vista previa del efecto
Haga clic en la página "avances" para ver cómo se comporta la cabecera adhesiva cuando se desplaza la página. Asegúrese de que el contenedor queda siempre fijo en la parte superior de la página al desplazarse y no es sobrescrito por otros elementos.
Ajustes
De acuerdo con el efecto de previsualización, ajuste el tamaño, la alineación y los márgenes del contenedor del contenido del título para garantizar que el contenido sea claro y no afecte a la disposición de otros elementos de la página.
Página de inicio
Tras confirmar que todo funciona correctamente, pulse "escriba a" para poner la página en línea. Su cabecera vertical adhesiva ha sido creada.

Resumen:

Las cabeceras adhesivas verticales son barras de navegación que se fijan en el lateral de una página y permanecen visibles mientras los usuarios se desplazan, permitiéndoles acceder rápidamente a diferentes partes de la página. La creación de este tipo de cabeceras en Elementor implica unos cuantos pasos clave: en primer lugar, se crea una plantilla de página única y se añade un contenedor orientado verticalmente como cuerpo de la barra de cabecera adhesiva. A continuación, se añaden los encabezados y los elementos de navegación al contenedor, utilizando una lista de iconos o widgets de botones con enlaces de anclaje para cada elemento. A continuación, aplique código CSS para anclar la barra lateral y asegurarse de que siempre esté visible al desplazarse.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres