El bloque GutenKit Accordion es la solución perfecta para brindarle a su audiencia un fácil acceso a contenido de formato largo. Agrega una sección plegable a su sitio web de WordPress además de brindar funciones para adorar la sección de acordeón tanto en la etapa activa como en la inactiva.

En esta documentación, mostraremos cómo crear secciones de acordeón en el editor Gutenberg predeterminado.

Cómo agregar bloques de acordeón en el sitio web de Gutenberg #

Para iniciar el proceso, debe instalar el complemento GutenKit. Una vez que haya terminado, simplemente siga los pasos a continuación.

Paso 1: agregue el bloque de acordeón GutenKit #

Desde su panel de WordPress, 

• Seguir Páginas > Agregar nueva página o comenzar a editar una página existente.
• Para agregar un nuevo bloque, haga clic en "+”Icono en la parte superior de la pantalla del editor de bloques.
• buscar el Acordeón GutenKit.
• Una vez que aparezca, haga clic en el icono o arrástrelo y suéltelo.

Paso 2: agregar elementos de acordeón #

Abra la configuración del bloque, donde agregará el título, la descripción y el ícono de su acordeón.

Acordeón: #

De forma predeterminada, el bloque de acordeón se carga con tres elementos. Haga clic en cualquier elemento para editar el título y descripción texto. Hay un "Mantenga esta diapositiva abierta”, habilitarla mantendrá este control deslizante o elemento siempre abierto para sus visitantes.

Además, presione el botón "Agregar nuevo”Para agregar un nuevo elemento de acordeón. También puede copiar un elemento ya personalizado haciendo clic en "Clonar artículo”Ícono. Y, si no desea conservar un artículo, simplemente presione el botón "X" botón.

Seleccionar estilo: seleccione el diseño de acordeón que desee entre 5 estilos prefabricados.

Icono: #

• Posición del icono: Defina la posición de su icono entre izquierda y derecha. O puede mostrar íconos en ambos lados.
• Mostrar recuento de bucles: Habilite este botón de alternancia para mostrar el conteo de números con elementos de acordeón. Tenga en cuenta que al seleccionar la opción "Ambos lados" en la configuración anterior, esta configuración desaparecerá.
• Icono Derecha/Izquierda: agregue un ícono indicador para que los visitantes abran el control deslizante del acordeón.
• Icono derecho/izquierdo activo: muestra un icono para el control deslizante de acordeón activo.

*Además de seleccionar de la biblioteca de íconos, también puede cargar un archivo de ícono SVG desde su propio dispositivo.

Paso 3: Aplicar estilo al contenido del texto en acordeón #

Título: #

• Tipografía: utilice esta área de configuración para aplicar todas las opciones de personalización de tipografía, como familia de fuentes, tamaño, peso, estilo, decoración, altura de línea, etc.

A continuación, las siguientes opciones están disponibles para ambos Abierto y Cerrado opciones. Eso significa que puede personalizar el texto del título por separado para las etapas activas e inactivas.

• Color: establece un color para el texto del título.
• Tipo de fondo: elija entre un color sólido y un fondo degradado para el fondo del título.

• Borde: controla el ancho, establece el color y el estilo del borde del título.
• Radio del borde: define la redondez del borde del título.
• Sombra de la caja: utilice estos controles para configurar la sombra del cuadro alrededor del borde del título.
• Relleno: ajusta el relleno del título del elemento del acordeón.
• Margen inferior: use el control deslizante o agregue un valor personalizado para establecer el espacio entre los elementos del acordeón.

Descripción: #

• Color: Elija el color del texto de descripción del artículo de acordeón.
• Tipografía: Aquí encontrará opciones para cambiar la familia de fuentes del texto de descripción, el tamaño, el peso, el estilo, el espaciado y más.
• Tipo de fondo: elija un tipo de fondo entre color sólido y degradado.
• Radio del borde: define la redondez del borde del área de descripción.
• Relleno: Ajusta el espacio interior del área de descripción.

Paso 3: Icono y borde de acordeón personalizados #

Borde: #

De manera similar a la opción de título, también puedes personalizar el borde por separado para ambos. Abierto y Cerrado modos.

• Borde: controla el ancho, establece el color y el estilo del borde del elemento de acordeón.
• Radio del borde: define la redondez del borde del elemento de acordeón.
• Sombra de la caja: utilice estos controles para aplicar efectos de sombra alrededor del borde del elemento del acordeón.
• Deshabilitar borde para los últimos elementos: Habilite este botón de alternancia para deshabilitar el borde del último elemento del acordeón.

Icono: #

Las siguientes configuraciones de estilo de íconos son aplicables para ambos Icono cerrado y Icono Abrir. 

