Al crear cualquier tipo de sitio web, hay buenas posibilidades de querer bloguear ocasionalmente en ese sitio. Además del hecho de que necesita una página de blog que contenga todas las publicaciones de su blog en un formulario de lista, querrá tener una plantilla de publicación de blog que pueda asignar automáticamente a nuevas publicaciones de blog que las cree. Diseñar una plantilla de publicación de blog con el creador de temas de Divin es increíblemente fácil. Y ahora, con las nuevas opciones pegajosas de Div, ¡puedes desactivar y la barra lateral pegajosa desde el bate! En el tutorial de hoy, le mostraremos exactamente cómo hacer esto y podrá descargar el archivo json del blog pospone de forma gratuita.
Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Descargue los patrones de publicación en el blog de la barra lateral de forma gratuita para poner sus manos en las plantillas de publicación gratuitas en la barra lateral adhesiva, primero las descargará usando 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!
https://youtu.be/8hta3ogf3zq Suscríbase a nuestro canal de YouTube 1. Vaya a la división del constructor de temas y agregue una nueva plantilla acceder al constructor de temas de división y agregue una nueva plantilla accediendo al creador de temas y agregando una nueva plantilla.
Use la plantilla para todas las publicaciones Use esta nueva plantilla para todas las publicaciones.


Uso activado: todas las publicaciones
Comience a construir el cuerpo de plantilla y luego comience a crear su cuerpo personalizado de su publicación.

2. Comience a crear el cuerpo de publicación en el blog (barra lateral derecha) Configuración de fondo de gradiente # 1 Una vez en el editor de plantillas, puede comenzar a construir el diseño. Abra la sección que puede ver en la parte superior de la plantilla y aplique un fondo de gradiente.

Color 1: # 8995ff
Color 2: # 6163b5
Dirección de gradiente: 150 grados
Espacio ir a la pestaña de diseño de la sección y eliminar todos los rellenos predeterminados e inferiores.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Agregue una nueva fila La estructura de la columna Continúe agregando una nueva línea utilizando la siguiente columna Estructura: Color de fondo sin agregar módulos, abra la configuración de la fila y aplique un color de fondo.

Color de fondo: # 8995ff

Dimensión Vaya a la pestaña Diseño de fila y cambie la configuración de tamaño en consecuencia:
Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1
Espacio agregue algunos rellenos a la izquierda y a la derecha.
ENLIZACIÓN IZQUIERDA: 3%

Revelaje derecho: 3%
El borde luego, incluya algunas esquinas redondeadas en la configuración del borde.
Todas las esquinas: 20 PX

Box Shadow Aplica un tono de caja.
Poder de poco claro de la sombra de la caja: 50 px

Shadow Color: RGBA (0.0,0,0.08)
Transformar la traducción y completar la configuración de la fila modificando correctamente la configuración de traducción de transformación:
Derecha: 50 PX

Agregue un módulo de texto en la columna 1 Contenido dinámico Agregue un primer módulo de texto en la columna 1 y seleccione el siguiente contenido dinámico:
Contenido dinámico: publicar categorías

Configuración de texto Vaya a la pestaña Diseño del módulo y estilice el texto en consecuencia:
Texto de fuente: Alesa

Color de texto: #ffffff
Tamaño del texto: 1Rem
Texto de la carta de espacio: 1 PX
Altura de la línea de texto: 2em
Configuración del enlace de texto Cambiar y el color del texto del enlace.
Enlace de color de texto: #ffffff

Clone el módulo de texto dos veces y coloque los duplicados en las columnas restantes después de haber completado el primer módulo de texto, puede clonar todo el módulo dos veces y puede colocar los duplicados en las dos columnas restantes.
Cambie el contenido dinámico Cambie el contenido dinámico para cada uno de los duplicados.

Primer duplicado: Fecha de publicación Postariial Duplicado: Número de comentarios publicados

Después: comentarios
Enlace a la zona de comentarios: sí

Agregue el espacio de la Sección 2 Agregue otra sección justo debajo de la anterior. Abra la configuración de la sección y aplique los valores de llenado de seguimiento e inferior:
SUS Lingo: 0 PX
Revestimiento inferior: 150 px


