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

Elegir la adición de una barra lateral a las publicaciones del blog depende completamente de ustedes, algunos bloggers eligen no usar una barra lateral. Este tutorial es para aquellos de ustedes que prefieren usar una barra lateral, pero desea que se vea un poco diferente. Por lo general, las barras laterales se colocan estáticas, pero si el contenido de publicación es largo, significa que el lector tendrá que correr de regreso para ver la barra lateral. En este diseño de plantilla de publicación de blog, creamos una barra lateral fija en toda la altura, que permanece en el acto mientras ejecutaba el contenido de publicación. Mientras recurra el tutorial, mantenga dos pestañas abiertas en su navegador: una para el generador de temas y otro para una vista previa de la publicación del blog. De esta manera, puede ver los cambios a medida que avanza.
¡Vamos a empezar! Vista previa antes de comenzar, para echar un vistazo a la barra lateral fija en toda la altura. Escritorio

Móvil

Descargue la plantilla de la barra lateral fija con altura gratuita de forma gratuita para poner las manos en la plantilla de barras laterales fijas con una altura completa, primero debe descargarla con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Cree un widget para la barra lateral antes de comenzar a usar la barra lateral fija en toda la altura, cree un widget personalizado para la barra lateral. Más tarde, incluiremos esto en nuestra barra dentro de la plantilla. Abra Widget Builder Haga clic en “Widget” y seleccione “Widgets”.
Agregue elementos al widget de la barra lateral, extraiga los elementos de “publicaciones recientes” y las “categorías” en el widget de la barra lateral.

Ajuste la configuración del elemento en el widget Elija mostrar solo 3 publicaciones recientes y agregar un título. Agregue un título de widget para categorías y no olvide hacer clic en “Guardar” en ambos cuadros cuando haya terminado.

Título de mensajes recientes: Leer más:
Categorías de títulos: navegar
2. Comience con el constructor de temas abiertos para el constructor de temas / Agregar una nueva plantilla es hora de comenzar a recrear la barra lateral fija. Primero, abra el generador de temas y agregue una nueva plantilla.

Establezca la configuración de plantilla en la configuración de plantilla, seleccione “todas las publicaciones de blog”. Si desea usar la plantilla para una categoría o etiqueta en particular, cambie la configuración de la plantilla en consecuencia. Publique el cuerpo personalizado, luego haga clic en “Agregar un cuerpo personalizado”.

Seleccione Construir un cuerpo personalizado. Recrearemos esta plantilla desde cero, así que vaya más allá y elija “construir un cuerpo personalizado”.

Construir desde cero una vez que llegue al Visual Builder, seleccione la opción de construir una vez desde cero.

Recrear la plantilla con la barra lateral fija en la configuración completa de la altura. Abra la sección existente del editor de plantillas y agregue un fondo de gradiente.

Gradiente de fondo

Color 1: blanco #ffffff
Color 2: gris claro #eaeaea
Espacio agregue un poco de relleno.
Revestimiento superior: 55 px

Agregue una nueva línea a la estructura de la columna Ahora agregue una fila con una estructura de columna 3/4 – 1/4.
Dimensión Ajuste el tamaño de la fila de la siguiente manera.

Ancho de canaleta personalizado: 2

Ancho:
Desktop y tableta: 90%
Teléfono: 100%
Ancho máximo:
Escritorio: 1920px
Altura mínima: 100 VH
Configuración de la columna 1 Espacio Antes de agregar módulos, ajuste la configuración de la columna. Columna 1 primero.
Forro izquierdo y derecho

Tableta: 2%
Teléfono: 8%
Configuración de la columna 2 Fondo y luego, agregue un color de fondo en la columna 2.
Color de fondo: blanco #ffffff

El espacio incluye algunos espacios.
Forro izquierdo y derecho

Escritorio: 3%
Tableta y teléfono: 14%
Border Dé la columna redondeada a la siguiente columna.
Esquinas redondeadas

Tableta y escritorio: 15 px
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 en toda la altura en el escritorio. El elemento principal
Min-Henchy: 100%

Min-altura: 100%;
Posicione por último, pero no menos importante, para crear el efecto de la barra lateral fija, agregue una posición fija a la columna vertebral.
Posición
Escritorio: fijo

Tableta y teléfono: predeterminado
Ubicación: a la derecha a la derecha
Agregar Módulo 1 de publicar elementos de título ¡Es hora de agregar módulos! Comience con un primer módulo de publicación en la columna 1 y solo active el título.
Muestra el título: Sí
La imagen de fondo dinámica accede a la configuración de fondo y use la imagen presentada como un fondo dinámico.

El texto del título estiliza la configuración para el texto del título.
Título de la fuente: Bai Jamjuree

Estilo de fuente de título: mayúscula

