Cómo dar a sus páginas de archivo Divi un diseño de mampostería
Publicado: 2021-09-15Para 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 personalizar manualmente el 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, subtítulo y publicaciones de blog de la página de archivo. Y, utilizando 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!
Vistazo
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 la 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 nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
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, deberá 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, estará listo para comenzar.
Comprensión de los módulos y el contenido dinámico disponibles 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 forma eficaz 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 categoría "Negocios", debería ver una página de archivo que muestra todas las publicaciones con la categoría "Negocios". Algunos módulos Divi tienen opciones integradas para simplificar la visualización de contenido dinámico en una plantilla.
El módulo de blog
El módulo de blog es el módulo principal que se debe utilizar para mostrar plantillas de página de archivo. Esto se debe a que tiene la opción incorporada 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 mostrar las publicaciones de esa página actual correctamente.
Título de la 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 utilizar un módulo Divi normal y luego extraer el título de la página de publicación / archivo utilizando 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, puedes diseñar el título como quieras.
Ahora que comprende las herramientas necesarias para crear una plantilla de página de archivo, entremos 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 realmente 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 Tablero de WordPress y navegue a Divi> Theme Builder. Luego haga clic en el área vacía del cuadro gris 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 plantilla, actualice la configuración de 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 regular.
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 la 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:
<h1>
Después:
</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 de encabezado: Mulish
- Fuente de encabezado: Peso: Pesado
- Alineación del texto del encabezado: 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:
<h3>Here are the articles on
Después:
</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ñar mediante la actualización de la siguiente configuración de H3:
- Título 3 Fuente: Mulish
- Alineación del texto del título 3: 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, debemos 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 de la canaleta: 2;
- Ancho: 95%
Agregar módulo de blog para mostrar publicaciones de la página actual de forma dinámica
Ahora necesitamos agregar un módulo de blog a la fila.
Recuerde, debemos asegurarnos de que las publicaciones de la página actual estén habilitadas para que la página archvie extraiga el archivo de publicaciones 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 de título: 1.3em
Actualizar estilos de texto de cuerpo
- Fuente del cuerpo: Montserrat
- Color del texto del cuerpo: #ffffff
- Altura de la línea del cuerpo: 2em
Actualizar estilos de meta texto
- Fuente Meta: Montserrat
- Color del meta texto: # 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án las publicaciones de la página de archivo actual de forma dinámica.
Resultado final
Para probar los resultados, visite los diferentes tipos de páginas de archivo en su sitio.
A continuación se muestra un ejemplo de una plantilla de página de archivo de categorías que muestra todas las publicaciones de 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 creador 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 impulsar el diseño general de su sitio web al apuntar a aquellas páginas de archivo que pueden pasarse por alto fácilmente.
Espero tener noticias tuyas en los comentarios.
¡Salud!