Cómo Crear Pestañas en WordPress para Contenido Impresionante en Pestañas

¿Quieres aprender a crear pestañas en WordPress?

Agregar pestañas a su sitio web de WordPress es una excelente manera de organizar diferentes tipos de contenido y ahorrar espacio en publicaciones y páginas.

En este artículo, le mostraremos cómo agregar pestañas en WordPress paso a paso.

¿Por qué necesita contenido de WordPress con pestañas?

Además de ordenar el contenido, las pestañas hacen que sea mucho más fácil mantener a los visitantes de su sitio web activos y comprometidos. Debido a que las pestañas agrupan los temas de contenido en una página, los usuarios no necesitarán hacer clic para ir a otras páginas, lo que es ideal para periodos de atención más breves.

Por ejemplo, WordPress.org usa pestañas en su página de complementos para mostrar información como detalles, reseñas, soporte y desarrollo.

Algunas otras formas de usar las pestañas incluyen:

• En las descripciones de productos para mostrar diferentes especificaciones de productos
• En la barra lateral de tu blog para filtrar categorías
• En las páginas de contacto para ordenar la información de contacto

Consejo profesional: las pestañas no deben confundirse con los acordeones. Los usuarios hacen clic en las pestañas para cambiar la información, mientras que los acordeones se expanden para revelar información.

Ahora que sabe más sobre cómo funcionan las pestañas y por qué las necesita, veamos cómo agregar pestañas a su sitio de WordPress.

A continuación, compartiremos 2 formas de agregar pestañas a WordPress. Primero, usaremos un generador de páginas, luego le mostraremos cómo crear pestañas con un complemento de WordPress.

Empecemos.

Método 1: Cómo crear pestañas en WordPress con un generador de páginas

Para el primer método, usaremos SeedProd, el mejor creador de sitios web de WordPress, para agregar contenido con pestañas a su sitio web.

SeedProd es un poderoso generador de páginas de arrastrar y soltar que le permite crear diseños de WordPress flexibles sin escribir código. Con sus kits de sitios web profesionales, plantillas de página de destino y editor visual en vivo, puede personalizar cada parte de su sitio y ver los cambios en tiempo real.

También puede usar SeedProd para:

• Crear temas personalizados de WordPress
• Crear sitios web de WooCommerce
• Crear páginas de destino de alta conversión
• Pon tu sitio en modo de mantenimiento
• Y mucho más

Este creador de páginas también incluye bloques altamente personalizables para mejorar su diseño de WordPress. Por ejemplo, con el bloque Pestañas, que usaremos en esta guía, puede agregar varias pestañas a las páginas con unos pocos clics.

Siga los pasos a continuación para crear pestañas en WordPress con SeedProd.

Paso 1. Instala el creador de sitios web de SeedProd

Primero, deberá dirigirse al sitio web de SeedProd y descargar el complemento. SeedProd tiene una versión gratuita; sin embargo, necesitará un plan premium para desbloquear pestañas y otros bloques.

Una vez que haya descargado el complemento, deberá instalarlo y activarlo en su sitio de WordPress. Puede seguir estas instrucciones para instalar un complemento de WordPress si nunca lo ha hecho antes.

Después de activar el complemento, vaya a SeedProd » Configuración e ingrese la clave de licencia de su complemento.

Puede encontrar su clave de licencia de SeedProd en el panel de control de su cuenta en la sección Descargas .

Recuerde hacer clic en el botón Verificar clave antes de continuar con el siguiente paso.

Paso 2. Cree un tema de WordPress o una página de destino

Hay 2 formas de usar SeedProd para agregar pestañas a su sitio web:

1. Use Theme Builder para crear un tema de WordPress personalizado y agregue pestañas a cualquier página de WordPress.
2. Cree una página de destino independiente con contenido en pestañas utilizando el generador de páginas de arrastrar y soltar.

Para esta guía, usaremos la primera opción porque le permite agregar pestañas a cualquier página que desee, incluida su página de inicio, la barra lateral de WordPress, el encabezado, el pie de página y cualquier otro lugar de su tema.

Puede seguir esta guía paso a paso para crear un tema de WordPress con SeedProd, luego regrese aquí para obtener instrucciones sobre cómo agregar pestañas a su sitio.

Paso 3. Agregue pestañas a sus páginas de WordPress

Después de crear su tema de WordPress, deberá decidir qué páginas deben tener contenido con pestañas. Por ejemplo, puede agregar pestañas a su página de contacto para mostrar diferentes tipos de información de contacto o en una barra lateral personalizada para diferentes categorías de publicaciones.

En este ejemplo, agregaremos pestañas a la página acerca de para mostrar más detalles, como ofertas de trabajo, pautas editoriales y más.

Para hacer eso, vaya a Páginas » Todas las páginas desde su administrador de WordPress y busque la página que desea editar.

