Las pestañas son una de las formas más sencillas de evitar que una página larga se sienta abrumadora. En lugar de apilar todo verticalmente, divides el contenido en secciones en las que se puede hacer clic y que los visitantes pueden explorar a su propio ritmo.
El widget de pestañas avanzadas en complementos maestros para Elementor toma lo básico widget de pestañas Elementor y añade mucha más flexibilidad. Obtienes tres diseños preestablecidos gratuitos más un ajuste preestablecido Pro, la opción de agregar una imagen o ícono a cada pestaña y, con Master Addons Pro, la capacidad de cargar una sección Elementor guardada dentro de cualquier panel de pestañas. Para obtener una descripción general y demostraciones rápidas, consulte el Widget de pestañas avanzadas de Elementor página.
A continuación, le explicaré cómo configurarlo desde cero utilizando las mismas opciones de diseño que se muestran en el video de demostración.
Qué hace el widget Elementor Advanced Tabs #
En esencia, este widget crea un conjunto de etiquetas de pestañas más un área de contenido. Cuando alguien hace clic en una etiqueta, aparece el panel coincidente.
En comparación con el widget de pestañas Elementor predeterminado, la versión Master Addons le brinda más control. Puede cambiar entre ajustes preestablecidos visuales, agregar imágenes o íconos a pestañas individuales, usar texto sin formato (gratis) o una plantilla guardada (Pro) como contenido del panel y diseñar estados normales, flotantes y activos por separado.
Antes de empezar #
- wordpress con elemento instalado y activo.
- Complementos maestros para Elementor instalado y activo. Si aún no lo has instalado, comprueba el guía de instalación.
- El widget Advanced Tabs habilitado en el panel de opciones de complementos maestros.
- Opcional: una plantilla de Elementor guardada si desea cargar una dentro de una pestaña (esto necesita Master Addons Pro).
Agregue el widget de pestañas avanzadas #
Abra el editor Elementor y busque Pestañas avanzadas widget en la sección Complementos maestros. Arrástrelo a su página y verá la barra de pestañas horizontal predeterminada con tres pestañas de muestra: Control inteligente, Mejor rendimiento y Fácil personalización.
Elija un diseño preestablecido #
La forma más rápida de cambiar el aspecto es Estilo preestablecido desplegable en la pestaña Contenido. Tienes cuatro opciones y la última necesita Pro:
- Pestañas horizontales: las etiquetas se extienden por la parte superior con contenido debajo. Este es el valor predeterminado.
- Pestañas verticales: las etiquetas se apilan a la izquierda y el contenido aparece a la derecha.
- Borde activo izquierdo: similar a las pestañas verticales, pero la pestaña activa tiene un borde de color a la izquierda.
- Conținut tabular (Pro): las etiquetas se convierten en botones estilo tarjeta más grandes encima del panel de contenido.
Puedes cambiar entre estos al instante, así que pruébalos todos y comprueba cuál se adapta mejor a tu contenido. Pro también agrega un Diseño de columnas control que le permite ajustar cuántas columnas ocupan las etiquetas de las pestañas, lo cual resulta útil cuando desea etiquetas más estrechas y más espacio para el contenido.
Configura las pestañas y el contenido #
Una vez que hayas elegido un diseño, expande el Contenido sección para ver la lista de pestañas. Cada elemento tiene su propio panel de configuración. Puede duplicar, eliminar o reordenar pestañas y presionar Agregar artículo cuando necesitas más.
Configuración por pestaña #
- Establecido como predeterminado: elija qué pestaña se abre primero cuando se carga la página.
- Tip icon: elegir Ninguno, Icono, sau Imagen para la etiqueta de la pestaña.
- Imagen/icono: el recurso visual que se muestra junto al título de la pestaña.
- Titlu tabului: los visitantes de texto hacen clic en.
- Tipo de contenido: usar Contenido para un editor de texto normal o, con Pro, Sección guardada, Widget guardado, sau Plantilla de página guardada.
- Contenido de la pestaña: el contenido o plantilla real que llena el panel.
En la demostración, la primera pestaña utiliza una imagen. Simplemente configure el tipo de icono en Imagen, abra la biblioteca multimedia y seleccione su archivo. La imagen aparece junto al título de la pestaña.
Para la segunda pestaña, la demostración cambia a un ícono. Elija el tipo de icono y elija algo que coincida con la etiqueta. En este caso, un icono estilo velocímetro funciona bien para “Mejor rendimiento”
Cargue una sección guardada dentro de una pestaña (Pro) #
Con Master Addons Pro, cambie el Tipo de contenido a Sección guardada y elige cualquier plantilla de tu biblioteca Elementor. La demostración carga un acordeón de preguntas frecuentes completo dentro de una pestaña, lo que significa que su panel puede contener encabezados, acordeones, formularios o cualquier otra cosa que haya guardado como plantilla.
Diseñe las pestañas y el contenido #
Dirígete al Estilo pestaña para cambiar colores, tipografía, espaciado y bordes. Los controles se agrupan en dos secciones principales:
- Pestañas: cubre las etiquetas de las pestañas, incluido el color del título, la tipografía del título, el color de fondo, el color del contenido, la tipografía del contenido, la alineación del contenido, el radio del borde, la sombra del cuadro, el relleno y el margen.
- Contenido: diseña el panel que muestra cuándo una pestaña está activa.
La mayoría de estos controles admiten estados normal, flotante y activo, por lo que la pestaña que alguien está viendo actualmente puede verse diferente del resto. El Alineación de contenidos los botones también le permiten alinear el texto del panel con la parte superior, central o inferior del área de contenido.
Configuraciones avanzadas #
El Avanzado tab tiene los controles Elementor habituales que esperarías: margen, relleno, animación de entrada, visibilidad receptiva, CSS personalizado y atributos. Úselo para ajustar la posición u ocultar las pestañas en tamaños de pantalla específicos.
El resultado en la página #
Una vez publicadas, las pestañas funcionan exactamente como las configuró. La pestaña predeterminada se abre primero, los visitantes hacen clic en las etiquetas y cualquier sección o medio guardado que haya agregado aparece en el panel correspondiente.
Casos de uso comunes #
- Desgloses de características en páginas de productos, con una pestaña por función.
- Comparaciones de precios o planes utilizando contenido tabular o etiquetas verticales.
- Secciones de preguntas frecuentes dentro de una pestaña cargando un acordeón guardado como contenido del panel.
- Descripciones de servicios donde cada pestaña cubre un servicio diferente.
- Portafolio o estudios de caso con imagen o icono por pestaña y detalles en el panel.
Consejos para mejores pestañas #
- Haga coincidir el ajuste preestablecido con su contenido. Las pestañas horizontales funcionan mejor con etiquetas cortas, las pestañas verticales son excelentes para listas más largas y el ajuste preestablecido Pro Tabular Content hace que cada opción se destaque.
- Establezca su pestaña más importante de forma predeterminada. Usar Establecer como predeterminado para que los visitantes vean primero su mejor contenido.
- Mantenga los íconos y las imágenes consistentes. Mezclar imágenes, íconos y etiquetas de texto sin formato en la misma barra de pestañas tiende a parecer complicado.
- No sobrecargues las secciones guardadas. Una forma o acordeón dentro de una pestaña es perfecto, pero una sección de héroe pesado puede ralentizar las cosas incluso cuando está oculta.
- Verifique la vista móvil antes de publicar. Las pestañas verticales pueden aumentar de altura en pantallas pequeñas, así que primero obtenga una vista previa del diseño responsivo.
Preguntas frecuentes #
¿qué es el widget de pestañas avanzadas en complementos maestros?
Es un widget de Elementor para crear contenido con pestañas. Puede elegir diseños horizontales, verticales, de borde activo izquierdo o tabulares; agregar íconos o imágenes a cada pestaña; llene paneles con texto o con secciones guardadas en Pro; y diseñe los estados normal, flotante y activo.
¿puedo cargar una plantilla de Elementor dentro de una pestaña?
Sí, con Master Addons Pro. Establezca el tipo de contenido de la pestaña en la sección guardada y elija cualquier plantilla de su biblioteca Elementor. Esa plantilla se representará dentro del panel cuando la pestaña esté activa.
¿Cómo hago que una pestaña se abra de forma predeterminada?
Abra el elemento de la pestaña Contenido y active Establecer como predeterminado. Quédese en una pestaña predeterminada para que el panel siempre comience en un estado claro.
¿cuál es la diferencia entre pestañas horizontales y contenido tabular?
Las pestañas horizontales colocan las etiquetas en una sola fila encima del contenido. El contenido tabular, un ajuste preestablecido profesional, convierte las etiquetas en botones más grandes estilo tarjeta, lo que funciona bien cuando desea que cada pestaña parezca una opción separada.
¿Puedo usar diferentes tipos de íconos para diferentes pestañas?
Sí. Cada pestaña tiene su propio control de tipo de icono, por lo que una pestaña puede usar una imagen mientras que otra usa un ícono. Para una apariencia más limpia, intente mantener el estilo visual consistente en todas las pestañas.
Envolviendo #
El Pestañas avanzadas cuerda es una forma sólida de construir elementor pestañas avanzadas con múltiples diseños y paneles de contenido enriquecido. Mezcle y combine los ajustes preestablecidos con imágenes por pestaña, íconos o secciones guardadas hasta obtener el diseño que desee.
Si desea ver qué más hay disponible, explore el conjunto completo de Widgets y extensiones de complementos maestros. Y si tiene curiosidad sobre las funciones Pro, eche un vistazo a página de precios.
