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 la mayor cantidad de distracciones posibles, al tiempo que coincide con 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 resulta útil la unidad de fuente rem relativa. 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 sencilla que tenga muy en cuenta la experiencia del usuario. 

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

plantilla de publicación

Móvil

plantilla de publicación

1. Vaya a Divi Theme Builder y cree una nueva plantilla

Ir a Divi Theme Builder

Comience yendo al Divi Theme Builder.

plantilla de publicación

Crear nueva plantilla

Crea una nueva plantilla y úsala en todas tus publicaciones.

  • Usar en: todas las publicaciones

plantilla de publicación

plantilla de publicación

2. Comience a construir el cuerpo de la publicación del blog

Luego, comienza a construir el cuerpo personalizado de tu plantilla de publicación.

plantilla de publicación

Agregar fila # 1 a la sección existente

Estructura de columna

Dentro del editor de plantillas, agregue una nueva fila a la sección que ya está allí utilizando la siguiente estructura de columnas:

plantilla de publicación

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de fila y cambie la configuración de tamaño de la siguiente manera:

  • Usar ancho de canal personalizado: sí
  • Ancho de canal: 1

plantilla de publicación

Columna 1 y 2 Borde

Agregue un borde derecho a la primera y segunda columna a continuación.

  • Ancho del borde derecho: 1px (escritorio), 0px (tableta y teléfono)
  • Color del borde derecho: # 333333

plantilla de publicación

Agregar módulo de texto a cada columna

Contenido dinámico

Continúe agregando un Módulo de texto a cada columna y seleccione contenido dinámico para cada módulo individualmente.

  • Módulo de texto en la columna 1: Categorías de publicaciones

plantilla de publicación

  • Módulo de texto en la columna 2: Fecha de publicación de publicación

plantilla de publicación

  • Módulo de texto en la columna 3: recuento de comentarios de publicación
  • Después: comentarios

plantilla de publicación

Configuraciones 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 de texto: Lato
  • Tamaño del texto: 1.1rem
  • Espacio entre letras de texto: 1px
  • Altura de la línea de texto: 2em

plantilla de publicación

Agregar fila # 2

Estructura de columna

Continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columnas:

plantilla de publicación

Agregar 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

plantilla de publicación

  • Antes: <H1>
  • Después: </H1>

plantilla de publicación

Configuraciones 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:

  • Título de fuente: Playfair Display
  • Encabezado de texto: Centro
  • Tamaño del texto del encabezado: 6.2rem (escritorio), 3.2rem (tableta), 2.3rem (teléfono)

plantilla de publicación

Espaciado

Agregue un poco de margen superior e inferior personalizados a continuación.

  • Margen superior: 50 px
  • Margen inferior: 100 px

plantilla de publicación

Agregue el módulo de texto n. ° 2 a la columna

Contenido dinámico

Agregue otro módulo de texto justo debajo del anterior y seleccione el contenido dinámico posterior al extracto.

  • Contenido dinámico: extracto de publicación

plantilla de publicación

Configuraciones de texto

Cambie la configuración de texto del módulo de la siguiente manera:

  • Fuente de texto: Lato
  • Tamaño del texto: 1.1rem
  • Espacio entre letras de texto: 1px
  • Altura de la línea de texto: 2em
  • Alineación de texto: centro

plantilla de publicación

Agregar fila # 3

Estructura de columna

Agregue otra fila a la sección utilizando la siguiente estructura de columnas:

plantilla de publicación

Monitor

Asegúrese de que las columnas permanecen una al lado de la otra agregando una línea de código CSS al elemento principal de la fila.

01
display: flex;

plantilla de publicación

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

plantilla de publicación

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

plantilla de publicación

Dimensionamiento

Modifique el ancho a continuación.

  • Ancho: 50 px

plantilla de publicación

Espaciado

Agregue un margen derecho en la tableta y el teléfono.

  • Margen derecho: 20 px (tableta y teléfono)

plantilla de publicación

Frontera

Y complete la configuración del módulo agregando un radio de borde a la configuración del borde.

  • Todas las esquinas: 100 px

plantilla de publicación

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: Publicar autor

plantilla de publicación

Configuraciones de texto

Pase a la pestaña de diseño y cambie la configuración de texto en consecuencia:

  • Fuente de texto: Lato
  • Tamaño del texto: 1.1rem
  • Espacio entre letras de texto: 1px

plantilla de publicación

Espaciado

