Cómo incluir una barra lateral fija de altura completa en la plantilla de publicación de tu blog

Avance

Antes de comenzar, echemos un vistazo a la barra lateral fija de altura completa.

Escritorio

Móvil

Descargue la plantilla de barra lateral fija de altura completa GRATIS

Para poner sus manos en la plantilla de barra lateral fija de altura completa gratuita, primero deberá descargarla usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.

Crear widget de barra lateral

Antes de comenzar con la plantilla de barra lateral fija de altura completa, cree un widget de barra lateral personalizado. Más adelante, incluiremos esto en nuestra barra lateral dentro de la plantilla.

Abrir generador de widgets

Haga clic en ‘Apariencia’ y seleccione ‘Widgets’.

Agregar elementos al widget de la barra lateral

Arrastre los elementos ‘Publicaciones recientes’ y ‘Categorías’ al widget de la barra lateral.

Ajustar la configuración del elemento en el widget

Elija mostrar solo 3 publicaciones recientes y agregue un título. Agregue un título al widget de categorías también y no olvide hacer clic en ‘Guardar’ en ambos cuadros cuando haya terminado.

• Título de publicaciones recientes: Leer más:
• Categorías Título: Navegar

2. Comience con el generador de temas

Abrir generador de temas/Agregar nueva plantilla

¡Es hora de comenzar a recrear la plantilla de barra lateral fija de altura completa! Primero, abra su generador de temas y agregue una nueva plantilla.

Establecer la configuración de la plantilla

En la configuración de la plantilla, seleccione ‘Todas las publicaciones de blog’. Si desea utilizar la plantilla para una categoría o etiqueta específica, modifique la configuración de la plantilla en consecuencia.

Agregar cuerpo personalizado

Luego, haga clic en ‘Agregar cuerpo personalizado’.

Seleccione Crear cuerpo personalizado

Volveremos a crear esta plantilla desde cero, así que adelante, elija ‘Crear cuerpo personalizado’.

Construir desde cero

Una vez dentro del constructor visual, seleccione la opción para construir desde cero una vez más.

Vuelva a crear la plantilla con una barra lateral fija de altura completa

Ajustes de sección

Fondo

Abra la sección existente dentro de su editor de plantillas y agregue un fondo degradado.

• Gradiente de fondo
  
  • Color 1: Blanco #ffffff
  • Color 2: gris claro #eaeaea

Espaciado

Agrega algo de relleno también.

• Relleno superior: 55px

Agregar nueva fila

Estructura de la columna

Ahora agregue una fila con una estructura de columna de 3/4 a 1/4.

Dimensionamiento

Ajuste el tamaño de la fila de la siguiente manera.

• Ancho de canalón personalizado: 2
• Ancho:
  
  • Computadora de escritorio y tableta: 90%
  • Teléfono: 100%
• Anchura máxima:
  
  • Escritorio: 1920px
• Altura mínima: 100vh

Configuración de la columna 1

Espaciado

Antes de agregar módulos, ajuste la configuración de la columna. Primera columna 1.

• Relleno izquierdo y derecho
  
  • Tableta: 2%
  • Teléfono: 8%

Configuración de la columna 2

Fondo

Luego, agregue un color de fondo a la columna 2.

• Color de fondo: Blanco #ffffff

Espaciado

Incluya algo de espacio también.

• Relleno izquierdo y derecho
  
  • Escritorio: 3%
  • Tableta y teléfono: 14%

Borde

Dale a la columna las esquinas redondeadas a continuación.

• Esquinas redondeadas
  
  • Tableta y escritorio: 15px

CSS personalizado

Vaya a la pestaña avanzada y agregue algunas líneas de código CSS al elemento principal. Esto nos ayudará a crear la barra lateral de altura completa en el escritorio.

• Elemento principal
  
  • min-altura: 100%

Posición

Por último, pero no menos importante, para crear el efecto de barra lateral fija, agregue una posición fija a la columna.

