La creación de un pie de página de navegación adherente en Elementor puede mejorar la experiencia del usuario al mantener los enlaces de navegación esenciales accesibles mientras los usuarios se desplazan, especialmente en móviles. Aquí tiene una guía completa sobre cómo configurar un pie de página adhesivo en Elementor, con pasos detallados.

Paso 1: Configurar la plantilla de navegación a pie de página adhesiva

Asegúrese Elementor y Elementor Pro estén instalados, y utilice un tema compatible con Elementor, como por ejemplo Hola Elementor o Astra.

Creación de la plantilla de pie de página

1. Abrir el editor de Elementor
   • Seleccione la página que desea editar o vaya a Plantillas > Creador de temas para crear una nueva plantilla de pie de página, garantizando un diseño coherente en todas las páginas.

3. Añadir una nueva plantilla de pie de página
   • Haga clic en "Añadir pie de página" para iniciar una nueva plantilla de pie de página. El uso de una plantilla mantiene el mismo estilo en todo el sitio.

5. Insertar la plantilla de pie de página
   • Utilice la importación de plantillas de Elementor para insertar una plantilla de pie de página guardada previamente.
   • Abra la Biblioteca de plantillas, busque la plantilla de pie de página guardada y haga clic en Inserte.

Paso 2: Añadir elementos de navegación al pie de página

Aquí, añada enlaces a páginas clave, como Inicio, Cesta, Mi cuenta y una barra de búsqueda.

Creación de la estructura del pie de página

1. Añadir un nuevo contenedor
   • En la parte inferior de su página Elementor, haga clic en "+" para añadir un nuevo contenedor designado como pie de página.

2. Configurar la estructura de columnas
   • Establezca la sección en dos o más columnas para organizar los elementos de navegación. Por ejemplo, coloque un icono de "Inicio" a la izquierda y un icono de "Carrito" a la derecha para acceder fácilmente a las páginas clave.

Añadir elementos de icono

Cada columna recibe un elemento de navegación:

1. Añadir un icono de "Inicio
   • Utilice el Icono widget: Arrastre el widget Icono a la columna de la izquierda y seleccione Caja de iconos para combinar el icono y la etiqueta.
   • Personalice el icono: Elija un icono de inicio de la biblioteca de iconos, ajustando el color y el tamaño para adaptarlo al diseño.
   • Añada un enlace: En los ajustes del widget Icono, enlace con la página de inicio (por ejemplo, / o https://yourdomain.com).

2. Añadir un icono "Cesta
   • En la columna de la derecha, añada otro widget Icono con un icono de carro.
   • Vincúlelo a la página del carrito (por ejemplo, /cart o https://yourdomain.com/cart).

3. Añadir un icono "Mi cuenta
   • Añada un icono de cuenta en una columna designada.
   • Vincúlelo a la página de la cuenta (normalmente /my-account o https://yourdomain.com/my-account).

4. Añadir una función de búsqueda
   • Arrastre el widget de búsqueda a una columna.
   • Personalice el estilo de la barra de búsqueda: Establezca el color, el tamaño y el texto del marcador de posición para que coincidan con el diseño del pie de página.

Paso 3: Personalizar el diseño y el estilo del pie de página

Después de añadir los elementos de navegación, ajuste el diseño y el estilo del pie de página para conseguir un aspecto unificado y fácil de usar.

Ajustes de la disposición

1. Ajustar la anchura de las columnas
   • Ajuste la anchura de cada columna para distribuir uniformemente los elementos de navegación en la configuración del contenedor, por ejemplo, estableciendo cada columna en 25% o 50%.

2. Alinear elementos de navegación
   • Seleccione cada widget y ajuste la alineación (centro, izquierda o derecha) para equilibrarlo.

3. Estilo Icono
   • En la configuración de cada widget de icono, ajuste el tamaño y el color del icono, y añada un efecto hover si lo desea.

Paso 4: Activar el efecto adhesivo

Utilizando el efecto pegajoso de Elementor Pro, mantenga el pie de página visible mientras los usuarios se desplazan.

1. Establezca un comportamiento pegajoso
   • Seleccione la sección de pie de página y vaya a Ajustes avanzados > Efectos de movimiento.
   • Habilite Pegajoso y colóquelo en el fondo.

2. Elija las opciones de visualización del dispositivo
   • Seleccione dónde desea aplicar el efecto adhesivo (escritorio, tableta o móvil).

Personalización del estilo

1. Color de fondo
   • Haga clic en el contenedor de pie de página y establezca un color de fondo bajo el Estilo lengüeta para facilitar la visibilidad.

2. Tipografía
   • Seleccione cada texto elemento, como las etiquetas de navegación.
   • Ir a Estilo >Contenido para personalizar la fuente, el tamaño y el color para facilitar la lectura.

Paso 5: Guardar y previsualizar

Una vez ajustado, pulse Guarde para publicar la plantilla. Previsualice para asegurarse de que el pie de página adhesivo permanece en la parte inferior y de que todos los enlaces funcionan correctamente.

Resumen

La creación de una navegación de pie de página pegajosa en Elementor ayuda a mantener los enlaces esenciales accesibles a medida que los usuarios se desplazan, mejorando la usabilidad, especialmente en dispositivos móviles. Configurar una plantilla de pie de página en el Creador de temas garantiza un diseño coherente en todas las páginas. Añadir elementos de navegación como los iconos de Inicio, Cesta, Mi cuenta y Búsqueda en columnas estructuradas facilita el acceso a las páginas clave. Personalizar el diseño, ajustar los estilos de los iconos y activar el efecto adhesivo mantiene el pie de página visible para los usuarios mientras navegan. Después de completar estos pasos, guardar y previsualizar la plantilla confirma que el pie de página adhesivo funciona sin problemas, manteniendo un diseño cohesivo y fácil de usar en todo su sitio.