Al crear un sitio de WordPress, especialmente uno que contiene mucho contenido, es posible que se sienta abrumado con el aspecto de la presentación. ¿Cómo puede mostrar todo este contenido sin atascar a los visitantes del sitio? ¿Cómo puede mantener una estética cohesiva y atractiva al tiempo que incluye toda la información que necesita expresar?
Es un acto de equilibrio, para estar seguro. Honestamente, se remonta a la antigua lucha entre forma y función. Necesita que su sitio funcione de cierta manera, pero no quiere sacrificar el diseño. Desea incluir una característica específica, pero hacerlo podría alterar su diseño.
Y mira, lo entiendo. De hecho, he estado allí. He luchado muchas veces para armar un sitio de cartera, simplemente porque tenía demasiada información para transmitir. Una y otra vez percibí que no tenía suficiente espacio para transmitir todos los detalles que quería transmitir. Bueno, no sin enviar a los visitantes de mi sitio a una madriguera de enlaces interminables, eso es.
Entonces, ¿cuál es la solución?
Probablemente hay muchos. Por ejemplo, podría preguntarse si realmente necesita todo ese contenido en primer lugar. Y podría pensar en cómo puede destilar su contenido en partes más pequeñas. Toda esa mentalidad de “menos es más”. Pero no me voy a molestar con ese aspecto hoy. Voy a asumir que hasta el último dato que quieras incluir es necesario. Y con eso en mente, no puedo pensar en una mejor solución para el «problema de demasiado contenido» que usar pestañas.
Vamos, ya sabes lo que son las pestañas. Como las pestañas de una carpeta: esas coloridas piezas de plástico que sobresalen de una libreta que le permiten pasar fácilmente a la sección o capítulo que desee. O si quieres una referencia más moderna, piensa en las pestañas de un navegador. Hacen que sea más fácil pasar de un sitio web a otro sin tener que cerrar nada o navegar fuera de una página que desea mantener abierta, ¿verdad?
Bueno, ese mismo principio se puede aplicar a su sitio web. En WordPress, puede agregar fácilmente pestañas a diferentes páginas y publicaciones para que la organización y visualización de su contenido sea más sencilla e intuitiva para los visitantes.
Como habrás adivinado, no hay necesidad de codificar pestañas desde cero aquí. Hay un montón de complementos que ofrecen esta función para ahorrarle algo de tiempo. Algunos son muy simples, mientras que otros ofrecen todo un mundo de características. La dirección en la que vayas depende de ti, por supuesto. ¡Espero que encuentres útil esta compilación!
¡Los clientes de Elegant Themes están de suerte!
El uso de los temas y complementos disponibles de nuestra propia selección de productos proporciona varias soluciones para crear pestañas. Me referiré a estos brevemente antes de pasar a varias soluciones de terceros para aquellos que no son miembros aquí en Elegant Themes.
Crear pestañas con Divi
Nuestro tema Divi viene con un excelente módulo de pestañas desde el principio. Este módulo se puede usar para crear y colocar pestañas en cualquier lugar de la página usando Divi Builder . Si eres cliente de Elegant Themes y no has probado Divi, ¡entonces te lo estás perdiendo! Ya tenemos un video tutorial completo sobre cómo usar el módulo de pestañas, por lo que no entraré en detalles aquí.
Usando nuestros elegantes códigos cortos
Todos los temas aquí en Elegant Themes vienen con una variedad de códigos cortos , ¡incluido un código corto de pestañas! También puede usar nuestro complemento de código corto para combinar estos códigos cortos con temas de fuera de nuestra colección. Puede encontrar una lista completa de códigos abreviados disponibles con su marcado aquí . También puede ver nuestro video instructivo en la página de documentación para miembros .
El Complemento Constructor Elegante
Nuestro complemento de creación también viene con un módulo de pestañas, lo que le permite construir visualmente pestañas dentro de cualquier tema. Si está buscando una solución de arrastrar y soltar similar a Divi, pero está utilizando un tema diferente, entonces nuestro complemento de creación es una excelente opción.
Pestañas fáciles de responder
El complemento Easy Responsive Tabs es uno de los favoritos entre muchos desarrolladores, y por una buena razón. Es compatible con Bootstrap 3.0 y funciona agregando simples botones TinyMCE al editor de publicaciones. Luego, todo lo que tiene que hacer es hacer clic en el ícono apropiado en el editor para insertar pestañas receptivas en su publicación o página.
Puede activar y desactivar la capacidad de respuesta (aunque no puedo imaginar por qué querría desactivarla) y personalizar el CSS para que las pestañas coincidan perfectamente con su tema. Los controles integrados le permiten configurar los colores de las pestañas, incluidos los encabezados y el contenido, así como la pestaña predeterminada que debe cargar una página en vista completa. La capacidad de seleccionar entre las pestañas superior e inferior completa el conjunto de características aquí.
Publicar pestañas de IU
Otro complemento gratuito que quizás desee probar es Post UI Tabs . No hay nada más simple o directo que esto. Después de la instalación, puede insertar fácilmente pestañas de jQuery en sus publicaciones y páginas usando códigos abreviados. Viene equipado con 24 temas de interfaz de usuario diferentes, por lo que seguramente encontrará algo que se adapte a su sitio. E incluso si no lo hace, puede configurarlo como desee creando una hoja de estilo personalizada.
Tabby Responsivo Pestañas
Otra opción gratuita que ha llamado la atención de muchos desarrolladores es el complemento Tabby Responsive Tabs . Se basa en jQuery como lo hacen muchos complementos de pestañas, pero hace suficientes cosas de manera diferente para que sea notable. Por ejemplo, puede crear un conjunto de pestañas horizontales para mostrar en una página o publicación y cambiarán automáticamente a una vista de acordeón en pantallas más pequeñas. También puede insertar más de un conjunto de pestañas en una página.
También cumple con los estándares de accesibilidad mediante el uso de atributos y roles de Aria. Además, se puede acceder al contenido dentro de las pestañas solo desde el teclado. Hay un complemento llamado Tabby Responsive Tabs Customizer que habilita un panel de configuración para tus pestañas. Puede usar estilos predeterminados o seleccionar entre varios de los ajustes preestablecidos provistos. O bien, puede establecer colores personalizados si lo desea. Otra característica interesante que ofrece el complemento es la capacidad de agregar archivos de iconos a los títulos de sus pestañas.
El complemento le costará alrededor de $ 25 por una licencia de sitio único y alrededor de $ 124 para usarlo en sitios ilimitados.
Pestañas de publicación de WordPress
Ahora aquí hay una solución de pestañas completas para usted. WordPress Post Tabs hace todo lo que podrías desear que haga un complemento de pestañas para tu sitio y algo más. Tampoco lo estoy hablando innecesariamente. Este complemento puede crear literalmente casi cualquier tipo de pestaña que puedas imaginar. Se integra a la perfección con cualquier tema que esté usando actualmente para crear pestañas que parezcan que siempre han estado allí. Y ese es más o menos el punto, ¿no?
La versión gratuita del complemento viene con 3 estilos, enlaces de navegación siguiente/anterior, una «etiqueta rápida» para agregar pestañas a su contenido y la capacidad de crear una cantidad ilimitada de conjuntos de pestañas en una sola publicación o página. También incluye un cuadro de estilo personalizado para agregar cualquier CSS que desee. Además, puede agregar videos, imágenes y tablas dentro de las pestañas.
La versión Pro viene con bastantes características más que hacen que esta oferta de TabberVilla sea digna de mención. Las funciones premium incluyen 12 estilos preestablecidos, un editor de estilo integrado en el administrador, más funciones de etiquetas rápidas y un marcador de posición de widget para mostrar Publicaciones relacionadas, Publicaciones populares y cualquier otro widget dentro de las pestañas.
Otras características incluyen pestañas anidadas, pestañas vinculables, la capacidad de agregar imágenes junto a los títulos de las pestañas, desplazamiento suave y soporte superior del equipo de desarrollo de complementos. Y dado que puede implementarlo todo usando códigos abreviados, diría que este complemento es una herramienta valiosa para tener en la caja de herramientas de su desarrollador. La versión premium actualmente se vende por $9 para una licencia de sitio único y $25 para multisitio.
Interfaz de usuario de WP: pestañas, acordeones, controles deslizantes
WP UI – Tabs, Accordions, Sliders es otra oferta gratuita que vale la pena ver. Como sugiere su nombre, este complemento se trata de mejorar la interfaz de usuario de su sitio para que los visitantes no se atasquen por el desorden. Desea que encuentren la información que buscan de inmediato y este complemento lo hace posible. En realidad, tiene varias opciones para elegir para organizar su contenido, incluidas pestañas, acordeones, spoilers y cuadros de diálogo. También viene con códigos cortos para una fácil implementación.
Funciona con jQuery y viene con 15 estilos diferentes para elegir. También puede establecer diferentes estilos en cada página. Además, puede crear estilos y temas personalizados si surge la necesidad. Incluso puede mostrar publicaciones y fuentes como pestañas si lo desea utilizando una selección de códigos cortos incluidos. La documentación incluida también hace que este complemento sea fácil de entender. Y hay una versión premium llamada Accordions Plus si desea llevar sus tabulaciones y acordeones al siguiente nivel.
DIAPOSITIVA DE PESTAÑA
Si necesita una solución de pestañas simple para su sitio, TAB SLIDE podría ser la solución. Este complemento facilita la visualización de una gran cantidad de contenido en un espacio pequeño. Agregue widgets, fuentes RSS, videos, imágenes, publicaciones, menús, formularios de registro y más, todo dentro de las pestañas. Después de la instalación, aparecerá un panel de configuración en el Tablero. Puede modificar el tamaño de sus pestañas, las fuentes de la página, la opacidad, el posicionamiento y más.
Widget de pestaña WP
Otro complemento gratuito que me gusta se llama WP Tab Widget . Presenta un efecto de carga lenta, que hace que las pestañas sean particularmente atractivas. Originalmente fue diseñado como un complemento premium, pero ahora está disponible de forma gratuita, lo que ciertamente no puedo discutir. El efecto de carga diferida es posible gracias a AJAX . Eso significa que su sitio se cargará rápido, incluso si tiene una tonelada de contenido en sus pestañas. También puede insertar contenido con pestañas en un widget en la barra lateral de su sitio para aumentar la prominencia del contenido al que desea que los visitantes presten especial atención.
Otras características incluyen un sistema de paginación incorporado y control total sobre la cantidad de pestañas y publicaciones dentro de las pestañas que se mostrarán. ¿Mencioné también que responde? Para que sepas que se verá bien en cualquier dispositivo. También puede seleccionar entre 3 estilos diferentes y mostrarlo en cualquier lugar donde pueda aparecer un widget.
Fichas de diapositivas
Si está buscando otro complemento premium para probar, ¿puedo sugerir SlideTabs ? Con este plugin puedes mostrar tantas pestañas como quieras gracias a los botones direccionales. De esa manera, los visitantes de su sitio pueden hacer clic en una serie de pestañas, incluso si se extienden más allá del espacio típico asignado para ellos. También está habilitado para pantalla táctil, por lo que los usuarios pueden pasar de una pestaña a otra fácilmente.
Puede elegir entre varios diseños diferentes y personalizarlos con CSS, además puede insertar casi cualquier tipo de contenido que desee dentro de las pestañas. ¿Por qué limitarse al texto sin formato cuando puede incluir fotos, videos, mapas, formularios, controles deslizantes de imágenes, galerías y más? Incluso puede mostrar sus publicaciones dentro de las pestañas si lo desea. También usa AJAX, por lo que sabe que no atascará su sitio de ninguna manera.
El complemento también garantiza que su contenido se muestre dentro de HTML semántico , lo que significa que es compatible con SEO y es compatible con la mayoría de los navegadores. Incluye compatibilidad con enlaces externos, API y funciones de devolución de llamada, así como la capacidad de reproducir automáticamente las pestañas. Con múltiples configuraciones de animación, deslizamiento de bucle, un HTML y un editor visual, códigos abreviados y vistas previas de pestañas, este complemento realmente no deja piedra sin remover en términos de satisfacer todas sus necesidades relacionadas con las pestañas. Para una licencia de un solo sitio, puede esperar pagar $29. Multisitio cuesta $ 59, mientras que una licencia ilimitada cuesta $ 189.
Recarga de pestañas de mate
El último complemento del que voy a hablar aquí hoy es Mate Tabs Reload . Es otra opción premium, pero le da un giro único a la mesa, así que tuve que incluirla. Combina las características de los complementos de pestañas y acordeón en una interfaz conveniente. Es totalmente receptivo, está listo para retina y admite efectos de desplazamiento y eventos de clic, lo que lo convierte en una experiencia interactiva para los visitantes de su sitio.
También puede hacer que las pestañas se abran fuera de los enlaces. Admite códigos abreviados, incluye un selector de color y desplazamiento automático, y funciona en la mayoría de los navegadores. Puede obtener una licencia de sitio único de Mate Tabs Reload por $14 y una licencia extendida por $70. No parece que se ofrezca una licencia ilimitada en este momento.
Terminando
Apenas rasqué la superficie de los complementos de pestañas disponibles con este artículo. En serio, ¡hay más de los que puedas imaginar! Y aunque eso puede ser un poco abrumador cuando estás tratando de tomar una decisión, creo que es algo bueno. Después de todo, es mejor tener demasiadas opciones que no tener suficientes, ¿verdad? Además, las pestañas son tan útiles que vale la pena dedicar un tiempo a reflexionar sobre qué solución se adapta mejor a sus necesidades o las necesidades de sus clientes.
¿Usas alguno de los complementos que mencioné aquí? ¿Cuál ha sido tu experiencia hasta ahora? ¿Está satisfecho o cree que faltan características que, si se agregan, podrían mejorar la función? Y, por supuesto, avíseme si omití su complemento de pestaña de WordPress favorito. Quién sabe, tal vez tenga que hacer una segunda entrega algún día.
Imagen en miniatura del artículo de Anastasia_B / shutterstock.com