• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Mover barra lateral al inicio en móviles

Mover barra lateral al inicio en móviles

Mover barra lateral al inicio en móviles

[ 19 enero 2022 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

css

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

¿Tienes un tema que en modo responsive te mueve la barra lateral al final?, en este artículo aprenderemos cómo cambiar este comportamiento de manera simple usando código.

 

Resultado Final

Al final lo que queremos obtener es algo similar a lo que se muestra en la siguiente imagen, como se muestra en la imagen hay filtros de productos de WooCommerce que deberían mostrarse antes del contenido.

Mover widgets barra lateral al inicio móvil

 

Estructura del tema

Lo primero será detectar la estructura del tema que usas, deberías tener una estructura HTML como la siguiente:

<div class="container">
  <div class="content"></div>
  <div class="sidebar"></div>
</div>
Para localizar la estructura HTML en el tema que usas puedes usar el Inspector de código de tu navegador.

 

Código CSS para cambiar el orden de los elementos

Básicamente se trata de agregar un media query para que sólo tenga efecto en móviles y luego agregar código al contenedor.

 
Por ejemplo en base a la estructura HTML anterior:

@media (max-width:768px){
    .container{
      display: flex;
      flex-direction: column-reverse;
    }
}

En el código anterior:

  • Volvemos flex al container
  • Cambiamos el orden de los elementos del contenedor

Para agregar este código puedes revisar: Agregar código CSS en WordPress de manera correcta.

 

Conclusión

Si el tema que usas tiene una barra lateral, puedes cambiar la posición en la que esta barra aparece en modo móvil, en este artículo hemos visto cómo cambiar esto de manera simple a través de código CSS.

 
¿Aún con dudas?, en el siguiente video se detalla cómo usar el código CSS con un ejemplo real.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Ocultar Widget Móviles WordPressOcultar Widgets en dispositivos móviles
  • Widget sidebar al inicio en móvilesMostrar widget lateral al inicio en móviles
  • Cambiar logo version móvilCambiar el logo en la versión móvil de tu sitio Web
  • Fijar Widget lateral en WordPress sin pluginsFijar Widget lateral en WordPress sin plugins
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (2 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Luis

    9 julio, 2022

    Que fácil, lo probé en mi blog y funcionó de maravilla, ya desde hace mucho buscaba hacerlo, de nuevo mil gracias por la ayuda.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Agregar datos a los endpoints de la API de WooCommerce

Listar todos los Shortcodes en un sitio WordPress

Animación de saltos de enlace en WordPress

Ordenar alfabéticamente el contenido de WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados