Cómo usar ajustes preestablecidos globales con bloques de diseño Divi para optimizar el diseño de publicaciones de blog

Crear contenido para tu blog es bastante difícil sin tener que preocuparte por el diseño. Por eso es importante que su sitio tenga los elementos de diseño fácilmente disponibles (o prediseñados) para que pueda concentrarse más en crear contenido sorprendente. Claro, un tema hijo tradicional de WordPress puede manejar esto pero, en la mayoría de los casos, estás atrapado con un diseño que no se cambia fácilmente.

Con Divi, obtenemos más control sobre la experiencia de diseño de una publicación de blog. Los ajustes preestablecidos globales de Divi le permiten crear un diseño para todo el sitio (como un tema secundario) para los elementos de su sitio con la conveniencia adicional de poder modificar el diseño como desee con unos pocos clics. Además, si está acostumbrado a crear contenido en el editor de bloques de WordPress predeterminado, puede aprovechar el poder del bloque de diseño Divi para incorporar esos elementos preestablecidos globales sobre la marcha dentro del contenido de la publicación. Esto le permitirá agregar elementos de diseño completamente nuevos dentro de una publicación de blog que coincida con la plantilla y el resto del sitio.

En este tutorial, le mostraremos cómo usar ajustes preestablecidos globales con bloques Divi Layout para agilizar el proceso de diseño de una publicación de blog. Para hacer esto, le mostraremos cómo usar los ajustes preestablecidos globales para diseñar el contenido de la nueva publicación de blog de manera rápida y eficiente. Esto ayudará a crear una experiencia de blogs que no comprometa la marca general de su sitio.

¡Empecemos!

Vistazo

Aquí hay un vistazo rápido al diseño que crearemos en este tutorial.

Una descripción general rápida de los ajustes preestablecidos globales

La belleza de Divi es que le brinda control total sobre el diseño de su sitio web utilizando una amplia gama de configuraciones de diseño que puede usar para personalizar la apariencia de cualquier elemento o módulo.

El nuevo sistema Divi Presets le permite diseñar una apariencia personalizada para un elemento Divi (como un módulo de botones) y guardarlo como un preset. Todos los cambios de diseño que realice se guardan en el ajuste preestablecido. Cuando agrega un nuevo módulo a su página, puede explorar sus ajustes preestablecidos guardados y aplicarlos rápidamente.

Una vez que se ha aplicado un ajuste preestablecido, el diseño predeterminado del módulo es controlado por el ajuste preestablecido. Si actualiza el estilo de un ajuste preestablecido, todos los módulos que utilizan ese ajuste preestablecido también se actualizan. Esto le permite controlar el diseño de todo su sitio web utilizando una pequeña colección de ajustes preestablecidos guardados. Además, ahorra mucho tiempo al agregar nuevos módulos a su página, ya que no necesita diseñar cada nuevo módulo desde cero, sino que puede seleccionar rápidamente una apariencia de su biblioteca de Divi Presets.

Guías de estilo preestablecidas globales

Se pueden crear guías de estilo preestablecidas globales (como la que vamos a usar en este tutorial) para impulsar el diseño de elementos mientras se diseña su sitio web. Estas guías de estilo contienen una colección de módulos con diferentes ajustes preestablecidos que coinciden con el diseño de su sitio. Tener los ajustes preestablecidos disponibles al principio agilizará el proceso de diseño al eliminar la monotonía de actualizar la configuración de diseño para cada nuevo módulo. Incluso tenemos un marco de guía de estilo para aquellos que quieran construir el suyo propio.

Una descripción general rápida de los bloques de diseño Divi

El bloque de diseño Divi permite a los usuarios agregar cualquier diseño Divi a una publicación de blog dentro del editor de Gutenberg. Incluso podemos convertir un bloque de diseño Divi en un bloque reutilizable en Gutenberg como cualquier otro bloque de WordPress. Esto abre la puerta para simplificar algunos diseños útiles de Divi Layout en el flujo normal de escribir una publicación en Gutenberg.

Cómo funcionan juntos los ajustes preestablecidos globales y los bloques de diseño

