Uno de nuestros lectores nos preguntó recientemente cómo dividir las publicaciones en pestañas para ahorrar espacio y facilitar que los usuarios encuentren lo que buscan.
En WPBeginner, hemos ayudado a muchos propietarios de sitios web a mejorar la organización de su contenido con diseños en pestañas.
Agregar contenido en pestañas te permite incluir más información sobre tus productos y servicios en una sola página, mejorando la experiencia del usuario y manteniendo todos los detalles en un lugar conveniente. Como resultado, reducirás el desorden de la página y facilitarás la navegación para los visitantes.
En este artículo, te mostraremos cómo agregar contenido en pestañas a tus publicaciones y páginas de WordPress, asegurando que tus visitantes puedan encontrar fácilmente lo que necesitan.
¿Cuándo deberías usar contenido en pestañas en WordPress?
Usar pestañas te permite agregar más detalles en un espacio pequeño o dividir grandes bloques de contenido para una mejor organización y experiencia de usuario.
Digamos que tienes una tienda en línea. Puedes agregar pestañas para descripciones de productos, reseñas, especificaciones técnicas y más. Esta separación ayuda a proporcionar todos los detalles para tus clientes en un solo lugar y hace que la página sea interactiva.
De manera similar, puedes ver contenido en pestañas en las páginas de plugins de WordPress.org. La página se divide en diferentes secciones usando pestañas como detalles, reseñas, instalación, soporte e información de desarrollo.
El contenido en pestañas ayuda a mantener a las personas en tu sitio web de WordPress. No tienes que enviar a las personas a otra página para obtener todos los detalles que necesitan sobre tus productos y servicios.
Dicho esto, veamos cómo puedes agregar contenido en pestañas a páginas y publicaciones de WordPress.
Aquí están los 2 métodos que usaremos para lograr esto:
- Agregar contenido en pestañas usando un creador de páginas de destino
- Agregar contenido en pestañas usando un plugin de WordPress
Método 1: Agregar contenido en pestañas usando un creador de páginas de destino
La mejor manera de agregar contenido en pestañas en WordPress es usando SeedProd. Es el mejor creador de páginas de destino y de sitios web de WordPress. SeedProd es fácil de usar para principiantes y viene con un constructor de arrastrar y soltar, plantillas pre-diseñadas y múltiples opciones de personalización.
Para este tutorial, usaremos la licencia SeedProd Pro porque incluye bloques avanzados para agregar contenido en pestañas. También hay una versión SeedProd Lite que puedes usar gratis.
Primero, necesitarás instalar y activar el plugin SeedProd. Si necesitas ayuda, consulta nuestra guía sobre cómo instalar un plugin de WordPress.
Después de la activación, serás redirigido a la pantalla de bienvenida de SeedProd en tu panel de WordPress. Continúa e ingresa tu clave de licencia, que puedes encontrar en el área de tu cuenta de SeedProd.
A continuación, puedes ir a SeedProd » Páginas de destino desde tu panel de administración de WordPress.
Después de eso, simplemente haz clic en el botón 'Crear nueva página de destino'.
Desde aquí, SeedProd te mostrará múltiples plantillas de páginas de destino entre las que puedes elegir.
Adelante, selecciona una plantilla que te gustaría usar. Simplemente pasa el cursor sobre la plantilla y haz clic en el ícono de marca de verificación naranja.
Ahora se abrirá una ventana emergente donde deberás ingresar un título para tu página en el campo 'Nombre de la página' y un slug de permalink en 'URL de la página'.
Después de eso, simplemente haz clic en el botón 'Guardar y empezar a editar la página'.
Esto iniciará el constructor de arrastrar y soltar de SeedProd. Ahora puedes agregar diferentes bloques a tu plantilla y editar elementos existentes.
Para agregar contenido en pestañas, simplemente arrastra el bloque 'Pestañas' en la sección Avanzado y suéltalo en la plantilla de la página.
A continuación, puedes personalizar el bloque de pestañas en SeedProd.
Por ejemplo, puedes hacer clic en el botón 'Agregar nuevo elemento' para añadir tantas pestañas como desees. Además, hay opciones para editar el tamaño de fuente, el espacio entre el texto y la alineación del contenido en cada pestaña.
A continuación, puedes hacer clic en cualquier pestaña para editarla aún más y agregar detalles.
Por ejemplo, puedes cambiar el título de cada pestaña, agregar contenido y cambiar el ícono de la pestaña.
Además de eso, SeedProd también ofrece opciones de personalización avanzadas.
Simplemente haz clic en la pestaña ‘Avanzado’ en el menú de tu izquierda. Aquí, puedes cambiar el diseño de las pestañas, la tipografía, el color, el color de fondo, los bordes y más.
Cuando hayas realizado cambios en el bloque de pestañas y personalizado tu página de destino, no olvides hacer clic en el botón verde ‘Guardar’ en la parte superior.
Después de eso, puedes dirigirte a la pestaña ‘Configuración de página’.
A continuación, puedes hacer clic en el interruptor ‘Estado de la página’ y cambiar el estado de Borrador a Publicar.
Puedes hacer clic en el botón ‘Guardar’ para almacenar tus cambios y cerrar el constructor de páginas.
Ahora, simplemente visita tu sitio web para ver el contenido en pestañas en la página de WordPress en acción.
Método 2: Agregar contenido en pestañas usando un plugin de WordPress
Si no quieres usar un constructor de páginas de destino, puedes usar un plugin dedicado de WordPress para agregar contenido en pestañas a tus publicaciones y páginas.
Primero, necesitarás instalar y activar el plugin Tabs Responsive. Para más detalles, por favor consulta nuestra guía sobre cómo instalar un plugin de WordPress.
Tras la activación, puedes ir a Tabs Responsive » Agregar Nuevas Pestañas desde tu panel de WordPress y comenzar ingresando un nombre para tus pestañas.
A continuación, puedes desplazarte hacia abajo para agregar tantas pestañas como quieras haciendo clic en el botón rojo ‘Agregar Nuevas Pestañas’.
Además, puedes editar cada pestaña individualmente cambiando su título, agregando una descripción, usando un icono de pestaña diferente y editando la ubicación del icono.
Además de eso, el plugin también ofrece diferentes ‘Configuración de Pestañas’ en el menú de tu derecha.
Por ejemplo, puedes elegir si mostrar el título de las pestañas, seleccionar diferentes opciones para el título e ícono, cambiar la posición del ícono, mostrar el borde de las pestañas, seleccionar el color del texto, y más.
Una vez que hayas realizado los cambios, ahora puedes usar las pestañas en cualquier publicación o página de blog utilizando el shortcode generado por el plugin.
Simplemente haz clic en el botón 'Publicar'.
A continuación, puedes agregar las pestañas en cualquier página o publicación usando el shortcode [TABS_R id=130]. Solo asegúrate de reemplazar el número de ID en el shortcode con tu número de ID de pestaña.
Puedes encontrar fácilmente el ID de la pestaña y el shortcode yendo a Pestañas Responsive » Todas las pestañas y copiando el código en la columna Shortcode de pestañas.
A continuación, solo necesitas agregar una nueva publicación o editar una existente.
Cuando estés en el editor de bloques de Gutenberg, procede a agregar un bloque de shortcode para ingresar el shortcode.
Después de eso, puedes previsualizar tu publicación o página de blog. Si todo está en orden, puedes hacer clic en el botón 'Publicar' o 'Actualizar' para guardar las pestañas en tu publicación.
Ahora, visita tu sitio web para ver el contenido en pestañas en acción.
Esperamos que este artículo te haya ayudado a aprender cómo agregar contenido con pestañas a las publicaciones y páginas de WordPress. También puedes ver nuestra guía sobre WooCommerce simplificado y nuestra lista experta de los mejores plugins de WordPress para sitios web de negocios.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Jiří Vaněk
Esta suena como una gran opción para personalizar mejor los artículos de reseñas de productos. Los usuarios podrían cambiar fácilmente entre la calificación del producto (reseña), información detallada del producto o una pestaña que les ofrezca lugares para comprarlo. Como plugin de reseñas, esta solución parece verdaderamente excelente, y gracias por el gran consejo.
Ahmed Abo Rwash
Es excelente, profesional y valioso. Gracias
Soporte de WPBeginner
¡De nada!
Administrador
Alexander
Hola, necesito mostrar publicaciones como pestañas, necesito que el título de la publicación sea la etiqueta de la pestaña y el contenido de la publicación sea el contenido de la pestaña, ¿alguna recomendación sobre cómo hacerlo?
Soporte de WPBeginner
Por lo que parece que buscas, deberías revisar algunas de las opciones de nuestra guía a continuación:
https://www.wpbeginner.com/wp-tutorials/how-to-display-recent-posts-in-wordpress
Administrador
msiddiqui
explica muy simple que eres el número 1 en WordPress
Soporte de WPBeginner
Glad you like our content
Administrador
navya
Soy principiante en WP. ¿Alguien puede ayudarme a resolver mi problema?
En mi sitio hay una parte de nuestra historia como historia, por ejemplo. Si hago clic en la pestaña 2018, quiero obtener la descripción correspondiente sobre 2018. ¿Cómo hacer esto en WP? Gracias de antemano.
Dan Acton
Me encanta esto, no es el fin del mundo si esta opción no está disponible, solo me gustaría poder editar un conjunto actual de pestañas usando la misma interfaz en la que las creé. ¿Es esto posible en lugar de tener que pegar contenido nuevo entre los shortcodes?
Andi Sutrisnya
¿Cómo detener la reproducción de video en una pestaña al cambiar a otra pestaña si tengo video en cada pestaña? Por favor, ayúdame.
dany
gracias hermano, esto es útil
Lena
¿Es posible tener solo un botón en el editor de usuarios que cree automáticamente una nueva pestaña donde él/ella pueda escribir su contenido?
Estoy planeando una plataforma para compartir contenido...
David
Hola,
Estoy buscando pestañas verticales que tengan la opción de agregar un enlace para cada pestaña para que cada pestaña tenga una dirección.
¿Puede sugerir un plugin de pestañas que tenga esta opción o un tutorial que explique cómo agregar esta funcionalidad?
Gracias por cualquier ayuda.
David
Soni
Este es un artículo útil.
Me gustaría saber sobre el contenido en pestañas en la página principal de wpbeginner. ¿Podría este plugin crear el mismo contenido en pestañas?
¿O usas otro plugin para crear ese contenido en pestañas?
Creo que esa pestaña es genial.
Ssekito
Por favor, muéstrame cómo publicar contenido bajo las diferentes pestañas que he puesto en mi blog.
Gracias
Soporte de WPBeginner
Tu blog está alojado en WordPress.com. Consulta nuestra guía sobre la diferencia entre WordPress.org autoalojado vs. blog gratuito de WordPress.com.
Administrador
Ssekito
¡Gracias por la respuesta!
En realidad soy principiante en blogs de WordPress y quiero familiarizarme primero para poder actualizar a WordPress.org con Bluehost como mi host.
¡Quiero monetizar mi blog ya que me dedico al marketing de afiliados! Actualmente quiero agregar contenido justo debajo de cada página que creé en la barra de menú y algunos botones para compartir en redes sociales, ¡aunque me está resultando un desafío!
Por favor, guíame en esto.
Gracias.
Sase Antic
¡Información útil sobre pestañas en WordPress!
Sin embargo, ¿hay alguna solución en este plugin o en cualquier otro plugin de WP para agregar pestañas en todo el sitio (a nivel de sitio) y no solo en publicaciones y páginas?
Por ejemplo: Necesito un "grupo de pestañas" que consista en 3 pestañas, y me gustaría agregarlo en todo el sitio (el mismo contenido / pestañas en todas las páginas y publicaciones; como un menú / submenú pero con funcionalidad de pestañas).
¿Es esto posible?
De lo contrario, es mucho trabajo agregar el mismo "grupo de pestañas" a todas las páginas y publicaciones una por una.
¡Gracias de antemano por la respuesta!
uvie
¿qué pasa si necesito que la pestaña muestre contenido en forma de widgets? ¿cómo puedo lograr eso?
Tony
Este parece ser un gran plugin de pestañas, pero sería aún mejor si pudiera agregarlo también a las Páginas, no solo a las publicaciones. Busqué por todas partes, pero no aparece en el editor de Páginas, ¿hay alguna posibilidad de eso?
Sameer
Hola,
¿Es posible crear tablas dentro de pestañas en las páginas de blogs de WordPress? Por favor, mira esta página: , Por favor, ayúdame a crear algo como esto en WP.
Soporte de WPBeginner
Sí, es posible. Necesitarás generar el código HTML requerido para la tabla en el área de contenido de cada pestaña.
Administrador
Weiwei
si en el contenido hay más páginas, ¿qué debo hacer?
Personal de WPBeginner
Si no puedes entender por qué los necesitarías, entonces significa que realmente no los necesitas en tu sitio web. Escribimos sobre muchas cosas geniales que los usuarios pueden agregar a sus sitios web. Si los usuarios encuentran algo útil, entonces pueden agregarlo a su sitio.
Shah
Soy muy nuevo en la creación de un sitio web. Creo que, al estar tan avanzado, tu suposición de cuán bien alguien como yo puede entender y seguir tus instrucciones está muy exagerada. Todavía no entiendo para qué sirven las pestañas. Sé que lo explicaste, e incluso nos mostraste dónde podemos verlas en acción, pero todavía no entiendo por qué necesito tener pestañas. Sería genial si fueras más deliberado al darnos, a las personas más lentas, más ejemplos. ¡Gracias!
Heather Lewis
Este es un artículo útil. Usaré este plugin siempre que sea necesario. Creo que es mucho mejor en comparación con el que estoy usando en términos de diseño. Gracias por compartir.
vinayak
hola y gracias por proporcionar una publicación donde pudiera agregar contenido con pestañas en mi blog.
estaba buscando un plugin que pudiera hacer esto.
Amjaru
¿El contenido en las pestañas es buscable o el código corto evita que el contenido sea buscado?
Personal de WPBeginner
Seguirá siendo buscable.
Knitwit23
¿puedes mostrarnos una publicación donde esto esté en uso?
KonaGirl
¿Este plugin creará una jerarquía de menú con pestañas? Si es así, ¿debo eliminar las pestañas del menú antes de agregar este plugin?
Personal de WPBeginner
Se usa dentro de publicaciones y páginas para mostrar contenido en pestañas.
Sally Bennett
Sería muy útil si explicara qué son las 'pestañas' a un principiante total.
Personal de WPBeginner
Las pestañas son como las pestañas en una carpeta o un índice telefónico. Permiten a los usuarios navegar por diferentes secciones haciendo clic en el título de la pestaña. Puedes verlas en acción aquí.