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

La elección de agregar una barra lateral a las publicaciones de su blog depende completamente de usted. Algunos blogueros optan por no utilizar ninguna barra lateral. Este tutorial es para aquellos de ustedes que prefieren usar una barra lateral pero quieren que se vea un poco diferente. Por lo general, las barras laterales están ubicadas estáticamente, pero si el contenido de la publicación es largo, eso significa que el lector tendrá que desplazarse hacia arriba para ver la barra lateral.

En este diseño de plantilla de publicación de blog, hemos creado una barra lateral fija de altura completa que permanece en su lugar mientras se desplaza hacia abajo por el contenido de la publicación. Mientras recrea el tutorial, mantenga dos pestañas abiertas dentro de su navegador: una para el creador de temas y otra para la vista previa de una publicación de blog. De esta manera, puede ver los cambios a medida que avanza.

¡Empecemos!

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 nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

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 el 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:
• Título de categorías: Examinar

2. Empiece a utilizar Theme Builder

Abrir Theme Builder / 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

Recrearemos esta plantilla desde cero, así que continúe y 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.

Recrear la plantilla con la barra lateral fija de altura completa

Configuración de la 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

Agregue un poco de relleno también.

• Acolchado superior: 55px

Agregar nueva fila

Estructura de la columna

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

Dimensionamiento

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

• Ancho de canalón personalizado: 2
• Ancho:
  • Escritorio y tableta: 90%
  • Telefono: 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. Columna 1 primero.

• Acolchado 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 también algo de espacio.

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

Frontera

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

• 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
  • altura mínima: 100%

min-height: 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 módulo de título de la publicación 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

Aplicar 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 de letras de título: 3px
• Altura de la línea de título: 1.3em

Espaciado

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

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

Frontera

Incluya también algunas esquinas redondeadas.

• Todas las esquinas: 15px

Título CSS

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.

background-color: rgba(255,255,255,0.56);
padding-top: 2%;
padding-bottom: 2%;

Agregar módulo de título de la publicación n. ° 2

Elementos

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

• Meta
• Autor
• Categorías de publicaciones

Meta texto

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

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

Dimensionamiento

Ajusta 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.

• Acolchado superior: 15px

Agregar módulo de contenido de publicación

Fondo

A continuación, agregue un módulo de contenido de publicación con un fondo blanco.

• Color de fondo: blanco #ffffff

Texto

Ahora, aplique estilo al texto del cuerpo.

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

Texto de encabezado

Continúe aplicando estilo a 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 también algunas configuraciones de espaciado.

• Margen superior: 40px
• Acolchado superior: 10%
• Acolchado inferior: 10%
• Acolchado izquierdo: 10%
• Acolchado derecho: 10%

Frontera

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

Los 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 recuento de comentarios

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

• Nivel de encabezado: 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 encabezado: H3
• Fuente: Bai Jamjuree
• Color: Coral # e98074
• Tamaño: 18px
• Espaciado entre letras: 1px

Meta texto

Diseñe también el meta texto.

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

Texto de comentario

No olvide el texto del comentario.

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

Botón

Ahora diseñe 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

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

• Ancho: 90%

Espaciado

Así como la configuración de espaciado.

• Acolchado superior: 8%
• Acolchado 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, aplique el estilo del texto del encabezado de la siguiente manera:

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

Dimensionamiento

A continuación, ajusta el tamaño.

• 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 poco de 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 de perfil de autor dinámico

Alineación

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

• Alineación de imagen: izquierda

Dimensionamiento

A continuación, ajuste el tamaño del módulo.

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

Frontera

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

• Esquinas más redondas: 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

Diseño

Primero, ajusta el diseño.

• Mostrar separador de bordes: No

Texto del título

A continuación, modifique la configuración del texto del título.

• 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: ligero
• Color: Gris oscuro # 7f7f7f
• Color flotante: Coral # e98074
• Tamaño: 1.5vh
• Espaciado entre letras: 1px
• Altura de la línea: 1.8em

Dimensionamiento

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

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

Espaciado

No olvide 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: padding-bottom: 0vh;

padding-bottom: 0vh;

• Título: padding-bottom: 2vh;

padding-bottom: 2vh;

Agregar correo electrónico Optin

Texto

El siguiente módulo que necesitamos en nuestra barra lateral es un módulo de suscripción de 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: su lista elegida

Los campos

Solo usamos el campo de nombre en la configuración de los campos.

• Mostrar campo de nombre

Fondo

Luego, desactive el fondo predeterminado.

• Usar color de fondo: No

Diseño

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

• Disposición: cuerpo en la parte superior, forma en la parte inferior
• Nombre de ancho completo: No
• Ancho completo del correo electrónico: No

Los campos

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

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

Texto del título

Diseñe también el texto del título.

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

Botón

Luego, el botón.

• Estilos personalizados
• Tamaño del texto: 1.5vh
• Color del texto: blanco #ffffff
• Color de fondo: Coral # e98074
• Radio de 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
• Acolchado 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!

Hemos terminado de recrear la barra lateral fija de altura completa para las plantillas de publicaciones de su 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 con barra lateral o sin barra lateral? ¡Háganos saber en los comentarios si tiene alguna idea o pregunta!