Debido a que un ajuste preestablecido global es "global", los estilos de ese ajuste preestablecido afectan a todas las instancias del ajuste preestablecido en todo el sitio. Eso significa que puede usar ajustes preestablecidos globales al diseñar un elemento en el editor de bloques de diseño y esos ajustes preestablecidos también se actualizarán en consecuencia. Por lo tanto, si desea agregar un CTA al contenido de la publicación de su blog utilizando Divi Layout Block, puede crear el CTA agregando módulos con Presets globales como lo haría con una página o publicación normal. Esto le permite agregar elementos de diseño coincidentes dentro de su publicación de manera rápida y eficiente.

Uso de preajustes globales con bloques de diseño Divi para optimizar el diseño de publicaciones de blog

Carga de la guía de estilo de preajustes globales

Para este tutorial, vamos a comenzar con la creación de ajustes preestablecidos globales mediante el diseño de la guía de estilo de ajustes preestablecidos globales para el diseño de agencia web. Después de cargar la guía de estilo, tendremos algunos preajustes globales disponibles para usar cuando agreguemos elementos de diseño a una publicación de blog usando Divi Layout Block.

Para descargar los ajustes preestablecidos globales, vaya a la publicación del blog. Desplácese hacia abajo hasta la sección titulada "Descargar la guía de estilo de ajustes preestablecidos globales". Luego ingrese su dirección de correo electrónico y haga clic para recibir la descarga.

Después de descargar el archivo zip en su computadora, descomprímalo y regrese al Panel de WordPress.

Para importar el archivo JSON de la guía de estilo a la biblioteca Divi…

1. navegue a Divi> Biblioteca Divi.
2. Haga clic en el botón Importar y exportar.
3. En la ventana emergente de portabilidad, seleccione la pestaña de importación.
4. Elija el archivo JSON de la guía de estilo global de la agencia web.
5. Asegúrese de seleccionar Importar ajustes preestablecidos.
6. Luego haga clic en el botón Importar.

Ahora todos esos ajustes preestablecidos globales están disponibles en Divi Builder.

Carga de la plantilla de publicación

Ahora que la guía de estilo está en su lugar, vamos a dar un salto en el diseño de la plantilla de publicación de blog importando la plantilla de publicación de blog de la agencia web que ya coincide con los elementos de la guía de estilo.

Para descargar la plantilla, vaya a la publicación del blog, ingrese su dirección de correo electrónico y haga clic para descargar los archivos.

Para importar la plantilla de publicación…

1. navegue a Divi> Theme Builder.
2. Luego haga clic en el ícono de portabilidad.
3. En el modal de portabilidad, seleccione la pestaña de importación.
4. Elija el archivo JSON de plantilla de publicación que descargó.
5. Luego haga clic en el botón Importar.

Uso de ajustes preestablecidos para actualizar / diseñar la plantilla de publicación

Una vez que tenga la plantilla de publicación personalizada en su lugar, haga clic para editar la plantilla de cuerpo personalizada. Allí también puede ver el diseño de la plantilla de publicación y realizar ajustes utilizando los ajustes preestablecidos globales que están disponibles en la guía de estilo importada. Si estuviera creando su propia plantilla de publicación desde cero, podría usar los ajustes preestablecidos globales para ayudar a hacer coincidir el diseño de la plantilla de publicación con los otros elementos del sitio web. Por ejemplo, puede utilizar el ajuste preestablecido "WALP - H1 - 1" en el título de la publicación de la siguiente manera:

O puede utilizar el módulo de propaganda "WALP - Blurb 2" preestablecido en la propaganda que contiene la información dinámica del autor.

El módulo de contenido de la publicación es el área donde se generará el contenido de la publicación de su blog en la página. Por eso es importante hacer coincidir la configuración de diseño del módulo de contenido de la publicación con los demás elementos de texto utilizados en su sitio.

Si estaba creando la plantilla de publicación desde cero, podría copiar y pegar configuraciones de texto de varios módulos de texto a través del sitio. O si ha creado una guía de estilo preestablecida global para su sitio de antemano, puede copiar los elementos de diseño de esos módulos en la guía de estilo.

