Cómo crear pestañas de desplazamiento vertical en WordPress con Elementor

Las pestañas de desplazamiento vertical le permiten mostrar contenido de pestaña en un diseño alto de lado a lado. Las pestañas permanecen apiladas en el lado izquierdo o derecho, mientras que el contenido para cada pestaña aparece en el lado opuesto. Los visitantes pueden desplazarse por las pestañas para explorar el contenido dentro de ellos.

Esto mantiene la página limpia y las personas pueden ver mucha información sin salir de la página actual. No solo puede mostrar textos, sino que también puede mostrar imágenes, videos y plantillas en pestañas de desplazamiento vertical. Los usuarios pueden hacer clic o tocar una pestaña para ver el contenido vinculado, mientras que las otras secciones permanecen ocultas.

Elementor es un popular constructor de sitios web sin código. Con este complemento, puede construir un sitio web completo desde cero utilizando su funcionalidad de arrastrar y soltar. En esta publicación de tutorial, le mostraremos cómo crear pestañas de desplazamiento vertical en WordPress con Elementor.

Casos de uso de pestañas de desplazamiento vertical

Las pestañas de desplazamiento vertical lo ayudan a organizar una gran cantidad de contenido en un espacio pequeño. Permiten que los visitantes se muevan a través de temas sin cargar una nueva página. Este diseño es fácil de usar tanto en escritorio como en dispositivos móviles. Echemos un vistazo a algunos casos de uso de pestañas de desplazamiento vertical a continuación.

a. Detalles del producto o servicio

Puede mostrar muchas descripciones de productos o servicios uno al lado del otro. Cada pestaña puede tener especificaciones, precios, características o revisiones. Los visitantes pueden comparar rápidamente diferentes opciones sin salir de la página.

b. Preguntas frecuentes (preguntas frecuentes)

Las pestañas verticales son perfectas para las preguntas frecuentes. Puede agrupar preguntas similares en una pestaña y respuestas en otra. Los lectores pueden desplazarse y hacer clic solo en las preguntas que les interesan.

do. Guías o tutoriales paso a paso

Si desea compartir un proceso con muchos pasos, las pestañas verticales mantienen cada paso claro. Los usuarios pueden hacer clic en cada pestaña para seguir la guía en orden. Esto facilita el aprendizaje y mantiene la página ordenada.

d. Miembros del equipo o perfiles de personal

Presente a su equipo de manera profesional dando una pestaña a cada miembro. Cada pestaña puede mostrar una foto, rol y biografía corta. Los visitantes pueden desplazarse por la lista y aprender sobre todos sin desorden. Explore algunos de los mejores ejemplos de página de equipo.

mi. Portafolio o escaparate de proyectos

Muestre su trabajo o proyectos en pestañas verticales para ahorrar espacio. Cada pestaña puede mostrar imágenes, descripciones y enlaces a detalles. Esto ayuda a los visitantes a explorar muchos proyectos desde una sola página.

Cómo crear pestañas de desplazamiento vertical en Elementor

La parte teórica ha terminado. Espero que ahora tenga una idea clara de cuál es la pestaña de desplazamiento vertical y cuáles son sus casos de uso. Vamos a cubrir la parte del tutorial ahora. Explicaremos cómo crear pestañas de desplazamiento vertical con Elementor en WordPress en esta sección. ¡Sigue leyendo!

Requisitos previos para comenzar el tutorial

Para crear pestañas de desplazamiento vertical en WordPress con Elementor, necesita los siguientes complementos instalados y activados en su sitio.

• Elementor Free
• Happyaddons gratis
• Happyaddons pro

Nota: Necesita HappyAddons Pro porque Elementor no tiene una opción incorporada para crear pestañas de desplazamiento. HappyAddons Pro ofrece un widget llamado pestañas de desplazamiento que le permite crear pestañas de desplazamiento vertical con facilidad.

Una vez que estos complementos estén listos en su sitio, siga el tutorial explicado a continuación.

Paso 01: Abra una página con Elementor

Simplemente abra una página con Elementor donde desea crear pestañas de desplazamiento vertical.

Paso 02: arrastre y suelte el widget de pestañas de desplazamiento en el lienzo

Encuentre el widget de pestañas de desplazamiento en el panel Elementor. Arrastre y suelte en el lienzo Elementer.

El widget de pestañas de desplazamiento viene con un contenido predeterminado. Una vez que se agrega el widget al lienzo, verá este contenido predeterminado.

Paso 03: Comience a agregar contenido a las pestañas

Puede agregar contenido al widget de pestañas de desplazamiento y estilizar el diseño de muchas maneras. Explorarlos en este paso.

# Agregue un título al widget de pestañas de desplazamiento

Cada sección web debe tener un título que indique claramente qué tipo de contenido contiene. Por lo tanto, debe escribir un título para la sección Widget de pestañas de desplazamiento.

Vaya a Contenido> Tabs Contenido> Título . Obtendrá el espacio para escribir un título. Puede ver que hemos escrito un título, 'Visitas de reloj elegantes'.

# Escribe una descripción para el widget

Escribe bajo el título, puedes escribir una descripción para el widget. Si la descripción no es necesaria, puede eliminarla.

# Agregar contenido a las pestañas

Lleve su cursor a una pestaña y haga clic en él. Esto ampliará la pestaña y le permitirá agregar contenido.

# Escribe un título para la pestaña

Debe escribir un título para cada pestaña . Después de que la pestaña se amplíe, obtendrá un cuadro en el texto de Nav. Aquí, puede escribir un título para la pestaña.