• Posición
  
  • Escritorio: Fijo
  • Tableta y teléfono: Predeterminado
• Ubicación: arriba a la derecha

Agregar título de la publicación Módulo n.º 1

Elementos

¡Es hora de agregar módulos! Comience con un módulo de título de la primera publicación en la columna 1 y habilite solo el título.

• Mostrar título: Sí

Imagen de fondo dinámica

Luego, vaya a la configuración de fondo y use la imagen destacada como una imagen de fondo dinámica.

Texto del título

Dale estilo a la configuración del texto del título.

• Fuente del título: Bai Jamjuree
• Estilo de fuente del título: Mayúsculas
• Color del texto del título: #e98074
• Tamaño del texto del título:
  
  • Escritorio: 45px
  • Tableta: 35px
  • Teléfono: 25px
• Espaciado entre letras del título: 3px
• Altura de la línea del título: 1,3 em

Espaciado

Luego, agregue un poco de relleno superior e inferior personalizado.

• Acolchado superior: 20%
• Acolchado inferior: 20%

Borde

Incluye también algunas esquinas redondeadas.

• Todas las esquinas: 15px

CSS del título

Y complete la configuración del módulo agregando tres líneas de código CSS al elemento de título del módulo en la pestaña avanzada.

Agregar título de la publicación Módulo n.º 2

Elementos

Ahora agregue otro módulo de título de publicación. Seleccione los siguientes elementos.

• Meta
• Autor
• Categorías de publicaciones

metatexto

Abra la pestaña de diseño y aplique estilo al metatexto.

• Fuente: Bai Jamjuree
• Peso: Medio
• Color: Gris #8e8d8a
• Tamaño
  
  • Escritorio: 20px
  • Tableta y teléfono: 15px
• Espaciado entre letras: 2px

Dimensionamiento

Ajuste el tamaño también.

• Ancho: 90%
• Alineación del módulo: Centro

Espaciado

Complete la configuración de este módulo con algo de espacio.

• Relleno superior: 15px

Agregar módulo de contenido de publicación

Fondo

Agregue un módulo de contenido de publicación con un fondo blanco a continuación.

• Color de fondo: Blanco #ffffff

Texto

Ahora, diseñe el cuerpo del texto.

• Fuente: Lato
• Color: Gris #8e8d8a
• Tamaño: 16px

Texto de encabezado

Continúe diseñando todos los estilos de texto de encabezado.

• H1
  
  • Fuente: Bai Jamjuree
  • Peso: Medio
  • Color: Coral #e98074
  • Tamaño
    
    • Escritorio: 45px
    • Tableta: 33px
    • Teléfono: 30px
  • Espaciado entre letras: 1px
• H2
  
  • Fuente: Bai Jamjuree
  • Peso: Medio
  • Color: Coral #e98074
  • Tamaño
    
    • Escritorio: 35px
    • Tableta y teléfono: 25px
  • Espaciado entre letras: 1px
• H3
  
  • Fuente: Bai Jamjuree
  • Peso: Regular
  • Color: Gris oscuro #606060
  • Tamaño
    
    • Escritorio: 25px
    • Tableta y teléfono: 22px
  • Espaciado entre letras: 1px
• H4
  
  • Fuente: Bai Jamjuree
  • Peso: Regular
  • Color: Gris oscuro #606060
  • Tamaño
    
    • Escritorio: 22px
    • Tableta: 20px
    • Teléfono: 18px
  • Espaciado entre letras: 1px
• H5
  
  • Fuente: Bai Jamjuree
  • Peso: Medio
  • Color: Gris oscuro #606060
  • Tamaño: 16px
  • Espaciado entre letras: 1px
• H6
  
  • Fuente: Bai Jamjuree
  • Peso: Regular
  • Color: Gris oscuro #606060
  • Tamaño: 16px
  • Espaciado entre letras: 1px

Espaciado

