Cómo construir bloques de diseño de imágenes reutilizables para agregar imágenes con estilo Divi a las publicaciones de Gutenberg
Publicado: 2020-02-16El bloque de diseño de Divi se puede usar como un bloque de diseño de imagen reutilizable para agregar imágenes con estilo Divi a las publicaciones del blog de Gutenberg. Esto combina las poderosas opciones de diseño y la funcionalidad de Divi (para crear hermosas imágenes) con la conveniencia 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 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!
Vistazo
Descargue GRATIS los bloques de diseño de imágenes reutilizables
Para poner sus manos sobre 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 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!
Cómo utilizar la descarga para importar estos bloques de diseño en su sitio
Para importar estos bloques de diseño de imágenes 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 con 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?
Qué necesitamos para empezar
Para comenzar, necesitaremos hacer lo siguiente:
- Si aún no lo ha hecho, instale y active Divi Theme.
- 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 el bloque de diseño Divi reutilizable de subtítulos
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ñar 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: SÍ
Esto permitirá que nuestra imagen se muestre en una caja de luz al hacer clic.
- Superposición de imágenes: ACTIVADO
- Color del icono de superposición: #ffffff
- Color de superposición de desplazamiento: 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 de la canaleta: 1
- Ancho: 90%
- Ancho máximo: 90%
- Relleno: 5% superior, 5% inferior
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:
- Color de fondo degradado a la izquierda: # 782f82
- Color de fondo degradado a la derecha: # fe756b
- Dirección del gradiente: 90 grados
Para 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:
- Box Shadow: ver captura de pantalla
- Posición horizontal de la sombra de la caja: 5vw
- Posición vertical de la sombra de la caja: 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 la imagen, agregue un módulo de texto debajo de la imagen.
Luego, agregue algo de contenido de relleno para que sirva como texto de leyenda.
Luego actualice la siguiente configuración de texto:
- Fuente de texto: Montserrat
- Peso de la fuente del texto: Semi negrita
- Color del texto del texto: #ffffff
- Ancho: 80%
- Alineación del módulo: derecha
- Margen: 5% superior
Cuando termine, 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 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 olvide actualizar / guardar la publicación para guardar los cambios.
Parte 2: Creación de la imagen 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 la imagen de ancho completo. Luego seleccione "Convertir en 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 regular 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 que se encuentra sobre el bloque.
En el editor de diseño, abra la configuración de la sección y actualice el ancho de la siguiente manera:
- Ancho: auto
- Ancho máximo: 500px
Eso es todo lo que necesitamos 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:
- Clase CSS adicional: alignleft
Esta clase es nativa de WordPress y hará flotar el bloque a la izquierda que también hará flotar nuestra imagen a la izquierda del contenido dentro de nuestra publicación.
Una vez agregada 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 de la imagen izquierda con tí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 derecha con título"
Hasta ahora tenemos una imagen de ancho completo con un bloque de diseño de subtítulos y una imagen 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 bloque reutilizable de leyenda. Luego seleccione "Convertir en bloque regular".
Actualizar diseño
Una vez que el bloque sea un bloque de diseño normal, 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
Una vez agregada la clase, agregue el bloque de diseño a los bloques reutilizables.
Y asigne un nombre al bloque reutilizable (es decir, "Imagen derecha con título") y guárdelo.
Ahora haga clic en uno de los íconos más azules debajo de un bloque en la publicación para agregar un nuevo bloque. Luego, en la ventana emergente de la lista de bloqueo, abra el botón Reutilizable. Ahora tenemos nuestros tres bloques de diseño de imágenes reutilizables listos para ser utilizados.
Parte 4: Uso de los bloques de diseño de imágenes reutilizables en un poste.
Aunque hemos creado nuestros Bloques de diseño de imágenes, existen (para nuestros propósitos) solo como una plantilla para iniciar 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 tendremos que convertirla en un bloque normal antes de agregar la imagen y el título al diseño.
He aquí 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 normal
A continuación, abra el menú "Más opciones" y seleccione "Convertir en bloque normal".
Paso 3: Edite el bloque de diseño con una nueva imagen y título
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 de la leyenda dentro del módulo de texto.
Paso 4: guarde el bloque de diseño
Una vez terminado, guarde y salga del editor de diseño.
Continúe con este mismo proceso para agregar los otros dos diseños de imagen a la publicación.
Resultado final
Pensamientos finales
Una vez que aprendemos 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 con estilo Divi a una publicación de blog de Gutenberg. El truco consiste en guardar los diseños como un bloque reutilizable primero. 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 tener noticias tuyas en los comentarios.
¡Salud!