Agregue una nueva estructura de columna de fila Continuar agregando una nueva línea utilizando la siguiente estructura de columnas:
Dimensión sin agregar módulos, abra la configuración de la fila y cambie la configuración de tamaño en consecuencia:
Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 2

Ancho: 90%
Ancho máximo: 2580 PX
Espaciado Agregue algunos valores de margen personalizados.
Margen superior: 100 PX
Margen inferior:

Desktop: 100 PX
Tableta y teléfono: 50 px
Configuración de la columna 1 Espacio Luego abra la configuración de la columna 1 y aplique algunos rellenos izquierdo y derecho.
ENLIZACIÓN IZQUIERDA: 5%
Revestimiento derecho: 5%

Configuración Columna 2 Interruptor de color de fondo a la columna 2 Configuración y aplique un color de fondo blanco.
Color de fondo: #ffffff
El espacio incluye algunos valores de llenado personalizados.

Revestimiento superior: 5%
Finamiento inferior: 5%

ENLIZACIÓN IZQUIERDA: 5%
Revestimiento derecho: 5%
Borde luego acceda a la configuración del borde y aplique la siguiente configuración:
Todas las esquinas: 20 PX
El borde superior:

El ancho del borde superior:
Escritorio: 0 PX
Tableta y teléfono: 5 PX
Color de marco más alto: # 8995ff
Borde izquierdo:
El ancho del borde izquierdo:
Escritorio: 5 PX
Tableta y teléfono: 0 PX
Color del borde izquierdo: # 8995ff
Box Shadow Complete la configuración de la columna aplicando la siguiente sombra de la caja: la potencia del rubor de la caja: 50 px
Shadow Color: RGBA (0.0,0,0.08)
Agregue el módulo de texto no. 1 en la columna 1 Contenido dinámico H1 es hora de agregar módulos, comenzando con un módulo de texto en la columna 1. Seleccione el siguiente contenido dinámico:

Contenido dinámico: título de publicación / archivo
Antes:

Después de:

Configuración de texto H1 Cambiar a la pestaña Diseño del módulo y cambiar la configuración de texto H1 en consecuencia:
Fuente del titulo:
Encabezado de texto de tamaño:
Desktop: 4.8rem


Tableta: 3.2rem
Teléfono: 2.3rem
Distancia entre las letras del encabezado: -2 PX
Espacio agregue algunos bordes personalizados desde arriba e abajo.
Margen superior: 50 PX
Margen inferior: 100 px
Agregue el módulo de texto no. 2 en la columna 1 Deje el cuadro de contenido vacío Agregue otro módulo de texto en la columna 1 y deje el cuadro de contenido.

En su lugar, la imagen de fondo dinámico, usamos el módulo de texto para presentar la imagen presentada dinámicamente de la publicación como una imagen de fondo.
Imagen de fondo dinámico: imagen presentada
Tamaño de la imagen de fondo: portada

Interruptor de separación a la pestaña Diseño del módulo y aplique los siguientes valores de llenado:

Revestimiento superior: 250 PX
Finamiento inferior: 250 PX
Border luego, acceda a la configuración del borde y agregue algunas esquinas redondeadas.

Todas las esquinas: 20 PX
Box Sombra Completa la configuración del módulo aplicando la siguiente configuración de sombra del cuadro:
Poder de poco claro de la sombra de la caja: 50 px

Shadow Color: RGBA (0.0,0,0.08)
Agregue un módulo de contenido para publicar en la configuración de Corp de la columna 1 La siguiente manera que necesitamos en nuestra plantilla de publicación es el módulo de contenido para la publicación. Este módulo representa su contenido dinámico de publicación de blog. Cambie a la pestaña Diseño del módulo y cambie la configuración del texto de la siguiente manera: Fuente Texto: Lato

Tamaño del texto: 1.1rem
La altura de la línea de texto: 2.3em
Configuración Cambio de encabezado de texto y fuente de título.

Fuente del titulo:

