Cuando construyes un sitio web, es esencial asegurarte de que tu contenido está bien organizado. Organizar cuidadosamente tus páginas puede ayudar a mejorar la experiencia del usuario (UX) y hacer que el texto sea más digerible. Una de las formas de organizar tu contenido es utilizando el widget de pestañas de Elementor.
El contenido con pestañas permite a tus usuarios alternar entre diferentes secciones de contenido. Esta característica elimina la necesidad de que los visitantes naveguen a diferentes áreas de las páginas. Agrupar contenido relacionado en contenedores con pestañas puede mejorar el aspecto y la usabilidad de tu sitio. Además, puedes configurar todo esto sin necesidad de tener experiencia en el desarrollo de WordPress.
En este post, presentaremos brevemente Elementor y sus diferentes versiones. A continuación, te explicaremos cómo crear y personalizar las pestañas de Elementor y algunas herramientas de terceros que puedes utilizar para mejorar la funcionalidad predeterminada del widget.
¡Empecemos!
Una visión general de Elementor
Elementor es un popular y potente plugin constructor de sitios web:
Puedes utilizar el constructor de páginas para crear hermosas páginas para tu sitio web, ya sea desde cero o utilizando plantillas prefabricadas. Elementor cuenta con un editor de arrastrar y soltar, por lo que no tendrás que tocar ni una línea de código.
Es importante señalar que existe una versión gratuita y otra de pago de Elementor. El plugin gratuito de Elementor te permite crear páginas y entradas estándar.
Sin embargo, sus características y funcionalidades pueden ser limitadas. Para desbloquear el conjunto completo de herramientas, recomendamos actualizar a Elementor Pro. A lo largo de este post, señalaremos las diferencias entre el plan gratuito y el pro a la hora de trabajar con el widget de pestañas.
Cómo crear pestañas en Elementor (Widget de pestañas)
Ahora que sabemos más sobre Elementor, vamos a ver cómo utilizar el widget de Pestañas. Ten en cuenta que, para el siguiente tutorial, asumiremos que ya tienes Elementor instalado y activado en tu sitio de WordPress.
Para empezar, navega a la entrada o página de WordPress donde quieras añadir el contenido con pestañas y selecciona Editar con Elementor:
Esto iniciará la interfaz del editor de Elementor. En el panel de la izquierda, en Elementos, busca y selecciona el widget Pestañas :
Puedes arrastrar y soltar el widget en una sección de la página. Una vez que coloques el widget Pestañas, aparecerá un nuevo panel con su configuración:
Puedes introducir el título y el contenido de cada pestaña. También puedes hacer clic en el botón + Añadir elemento para insertar otra pestaña. En Tipo, selecciona si quieres que las pestañas se muestren en horizontal o en vertical.
Cómo personalizar tus pestañas de Elementor
Una vez que hayas añadido texto a las pestañas, puedes personalizar la configuración general del widget. Hay algunas opciones diferentes.
Selecciona cada pestaña personalizada para modificar sus atributos, incluyendo su título, el contenido de la caja y el icono. También puedes cambiar su posición y alineación:
A continuación, en la pestaña Estilo , encontrarás muchas opciones para personalizar el diseño y la apariencia del widget Pestañas de Elementor. Puedes modificar el color y la sombra del texto, la tipografía, el espaciado y mucho más:
Puedes cambiar el color y la anchura del borde que rodea las pestañas. Esta característica de diseño puede ayudar a distinguir las secciones individuales.
En Título, puedes modificar el color del texto de los títulos de las pestañas. También puedes cambiar la fuente y el tamaño del texto haciendo clic en Tipografía:
Cuando hayas terminado, guarda los cambios. También hay algunos ajustes avanzados que puedes considerar utilizar para que tu contenido con pestañas sea más sofisticado.
Ajustes avanzados para las pestañas de Elementor
En la pestaña Avanzado del panel de configuración del widget, encontrarás una amplia gama de opciones adicionales:
Echemos un vistazo a estos ajustes:
- Avanzado: Cambia los márgenes y los rellenos de las pestañas.
- Efectos de movimiento: Añade efectos de desplazamiento y de ratón para que el widget sea más interactivo y añade una animación de entrada.
- Transformar: Voltea, rota y escala tu widget.
- Fondo: Elige entre un fondo estándar o pasa el ratón para insertar una transición.
- Borde: Elige el tipo de borde, como una línea sólida o discontinua.
- Máscara: Selecciona una máscara de diseño elegante y aplícala al widget.
- Posicionamiento: Ajusta la anchura y la posición del widget.
- Responsivo: Cambia la visibilidad responsiva que afectará a la vista previa o a las páginas en vivo.
- Atributos: Establece atributos personalizados para la envoltura del elemento.
- CSS personalizado: Inserta tu CSS personalizado.
Es importante tener en cuenta que si utilizas la versión gratuita de Elementor, no tendrás acceso a todos estos ajustes avanzados. Por ejemplo, no puedes añadir atributos personalizados, efectos de desplazamiento o tu CSS.
Cómo añadir un elemento dentro del widget de pestañas
Con Elementor Pro, también puedes insertar otro elemento dentro del widget de pestañas. Por ejemplo, digamos que quieres añadir el widget Mapas bajo la pestaña Ubicaciones.
Para ello, crea el mapa que quieras utilizar y luego guárdalo como Widget Global haciendo clic con el botón derecho en el icono del lápiz y seleccionando Guardar como Global:
A continuación, ve a tu Biblioteca de Plantillas (desde tu panel de control de WordPress) y copia el shortcode del Widget Global que acabas de crear.
A continuación, haz clic dentro del widget Pestañas y selecciona el botón + Añadir elemento para añadir una nueva pestaña. En el área de texto del contenedor, pega el shortcode que acabas de copiar:
Cuando hayas terminado, haz clic en ACTUALIZAR o PUBLICAR en la parte inferior de la pantalla. A continuación, podrás previsualizar el aspecto del widget en la parte frontal de tu sitio:
¡Ya está! Está todo hecho.
8 mejores plugins para pestañas de Elementor
Elementor es una herramienta robusta que viene con toda la funcionalidad y características que necesitarás para crear un contenido con pestañas bonito y funcional.
Sin embargo, es posible que quieras llevar tu diseño más allá o utilizar capacidades avanzadas. En ese caso, podrías considerar la posibilidad de combinar Elementor con otra herramienta de terceros.
Echemos un vistazo a algunos de los mejores plugins para pestañas de Elementor, clasificados sin ningún orden en particular.
1. ElementsKit Elementor Table Widget
El ElementsKit Elementor Table Widget es una extensión muy popular:
Su Widget de Tabla te permite mostrar una gran cantidad de datos no sincronizados de forma organizada. Puedes construir una tabla personalizable, añadir contenido al cuerpo e insertar imágenes y elementos de navegación.
Las características de ElementsKit incluyen:
- Tablas de comparación
- Horarios y calendarios
- Gestión de proyectos
- Menús
- Más de 500 bloques
- Más de 70 complementos
- Un constructor de mega menús
- Efectos de paralaje
- Un constructor modal emergente
El precio de ElementsKit comienza en 39 dólares al año para un solo sitio. Este plan incluye un año de actualizaciones y soporte.
2. Elegant Tabs for Elementor
Elegant Tabs for Elementor es una herramienta intuitiva que te ayuda a crear y personalizar pestañas dinámicas:
Este complemento puede ser una opción sólida si buscas una extensión con muchas opciones de personalización del diseño. Puedes añadir colores, iconos y fuentes personalizadas. También puedes utilizar Elegant Tabs para añadir una función de cambio automático a tus pestañas y enlazarlas con otros contenidos de tu sitio.
Las principales características de Elegant Tabs son:
- Opciones avanzadas de estilo
- Una función de cambio automático
- La opción de establecer cualquier pestaña activa en la carga
- Pestañas justificadas y verticales
- Enlaces profundos
- Soporte de alineación de pestañas
El precio de Elegant Tabs comienza en 19 dólares al año. Este plan incluye seis meses de actualizaciones.
3. Livemesh Addons
Livemesh Addons para Elementor incluyen una plétora de elementos listos para ayudarte a estilizar y estructurar tu contenido con pestañas con facilidad:
Puedes elegir entre tipos de pestañas claras y oscuras, más de 10 diseños de pestañas y opciones de disposición horizontal y vertical. Livemesh Addons también es fácil de usar, lo que es excelente si eres nuevo en WordPress o Elementor.
Las principales características de Livemesh son:
- 10 diseños de pestañas claras y 10 diseños de pestañas oscuras
- Opciones verticales y horizontales
- Resolución móvil personalizable
- más de 25 complementos
- Soporte para iconos
Los planes de Livemesh Addons empiezan por 37 dólares al año. Este plan incluye actualizaciones y soporte durante un año.
4. Elementor Addons
Elementos Addons, del popular PowerPack, es un plugin rico en funciones para potenciar tanto el diseño como la funcionalidad de tu widget Elementor Tabs:
Puedes utilizar este plugin para añadir texto e imágenes a tus pestañas y aplicar seis estilos para el widget de pestañas avanzadas. Es fácil de usar y de entender. Además, Elementor Addons también es ligero, por lo que no tienes que preocuparte de ralentizar tu sitio.
Las principales características de Elementor Addons by PowerPack son:
- Una interfaz rápida y ligera
- Plantillas preconstruidas
- Visualización personalizada de contenidos
- Estilos avanzados de pestañas
A partir de 44 dólares al año, este plugin es más caro que otras opciones de esta lista. Sin embargo, tiene un conjunto completo de widgets para personalizar todos los aspectos de tu sitio, no sólo el contenido de las pestañas.
5. JetElements
JetElements ofrece un widget de Tablas Responsivas que podría ser ideal si buscas una forma rápida y sencilla de agrupar tu contenido:
Te permite mostrar datos no estructurados de forma limpia y moderna. JetElements también ofrece un widget de tabla de precios para personalizar y dar estilo a tus detalles de precios de ocho maneras diferentes.
Las principales características de JetElements son:
- 45 widgets
- Importación de CSV para la configuración de las tablas
- 8 opciones de estilo
- Soporte para todos los tipos de contenido
- Totalmente personalizable
La suscripción a JetElements comienza en 24 dólares al año. Crocoblock también ofrece un paquete con todo incluido por 130 dólares al año, con más de 150 widgets.
6. Essential Addons
Otro plugin popular que puedes considerar utilizar para tus pestañas de Elementor es Essential Addons:
Es uno de los plugins de widgets de Elementor más populares. Incluye más de 100 bloques preparados y más de 80 elementos para ampliar y mejorar el constructor de sitios web.
Uno de los mejores elementos que puedes aprovechar para tu contenido con pestañas es la Tabla de Datos del plugin. Esta herramienta te permite diseñar sin problemas casi cualquier tipo de tabla y añadir iconos, filtros y mucho más.
Las principales características de Essential Addons son
- Importación de CSV a la configuración de la tabla
- Opciones de filtrado
- Ajustes totalmente personalizables
- Opciones de estilo avanzadas
- Pestañas y elementos de acordeón avanzados
- Tablas de precios
El precio de Essential Addons comienza en 39,97 dólares al año para un sitio web. Viene con un año de actualizaciones y soporte.
7. Premium Addons
Premium Addons es una herramienta altamente personalizable para Elementor que viene con una amplia gama de widgets gratuitos y premium:
Entre los muchos y potentes widgets que incluye este addon está la Tabla de Precios de Elementor. Viene con una función de clasificación, búsqueda en vivo y la opción de organizar los artículos en orden ascendente o descendente.
Las principales características de Premium Addons son:
- La opción de importar archivos CSV
- Añadir URLs a las celdas de las tablas
- Búsqueda y ordenación en vivo
- Opciones de personalización y estilo
- Animaciones de Lottie
Puedes descargar y utilizar el Widget de Tabla de Elementor de Premium Addons de forma gratuita. También hay una versión premium, a partir de 39 dólares al año.
8. Element Pack
Un último complemento que puedes considerar utilizar con tu widget de pestañas de Elementor es Element Pack:
Este paquete de extensiones de Elementor incluye un widget de Tabla que puede presentar tu contenido de forma atractiva y con estilo. Puedes crear varias tablas dentro de tu contenido con pestañas, incluyendo tablas de precios, de contenido y de criptomonedas.
Las principales características de Elementor Pack incluyen:
- Importación de CSV a la configuración de la tabla
- Elementos de tres tablas
- Opciones de personalización y estilo
- Una función de filtrado
- Búsqueda en vivo
Una licencia para un solo sitio de Element Pack cuesta 29,25 dólares al año, lo que la convierte en una de las opciones más baratas de esta lista. El plan también incluye una garantía de devolución del dinero de 20 días.
Resumen
Elementor es una herramienta excelente que puede ayudarte a diseñar y construir tu sitio web sin esfuerzo. Si quieres agrupar y organizar tu contenido de forma atractiva, puedes considerar el uso del widget de pestañas de Elementor.
Como comentamos en este post, puedes insertar fácilmente este widget en cualquier página o entrada a través del editor de Elementor. Luego puedes añadir tu contenido y darle estilo para que coincida con tu marca. Para ampliar la funcionalidad del widget, también puedes emparejarlo con un plugin de terceros, como ElementsKit.
Un diseño atractivo y fácil de usar es esencial para el éxito de un sitio.
También necesitarás asociarte con un potente proveedor de Alojamiento de Aplicaciones, Alojamiento de Bases de Datos y Alojamiento de WordPress Administrado.
Consulta nuestros planes de alojamiento para ver cómo Kinsta puede llevar tu sitio web al siguiente nivel.
Deja una respuesta