¿Quiere que suNavegación a pie de página¿Siempre a la vista como una aplicación móvil? Esta guía le enseñará cómo hacerlo en Elementor.Cree una navegación pegajosa a pie de páginaAplicable aversión gratuitaresponder cantandoVersión de pago de Elementor. La creación de una navegación de este tipo puede mejorar enormemente la experiencia de usuario de un sitio web, especialmente en dispositivos móviles, facilitando a los usuarios el acceso a las páginas importantes.

Lo que debe saber antes de empezar

Antes de empezar, es útil saber algo de CSS básico, ya que vamos aUso de CSS personalizado para dar estilo a la navegación pegajosa. Asegúrese de que Elementor está instalado y de que puedeCrear página.

Paso 1: Crear un nuevo contenedor

En primer lugar, puede crear una nueva página o editar una existente seleccionando "Uso de editores elementor".

Al pulsar el botón Signo más (+) para crear un nuevo contenedor, o desde el panel de Elementor, coloque el icono "contenedores" Arrastre la opción a la página.

Para una mejor organización de los elementos de navegación, se recomienda elegir una estructura con dos o más columnas.

• Haga clic en el botón más ( + ) de Elementor para añadir un nuevo contenedor.

• Establezca la estructura en dos o más columnas para facilitar la adición de elementos de navegación.

ejemplo típico: Si está trabajando en unCreación de navegación a pie de página adhesiva para sitios web de comercio electrónicoLa columna de la izquierda puede utilizarse para "Volver a la página de inicio", columna derecha para "carro" para que los usuarios puedan acceder fácilmente a las páginas importantes.

Paso 2: Personalizar el contenedor

A continuación, hay que personalizar el contenedor. Haga clic en el botón Iconos de dados o seis puntos en la parte superior del recipiente para abrir el ajuste.

• Anchura del contenidoElija "encajonado" o "ancho completo", según sus preferencias de diseño. Elegimos ancho total.

• amplitudAjuste la anchura según sus necesidades. El resto de las opciones permanecen en su configuración predeterminada y pueden ajustarse posteriormente según sea necesario.

• contextos: entipopágina, añada un fondo al contenedor para asegurarse de que el menú de navegación no se confunde con otros contenidos.

• CSS ID: en alto nivel para especificar un contenedor para el CSS IDEn este tutorial, utilizamos el der-sticky-navigation-footer. Si se seleccionan otras clases, asegúrese de que en los pasos siguientes elAjuste del código CSS.

ejemplo típico: Si el fondo de su pie de página esmás oscuroPuede elegircolor claroiconos de navegación para garantizar un aspecto visualmente más atractivo.

Paso 3: Añadir contenido al contenedor

Añada contenido de navegación, como iconos y enlaces, al contenedor.

• Widget de caja de iconosUso recomendado cuadro de iconosWidgets para acceder fácilmente alCada elemento de navegaciónAñada iconos y etiquetas. Añada cada icono y etiqueta a una columna separada para mantener las cosas ordenadas y organizadas.

Ejemplo: para un sitio de comercio electrónico que incluya "página de inicio","buscar algo","carro"y"menú". Los usuarios pueden acceder fácilmente a las páginas importantes.

Paso 4: Añadir HTML y CSS personalizados

Para que la barra de navegación sea pegajosa, debe añadir una etiqueta personalizada HTML y CSSpara mantenerlo en su sitio en la parte inferior de la pantalla.

• Widgets HTML: Buscar Widgets HTMLy arrástrelo hasta elDebajo del menú de navegaciónde cualquier zona.

• Añadir código HTML: Añada el siguiente código al widget HTML:

