Cómo construir bloques de imagen reutilizables para agregar Div

El bloque de la división de diseño se puede usar como un bloque de imagen reutilizable para agregar imágenes de estilo Div a las publicaciones en el blog Gutenberg. Esto combina las fuertes opciones de diseño y la funcionalidad del DIV (para crear imágenes hermosas) con la conveniencia de escribir publicaciones (y agregar bloques) con Gutenberg. En este tutorial, mostraremos cómo usar el bloque de apariencia de Divic para diseñar algunos aspectos de imagen sorprendentes. Luego agregaremos esos modelos como bloques reutilizables en Gutenberg. Con esta técnica, podremos agregar casi cualquier característica de diseño a nuestras imágenes (fondos, caja de luz, filtros, animaciones, efectos de desplazamiento). Luego, podemos usar ese diseño fabuloso como una plantilla de imagen conveniente para agregar imágenes a futuras publicaciones creadas con Gutenberg.
¡Vamos a empezar! Tirar del ojo

Descargue los bloques de imagen reutilizables de forma gratuita para poner sus manos en los bloques de apariencia en este tutorial, primero tendrá que descargarlos usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Cómo usar descargas para importar estos bloques de apariencia a su sitio para importar estos bloques de diseño de divagación reutilizables a su sitio, primero, debe no gustarle el archivo descargado. Allí encontrará los tres archivos JSON que necesitará importar en su sitio.
Vaya a editar una publicación usando el editor predeterminado (Gutenberg). Abra el menú “Varias 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 en JSON. Elija uno de los archivos JSON en la carpeta de descarga y haga clic en el botón Importar.

Repita este proceso para importar los tres archivos JSON. Después de haber terminado, agregue un nuevo bloque a Gutenberg. Podremos encontrar los bloques de apariencia reutilizables importados bajo el cambio de la opción reutilizable. Simplemente haga clic en el que desea agregar a su publicación.

¡Eso es todo! Pasemos al tutorial, ¿no? Lo que debemos comenzar a comenzar, tendremos que hacer lo siguiente:

Si aún no lo ha hecho, instale y active el tema Div. Care una nueva publicación en WordPress y use el editor predeterminado (Gutenberg) para agregar contenido falso (título, títulos, párrafos, imagen presentada, etc.). Básicamente, necesitamos una publicación de prueba para construir los bloques de imagen de imagen.
Después de eso, estamos listos para comenzar. Parte 1: Crear la imagen con ancho completo con el bloque de diseño reutilizable Agregar un DIV
Luego haga clic en “Construir un nuevo look”.
Diseñando la apariencia de la imagen de división en el editor de bloques de apariencia, comience a diseñar la apariencia agregando una fila con una columna.

El módulo de imagen agrega un módulo de imagen en una fila.

Luego actualice la configuración de la siguiente manera:

Abierto en Lightbox: Sí

Esto permitirá que nuestra imagen se muestre en un cuadro de caja de luz al hacer clic.
Superposición de la imagen: activado
El color del icono superpuesto: #ffffff

Color de superposición de Hover: RGBA (120,47,130,57)
Para crear espacio alrededor de nuestra imagen, actualice la configuración de la fila de la siguiente manera:
Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1
Ancho: 90%
Ancho máximo: 90%
Revestimiento: 5% más, 5% inactiva
Esto nos dará el 5% del espacio alrededor de la imagen. Este también será el espacio que mostrará el gradiente de fondo que agregaremos a la sección. Abra la configuración de la sección y actualice el diseño con un gradiente de fondo de la siguiente manera:
Fondo degradado Izquierda: # 782F82

Color derecho de fondo degradado: # Fe756b
Dirección de gradiente: 90 grados
Para que la imagen se expanda un poco más allá del contenedor de contenido de las publicaciones de blog, podemos darle a la sección un ancho personalizado de la siguiente manera: Ancho: 110%
Ancho máximo: 100%

Marja: -5% queda
Forro: 0 px arriba, 0 px abajo
Finalmente, dale a la sección una nota creativa agregando una sombra interna, de la siguiente manera:
Box Shadow: Ver captura de pantalla
Posición horizontal de la sombra de la caja: 5VW

Box Shadow Posición vertical: 5VW
Color de la sombra: RGBA (255,255,255,0,7)
Si queremos tener un aspecto de imagen libre de subtítulos, podemos parar aquí, pero para agregar una leyenda a la apariencia de la imagen, agregue un módulo de texto debajo de la imagen.
Luego agregue un contenido de llenado para servir como texto de subtítulo.
Luego actualice la siguiente configuración de texto:

Texto de fuente: Montserrat

El peso de la fuente de texto: semi audac.

Color de texto de texto: #ffffff

