Cómo agregar una barra fija en la parte inferior en móviles con WordPress
En esta guía vas a aprender a crear una barra fija en la parte inferior de tu sitio WordPress visible solo en dispositivos móviles. Este tipo de barra es ideal para mostrar accesos rápidos como WhatsApp, llamada telefónica, formulario de contacto, ubicación o redes sociales.
Una barra fija mobile mejora la experiencia del usuario porque mantiene siempre visibles las acciones más importantes sin obligar al visitante a desplazarse hasta el footer tradicional.
Se utiliza mucho en sitios de:
- negocios locales
- estudios jurídicos
- clínicas
- inmobiliarias
- ecommerce
- landing pages de conversión
¿Por qué usar una barra fija móvil?
Las pantallas móviles tienen poco espacio y los usuarios esperan interacciones rápidas.
Una barra sticky inferior ayuda a:
- aumentar conversiones
- mejorar accesibilidad
- facilitar contacto inmediato
- reducir fricción de navegación
Ejemplos de botones frecuentes:
- Comprar
- Llamar
- Contacto
- Cómo llegar
- Reservar turno
Método recomendado: HTML + CSS + JavaScript liviano
Actualmente, lo más recomendable es insertar la barra mediante:
- bloque HTML personalizado
- plugin de snippets
- tema hijo
Evitar modificar directamente archivos del tema principal.
Código HTML
Podés insertar este bloque usando:
- widget HTML
- bloque HTML personalizado
- footer template
<div class="mobile-fixed-bar" id="mobileBar">
<a href="https://wa.me/5491112345678" target="_blank" rel="noopener">
WhatsApp
</a>
<a href="tel:+541112345678">
Llamar
</a>
<a href="/contacto/">
Contacto
</a>
</div>Código CSS para el diseño de la barra
Este CSS crea la barra fija responsive y adaptada a móviles modernos:
.mobile-fixed-bar {
position: fixed;
bottom: env(safe-area-inset-bottom, 0);
left: 0;
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
background: #ffffff;
box-shadow: 0 -2px 10px rgba(0,0,0,.12);
z-index: 9999;
border-top: 1px solid #e5e5e5;
}
.mobile-fixed-bar a {
text-align: center;
padding: 14px 8px;
font-size: 14px;
font-weight: 600;
color: #222;
text-decoration: none;
}
.mobile-fixed-bar a:hover {
background: #f5f5f5;
}
@media (min-width: 769px) {
.mobile-fixed-bar {
display: none;
}
}
JavaScript opcional: ocultar al subir scroll
Este script hace que la barra aparezca al bajar y se oculte al subir, mejorando UX.
<script>
let lastScroll = 0;
const bar = document.getElementById('mobileBar');
window.addEventListener('scroll', () => {
const currentScroll = window.pageYOffset;
if (currentScroll > lastScroll && currentScroll > 100) {
bar.style.transform = 'translateY(100%)';
} else {
bar.style.transform = 'translateY(0)';
}
lastScroll = currentScroll;
});
</script>Agregar transición:
.mobile-fixed-bar {
transition: transform .3s ease;
}Dónde agregar el código en WordPress
Opción 1: Editor de bloques (recomendada)
Insertar:
- HTML en bloque personalizado
- CSS en “CSS adicional”
Ruta:
Apariencia → Personalizar → CSS adicional
Opción 2: Plugin de snippets
Plugins recomendados:
- WPCode
- Code Snippets
Permiten agregar:
- HTML
- CSS
- JS
sin tocar archivos del tema.
Opción 3: Tema hijo
Si hacés desarrollos personalizados:
- HTML en footer template
- CSS en style.css
- JS en archivo separado
Buenas prácticas SEO y UX
Para que la barra no perjudique rendimiento:
1. No usar imágenes pesadas
Preferir:
- SVG inline
- texto simple
- icon fonts livianas
2. No tapar contenido
Agregar espacio inferior:
body {
padding-bottom: 70px;
}Así evitas que el contenido quede oculto detrás de la barra.
3. Accesibilidad
Agregar atributos:
aria-label="Contactar por WhatsApp"y buen contraste visual.
4. Safe areas
El uso de:
env(safe-area-inset-bottom)evita problemas con iPhone y navegadores modernos.
Personalizaciones posibles
Podés adaptar la barra para:
Ecommerce
- Comprar
- Carrito
- Checkout
Restaurantes
- Reservar mesa
- Menú
Profesionales
- Turnos
- Llamar
- Ubicación
Conclusión
Agregar una barra fija inferior en WordPress para móviles sigue siendo una excelente estrategia en 2026 para mejorar conversiones y navegación.
La implementación moderna recomienda usar:
- HTML simple
- CSS responsive
- JavaScript mínimo
sin depender de código PHP innecesario ni modificaciones invasivas del tema.
Con esta solución vas a tener una barra sticky mobile rápida, adaptable y compatible con WordPress moderno, Gutenberg y constructores visuales.
Plugins alternativos (sin código)
Si preferís no programar, podés usar plugins como:
- Sticky Menu & Sticky Header
- WPCode
- Floating Chat Buttons
aunque una implementación manual suele ser más liviana y flexible.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para videos tutoriales de Hosting, prácticas y demás. También puede encontrarnos en X (Twitter), Facebook e Instagram.
