5 formas creativas de utilizar los widgets de acordeón: cómo incrustar gráficos, imágenes y mucho más en Elementor

Los desarrolladores web suelen utilizar "Widget de acordeón" (acordeón) para organizar el contenido. El widget de acordeón puede mostrar y ocultar contenido en forma de capas, una caja colapsada, dando así a la página un aspecto más limpio y mejorando la experiencia de interacción del usuario. Un widget de acordeón conelemento anidado(utilizado como expresión nominal)Acordeón En su lugar, proporciona al usuario una mayor flexibilidad, permitiendo dentro de cada secciónAnidamiento de otros elementos de diseño como imágenes, botones, vídeosetc.

5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容

Paso 1: Añadir el widget acordeón

  1. Abre el editor de ElementorEn su WordPress página webtal veztarjetaAbra el editor de páginas de Elementor.
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
  1. Añadir widget de acordeón: enBarra de widgets izquierdaBuscar en "Acordeón"Widget". Una vez encontrado, arrástrelo al área de diseño de la página.
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容

Paso 2: Configurar el elemento acordeón

  1. Crear un elemento acordeón: Por defecto, el widget acordeón de Elementor contendrá 3 elementos iniciales. Para ello, haga clic en el botón "adenda" para añadir más elementos, o pulse el botón "X"Eliminar elementos no deseados.
  2. Editar los títulos y el contenido de los elementos del acordeón: Cada elemento del acordeón contiene "leyenda"y"elemento(por ejemplo, ID CSS, Icono, etc.)". Si hace clic en la sección del título de cada elemento, podrá editar el texto, por ejemplo para cambiar el título a "Presentación gráfica" o "Presentación de vídeo", etc., de modo que el usuario pueda comprender fácilmente el contenido de cada elemento.
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容

Incrustar contenido creativo en los elementos del acordeón

1. Incrustación de gráficos en elementos de acordeón

Los gráficos visualizan los datos y son adecuados para colocarlos en elementos de acordeón para una presentación detallada.

mover::

  1. Haga clic en el área de contenido del elemento del acordeón.
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
  1. Añádale un widget "HTML" o "shortcode".
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
  1. Pegue el código de su gráfico, por ejemplo Gráficos de Google tal vez Gráfico.js del código generado. Ajuste los estilos y tamaños para asegurarse de que los gráficos se ajustan al contenido del acordeón.
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容

Así, hemos terminado de añadir iconos para la primera parte.

2. Galería de imágenes incrustada en el acordeón

Las galerías de imágenes son especialmente adecuadas para las presentaciones de productos o los estudios de casos prácticos para ofrecer a los usuarios una experiencia más visual.

mover::

  1. Arrastrar y soltar en el área de contenido del elemento acordeón "Galería de imágenes"Widgets".
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
  1. Cargue las imágenes que desea mostrar y establezca el diseño de la galería (por ejemplo, cuadrícula, alineación, cascada), desea efecto de rotaciónEntonces deberá utilizar el Widget "Carrusel de imágenes" de Elementor.
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
  1. Cambie el tamaño y alinee las imágenes para que la galería tenga un aspecto limpio y ordenado cuando el acordeón esté abierto.

3. Incrustación de contenidos de vídeo

Los vídeos incrustados permiten a los usuarios visualizar la información de forma más intuitiva y son adecuados para demostraciones de productos y tutoriales.

mover::

  1. En el área de contenido del elemento acordeón añada "vídeo"Widgets".
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
  1. Pegue el enlace a su vídeo (por ejemplo YouTube tal vez Vimeo).
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
  1. Establezca las opciones de reproducción de los vídeos, como la reproducción automática o el silencio, y cambie el tamaño de los vídeos en función del estilo de la página.
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容

4. Añadir botones para guiar al usuario

Añadir botones a un acordeón ayuda a guiar al usuario hacia acciones posteriores, tales comoIr a la página detallada o al formulario.

