---
url: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/elementos/separador'
title: 'Añadir un separador | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T00:13:10+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Obtienes una línea horizontal limpia que divide tu página en secciones claras. Úsala entre texto, imágenes u otros elementos cuando una página necesita una pausa visual.'
tags:
  - 'Data and motion'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Añadir un separador'
      description: 'Obtienes una línea horizontal limpia que divide tu página en secciones claras. Úsala entre texto, imágenes u otros elementos cuando una página necesita una pausa visual.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T00:13:10+0000'
      dateModified: '2026-10-24T17:19:22+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/elementos/separador'
      articleSection: 'Datos y animación'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/elementos/separador'
      description: 'Obtienes una línea horizontal limpia que divide tu página en secciones claras. Úsala entre texto, imágenes u otros elementos cuando una página necesita una pausa visual.'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Inicio
            item: 'https://dxpr.com/es'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: es
---
[Centro de ayuda](/es/hc)/[Documentación](/es/hc/documentacion) /[Aprende DXPR Builder](/es/hc/documentation/learn-dxpr-builder) /[Crear páginas](/es/hc/documentation/learn-dxpr-builder/build) /[Añadir contenido](/es/hc/documentation/learn-dxpr-builder/elements) /[Datos y animación](/es/hc/documentation/learn-dxpr-builder/elements/data-and-motion) # Añadir un separador.

 Aprende DXPR BuilderCrear páginasAñadir contenidoDatos y animación

   ## En esta guía

 Guías relacionadas

- [Cambia el aspecto de un elemento en el panel Style](/es/hc/documentacion/aprender-dxpr-builder/ajustes-elemento/pestana-style)

Obtienes una línea horizontal limpia que divide tu página en secciones claras. Úsala entre texto, imágenes u otros elementos cuando una página necesita una pausa visual.

## Añade un separador

Abre tu página con la sesión iniciada: los controles del constructor aparecen cuando pasas el cursor sobre la zona de contenido. [Crea tu primera página](/es/hc/documentacion/aprender-dxpr-builder/primeros-pasos/primera-pagina) muestra lo básico.

1. Pasa el cursor sobre la columna y haz clic en **+** en su barra de controles, o haz clic en **Add Elements** en una página vacía. Abre la pestaña **Content** y haz clic en **Divider**. Queda arriba de la columna, sin diálogo. Arrástralo por el tirador de su barra de controles para moverlo.
2. La línea es fina, así que pasa el cursor sobre la línea misma para mostrar su barra de controles. Haz clic en **More**, elige **Settings** y escoge un **Color**.
3. En **Thickness**, elige **Custom thickness**.
4. Arrastra el deslizador **Thickness** para definir el grosor de la línea. Aquí usamos 6 px.
5. En **Length**, elige **Custom width**.
6. Arrastra el deslizador **Width** para definir la longitud de la línea. Aquí usamos 300 px.
7. Pon **Align** en **Center**.
8. Haz clic en **Save** en el diálogo. Luego haz clic en **Save** en la barra de herramientas arriba de la zona de contenido para guardar la página.

  ## Lo que ves

Una línea horizontal cruza la columna en el color, grosor y longitud que elegiste. En el vídeo, tiene 6 px de grosor, 300 px de longitud y está centrada. Las visitas la ven cuando guardas la página y está publicada.

## Configura tu separador

Pasa el cursor sobre el elemento y abre **More > Settings** en su barra de controles. Opciones:

- **Color:** el color de la línea. Déjalo vacío para usar el color del tema.
- **Thickness:** Theme default o Custom thickness. Custom thickness añade un deslizador **Thickness** de 0 a 20 px.
- **Length:** Theme default o Custom width. Deja **Length** en Theme default para una línea de ancho completo. Custom width añade un deslizador **Width** de 0 a 500 px.
- **Align:** Left, Center o Right. Solo se muestra con Custom width.

## Si no lo ves

- **Divider no está en la pestaña Content.** Tu perfil de usuario lo oculta. Pide a una cuenta administradora que marque **Separator** en **Elements** en [User profiles](/es/hc/documentacion/aprender-dxpr-builder/administracion/perfiles-usuario-administracion).
- **Ya no está tras recargar.** La página no se guardó. Añádelo de nuevo y haz clic en **Save** en la barra de herramientas arriba de la zona de contenido.
- **El separador queda sobre tu contenido.** Los elementos nuevos llegan arriba de la columna. Pasa el cursor sobre la línea y arrástrala por su tirador, o abre **More > Move Down**.
- **La línea es invisible.** El **Color** coincide con el fondo de la página. Pasa el cursor sobre el elemento y abre **More > Settings**, y elige un color con contraste.
- **La línea no ocupa todo el ancho.** **Length** está en Custom width. Pasa el cursor sobre el elemento y abre **More > Settings**, y devuelve **Length** a Theme default.

## ¿Qué sigue?

[Panel Style](/es/hc/documentacion/aprender-dxpr-builder/ajustes-elemento/pestana-style) para cambiar el espaciado alrededor de tu separador.