El bloque de diseño de Divi se puede usar como un bloque de diseño de imagen reutilizable para agregar imágenes de estilo Divi a las publicaciones del blog de Gutenberg. Esto combina las potentes opciones de diseño y la funcionalidad de Divi (para crear bellas imágenes) con la comodidad de escribir publicaciones (y agregar bloques) con Gutenberg.
En este tutorial, demostraremos cómo usar el bloque de diseño Divi para diseñar algunos diseños de imágenes impresionantes. Luego agregaremos esos diseños como bloques reutilizables en Gutenberg. Con esta técnica, podremos agregar casi cualquier característica de diseño de Divi a nuestras imágenes (fondos, caja de luz, filtros, animaciones, efectos de desplazamiento y mucho más). Luego, podemos usar ese diseño fabuloso como una plantilla de imagen conveniente para agregar imágenes a publicaciones futuras creadas con Gutenberg.
¡Empecemos!
Descargue los bloques de diseño de imagen reutilizables GRATIS
Para poner sus manos en los bloques de diseño de este tutorial, primero deberá descargarlos 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!
Cómo usar la descarga para importar estos bloques de diseño en su sitio
Para importar estos bloques de diseño de imagen Divi reutilizables a su sitio, primero debe descomprimir el archivo de descarga. Allí encontrará los tres archivos JSON que necesitará importar a su sitio.
Vaya a editar una publicación usando el editor predeterminado (Gutenberg). Abra el menú «Más herramientas y opciones» en la parte superior derecha de la página y seleccione «Administrar todos los bloques reutilizables».
Luego haga clic en el botón Importar desde JSON. Elija uno de los archivos JSON de la carpeta de descarga y haga clic en el botón de importación.
Repita este proceso para importar los tres archivos JSON.
Una vez hecho esto, agregue un nuevo bloque dentro de Gutenberg. Podremos encontrar los bloques de diseño reutilizables importados en la opción de alternar reutilizable. Simplemente haga clic en el que desea agregar a su publicación.
¡Eso es todo!
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitamos para empezar
Para empezar, tendremos que hacer lo siguiente:
- Si aún no lo has hecho, instala y activa el tema Divi .
- Cree una nueva publicación en WordPress y use el editor predeterminado (Gutenberg) para agregar contenido simulado (título, encabezados, párrafos, imagen destacada, etc.). Básicamente, necesitamos una publicación de prueba para construir los bloques de diseño de imagen con estilo Divi.
Después de eso, estamos listos para comenzar.
Parte 1: Creación de la imagen de ancho completo con subtítulos Bloque de diseño Divi reutilizable
Agregar bloque de diseño Divi
Para comenzar, agregue un bloque de diseño Divi a su publicación.
Luego haga clic en «Crear nuevo diseño».
Diseñando el diseño de la imagen Divi
En el Editor de bloques de diseño, comience a diseñar el diseño agregando una fila de una columna.
El módulo de imagen
Agregue un módulo de imagen a la fila.
Luego actualice la configuración de la siguiente manera:
- Abrir en Lightbox: SI
Esto permitirá que nuestra imagen se muestre en un cuadro de luz al hacer clic.
- Superposición de imagen: ENCENDIDO
- Color del icono superpuesto: #ffffff
- Color de superposición flotante: rgba (120,47,130,0.57)
Para crear algo de espacio alrededor de nuestra imagen, actualice la configuración de la fila de la siguiente manera:
- Usar ancho de canalón personalizado: SÍ
- Ancho del canalón: 1
- Ancho: 90%
- Ancho máximo: 90%
- Relleno: 5% arriba, 5% abajo
Esto nos dará un 5% de espacio alrededor de la imagen. Este también será el espacio que mostrará el degradado de fondo que agregaremos a la sección.
Abra la configuración de la sección y actualice el diseño con un degradado de fondo de la siguiente manera:
- Fondo degradado Color izquierdo: #782f82
- Fondo degradado Color derecho: #fe756b
- Dirección del gradiente: 90 grados
Para hacer que la imagen se extienda un poco más allá del contenedor de contenido de la publicación del blog, podemos darle a la sección un ancho personalizado de la siguiente manera:
- Ancho: 110%
- Ancho máximo: 100%
- Margen: -5% restante
- Relleno: 0px arriba, 0px abajo
Finalmente, dale a la sección un toque creativo agregando una sombra de caja interna de la siguiente manera:
- Sombra de caja: ver captura de pantalla
- Posición horizontal de la sombra del cuadro: 5vw
- Posición vertical de la sombra del cuadro: 5vw
- Color de sombra: rgba (255,255,255,0.7)
Si queremos tener un diseño de imagen sin título, podemos detenernos aquí, pero para agregar un título al diseño de imagen, agregue un módulo de texto debajo de la imagen.
Luego agregue algo de contenido de relleno para que sirva como texto de subtítulo.
Luego actualice la siguiente configuración de texto:
- Fuente del texto: Montserrat
- Peso de fuente de texto: semi negrita
- Texto Color del texto: #ffffff
- Ancho: 80%
- Alineación del módulo: derecha
- Margen: 5% superior
Cuando haya terminado, asegúrese de guardar el diseño con Ctrl + S o abra la barra de configuración en la parte inferior y haga clic en «Guardar y salir».
Agregar el diseño de la imagen a los bloques reutilizables
Para agregar el diseño a bloques reutilizables, haga clic en el menú «Más opciones» sobre el bloque y seleccione «Agregar a bloques reutilizables».
Asigne un nombre al bloque reutilizable y haga clic en «Guardar».
Ahora, la imagen de ancho completo con diseño de subtítulos se ha agregado a los bloques reutilizables y estará disponible en la lista de bloques al crear una publicación.
No olvides actualizar/guardar la publicación para guardar los cambios.
Parte 2: Crear la imagen de la izquierda con el bloque de diseño Divi reutilizable de subtítulos
Ahora que la imagen de ancho completo con diseño de subtítulos se ha agregado a los bloques reutilizables, podemos usar ese bloque para crear nuestra imagen izquierda con diseño de subtítulos.
Convertir bloque reutilizable en bloque regular
Para comenzar, abra el menú «Más opciones» en la parte superior del bloque reutilizable que contiene el diseño de imagen de ancho completo. Luego seleccione «Convertir a bloque regular».
No se preocupe, esto no eliminará el bloque de diseño que acabamos de crear a partir de bloques reutilizables (aunque hay una opción para eso). Esto simplemente hará que el bloque reutilizable sea un bloque normal para que podamos editar y usar el bloque para una sola instancia.
Actualizar diseño
Una vez que el bloque sea normal, haga clic en el botón Editar diseño encima del bloque.
En el editor de diseño, abra la configuración de la sección y actualice el ancho de la siguiente manera:
- Ancho: automático
- Ancho máximo: 500px
Eso es todo lo que tenemos que hacer dentro del editor de diseño. Asegúrese de guardar y salir del diseño.
Con el bloque seleccionado, abra la barra lateral de configuración principal y seleccione la pestaña del bloque para mostrar la configuración del bloque. Debajo de la palanca avanzada, agregue la siguiente clase:
- Adición de clase CSS: alignleft
Esta clase es nativa de WordPress y hará flotar el bloque a la izquierda, lo que también hará flotar nuestra imagen a la izquierda del contenido dentro de nuestra publicación.
Después de agregar la clase, abra el menú «Más opciones» del bloque y haga clic en «Agregar a bloques reutilizables».
Asigne un nombre al bloque Reutilizable (es decir, «Imagen izquierda con título») y haga clic en Guardar.
Ahora el bloque de diseño Imagen izquierda con subtítulo se ha agregado a la lista de bloques reutilizables para facilitar el acceso.
Parte 3: Creación del bloque de diseño Divi reutilizable «Imagen correcta con título»
Hasta ahora tenemos una imagen de ancho completo con un bloque de diseño de subtítulos y una imagen de la izquierda con un bloque de diseño de subtítulos. Ahora podemos agregar la imagen correcta con el bloque de diseño de subtítulos.
Convertir bloque reutilizable en bloque regular
Para hacer esto, abra el menú «Más opciones» en la imagen de la izquierda con el título bloque reutilizable. Luego seleccione «Convertir a bloque regular».
Actualizar diseño
Una vez que el bloque sea un bloque de diseño regular, haga clic para editar el diseño.
Luego abra la configuración de la sección y saque el margen izquierdo.
Guarde y salga del editor de diseño.
Luego actualice la clase CSS adicional del bloque con lo siguiente:
- Clase CSS adicional: alignright
Después de agregar la Clase, agregue el bloque de diseño a Bloques reutilizables.
Y asigne un nombre al bloque reutilizable (es decir, «Imagen correcta con leyenda») y guárdelo.
Ahora haga clic en uno de los íconos azules más debajo de un bloque en la publicación para agregar un nuevo bloque. Luego, en la ventana emergente de la lista de bloqueo, abra la palanca Reutilizable. Ahora tenemos nuestros tres bloques de diseño de imagen reutilizables listos para usar.
Parte 4: Uso de los bloques de diseño de imagen reutilizables en una publicación.
Aunque hemos creado nuestros Bloques de diseño de imagen, existen (para nuestros propósitos) solo como una plantilla para impulsar el proceso de agregar una imagen a una publicación. Por lo tanto, cada vez que queramos agregar una imagen real a una publicación usando estos bloques de diseño, primero debemos convertirlo en un bloque normal antes de agregar la imagen y el título al diseño.
Aquí está cómo hacerlo.
Paso 1: agregue el bloque de diseño reutilizable
Agregue uno de los bloques de diseño de imagen Divi reutilizables a la publicación.
Paso 2: Conviértalo en un bloque regular
A continuación, abra el menú «Más opciones» y seleccione «Convertir a bloque regular».
Paso 3: edite el bloque de diseño con una nueva imagen y leyenda
Una vez que el bloque sea regular, haga clic para editar el diseño.
Actualice el diseño con una imagen de su elección.
Luego actualice el texto del título dentro del módulo de texto.
Paso 4: Guarde el bloque de diseño
Una vez que haya terminado, guarde y salga del editor de diseño.
Continúe este mismo proceso para agregar los otros dos diseños de imagen a la publicación.
Resultado final
Pensamientos finales
Una vez que nos acostumbramos a usar el bloque de diseño Divi, se vuelve obvio lo valioso que puede ser para la vida de nuestro blog. En esta publicación, cubrimos cómo usar el bloque de diseño para agregar algunas imágenes geniales de estilo Divi a una publicación de blog de Gutenberg. El truco consiste en guardar primero los diseños como un bloque reutilizable. Luego, cuando estemos listos para agregar imágenes a una publicación de blog, podemos convertir fácilmente el bloque reutilizable en un bloque normal para que podamos agregar nuestra imagen y título.
Con suerte, esto le proporcionará algo de inspiración para llevar las imágenes de su blog a un nivel completamente nuevo.
Espero escuchar de usted en los comentarios.
¡Salud!