Agregue algunos ajustes de espaciado también.

• Margen superior: 40px
• Acolchado superior: 10%
• Acolchado inferior: 10%
• Relleno izquierdo: 10%
• Relleno Derecho: 10%

Borde

Por último, pero no menos importante, agregue algunas esquinas redondeadas.

• Borde redondeado: 15px

Agregar módulo de comentarios

Elementos

Para completar la primera columna, agregue un módulo de comentarios. Habilite los siguientes elementos:

• Botón de respuesta
• Recuento de comentarios

Campos

En la pestaña de diseño, aplique estilo a los campos.

• Color de fondo: gris claro #f7f7f7
• Color del texto: Gris #8e8d8a
• Fuente: Bai Jamjuree
• Tamaño del texto: 17px
• Esquinas redondeadas: 15px

Texto de conteo de comentarios

Diseñe también el texto del conteo de comentarios.

• Nivel de título: H3
• Fuente: Bai Jamjuree
• Color: Coral #e98074
• Tamaño: 22px
• Espaciado entre letras: 1px

Texto del título del formulario

Luego el título del formulario.

• Nivel de título: H3
• Fuente: Bai Jamjuree
• Color: Coral #e98074
• Tamaño: 18px
• Espaciado entre letras: 1px

metatexto

Dale estilo al metatexto también.

• Fuente: Bai Jamjuree
• Color: #606060
• Tamaño: 14px
• Espaciado entre letras: 1px

Texto del comentario

No olvides el texto del comentario.

• Fuente: Bai Jamjuree
• Tamaño: 1px

Botón

Ahora diseña los botones.

• Estilos personalizados
• Tamaño del texto: 18px
• Color del texto: Blanco #ffffff
• Color de fondo: Coral #e98074
• Radio del borde del botón: 15px
• Fuente del botón: Bai Jamjuree

Dimensionamiento

Ajuste el tamaño de la fila también.

• Ancho: 90%

Espaciado

Así como la configuración de espaciado.

• Acolchado superior: 8%
• Relleno izquierdo y derecho: 4%

Agregar módulo de persona

Texto

Pase a la columna de la barra lateral fija y agregue un módulo de persona.

• Nombre: Autor de publicación dinámica
• Antes: Escrito por:

Texto del título

En la pestaña de diseño, estilice el texto del encabezado de la siguiente manera:

• Nivel de título: H4
• Fuente: Bai Jamjuree
• Color: Coral #e98074
• Tamaño: 2vh
• Espaciado entre letras: 2px

Dimensionamiento

Ajuste el tamaño a continuación.

• Altura mínima:
  
  • Escritorio: 3vh
  • Tableta y teléfono: automático
• Altura máxima:
  
  • Escritorio: 3vh
  • Tableta y teléfono: automático

Espaciado

Agregue un espacio personalizado también.

• Margen superior
  
  • Escritorio: 6vh
  • Tableta y Teléfono: 10vh

Agregar módulo de imagen

Imagen

Ahora, agregue un módulo de imagen. Seleccione contenido dinámico para la imagen del autor.

• Imagen: Imagen dinámica del perfil del autor

Alineación

Vaya a la pestaña de diseño y elija la siguiente alineación:

• Alineación de imagen: Izquierda

Dimensionamiento

Ajuste el tamaño del módulo a continuación.

• Ancho máximo: 15vh
• Alineación del módulo: Izquierda
• Altura máxima
  
  • Escritorio: 15vh

Borde

Finalmente, agregue algunas esquinas redondeadas a la configuración del borde.

• Esquinas más redondeadas: 15px

Agregar módulo de barra lateral

Contenido

Ahora es el momento de agregar los widgets de la barra lateral usando el módulo de la barra lateral.

• Área de widgets: barra lateral

Disposición

Ajuste el diseño primero.

• Mostrar separador de borde: No

Texto del título

Modifique la configuración del texto del título a continuación.

