Diseño: fichas
Use el tipo de contenido Tabs para agregar un conjunto de pestañas en la Page Builder etapa. Al arrastrar el marcador de posición de pestañas desde el panel al escenario, aparece inicialmente una sola pestaña predeterminada. Puede agregar más pestañas para crear un conjunto completo. La anchura del conjunto de pestañas viene determinada por la anchura de su contenedor principal y la configuración de relleno.
Cajas de herramientas
Cuando trabaja con el tipo de contenido Tabs, agrega y edita fichas individuales y el contenedor de fichas que contiene una o más fichas. Cada ficha tiene su propia caja de herramientas que se utiliza para diseñar fichas en el escenario Page Builder.
Cuadro de herramientas de ficha individual
Cuadro de herramientas Contenedor de pestañas
Añadir una pestaña individual
-
En el panel Page Builder bajo Layout, arrastre el marcador de posición Tabs directamente al escenario o a una fila o columna del escenario.
{width="600" modal="regular"}
-
Haga clic en la etiqueta Tab 1 para mostrar el cuadro de herramientas de fichas individuales y elija el icono Configuración ( {width="20"} ).
-
Escriba Tab Name que desee usar como etiqueta.
{width="600" modal="regular"}
-
Si es necesario, escriba Minimum Height en la ficha.
Este valor puede ser un número con cualquier unidad CSS válida (como
100px
,50%
,50em
,100vh
) o un cálculo (como100vh - 237px
). -
Elija una configuración de Vertical Alignment para alinear cualquier contenedor de contenido que se agregue a la pestaña (Superior, Centro o Inferior).
-
Si es necesario, configure las demás opciones utilizando las siguientes secciones como guía:
-
En la esquina superior derecha, haga clic en Save para aplicar la configuración y volver al área de trabajo Page Builder.
Agregar un conjunto de pestañas
Los pasos siguientes comienzan con una pestaña individual y crean un conjunto de tres pestañas dentro de un contenedor de pestañas. Si todavía no tiene una pestaña individual, siga las instrucciones anteriores para agregar una sola pestaña al escenario.
-
Pase el ratón sobre el contenedor de pestañas para mostrar la caja de herramientas y elija el icono Agregar ( {width="20"} ).
-
Haga clic en la etiqueta Tab 2 para mostrar el cursor e introduzca su propia etiqueta para la pestaña.
-
Vuelva a hacer clic en la segunda ficha del escenario y elija el icono Duplicar ( {width="20"} ).
-
Haga clic en la etiqueta YourName Copy para mostrar el cursor e introduzca su propia etiqueta para la tercera pestaña.
Mover una pestaña dentro del conjunto
-
Haga clic en la ficha que desee mover.
-
Seleccione y arrastre el icono Mover ( {width="20"} ), que aparece justo antes del texto de la etiqueta de la pestaña, a una nueva posición dentro del conjunto de pestañas.
Adición de contenido a una pestaña
Puede cambiar cualquier tipo de contenido en una pestaña, igual que en una fila. Siga estos pasos para agregar un tipo de contenido de texto como ejemplo.
-
Haga clic en la pestaña donde desee añadir el contenido.
-
En el panel Page Builder, expanda Elements y arrastre un marcador de posición Texto a la pestaña.
-
Introduzca o pegue texto en el editor y utilice la barra de herramientas del editor para darle formato según sea necesario.
Consulte Elementos - Texto para obtener más información acerca de cómo trabajar con el tipo de contenido de texto.
{width="500" modal="regular"}
-
En la esquina superior derecha, haga clic en Save.
Cambiar la configuración de ficha individual
-
Pase el ratón sobre una ficha individual para ver la caja de herramientas y elija el icono Configuración ( {width="20"} ).
-
Si es necesario, cambie cualquiera de las configuraciones básicas de la pestaña:
-
Tab Name - Escriba texto revisado para la etiqueta de tabulación. También puede modificar la etiqueta directamente en el escenario.
-
Minimum Height: escriba como píxeles si desea anular la altura automática. Por ejemplo, puede establecer la altura mínima para que coincida con la altura de una imagen de fondo para garantizar que la imagen completa sea visible.
-
Vertical Alignment: elija la posición vertical de los contenedores de contenido que se agregan a la pestaña.
-
-
Cambie el resto de la configuración según sea necesario mediante las siguientes secciones para obtener más información.
-
Una vez finalizado, haga clic en Save para aplicar la configuración y volver al área de trabajo Page Builder.
Contexto
-
Background Color: especifique el color de fondo eligiendo una muestra, haciendo clic en el selector de color o introduciendo un nombre de color válido o un valor hexadecimal equivalente. Esta configuración determina el color de fondo de la fila. También puede ajustar la opacidad del color.
{width="200"}
Puede introducir un valor de tres formas:
-
Un nombre de color predefinido, como
White
-
El valor hexadecimal del color, como
#ffffff
-
El valor rgba del color, con un porcentaje de opacidad, como
rgba(255, 255, 255, 0.75)
Si desea elegir un color, haga clic en la muestra a la izquierda del cuadro Sin color.
{width="600" modal="regular"}
Si hace clic en el cuadro de color para abrir de nuevo el selector de color, el cuadro situado debajo del control deslizante mostrará los valores actuales de rojo, verde, azul y alfa (rgba). El último número indica el porcentaje de opacidad actual como decimal. Puede utilizar el control deslizante para ajustar la opacidad o introducir el valor decimal deseado.
{width="600" modal="regular"}
note note NOTE Page Builder también admite una capa de transparencia, o canal alfa, en imágenes de fondo que se pueden usar para crear fondos con distintos grados de opacidad. -
-
Background Image: si es necesario, utilice las herramientas proporcionadas para elegir una imagen de fondo que aplicar a la pestaña:
table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto Herramienta Descripción Upload Carga un archivo de imagen desde el equipo local a la galería y, a continuación, lo aplica como imagen de fondo de la ficha. Select from Gallery Le pide que elija una imagen existente de la galería como imagen de fondo para la ficha. {width="25"} Permite arrastrar la imagen al mosaico de la cámara o navegar a la imagen en el sistema de archivos local. -
Background Mobile Image: si es necesario, utilice las mismas herramientas para elegir una imagen de fondo diferente para usarla en dispositivos móviles.
-
Background Size: elija cómo se escalará la imagen de fondo en relación con la anchura de la pestaña:
table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto Opción Descripción Cover
La imagen de fondo cubre el ancho completo de la pestaña. Contain
La imagen de fondo está limitada a la anchura del área de tabulación. Auto
Aplica el tamaño de la hoja de estilos actual. -
Background Position - Elija cómo se ancla la imagen de fondo en relación con la pestaña:
Top Left
/Top Center
/Top Right
/Center Left
/Center
/Center Right
/Bottom Left
/Bottom Center
/Bottom Right
-
Background Attachment - Elija el tipo de archivo adjunto para determinar cómo se mueve la imagen de fondo en relación con la página de desplazamiento:
table 0-row-2 1-row-2 2-row-2 layout-auto Opción Descripción Scroll
La imagen de fondo adjunta se sincroniza para moverse hacia abajo a medida que la página se desplaza. Fixed
(No disponible para móviles) La imagen de fondo no se mueve cuando el contenedor se desplaza por la imagen y está fijo en la posición de fondo especificada. -
Background Repeat - Se establece en
Yes
para repetir la imagen de fondo y rellenar el espacio disponible en la pestaña.
Avanzadas
-
Para controlar la alineación horizontal de los contenedores de contenido que se agregan a la ficha, elija un Alignment
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto Opción Descripción Default
Aplica la configuración predeterminada de alineación especificada en la hoja de estilos de la temática actual. Left
Alinea los contenedores de contenido a lo largo del borde izquierdo de la pestaña, con margen para cualquier relleno que se especifique. Center
Alinea el contenedor de contenido en el centro de la ficha, con margen para cualquier relleno que se especifique. Right
Alinea el contenedor de contenido a lo largo del borde derecho de la pestaña, con margen para cualquier relleno que se especifique. -
Establezca el estilo Border que se aplica a los cuatro lados del contenedor de pestañas:
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto Opción Descripción Default
Aplica el estilo de borde predeterminado especificado por la hoja de estilos asociada. None
No proporciona ninguna indicación visible de los bordes del contenedor. Dotted
El borde del contenedor aparece como una línea de puntos. Dashed
El borde del contenedor aparece como una línea discontinua. Solid
El borde del contenedor aparece como una línea sólida. Double
El borde del contenedor aparece como una línea doble. Groove
El borde del contenedor aparece como una línea ranurada. Ridge
El borde del contenedor aparece como una línea discontinua. Inset
El borde del contenedor aparece como una línea de margen. Outset
El borde del contenedor aparece como una línea de inicio. -
Si establece un estilo de borde distinto de
None
, complete las opciones de visualización de borde:{width="600" modal="regular"}
table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto Opción Descripción Border Color Especifique el color seleccionando una muestra, haciendo clic en el selector de color o introduciendo un nombre de color válido o un valor hexadecimal equivalente. Border Width Introduzca el número de píxeles de la anchura de la línea del borde. Border Radius Introduzca el número de píxeles para definir el tamaño del radio que se utiliza para redondear cada esquina del borde. La fila del ejemplo siguiente tiene un radio de borde de 15.
{width="500"}
-
(Opcional) Especifique los nombres de CSS classes de la hoja de estilos actual para aplicarlos al contenedor de columnas.
Separe los distintos nombres de clase con un espacio.
-
Escriba valores, en píxeles, para que Margins and Padding especifique los márgenes exteriores y el margen interior de la columna.
Introduzca cada valor correspondiente en el diagrama del contenedor de pestañas.
table 0-row-2 1-row-2 2-row-2 layout-auto Área del contenedor Descripción Margins Cantidad de espacio en blanco que se aplica al borde exterior de todos los lados del contenedor. Opciones: Top
/Right
/Bottom
/Left
Padding Cantidad de espacio en blanco que se aplica al borde interior de todos los lados del contenedor. Opciones: Top
/Right
/Bottom
/Left
Cambiar configuración del conjunto de pestañas
-
Pase el ratón sobre el borde superior del contenedor del conjunto de pestañas para mostrar la caja de herramientas y elija el icono Configuración ( {width="20"} ).
-
Si es necesario, cambie Default Active Tab.
Elija la pestaña del conjunto que desea que esté activa cuando se cargue la página.
-
Escriba Minimum Height, en píxeles, si desea anular la altura automática del conjunto de pestañas.
-
Para colocar las fichas de navegación en la parte superior del conjunto de fichas, elija Tab Navigation Alignment (
Left
,Center
oRight
).{width="500" modal="regular"}
-
Defina las opciones avanzadas para el conjunto de pestañas:
-
Para controlar la posición del conjunto de pestañas dentro del contenedor principal, elija un Alignment:
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto Opción Descripción Default
Aplica la configuración predeterminada de alineación especificada en la hoja de estilos de la temática actual. Left
Alinea el conjunto de pestañas a lo largo del borde izquierdo del contenedor principal, con margen para cualquier relleno que se especifique. Center
Alinea el conjunto de pestañas en el centro del contenedor principal, con margen para cualquier relleno que se especifique. Right
Alinea el conjunto de pestañas a lo largo del borde derecho del contenedor principal, con margen para cualquier relleno que se especifique. -
Establezca el estilo Border aplicado a los cuatro lados del contenedor de pestañas:
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto Opción Descripción Default
Aplica el estilo de borde predeterminado especificado por la hoja de estilos asociada. None
No proporciona ninguna indicación visible de los bordes del contenedor. Dotted
El borde del contenedor aparece como una línea de puntos. Dashed
El borde del contenedor aparece como una línea discontinua. Solid
El borde del contenedor aparece como una línea sólida. Double
El borde del contenedor aparece como una línea doble. Groove
El borde del contenedor aparece como una línea ranurada. Ridge
El borde del contenedor aparece como una línea discontinua. Inset
El borde del contenedor aparece como una línea de margen. Outset
El borde del contenedor aparece como una línea de inicio. -
Si establece un estilo de borde distinto de
None
, complete las opciones de visualización de borde:table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto Opción Descripción Border Color Especifique el color seleccionando una muestra, haciendo clic en el selector de color o introduciendo un nombre de color válido o un valor hexadecimal equivalente. Border Width Introduzca el número de píxeles de la anchura de la línea del borde. Border Radius Introduzca el número de píxeles para definir el tamaño del radio que se utiliza para redondear cada esquina del borde. -
(Opcional) Especifique los nombres de CSS classes de la hoja de estilos actual para aplicarlos al contenedor de pestañas.
Separe los distintos nombres de clase con un espacio.
-
Escriba valores, en píxeles, para que Margins and Padding determine los márgenes externos y el relleno interno del contenedor de fichas.
Introduzca los valores correspondientes en el diagrama del contenedor de pestañas.
table 0-row-2 1-row-2 2-row-2 layout-auto Área del contenedor Descripción Margins Cantidad de espacio en blanco que se aplica al borde exterior de todos los lados del contenedor. Opciones: Top
/Right
/Bottom
/Left
Padding Cantidad de espacio en blanco que se aplica al borde interior de todos los lados del contenedor. Opciones: Top
/Right
/Bottom
/Left
-
-
Una vez finalizado, haga clic en Save para aplicar la configuración y volver al área de trabajo Page Builder.