Cómo crear contenido con pestañas en Elementor usando los complementos de PowerPack

¿Se pregunta cómo crear contenido con pestañas en Elementor?

El contenido con pestañas mejora la apariencia de sus páginas web al mostrar una gran cantidad de información de una manera compacta pero funcional.

En este artículo, discutiremos cómo puede crear contenido con pestañas para su sitio web de WordPress utilizando los complementos Elementor y PowerPack.

Widget de la pestaña avanzada de PowerPack: descripción general

PowerPack Addons for Elementor es uno de los complementos definitivos para el creador de páginas de Elementor. Tiene más de 150 plantillas únicas y elegantes y más de 80 widgets útiles, incluido el widget de pestañas avanzadas para crear contenido con pestañas en Elementor.

El widget de pestañas avanzadas es el mejor widget de pestañas para crear contenido con pestañas en cualquier sitio web de WordPress. Echemos un vistazo a las características del widget de pestañas avanzadas de PowerPack para Elementor:

• Admite múltiples fuentes de contenido
• Múltiples opciones personalizables de contenido para diseñar su contenido.
• Le permite crear pestañas horizontales y pestañas verticales.
• Ofrece un excelente soporte receptivo y funciona sin problemas en todas las pantallas.
• Ofrece múltiples opciones de estilo, como el color del texto, la tipografía, el tipo de fondo, el espacio entre pestañas, el borde, la alineación del texto y muchas más.
• Le permite personalizar el icono, el título y la parte de contenido por separado.

Cree contenido con pestañas en Elementor con los complementos de PowerPack

Antes de comenzar, asegúrese de haber instalado y activado el generador de páginas de Elementor y los complementos de PowerPack para Elementor.

Una vez que haya activado ambos complementos en su sitio web de WordPress, abra la página con el editor de Elementor.

A continuación, busque las " pestañas avanzadas " en el área de widgets y arrastre y suelte el widget en la página.

No olvides consultar por el PowerPack” PÁGINAS ” firmar en la esquina superior derecha del widget.

Pestaña de contenido del widget de pestaña avanzada

La pestaña de contenido del widget de pestañas avanzadas incluye dos secciones:

1. Pestañas avanzadas
2. Diseño

Veamos estas secciones en detalle.

Pestañas avanzadas

Veamos las características disponibles en esta sección:

• Puede agregar tantas " pestañas " como desee. Simplemente haga clic en " Agregar elemento " para crear más pestañas.
• Puede personalizar cada pestaña individualmente.
• Tipo de contenido: esta opción le permite elegir varios tipos de contenido, como contenido, imagen, enlace (video/imagen), sección guardada, widget guardado y plantilla de página guardada.

"Contenido" como el tipo de contenido

Cuando desee mostrar contenido, puede personalizar estas opciones:

1. Título: escribe un título para el contenido usando esta opción.
2. Contenido: en esta sección, puede agregar contenido a la pestaña con funciones como lista de números, lista de viñetas, enlace, negrita, cursiva, subrayado y muchas otras funciones para diseñar el texto. Además de eso, también puede agregar una imagen de la biblioteca de medios.

“Imagen” como tipo de contenido

Cuando desee mostrar una imagen, puede personalizar estas opciones:

1. Elegir imagen: Elija una imagen de la biblioteca de imágenes usando esta opción.
2. Tamaño de imagen: esta opción le permite seleccionar el tamaño de imagen deseado.

Cuando desee mostrar un enlace, puede colocar un enlace en la opción "Enlace". Y si elige una sección guardada, un widget guardado o una plantilla de página guardada, puede seleccionarlos en consecuencia.

Así como personalizas la parte de contenido por separado para cada pestaña, del mismo modo, puedes hacerlo para los iconos de cada pestaña.

Las características de la sección de iconos son:

1. Tipo de icono: puede elegir un tipo de icono, ya sea un icono o una imagen. Puede ser el logo de tu marca o cualquier otra cosa.
2. Icono: puede elegir un icono de la biblioteca de iconos.

Diseño

Veamos las características disponibles en esta sección:

• Diseño: puede seleccionar el diseño como un patrón horizontal o vertical.
• Soporte receptivo: el widget de pestañas avanzadas admite el modo receptivo en todos los dispositivos, ya sea de escritorio, tableta o móvil.
• Seleccionar estilo: Seleccione el estilo de la pestaña usando esta opción.
• Desplazarse hacia arriba: puede seleccionar sí o no si desea desplazarse hasta la parte superior de las pestañas al hacer clic en el título.

