Advanced Gutenberg: Configuración de bloques

1. Bloqueo avanzado de botones

Puedes crear un Botón avanzado Haciendo clic en su botón en la sección Advanced Gutenberg.

 

botón avanzado

 

En el panel de la derecha, puede ajustar algunas configuraciones para el botón:

  • Estilos: 4 estilos predefinidos

    • Defecto

    • Contorneado

    • Cuadrado

    • Esquema Cuadrado

  • Enlace del botón:

    • URL del enlace

    • Abrir en una pestaña nueva: activar / desactivar.

 

adv-button-settings

 

  • Color de texto:

    • Tamano del texto

    • Color de fondo

    • Color de texto

 

ajustes de botón de color de texto

 

  • Frontera:

    • Radio de la frontera

    • Estilo de borde: sólido, punteado, cresta, ...

    • Color del borde

    • Ancho del borde

 

adv-button-border

 

  • Margen: Arriba, derecha, abajo e izquierda.

  • Relleno: Arriba, derecha, abajo e izquierda.

 

acolchado avanzado de botones

 

  • Flotar:

    • Configuración de color: color de fondo, color de texto y color de sombra.

    • Shadow (H (horizontal) offset, V (vertical) offset, blur, spread), Opacity and Transition speed.

 

Avanzado-botón-hover

 

2. Bloqueo de lista avanzada

Puedes crear un Lista avanzada Haciendo clic en su botón en la categoría Advanced Gutenberg.

 

lista avanzada

 

Después de ingresar el contenido, puede ajustar la configuración desde el panel derecho:

  • Ajustes de texto

    • Tamano del texto

  • Configuración de iconos

    • Icono (lista, color y tamaño)

    • Altura de la línea

    • Margen

    • Relleno

 

configuración de lista avanzada

 

3. Bloque de resumen

Puedes crear un Resumen bloque haciendo clic en su botón en la categoría Advanced Gutenberg después de configurar al menos una etiqueta de encabezado en la publicación o página. El resumen se puede alinear a la izquierda, centro o derecha. Para actualizarlo, use el botón Actualizar resumen.

 

resumen-gutenberg-contenido

 

En el panel derecho, hay algunas opciones que puede ajustar:

  • Carga minimizada: para mostrar / ocultar el resumen por defecto

  • Título del encabezado de resumen: el texto del encabezado del resumen, que se muestra cuando el Carga minimizada opción está habilitada

  • Color de anclaje: elige un color para el resumen

 

ajustes de resumen

 

4. Bloque de contador (cuenta atrás)

 

Puedes crear un Contar hasta bloque, posiblemente con un símbolo, haciendo clic en su botón en la categoría Advanced Gutenberg.

 

contar hasta

 

Luego, desde el panel derecho puede ajustar algunas opciones para el contador:

  • Configuraciones de color: Color de encabezado, color de Count Up y color de descripción

  • Columnas: 1-3

  • Tamaño del contador: establecer el tamaño de los números

  • Counter Up Symbol: Añadir un carácter antes o después del contador.

  • Botón de activación: establecer la posición del símbolo (On ​​significa que el símbolo aparece después de los números)

 

configuración de conteo

 

5. Bloque de imagen avanzado

los Imagen avanzada Se puede utilizar el bloque para crear una imagen. Para agregar uno, haga clic en el Imagen avanzada en la categoría Advanced Gutenberg, y luego elija una imagen para insertar.

 

botón de imagen avanzada

 

A continuación, puede cambiar el título de la imagen y su subtítulo. Puede ajustar la configuración de la imagen desde el panel derecho.

  • Acción al hacer clic: abra la imagen en una caja de luz o abra una URL personalizada

  • URL del enlace: Abrir enlace en una nueva pestaña (botón de alternar)

  • Abrir enlace en una nueva pestaña: Encendido apagado

  • Tamaño de la imagen: si la imagen debe mostrarse con ancho completo o con un alto y ancho personalizados

 

Configuraciones avanzadas de imagen

 

  • Selector de punto focal: seleccione el punto para enfocar la imagen o establezca la posición horizontal / vertical

  • Opacidad de superposición predeterminada

  • Superposición de opacidad

  • Configuraciones de color: Color del título, color del subtítulo, color de la superposición

  • Alineación del texto: Alineación vertical (superior, central, inferior), alineación horizontal (izquierda, centro, derecha)

 