Por ejemplo, puede copiar los estilos de texto de encabezado para el ajuste preestablecido global creado para todos los estilos de texto en un módulo de texto.

Luego, pase esos estilos de texto de encabezado en el módulo de contenido de la publicación para la plantilla de publicación. Eso ayudará a asegurarse de que todos los encabezados utilizados para el contenido de su publicación coincidan con el estilo del sitio.

Lo importante aquí es que tenga una plantilla de publicación que coincida con el estilo de su sitio. El uso de ajustes preestablecidos globales puede ayudar enormemente en ese proceso si está diseñando la plantilla desde cero.

Uso de preajustes globales con bloques de diseño Divi

Una vez que se ha diseñado la plantilla, estamos listos para comenzar a usar los ajustes preestablecidos globales con bloques Divi Layout para diseñar elementos de contenido de publicación adicionales utilizando el editor de bloques predeterminado de WordPress.

Para hacerlo, edite (o cree) una publicación de blog. Luego, asegúrese de tener contenido simulado (como algunos encabezados y párrafos, y una imagen destacada).

En este momento, si miraste la publicación en la interfaz, el contenido de la publicación se mostrará dentro de la plantilla de publicación y el contenido (encabezados, texto del cuerpo, etc.) hereda el estilo de la configuración del módulo de contenido de la publicación.

El módulo de contenido de la publicación solo manejará el estilo del contenido textual básico. Si desea agregar elementos adicionales a lo largo de su publicación utilizando el editor de bloques de WordPress predeterminado, el estilo de esos elementos deberá cambiarse a través de CSS personalizado en un tema secundario. Eso es a menos que use Divi Layout Blocks.

Para agregar contenido adicional que desea que coincida con su plantilla de publicación y sitio, puede usar bloques Divi Layout. Esto le permitirá agregar cualquier contenido que desee y darle estilo usando Divi Builder. Y, dado que también podemos usar ajustes preestablecidos globales, podemos optimizar aún más el diseño del contenido de nuestra publicación de blog sobre la marcha.

Diseño n. ° 1: creación de un CTA de blog con ajustes preestablecidos globales y un bloque de diseño Divi

En este primer ejemplo, creemos un CTA de blog personalizado que coincida con la plantilla de publicación y el diseño del sitio.

Para hacer esto, agregue un bloque de diseño Divi al contenido de la publicación.

Luego haga clic en Crear nuevo diseño.

Esto abrirá el editor de bloques de diseño que es básicamente el Divi Builder como de costumbre. Asigne a la sección predeterminada una fila de una columna.

Abra su Diseño de preajustes globales en un navegador diferente, asegurándose de hacer clic para construir en la interfaz para que pueda ver los elementos. De esa manera, tiene el editor de diseño abierto en un navegador y la guía de estilo abierta en el otro.

Si no tiene una guía de estilo, puede abrir un diseño de la página en su sitio para que pueda acceder a cualquier elemento de diseño que desee traer.

Copiar fondo de la guía de estilo

Para este CTA, usaremos el fondo azul real de la guía de estilo. Abra la configuración del módulo de texto y copie el fondo.

Luego abra la configuración de la sección en el editor de diseño y pegue el fondo a la sección.

Agregar módulo de texto con preajuste H3

A continuación, agregue un nuevo módulo de texto a la fila.

Luego abra la configuración y actualice lo siguiente:

Agregue un encabezado H3 para la CTA pegando el siguiente HTML en el cuerpo:

<h3>Learn How One Client Increased Revenue by 500%</h3>

Abra el menú desplegable Global Presents y seleccione el ajuste preestablecido para el encabezado H3 (WALP - H3 - 1)

Actualizar diseño

Luego actualice el color del texto a blanco y centre la alineación.

Agregar botón con preajuste global

Debajo del módulo de texto, agregue un nuevo botón.

Luego actualice el texto del botón y seleccione uno de los diseños de botones preestablecidos globales. Para este ejemplo, usemos "WALP - Botón 3".

