Cómo incluir un suma de bloque de bloque Div en su publicación Gutenberg

Crear publicaciones de blog valiosas requiere tiempo y esfuerzo. Además de encontrar los mejores temas para escribir en su nicho, también es importante mantener a los lectores involucrados y permitirles encontrar rápidamente la información que están buscando. Ahora, una buena manera de abordar este tipo de experiencia en el usuario es compartir un cuadro de resumen visual al final de la publicación del blog, justo antes de los últimos pensamientos. Con los nuevos bloques de división, ahora puede crear un cuadro resumido sin esfuerzo con el Div Integrado. ¡En este tutorial, lo guiaremos a través del proceso y podremos descargar el archivo JSON de forma gratuita!
Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Descargue el bloque de diseño de la división de la caja resumida gratuita para poner su mano en el bloque de la división del cuadro de resumen de héroe gratuito, primero deberá descargarlo con 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!
La importación del bloque de apariencia JSON Cargue la apariencia en la biblioteca de la Divica para importar el archivo JSON que podría descargar anteriormente, vaya a la biblioteca de la Divica desde el backend del tablero de WordPress y haga clic en “Importar y exportar”.
Luego seleccione el archivo JSON en la carpeta de descarga y haga clic en “Importar diseños de Builder Div Div”.

Agregue un nuevo bloque Div Div en la publicación de Gutenberg Una vez que se haya importado su apariencia, puede ir a su publicación de Gutenberg y puede agregar un nuevo DIV

Importe el archivo JSON desde los aspectos guardados y luego haga clic en “Cargar desde la biblioteca”, navegar “sus aspectos guardados” y seleccione la apariencia para importar el cuadro de resumen en la publicación del blog. ¡Eso es todo!

¡Comencemos a recrear! Use el paquete Post-Six-Theme Builder Descargar Sixth Pack Package Box que recrearemos en este tutorial es perfectamente adecuado para el sexto paquete posterior a Homework. Vaya a la publicación del blog y descargue todo el paquete.


Vaya a Div Div Theme Builder, acceda al constructor de temas de la división. Lleve la plantilla de publicación Haga clic en el icono en la esquina superior derecha y suba el paquete de publicación de los temas. Asegúrese de cambiar todos los cambios posteriores del fabricante del tema.

Abra la publicación existente de Gutenberg o cree una nueva ahora, después de agregar la plantilla de publicación adecuada, es hora de crear el cuadro de resumen. Abra o cree una nueva publicación con Gutenberg.

Agregue el resumen del título de H2 cerca del final de la publicación en el blog, agregaremos un nuevo título de H2.

Agregue un nuevo bloque de división en línea, agregaremos un nuevo bloque de división.

Construya un nuevo look dentro del bloque de la Divic después de haber agregado el bloque, recibirá dos opciones. Elija construir un nuevo look.

Sección de configuración Color de construcción En el editor de Divic Block Blocks, notará una sección. Abra esa sección y use un fondo blanco para ella.

Color de fondo: #ffffff

Espacio ir a la pestaña de diseño de la sección y agregue algunos valores de margen personalizado y llenado.
Margen superior: 100 PX

Margen izquierdo: -10% (escritorio), 0% (tableta y teléfono)
Margen derecho: -10% (escritorio), 0% (tableta y teléfono)
SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Borde agregue un rayo de borde.
En la parte inferior izquierda: 16 PX

Abajo a la derecha: 16 PX
Sombra de caja con un tono de caja sutil.
Poder de poco claro de la sombra de la caja: 60 px

Poder de extender la sombra de la caja: 10 px
Shadow Color: RGBA (0.0,0,0.08)
Agregue una nueva estructura de columna de fila Continúe agregando una nueva línea a la sección utilizando la siguiente estructura de columna:
Dimensión sin agregar módulos, abra la configuración de la fila y permita que la fila ocupe el ancho de toda la sección. Utilice el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1

Igualar las alturas de la columna: sí
Ancho: 100%
Ancho máximo: 100%
El espacio elimina el llenado predeterminado e inferior de la fila a continuación.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX

Configuración Columna 1 Color de fondo Luego, abra la configuración de la columna 1 y use un fondo blanco para ella.
Color de fondo: #ffffff
Sparto Agregue algunos valores de llenado personalizados.

Revestimiento superior: 70 PX
Finamiento inferior: 70 PX

Junta izquierda: 70 PX
Revestimiento derecho: 70 PX
Box Shadow Continúa agregando una sombra de un cuadro sutil con un color predeterminado diferente y coloca el cursor a la sombra.
Poder de poco claro de la sombra de la caja: 50 px
Color de sombra predeterminado: RGBA (0.0,0,0)