Color de texto del título: # E98074
Título del texto Tamaño:
Escritorio: 45 PX
Tableta: 35 PX
Teléfono: 25 PX
Cartas de título Espaciado: 3 PX
Altura de la línea de título: 1.3em
Espacio y luego, agregue algunos revestimientos personalizados desde arriba e inferior.
Revestimiento superior: 20%
Finamiento inferior: 20%

El borde incluye algunas esquinas redondeadas.
Todas las esquinas: 15 PX
Título de CSS y complete la configuración del módulo agregando tres líneas de código CSS al elemento del título del módulo en la pestaña avanzada. Color de fondo: RGBA (255,255,255.0.56);

Top-top: 2%;
Bottom: 2%;

Agregue el módulo 2 del elemento del título de publicación Ahora agregue otra publicación de publicación. Seleccione los siguientes elementos.
Meta
Autor

Publicación de categorías
Meta Texto Abra la pestaña de diseño y estilice el meta texto.
FUENTE: BAI JAMJUREE
Peso promedio

Color: gris # 8e8d8a
Talla
Desktop: 20 pxtableta y teléfono: 15 px
Espacio de letras: 2 PX
Dimensión Ajuste y tamaño.
Ancho: 90%
Alineación del módulo: centro
El espacio completa la configuración de este módulo con una cierta distancia.

Revestimiento superior: 15 px
Agregue un módulo de contenido para la publicación de fondo Agregue un módulo de publicación con un fondo blanco adicional.
Color de fondo: blanco #ffffff

Texto ahora, estilice el texto de su cuerpo.
Fuente: lato

Color: gris # 8e8d8a
Tamaño: 16 PX

El texto de envío continúa con el estilo de todos los estilos de texto de encabezado.
H1
FUENTE: BAI JAMJUREE
Peso promedio

Color: Coral # E98074
Talla
Escritorio: 45 PX
Tableta: 33 PX
Teléfono: 30 PX
Espacio de letras: 1 PX
H2
FUENTE: BAI JAMJUREE
Peso promedio
Color: Coral # E98074
Talla
Escritorio: 35 PX
Tableta y teléfono: 25 px
Espacio de letras: 1 PX
H3
FUENTE: BAI JAMJUREE
Peso: regular
Color: gris oscuro # 606060
Talla
Escritorio: 25 PX
Tableta y teléfono: 22 PX
Espacio de letras: 1 PX
H4
FUENTE: BAI JAMJUREE
Peso: regular
Color: gris oscuro # 606060
Talla
Escritorio: 22 PX
Tableta: 20 PX
Teléfono: 18 PX
Espacio de letras: 1 PX
H5
FUENTE: BAI JAMJUREE
Peso promedio
Color: gris oscuro # 606060
Tamaño: 16 PX
Espacio de letras: 1 PX
H6
FUENTE: BAI JAMJUREE
Peso: regular
Color: gris oscuro # 606060
Tamaño: 16 PX
Espacio de letras: 1 PX
Sparto agregue algunas configuraciones de espaciado.
Margen superior: 40 PX
Revestimiento superior: 10%
Finamiento inferior: 10%


ENLIZACIÓN IZQUIERDA: 10%
Revelaje derecho: 10%
Border por último, pero no menos importante, agregue algunas esquinas redondeadas.
Borde redondeado: 15 px
Agregue el módulo de comentarios para completar la primera columna, agregue un módulo de comentarios. Habilite los siguientes elementos: Botón de respuesta
Número de comentarios

Campos En la pestaña de diseño, estilice los campos.
Color de fondo: gris claro # f7f7f7

Color de texto: gris # 8e8d8a
FUENTE: BAI JAMJUREE
Tamaño del texto: 17 PX

Esquinas redondeadas: 15 px
TEXTO Contando comentarios estilizados y comentarios de conteo de texto.
Nivel de título: H3
FUENTE: BAI JAMJUREE
Color: Coral # E98074
Tamaño: 22 PX

Espacio de letras: 1 PX
El 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: 18 PX

Espacio de letras: 1 PX
El meta text estiliza y el meta texto.
FUENTE: BAI JAMJUREE
Color: # 606060
Dimensión: 14 PX
Espacio de letras: 1 PX

Comentario de texto No olvide el texto del comentario.
FUENTE: BAI JAMJUREE
Tamaño: 1 PX
El botón ahora estiliza los botones.
Estilos personalizados

Tamaño del texto: 18 PX
Color de texto: blanco #ffffff
Color de fondo: Coral # E98074

Botón Raza: 15 PX
Botón de fuente: Bai Jamjuree
Dimensión Ajuste el tamaño de la fila.
Ancho: 90%
Espaciado y configuración de espaciado.
Revestimiento superior: 8%
Revelaje izquierdo y derecho: 4%


Modo Agregue un paso de texto a la columna fija de la barra lateral y agregue un módulo de persona.
Nombre: Dinamic Post Autor