Ancho: 80%
Alineación del módulo: correcto
Marja: 5% Top
Cuando haya terminado, asegúrese de guardar el aspecto con Ctrl + S o abrir la barra de configuración en la parte inferior y haga clic en “Guardar y salir”.
Agregar la apariencia de la imagen a los bloques reutilizables para agregar la apariencia de los bloques reutilizables, haga clic en el menú “Más opciones” sobre el bloque y seleccione “Agregar a bloques reutilizables”.
Dé un nombre al bloque reutilizable y haga clic en “Guardar”.

Ahora, la imagen de ancho completo con la apariencia del subtítulo se ha agregado a los bloques reutilizables y estará disponible en la lista de bloques al construir una publicación.

Recuerde actualizar / guardar la publicación para guardar sus cambios.

Parte 2: Creación de la imagen a la izquierda con el bloque de diseño reutilizable Ahora, la imagen de ancho completo con la apariencia del subtítulo se ha agregado a los bloques reutilizables, podemos usar ese bloque para crear la imagen izquierda con la apariencia del subtítulo . Conversión del bloque reutilizable en el bloque regular para comenzar, abra el menú “Más opciones” en la parte superior del bloque reutilizable que contiene la apariencia de la imagen de ancho completo. Luego seleccione “Convertir al bloque normal”. No se preocupe, esto no eliminará el bloque de apariencia que acabo de crear desde los bloques reutilizables (hay una opción para esto). Esto simplemente hará que el bloque reutilizable sea un bloque ordinario para que podamos editar y usar el bloque para una sola instancia.

Actualice el aspecto Una vez que el bloque sea regular, haga clic en el botón Editar sobre el bloque.
En el editor de apariencia, abra la configuración de la sección y actualice el ancho de la siguiente manera:

Ancho: automático

Ancho máximo: 500 PX
Esto es todo lo que tenemos que hacer en el editor de apariencia. Asegúrese de guardar y salir del look. Con el bloque seleccionado, abra el lado lateral de la configuración principal y seleccione la pestaña Bloque para mostrar la configuración del bloque. En conmutación avanzada, agregue la siguiente clase:

Agregar clase CSS: Alignleft
Esta clase es nativa de WordPress y flotará el bloque a la izquierda, que flotará y nuestra imagen a la izquierda del contenido en nuestra publicación. Después de que se haya agregado la clase, abra el menú “Más opciones” del bloque y haga clic en “Agregar a bloques reutilizables.
Dé un nombre al bloque reutilizable (es decir, “imagen izquierda con subtítulos”) y haga clic en Guardar.

Ahora, la imagen a la izquierda con el bloque de apariencia del subtítulo se ha agregado a la lista de bloques reutilizables para facilitar el acceso. Parte 3: Creación del bloque de división reutilizable “Imagen correcta con subtítulos” hasta ahora tenemos una imagen de ancho completa con un bloque de apariencia de subtítulo y una imagen izquierda con un bloque de apariencia de subtítulo. Ahora podemos agregar la imagen correcta con el punto de vista del subtítulo. Conversión del bloque reutilizable en el bloque regular Para hacer esto, abra el menú “Más opciones” en la imagen izquierda con el legendario bloque reutilizable. Luego seleccione “Convertir al bloque regular”.
Actualice el aspecto Una vez que el bloque sea un bloque de aspecto normal, haga clic para editar el aspecto.

Luego abra la configuración de la sección y retire el borde izquierdo.

Guarde y salga del editor de apariencia. Luego actualice la clase CSS adicional del bloque con lo siguiente:

Clase CSS adicional: Alinearse

Después de que se haya agregado la clase, agregue el bloque de apariencia a bloques reutilizables.

Y dar un nombre al bloque reutilizable (es decir, “imagen correcta con subtítulos”) y guárdelo.

Ahora haga clic en uno de los iconos 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 bloques, abra el interruptor reutilizable. Ahora tenemos los tres bloques de imagen reutilizables listos para ser utilizados.
Parte 4: Uso de bloques de imagen reutilizables en una publicación. Aunque tenemos los bloques de la imagen creados, existen (para nuestros propósitos) solo como una plantilla para comenzar el proceso de agregar una imagen a una publicación. Por lo tanto, cada vez que queremos agregar una imagen real a una publicación usando estos bloques de apariencia, primero tendremos que convertirla en un bloque normal antes de agregar la imagen y los subtítulos a la apariencia. Aquí le mostramos cómo hacerlo. Paso 1: Agregue el bloque de apariencia reutilizable Agregue uno de los bloques de bloques de imagen reutilizables para publicar.

Paso 3: edite el bloque de apariencia con una nueva imagen y subtítulo Una vez que el bloque sea regular, haga clic para editar el aspecto.

Actualice el look con una imagen de su elección.

Luego actualice el texto del subtítulo en el módulo de texto.

Paso 4: Guarde el bloque de apariencia después de que haya terminado, guarde y salga del editor Look.

Continúe el mismo proceso para agregar los otros dos aspectos de la imagen para publicar. Resultado final