Crear un equilibrio entre el contenido y la experiencia del usuario es el objetivo final al diseñar un sitio web. El contenido mantiene a los usuarios interesados, pero puede ser abrumador si es demasiado. Los usuarios pueden confundirse y abandonar su sitio si no encuentran lo que buscan.

Puede ser difícil encontrar un equilibrio entre deleitar a sus clientes y brindarles toda la información que necesitan. Aun así, existen varios métodos de ayuda, uno de ellos son las pestañas de página.

Las pestañas son un sistema de navegación de clasificación de contenido que ayuda a los usuarios a navegar por su sitio. Afortunadamente, los usuarios de WordPress tienen acceso a una variedad de complementos de WordPress, por lo que no tienen que codificar esta función desde cero.

Si bien hay muchos enchufes para tarjetas de alta calidad disponibles, hay belleza en la simplicidad. A continuación se muestra una lista de 14 complementos de tarjeta de WordPress esenciales que cualquiera puede usar. Son simples y perfectos para aquellos que solo quieren limpiar su sitio sin distracciones.

1. Widget de tarjeta WP

Este complemento fácil de usar ofrece una gama de funciones avanzadas que le permiten personalizar sus tarjetas a su gusto. La descarga incluye 21 plantillas de tarjetas predefinidas como «Publicaciones relacionadas», «Publicaciones populares» y «Comentarios recientes», por lo que es ideal para las personas que desean usar tarjetas para aumentar la participación de los usuarios. Puede personalizar aún más 21 plantillas y no se necesitan conocimientos de codificación para esto.

Mejor para: sitios web que necesitan un complemento de pestaña de WordPress altamente personalizable, popular y flexible.

2. Pestañas responsivas (a través de WP Darko)

Responsive Tabs es un complemento minimalista que es perfecto para pestañas simples centradas en el contenido. El Editor de marcadores le permite reordenar sus marcadores en su sitio y personalizarlos con sus colores de énfasis preferidos.

La tarjeta también tiene una función de punto de interrupción, lo que significa que puede decidir cuándo los usuarios ven sus tarjetas. La descarga también le permite crear accesos directos para que las tarjetas se puedan insertar en HTML e incrustar en las páginas de su sitio.

Mejor para: Diseños de pestañas sencillos y gratuitos con ajustes de estilo básicos.

3. Tabby Responsivo Pestañas

Tabby Responsive Tabs es muy elogiado por los usuarios por su función de encabezado semántico. Los encabezados semánticos le permiten marcar contenido importante en sus tarjetas con etiquetas de encabezado como

y

. Esto le da a los lectores una idea clara de qué contenido es esencial y ayuda a que su sitio web se posicione en los motores de búsqueda.

En términos de formato, el complemento utiliza pestañas horizontales receptivas. Las personalizaciones se pueden realizar dentro del CSS del sitio o mediante Complemento del personalizador de pestañas sensibles de Tabby.

Mejor para: propietarios de sitios web que desean un complemento de pestaña liviano y pueden usar CSS para aplicar estilo a sus secciones de pestañas.

4. Bloques finales

Ultimate Blocks es un complemento universal. La descarga viene con 19 plantillas prefabricadas, que incluyen Click to Tweet, Content Filter y Star Rating. La superposición se puede realizar horizontal o verticalmente y cualquier otro ajuste se realiza individualmente.

Tenga en cuenta que el complemento de la pestaña Ultimate Blocks solo se puede usar cuando se descarga todo el complemento Ultimate Blog.

Mejor para: aquellos que necesitan un complemento de bloque integral con una biblioteca de elementos de página atractivos, incluido un bloque de contenido con pestañas.

5. tarjetas preciosas

Wonder Tabs es un complemento de tarjeta imprescindible, perfecto para agregar tarjetas sin funciones adicionales. La descarga le permite elegir entre pestañas verticales u horizontales y todas las personalizaciones adicionales deben ser realizadas por el desarrollador en HTML.

Mejor para: programadores familiarizados con HTML y CSS.

6. Marcadores expertos

Xpert Tab es un generador de códigos abreviados que le permite crear contenido con pestañas para mostrarlo en varias páginas. Cinco estilos preestablecidos pueden crear un número ilimitado de tarjetas y mostrarlas en cualquier página. Las personalizaciones se pueden hacer dentro de CSS.

Mejor para: creando una sección de contenido con pestañas basada en Bootstrap-CSS de forma gratuita.

7. Squelch Tabs y atajos de acordeón

Squelch Tabs es otro generador de herramientas de shortcode. Las tarjetas se pueden colocar vertical u horizontalmente, y todas tienen un estilo de acordeón, lo que significa que crecen y se encogen según la entrada del mouse. Esto puede ayudarlo a limpiar la interfaz de su sitio web sin restringir su contenido. El complemento también permite la personalización.

Mejor para: acordeones horizontales personalizables, acordeones verticales y pestañas colocadas con accesos directos.

8. Tarjetas profesionales

La descarga de marcadores de WP Shopmart viene con 20 diseños prefabricados y 30 funciones de animación interactiva, lo que brinda a los usuarios una experiencia única. Puede realizar más ajustes de diseño, color y fuente según sea necesario. Todos los marcadores pueden contener texto, imágenes y videos.

Mejor para: Pestañas ilimitadas, sin código y personalizables por un pequeño pago único.

