Cómo incluir una barra lateral fija en los post de tu blog con el generador de temas Divi

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.

Avance

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

Escritorio

Móvil

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. Comience con el generador de temas

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

Once inside the visual builder, select the option to build from scratch once more.

Recreate The Template With Full-Height Fixed Sidebar

Section Settings

Background

Open the existing section inside your template editor and add a gradient background.

• Background Gradient
  • Color 1: White #ffffff
  • Color 2: Light Grey #eaeaea

Spacing

Add some padding too.

• Top Padding: 55px

Add New Row

Column Structure

Now add a row with a 3/4 – 1/4 column structure.

Sizing

Adjust the sizing of the row as follows.

• Custom Gutter Width: 2
• Width:
  • Desktop and Tablet: 90%
  • Phone: 100%
• Max Width:
  • Desktop: 1920px
• Min Height: 100vh

Column 1 Settings

Spacing

Before adding modules, adjust the column settings. Column 1 first.

• Left and Right Padding
  • Tablet: 2%
  • Phone: 8%

Column 2 Settings

Background

Then, add a background color to column 2.

• Background Color: White #ffffff

Spacing

Include some spacing too.

• Left and Right Padding
  • Desktop: 3%
  • Tablet and Phone: 14%

Border

Give the column rounded corners next.

• Rounded Corners
  • Tablet and Desktop: 15px

Custom CSS

Move over to the advanced tab and add some CSS code lines to the main element. This will help us create the full-height sidebar on desktop.

• Main Element
  • min-height: 100%

Position

Last but not least, to create the fixed sidebar effect, add a fixed position to the column.

• Position
  • Desktop: Fixed
  • Tablet and Phone: Default
• Location: Top Right

Add Post Title Module #1

Elements

Time to add modules! Start with a first post title module in column 1 and enable the title only.

• Show Title: Yes

Dynamic Background Image

Then, go to the background settings and use the featured image as a dynamic background image.

Title Text

Style the title text settings.

• Title Font: Bai Jamjuree
• Title Font Style: Uppercase
• Title Text Color: #e98074
• Title Text Size:
  • Desktop: 45px
  • Tablet: 35px
  • Phone: 25px
• Title Letter Spacing: 3px
• Title Line Height: 1.3em

Spacing

Then, add some custom top and bottom padding.

• Top Padding: 20%
• Bottom Padding: 20%

Border

Include some rounded corners too.

• All Corners: 15px

Title CSS

And complete the module settings by adding three lines of CSS code to the module’s title element in the advanced tab.

Add Post Title Module #2

Elements

Now add another post title module. Select the following elements.

• Meta
• Author
• Post Categories

Meta Text

Open the design tab and style the meta text.

• Font: Bai Jamjuree
• Weight: Medium
• Color: Grey #8e8d8a
• Size
  • Desktop: 20px
  • Tablet and Phone: 15px
• Letter Spacing: 2px

Sizing

Adjust the sizing too.

• Width: 90%
• Module Alignment: Center

Spacing

Complete this module’s settings with some spacing.

• Top Padding: 15px

Add Post Content Module

Background

Add a post content module with a white background next.

• Background Color: White #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
  • Talla
    • Escritorio: 45px
    • Tableta: 33px
    • Teléfono: 30px
  • Espaciado entre letras: 1px
• H2
  • Fuente: Bai Jamjuree
  • Peso: medio
  • Color: Coral # e98074
  • Talla
    • Escritorio: 35px
    • Tableta y teléfono: 25px
  • Espaciado entre letras: 1px
• H3
  • Fuente: Bai Jamjuree
  • Peso: Regular
  • Color: gris oscuro # 606060
  • Talla
    • Escritorio: 25px
    • Tableta y teléfono: 22px
  • Espaciado entre letras: 1px
• H4
  • Fuente: Bai Jamjuree
  • Peso: Regular
  • Color: gris oscuro # 606060
  • Talla
    • 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: 40 px
• 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

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

Dale estilo al meta texto también.

• 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

Ajuste 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, diseñe el 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

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 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 mediante 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;

• Título: 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

Campos

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

• Mostrar campo de nombre

Antecedentes

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

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! 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