Ajuste del Footer en Elementor para Blog Personalizado

  • Autor Autor Foreroanónimo
  • Fecha de inicio Fecha de inicio
F

Foreroanónimo

Beta
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Estoy haciendo un blog con plantillas propias hechas en Elementor, tanto header, footer, entradas, archive, etc.
Lo que quiero es que el footer se muestre abajo de todo el contenido de la página (no pegado en la parte inferior de la pantalla), pero ocurre que se muestra justo cuando termina el contenido, pudiendo aparecer en medio de toda la pantalla, y eso no es estético.

Vsf324g.jpg


Tras buscar información me hago una idea de qué se necesita hacer, y hay muchas soluciones con código en chatgpt, youtube y google, pero no tienen efecto cuando las aplico.
Como solución temporal, en Elementor he cogido mi plantilla de archive y le he dado una altura mínima al contenedor de las entradas, y así al menos cuando hay poco contenido separa el footer,

K3GBLKh.jpg



pero no es una solución al problema porque no encaja del todo bien al footer con la pantalla, y además cuando hago zoom el footer vuelve a generar espacios en blanco.

AOH0Q1V.jpg
 
El problema es porque solo tienes una barra como footer, lo ideal es que agregues un footer completo.
Asi diseñas uno para todo el sitio y se verá mucho mejor, este es solo un ejemplo, hay muchos diseños de footer.
1689311616065.webp
 
El problema es porque solo tienes una barra como footer, lo ideal es que agregues un footer completo.
Asi diseñas uno para todo el sitio y se verá mucho mejor, este es solo un ejemplo, hay muchos diseños de footer.
Ver el archivo adjunto 1054006
Gracias por tu comentario.
El problema no es la altura del footer sino el posicionamiento: debe poder anclarse en la parte inferior de la página (que no de la pantalla) con independencia de su diseño.
 
Si puedes enviar un vídeo sería mejor para entender.
 
Creo que la mejor opción es como comentaste , a la sección donde muestras las entradas ponle de altura 100vh o 90vh y así el footer debería quedarte siempre al final de la pantalla amigo
 
Es cuando haces una pagina sin casi contenido sin tanto height y el footer esta casi a la mitad (figura 1)
O con position: fixed; ... etc siempre estara abajo el footer (figura 2)
Si le pone mas contenido o mas height estara mas abajo (figura 3)
2023-07-14_071216.webp
 
Creo que la mejor opción es como comentaste , a la sección donde muestras las entradas ponle de altura 100vh o 90vh y así el footer debería quedarte siempre al final de la pantalla amigo
Lo hice con 77vh y en apariencia el footer se mantiene abajo, pero no es la solución porque deja una pequeñísima linea horizontal blanca justo debajo del footer, demostrando que no está en la parte inferior de la página sino solo colocado aparentemente allí, y como la medida de 77vh no se acopla exactamente, pues deja ese pequeño vacío.

CGhrHNn.jpg



Por eso cuando hago zoom, el footer vuelve a subir de posición y deja espacios en blanco grandes, porque esos 77vh de altura solo lo solucionaba visualmente.
No se trata de que el footer esté separado del contenido con un gran espacio, sino que esté en la parte inferior de la página y que encaje con las medidas de la pantalla.

L2gtNwO.jpg



Si puedes enviar un vídeo sería mejor para entender.

Si te fijas, el footer de Forobeta es esa barra horizontal de abajo que tiene "Manual
WhatsApp
Negocios seguros
Reglas
Política de privacidad
RSS"
Si vas a este enlace de Forobeta https://forobeta.com/paid-ads/cart y tienes el carrito vacío, verás que la página tiene un gran espacio vacío en medio. Sin embargo, el footer se mantiene en la parte inferior de la página incluso si haces zoom. Si no lo tuvieran bien hecho, el footer les aparecería inmediatamente después del texto "Sin elementos que mostrar", es decir, tendrían el footer en medio de toda la pantalla, lo cual se ve poco estético.
 
¿No tiene otro div/elemento abajo de "footer"?
¿o "footer" no tiene margin o padding?

<div class=contenido> </div>
<div class=footer> </div>
------
<div class=xxx> </div>
 
¿No tiene otro div/elemento abajo de "footer"?
¿o "footer" no tiene margin o padding?

<div class=contenido> </div>
<div class=footer> </div>
------
<div class=xxx> </div>

En inspector de elementos veo que después del footer está el típico botón de scroll top. El footer, en Elementor, tiene margin y padding "0".


umnoDNp.jpg
 
Trabajar con Elementor puede tener desafíos. Asegúrate de aplicar correctamente las soluciones sugeridas o considera buscar ayuda especializada.
 
Atrás
Arriba