adv-image-hover

 

6. Bloque testimonial

Puede insertar un testimonio en su contenido haciendo clic en el Testimonial Botón en la categoría Advanced Gutenberg. Luego, puede cambiar el avatar, el nombre, el puesto de trabajo y la descripción del testimonio.

 

botón de testimonio

 

Finalmente, en el panel derecho, puede ajustar la configuración del Testimonio. Cuando la opción Vista deslizante está desactivada, aquí está la configuración:

  • Columnas: El rango de columnas en la vista Normal es 1-3, y en la vista Slider es 4-10.

  • Avatar: Configuraciones de tamaño, color de fondo y borde de Avatar, que incluyen color, radio y ancho

  • Colores del texto:

    • Nombre Color

    • Color de posición

    • Descripción Color

 

configuración de testimonios

 

Cuando habilitas Vista deslizante opción, aparecerán algunas opciones adicionales para el control deslizante:

  • Número de items
  • Artículos para mostrar
  • Artículos para desplazarse

deslizador-vista-columna

  • Modo central
  • Pausa al pasar el mouse
  • Auto-reproducción
  • Velocidad de reproducción automática (ms)
  • Bucle infinito
  • Velocidad de transición (ms)
  • Mostrar puntos
  • Mostrar flechas
  • Tamaño de la flecha

 

ajustes de control deslizante

  • Colores del control deslizante:
    • Color de flecha y borde
    • Color de puntos

 

color deslizante

 

7. Bloque de mapa

Para utilizar el Mapa bloque, debe agregar una clave de API de Google en la configuración. Después de eso, debes seguir esto. enlazar, haga clic en Habilitar APIs y Servicios , luego busque y habilite la API de geolocalización, API de JavaScript de Google Maps.

Una vez agregado, puede crear el mapa haciendo clic en el Mapa Botón en la categoría Advanced Gutenberg.

 

bloque de mapa

 

Desde el panel derecho, puede insertar una ubicación ingresando la latitud y longitud, o ingresando una dirección y luego presionando el botón Obtener ubicación.

Algunas opciones adicionales para el mapa están disponibles:

  • Nivel de zoom

  • Altura

  • Icono de marcador

  • Título de marcador

  • Descripción del marcador

  • Abrir información sobre herramientas de marcador

  • Estilos de mapa: plateado, retro, noche, ... y puede agregar su estilo personalizado también.

 

configuración del mapa

 

8. Bloqueo de video avanzado

Puede crear un video para una publicación haciendo clic en el Video avanzado Botón en la sección Advanced Gutenberg. Luego, puede pegar la URL de Youtube o Vimeo, o usar cualquier video local de su servidor. Puede cambiar la imagen de vista previa haciendo clic en el botón Editar en la esquina superior izquierda.

 

video avanzado

 

A continuación, puede ajustar la configuración del video en el panel derecho.

  • Abrir video en caja de luz: La caja de luz ofrece opciones de visualización adicionales

  • Ancho completo Si está apagado, necesitas configurar un ancho personalizado para el video.

  • Altura del video

  • Configuraciones de color: Color de superposición y color del botón Reproducir

  • Botón de play: Estilo de icono, tamaño del botón Reproducir

 

Configuraciones avanzadas de video

 

9. Bloque de tabla avanzado

Puede crear una tabla haciendo clic en el Tabla avanzada Botón en la categoría Advanced Gutenberg.

 

botón de mesa avanzado

 

Puede editar la tabla después de configurar el número de columnas y filas.

 

tabla avanzada

 

Después de eso, puede ingresar texto o ajustar filas y columnas desde el editor justo arriba del bloque de la tabla. Se pueden modificar más configuraciones en el panel derecho.

  • Estilos

    • Defecto

    • Rayas

 

mesa de estilo

 

  • Ajustes de tabla

    • Anchura máxima: Ajústelo a 0 para hacer un ancho máximo equivalente a 100%

    • Ancho fijo de celdas de tabla

    • Encabezado de tabla, pie de página

    • Frontera colapsada

 

