Elementos: divisor
Utilice el tipo de contenido Divider para agregar una regla como un salto visual entre secciones de contenido en la Page Builder etapa. Puede especificar el color de línea, el grosor y el ancho del divisor. También puede controlar la alineación, establecer los márgenes y el relleno y el formato del borde del contenedor. De forma predeterminada, el divisor es una regla de línea fina que amplía la anchura completa del contenedor, con margen para el relleno.
Aunque la mayoría de los contenedores de divisor son invisibles, el siguiente ejemplo muestra el contenedor con un borde rojo discontinuo para que pueda ver la relación entre el divisor, el relleno y el contenedor. Puede ajustar el relleno en la parte superior e inferior del divisor para controlar el espaciado entre los elementos.
Cuadro de herramientas Divisor
Añadir un divisor
-
En el panel Page Builder, expanda Elements y arrastre un marcador de posición Divider a una fila, columna o conjunto de pestañas en el escenario.
Utilice la guía roja como referencia al colocar el divisor antes o después de otro contenedor de contenido en el escenario.
{width="600" modal="regular"}
En el ejemplo siguiente, el divisor marca el comienzo de una nueva sección de texto.
{width="500" modal="regular"}
-
Para especificar la configuración del nuevo divisor, siga el siguiente procedimiento.
Cambio de la configuración del divisor
-
Pase el ratón sobre el contenedor del divisor para mostrar la caja de herramientas y elija el icono Configuración (
{width="20"} ).
{width="500" modal="regular"}
-
Cambie el divisor Line Color mediante uno de los métodos siguientes:
- Escriba un nombre de color de HTML válido. Por ejemplo,
Teal. - Introduzca el valor de color hexadecimal. Por ejemplo,
#008080.
Una vez finalizado, haga clic en Apply.
{width="600" modal="regular"}
- Escriba un nombre de color de HTML válido. Por ejemplo,
-
Escriba Line Thickness en píxeles.
-
Para indicar la unidad de medida, escriba Line Width seguido de
pxo%. {width="600" modal="regular"}
-
Actualice la configuración de Advanced según sea necesario.
-
Para controlar la posición del divisor dentro del contenedor principal, elija Alignment:
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto Opción Descripción DefaultAplica la configuración predeterminada de alineación especificada en la hoja de estilos de la temática actual. LeftAlinea la lista a lo largo del borde izquierdo del contenedor principal, con margen para cualquier relleno que se especifique. CenterAlinea la lista en el centro del contenedor principal, con margen para cualquier relleno que se especifique. RightAlinea el bloque a lo largo del borde derecho del contenedor principal, con margen para cualquier relleno que se especifique. En el ejemplo siguiente, las opciones están configuradas para utilizar una alineación central para el divisor.
{width="600" modal="regular"}
-
Establezca el estilo Border aplicado a los cuatro lados del contenedor del divisor:
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 DefaultAplica el estilo de borde predeterminado especificado por la hoja de estilos asociada. NoneNo proporciona ninguna indicación visible de los bordes del contenedor. DottedEl borde del contenedor aparece como una línea de puntos. DashedEl borde del contenedor aparece como una línea discontinua. SolidEl borde del contenedor aparece como una línea sólida. DoubleEl borde del contenedor aparece como una línea doble. GrooveEl borde del contenedor aparece como una línea ranurada. RidgeEl borde del contenedor aparece como una línea discontinua. InsetEl borde del contenedor aparece como una línea de margen. OutsetEl 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.
Separe los distintos nombres de clase con un espacio.
-
Escriba valores, en píxeles, para que Margins and Padding determine los márgenes exteriores y el margen interior del contenedor del divisor.
Introduzca los valores correspondientes en el diagrama.
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/LeftPadding 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.
{width="500" modal="regular"}
Duplicación de un divisor
Para un divisor con formato y con una configuración específica, es más eficaz crear un duplicado en lugar de empezar de nuevo con un nuevo marcador de posición.
-
Pase el ratón sobre el contenedor del divisor para mostrar la caja de herramientas y elija el icono Duplicar (
{width="20"} ).
El contenedor de divisor duplicado aparece justo debajo del original.
{width="500" modal="regular"}
-
Pase el ratón sobre el nuevo contenedor del divisor para ver la caja de herramientas y elija el icono Mover (
{width="20"} ).
{width="500" modal="regular"}
-
Seleccione y arrastre el divisor hasta que la guía roja marque la nueva posición.
Los bordes superior e inferior de cada contenedor aparecen como líneas discontinuas mientras se mueve el divisor.
{width="500" modal="regular"}