• Fuente: Bai Jamjuree
• Peso: Medio
• Color: Coral #e98074
• Tamaño: 2vh
• Espaciado entre letras: 2px

Cuerpo de texto

Continúe con el cuerpo del texto.

• Fuente: Bai Jamjuree
• Peso: Liviano
• Color: Gris oscuro #7f7f7f
• Color flotante: Coral #e98074
• Tamaño: 1.5vh
• Espaciado entre letras: 1px
• Altura de la línea: 1,8 em

Dimensionamiento

Ajuste el tamaño del módulo también.

• Altura mínima
  
  • Escritorio: 12vh
  • Tableta y teléfono: automático
• Altura máxima
  
  • Escritorio: 12vh
  • Tableta y teléfono: automático

Espaciado

No olvides agregar un poco de espacio.

• Acolchado superior
  
  • Escritorio: 1vh
  • Tableta y Teléfono: 3vh

CSS personalizado

Por último, pero no menos importante, incluya algunas líneas de código CSS en la pestaña avanzada.

• Widget: relleno inferior: 0vh;

• Título: acolchado inferior: 2vh;

Agregar opción de correo electrónico

Texto

El siguiente módulo que necesitamos en nuestra barra lateral es un módulo de suscripción por correo electrónico. Agregue algún contenido de su elección.

• Título: Actualizaciones
• Botón: Suscribirse

Cuenta de correo electrónico

Conecte su correo electrónico al siguiente formulario.

• Proveedor de servicios: su proveedor de correo electrónico
• Lista: Tu lista elegida

Campos

Solo estamos usando el campo de nombre en la configuración de campos.

• Mostrar campo de nombre

Fondo

Luego, desactive el fondo predeterminado.

• Usar color de fondo: No

Disposición

Pase a la pestaña de diseño y modifique la configuración de diseño.

• Diseño: cuerpo en la parte superior, formulario en la parte inferior
• Nombre de ancho completo: No
• Correo electrónico de ancho completo: No

Campos

Luego, diseñe los campos de la siguiente manera:

• Color de fondo: Verde claro #f7f7f7
• Color del texto: #606060
• Acolchado superior e inferior: 1vh
• Relleno izquierdo: 1vh
• Fuente: Bai Jamjuree
• Tamaño de texto: 1.5vh
• Espaciado entre letras: 1px
• Esquinas redondeadas: 15px

Texto del título

Dale estilo al texto del título también.

• Nivel de título: H4
• Fuente: Bai Jamjuree
• Color: Coral #e98074
• Tamaño: 2vh
• Espaciado entre letras: 2px
• Altura de línea: 1em

Botón

Luego, el botón.

• Estilos personalizados
• Tamaño de texto: 1.5vh
• Color del texto: Blanco #ffffff
• Color de fondo: Coral #e98074
• Radio del borde: 15px
• Espaciado entre letras: 2px
• Fuente: Bai Jamjuree
• Acolchado superior e inferior: 1vh

Espaciado

Y complete la configuración del módulo y el tutorial agregando algunos valores de espaciado personalizados al módulo. ¡Eso es todo! Asegúrese de guardar todos los cambios del generador de temas una vez que haya terminado de crear el cuerpo de la plantilla.

• Acolchado superior
  
  • Escritorio y tableta: 0vh
• Acolchado inferior
  
  • Escritorio: 2vh
  • Tableta y Teléfono: 6vh
• Relleno izquierdo y derecho
  
  • Escritorio y tableta: 0vh

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

¡Eso es un envoltorio!

Terminamos de recrear la barra lateral fija de altura completa para las plantillas de publicación de tu blog. Si descargó la plantilla del enlace anterior, no olvide configurar los widgets de la barra lateral como se muestra en la primera parte de este tutorial.

¿Eres un tipo de persona de barra lateral o sin barra lateral? ¡Háganos saber en los comentarios si tiene alguna idea o pregunta!