Documentación Advanced Gutenberg

I. INSTALACIÓN ADVANCED GUTENBERG

1.1 Instalar

Para instalar nuestro complemento, debe usar el instalador estándar de WordPress, o descomprimir y poner todo en la carpeta en / wp-content / plugin.

 

instalar-wp-media-folder


Luego haga clic en activar plugin, para ver el menú Advanced Gutenberg aparecer en el menú de la izquierda de WordPress.

Se puede acceder a Advanced Gutenberg desde el menú de Gutenberg. También tiene los parámetros en el menú "Configuración".

1.2 Actualizar el plugin

Para actualizar Advanced Gutenberg, puede usar el actualizador predeterminado de WordPress. También puede eliminar e instalar la nueva versión de un archivo .zip descargado desde www.joomunited.com. En cualquier caso, no perderá ningún contenido porque todo está almacenado en la base de datos.

 

actualizar-gutenberg

 

Asegúrese de tener siempre la última versión para evitar problemas de seguridad y estabilidad.

II. Funciones comunes

2.1. Lista de bloqueos

Al utilizar nuestro complemento, puede crear varios perfiles y seleccionar qué bloques en el Lista de bloques Estará disponible para cada perfil.

Para configurar su propio perfil puede utilizar el "Perfil de atribución" pestaña en el “Advanced Gutenberg” menú. Elija uno de los perfiles y verá la configuración del perfil.

 

perfiles de usuario-editor

 

Puedes habilitar / deshabilitar bloques en Gutenberg haciendo clic en ellos. Cuando haya terminado, presione el botón Actualizar lista para actualizar los nuevos íconos de bloque.

 

lista de bloqueos

 

blocks-list-2

 

Una vez guardados, los bloques estarán disponibles en su editor.

 

bloque usado

 

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: Hay 4 estilos predefinidos: Predeterminado, Contorneado, Cuadrado y Contorno cuadrado

    • Estilo predeterminado: seleccione su estilo predeterminado

  • 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:

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

    • Color del borde

    • Ancho del borde

 

adv-button-border

 

  • 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

 

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

 

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

 

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

 

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

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

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

  • Alineación del texto: alineación vertical (arriba, centro, abajo), alineación horizontal (izquierda, centro, derecha)

 

Configuraciones avanzadas de imagen

 

Bloque de testimonios

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 para el Testimonio.

  • Vista deslizante: Encendido apagado

  • 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

 

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 de la derecha, puede insertar una ubicación ingresando la latitud y la longitud, o ingresando una dirección y luego presionando el botón Fetch Location

Algunas opciones adicionales para el mapa están disponibles:

  • Nivel de zoom

  • Altura

  • Icono de marcador

  • Título de marcador

  • Descripción del marcador

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

 

configuración del mapa

 

Bloque 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

 

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.

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

 

Bloque de pestañas

Del mismo modo, puede crear un Lengüeta Bloque cuando necesite visualizar más contenido en un área más pequeña. Para insertar uno, haga clic en Lengüeta 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.

  • Colores de pestaña

    • Color de fondo

    • Color de texto

    • Color de fondo de la pestaña activa, color de texto

 

configuración de pestañas

 

  • Colores del cuerpo

    • Color de fondo

    • Color de texto

  • Ajustes de borde

    • Estilo: sólido, punteado o punteado

    • Color

    • Ancho del borde, radio

 

tab-settings1

 

Bloque de enlaces sociales

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

 

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

 

Bloque de Productos Woo

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

 

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

 

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

 

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

 

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áxima del contenido (px, vw, vh)

 

column-settings-2

 

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

 

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

 

2.2. Configuración

Para usar la función lightbox y subtítulos para las imágenes, debe habilitar la Abrir galerías en lightbox y Captura de imagen opciones respectivamente en Pestaña de configuración de Advanced Gutenberg en la configuración.

 

adv-gutenberg-settings

 

  • Abrir galerías en lightbox: Abrir imágenes de la galería como una ventana emergente de estilo lightbox

  • Captura de imagen: Atributo de carga de imágenes (alt) como título para imágenes de lightbox

  • Eliminar Autop: Elimine la función de WordPress autop, utilizada para evitar que se agreguen párrafos no deseados en algunos bloques

  • Clave API de Google: esta clave API es requerida para usar el Bloque de Mapa

Configuraciones de bloques

  • Habilitar el espaciado de bloques: Aplique un espaciado de bloque vertical mínimo de forma automática: el valor predeterminado es ninguno, y los valores deben darse en píxeles

  • Color del icono de bloques: Establecer color para los íconos de bloques en admin, solo se aplica a bloques Advanced Gutenberg

  • Ancho del editor: Definir el tamaño del editor de Gutenberg del administrador.

  • Miniatura predeterminada: Establecer la miniatura de publicación predeterminada para usar en los bloques de Publicaciones recientes

  • Habilitar columnas de guía visual: Habilitar borde para materializar Adv. Bloque de columnas de Gutenberg

Usted además puede encontrar Adv. Ajustes de Gutenberg en la esquina superior derecha de su Editor, junto a la Ajustes icono.

 

editor-adv-gutenberg-settings

 

2.3 Configuración de bloques por defecto

 

Para ajustar los bloques en Advanced Gutenberg, puedes ir al menú Advanced Gutenberg> Configuración> Configuración predeterminada de la pestaña Bloques.

 

default-blocks-config

 

Para cada bloque, puede editar su configuración predeterminada haciendo clic en el botón adyacente Ajustes icono.

 

bloques de edición

 

2.4 Correo electrónico y formulario

Ajustes del correo electrónico

Puede configurar la información del remitente y el destinatario de Formulario de contacto bloquear:

 

Ajustes del correo electrónico

 

Forma ReCaptcha

Primero, debes registrar reCaptcha en tu sitio. aquí, luego haga clic en Consola de admin Botón para ingresar la información.

Después de eso, complete el sitio reCAPTCHA y la clave secreta reCAPTCHA. Recuerda habilitar la opción reCAPTCHA. También puede seleccionar el Idioma y el Tema para reCAPTCHA.

 

forma-recaptcha

 

Datos de formularios

Desde aquí puedes descargar Formulario de contacto y Formulario de boletín datos. Puede exportar un archivo .CSV o .JSON.

 

datos de formulario

 

2.5 estilos personalizados

los Advanced Gutenberg la configuración también le permite definir fragmentos de código CSS personalizados que se pueden usar en su editor y las opciones de etiquetas HTML. Para usar estilos personalizados, navegue a la Estilos personalizados página de Advanced GutenbergEl menú de la izquierda.

Para crear un nuevo estilo, haga clic en "Añadir nueva clase" Botón en la parte inferior de la lista de estilos. Puede editar su CSS directamente en el campo CSS personalizado.

 

estilos personalizados-gutenberg

 

Todos los cambios que realice se mostrarán en la parte izquierda de la página. Se aplicarán a la cadena con "Texto de ejemplo". El texto arriba y debajo de la cadena muestra cómo se verán sus estilos entre el resto de los elementos. Después de editar su estilo personalizado, guárdelo usando el “Guardar estilos” botón.


Para aplicar un estilo al elemento en el editor, debe seleccionar el elemento y elegir un estilo de la lista desplegable llamada “Estilos personalizados”. Para volver al estilo predeterminado y eliminar todos los estilos personalizados, elija "Párrafo" opción.

 

bloque de estilo css personalizado