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 infantil 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 , tenemos 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 comodidad 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 nuevos elementos de diseño 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 de diseño Divi 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 nuevos contenidos de publicaciones 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!
Aquí hay un vistazo rápido al diseño que construiremos 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 te permite diseñar una apariencia personalizada para un elemento Divi (como un módulo de botones) y guardarlo como un preajuste. 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 está controlado por el ajuste preestablecido. Si actualiza el estilo de un ajuste preestablecido, todos los módulos que usan 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 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 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 desde el 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 crear 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 su publicación de blog utilizando el bloque de diseño Divi, puede crear el CTA agregando módulos con ajustes preestablecidos 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 ajustes preestablecidos globales con bloques de diseño Divi para optimizar el diseño de publicaciones de blog
Carga de la guía de estilo de ajustes preestablecidos globales
Para este tutorial, vamos a comenzar a crear preajustes globales utilizando el diseño de la guía de estilo de preajustes globales para el diseño de la agencia web . Después de cargar la guía de estilo, tendremos algunos ajustes preestablecidos globales disponibles para usar al agregar elementos de diseño a una publicación de blog usando el bloque de diseño Divi.
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…
- navega a Divi > Biblioteca Divi.
- Haga clic en el botón Importar y exportar.
- En la ventana emergente de portabilidad, seleccione la pestaña de importación.
- Elija el archivo JSON de la guía de estilo global de la agencia web.
- Asegúrese de seleccionar Importar ajustes preestablecidos.
- Luego haga clic en el botón importar.
Ahora todos esos ajustes preestablecidos globales están disponibles en Divi Builder.
Subir 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…
- navega a Divi > Generador de temas.
- Luego haga clic en el icono de portabilidad.
- En el modal de portabilidad, seleccione la pestaña de importación.
- Elija el archivo JSON de plantilla de publicación que descargó.
- 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 personalizado. Allí también puede ver el diseño de la plantilla de publicación y hacer 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 usar el ajuste preestablecido «WALP – H1 – 1» en el título de la publicación de la siguiente manera:
O puede utilizar el preajuste del módulo de publicidad «WALP – Blurb 2» en la publicidad 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 publicación con los otros elementos de texto utilizados en su sitio.
Si estuviera creando la plantilla de publicación desde cero, podría copiar y pegar la configuración 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 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 a ese proceso si está diseñando la plantilla desde cero.
Uso de ajustes preestablecidos 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 de diseño Divi para diseñar elementos de contenido de publicación adicionales utilizando el editor de bloques predeterminado de WordPress.
Para hacer eso, edite (o cree) una publicación de blog. Luego, asegúrese de tener algún contenido simulado (como algunos encabezados y párrafos, y una imagen destacada).
En este momento, si miró la publicación en la parte frontal, tendrá el contenido de la publicación que se muestra dentro de la plantilla de la 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 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, deberá cambiar el estilo de esos elementos a través de CSS personalizado en un tema secundario. Eso es a menos que uses Divi Layout Blocks.
Para agregar contenido adicional que desee que coincida con su plantilla de publicación y sitio, puede usar bloques de diseño Divi. Esto le permitirá agregar cualquier contenido que desee y diseñarlo con Divi Builder. Y, dado que también podemos usar ajustes preestablecidos globales, podemos simplificar 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, vamos a crear 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 ajustes preestablecidos globales en un navegador diferente, asegurándose de hacer clic para construir en la parte frontal 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, vamos a utilizar 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 pase el fondo de 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 código HTML en el cuerpo:
|
01
|
<h3>Learn How One Client Increased Revenue by 500%</h3> |
Abra el menú desplegable Global Presents y seleccione el preajuste 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 cita 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 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 ajuste preestablecido global «WALP – Testimonio 2».
Esto le dará un excelente comienzo en el diseño de la cita para la publicación del blog.
Actualizar diseño
En la pestaña de diseño, ajuste la configuración de 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 cuerpo del texto: #ffffff
- Autor Fuente: Ubuntu
- Tamaño del texto del autor: 16px
Agregar nuevo ajuste preestablecido global
Dado que hemos realizado cambios significativos en este preajuste de testimonios, tiene sentido crear uno nuevo en este punto 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 elementos publicitarios a una publicación de blog con ajustes preestablecidos globales y un bloque de diseño Divi
Para el siguiente ejemplo, vamos a agregar algunas notas publicitarias 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.
Agregue el módulo 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. Luego abra el menú desplegable de ajustes preestablecidos y seleccione el ajuste preestablecido de publicidad «WALP – Blurb 4».
Agregar segunda publicidad
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 delantera 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. Entonces, si desea guardar el CTA del blog que creamos anteriormente como un bloque reutilizable, tendrá un bloque conveniente que puede usar para agregar CTA al crear sus publicaciones. Y, dado que la CTA usa un botón y texto con un valor preestablecido global, actualizar el valor 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 de publicaciones de blog y contenido utilizando bloques de diseño.
Espero escuchar de usted en los comentarios.
¡Salud!