Para darle a sus páginas de archivo un diseño de mampostería personalizado, podemos usar el generador de temas Divi para diseñar una plantilla de página de archivo dinámica personalizada. En Divi , antes de los días de Divi Theme Builder, los desarrolladores tenían que confiar en la personalización manual del código PHP en un archivo de tema de plantilla de página de archivo y luego diseñar la plantilla de página únicamente con CSS externo. Esto hizo que la creación de un diseño de mampostería fuera mucho más difícil. Pero ahora, con Divi Theme Builder, ¡este proceso se ha vuelto fácil y agradable!
En este tutorial, le mostraremos cómo crear una plantilla de página de archivo que muestre dinámicamente el título, el subtítulo y las publicaciones de blog de la página de archivo. Y, usando el módulo de publicación de blog, podemos mostrar fácilmente nuestro archivo de publicaciones en un diseño de cuadrícula de mampostería.
¡Empecemos!
Aquí hay un vistazo rápido a la plantilla de página de archivo que diseñaremos juntos en este tutorial. En esta imagen, se está utilizando para mostrar todas las publicaciones con la categoría «WordPress».
Descargue la plantilla de página de archivo GRATIS
Para poner sus manos en la plantilla de este tutorial, 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!
Para importar el diseño de la plantilla a su sitio web, deberá ir a Divi Theme Builder y usar la opción de portabilidad para importar el archivo .json al generador de temas.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
- Si aún no lo ha hecho, instale y active el tema Divi instalado (o el complemento Divi Builder si no usa el tema Divi).
- Dado que crearemos una plantilla de página de archivo, necesitará tener algunas publicaciones de blog ya creadas en su sitio web con autores, categorías y/o etiquetas asignadas si desea ver los resultados.
Después de eso, estás listo para ir.
Comprender los módulos y el contenido dinámico disponible para las plantillas de página de archivo
Al crear una plantilla de página de archivo para un sitio Divi, es importante comprender qué herramientas están a su disposición para que pueda crear de manera efectiva una plantilla que muestre dinámicamente la información correcta. Para una plantilla de página de archivo, lo que más nos interesa es mostrar las publicaciones de la página actual cada vez que un usuario visita una página de archivo. Por ejemplo, si un usuario hace clic en el enlace de la categoría «Empresa», debería ver una página de archivo que muestra todas las publicaciones con la categoría «Empresa». Algunos módulos Divi tienen opciones integradas para simplificar la visualización de contenido dinámico en una plantilla.
El módulo de blogs
El módulo de blog es el módulo principal que debe usarse para mostrar plantillas de página de archivo. Esto se debe a que tiene la opción integrada para mostrar las publicaciones de la página actual.
Básicamente, esto le dice a Divi que muestre las publicaciones que normalmente se generan cada vez que un usuario visita la página. Entonces, con la opción configurada para mostrar «Publicaciones para la página actual», el usuario podrá ver una página de archivo y ver correctamente las publicaciones de esa página actual.
Título de publicación/archivo (contenido dinámico)
Una forma más fácil de mostrar el título de la página de publicación/archivo es usar un módulo Divi regular y luego extraer el título de la página de publicación/archivo usando la función de contenido dinámico disponible en todos los módulos Divi.
Por ejemplo, puede usar un módulo de texto y luego agregar el título de la página de publicación/archivo como contenido dinámico al contenido del cuerpo. Luego puede diseñar el título como desee.
Ahora que comprende las herramientas necesarias para crear una plantilla de página de archivo, comencemos y creemos una juntos.
Cómo crear una plantilla de página de archivo Divi con un diseño de mampostería
Para crear una plantilla de página de archivo con un diseño de mampostería, todo lo que necesita hacer es diseñar una nueva plantilla para todas las páginas de archivo utilizando el generador de temas.
Creación y asignación de una plantilla personalizada para todas las páginas de archivo
Para comenzar, vaya a su Panel de WordPress y navegue a Divi> Theme Builder. Luego haga clic en el área del cuadro gris vacío para agregar una nueva plantilla.
A continuación, asigne la plantilla a Todas las páginas de archivo.
Adición de una nueva área de cuerpo personalizada a la plantilla
Para crear el cuerpo personalizado para la plantilla, haga clic en el área Agregar cuerpo personalizado y luego seleccione «Crear cuerpo personalizado».
Luego elija la opción, «Construir desde cero».
Agregar título de archivo dinámico
En el Editor de diseño de plantillas, actualice la configuración de la sección predeterminada con un color de fondo.
- Color de fondo: #eeeeee
Luego cree una nueva fila de una columna dentro de la sección normal.
Luego agregue un módulo de texto a la fila.
Elimine el contenido del cuerpo predeterminado y haga clic en el icono «Usar contenido dinámico» y seleccione la opción «Título de publicación/archivo».
Una vez que el elemento Título de publicación/archivo esté en su lugar, abra la configuración haciendo clic en el ícono de ajustes.
Luego actualice las áreas de entrada Antes y Después para envolver el contenido en una etiqueta H1 y agregue una pieza adicional de contenido estático después del título dinámico de la siguiente manera:
Antes:
|
01
|
<h1> |
Después:
|
01
|
</h1> |
Necesitamos envolver el título en una etiqueta H1 para propósitos de SEO.
Título de archivo dinámico de estilo
Una vez que el contenido dinámico está en su lugar, podemos diseñarlo usando lo siguiente:
- Fuente del encabezado: Mulish
- Fuente del título: Peso: Pesado
- Texto de encabezado Alineación: Centro
- Color del texto del encabezado: #3a405a
- Tamaño del texto del encabezado: 70 px (escritorio), 40 px (tableta y teléfono)
Agregar texto de subtítulo de archivo dinámico
Debido a que podemos envolver el título de nuestra página de archivo dinámico con HTML personalizado, podemos agregar un subtítulo que extraiga el título de la página de archivo dinámico dentro del texto del subtítulo.
Para hacer esto, cree un nuevo módulo de texto debajo del módulo de texto anterior con el título.
Elimine el texto del cuerpo predeterminado y agregue el contenido dinámico del título de la publicación/archivo al cuerpo (tal como lo hicimos anteriormente).
Abra la configuración del título de la publicación/archivo y agregue lo siguiente antes y después del contenido.
Antes:
|
01
|
<h3>Here are the articles on |
Después:
|
01
|
</h3> |
Ahora el título se mostrará en línea con la línea de texto anterior.
Título de archivo dinámico de estilo
Una vez que el contenido dinámico está en su lugar, podemos diseñarlo actualizando la siguiente configuración de H3:
- Encabezado 3 Fuente: Mulish
- Encabezado 3 Alineación de texto: Centro
Uso del módulo de blog para mostrar publicaciones de la página actual de forma dinámica
Con el título de la página de archivo dinámico en su lugar, necesitamos agregar el módulo de blog para mostrar las publicaciones de la página de archivo actual.
Agregar nueva sección
Antes de agregar el módulo de blog, agreguemos una nueva sección a la página.
Agregar nueva fila de una columna
Luego, agregue una nueva fila de una columna a la nueva sección.
Luego abra la configuración de la fila y actualice lo siguiente:
- Usar ancho de canalón personalizado: SÍ
- Ancho del canalón: 2;
- Ancho: 95%
Agregar módulo de blog para mostrar publicaciones para la página actual dinámicamente
Ahora necesitamos agregar un módulo de blog a la fila.
Recuerde, debemos asegurarnos de que Publicaciones para la página actual esté habilitada para que la página de archivo obtenga el archivo de publicación correcto. Actualice las opciones de contenido de la siguiente manera:
- Publicaciones para la página actual: SÍ
Módulo de blog de diseño
Con la configuración de contenido en su lugar, hagamos algunos cambios en el diseño. En la pestaña de diseño, actualice el diseño de la siguiente manera:
- Diseño: Cuadrícula
Ahora regrese a la pestaña de contenido y agregue el siguiente color de fondo a los elementos de la cuadrícula:
- Color de fondo: #3a405a
Actualizar estilos de texto de título
- Fuente del título: Mulish
- Peso de la fuente del título: Negrita
- Color del texto del título: #eee
- Tamaño del texto del título: 34px
- Altura de la línea del título: 1,3 em
Actualizar estilos de texto del cuerpo
- Fuente del cuerpo: Montserrat
- Color del cuerpo del texto: #ffffff
- Altura de la línea del cuerpo: 2em
Actualizar estilos de metatexto
- Fuente Meta: Montserrat
- Color del metatexto: #ffb100
Actualizar estilos de paginación
- Peso de fuente de paginación: Negrita
- Color del texto de paginación: #3a405a
En este punto, tenemos nuestra plantilla de página de archivo en funcionamiento, completa con el título de la página y las publicaciones del blog (en un diseño de mampostería) que mostrará dinámicamente las publicaciones de la página de archivo actual.
Resultado final
Para probar los resultados, visite los diferentes tipos de páginas de archivo en su sitio.
Aquí hay un ejemplo de una plantilla de página de archivo de categoría que muestra todas las publicaciones para la categoría «WordPress».
Aquí hay una plantilla de página de archivo de autor que muestra todas las publicaciones de un autor específico.
Aquí hay una página de archivo de etiquetas que muestra todas las publicaciones con la etiqueta «Noticias».
Y aquí hay una plantilla de página de archivo de fecha que muestra todas las publicaciones del mes de octubre de 2019.
Pensamientos finales
Una vez que sepa cómo crear una nueva plantilla de archivo con el generador de temas de Divi, agregar un diseño de mampostería para las publicaciones es fácil. El truco consiste en usar las opciones integradas de Divi para mostrar el título de la página de archivo como contenido dinámico y luego usar el módulo de blog para mostrar dinámicamente la publicación de la página actual en un diseño de cuadrícula de mampostería. Con suerte, esto ayudará a mejorar el diseño general de su sitio web al enfocarse en aquellas páginas de archivo que pueden pasarse por alto fácilmente.
Espero escuchar de usted en los comentarios.
¡Salud!