#der-sticky-navigation-footer {
    display: flex; justify-content: space-around; /* Distribuya los iconos uniformemente por el contenedor */
    justify-content: space-around; /* Distribuya los iconos uniformemente por el contenedor */ align-items: center; /* Centre verticalmente los iconos */
    align-items: center; /* Centrar verticalmente los iconos */
    flex-wrap: nowrap; /* Asegúrese de que todos los iconos permanecen en una sola línea */
    position: fixed; bottom: 20px; /* Asegúrese de que todos los iconos permanecen en una sola línea */
    bottom: 20px; /* Ajustado de 10px a 20px para que quede más alto */ right: 0; /* Ajustado de 10px a 20px para que quede más alto */
    right: 0; left: 0; /* Ajustado de 10px a 20px para hacerlo más alto */
    left: 0; max-width: 400px; /* Ajustado de 10px a 20px para hacerlo más alto */ right: 0; left: 0; /* Ajustado de 10px a 20px para hacerlo más alto
    max-anchura: 400px; max-altura: 60px
    
    margin: auto; z-index: 1000;
    z-index: 1000; }
}

#custom-html {
    display: none; }
}

#der-sticky-navigation-footer .elementor-icon-box {
    margin: 0; /* Elimine los márgenes adicionales para obtener un espaciado coherente */
}

@media (max-width: 768px) {
    #der-sticky-navigation-footer {
        flex-direction: row; /* Disponga los iconos en fila para la vista móvil */
        justify-content: space-evenly; /* Organice los iconos en una fila para la vista móvil */.
        justify-content: space-evenly; width: 100%;
    }
    #der-sticky-navigation-footer .elementor-icon-box {
        flex: 1; /* Distribuya el mismo espacio a cada icono */
    }
}

Este código ancla la navegación a pie de página a la parte inferior de la pantalla y garantiza un espaciado y posicionamiento adecuados.

• posición: fija Fije el pie de página en la parte inferior.
• max-width responder cantando altura máxima Limita el tamaño del pie de página.
• z-index Asegúrese de que el pie de página aparece por encima del resto del contenido.

Ocultar HTML personalizado: Añade un nuevo elemento al elemento HTML personalizado llamado custom-html (utilizado como expresión nominal) CSS IDpara ocultar el elemento.

ejemplo típico: Si desea que la navegación esté siempre en la parte superior, puede subir el z-index para garantizar que la navegación no sea sobrescrita por otros contenidos.

Paso 5: Ajustes finales y finalización

Puede retocar el CSS o realizar otros cambios en el diseño según sea necesario para mejorar el resultado final. El diseño de navegación de pie de página adhesivo de este tutorial es relativamente básico y puede optimizarse aún más con un poco de creatividad.

ejemplo típicoPor ejemplo, se pueden sustituir los iconos por logotipos de la marca o utilizar diferentes animaciones para mejorar la interactividad de la navegación y hacerla más única.

Consejos para una navegación pegajosa a pie de página

• Añadir un efecto hover: Aumente la interactividad de los iconos mediante efectos hover que proporcionan información visual cuando el usuario pasa el ratón por encima o hace clic en un enlace.
• Utilizar colores contrastados: Elija un color que contraste con el fondo del sitio para que la navegación adhesiva sea más llamativa.
• Añadir efectos de animaciónAñadir animaciones sutiles al pie de página cuando aparezca para hacerlo más atractivo, como el desvanecimiento hacia dentro o el deslizamiento hacia fuera al desplazarse.
• Garantizar la compatibilidad con dispositivos móviles: Pruebe diferentes tamaños de pantalla para asegurarse de que la navegación funciona perfectamente en dispositivos móviles, ajustando el CSS según sea necesario.

ejemplo típico: Iconos de navegación más grandes en los dispositivos móviles para que los usuarios puedan hacer clic en ellos fácilmente. Esto es especialmente importante para mejorar la experiencia del usuario, sobre todo en pantallas pequeñas.

¿Por qué utilizar la navegación adhesiva a pie de página?

La navegación pegajosa a pie de página es especialmente útil para mejorar la experiencia del usuario, sobre todo en dispositivos móviles. Permite a los usuarios acceder rápidamente a las páginas importantes sin tener que desplazarse hasta la parte superior de la página, lo que ayuda a mejorar la usabilidad, aumentar el compromiso y, en última instancia, mejorar las conversiones del sitio web.

resúmenes

Utilizar la navegación pegajosa a pie de página es una forma eficaz de mejorar la experiencia del usuario en su sitio web. Al mantener la barra de navegación siempre en el campo visual del usuario, los visitantes pueden acceder fácilmente a las páginas importantes en cualquier momento sin tener que volver a la parte superior de la página. Esto no sólo mejora la usabilidad de su sitio web, sino que también aumenta la interacción del usuario.