• Tamaño de ícono: define el tamaño de los iconos.
• Color: utilice el selector de color para agregar color al icono.
• Tipo de fondo: seleccione un tipo de fondo entre color sólido y degradado.

• Borde: utilice esta área de configuración para aplicar el color, el estilo y el ancho del borde alrededor del icono.
• Radio del borde: Esta configuración definirá la redondez del borde del icono.
• Relleno: ajusta el relleno del icono.
• Margen: ajusta el margen alrededor del icono.

Paso 4: Configuración avanzada #

Desde la pestaña Configuración avanzada, puede configurar el diseño del bloque de acordeón, el fondo, los estilos de borde y controlar su visibilidad.

Disposición: #

• Margen: define el espacio alrededor del diseño del bloque. Ayuda a establecer un espacio entre otro bloque.
• Relleno: ingrese un valor para establecer el espacio alrededor del bloque dentro de su diseño.
• Ancho: Además de mantener el ancho de diseño predeterminado.
  • Ancho completo: Al seleccionar esto, el diseño abarcará todo el ancho de la pantalla.
  • En línea (automático): Al aplicarlo tendrá el mismo ancho que el elemento del bloque.
  • Costumbre: Al elegir esta opción, se mostrará un control deslizante para definir el espacio horizontal del diseño del bloque.
• Índice Z: utilice el control deslizante para especificar el orden de pila del bloque con otros bloques.

Posición: #

Debajo del menú desplegable, verá tres opciones: Por defecto, Absoluto, y Fijado. 

• Absoluto: Al seleccionar esta opción, obtendrá una posición absoluta del bloque, lo que significa que los elementos encajarán en su contenedor.
• Fijado: La opción Posición fija permitirá que el elemento encaje en toda la ventana gráfica o pantalla.

Tanto la opción Absoluta como la Fija tienen configuraciones similares a las siguientes:

• Orientación horizontal: Elija la dirección de posicionamiento entre izquierda y derecha.
• Compensar: Utilice el control deslizante o introduzca un valor manualmente para ajustar la posición horizontal del bloque.
• Orientación vertical: Seleccione la dirección de posicionamiento entre arriba o abajo.
• Compensar: Utilice el control deslizante o introduzca un valor manualmente para ajustar la posición vertical del bloque. 

Fondo: #

• Fondo: elija una opción de fondo entre color sólido, degradado o imagen.

En la opción Pasar el cursor:

• Imagen: Si elige la opción de imagen, se abrirán las siguientes opciones:
  • Imagen: elija una imagen de la biblioteca multimedia o cargue la suya propia.
  • Tamaño de la imagene: Seleccione el tamaño de la imagen entre Miniatura, Mediano, Grande o Completo.

• Posición: Selecciona la posición de las 10 opciones diferentes.
• Adjunto: Especifique la relación de la imagen de fondo fija o de desplazamiento con el resto de la pantalla del navegador.
• Repetir: seleccione una opción para configurar cómo se repiten las imágenes de fondo.
• tamaño de la pantalla: seleccione un tamaño de visualización entre cuatro opciones diferentes.

• Duración de la transición: utilice el control deslizante para ajustar la transición del fondo de Normal al estado de desplazamiento.

Borde: #

• Borde: En esta opción de configuración, obtendrá opciones de configuración de bordes como ancho, estilo y color.
• Radio del borde: establezca la redondez del borde ingresando un valor.
• Sombra de la caja: Obtenga todas las configuraciones como color, horizontal/vertical, desenfoque, extensión y más para darle efectos de sombra al borde. 

En la opción de desplazamiento:

• Duración de la transición: Puede agregar un valor manualmente o usar el control deslizante para establecer el tiempo para cambiar el diseño del borde en el estado de desplazamiento.

Visibilidad: #

El módulo de visibilidad le permite controlar la visualización de diseños de bloques según el tipo de dispositivo. Habrá tres opciones de dispositivo (escritorio, tableta, móvil) con un botón de alternancia. Active el botón de alternancia para ocultar el diseño de bloque de ese dispositivo.

Sin embargo, aún puedes verlo en la vista del editor.

Avanzado: #

• Nombre del bloque: proporcione un nombre para identificar este bloque de forma única mientras lo vincula o crea una secuencia de comandos para darle estilo al bloque.
• Ancla HTML: agregue una URL para vincular una página de sitio web.

• Clases CSS adicionales: Asigne clases CSS adicionales al bloque, lo que le permitirá diseñar el bloque como desee con CSS personalizado. 

NÓTESE BIEN: Puede agregar varias clases por separado con espacios.

Eso es todo. Esperamos que esta guía le haya ayudado a aprender cómo agregar un diseño de acordeón a un sitio web de WordPress.