Espacio y retire el margen inferior predeterminado.
Margen inferior: 0 PX
Clase CSS por último, pero no menos importante, acceda a la pestaña avanzada y aplique la siguiente clase CSS:

Clase CSS: Blog Post-Concted
Agregue un módulo de código a la columna 1 Agregue el código CSS para el espacio entre los valores y el contenido del párrafo Usamos la clase CSS que atribuimos al módulo de contenido de publicación para agregar espacio entre títulos y párrafos. Agregue un módulo de código directamente en el módulo Publique el contenido y coloque el siguiente código CSS dentro del módulo: & lt; style & gt;

.Blog-post-Account P,
.Blog-post-Account H1,

.Blog-post-Account H2,
.Blog-post-Account H3,

.Blog-post-Account H4,
.Blog-post-Account H5,
.Blog-post-cuenta H6
{
margen-top: 20px;
margen de fondo: 20px;
}
& lt;/style & gt;
Agregue el módulo de la barra lateral a la columna 2 Busque pase a la siguiente columna. Allí, agregaremos un módulo de barra lateral. Cambie a la pestaña Diseño del módulo y oculte el separador de los bordes.
Muestra el separador de borde: no
Configuración del texto del título Cambie la fuente de título más.
Título de la fuente: Aleda
Configuración del texto del cuerpo junto con la fuente del cuerpo.

Font Corp: Lato
Agregue el módulo de correo electrónico a la columna 2 Agregar contenido justo debajo del módulo de barra lateral, agregaremos un módulo Opine para el correo electrónico. Agregue una copia de su elección. Agregue la cuenta Conecte su cuenta de correo electrónico a continuación.

Retire el color de fondo y luego retire el color de fondo.
Configuración de campo Vaya a la pestaña Diseño del módulo y cambie la configuración de campo de acuerdo con:

Fuerte de campos: lato
Box Shadow: Primera opción

Shadow Color: RGBA (0.0,0,0.06)

Configuración de texto Cambie el color de texto en la configuración del texto.

Color de texto: oscuro

Configuración de texto de título Entonces, cambiaremos la configuración del texto del título.
Nivel de encabezado del título: H3

Título de la fuente: Aleda
Título Tamaño del texto: 1.5rem

Configuración del botón Entonces, estilizaremos el botón.
Use estilos personalizados para el botón: Sí

Botón de tamaño de texto: 20 PX
El color del texto del botón: #ffffff
Color degradado 1: # 8995ff
Color de gradiente 2: # 6163B5

Tipo de gradiente: lineal
Dirección de gradiente: 150 grados
El ancho del nudo del botón: 0 PX
Botón Raza: 5 PX
Botón de fuente: Lato
Espacio y completaremos la configuración del módulo, eliminando los valores de llenado predeterminados de la configuración de espaciado.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Junta izquierda: 0 PX

Revestimiento derecho: 0 PX
Agregue la sección no. 3 de gradiente de fondo se mueve a la siguiente y última sección. Agregue el siguiente fondo de gradiente:

Color 1: # 8995ff
Color 2: # 6163b5
Tipo de gradiente: lineal
Dirección de gradiente: 150 grados
Interruptor de espacio a la pestaña de diseño de la sección y elimine la corriente ascendente predeterminada.

SUS Lingo: 0 PX
Agregue una nueva fila La estructura de la columna Continúe agregando una nueva línea utilizando la siguiente columna Estructura: Color de fondo sin agregar módulos, abra la configuración de la fila y aplique un color de fondo.
Color de fondo: # 8995ff
Dimensión Vaya a la pestaña Diseño de fila y cambie la configuración de tamaño de la siguiente manera:
Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 2
Ancho: 90%

Ancho máximo: 2580 PX

El espacio cambia los valores de llenado en consecuencia:
Revestimiento superior: 100 px

Finamiento inferior: 100 PX
ENLIZACIÓN IZQUIERDA: 5%
Revestimiento derecho: 5%
Borde entonces, agregue algunas esquinas redondeadas.
Todas las esquinas: 20 PX

