Elementos: divisor

Utilice el Divisor tipo de contenido para agregar una regla como un salto visual entre secciones de contenido en la Page Builder stage. 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.

Divisor predeterminado en un contenedor sin borde {width="500" modal="regular"}

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.

Divisor con relleno en contenedor con borde discontinuo {width="500" modal="regular"}

NOTE
Si está realizando cambios importantes en Page Builder contenido, se recomienda aumentar el Duración de sesión de administrador para evitar que se agote el tiempo de espera de la sesión mientras trabaja.

Cuadro de herramientas Divisor

Herramienta
Icono
Descripción
Mover
Icono Mover {width="25"}
Mueve el contenedor del divisor a otro lugar válido de la página.
(etiqueta)
DIVISOR
Identifica el contenedor actual como un elemento divisor.
Configuración
Icono de configuración {width="25"}
Abre la página Editar divisor, donde puede cambiar las propiedades del divisor y su contenedor.
Hide
Icono Ocultar {width="25"}
Oculta el contenedor del divisor.
Mostrar
Mostrar icono {width="25"}
Muestra el contenedor de divisores oculto.
Duplicar
Icono Duplicar {width="25"}
Realiza una copia del contenedor del divisor.
Eliminar
Icono Eliminar {width="25"}
Elimina el contenedor del divisor y su contenido del escenario.
NOTE
Los elementos ocultos se almacenan en la base de datos y son invisibles para los clientes. Sin embargo, estos elementos son visibles para los motores de búsqueda y otros bots que rastrean el sitio. También se devuelven como parte del contenido si se solicitan a través de una llamada de API con un atributo de invisibilidad, a menos que los elimine del escenario.

Añadir un divisor

  1. En el Page Builder panel, expandir Elements y arrastre un Divider marcador de posición a una fila, columna o ficha establecida 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.

    Arrastrar un divisor al escenario {width="600" modal="regular"}

    En el ejemplo siguiente, el divisor marca el comienzo de una nueva sección de texto.

    Divisor que separa secciones de texto {width="500" modal="regular"}

  2. Para especificar la configuración del nuevo divisor, siga el siguiente procedimiento.

Cambio de la configuración del divisor

  1. Pase el ratón sobre el contenedor del divisor para mostrar la caja de herramientas y seleccione Configuración ( Icono de configuración {width="20"} ) icono.

    Cuadro de herramientas Divisor {width="500" modal="regular"}

  2. Cambiar el divisor Line Color mediante uno de los métodos siguientes:

    • Introduzca un válido Nombre del color del HTML. Por ejemplo, Teal.
    • Introduzca el valor de color hexadecimal. Por ejemplo, #008080.

    Cuando termine, haga clic en Apply.

    Configuración del color de línea {width="600" modal="regular"}

  3. Introduzca el Line Thickness en píxeles.

  4. Para indicar la unidad de medida, introduzca la Line Width seguido de px o %.

    Configuración del color, grosor y anchura de la línea {width="600" modal="regular"}

  5. Actualice el Advanced ​ajustes según sea necesario.

    • Para controlar la posición del divisor dentro del contenedor principal, elija la opción 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 la lista a lo largo del borde izquierdo del contenedor principal, con margen para cualquier relleno que se especifique.
      Center Alinea la lista en el centro del contenedor principal, con margen para cualquier relleno que se especifique.
      Right Alinea 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.

      Divisor con alineación central {width="600" modal="regular"}

    • Configure las variables Border estilo 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
      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 bordes:

      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 aplicarla al contenedor.

      Separe los distintos nombres de clase con un espacio.

    • Introduzca valores, en píxeles, para Margins and Padding para determinar los márgenes exteriores y el relleno interno del contenedor de divisores.

      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 / Left
      Padding Cantidad de espacio en blanco que se aplica al borde interior de todos los lados del contenedor. Opciones: Top / Right / Bottom / Left
  6. Cuando termine, haga clic en Save para aplicar la configuración de y volver a Page Builder workspace.

    Divisor centrado en una fila {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.

  1. Pase el ratón sobre el contenedor del divisor para mostrar la caja de herramientas y seleccione Duplicar ( Icono Duplicar {width="20"} ) icono.

    El contenedor de divisor duplicado aparece justo debajo del original.

    Divisor duplicado {width="500" modal="regular"}

  2. Pase el ratón sobre el nuevo contenedor del divisor para mostrar la caja de herramientas y seleccione Mover ( Icono Mover {width="20"} ) icono.

    Mover un divisor {width="500" modal="regular"}

  3. 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.

    Desplazamiento del divisor duplicado a su posición {width="500" modal="regular"}

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d