# Cambiar el icono de la pestaña

Puede eliminar el icono si no es necesario. Pero para cambiar el icono, haga clic en el icono que puede ver en el icono NAV.

La biblioteca de iconos se abrirá al instante. Elija un icono que desee y presione el botón Insertar .

Puedes ver que el icono ha cambiado.

# Agregar contenido a la pestaña a través del editor

Cada pestaña le permite agregar dos tipos de contenido. Puede elegir si usar el editor o la plantilla .

Primero seleccionemos la opción Editor .

Usando este editor, puede agregar cualquier tipo de texto e imágenes, que se mostrará instantáneamente en el lienzo de la pestaña respectiva.

# Cambiar el color de fondo del contenido con pestañas

Para resaltar mejor el contenido en la pestaña, puede cambiar su color de fondo, por lo que se alinea bien con todo el contenido que ha agregado a la pestaña.

# Agregar contenido a la pestaña a través de la plantilla

Como se dijo anteriormente, el widget le permite agregar contenido a la pestaña a través del editor y la plantilla. Ahora echemos un vistazo a cómo agregar contenido usando plantillas.

Elija la opción de plantilla del tipo de contenido . Si ya tiene plantillas prediseñadas guardadas en su sitio, esta opción será adecuada.

Haga clic en el icono desplegable Siguiente para elegir la plantilla . Luego, seleccione la plantilla que desea mostrar en la pestaña.

Puede ver que nuestra plantilla deseada ya se agrega a la pestaña.

De la misma manera, agregue contenido a todas las pestañas del widget de pestañas de desplazamiento.

Paso 04: Configurar la configuración del widget de pestañas de desplazamiento

Una vez realizada la parte del contenido, expanda la sección Configuración .

Podrá cambiar el ancho del panel de navegador y la altura del panel de contenido, incluidos varios ajustes de alineación, desde esta sección.

# Ajuste el ancho del panel de navegación

El widget de pestañas de desplazamiento tiene dos partes: el panel Navegador (panel de navegación) y el panel de contenido .

Puede cambiar el ancho del panel Navigator arrastrando la escala bajo esta opción. Además, puede ajustar su posición y alineación. El proceso se muestra en el videoclip conectado a continuación.

# Ajuste la altura del panel de control

De la misma manera, ajuste la altura del panel de control. Además, confirme que el contenido está alineado verticalmente correctamente.

Paso 05: Estilizar el widget de pestañas de desplazamiento

Ven a la pestaña de estilo . Primero establezcamos un color de fondo para el panel Navigator .

# Personalizar la tipografía del contenido del panel de navegación

Actualice la tipografía, una por una, para cada contenido que haya agregado al panel Navigator. Puede cambiar la familia de fuentes, el tamaño, el peso, la altura de la línea, etc., según sea necesario.

# Estilizar las pestañas

Al agregar un tipo de borde, ancho de borde, relleno, color de borde, radio de borde, color de texto y color de fondo, puede estilizar las pestañas y presentarlas como la siguiente imagen. Espero que puedas hacer esto tú mismo.

Del mismo modo, expanda y estilice el contenido relacionado con el panel de contenido y la sección de desplazamiento.

Paso 06: optimice el widget de pestañas de desplazamiento para el teléfono móvil

Para optimizar el widget para el tamaño de la pantalla móvil, vaya al modo de retrato móvil en la barra superior.

Verá que las pestañas navegador aparecen en la parte superior de forma predeterminada.

# Ajuste la altura del panel de contenido para dispositivos móviles

La altura existente puede no ser suficiente para el panel de contenido. En este caso, debe aumentar la altura para que todo el contenido dentro de la pestaña se pueda ver perfectamente en los tamaños de pantalla móvil.

Paso 07: optimice el widget de pestañas de desplazamiento para tabletas

Del mismo modo, cambie al modo de retrato de tableta para optimizar el contenido para una visualización óptima en los tamaños de pantalla de la tableta.

Puede ver en el videoclip conectado a continuación que el widget ya se ve bien en la pantalla de la tableta. Entonces, no necesitamos modificarlo de todos modos.

Paso 08: Vista previa del widget de pestañas de desplazamiento

Venga a la página de vista previa y verifique si el widget funciona bien o no. Puedes ver que el widget funciona bien por nuestro lado.

Por lo tanto, puede crear pestañas de desplazamiento vertical en WordPress con Elementor.

¡Contradas finales!

Las pestañas de desplazamiento vertical son una forma inteligente de mantener una página web ordenada mientras comparten mucha información. Dejan que los visitantes encuentren lo que necesitan sin saltar a nuevas páginas. Después de seguir los pasos anteriores, puede diseñar fácilmente estas pestañas con Elementor y HappyAddons Pro.

Esto le da a su sitio un aspecto moderno y mejora la forma en que los usuarios exploran su contenido. Sin embargo, mientras crea esta sección, tenga en cuenta algunas mejores prácticas. Use títulos claros para cada pestaña para que los usuarios sepan qué esperar. Asegúrese de que el texto, las imágenes y los videos sean ligeros, por lo que la página se carga rápidamente.

Verifique el diseño en diferentes tamaños de pantalla y ajuste el espacio para los usuarios móviles. Mantenga los colores y las fuentes consistentes con el estilo de su sitio para que las pestañas se mezclen naturalmente con el resto del diseño. Estos pequeños detalles ayudan a crear una experiencia fluida y profesional para cada visitante.

Aprenda a diseñar una caja de flip en WordPress con Elementor.