Mejora de la experiencia del usuario: Creación de una navegación de pie de página adhesiva compatible con dispositivos móviles en Elementor

¿Quieres que tuNavegación a pie de página¿Siempre a la vista como una aplicación móvil? Esta guía te enseñará cómo hacerlo en Elementor.Crear una navegación a pie de página pegajosaAplicable aversión gratuitaresponder cantandoVersión de pago de Elementor. La creación de este tipo de navegación 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 porque vamos aUso de CSS personalizado para dar estilo a la navegación adhesiva. 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".

Haciendo clic en el botón Signo más (+) para crear un nuevo contenedor, o desde el panel de Elementor, establezca el parámetro "contenedores" Arrastre la opción a la página.

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

• Haga clic en el botón más ( + ) en 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ípicoSi está trabajando en unCómo crear una navegación a pie de página adhesiva para sitios web de comercio electrónicopuede utilizar la columna de la izquierda para "Volver a la página principal", 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 "recuadro" 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: entipoañada un fondo al contenedor para que el menú de navegación no se confunda con otros contenidos.

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

ejemplo típicoSi el fondo del 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 a laCada elemento de navegaciónAñade iconos y etiquetas. Añade cada icono y etiqueta a una columna distinta 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, es necesario añadir un archivo personalizado 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 HTMLAñade el siguiente código al widget HTML:

#der-sticky-navigation-footer {
    display: flex; justify-content: space-around; /* Distribuye los iconos uniformemente por el contenedor */
    justify-content: space-around; /* Distribución uniforme de los iconos en el contenedor */ align-items: center; /* Centrado vertical de 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; /* Asegura que todos los iconos permanecen en una sola línea */
    bottom: 20px; /* Ajustado de 10px a 20px para hacerlo más alto */ right: 0; /* Ajustado de 10px a 20px para hacerlo 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 un espaciado coherente */
}
@media (max-width: 768px) {
    #der-sticky-navigation-footer {
        flex-direction: row; /* Ordenar los iconos en fila para la vista móvil */
        justify-content: space-evenly; /* Ordenar 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; /* Distribuir igual espacio a cada icono */
    }
}
#der-sticky-navigation-footer {
    display: flex; justify-content: space-around; /* Distribuye los iconos uniformemente por el contenedor */
    justify-content: space-around; /* Distribución uniforme de los iconos en el contenedor */ align-items: center; /* Centrado vertical de 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; /* Asegura que todos los iconos permanecen en una sola línea */
    bottom: 20px; /* Ajustado de 10px a 20px para hacerlo más alto */ right: 0; /* Ajustado de 10px a 20px para hacerlo 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 un espaciado coherente */
}

@media (max-width: 768px) {
    #der-sticky-navigation-footer {
        flex-direction: row; /* Ordenar los iconos en fila para la vista móvil */
        justify-content: space-evenly; /* Ordenar 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; /* Distribuir igual espacio a cada icono */
    }
}
#der-sticky-navigation-footer {
    display: flex; justify-content: space-around; /* Distribuye los iconos uniformemente por el contenedor */
    justify-content: space-around; /* Distribución uniforme de los iconos en el contenedor */ align-items: center; /* Centrado vertical de 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; /* Asegura que todos los iconos permanecen en una sola línea */
    bottom: 20px; /* Ajustado de 10px a 20px para hacerlo más alto */ right: 0; /* Ajustado de 10px a 20px para hacerlo 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 un espaciado coherente */
}

@media (max-width: 768px) {
    #der-sticky-navigation-footer {
        flex-direction: row; /* Ordenar los iconos en fila para la vista móvil */
        justify-content: space-evenly; /* Ordenar 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; /* Distribuir igual espacio a cada icono */
    }
}

Este código ancla la navegación del 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 botón z-index para garantizar que la navegación no se sobrescriba con otros contenidos.

Paso 5: Ajustes finales y finalización

Puedes retocar el CSS o hacer otros cambios de 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, los iconos pueden sustituirse por logotipos de la marca o se pueden 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 hoverAumentar 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 contrastadosElija un color que contraste con el fondo del sitio para que la navegación adhesiva resulte más llamativa.
• Añadir efectos de animaciónAñade animaciones sutiles al pie de página cuando aparezca para hacerlo más atractivo, como un fundido de entrada o un deslizamiento de salida al desplazarse.
• Garantizar la compatibilidad con dispositivos móvilesPrueba diferentes tamaños de pantalla para asegurarte 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 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 un pie de página adhesivo?

La navegación adhesiva 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 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 adhesiva 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 a la vista 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.