advanced-table-settings1

 

  • Ajustes de Celda

    • Configuraciones de color: Color de fondo, color de texto

    • Frontera: Estilo de borde, color y ancho.

    • Relleno: Acolchado superior, inferior, izquierdo y derecho.

    • Alineación del texto: alineación horizontal y vertical

 

configuración de células individuales

 

Incluso puede combinar celdas (usando el botón Shift) y dividir celdas combinadas con el Tabla avanzada bloquear.

10. Bloque de acordeón avanzado

Puedes crear un Acordeón avanzado cuando necesite visualizar más contenido en un área más pequeña haciendo clic en el botón Avanzado Acordeón botón en la categoría Advanced Gutenberg. Después de eso, habrá 2 elementos de acordeones grupales que se mostrarán de forma predeterminada.

 

bloque de acordeón adv

 

Una vez creado, puede ajustar las opciones de encabezado, cuerpo o borde desde el panel derecho.

  • Ajustes de acordeón:

    • Espaciado inferior: Definir espacio entre cada acordeón (solo vista Frontend)

    • Inicial colapsado: Hacer que todos los acordeones se colapsen por defecto.

  • Configuraciones de encabezado

    • Estilo de icono de encabezado

    • Configuraciones de color: Color de fondo, color de texto y color de icono

 

adv-accordion-header

 

  • Ajustes de color del cuerpo

    • Color de fondo

    • Color de texto

  • Ajustes de borde

    • Estilo de borde: sólido, discontinuo o punteado

    • Configuraciones de color

    • Ancho del borde, radio

 

ajustes de acordeón adv

 

11. Bloque de pestañas avanzado

Del mismo modo, puede crear un Avanzado Lengüeta Bloque cuando necesite visualizar más contenido en un área más pequeña. Para insertar uno, haga clic en Lengüeta avanzada Botón en la categoría Advanced Gutenberg.

 

bloque de pestañas

 

Luego, puede ajustar las opciones de pestaña, cuerpo o borde desde el panel derecho.

  • Estilo de pestañas
    • Computadora de escritorio, tableta o móvil
    • Horizontal o vertical
  • Configuración de pestañas
    • Pestaña de apertura inicial

 

adv-tab-settings

 

  • Colores de pestaña

    • Color de fondo

    • Color de texto

    • Color de fondo de la pestaña activa

    • Color de texto de la pestaña activa

 

configuración de pestañas

 

  • Colores del cuerpo

    • Color de fondo

    • Color de texto

  • Ajustes de borde

    • Estilo: ninguno, sólido, punteado o punteado

    • Color

    • Ancho del borde, radio

 

tab-settings1

 

Usted puede comparte tus enlaces sociales muy fácilmente usando el vínculos sociales bloque, que se puede crear haciendo clic en su botón en la categoría Advanced Gutenberg.

 

vínculos sociales

 

Puede usar el ícono ya creado o cargar su propio ícono, y ajustar algunas opciones más desde el panel derecho.

  • Iconos preestablecidos: puedes subir tu icono personalizado

  • Color de icono predefinido

  • Configuracion de iconos

    • Tamaño del icono, espacio

 

configuración de enlaces sociales

 

13. Bloque de publicaciones recientes

Hay 3 diseños disponibles para mostrar tus publicaciones recientes: las vistas de cuadrícula, lista y control deslizante. Puede crear cualquiera de estas vistas haciendo clic en Mensajes recientes Botón en la categoría Advanced Gutenberg.

 

bloque de mensajes recientes

 

Puede ver cómo se mostrarán los bloques en el frontend en la imagen de arriba o en nuestra Demostración de Advanced Gutenberg.

Desde el panel derecho, puede ajustar la configuración de cada diseño:

  • Ordenar por

orden por

 

  • Categoría

  • Número de items

  • Columnas (solo para la vista de cuadrícula)

  • Mostrar imagen destacada

  • Display Post Author

  • Mostrar fecha de publicación

  • Mostrar Leer más enlace

  • Leer más texto

  • Mostrar extracto del post

  • Primer texto de la publicación como extracto: muestra una parte del primer texto encontrado en la publicación como extracto.

 

Configuración de publicaciones recientes

 

14. Woo Products Block

Hay 2 diseños disponibles para el Productos woo bloque: las vistas Normal y Diapositiva pueden mostrar productos WooCommerce en su blog de WordPress. Puede insertar este bloque haciendo clic en el Productos woo Botón en la categoría Advanced Gutenberg.

 