Box Shadow agregaremos un tono de caja.
Poder de poco claro de la sombra de la caja: 50 px
Shadow Color: RGBA (0.0,0,0.08)
Transformar la traducción y completaremos la configuración de la fila aplicando los siguientes valores de traducción de transformación:
Derecha: -100px

Agregue el módulo de comentarios en los campos de configuración de la columna La única forma en que necesitamos en una fila es un módulo de comentarios. Cambie a la pestaña Diseño del módulo y estilice los campos:
Color de fondo de campo: RGBA (255,255,255,0,09)

Color de texto de campo: #ffffff
Fuerte de campos: lato
Campos de esquinas redondeadas: 10 PX (todas las esquinas)

Campos el ancho del borde inferior: 5 px
Campos color borde inferior: #ffffff

Fields Box Shadow: Primera opción
Shadow Color: RGBA (0.0,0,0.06)
Configuración de imagen modificar y configuración de imagen.
Imagen esquinas redondeadas: 100 PX (todas las esquinas)

Configuración de texto luego cambie el color de texto en la configuración del texto.
Color de texto: Abierto
Configuración Conteo de texto Comentarios modificar y configuración de texto para el número de comentarios. Comentarios Nivel antet: H2

Fuente de la fuente de comentarios: alata
Número de comentarios Tamaño del texto: 2rem

Altura de la línea de comentarios: 1.4em
Formulario de título de configuración de texto junto con la configuración del texto del formulario.

Título de formulario de formulario Nivel: H3
Formulario de título de fuente: ALEATA

Configuración de meta texto entonces, Configuración de meta texto.
Meta Font: Aleata
Tamaño del meta de texto: 1.2rem
Configuración de texto para comentarios También cambiaremos la configuración del texto de los comentarios.
Comentario de fuentes: Lato

Size Text Comment: 1.1rem
Comentario de la línea de altura: 2em
Botón de configuración y estilizaremos el botón en consecuencia:

Use estilos personalizados para el botón: Sí
Tamaño de texto de texto: 1.1rem
El color del texto del botón: # 8995ff

El color del fondo del botón: #ffffff
El ancho del nudo del botón: 0 PX
Botón Raza: 5 PX
Distancia entre letras y botones: 1 PX

Botón de fuente: Lato
Forro para botones: 20 px
Forro para botones: 20 px
Comentarios CSS Corp No menos menos, completaremos la configuración del módulo aplicando la siguiente línea de código CSS en el cuerpo de la pestaña avanzada: Margin-Top: 50px;
3. Aplique el efecto adhesivo en la columna de la barra lateral Abra la columna de la barra lateral ahora que se ha completado el diseño de nuestra plantilla de publicación de blog, transformaremos la columna del lado pegajoso utilizando las opciones sin DIV. Abra la configuración de la columna 2.
Aplique el efecto de efecto pegajoso a la pestaña avanzada de la columna y aplique la siguiente configuración adhesiva:
Posición pegajosa:

Desktop: quédese en la parte superior
Tableta y teléfono: no pegue

Pequeño límite inferior: fila
Gap de los elementos circundantes adhesivos: transición predeterminada y dastils pegajosos: sí

4. Coloque la barra lateral en el lado izquierdo Tire de la columna de la barra lateral sobre la primera columna 1 si desea colocar la barra lateral en el lado izquierdo de la plantilla, abra la configuración de la fila y tire de la segunda columna en la parte superior.

Cambie el borde de la columna en la barra lateral Abra la columna que contiene la barra lateral y modifique la configuración del borde en consecuencia:

El ancho del borde recto:
Escritorio: 5 PX
Tableta y teléfono: 0 PX
Color de borde derecho: # 8995ff
El ancho del borde izquierdo: ninguno
Aplique la reversión de la columna Si lo desea si decide elegir una barra lateral pegajosa en el lado izquierdo de la plantilla de publicación de su blog, recomendamos colocar la barra lateral debajo del contenido de tamaños de pantalla más pequeños. Para lograr esto, puede usar el segundo enfoque de esta división tutorial sobre cómo revertir el orden de apilar las columnas de la Divic. 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