Hover Shadow Color: RGBA (0.0,0,0,15)
La escala de transformar el cursor para una caminata, somos fáciles de tamaño de la columna.
Derecha: 105%
El fondo: 105%

Coloque el índice del cursor Z Complete la configuración de la columna agregando un índice Z.
Índice de Hover Z: 11
Agregue el módulo de texto no. 1 En la columna, agregar un número al cuadro de contenido es hora de agregar módulos, comenzando con un primer módulo de texto. Agregue un número al cuadro de contenido.

Fondo de gradiente Entonces, agregue un fondo de gradiente.
Color 1: # FF5E92

Color 2: # FFD4B6

Dirección de gradiente: 165 grados
Configuración de texto Vaya a la pestaña Diseño del módulo y cambie la configuración de texto de la siguiente manera:
Texto de fuente: Poppins
Color de texto: #ffffff

Tamaño del texto: 26 PX
Alineación de texto: Centro
La dimensión asigna el ancho y la altura aún más. Poco: 150 PX
Altura: 150 PX
Borde agregue un rayo de borde.

Abajo a la izquierda, arriba a la derecha e inferior derecha: 100 PX
El elemento CSS principal Para centrar el texto en nuestro contenedor, necesitaremos agregar algunas líneas de código CSS al elemento principal del módulo de pestaña avanzada. Pantalla: Flex;
Alinine-Ritams: Centro;

Justify-Concursing: Centro;
Posición y completaremos la configuración del módulo reposicionando el módulo.

Posición: Absoluto
Ubicación: superior izquierda
Agregue el módulo de texto no. 2 En la columna Agregar contenido H3, pase al siguiente módulo de texto. Agregue un contenido H3 a su elección.

Configuración de texto H3 Cambie el tamaño del texto H3 del módulo a continuación.
Rúbrica 3 Dimensión de texto: 23 PX
La espartación modifica y se establece la espacios.

Margen superior: 100 PX

Margen inferior: 20 PX
Agregue el módulo Divisor a la visibilidad de la columna El siguiente modo que necesitamos es un módulo divisor. Asegúrese de que se active la opción “Muestra el divisor”.

Divisor del espectáculo: si
Configuración de línea Cambie a la pestaña Diseño del módulo y cambie la configuración de línea de la siguiente manera:
Color de línea: # FF5E92

Estilo de línea: sólido
Posición de línea: arriba

Cambio de dimensión y tamaño del módulo.
Peso del divisor: 2 PX
Ancho: 20%
Agregue el módulo de texto no. 3 En la columna Agregar contenido, pase al módulo de texto siguiente y último. Agregue un contenido a su elección.

Clonar la columna Después de completar la columna y todos sus módulos, puede clonar toda la columna.
Cambie el color predeterminado de la sombra del cuadro Abra la configuración de la columna 2 y cambie el color predeterminado de las sombras.
Shadow Color: RGBA (0.0,0,0.06)

Cambie el módulo de texto n. ° 1 fondo de gradiente Abra el primer módulo de texto en la columna 2 y cambie el fondo de gradiente. 1: # 7E5CE6

Color 2: # 25B8EE

Cambie el borde del módulo de texto no. 1 Modifique la configuración de borde del módulo.
Arriba a la izquierda, abajo a la izquierda y a la derecha: 100 PX

Cambie la posición # 1 del texto y reposicione el módulo en la pestaña avanzada.
LOACTION: Justo arriba
Cambie el color del separador Continuar abriendo la configuración del módulo divisor. Cambie el color de la línea para que coincida con la nueva paleta de colores.

Color de línea: # 7e5ce6
Cambie todo el contenido entre no menos, cambie todo el contenido del módulo en la columna 2.

Clon toda la sección dos veces después de haber completado toda la primera sección, puede clonar dos veces.
Cambie el espacio para la primera sección duplicada Abra la configuración de la primera sección duplicada y cambie los valores de margen en consecuencia:

Margen izquierdo: -5% (escritorio), 0% (tableta y teléfono)
Margen derecho: -5% (escritorio), 0% (tableta y teléfono)

Cambie el segundo espacio de sección duplicado Abra y el segundo duplicado, elimine todos los valores de margen y agregue un borde inferior.

Margen inferior: 100 px

Cambie todo el contenido entre no menos, cambie todo el contenido del módulo.
Guarde la apariencia en la Biblioteca de Divilización para su reutilización Si tiene la intención de usar este cuadro de resumen en otras publicaciones de blog, ¡asegúrese de guardarla en la biblioteca de Divic, para que pueda acceder fácilmente! ¡Eso es todo!
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio

Móvil