woo-block

 

Puede ver cómo se mostrarán los bloques en el frontend en la imagen de arriba o en nuestra Demostración de Advanced Gutenberg

En el panel derecho, puede ajustar la configuración de cada diseño:

  • Configuracion de productos

    • Estado del producto

    • Categoría

  • opciones de diseño

    • Columnas

    • Número de productos

    • Orden

 

woo-settings

 

15. Bloque deslizante de imágenes

Si desea mostrar una serie de imágenes como una diapositiva, haga clic para Imágenes Slider Botón en la categoría Advanced Gutenberg.

 

nueva imagen deslizable

 

Entonces presionando Añadir imágenes Botón para elegir tus imágenes mostradas en la diapositiva. Después de eso puedes ingresar el texto. Título y texto Descripción de cada imagen.

 

deslizador de imagen

 

Puede editar la configuración del control deslizante en el panel derecho.

Ajustes de imagen

  • Acción al hacer clic: Ninguno, Abrir imagen en lightbox y Abrir enlace personalizado

  • Ancho completo

  • Altura automática

  • Mostrar siempre superposición

Configuraciones de color

  • Color de libración

  • Título de color

  • Color de texto

 

slide-settings-1

 

Alineación del texto

  • Alineamiento vertical

    • Parte superior

    • Centrar

    • Fondo

  • Alineación horizontal

    • Izquierda

    • Centrar

    • Derecha

slide-settings-2

 

16. Bloque de formulario de contacto

Puede obtener una notificación de contacto por correo electrónico del cliente con este bloque. Puedes crear esa forma haciendo clic en Formulario de contacto Botón en la categoría Advanced Gutenberg.

 

Formulario de contacto

 

Puede editar la configuración de la Formulario de contacto en el panel derecho.

  • Darse cuenta: No aparecerá si habilita la opción reCAPTCHA en Configuración.

  • Remitente de correo electrónico: Puedes cambiar en Ajustes. Se enviará un correo electrónico al correo electrónico del administrador (de manera predeterminada) cada vez que se envíe un formulario de contacto.

  • Etiqueta de texto:

    • Nombre de entrada de marcador de posición

    • Entrada de correo electrónico marcador de posición

    • Marcador de posición de entrada de mensaje

    • Enviar texto

    • Texto de advertencia de campo vacío

    • Enviar texto de éxito

 

contact-settings1

 

  • Color de entrada: Color de fondo y color de texto

  • Configuración de borde: Color del borde, estilo del borde y radio del borde

  • Enviar configuración del botón:

    • Configuraciones de color: Borde y texto, fondo

    • Radio del borde del botón

    • Posición del botón: Izquierda, Centro y Derecha

contact-settings2

 

17. Bloque de boletines

Para obtener el correo electrónico del cliente, puede crear el bloqueo de correo electrónico haciendo clic en Hoja informativa Botón en la categoría Advanced Gutenberg.

 

hoja informativa

 

Puede editar la configuración del boletín en el panel derecho.

  • Darse cuenta: No aparecerá si habilita la opción reCAPTCHA en Configuración.

  • Configuración de formulario:

    • Estilo de formulario: Predeterminado / Alternativo

    • Ancho de la forma (px)

  • Etiqueta de texto:

    • Entrada de correo electrónico marcador de posición

    • Enviar texto

    • Texto de advertencia de campo vacío

    • Enviar texto de éxito

 

newsletter-settings1

 

  • Color de entrada: Color de fondo y color de texto

  • Configuración de borde: Color del borde, estilo del borde y radio del borde

  • Enviar configuración del botón:

    • Configuraciones de color: Borde y texto, fondo

    • Radio del borde del botón

 

newsletter-settings2

 

18. Bloque de administrador de columnas

Si desea crear un bloque que contenga otros bloques dentro, debe elegir Gestor de columnas en la categoría Advanced Gutenberg. Aparecerá el estilo del bloque al crear uno nuevo.

 

añadir-columna-administrador-bloque

 

Luego puede agregar cualquier tipo de bloque que desee en cada columna. Aquí hay un bloque de administrador de columnas que incluye 2 columnas: la izquierda es Imagen avanzada y la derecha son Párrafo, Lista avanzada.

 