Dado que está utilizando un kit de sitio web de SeedProd, las páginas de contenido, como las páginas de información, contacto y servicios, se crean automáticamente. Para abrirlos en el editor visual, haga clic en el enlace Editar con SeedProd .

Una vez que su página esté abierta en el creador de páginas, puede usar las opciones de personalización de SeedProd para realizar cambios. Puede hacer clic en cualquier elemento para cambiar su contenido, colores, estilo y visibilidad.

También es fácil agregar más elementos a su página arrastrándolos desde el panel de bloques y soltándolos en su lugar. Así que hagámoslo con el bloque de pestañas de SeedProd.

Primero, agregue una nueva sección a la página para "alojar" su contenido con pestañas. En nuestro caso, duplicaremos una de las secciones existentes y la arrastraremos al final de la página.

Después de eso, cambia la imagen por algo más relevante y elimina cualquier contenido que ya no necesites haciendo clic en el icono de la papelera.

Ahora puede buscar el bloque Pestañas en el panel de la izquierda y arrastrarlo a la nueva sección de su página.

Al hacer clic en el bloque, se muestra su configuración de contenido donde puede:

• Agregar múltiples pestañas
• Mostrar u ocultar el icono de la pestaña
• Cambiar el tamaño de fuente
• Aumentar o disminuir el espacio entre pestañas
• Ajustar la alineación de las pestañas

Expandir cada pestaña le permite agregar un título de pestaña y escribir su contenido usando un editor clásico con configuraciones de "lo que ve es lo que obtiene" (WYSIWYG).

También puede habilitar un ícono personalizado para agregar más interés a sus pestañas y hacer que se destaquen. Simplemente gire el botón 'Ocultar icono de pestaña' a la posición 'Desactivado' y elija un icono personalizado de la biblioteca de Font Awesome.

Al hacer clic en la pestaña Avanzado , puede elegir más opciones de personalización, incluidos colores de fondo personalizados, fuentes, bordes, espaciado y más.

También puede mostrar pestañas verticales o un conjunto de pestañas horizontales haciendo clic en cualquiera de las opciones de diseño.

Recuerde hacer clic en el botón Guardar en la esquina superior derecha de la pantalla para guardar los cambios.

Siga los mismos pasos para agregar pestañas a cualquier otra página en su sitio web de WordPress, luego continúe con el siguiente paso para hacer sus cambios en vivo.

Paso 4. Publica tu contenido con pestañas

Después de agregar pestañas a sus diversas páginas de WordPress, está listo para publicarlas para que las vean los visitantes de su sitio web.

Para hacer esto, vaya a la página SeedProd » Theme Builder y cambie el interruptor 'Habilitar tema SeedProd' a la posición 'Encendido'.

Ahora puede obtener una vista previa de sus páginas y ver su contenido en pestañas en acción.

Método 2: Cómo agregar pestañas con un complemento de WordPress

El siguiente método es una buena alternativa si no desea cambiar su tema de WordPress o crear una página de destino. Usaremos el complemento gratuito Tabs Responsive WordPress para agregar pestañas receptivas a su sitio de WordPress.

Primero, deberá instalar el complemento Tabs Responsive y activarlo desde su administrador de WordPress.

Luego, navegue hasta Pestañas receptivas » Agregar nuevas pestañas y asigne un título a su conjunto de pestañas.

Desde allí, puede seleccionar la plantilla predeterminada o, si está utilizando la versión Pro, puede elegir entre más de 18 estilos de plantilla.

El siguiente paso es agregar tus pestañas. Puede crear tantas pestañas como desee e incluir:

• Títulos de pestañas
• Descripciones de pestañas
• Iconos de pestañas

También puede editar el estilo de cada pestaña en la barra lateral derecha eligiendo estilos de pestaña personalizados, colores de fondo, colores de fuente y más.

Cuando esté satisfecho con sus pestañas, copie el código abreviado de las pestañas y péguelo en cualquier parte de su tema de WordPress.

Por ejemplo, puede pegar el código abreviado en una publicación o página de WordPress como esta:

Así es como se verá en la parte frontal de su sitio:

También puede agregar el código abreviado de pestañas a un área lista para widgets, como la barra lateral de WordPress o los widgets de pie de página, pegando el código abreviado en un bloque de párrafo.

Después, verá su contenido con pestañas en vivo en las áreas de su barra lateral:

¡Ahí tienes!

En este tutorial, ha aprendido a crear pestañas en WordPress sin escribir código. ¿Listo para crear pestañas personalizables en su sitio web?

También te pueden gustar estas otras guías útiles de WordPress mientras estás aquí:

• Cómo crear animaciones de texto en WordPress (pasos sencillos)
• Cómo crear divisores de sección elegantes para sitios web de WordPress
• Cómo agregar un cuadro de autor en WordPress (sin un complemento)

Gracias por leer. Síganos en YouTube, Twitter y Facebook para obtener más contenido útil para hacer crecer su negocio.