Al compartir nuevas publicaciones de blog en su sitio web, es importante hacer que la experiencia de lectura sea lo más fácil posible para sus visitantes. Eso significa deshacerse de tantas distracciones como sea posible, sin dejar de hacer coincidir la marca de su sitio web. También es importante permitir que los visitantes controlen el tamaño del texto a través de su navegador, ahí es donde la unidad de fuente relativa rem resulta útil. Permite a las personas ajustar el tamaño de la fuente que se muestra dentro de su navegador. En este tutorial, crearemos una plantilla de publicación de blog hermosa y simple que tiene muy en cuenta la experiencia del usuario. ¡También podrá descargar el archivo JSON de forma gratuita!
Hagámoslo.
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descarga GRATIS la plantilla de publicación de blog simple compatible con UX
Para poner sus manos en la plantilla de publicación de blog simple y gratuita compatible con UX, 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.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Suscríbete a nuestro canal de Youtube
1. Vaya a Divi Theme Builder y cree una nueva plantilla
Ir al Creador de temas Divi
Comience yendo al Divi Theme Builder .
Crear nueva plantilla
Crea una nueva plantilla y utilízala en todas tus publicaciones.
- Usar en: todas las publicaciones
2. Comience a crear el cuerpo de la publicación del blog
Luego, comience a crear el cuerpo personalizado de su plantilla de publicación.
Agregue la fila n. ° 1 a la sección existente
Estructura de la columna
Dentro del editor de plantillas, agregue una nueva fila a la sección que ya está allí utilizando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar ningún módulo todavía, abra la configuración de la fila y cambie la configuración de tamaño de la siguiente manera:
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
Borde de la columna 1 y 2
Agregue un borde derecho a la primera y segunda columna a continuación.
- Ancho del borde derecho: 1 px (escritorio), 0 px (tableta y teléfono)
- Color del borde derecho: #333333
Agregar módulo de texto a cada columna
Contenido dinámico
Continúe agregando un módulo de texto a cada columna y seleccione algún contenido dinámico para cada módulo individualmente.
- Módulo de texto en la columna 1: categorías de publicaciones
- Módulo de texto en la columna 2: Fecha de publicación posterior
- Módulo de texto en la columna 3: Recuento de comentarios publicados
- Después: Comentarios
Configuración de texto
Pase a la pestaña de diseño de cada módulo y cambie la configuración de texto de la siguiente manera:
- Fuente del texto: Lato
- Tamaño del texto: 1,1 rem
- Espaciado entre letras de texto: 1px
- Altura de línea de texto: 2em
Añadir Fila #2
Estructura de la columna
Continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columnas:
Agregue el módulo de texto n. ° 1 a la columna
Contenido dinámico
Agregue un módulo de texto y seleccione el contenido dinámico del título de la publicación.
- Contenido dinámico: Título de la publicación
- Antes: <H1>
- Después: </H1>
Configuración de texto H1
Pase a la pestaña de diseño del módulo y cambie la configuración de texto H1 de la siguiente manera:
- Fuente del título: Playfair Display
- Alineación del texto del título: Centro
- Tamaño del texto del encabezado: 6,2 rem (escritorio), 3,2 rem (tableta), 2,3 rem (teléfono)
Espaciado
Agregue un margen superior e inferior personalizado a continuación.
- Margen superior: 50px
- Margen inferior: 100px
Agregue el Módulo de Texto #2 a la Columna
Contenido dinámico
Agregue otro módulo de texto justo debajo del anterior y seleccione el contenido dinámico del extracto de la publicación.
- Contenido dinámico: extracto de la publicación
Configuración de texto
Cambie la configuración de texto del módulo de la siguiente manera:
- Fuente del texto: Lato
- Tamaño del texto: 1,1 rem
- Espaciado entre letras de texto: 1px
- Altura de línea de texto: 2em
- Alineación de texto: Centro
Añadir Fila #3
Estructura de la columna
Agregue otra fila a la sección utilizando la siguiente estructura de columnas:
Mostrar
Asegúrate de que las columnas permanezcan una al lado de la otra agregando una línea de código CSS al elemento principal de la fila.
|
01
|
display: flex; |
Agregar módulo de imagen a la columna 1
Contenido dinámico
Continúe agregando un módulo de imagen a la columna 1 y seleccione el contenido dinámico de la imagen de perfil del autor.
- Contenido dinámico: imagen de perfil del autor
Alineación
Pase a la pestaña de diseño del módulo y cambie la alineación de la imagen.
- Alineación de imagen: Derecha
Dimensionamiento
Modifique el ancho a continuación.
- Ancho: 50px
Espaciado
Agregue un margen derecho en la tableta y el teléfono.
- Margen derecho: 20px (tableta y teléfono)
Borde
Y complete la configuración del módulo agregando un radio de borde a la configuración del borde.
- Todas las esquinas: 100px
Agregar módulo de texto a la columna 2
Contenido dinámico
En la segunda columna, necesitaremos un módulo de texto. Seleccione el contenido dinámico del autor de la publicación.
- Contenido dinámico: autor de la publicación
Configuración de texto
Pase a la pestaña de diseño y cambie la configuración del texto en consecuencia:
- Fuente del texto: Lato
- Tamaño del texto: 1,1 rem
- Espaciado entre letras de texto: 1px
Espaciado
Agregue algunos valores de margen personalizados a continuación.
- Margen superior: 15px
- Margen izquierdo: 20px (tableta y teléfono)
Añadir Fila #4
Estructura de la columna
Agregue otra fila a la sección utilizando la siguiente estructura de columnas:
Agregar módulo de texto a la columna
Dejar el cuadro de contenido vacío
Agregue un módulo de texto a la columna y asegúrese de dejar el cuadro de contenido vacío.
Imagen de fondo dinámica
Agregue el contenido dinámico de la imagen destacada a la imagen de fondo del módulo a continuación.
- Contenido dinámico: imagen destacada
Dimensionamiento
Continúe modificando la configuración de tamaño del módulo en diferentes tamaños de pantalla.
- Ancho: 800px (Escritorio), 500px (Tableta), 300px (Teléfono)
- Alineación del módulo: Centro
Espaciado
Agregue también un relleno superior e inferior personalizado en diferentes tamaños de pantalla.
- Relleno superior: 400 px (escritorio), 250 px (tableta), 150 px (teléfono)
- Relleno inferior: 400 px (escritorio), 250 px (tableta), 150 px (teléfono)
Borde
Y agregue algo de radio de borde a la configuración del borde para convertir el módulo en un círculo.
- Todas las esquinas: 500px
Agregar nueva sección
En la siguiente sección regular.
Añadir Fila #1
Estructura de la columna
Agregue una nueva fila usando la siguiente estructura de columna:
Agregar módulo de contenido de publicación a la columna
Configuración de texto
Agregue el Módulo de contenido de publicación a la columna, pase a la pestaña de diseño del módulo y cambie la configuración de texto en consecuencia:
- Fuente del texto: Lato
- Tamaño del texto: 1,1 rem
- Espaciado entre letras de texto: 1px
- Altura de la línea de texto: 2,3 em
Ajustes de texto de encabezado
Modifique también la configuración del texto del encabezado.
- Fuente del título: Playfair Display
- Tamaño de texto H2: 3,5 rem (escritorio), 2 rem (tableta y teléfono)
- Tamaño de texto H3: 2,5 rem (escritorio), 1,5 rem (tableta y teléfono)
- Tamaño de texto H4: 2,3 rem (escritorio), 1,3 rem (tableta y teléfono)
- Tamaño de texto H5 y H6: 2 rem (escritorio), 1 rem (tableta y teléfono)
Añadir Fila #2
Estructura de la columna
Agregue otra fila a la sección utilizando la siguiente estructura de columnas:
Espaciado
Agregue un margen superior personalizado a la fila.
- Margen superior: 100px
Agregar módulo de comentarios a la columna
Configuración de campos
El único módulo que necesitamos en esta fila es un módulo de comentarios. Cambie la configuración de los campos de la siguiente manera:
- Color de fondo de los campos: #ffffff
- Fuente de los campos: Lato
- Tamaño del texto de los campos: 1,1 rem
- Todas las esquinas: 0px
- Ancho del borde de los campos: 1px
- Color del borde de los campos: #000000
Configuración de imagen
Cambie la configuración de la imagen también.
- Todas las esquinas: 100px
Configuración del texto del título
Luego, modifique la configuración del texto del título.
- Título Nivel de encabezado: H2
- Fuente del título: Pantalla Playfair
- Tamaño del texto del título: 3 rem (escritorio), 2 rem (tableta y teléfono)
- Altura de la línea del título: 1,4 em
Configuración de metatexto
Dale estilo al metatexto también.
- Fuente Meta: Pantalla Playfair
- Tamaño del metatexto: 1,4 rem
Ajustes de texto de comentario
Estamos usando la siguiente configuración para la configuración del texto del comentario:
- Fuente del comentario: Lato
- Tamaño del texto del comentario: 1,1 rem
- Espaciado entre letras de comentario: 1px
- Altura de línea de comentario: 2em
Configuración del texto del botón
Y complete la configuración del módulo diseñando el botón de la siguiente manera:
- Usar estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 1,1 rem
- Color del texto del botón: #ffffff
- Color de fondo del botón: #000000
- Ancho del borde del botón: 0px
- Radio del borde del botón: 0px
- Espaciado entre letras de botones: 1 px
- Fuente del botón: Lato
- Relleno superior: 20px
- Relleno inferior: 20px
3. Guardar cambios en la plantilla y el generador de temas
Una vez que haya completado el diseño de la plantilla, guarde todos los cambios de Divi Theme Builder y obtenga una vista previa del resultado en sus publicaciones.
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Pensamientos finales
En esta publicación, le mostramos cómo crear una plantilla de publicación de blog hermosa y simple que se centre en la experiencia del usuario que sus visitantes tienen mientras leen. Modifique esta plantilla de publicación utilizando las opciones integradas de Divi para que coincida con la marca de su sitio web. ¡También pudo descargar el archivo JSON de la plantilla de forma gratuita! Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.
Si está ansioso por aprender más sobre Divi y obtener más regalos de Divi, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.