columna-administrador-bloque

 

Y en el panel derecho, puede ajustar la configuración del bloque Administrador de columnas.

  • Ajustes de respuesta

    • Estilo para cada tipo de dispositivo: Escritorio, Tableta, Móvil

    • Espacio entre columnas

    • Relleno: superior, derecho, izquierdo e inferior

    • Margen: superior, derecho, izquierdo e inferior

 

column-settings-1

 

 

  • Ajustes de fila

    • Columnas envueltas: si sus columnas están sobrepasadas, se separarán en una nueva línea (por ejemplo: Use esto con el espaciado de columnas).

    • Etiqueta de la envoltura: Div, Encabezado, Principal, ...

    • Ancho Máximo de Contenido (px vw,%)

    • Altura mínima de contenido (px, vw, vh)

    • Altura máxima del contenido (px, vw, vh)

 

column-settings-2

 

19. Bloqueo de formulario de inicio de sesión / registro

Puede crear un formulario de inicio de sesión o un formulario de registro para su sitio web haciendo click Formulario de inicio de sesión / registro botón en la sección Advanced Gutenberg.

 

login-form-block

 

Y puede cambiar la vista de Iniciar sesión a Registrarse en la barra de navegación de este bloque o en el panel derecho.

 

formulario de inicio de sesión

 

Y luego puede ir al panel derecho para ajustar más detalles sobre el formulario.

  • Forma inicial: Iniciar sesión o Registrarse

  • Redireccionar después de iniciar sesión: Hogar, Tablero o Personalizado

  • Ancho de formulario (px)

  • Mostrar logotipo

  • Ancho del logo (px)

  • Mostrar icono de campo de entrada

  • Mostrar enlace de registro / encabezado

  • Color del encabezado

  • Mostrar enlace de contraseña perdida

 

forma-estado-ajustes

 

  • Marcador de posición de entrada

    • Marcador de posición de entrada de inicio de sesión

    • Marcador de posición de entrada de nombre de usuario

    • Entrada de correo electrónico marcador de posición

  • Color de texto / entrada

    • Color de fondo de entrada

    • Color de entrada

    • Color de texto

  • Ajustes de borde

    • Color del borde

    • Estilo de borde

    • Ancho del borde

 

input-placeholder-settings

 

  • Configuración del botón Enviar

    • Borde y texto

    • Fondo

    • Radio del borde del botón

    • Posición del botón

  • Enviar botón de desplazamiento

    • Colores de desplazamiento: Color de fondo, texto y sombra

    • Sombra: Opacidad, velocidad de transición y sombra (desplazamiento H (horizontal), desplazamiento V (vertical), desenfoque, propagación)

  • Darse cuenta: Recomendamos encarecidamente habilitar Google reCaptcha para evitar el spam bot. Puede habilitarlo en Form Recaptcha en Adv. Gutenberg> Correo electrónico y formulario .

 

configuración de botón de envío

 

20. Bloque de barra de búsqueda

Puede crear un cuadro de texto de búsqueda en la interfaz haciendo clic en el Barra de búsqueda Botón en la categoría Advanced Gutenberg.

 

barra de búsqueda

 

Puede ajustar la configuración de la barra de búsqueda en el panel derecho.

  • Estilos: Hay 2 estilos predefinidos: Predeterminado y Clásico

  • Estado de barra de búsqueda

    • Ancho completo: encendido / apagado

    • Anchura

  • Buscar configuración de iconos

    • Icono de búsqueda a la derecha: encendido / apagado

    • Icono de búsqueda

 

configuración de la barra de búsqueda

 

  • Buscar configuración de entrada

    • Buscar marcador de posición

    • Color de entrada: color de fondo y texto

 

configuración de entrada de búsqueda

 

  • Configuración del botón de búsqueda

    • Mostrar botón de envío: activar / desactivar

    • Botón de búsqueda a la izquierda: encendido / apagado

    • Color de fondo y texto

    • Radio de la frontera

  • Colores de desplazamiento: Color de fondo, texto y sombra

  • Sombra flotante: Opacidad, velocidad de transición y sombra (desplazamiento H (horizontal), desplazamiento V (vertical), desenfoque, propagación)

 

configuración del botón de búsqueda