Saltar al contenido

Barras Laterales

¿Queréis crear una barra lateral totalmente personalizada? olvidaros de la barra lateral tradicional y bienvenidos a gutenberg

Editables desde el editor de páginas

Una de las ventajas de crear una barra lateral en el editor de gutenberg es que puedes editarla y añadir cualquier bloque con más facilidad, sean o no widgets

¿Cómo crear una barra lateral?

Muy fácil, debemos de usar el bloque “columnas” y distribuir en porcentaje cualquier bloque de 2 columnas para determinar el ancho de cada una.

La columna más grande será la principal y la más pequeña nuestra barra lateral, en ella debemos añadir un bloque “Fondo” y asignarle la clase CSS “barralateral”

Podéis escoger el color de vuestro fondo seleccionando con la propiedad que nos incluye el bloque de gutenberg fondo o incluso una imagen.

¿Cómo insertar contenido con una barra lateral?

Hay que tener en cuenta que la columna de barra lateral, se mostrará siempre después de que termine la primera columna, por lo que éste TIP sólo funciona de momento con barras laterales a la derecha.

También recordaros que tenéis que crear TODO el contenido sobre la columna principal, ya que de lo contrario si creáis más bloques después de la barra lateral, os aparecerá en mitad del contenido de vuestra web en formato móvil y la idea es mostrarla al final

CSS para Barra

/* Barra lateral con bloque fondo */
@media (min-width: 1040px){
.barralateral {
border-radius: 15px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.7), 0 9px 20px 0 rgba(0, 0, 0, 0.19);
border: 1px solid darkgrey;
background: white;
padding: 0;
color: black;
height: auto;
min-height: auto;
margin-bottom:1.5rem;
}
.barralateral:before{
opacity:0!important;
}
}
@media (max-width: 1040px){
.barralateral {
border-radius: 15px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.7), 0 9px 20px 0 rgba(0, 0, 0, 0.19);
border: 1px solid darkgrey;
background: white;
padding: 1rem;
color: black;
height: auto;
min-height: auto;
}
.barralateral:before{
opacity:0!important;
}
}
.wp-block-latest-posts.wp-block-latest-posts__list {
margin-top: 1rem;
margin-bottom: 1rem;
padding-left: 0;
}

Tipos de Bordes

/* tipos para añadir a la propiedad border:
dotted ,dashed ,solid ,double ,groove ,ridge ,inset ,outset ,none ,hidden */
/* PERSONALIZAR sombreado */
box-shadow: 0 4px 8px 0 #DDA20B, 0 9px 16px 0 #FFC545;
/*Elegir color y variar las profundidades para probar*/

    Contacta

    fernantec avatar

      • Optimizado para Gutenberg
      • Soporte ilimitado
      • Monetiza tu WEB
      • Mejora los Rankings en Google
      • Actualizaciones de por vida

      Página creada por FernanTEC - ¿Quieres saber más?