Widget Elementor Advanced Tabs: pestañas horizontales, verticales y de imagen gratuitas
El widget de pestañas avanzadas en complementos maestros divide el contenido largo en pestañas limpias en las que se puede hacer clic y es gratuito. Elija un ajuste preestablecido de borde activo horizontal, vertical o izquierdo, agregue un ícono o imagen al título de cada pestaña y elija si las pestañas cambian al hacer clic o al pasar el cursor. Complete cada pestaña con texto del editor o, con Master Addons Pro, cargue una sección, widget o plantilla de página guardada. Funciona bien para funciones de productos, preguntas frecuentes, planes y guías paso a paso.
Múltiples diseños y ajustes preestablecidos de estilo
Comience desde un ajuste preestablecido incorporado. Horizontal Tabs coloca los títulos en una fila en la parte superior, Vertical Tabs los alinea en un costado y Left Active Border marca la pestaña abierta con un borde de color. Master Addons Pro agrega un ajuste preestablecido de contenido tabular para una apariencia en caja. Cada ajuste preestablecido es solo un punto de partida, por lo que puedes rediseñarlo para que coincida con tu marca.
- Diseños horizontales y verticales: elija la dirección de pestaña que se ajuste a su contenido.
- Ajustes preestablecidos visuales: comience desde un diseño diseñado en lugar de un widget en blanco.
- Cambio fácil: cambie de pestañas horizontales a verticales sin reconstruir el contenido.
Plantillas guardadas dentro de pestañas (Pro)
La versión gratuita llena cada pestaña del editor de texto. Con Master Addons Pro, cada pestaña puede usar un tipo de contenido diferente: editor de texto simple, una sección guardada, un widget guardado o incluso una plantilla de página guardada completa. Esto significa que puede colocar una tabla de precios compleja, un formulario de contacto, una galería de imágenes o cualquier otro bloque de contenido prediseñado en una pestaña. Es como tener varias páginas en una, sin desorden.
- Integración de plantillas: inserte cualquier plantilla de Elementor guardada en una pestaña para posibilidades de diseño ilimitadas.
- Diseño consistente: reutilice sus secciones y widgets existentes para mantener una apariencia cohesiva.
- Perfecto para comparaciones: utilice pestañas para cambiar entre diferentes especificaciones de productos, planes de precios o listas de funciones.
Estilee las pestañas y el contenido de forma independiente
Logre una apariencia perfecta y pulida diseñando cada parte de las pestañas. Diseñe el contenedor de pestañas y el área de contenido por separado. Para las pestañas, controle los estados Normal y Activo con diferentes colores, fondos, bordes y tipografía. Ajuste el relleno, el margen y el tamaño del icono. Para el área de contenido, diseñe el fondo, el relleno, los márgenes y la tipografía. Este nivel de control garantiza que sus pestañas luzcan integradas y profesionales.
- Estilo basado en estados: establezca colores, fondos y bordes únicos para pestañas activas e inactivas.
- Soporte de iconos: agregue iconos a sus pestañas y controle su tamaño y posición.
- Diseño del área de contenido: diseñe el contenedor de contenido para que coincida con la estética de su sitio.
Elija cómo responden las pestañas a los usuarios
Decida cómo interactúan los usuarios con sus pestañas. Configure el efecto de pestaña para hacer clic (tradicional) o pasar el cursor (para una navegación más rápida). También puede configurar qué pestaña está abierta de forma predeterminada. Esta flexibilidad le permite crear la experiencia de usuario exacta que desea, ya sea para una exhibición de productos de ritmo rápido o una guía cuidadosa paso a paso.
- Haga clic o Hover: elija el disparador que se adapte a su contenido. Hover es el valor predeterminado.
- Pestaña activa predeterminada: establezca qué pestaña está abierta cuando se carga la página.
Pestañas de imágenes e iconos en Elementor
El título de cada pestaña puede contener un icono de la biblioteca Elementor o una imagen propia. Establezca el tipo de icono en la imagen, elija una imagen de la biblioteca multimedia y el título se convertirá en una pestaña de imagen. Esta es una opción gratuita y funciona con todos los ajustes preestablecidos gratuitos.
- Tipo de icono por pestaña: Ninguno, Icono o Imagen.
- Utilice imágenes para pestañas de productos o categorías e íconos para listas de funciones.
- Mantenga un estilo en la barra de pestañas, ya que mezclar imágenes e íconos parece ocupado.
Para contenido que se abre en su lugar en lugar de cambiar de panel, pruebe Acordeón avanzado o Alternar contenido (Pro).
Preguntas frecuentes para pestañas
¿Puedo usar íconos y texto en los títulos de las pestañas?
Sí. Para cada pestaña, establezca Tipo de ícono en Icono o Imagen, luego elija un ícono de la biblioteca o una imagen de su biblioteca multimedia. El control Tamaño del icono en la pestaña Estilo establece qué tan grande aparece el icono.
¿Cómo hago para que las pestañas queden bien en el móvil?
Utilice el modo responsivo de Elementor para ajustar la tipografía, el relleno y los márgenes de tabletas y teléfonos. Obtenga una vista previa de las pestañas verticales en una pantalla pequeña antes de publicar, ya que la columna de títulos ocupa ancho.
¿cuál es la diferencia entre el ajuste preestablecido "Contenido tabular" y los demás?
El contenido tabular es un ajuste preestablecido profesional. Le da al área de contenido de la pestaña un fondo, un borde y un relleno distintos, lo que la hace parecer un cuadro conectado a las pestañas. Es una apariencia más estructurada y contenida en comparación con los estilos clásicos de subrayado o borde izquierdo.
¿Puedo vincular una pestaña a una URL externa u otra sección de la página?
El elemento Tabs avanzadas está diseñado para alternar contenido dentro del widget. Para vincular a URL externas o secciones de página, es posible que necesite una solución diferente, como un menú de navegación o enlaces de anclaje. Sin embargo, puede colocar un botón con un enlace dentro del contenido de la pestaña.
¿en qué se diferencia esto del widget Tabs de Elementor?
El widget Tabs gratuito de Elementor le permite colocar cualquier widget dentro de cada pestaña y colocar los títulos arriba, abajo o al lado del contenido. Master Addons Advanced Tabs le ofrece un disparador flotante, etiquetas de íconos o imágenes y ajustes preestablecidos ya preparados, como Left Active Border, y puede agregar tantos widgets de Advanced Tabs a una página como necesite. Pro agrega el contenido tabular preestablecido y secciones, widgets o plantillas de página guardadas como contenido de pestaña.
¿cómo funciona el ajuste preestablecido "Frontera activa izquierda"?
El ajuste preestablecido de borde activo izquierdo generalmente resalta la pestaña activa con un borde o fondo de color en el lado izquierdo. Es una apariencia moderna y limpia que funciona bien para pestañas verticales o incluso horizontales si desea un indicador distintivo.
Widgets y extensiones de Elementor de tendencia
Cree sitios web sofisticados en menos tiempo.
Vidriomorfismo
Extras de contenedores
Patrones
![Extensión de duplicador de páginas/publicaciones de complementos maestros para Elementor: enlace de fila de duplicador MA en la lista de páginas de WordPress que crea una página de inicio - borrador [duplicado #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicador de publicaciones/páginas