mover::

  1. Arrastrar y soltar en el área de contenido del elemento acordeón "botones"Widgets".
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
  1. Introduzca el texto del botón, por ejemplo "Más información"o"Contacto".
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
  1. Establezca el enlace del botón y personalice el color y el tamaño del botón en las opciones de estilo.
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容

5. Incrustación de formularios de contacto para mejorar la interacción

Añadir un formulario de contacto al elemento acordeón permite a los usuarios interactuar sin salir de la página.

mover::

  1. utilizar WPForms tal vez Formulario de contacto 7 y otros plugins para crear formularios de contacto.
  2. Copie el código corto generado por el formulario en el portapapeles.
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
  1. En el área de contenido del elemento acordeón arrastre "código corto" para pegar el shortcode del formulario. Ajuste el estilo para que el formulario sea coherente con el estilo de diseño de la página.
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容

Estilos de acordeón personalizados

Una vez que haya terminado de incrustar el contenido, puede personalizar aún más el estilo del acordeón en Element para hacerlo más acorde con el estilo general de la página.

  1. Ampliar la configuración de estilo: a la izquierda del "tipo", puede ajustar el color, la fuente y el color de fondo del título del acordeón.
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
  1. Ajustar el icono del acordeón: en "elemento"Encuentre".icono (informática)", puede personalizar el estilo de los iconos expandidos y contraídos.
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容
  1. Optimizar el espaciado y la animación: en"Avanzado"La configuración le permite ajustar el espaciado del acordeón, los bordes y los efectos de animación de la transición para garantizar una experiencia de usuario fluida.
5种使用手风琴小部件的创意方法:如何在 Elementor 中嵌入图表、图像和更多内容

Resumen:

Los widgets de acordeón son una herramienta de presentación de contenidos muy utilizada en el desarrollo web para hacer que el diseño de la página sea más conciso y mejorar la experiencia del usuario al contraer y expandir el contenido. Añadir widgets de acordeón con Elementor es muy sencillo y los desarrolladores pueden incrustar gráficos, imágenes, vídeos, botones, formularios de contacto y mucho más para hacer que cada elemento del acordeón sea más vivo e interactivo. Gracias a los estilos personalizados, los desarrolladores también pueden ajustar el aspecto y las animaciones del acordeón para adaptarlos a las necesidades de la página, creando una visualización de contenidos bonita y funcional.

A continuación se enumeran los problemas y soluciones más comunes al utilizar el widget Acordeón (Accordion):

  1. Los artículos en acordeón no pueden desplegarse ni guardarse
    • razonamiento: Normalmente causado por conflictos de JavaScript u otras interferencias de plugins.
    • cura: Pruebe a desactivar otros plugins para confirmar si existe algún conflicto. Asegúrese de que Elementor y todos los plugins relacionados están actualizados.
  2. El elemento del acordeón está en blanco
    • razonamiento: El área de contenido no se ha añadido correctamente o se ha producido un error de carga.
    • cura: Vuelva a comprobar que se ha rellenado el contenido de cada elemento del acordeón y asegúrese de que el contenido tiene el formato correcto (HTML, códigos cortos, etc.).
  3. Los estilos no surten efecto
    • razonamiento: Los estilos personalizados son anulados por los estilos del tema o de otros plugins.
    • cura: Utilice CSS personalizado de mayor prioridad en los ajustes de estilo de Elementor, o compruebe el estilo del tema y ajústelo en consecuencia.

Póngase en contacto con nosotros
¿No puede leer el artículo? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas
Teléfono: 020-2206-9892
QQ咨询:1025174874
(iii) Correo electrónico: info@361sale.com
Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres
Publicado por photon fluctuations, retweeted with attribution:https://www.361sale.com/es/22410

Como (0)
Anterior hace 1 días
Siguiente 23 hace horas

Recomendado

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Póngase en contacto con nosotros

020-2206-9892

QQ咨询:1025174874

Correo electrónico: info@361sale.com

Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres

客服微信
Si tiene problemas con su sitio WordPress, por favorPresentación de órdenes de trabajoNuestro equipo técnico le proporcionará servicios profesionales de restauración.