9. Pestañas responsivas (a través de Oxilab)

Las tarjetas receptivas son excelentes para aquellos que desean evaluar sus opciones antes de decidirse por un formato de tarjeta. Vista previa en vivo le permite hacer ajustes y obtener una vista previa antes de publicar. Contiene 22 diseños prefabricados y todas las pestañas tienen una función de acordeón.

Mejor para: Pestañas y acordeones modernos, de aspecto profesional y aptos para dispositivos móviles con diseños prefabricados para que no tenga que empezar desde cero.

10 Pestaña lateral fácil

Easy Slide Tab es para aquellos que desean aumentar la participación de los usuarios. Puede crear pestañas individuales y usarlas para alentar a los usuarios a realizar una acción específica, como suscribirse a un boletín informativo, descargar una foto o comprar un producto. También puede personalizar los colores y agregar más tarjetas.

Mejor para: Pestañas laterales sencillas y gratuitas con opciones básicas de personalización.

11 Pestañas responsivas (a través de I Thirteen Web Solution)

Las pestañas receptivas son excelentes para personas con conocimientos mínimos de codificación. Puede usar la pestaña de administración para crear un shortcode, editar el diseño y personalizar colores y fuentes. Puede obtener una vista previa de sus cambios antes de publicarlos, y todas las tarjetas tienen una función de acordeón.

Mejor para: marcadores horizontales, verticales y de acordeón gratis con personalización simple y sin código.

12 Atajos definitivos

Shortcodes Ultimate es una colección de complementos de WordPress con una función de pestaña. Ofrece inserción de shortcode con un solo clic con vista previa en vivo, y se pueden realizar cambios en CSS. Los colores, las fuentes y los íconos son personalizables y todas las pestañas pueden contener imágenes y videos.

Mejor para: implementación de docenas de elementos de página usando shortcode, incluida la función de contenido con pestañas.

13 Pestañas de productos personalizadas para WooCommerce

Esta pestaña es perfecta para sitios que usan la función WooCommerce. Puede marcar sus productos para proporcionar a los usuarios información adicional, como descripciones de productos y reseñas de clientes. Se pueden realizar personalizaciones en el código HTML.

Mejor para: Sitios de WooCommerce con páginas de productos con pestañas.

14 Pestañas laterales

El complemento de pestañas laterales es único en el sentido de que sus pestañas se muestran como ventanas emergentes. Puede colocarlos en el costado de cualquier ventana del sitio, vertical u horizontalmente, y aparecen cuando un usuario hace clic en ellos. Esto es perfecto para aquellos que quieren que los usuarios dicten su propia experiencia en su sitio. Puedes personalizar las tarjetas en CSS.

Tenga en cuenta que esta tarjeta requiere descarga Enchufe emergente verde.

Mejor para: pestañas laterales premium que activan ventanas emergentes, cajas de luz o modalidades.

¿Cómo puedo crear marcadores de WordPress sin un complemento?

El complemento de WordPress es, con mucho, la forma más fácil y efectiva de marcar su sitio web. Sin embargo, si prefiere no instalar un nuevo complemento de implementación de pestañas, su mejor opción es usar un complemento de creación de páginas de WordPress que ya haya instalado. Si está utilizando uno de estos enchufes, es posible que no necesite instalar otro enchufe de tarjeta en la parte superior.

Si usa un popular complemento de creación de páginas, probablemente pueda agregar pestañas de esta manera. Por ejemplo, Elementor tiene Widget de tarjetas es fácil de ajustar y organizar las tarjetas de contenido horizontal o verticalmente.

Fuente de imagen

Similarmente, Divi Builder tiene un módulo de marcadores que se puede agregar y cambiar en la interfaz del constructor visual.

Fuente de imagen

Finalmente, los usuarios de WPBakery pueden comprar e instalar Complemento de hoja de contenido WPBakery para agregar pestañas receptivas y personalizables a sus sitios web.

Ejemplos de pestañas de WordPress

En busca de inspiración para el diseño, veamos algunos ejemplos de marcadores bien hechos en sitios de WordPress. Primero, Toyota Brasil agrega pestañas para distinguir entre modelos. Cada pestaña contiene un control deslizante con pestañas de productos en las que se puede hacer clic.

Fuente de imagen

Para un uso más exclusivo de las pestañas, Sitio de WordPress de Nalgene incluye un configurador donde los clientes pueden diseñar sus botellas. Cuenta con pestañas verticales que permiten a los usuarios seleccionar el tipo de botella en el lado izquierdo.

Fuente de imagen

Las demostraciones de complementos también son una buena fuente de inspiración sobre cómo pueden funcionar las pestañas en su sitio: aquí hay una página de demostración para Tapón Tabs Proque contiene numerosos ejemplos del complemento en acción. Aquí hay solo un ejemplo:

Fuente de imagen

Complementos de pestañas de WordPress para organizar su sitio web

En resumen, los marcadores están diseñados para que su sitio web sea más fácil de usar. Puede mostrar todo el contenido necesario a sus usuarios sin el riesgo de abrumarlos y abandonar su sitio. Las tarjetas, por otro lado, no deben distraer la atención del contenido, y los diseños minimalistas pueden hacer precisamente eso.

Nota del editor: esta publicación se publicó originalmente en septiembre de 2020 y se actualizó para que sea completa.