Cómo crear Pestañas de WordPress Inteligentes y hermosas

Cómo crear Pestañas de WordPress Inteligentes y hermosas

Dato curioso: ¿te diste cuenta de que incluso wordpress.org ¿utiliza pestañas de WordPress para fragmentar información?

Mira esto:

Fuente: wordpress.org

Las pestañas de WordPress son un tipo de navegación que puede mejorar la experiencia del cliente. ¿Cómo es eso? No saturando mucha información en párrafos, sino usando un mejor método de organización.

La navegación por pestañas es similar a la organización de archivos en un consultorio o en el médico.

No debe confundirse con menús. La mayoría de las veces, los elementos de menú abren una página separada con su propia URL. Aquí no se producirá ningún cambio de URL.

No debe confundirse con acordeones tampoco. Un acordeón apilará información verticalmente. Se puede hacer clic en los encabezados para mostrar u ocultar el contenido asociado a ellos.

Ahora, ¿por qué su sitio de WordPress necesitaría pestañas? Para mejorar la navegación, la usabilidad y, por lo tanto, la satisfacción del cliente y las tasas de conversión.

Muchas razones, ¿verdad?

La navegación por pestañas sigue siendo una práctica común en el comercio electrónico para presentar productos. Muchos visitantes ya reconocen pestañas o esperan pestañas en ciertos lugares.

Digamos que vendes productos electrónicos. Tendrá que presentar mucha información del producto:

• Descripción del producto
• Fotos del producto
• Especificaciones técnicas
• Comentarios
• Información de garantía
• Detalles de envío

Las pestañas le ayudarán a comprimir contenido grande en espacios limitados.

Ahora, en este artículo, comenzaremos proporcionándole inspiración para el diseño de pestañas. A continuación, analizaremos un poco algunas de las mejores prácticas de casos. Al final, te guiaré a través de los aspectos técnicos de las pestañas de WordPress.

¡Vamos!

Pestañas: algo de inspiración

Ahora, veamos algunos sitios web que usan pestañas. Definitivamente estoy en la prueba. Las imágenes pueden explicar mejor las cosas que las palabras, ¿no crees?

Veamos, eBay está usando pestañas para la descripción del producto. Todas las especificaciones técnicas van bajo «Descripción», y recopilaron «envío y pago» en la misma pestaña. Estoy bastante seguro de que han probado el diseño porque, para un sitio con tal tráfico, cualquier cambio puede afectar en gran medida las tasas de conversión.

Fuente: ebay.com

BobbyBrown cosmetics apuesta por un enfoque minimalista, las pestañas no tienen un enfoque similar a un botón. Utilizan un subrayado para informar al usuario de que ha seleccionado una pestaña.

Fuente: bobbibrowncosmetics.com

Siempre me siento perdido cuando voy a booking.com. Tienen mucha información que necesita para desplazarse hacia abajo. Recientemente me di cuenta de que hicieron algunos cambios para reducir el desplazamiento, pero aún así, no es suficiente (para mí).

Trivago, por otro lado, parece organizar la información un poco mejor. Sé que es difícil cuando necesitas dar tantos detalles.

Utilizan pestañas para organizar la información del hotel, como información general, información, fotos, reseñas, ofertas.

Fuente: trivago.las pestañas com

son una práctica común en los sitios web que ofrecen paquetes de viaje, como vuelos, alojamiento, alquiler de automóviles.

Expedia lo hace muy bien cuando presenta su oferta de 6 servicios. La experiencia es limpia y poco intrusiva.

Fuente: expedia.com

Honda utiliza pestañas de una manera más creativa. Mezcla imágenes y videos junto con texto para vender una gran experiencia Honda.

Fuente: automobiles.honda.com

Pestañas de WordPress: prácticas recomendadas

En pocas palabras, las pestañas son un conjunto de botones que generalmente se establecen horizontalmente. Esta es la razón por la que su diseño debe estar muy cerca de un diseño de botón.

Ahora, veamos un poco las mejores prácticas para usar pestañas en su sitio web de WordPress:

• No opte por filas múltiples, hará que sea difícil para el usuario recordar qué pestaña visitó. Si te das cuenta de que necesitas más filas, esto significa que necesitarás encontrar una mejor manera de organizar la información
• Mantener los encabezados de las pestañas cortos y dulces
• Usar pestañas solo cuando los usuarios no necesiten ver contenido de varias pestañas al mismo tiempo
• Indicar claramente qué pestaña está activa
• Las pestañas no seleccionadas deben permanecer visibles y no perderse en segundo plano
• Asegúrese de que su pestaña aparezca como botones separados con los que pueda interactuar
• Agregue efectos de desplazamiento en pestañas como lo haría en botones
• Use pestañas cuando tenga entre dos y nueve pestañas diferentes categorías de contenido
• Las categorías son de naturaleza similar, un usuario esperaría verlas allí (por ejemplo: descripción del producto, reseñas de productos)
• No use navegación por pestañas cuando tenga la intención de insertar un enlace «más»
• Puede usar degradados para agregar profundidad y dimensión a las pestañas.

Cómo crear pestañas de WordPress usando creadores de páginas

Estoy utilizando el creador de páginas de Colibri para este ejercicio.Las pestañas

se pueden encontrar como componente.

Puede encontrar componentes al hacer clic en » + » en la parte superior izquierda.

Vaya a Componentes y arrastre el componente «Pestaña» a la vista previa de su sitio web a la derecha.

A continuación, puedes jugar con las opciones de personalización de la izquierda.

Cuando tu pestaña parezca que quieres, simplemente pulsa «Publicar» y estarás en vivo.

Pestañas: un complemento para ayudarte a configurar pestañas de WordPress

Si tienes una tienda en línea integrada con WooCommerce, en WordPress hay dos complementos muy populares para pestañas de WordPress.

Fuente: wordpress.org

Pero, quiero presentarles a uno de mis favoritos: las pestañas.

Fuente: wordpress.org

Tabs tiene muchas opciones de personalización que pronto te gustarán. Por qué siento que a ti también te encantará:

• Diseñará pestañas de WordPress para dispositivos móviles
• Puede trabajar con códigos cortos
• Las pestañas funcionan arrastrando y soltando
• Tiene más de 20 plantillas de diseño para que no tenga que molestarse con la inspiración
• 500+ Fuentes de Google
• los temas por ahí.

Pestañas de WordPress:las conclusiones

Las pestañas están aquí para hacer que la información sea más fácil de digerir en un mundo de períodos de atención más cortos. En términos de herramientas, hay muchas que pueden ayudarte a configurar pestañas de WordPress. Esto es lo más fácil de hacer.

Más importante es averiguar qué tipo de información puede caber en tus pestañas. Si no estás seguro de que una pestaña te ayudará a organizar cierta información, siempre puedes hacer una investigación de usuarios o una prueba A/B. Nuestras propias suposiciones no son suficientes. Los datos reales de comportamiento te llevarán a la respuesta correcta.

Al final del día, debe preocuparse por la facilidad de uso, los compartimentos y la velocidad del sitio web.

Ahora, si te gustó este artículo y quieres aprender más sobre cómo diseñar un sitio web de WordPress, asegúrate de suscribirte a nuestro canal de Youtube y seguirnos en Twitter y Facebook.