Elementos de pestaña

¿Qué es el elemento de pestaña?

Las pestañas de los sitios web se inspiraron en las pestañas físicas de las carpetas de papel. Permiten mostrar diferentes secciones de contenido en un formato compacto y fácil de navegar.

Con la función Elemento de pestaña GemPages, usted puede:

• Presente el contenido en un diseño organizado y que ahorre espacio.
• Permitir a los usuarios cambiar entre contenidos sin salir de la sección.
• Mantenga su página limpia y visualmente atractiva.

Cómo agregar el elemento de pestaña en GemPages

Siga estos pasos para insertar el Elemento de pestaña en tu página:

Paso 1: Desde el Panel de Control de GemPages, abra una plantilla para editar. Puede encontrar rápidamente Pestaña en la barra lateral izquierda del Editor, bajo la sección Interactivo . Arrastre y suelte el elemento en cualquier posición que prefiera.

Paso 2:Elimine los demás elementos como Encabezado, bloque de texto, Imagen, etc. dentro de la pestaña para crear el diseño de contenido que desee.

Al hacer clic en el elemento Pestaña, La configuración estará disponible en la barra lateral izquierda, que se tratará en las siguientes secciones.

Configurar la configuración del elemento de pestaña

Una vez que el elemento Pestaña esté en su página, sus opciones de configuración aparecerán en el barra lateral izquierda .

1. La Pestaña Configuración

Diseño

• Controla la posición de las pestañas en relación con el contenido.
• Predeterminado: Pestañas en el izquierda del contenido.

Opciones de diseño:

• Pestañas sobre el contenido
• Pestañas a la izquierda del contenido
• Pestañas a la derecha del contenido

Al seleccionar un diseño se abre el Ventana emergente de diseño Para cambios fáciles.

Pestañas (Tabs)

1. Orden: Por defecto, el elemento tiene 3 pestañas. El título de la pestaña en la ventana emergente refleja su contenido en el área de Diseño.

• Para agregar una pestaña adicional: simplemente haga clic en la opción “Agregar más”. 
• Para duplicar una pestaña: pase el cursor sobre la diapositiva deseada y haga clic en el ícono de duplicar. 
• Para eliminar una pestaña: pase el cursor sobre la diapositiva específica y haga clic en el ícono de la papelera.

2. Texto: El estilo de texto del contenido de cada pestaña.

3. AnchuraEl ancho de cada pestaña. El valor predeterminado es Automático, lo que significa que el ancho de la pestaña se ajustará automáticamente para adaptarse al tamaño del contenido.

Opciones de ancho: al hacer clic en el botón desplegable del campo de entrada Ancho, aparecerá un menú desplegable que incluye opciones de ancho:

• Automático significa que el ancho se ajustará al contenido.
• Completo significa Ancho = 100% (ancho completo) -> El ancho de cada pestaña se rellenará con el elemento

4. Fondo:Establezca el color de fondo para cada pestaña.

5. frontera: Personaliza el estilo del borde.

6. Alineación de pestañas: la alineación de todos los elementos de pestañas dentro del elemento Pestaña.

• Diseño Superior → Alineación horizontal.
• Disposición Izquierda/Derecha → Alineación vertical.

7. Efectos al pasar el cursor: la configuración para cada pestaña al pasar el cursor sobre ella.

8. Estado activo: la configuración de cada pestaña cuando está activa.

Tamaño

1. Anchura

Ancho = 1200px: cuando se coloca una pestaña para crear una nueva sección o dentro de una columna de la Sección 1

Ancho = 100% (ancho completo): cuando una pestaña se coloca dentro de otros elementos

Opciones de ancho: al hacer clic en el botón desplegable del campo de entrada Ancho, aparecerá a continuación un menú desplegable que incluye opciones de ancho: 

• El valor predeterminado significa Ancho = 1200px
• Completo significa Ancho = 100% (ancho completo)

2. Relleno (Padding)

• Relleno del elemento.
• Agregar el relleno aumentará el espacio entre el borde del elemento y el tamaño real del elemento.

Fondo

1. Color

Al hacer clic en el combo Entrada, se abrirá el Selector de color y se agregará un color predeterminado #DDDDDD.

2. Imagen

Al hacer clic en el combo Entrada, se abrirá el Selector de imágenes y se agregará una imagen predeterminada.

Forma

Estas configuraciones de Forma son para el contenedor del Acordeón. 

• Borde
• Esquina:
• Sombra:

Opción de visualización

• Activo predeterminado: establece uno de los elementos de la pestaña para que se seleccione inicialmente de manera predeterminada.

Alineación

• La alineación se desactivará cuando el Ancho del elemento sea 100%.
• En caso contrario, las opciones de alineación predeterminadas son alineadas Center.

2. La pestaña Avanzada

Para una personalización más avanzada, navegue a la Avanzado y siga las instrucciones de este artículo.