Guardar cambios

Una vez hecho esto, haga clic en Guardar y salir.

Ahora puede ver el elemento que se muestra en el Editor de bloques de WordPress.

Diseño n. ° 2: creación de una cotización de blog con ajustes preestablecidos globales y un bloque de diseño Divi

Para este próximo elemento de diseño, agregaremos una cita a la publicación del blog.

Agregar bloque de diseño Divi

Para comenzar, agregue Divi Layout Block donde desea que se muestre la cotización.

Luego haga clic en Crear nuevo diseño.

Copiar y pegar el fondo de la guía de estilo

Copie el fondo azul oscuro de la guía de estilo.

Luego péguelo en la sección predeterminada del editor de diseño.

Añadir fila

A continuación, agregue una fila de una columna a la sección.

Agregar módulo de testimonios con preajuste

Luego agregue un módulo de testimonios a la columna. A continuación, seleccione el preajuste global "WALP - Testimonio 2".

Esto le dará un gran comienzo en el diseño de la cotización para la publicación del blog.

Actualizar diseño

En la pestaña de diseño, ajuste la configuración del diseño de la siguiente manera:

• Color del icono de cotización:
• Peso de la fuente del cuerpo: Ligero
• Estilo de fuente del cuerpo: cursiva
• Alineación del texto del cuerpo: izquierda
• Color del texto del cuerpo: #ffffff
• Fuente del autor: Ubuntu
• Tamaño del texto del autor: 16px

Agregar nuevo preajuste global

Dado que hemos realizado cambios significativos en este ajuste preestablecido de testimonios, tiene sentido crear uno nuevo en este momento para poder usarlo en futuras citas de publicaciones.

Para crear uno nuevo, haga clic en el botón "Crear nuevo ajuste preestablecido a partir de estilos actuales". Luego, asigne un nombre al nuevo ajuste preestablecido ("cita de publicación de blog") y guárdelo. El ajuste preestablecido global ahora está listo para usarse en el futuro.

Guarde el diseño y lo verá dentro del contenido de la publicación.

Diseño n. ° 1: agregar desenfoques a una publicación de blog con ajustes preestablecidos globales y un bloque de diseño Divi

Para el siguiente ejemplo, agregaremos algunos anuncios publicitarios a la publicación.

Agregar nuevo bloque de diseño Divi

Agregue otro bloque de diseño Divi y haga clic en el botón Crear nuevo diseño.

En el Editor de diseño, agregue una fila de dos columnas al diseño.

Agregar módulo de Blurb con ajustes preestablecidos

En la columna de la izquierda, agregue un módulo de propaganda.

Agregue una nueva imagen de icono a la propaganda. A continuación, abra el menú desplegable de ajustes preestablecidos y seleccione el anuncio preestablecido "WALP - Blurb 4".

Agregar segundo anuncio

Luego copie la propaganda y péguela en la columna 2 y actualice la imagen.

Guarde el diseño y lo verá en el contenido de la publicación.

Resultado final

Ahora abra la publicación en la parte frontal para ver el resultado final.

Bloques reutilizables con preajustes globales

Si desea aprovechar los bloques reutilizables con bloques de diseño Divi, es bueno saber que funcionarán con ajustes preestablecidos globales. Por lo tanto, si desea guardar la CTA del blog que creamos anteriormente como un bloque reutilizable, tendrá un bloque conveniente que puede usar para agregar CTA cuando cree sus publicaciones. Y, dado que el CTA usa un botón y texto con un ajuste preestablecido global, la actualización del ajuste preestablecido global para ese elemento también actualizará el elemento en el bloque reutilizable.

Pensamientos finales

Global Presets es una de nuestras herramientas de diseño más poderosas disponibles en Divi. Una vez que se tome el tiempo para agregar ajustes preestablecidos globales a los módulos que usa en todo el sitio, realmente puede aprovechar un proceso simplificado de diseño de plantillas y contenido de publicaciones de blog utilizando bloques de diseño.

Espero tener noticias tuyas en los comentarios.

¡Salud!