Cómo crear conmutadores y acordeones en WordPress
Accordions y Toggles son elementos útiles que agregan más funcionalidad a su página, le permiten estructurar mejor el contenido y ayudan con la organización general del sitio web. Agregarlos no es especialmente complicado, pero puede ser especialmente fácil con la herramienta adecuada.
Es por eso que optamos por los Qi Addons fáciles de usar para Elementor que incluyen una amplia variedad de opciones de personalización y son increíblemente fáciles de usar. Este complemento es actualmente la colección más grande de 60 widgets gratuitos que puede usar para agregar más funcionalidad a su sitio web. Además, hay una increíble colección de más de 40 widgets Qi premium. Y, lo que también es muy importante, es que es compatible con todos los temas de WordPress.
Agregar acordeones y cambiar el widget gratuito con Qi Addons para Elementor
Qi Addons le permite personalizar completamente los acordeones y alterna el estilo del tema de WordPress que está utilizando, desde fuentes hasta colores y bordes y todo lo demás.
Para inspirarse, le recomendamos que consulte la página de widgets. Te mostraremos cómo lo aplicamos.
La percepción básica de cómo funciona Elementor es todo lo que necesita comprender en esta sección. Esta es en realidad una fila que contiene dos columnas con una imagen en la columna de la izquierda y acordeones en la de la derecha. Por supuesto, un acordeón puede ocupar toda la fila o cualquier parte de la fila, según sus necesidades.
Antes de continuar, revisemos algunas características básicas de estilo con las que viene este complemento. Así que empecemos por Comportamiento. Son posibles dos tipos de comportamiento: acordeones, en los que solo se puede abrir un elemento en un momento dado, y conmutadores, que permiten abrir más de un elemento en el mismo momento.
El estilo se puede definir aún más con bordes y hay varias opciones disponibles:
- Estándar: sin bordes
- En caja – con bordes,
- Borde superior: solo tiene borde en la parte superior sobre el título
- Borde entre: solo tiene el borde entre el título y la descripción
Cómo agregar Accoridons y Toggles con Qi Addons
Para comenzar, configuraremos la fila para que se divida en dos columnas y agregaremos una imagen a la columna de la izquierda, solo para que la sección sea más atractiva visualmente.
Después de agregar la imagen, encontraremos el widget Accordions and Toggles escribiendo en la barra de búsqueda o desplazándonos hacia abajo en el menú. Cuando se encuentre el widget, simplemente haga clic en él, manténgalo presionado y muévase hacia donde desea colocar el nuevo elemento.
Agregamos el widget Accordions and Toggles al lado derecho de la fila, y puede ver todas las configuraciones relacionadas con él a la izquierda. La configuración predeterminada del widget está configurada de tal manera que el texto y el estilo coinciden automáticamente con el tema que está utilizando, por lo que, en caso de que no vea la necesidad de cambiarlo, simplemente puede finalizar el proceso aquí, el widget se verá como pertenecía naturalmente. al tema
Lo siguiente que debe configurar es Comportamiento y estilo. Ya hemos mencionado las opciones de Comportamiento y Estilo para que pueda configurar aquí lo que funcione para usted. A los efectos de este artículo, seleccionamos la opción Acordeones del menú Comportamiento y el estilo Estándar.
Lo que se necesita hacer ahora es agregar elementos. Desplácese hacia abajo para encontrar las opciones de elementos. Verá dos iconos pequeños en la esquina superior derecha de la pestaña Elementos. El primero es para copiar un elemento existente y la pequeña X que está al lado es para eliminar un elemento. Debajo de la pestaña Elemento se encuentra el botón Agregar nuevo que sirve para agregar nuevos elementos. Cuando hace clic para ingresar un nuevo elemento, primero debe establecer un título y luego escribir el texto en el campo designado a continuación.. Notará muchas opciones similares a las que se ofrecen en varios editores de texto para diseñar y formatear el texto. Le recomendamos que organice el texto y el título en este punto, ya que inmediatamente tendrá una vista previa de cómo se verá al final.
Después de ingresar el texto, puede establecer la altura del contenido. Esta opción se refiere al tamaño del campo de alternancia. Si lo establece en Altura del elemento más alto, cada elemento tendrá el mismo tamaño que el más grande. Si selecciona la opción Altura de elemento individual, el tamaño de cada elemento se corresponderá con el tamaño del contenido que contiene.
Si desea cambiar los íconos predeterminados que se muestran al abrir y cerrar el elemento, simplemente haga clic en el campo Abrir ícono o Cerrar ícono y se mostrarán dos nuevas opciones. Uno es para agregar nuevos íconos de la Biblioteca de íconos y el otro es para agregar un SVG.
Ahora podemos pasar a la configuración de Estilo. Aquí es donde realiza el ajuste fino del acordeón y cambia el estilo del widget.
Puede elegir el estilo del título y establecer la Tipografía del título. Como mencionamos, las opciones predeterminadas están configuradas de tal manera que el estilo del widget coincida con el tema que está utilizando. Pero siempre puede probar todas las demás opciones simplemente seleccionándolas y los cambios serán inmediatamente visibles en el widget en el lado derecho de la pantalla. Explore las opciones y vea qué funciona mejor para usted.
Los siguientes ajustes se refieren a los cambios de estilo que le suceden a un elemento cuando se cierra o se abre. Puede, por ejemplo, configurar el texto para que tenga un color diferente cuando se abre, o el fondo puede tener un color diferente. También existe la opción de establecer un relleno diferente cuando el elemento está activo, es decir, abierto.
Si prefieres los videotutoriales echa un vistazo a este creado por los autores de Qi:
En conclusión
A medida que se sienta más familiarizado con el complemento, explorará opciones aún más refinadas para ajustar el estilo de su widget Accordion and Toggles. Esta herramienta intuitiva es perfecta para principiantes, ya que es increíblemente fácil de usar, mientras que los usuarios avanzados también disfrutarán usándola, ya que ofrece una gran cantidad de opciones de personalización.