Agregue algunos valores de margen personalizados a continuación.

  • Margen superior: 15 px
  • Margen izquierdo: 20 px (tableta y teléfono)

plantilla de publicación

Agregar fila # 4

Estructura de columna

Agregue otra fila a la sección utilizando la siguiente estructura de columnas:

plantilla de publicación

Agregar módulo de texto a la columna

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

plantilla de publicación

Imagen de fondo dinámica

A continuación, agregue el contenido dinámico de la imagen destacada a la imagen de fondo del módulo.

  • Contenido dinámico: imagen destacada

plantilla de publicación

Dimensionamiento

Continúe modificando la configuración de tamaño del módulo en diferentes tamaños de pantalla.

  • Ancho: 800 px (escritorio), 500 px (tableta), 300 px (teléfono)
  • Alineación del módulo: centro

plantilla de publicación

Espaciado

Agregue también algunos rellenos superiores e inferiores personalizados en diferentes tamaños de pantalla.

  • Relleno superior: 400 px (escritorio), 250 px (tableta), 150 px (teléfono)
  • Acolchado inferior: 400 px (escritorio), 250 px (tableta), 150 px (teléfono)

plantilla de publicación

Frontera

Y agregue un radio de borde a la configuración del borde para convertir el módulo en un círculo.

  • Todas las esquinas: 500 px

plantilla de publicación

Agregar nueva sección

En la siguiente sección regular.

plantilla de publicación

Agregar fila # 1

Estructura de columna

Agregue una nueva fila utilizando la siguiente estructura de columnas:

plantilla de publicación

Agregar módulo de contenido de publicación a columna

Configuraciones 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 de texto: Lato
  • Tamaño del texto: 1.1rem
  • Espacio entre letras de texto: 1px
  • Altura de la línea de texto: 2.3em

plantilla de publicación

Configuración de encabezado de texto

Modifique la configuración del texto del encabezado también.

  • Título de fuente: Playfair Display
  • Tamaño de texto H2: 3.5rem (escritorio), 2rem (tableta y teléfono)
  • Tamaño de texto H3: 2.5rem (escritorio), 1.5rem (tableta y teléfono)
  • Tamaño de texto H4: 2.3rem (escritorio), 1.3rem (tableta y teléfono)
  • Tamaño de texto H5 y H6: 2rem (escritorio), 1rem (tableta y teléfono)

plantilla de publicación

Agregar fila # 2

Estructura de columna

Agregue otra fila a la sección utilizando la siguiente estructura de columnas:

plantilla de publicación

Espaciado

Agregue un margen superior personalizado a la fila.

  • Margen superior: 100 px

plantilla de publicación

Agregar módulo de comentarios a la columna

Configuraciones 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 campos: Lato
  • Tamaño del texto de los campos: 1.1rem

plantilla de publicación

  • Todas las esquinas: 0px
  • Ancho del borde de los campos: 1px
  • Color del borde de los campos: # 000000

plantilla de publicación

Configuraciones de imagen

Cambie la configuración de la imagen también.

  • Todas las esquinas: 100 px

plantilla de publicación

Configuración del texto del título

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

  • Nivel de título del título: H2
  • Fuente del título: Playfair Display
  • Tamaño del texto del título: 3rem (escritorio), 2rem (tableta y teléfono)
  • Altura de la línea de título: 1.4em

plantilla de publicación

Configuración de metatexto

Dale estilo al meta texto también.

  • Meta Font: Playfair Display
  • Meta tamaño del texto: 1.4rem

plantilla de publicación

Configuración de texto de comentario

Estamos utilizando la siguiente configuración para la configuración del texto del comentario:

  • Fuente del comentario: Lato
  • Tamaño del texto del comentario: 1.1rem
  • Comentario de espacio entre letras: 1 px
  • Altura de la línea de comentarios: 2em

plantilla de publicación

Configuración de texto del botón

Y complete la configuración del módulo peinando el botón de la siguiente manera:

  • Usar estilos personalizados para el botón: Sí
  • Tamaño del texto del botón: 1.1rem
  • 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
  • Espacio entre letras de botones: 1 px
  • Fuente del botón: Lato

plantilla de publicación

  • Relleno superior: 20px
  • Relleno inferior: 20px

plantilla de publicación

3. Guardar cambios de plantilla y 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.

plantilla de publicación

plantilla de publicación

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

Consigue la plantilla Divi

Más de 800 diseños de sitios web prefabricados vienen empaquetados dentro de Divi de forma gratuita.

You have Successfully Subscribed!