Antes: Escrito por:
Título Texto en la pestaña Diseño, estilice el texto del título de la siguiente manera:
Nivel de título: H4

FUENTE: BAI JAMJUREE
Color: Coral # E98074
Tamaño: 2 VH


Espacio de letras: 2 PX
Dimensión Ajuste aún más el tamaño.
Altura mínima:
Escritorio: 3VH
Tableta y teléfono: auto
Altura máxima:

Desktop: 3 VHTable y teléfono: Auto
Sparting Agregar y espacio personalizado.
Margen superior
Escritorio: 6VH
Tableta y teléfono: 10 VH
Agregue un módulo de imagen de imagen ahora, agregue un módulo de imagen. Seleccione Contenido dinámico para la imagen del autor.
Imagen: la imagen de perfil dinámico del autor

Alineación Vaya a la pestaña Diseño y elija la siguiente alineación:
Alineación de imágenes: izquierda
Dimensión Ajuste aún más el tamaño del módulo.
Ancho máximo: 15 VH

Alineación del módulo: izquierda
Altura máxima

Escritorio: 15 VH
El borde finalmente agregue algunas esquinas redondeadas a la configuración del borde.

Esquinas redondas: 15 px
Agregue el módulo de barra lateral contenido ahora es el momento de agregar los widgets de la barra lateral usando el módulo de barra lateral.
Área de widget: barra lateral
Apariencia Ajuste el aspecto primero.
Muestra el separador de borde: no

Texto del título luego cambie la configuración del texto del título.
FUENTE: BAI JAMJUREE

Peso promedio
Color: Coral # E98074

Tamaño: 2 VH
Espacio de letras: 2 PX

El cuerpo del texto continúa con el texto del cuerpo.
FUENTE: BAI JAMJUREE
Peso: luz
Color: gris oscuro # 7f7f7f
Color de ciervo: Coral # E98074
Tamaño: 1.5VH

Espacio de letras: 1 PX
Altura de la línea: 1.8em
Ajuste de dimensión y tamaño del módulo.
Mínimo altura
Escritorio: 12VH
Tableta y teléfono: auto
Altura máxima
Escritorio: 12VH

Tableta y teléfono: auto
El espacio no olvide agregar una distancia.
Forro de arriba
Escritorio: 1 VH
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: fondo de llenado: 0vh;

Bottom: 0VH;
Título: Filtros Bottom: 2VH;
Bottom: 2 VH; Agregue la opción de texto La siguiente manera que necesitamos en nuestra barra lateral es un módulo de correo electrónico. Agregue un contenido a su elección.
Título: Actualizaciones

Botón: Suscríbete
La cuenta de correo electrónico inicia sesión en su correo electrónico al siguiente formulario.
Proveedor de servicios: su proveedor de correo electrónico
Lista: la lista que eligió
Campos Usamos solo el primer nombre en la configuración del campo.

Muestra el primer nombre
Antecedentes luego apague el fondo predeterminado.
Use el color de fondo: no

Apariencia Vaya a la pestaña Diseño y cambie la configuración de apariencia.
Apariencia: cuerpo en la parte superior, forma en la parte inferior
Nombre Nombre Ancho completo: No

Correo electrónico de ancho completo: no
Campos Entonces, estilice los campos de la siguiente manera:

Color de fondo: Garde ligero # F7F7F7
Color de texto: # 606060

Revestimiento superior e inferior: 1 VH
Junta izquierda: 1 VH
FUENTE: BAI JAMJUREE
Tamaño del texto: 1.5VH

Espacio de letras: 1 PX
Esquinas redondeadas: 15 px
El texto del título Stylize y el texto del título.
Nivel de título: H4
FUENTE: BAI JAMJUREE
Color: Coral # E98074
Tamaño: 2 VH
Espacio de letras: 2 PX
Altura de línea: 1em

Botón entonces, el botón.
Estilos personalizados
Tamaño del texto: 1.5VH
Color de texto: blanco #ffffff
Color de fondo: Coral # E98074
Border Ray: 15 PX
Espacio de letras: 2 PX

FUENTE: BAI JAMJUREE
Revestimiento superior e inferior: 1 VH
Espacio 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 después de haber terminado de crear el cuerpo de plantilla.
Forro de arriba
Desktop y tableta: 0 VH
Revestimiento inferior
Escritorio: 2 VH
Tableta y teléfono: 6vhcăptușeal izquierda y derecha
Desktop y tableta: 0 VH


Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla.Escritorio
Móvil
¡Este es un paquete!Terminé de recrear la barra lateral fija en toda la altura para las plantillas de publicación de su blog.Si ha descargado la plantilla del enlace anterior, no olvide configurar los widgets en la barra lateral como se muestra en la primera parte de este tutorial.¿Eres una persona que no es una barra lateral o sin barra lateral?¡Cuéntanos en comentarios si tienes pensamientos o preguntas!