DocumentaciónCommercePage Builder

Elementos: divisor

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Temas:

Creado para:

  • Principiante
  • Intermedio
  • Usuario

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.

Divisor predeterminado en un contenedor sin borde

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

NOTE
Si está realizando cambios significativos en el contenido de Page Builder, se recomienda aumentar la Duración de la 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 de 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
Ocultar icono {width="25"}
Oculta el contenedor del divisor.
Mostrar
Mostrar icono {width="25"}
Muestra el contenedor de divisores oculto.
Duplicar
Icono duplicado {width="25"}
Realiza una copia del contenedor del divisor.
Eliminar
Quitar icono {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 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.

    Arrastrando 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 elija el icono Configuración ( icono Configuración {width="20"} ).

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

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

    Estableciendo color de línea {width="600" modal="regular"}

  3. Escriba Line Thickness en píxeles.

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

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

  5. 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
      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 al centro {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
      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.

      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 / 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. Una vez finalizado, haga clic en Save para aplicar la configuración y volver al área de trabajo Page Builder.

    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 elija el icono Duplicar ( Icono de duplicado {width="20"} ).

    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 ver la caja de herramientas y elija el icono Mover ( Icono Mover {width="20"} ).

    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.

    Moviendo el divisor duplicado a la posición {width="500" modal="regular"}

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