El bloque de diseño Divi sigue siendo una actualización útil del tema Divi , que nos permite 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.
En este tutorial, vamos a demostrar cómo crear un bloque de diseño Divi reutilizable para las publicaciones de blog de Gutenberg. Para ilustrar esto, crearemos un divisor de sección para nuestro bloque de diseño Divi reutilizable de ejemplo para esta publicación. Pero podemos aplicar fácilmente esta misma técnica para crear un bloque de diseño Divi reutilizable para casi cualquier cosa del constructor Divi.
Empecemos.
Crear o editar una publicación de blog
Para comenzar, necesitamos crear una nueva publicación de blog o editar una existente. Para este ejemplo, agreguemos contenido simulado al título y al cuerpo de la publicación usando algunos bloques de encabezado y párrafo. Luego agregue una imagen destacada y elija «Sin barra lateral» para el diseño de página en la configuración de la página Divi.
Agregar bloque de diseño Divi en línea
Una vez que hayamos creado la mayor parte de la publicación, todo lo que tenemos que hacer es agregar un nuevo bloque de diseño Divi en cualquier lugar que queramos dentro del área de contenido de la publicación.
Para agregarlo, desplace el cursor sobre el área donde queremos agregar la opción de correo electrónico. Luego haga clic en el ícono azul más para agregar un nuevo bloque. En la lista de bloques emergente, seleccione el bloque Divi Layout.
Cree un nuevo diseño dentro del bloque de diseño Divi
Una vez que se haya seleccionado el bloque de diseño Divi, tendremos la opción de «Crear nuevo diseño» o «Cargar desde la biblioteca». Como necesitamos construir un nuevo divisor para nuestro ejemplo, elija la opción «Crear nuevo diseño».
Diseñe un diseño utilizando el editor de bloques de diseño Divi
Una vez que seleccionamos el botón Crear nuevo diseño, podemos diseñar nuestro diseño Divi dentro del editor de bloques de diseño.
Para este ejemplo, construiremos un separador o divisor personalizado utilizando los divisores de forma de sección de Divi y un fondo degradado. Este es estrictamente un elemento de diseño que podremos convertir en un bloque de diseño reutilizable para una forma conveniente de agregar divisores de sección dentro de una publicación de Gutenberg.
Para crear el diseño del divisor de sección, abra la configuración de la sección y actualice lo siguiente:
- Fondo degradado Color izquierdo: #ddd6f3
- Fondo degradado Color derecho: #faaca8
- Dirección del gradiente: 90 grados
- Posición inicial: 30%
- Estilo de divisor superior: ver captura de pantalla
- Color del divisor superior: #ffffff
- Altura del divisor superior: 50px
- Estilo de divisor inferior: ver captura de pantalla
- Color del divisor inferior: #ffffff
- Altura del divisor inferior: 50px
- Voltear el divisor inferior: Horizontal
- Altura: 100px
- Relleno: 0px arriba, 0px abajo
Una vez que el diseño esté completo, asegúrese de guardar el bloque de diseño Divi.
Ahora el divisor de la sección Divi Layout Block aparecerá dentro del editor de publicaciones de WordPress.
Tenga en cuenta que el espacio por encima y por debajo del diseño Divi del bloque de diseño puede parecer mayor en el backend que en el frontend.
Ahora estamos listos para convertir este bloque de diseño Divi en un bloque de diseño reutilizable para facilitar la adición de este mismo divisor de sección en publicaciones futuras.
Pero antes de hacerlo, puede ser útil saber qué es un bloque reutilizable en WordPress.
¿Qué es un bloque de diseño reutilizable?
Un bloque de diseño reutilizable en el Editor de bloques predeterminado de WordPress (Gutenberg) se parece mucho a un elemento global en Divi . El bloque se puede usar varias veces, pero el contenido y la apariencia permanecen exactamente iguales para todas las instancias. Y cuando editamos el bloque de diseño reutilizable, el cambio se aplica a todas las instancias del bloque de diseño en todo el sitio. Una vez que un bloque de diseño se vuelve reutilizable en WordPress, el bloque estará disponible en la lista de bloques al escribir la publicación. Esto hace que sea realmente conveniente agregar el mismo bloque de diseño varias veces en varias publicaciones de blog.
Convertir el bloque de diseño Divi en un bloque de diseño reutilizable
Para hacer que nuestro bloque de diseño Divi sea un bloque reutilizable, desplace el cursor sobre el bloque de diseño y abra el menú de configuración haciendo clic en el icono de tres puntos. Luego, de la lista, seleccione la opción «Agregar a bloques reutilizables «.
Luego asigne un nombre al bloque reutilizable y haga clic en el botón Guardar para guardar el bloque como un bloque reutilizable.
Ahora, cuando agregamos un nuevo bloque dentro de la publicación del blog, podemos encontrar nuestro nuevo bloque de diseño reutilizable dentro de la lista (en la categoría Reutilizable). Simplemente haga clic en el bloque de diseño reutilizable y se agregará a la publicación.
Ahora, si miramos la publicación en vivo, podemos ver dos instancias del mismo divisor de sección exacto.
Una vez que usamos el bloque reutilizable varias veces en la publicación o el sitio, podemos editar una de las instancias del bloque de diseño reutilizable y esos cambios se aplicarán a todas las instancias del bloque en todo el sitio.
Para editar el bloque de diseño reutilizable, coloque el cursor sobre el bloque y haga clic en el botón de edición en la parte superior derecha del bloque.
Luego seleccione (haga clic en) el diseño dentro del bloque reutilizable y haga clic en el icono de edición en el menú superior que aparece. También podemos hacer clic en el enlace editar diseño debajo de la pestaña de bloque en la barra lateral derecha.
Luego cambie el diseño del diseño como queramos. Para este ejemplo, podemos cambiar los colores utilizados para el fondo degradado.
Después de guardar el diseño, asegúrese de hacer clic en el botón Guardar en la parte superior derecha del bloque de diseño reutilizable. Luego actualice la publicación y vea los cambios en el sitio en vivo.
Notará que los cambios de diseño se actualizan para todas las instancias del diseño reutilizable.
Sugerencia: uso de un bloque de diseño reutilizable como plantilla
Hay momentos en los que queremos usar una versión modificada del bloque de diseño reutilizable en nuestra publicación. Esto nos permite agregar un bloque de diseño reutilizable a la publicación como plantilla inicial para que podamos personalizar el bloque de diseño para una instancia específica sin afectar el bloque reutilizable en todo el sitio.
Para usar un bloque de diseño reutilizable como plantilla, primero agregue el bloque reutilizable a la publicación.
Luego abra el menú de bloque y seleccione la opción, «convertir a bloque regular».
Ahora podemos editar el diseño para un diseño específico para esta instancia sin afectar los otros bloques reutilizables.
Pensamientos finales
La creación de bloques de diseño Divi reutilizables puede ser útil, especialmente para elementos de diseño Divi como un divisor de sección. Esto nos permite usar el divisor repetidamente a lo largo de nuestras publicaciones. No solo agiliza el proceso de escribir una publicación, sino que también nos permite actualizar el diseño del bloque en todo el sitio mucho más fácilmente. En esta publicación, mostramos cómo agregar un divisor de sección como un bloque reutilizable, pero esta misma técnica se puede usar para crear un sinfín de bloques de diseño Divi reutilizables por innumerables otras razones.
¿Puede identificar formas útiles de incorporar bloques de diseño Divi reutilizables en sus propias publicaciones de blog?
Espero escuchar de usted en los comentarios.
¡Salud!