> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.es/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Crear un área de arrastrar y soltar

> Usa áreas de arrastrar y soltar para ayudar a los creadores de contenidos a realizar fácilmente cambios de diseño, estilo y contenido

export const SupportedProducts = ({marketing, sales, service, cms, marketingLevel, salesLevel, serviceLevel, cmsLevel}) => {
  const translations = {
    header: "Productos compatibles",
    description: "Se requiere uno de los siguientes productos o productos de ediciones superiores.",
    productNames: {
      marketing: "Marketing Hub",
      sales: "Sales Hub",
      service: "Service Hub",
      cms: "Content Hub"
    },
    tiers: {
      free: "Gratuito",
      starter: "Starter",
      professional: "Pro",
      enterprise: "Enterprise"
    }
  };
  const translateTier = tier => {
    if (!tier) return '';
    const lowerTier = tier.toLowerCase();
    return translations.tiers[lowerTier] || tier;
  };
  const products = [{
    name: marketing ? translations.productNames.marketing : '',
    level: translateTier(marketingLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/marketing-bolt.svg",
    alt: "Marketing Hub"
  }, {
    name: sales ? translations.productNames.sales : '',
    level: translateTier(salesLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/sales-star.svg",
    alt: "Sales Hub"
  }, {
    name: service ? translations.productNames.service : '',
    level: translateTier(serviceLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/service-heart.svg",
    alt: "Service Hub"
  }, {
    name: cms ? translations.productNames.cms : '',
    level: translateTier(cmsLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/content-play.svg",
    alt: "Content Hub"
  }].filter(product => product.name && product.level);
  if (products.length === 0) return null;
  return <div>
      <div className="text-sm mb-2">{translations.description}</div>
      <div className={`grid ${products.length === 1 ? 'grid-cols-1' : 'grid-cols-2'} gap-1.5`}>
        {products.map((product, index) => <div key={index} style={{
    display: 'flex',
    alignItems: 'center'
  }}>
            <img src={product.icon} alt={product.alt} className="w-3.5 h-3.5 mr-1.5 mt-2.5 mb-2.5 flex-shrink-0 align-middle" />
            <span className="font-medium mr-1 text-sm">{product.name} -</span>
            <span className="text-sm">{product.level}</span>
          </div>)}
      </div>
    </div>;
};

<Accordion title="Productos compatibles" defaultOpen="true" icon="cubes">
  <SupportedProducts marketing={true} marketingLevel="professional" cms={true} cmsLevel="professional" />
</Accordion>

[Las áreas de arrastrar y soltar](https://developers.hubspot.es/docs/cms/start-building/building-blocks/drag-and-drop/overview) son secciones de una plantilla que actúan como contenedores vacíos que pueden modificarse directamente desde el editor de páginas. Crear áreas de arrastrar y soltar en una plantilla permite a los creadores de contenidos añadir y gestionar módulos en el editor de páginas según sea necesario, en lugar de depender de módulos estáticos integrados en la plantilla.

<Frame>
  <img src="https://newinboundblog.hubspot.com/hubfs/a%20new%20approach.gif" alt="Animación de módulos arrastrados a una página, con ajuste de columnas y filas" />
</Frame>

Además de utilizar las áreas de arrastrar y soltar como zonas de colocación vacías para los creadores de contenidos, también puedes rellenar automáticamente estas áreas con varios módulos, diseños y contenidos para que sirvan como punto de partida.

Este tutorial te guiará en la configuración de un área de arrastrar y soltar simple. Para obtener más recursos para desarrolladores sobre las áreas de arrastrar y soltar, consulta en [este boilerplate](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/home.html) las prácticas de implementación recomendadas, así como la [documentación de referencia sobre la etiqueta HubL del área de arrastrar y soltar](/cms/reference/hubl/tags/dnd-areas).

<Warning>
  **Nota:** Un creador de contenido puede cambiar la plantilla de una página por otra del mismo tipo, dependiendo de si tiene etiquetas [dnd\_area](/cms/reference/hubl/tags/dnd-areas).

  * Las plantillas de arrastrar y soltar creadas con el editor de diseño visual pueden cambiarse por otras plantillas de arrastrar y soltar o por plantillas codificadas con o sin etiquetas *dnd\_area*.
  * Las plantillas codificadas con etiquetas *dnd\_area* solo pueden cambiarse por otras plantillas codificadas con etiquetas *dnd\_area*.
  * Las plantillas codificadas sin etiquetas *dnd\_area* solo pueden cambiarse por otras plantillas codificadas sin etiquetas *dnd\_area*.

  Cuando se cambia la plantilla de la página, se conservará todo el contenido que se hubiera añadido a las áreas de arrastrar y soltar de la primera plantilla.
</Warning>

<Steps>
  <Step title="Crear una plantilla HTML nueva">
    Crea una nueva plantilla HTML para alojar el HubL y el HTML que conformarán la sección de arrastrar y soltar.

    <Info>
      Las áreas de arrastrar y soltar se basan en una cuadrícula adaptable de 12 columnas. Las etiquetas de arrastrar y soltar generan marcado con nombres de clase que designan columnas y filas. Debes agregar una hoja de estilo para asignar esos nombres de clase. Un ejemplo de estilos de diseño que podrías implementar se encuentra en la [biblioteca de recursos del CMS de HubSpot](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/css/objects/_layout.css). Tu hoja de estilo puede agregarse a la plantilla usando [`{{ require_css() }}`](/cms/reference/hubl/tags/standard-tags#require-css).
    </Info>
  </Step>

  <Step title="Áreas de arrastrar y soltar">
    La sección `dnd_area` es lo que hace que una parte de la página web sea editable en cuanto a su estructura, diseño y contenido. El cuerpo de una etiqueta `dnd_area` proporciona el contenido predeterminado del área de arrastrar y soltar.

    Esta etiqueta por sí sola generará una zona de caída para que los creadores de contenidos arrastren los módulos dentro del área de creación.

    ```hubl theme={null}
    {% dnd_area "body_dnd_area" %}
    	<!-- generates an empty drag and drop area drop-section -->
    {% end_dnd_area %}
    ```
  </Step>

  <Step title="Crear una sección con un módulo">
    Una `dnd_section` es una fila de nivel superior, y solo puede ser elemento secundario directo de una `dnd_area`. Las secciones admiten una variedad de parámetros que controlan los valores predeterminados de los controles estilísticos que los creadores de contenido tienen para las secciones dentro del área de creación.

    A modo de ejemplo, el código siguiente crea una sección con una imagen de fondo (`background_image`). Esta sección está centrada por un parámetro `vertical-alignment` y tiene una anchura máxima de un campo de `1000px` para contenido infantil. Para obtener una lista completa de los parámetros admitidos en las etiquetas HubL de arrastrar y soltar, consulta la documentación de referencia de [esta etiqueta HubL específica](/cms/reference/hubl/tags/dnd-areas).

    Para rellenar automáticamente la sección con contenido, el código también incluye una etiqueta `dnd_module` para incluir un módulo haciendo referencia a su ruta. En este ejemplo, el `dnd_module` está usando el módulo de texto enriquecido predeterminado de HubSpot, según lo establecido por el parámetro `path`. Se especifica un valor predeterminado para el módulo de texto enriquecido mediante la etiqueta `module_attribute`.

    ```hubl theme={null}
    {% dnd_area "body_dnd_area" %}
        {% dnd_section
            background_image = {
                'backgroundPosition': 'MIDDLE_CENTER',
                'backgroundSize': 'cover',
                'imageUrl': 'https://www.dragndrop.com/bg-image.jpg'
              },
              max_width=1000,
              vertical_alignment='MIDDLE'
        %}
            {% dnd_module path='@hubspot/rich_text' %}
                {% module_attribute "html"%}
                    This is your main headline.
                    Use this space to tell everyone about what you have to offer.
                {% end_module_attribute %}
            {% end_dnd_module %}
        {% end_dnd_section %}
    {% end_dnd_area %}
    ```

    El resultado es que el área de arrastrar y soltar contiene un módulo que los creadores de contenidos pueden editar dentro del área de edición. Observa cómo ajustar el valor `max_width` en la sección `dnd_section` afecta al contenido.

    <Frame>
      <img src="https://newinboundblog.hubspot.com/hubfs/dnd_rich_text.png" alt="captura de pantalla del editor de páginas con la barra de herramientas del módulo mostrando" />
    </Frame>
  </Step>

  <Step title="Incluir varios módulos">
    Para incluir más de un módulo, usa varias etiquetas `dnd_module`. Al definir los parámetros `offset` y `width` que se basan en una cuadrícula de 12 columnas, puedes colocar un módulo de imagen junto al módulo de texto enriquecido, como se muestra abajo.

    ```hubl theme={null}
    {% dnd_area "body_dnd_area" %}
        {% dnd_section
            background_image={
                'backgroundPosition': 'MIDDLE_CENTER',
                'backgroundSize': 'cover',
                'imageUrl': 'https://www.dragndrop.com/bg-image.jpg'
            },
            max_width=1000,
            vertical_alignment='MIDDLE'
        %}
            {% dnd_module path='@hubspot/rich_text', width=8, offset=0, label="Rich Text" %}
                {% module_attribute "html"%}
                	<h1>This is your main headline.</h1>

    Use this space to tell everyone about what you have to offer.
                {% end_module_attribute %}
            {% end_dnd_module %}
            {% dnd_module path='@hubspot/linked_image',
              width=4,
              offset=8,
              img={
                "src": "https://www.dragndrop.com/placeholder-image.jpg",
                "alt": "Stock placeholder image"
              }
            %}
            {% end_dnd_module %}
        {% end_dnd_section %}
    {% end_dnd_area %}
    ```

    Ahora, la página también tiene un módulo de imagen editable, así como una manilla de arrastre, que permite a los creadores de contenido cambiar el ancho y el desplazamiento de los módulos. Observa cómo fijar un `vertical_alignment` en la `dnd_section` centra el contenido de forma vertical.

    <Frame>
      <img src="https://newinboundblog.hubspot.com/hubfs/dnd_rich_image.png" alt="captura de pantalla del editor de páginas mostrando un módulo de imagen agregado a una sección" />
    </Frame>
  </Step>

  <Step title="Incorporar columnas y filas">
    Para hacer más compleja la zona de arrastre, puedes incorporar filas y columnas utilizando las etiquetas `dnd_row` y `dnd_column`. Las filas y columnas actúan de forma similar a las secciones en el editor de contenido, donde los creadores de contenido pueden arrastrarlas, así como clonarlas, eliminarlas y darles estilo.

    ```hubl theme={null}
    {% dnd_area "body_dnd_area" %}
      {% dnd_section
        background_image={
            'backgroundPosition': 'MIDDLE_CENTER',
            'backgroundSize': 'cover',
            'imageUrl': 'https://www.dragndrop.com/bg-image.jpg'
        },
        max_width=1000,
        vertical_alignment='MIDDLE'
      %}
        {% dnd_module path='@hubspot/linked_image',
          width=6,
          img={
            "src": "https://www.dragndrop.com/placeholder-image.jpg",
            "alt": "Stock placeholder image"
          }
        %}
        {% end_dnd_module %}
        {% dnd_column width=6, offset=6 %}
          {% dnd_row
            padding={
                'bottom': 15
            }
          %}
            {% dnd_module path='@hubspot/rich_text' %}
              {% module_attribute "html"%}
                  <h1>This is your main headline.</h1>

    Use this space to tell everyone about what you have to offer.
              {% end_module_attribute %}
            {% end_dnd_module %}
          {% end_dnd_row %}
          {% dnd_row %}
            {% dnd_module path='@hubspot/form' %}
            {% end_dnd_module %}
          {% end_dnd_row %}
        {% end_dnd_column %}
      {% end_dnd_section %}
    {% end_dnd_area %}
    ```

    Ahora, los creadores de contenido tendrán un mayor control estilístico sobre filas y columnas específicas, además de módulos y secciones.

    <Frame>
      <img src="https://newinboundblog.hubspot.com/hubfs/dnd_area_full.png" alt="captura de pantalla del editor de páginas mostrando una fila con dos columnas, un módulo de imagen a la izquierda, un módulo de texto enriquecido y un módulo de formulario a la derecha." />
    </Frame>
  </Step>

  <Step title="Definir estilos genéricos para los componentes de arrastrar y soltar">
    Los distintos componentes de las áreas, las secciones, las columnas, las filas y los módulos de arrastrar y soltar tienen clases a las que se puede aplicar estilo usando CSS. Los estilos y opciones editables de estos componentes pueden definirse utilizando CSS en lugar de HubL. Por ejemplo, el relleno predeterminado se puede definir en las `dnd_sections` con el CSS:

    ```css theme={null}
    .dnd-section {
      padding: 80px 20px;
    }
    ```

    Los selectores CSS genéricos para los componentes del área de arrastrar y soltar son `.dnd-section`, `.dnd-column`, `.dnd-row` y `.dnd-module`. Aparte de estas clases con prefijo `dnd`, los nombres de las clases de la cuadrícula en el marcado se basan en los nombres de bootstrap 2. Esto no significa que tengas que usar bootstrap 2 con áreas de arrastrar y soltar. Cuando agregas una `dnd_area` a la página, debes proporcionar los estilos que hacen que la cuadrícula funcione. Un ejemplo de estilos de diseño que podrías implementar se encuentra en la [biblioteca de recursos del CMS HubSpot](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/css/objects). Tu hoja de estilo puede agregarse a la plantilla usando [`{{ require_css() }}`](/cms/reference/hubl/tags/standard-tags#require-css).
  </Step>
</Steps>

## Tutoriales relacionados

* [Primeros pasos para usar temas](/cms/start-building/building-blocks/themes/getting-started)
* [Primeros pasos con los módulos personalizados](/cms/start-building/building-blocks/modules/overview)
* [Cómo agregar capacidades de tema a un sitio existente](/cms/best-practices/improve-existing-sites/add-theme-features-to-existing-sites)