[ Nota: esta opción estará disponible solo si selecciona un patrón de diseño vertical para las pestañas.]

• Índice de pestañas activas predeterminadas: esta opción puede establecer la pestaña activa predeterminada. Para que cada vez que visites tu sitio web, la pestaña que hayas seleccionado aparecerá por defecto.
• Prefijo de ID personalizado: puede agregar un prefijo de ID personalizado que se aplicará a los atributos de ID de la pestaña en HTML.

Aplique estos cambios a su widget de pestañas avanzadas para ver los mejores resultados.

Pestaña de estilo del widget de pestaña avanzada

La pestaña de estilo del widget de pestañas avanzadas incluye dos secciones:

1. Pestañas
2. Título
3. Contenido

Veamos estas secciones en detalle.

Pestañas

Veamos cuáles son todas las características incluidas en esta sección:

• Alineación horizontal o vertical: seleccione la alineación de las pestañas con esta opción, pero elija primero el diseño.
• Espacio entre pestañas: personaliza el espacio entre las pestañas con esta opción.
• Color de fondo: con esta opción, puede elegir un color de fondo para las pestañas.
• Radio del borde: aplique el radio del borde si desea mostrar los bordes curvos en el borde de la pestaña.
• Relleno: ajuste el relleno de la pestaña para mantener el espacio entre el borde de la pestaña y el contenido.

Título

Veamos cuáles son todas las funciones incluidas en esta sección:

• Posición del icono: elija una posición de icono en la parte superior, inferior, derecha o izquierda.
• Tamaño del icono: ajuste el tamaño del icono con esta opción.
• Ancho de la imagen del icono: ajuste el ancho de la imagen del icono con esta opción.
• Radio del borde: aplique el radio del borde si desea mostrar los bordes curvos en el borde del título de la pestaña.
• Relleno: ajuste el relleno de la pestaña para mantener el espacio entre el borde del título de la pestaña y el contenido.
• Tipografía del título: personalice la tipografía del texto del título con esta opción.
• Color del icono: elija un color de icono con esta opción.
• Color del título: personalice el color del texto del título con la opción de color del título.
• Color de fondo del título: si desea mostrar el color de fondo del título, puede elegir un color de fondo con esta opción.
• Efecto de desplazamiento: esta opción le brinda la flexibilidad de habilitar o deshabilitar el efecto de desplazamiento.

Contenido

Veamos cuáles son todas las características incluidas en esta sección:

• Alineación: establezca la alineación del contenido que se muestra en las pestañas usando esta opción.
• Tipo de fondo: puede elegir un tipo de fondo clásico o degradado.
• Color del texto: elija un color de texto para el contenido que desea mostrar en las pestañas.
• Tipografía de texto: puede personalizar la tipografía del texto del contenido usando esta opción.
• Tipo de borde: elija un tipo de borde para el contenido entre las opciones disponibles, como sólido, doble, punteado, discontinuo o ranurado.
• Ancho del borde: el ancho del borde aplicado al contenido se puede ajustar con esta opción.
• Relleno: ajuste el relleno para permitir el espacio entre el texto del contenido y su borde para que se vea organizado y limpio.
• Color del borde: el color del borde del contenido se puede personalizar con esta opción.
• Radio del borde: si ha aplicado un borde a la parte del contenido, puede ajustar su radio con esta opción.

Entonces, se trataba de personalizar la pestaña de contenido y estilo del widget de pestañas avanzadas para Elementor by PowerPack Addons.

Instale, active y realice algunos cambios según su elección; Es tan simple como eso.

Obtenga las pestañas avanzadas de PowerPack para Elementor Page Builder

Después de conocer todas las funciones del widget de pestañas avanzadas proporcionado por PowerPack Elementor Addons, estamos bastante seguros de que le encantará usarlo en su sitio web.

Esperamos que este tutorial lo haya ayudado a crear "pestañas" elegantes para su sitio web utilizando el widget de Pestañas avanzadas de PowerPack.

Los widgets de PowerPack Addons están increíblemente diseñados por nuestros codificadores creativos para que los que no son programadores puedan usarlos fácilmente en cuestión de minutos.

Haga clic aquí para obtener el widget de pestañas avanzadas de PowerPack y mejorar el aspecto y la experiencia del usuario de su sitio web.

Si ha disfrutado leyendo este artículo, también le encantaría experimentar nuestros otros elementos de PowerPack.

Por favor, siéntase libre de dejar sus comentarios aquí; nos encantaría recibir sus respuestas.
Además, únase a nosotros en Twitter, Facebook y YouTube.