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.
Vea el widget de pestañas en acción
El siguiente bloque es el widget, no una captura de pantalla. Cuatro pestañas, iconos en los títulos y el primero configurado para abrirse de forma predeterminada. Haga clic en un título para cambiar de panel.
- Descripción general
- Especificación
- Entrega
- Garantía
Un bloque, cuatro paneles
Las pestañas mantienen una página larga corta. Todo lo que aparece a continuación se encuentra en el mismo bloque, y solo el panel que elige está en la pantalla, por lo que una especificación, un albarán de entrega y una página de garantía dejan de competir por el mismo desplazamiento.
Este es el widget en sí. Haga clic en el título de arriba para cambiar de panel.
Especificación
Cada panel toma contenido del editor ordinario: encabezados, párrafos, listas e imágenes. Nada aquí es una captura de pantalla.
- Títulos de pestañas con un icono, una imagen o texto solo
- Ajustes preestablecidos de borde activo horizontal, vertical o izquierdo
- Encienda el clic o el desplazamiento
Entrega
Un panel de entrega o envío es la clásica segunda pestaña de la página de un producto, porque la gente lo busca y nadie lo quiere en la descripción principal.
Establezca qué pestaña se abre primero con Establecer como predeterminado en el elemento.
Garantía
El último panel es un buen hogar para los términos, devoluciones y cualquier otra cosa que le importe al comprador pero que no pertenezca al campo.
Cómo agregar pestañas en Elementor
Cinco pasos desde una página vacía hasta un bloque de pestañas que funciona.
- Busque pestañas en el panel de widgets de Elementor y arrastre el widget a la página.
- Abra el repetidor de pestañas y agregue un elemento por panel. Cada elemento tiene un título de pestaña y un editor de contenido.
- Establezca el tipo de icono en cada elemento en Ninguno, Icono o Imagen, luego elija el icono o cargue la imagen.
- Elija un estilo preestablecido: pestañas horizontales, pestañas verticales o borde activo izquierdo.
- Configure Tab Effect para hacer clic o pasar el cursor y cambie Set como predeterminado en la pestaña que debería abrirse primero.
Pestañas horizontales y verticales con 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.
Pestañas verticales, en vivo
El mismo widget con Style Preset establecido en pestañas verticales. Los títulos se extienden hacia la izquierda, el panel se encuentra al lado y, en una pantalla estrecha, la tira se apila encima del contenido.
- Encuesta
- Diseño
- Construir
- Entrega
Encuesta
Las pestañas verticales colocan los títulos en una columna a la izquierda y el panel al lado. Se adaptan a un proceso, donde el orden importa y cada paso tiene uno o dos párrafos.
Diseño
Con cuatro o cinco pasos, una franja vertical se lee mejor que una fila horizontal, porque los títulos largos tienen espacio y el ojo los sigue a lo largo de la página.
Construir
Cambie entre los dos con el control de configuración preestablecida de estilo. Las pestañas horizontales, las pestañas verticales y el borde activo izquierdo son los tres ajustes preestablecidos de la lista.
Entrega
En una pantalla estrecha, la franja vertical se apila encima del panel, por lo que el contenido sigue siendo legible sin un segundo diseño.
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.
Estilo de pestañas: colores, bordes y tipografía
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.
Cambie las pestañas al hacer clic o pasar el cursor
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 Elementor vs Addons maestros Pestañas avanzadas
El widget Tabs de Elementor está en el complemento gratuito y es bueno en una cosa que éste no puede hacer: contiene otros widgets dentro de cada panel, porque cada pestaña es un contenedor. El intercambio es lo que pueden llevar los títulos de las pestañas y cuánto del estilo está expuesto.
| Característica | Pestañas Elementor (núcleo libre) | Pestañas de complementos maestros |
|---|---|---|
| Elimina otros widgets dentro de una pestaña | Sí, cada panel es un contenedor | No, el panel toma contenido del editor |
| Títulos laterales (verticales) | Sí | Sí, las pestañas verticales preestablecidas |
| Se convierte en acordeón en el móvil | Sí | prohibido |
| Imagen como título de la pestaña | prohibido | Sí, tipo de icono configurado en Imagen |
| Icono en el título de la pestaña | Sí | Sí |
| Ajustes preestablecidos de estilo | prohibido | Tres, más contenido tabular con Pro |
| Encienda el flote | prohibido | Sí, Tab Effect configurado en Flotar |
| Plantilla guardada dentro de una pestaña | No es necesario, utilice widgets | profesional |
Entonces, la versión corta: si un panel necesita un formulario, una galería o una tabla de precios en su interior, use el widget principal. Si la tira de pestañas en sí es el problema de diseño, con títulos de imágenes, ajustes preestablecidos o conmutación flotante, este tiene los controles.
Lo que hace y no hace el widget Tabs
Comprobado en el panel de widgets. Las filas “no” son tan útiles como el resto, porque dos de ellas son las preguntas que más hace la gente.
| Configuración | Apoyado |
|---|---|
| Pestañas horizontales | Sí, el ajuste preestablecido predeterminado |
| Pestañas verticales | Sí |
| Preajuste del borde activo izquierdo | Sí |
| Icono en el título de una pestaña | Sí, de la biblioteca de iconos de Elementor |
| Imagen como título de pestaña | Sí, tipo de icono configurado en Imagen |
| Títulos de sólo texto | Sí, el tipo de icono establecido en Ninguno |
| Encienda el clic o el desplazamiento | Sí, efecto pestaña |
| Elija qué pestaña se abre primero | Sí, establezca como predeterminado el artículo |
| Alineación de pestañas y contenido | Sí |
| Colores activos e inactivos | Sí |
| Sección, widget o plantilla de página guardada en una pestaña | profesional |
| Contenido tabular preestablecido | profesional |
| Diseño de columna para la tira de pestañas | profesional |
| Abra una pestaña desde una URL o un enlace | prohibido |
| Acordeón en móvil | prohibido |
Widgets relacionados para el mismo trabajo: Acordeón avanzado pentru listele de întrebări, Alternar contenido para intercambiar un bloque de contenido, Tabla dinámica pentru specificații, Tabla de precios para planes, y Tabla de contenidos para páginas largas.
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 poner una plantilla guardada dentro de una pestaña?
Sí, con Master Addons Pro. Establezca el tipo de contenido en el elemento en Sección guardada, Widget guardado o Plantilla de página guardada y elija la plantilla. En el complemento gratuito, cada panel toma contenido del editor.
¿Puedo configurar qué pestaña se abre primero?
Sí. Cambie Establecer como predeterminado en el elemento que desea abrir cuando se carga la página. Si no hay ninguno configurado, se abre la primera pestaña.
¿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.
¿Las pestañas se convierten en acordeón en el móvil?
No. La tira de pestañas permanece como una tira de pestañas y se envuelve en pantallas estrechas. El propio widget Tabs de Elementor cambia a un acordeón, por lo que es mejor elegir si se necesita un acordeón móvil.
¿Debo usar pestañas o un acordeón?
Pestañas en las que los paneles son alternativas entre las que elige un visitante, como especificaciones, entrega y garantía. Un acordeón cuando los elementos son una lista que la gente lee, como preguntas frecuentes, ya que se pueden abrir varios a la vez y se acumulan naturalmente en un teléfono.
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
