Primeros pasos con las áreas de arrastrar y soltar

Last updated:
APPLICABLE PRODUCTS
  • Marketing Hub
    • Professional or Enterprise
  • CMS Hub
    • Professional or Enterprise

Las áreas de arrastrar y soltar permiten a los desarrolladores crear secciones de páginas que admiten cambios de diseño, estilo y contenido directamente en los editores de contenido. Esto permite a los desarrolladores crear unas pocas plantillas con estructura global, que apoyan a los creadores de contenido haciendo una multitud de páginas con varios propósitos y diseños, sin tener que lidiar con el código o requerir nuevas plantillas para pequeños cambios de diseño.

Animación de módulos arrastrados a una página, con ajuste de columnas y filas

Los desarrolladores pueden especificar zonas vacías para las áreas de arrastrar y soltar, donde los creadores de contenido construyen su propio contenido y diseño de la página, o bien, los desarrolladores pueden rellenar previamente las áreas de arrastrar y soltar con varios módulos, diseños, estilos y contenido para actuar como un punto de partida para los creadores de contenido para trabajar.

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 la plantilla para las mejores prácticas de implementación, así como la documentación de referencia de la etiqueta HubL del área de arrastrar y soltar.

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.

  • Las plantillas construidas con el editor de diseño visual de arrastrar y soltar pueden cambiarse por otras plantillas de arrastrar y soltar o 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.

1 1. Crear una plantilla HTML nueva

Crea una nueva plantilla html para alojar el HubL y el HTML que conformarán tu sección de arrastrar y soltar.

Las áreas de arrastrar y soltar se basan en una cuadricula responsiva de 12 columnas. Las etiquetas de arrastrar y soltar generan marcas con nombres de clase que designan columnas y filas.  Tú eres responsable de agregar una hoja de estilo para orientar esos nombres de clase. Un ejemplo de estilos de diseño que podrías implementar se encuentra en: CMS-Theme-Boilerplate. Tu hoja de estilo se puede agregar a la plantilla utilizando {{ require_css() }}.

2. Áreas de arrastrar y soltar

Un dnd_area  es un contenedor 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 suministra el contenido por opción predeterminada para el á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 creador de contenidos. 

{% dnd_area "body_dnd_area" %} <!-- generates an empty drag and drop area drop-section --> {% end_dnd_area %}

3. 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 por opción predeterminada de los controles estilísticos que los creadores de contenido tienen para las secciones dentro de los creadores de contenido.

Establezcamos una imagen de fondo, y establezcamos una alineación vertical centrada y un ancho máximo de 1000px para el contenido secundario. 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 la etiqueta HubL de arrastrar y soltar. 

Para rellenar la sección con contenido, podemos utilizar la etiqueta dnd_module para incluir un módulo haciendo referencia a su ruta. En este ejemplo, estamos haciendo referencia a un módulo predeterminado de HubSpot, pero puedes incluir adicionalmente módulos que hayas construido, especificando su ruta dentro de tu árbol de archivos de Herramientas de Diseño.

Para especificar un valor predeterminado para nuestro dnd_module, podemos utilizar la etiqueta module_attribute.

{% 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 %}

Ahora, podemos ver que nuestra área de arrastrar y soltar contiene un módulo que los creadores de contenido pueden editar dentro del editor de contenido. También podemos ver cómo establecer un max_width en el dnd_section está afectando a nuestro contenido. 

captura de pantalla del editor de páginas con la barra de herramientas del módulo mostrando

4. Incluir varios módulos

Para incluir más de un módulo, podemos utilizar varias etiquetas dnd_module. Al establecer los parámetros desplazamiento y ancho que se basan en una cuadrícula de 12 columnas, podemos colocar un módulo de imagen junto a nuestro módulo de texto enriquecido

{% 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> <p>Use this space to tell everyone about what you have to offer.</p> {% 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, también tenemos 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. También podemos ver cómo al establecer un vertical_alignment en el dnd_section se centra verticalmente nuestro contenido. 

captura de pantalla del editor de páginas mostrando un módulo de imagen agregado a una sección

5. Incorporar columnas y filas

Para hacer más compleja nuestra zona de arrastre, podemos 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 clonar, eliminar y dar estilo a las filas y columnas. 

{% 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> <p>Use this space to tell everyone about what you have to offer.</p> {% 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, nuestros creadores de contenido tendrán un mayor control estilístico y de diseño sobre filas y columnas específicas, además de módulos y secciones. 

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.

6. Establecer estilos genéricos de componentes para arrastrar y soltar

Los distintos componentes de las áreas de arrastrar y soltar, las secciones, las columnas, las filas y los módulos tienen clases que pueden ser estilizadas usando CSS. Los estilos y opciones editables de estos componentes pueden establecerse utilizando CSS en lugar de HubL. Por ejemplo, el relleno predeterminado se puede establecer en dnd_sections con el CSS:

.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 un dnd_area a tu página, eres responsable de 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 plantilla de CMS de HubSpot. CMS-Theme-Boilerplate. Tu hoja de estilo se puede agregar a la plantilla utilizando {{ require_css() }}.

Para obtener más recursos para desarrolladores sobre las áreas de arrastrar y soltar, consulta la plantilla para las mejores prácticas de implementación, así como la documentación de referencia de la etiqueta HubL del área de arrastrar y soltar de.  

Tutoriales relacionados

¿Te resultó útil este artículo?
Con este formulario puedes enviar tu opinión sobre nuestros documentos para desarrolladores. Si tienes comentarios sobre el producto de HubSpot, puedes enviarlos al Foro de ideas.