Áreas de arrastrar y soltar
Esta página ilustra y explica la experiencia y los conceptos de dnd_area. Debido a que esta experiencia es bastante amplia, es una buena idea familiarizarse con ella antes de sumergirse en el código.
Una vez que estés listo para construir, consulta cómo empezar con dnd_area, y la referencia de dnd_area.
Las áreas de arrastrar y soltar permiten a los desarrolladores crear áreas de páginas y parciales globales que empoderan a los creadores de contenido. Las áreas de arrastrar y soltar permiten a los creadores de contenido colocar módulos, cambiar el diseño y algunos estilos dentro de los editores de contenido. Esto permite crear menos plantillas, que los creadores de contenido pueden utilizar para hacer una multitud de páginas con distintos propósitos y diseños por su cuenta. Los creadores de contenido pueden hacer esto sin tener que lidiar con el código o requerir nuevas plantillas para pequeños cambios de diseño. Debido a que son tan flexibles y útiles es una buena idea tener al menos 1 plantilla en tu tema que incluya áreas de arrastrar y soltar.
Nota: las áreas de arrastrar y soltar no se pueden utilizar en publicaciones del blog ni en plantillas de correo electrónico en este momento.
Cuando un creador de contenido crea una página utilizando una plantilla que tiene áreas de arrastrar y soltar, primero ve la página con módulos predefinidos colocados en un diseño por el desarrollador. Esto ayuda al creador de contenido a comprender cuán visualmente deberían o tienden a verse la mayoría de las páginas que usan esta plantilla. Este es un punto de partida, pero no una apariencia de bloqueo. El creador de contenido puede arrastrar y soltar módulos, secciones, filas y columnas para reorganizarlos. Pueden cambiar el tamaño, editar su contenido y ajustar distintas opciones de estilo visual que permiten alinear vertical y horizontalmente el contenido y agregar fondos.
Para los creadores de contenido esto es mucho poder. Esto les da suficiente flexibilidad para hacer cambios simples en la página sin tener que molestar a un desarrollador por pequeños ajustes.
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 sólo pueden cambiarse por otras plantillas codificadas con etiquetas
dnd_area. - Las plantillas codificadas sin etiquetas
dnd_areasólo pueden cambiarse por otras plantillas codificadas sin etiquetasdnd_area.
Para los desarrolladores, trabajar con dnd_area es semi-similar a trabajar con los frameworks CSS más comunes y sus cuadriculas. Los desarrolladores diseñan la página utilizando contenedores llamados secciones, que contienen filas. Dentro de esas filas hay módulos y columnas. Casi todo lo que los creadores de contenido pueden hacer en el editor de páginas con etiquetas de área de arrastrar y soltar lo pueden hacer los desarrolladores en código en las propias plantillas. Lo que los desarrolladores están construyendo es el contenido predeterminado para las páginas que utilizan esa plantilla.
Los beneficios de utilizar áreas de arrastrar y soltar frente a las etiquetas de módulos de codificación dura en la plantilla, es que los creadores de contenido pueden cambiar el contenido y el diseño dentro de ellos. Debido a esta flexibilidad, una plantilla con áreas de arrastrar y soltar puede resolver una multitud de diseños de páginas.
Ve las plantillas CMS Theme Boilerplate para ver las etiquetas dnd_area en uso.
Las áreas de arrastrar y soltar se componen de un puñado de bloques de construcción que definen el diseño y apoyan la flexibilidad de la alineación del estilo. La etiqueta dnd_area crea una región en la página que el editor de páginas reconoce, permitiendo agregar, eliminar y reorganizar los elementos de arrastrar y soltar. Estos se definen utilizando HubL dentro de las plantillas HTML+HubL. Todos los elementos arrastrar y soltar viven dentro de un área de arrastrar y soltar. No se pueden anidar las áreas de arrastrar y soltar, y los elementos de arrastrar y soltar no pueden contener áreas de arrastrar y soltar.
Una cosa importante que debemos entender como desarrolladores es que el contenido del área de arrastrar y soltar que se define en la plantilla, es un punto de partida para las páginas que utilizan esa plantilla. Los creadores de contenido pueden cambiar completamente el contenido dentro de un área de arrastrar y soltar. Tu trabajo consiste en proporcionarles un punto de partida sensato para que lo modifiquen.
Este diagrama es un desglose de cómo se pueden anidar los distintos elementos de arrastrar y soltar. Un concepto clave que hay que entender es que tanto las secciones como las filas pueden contener columnas y módulos.
Las secciones son un tipo especial de fila. Las secciones se crean en las plantillas utilizando la etiqueta dnd_section. Son el único elemento de arrastrar y soltar que puede ser descendiente directo de un área de arrastrar y soltar. Puedes pensar en las secciones como un contenedor de envoltura exterior. Pueden permitir que el contenido sea de ancho completo o que tenga un ancho máximo confinado en el centro. Debido a que las secciones envuelven las columnas y los módulos, facilita la reorganización e implementación de grandes porciones de contenido. La etiqueta dnd_section no muestra un elemento HTML <section>.
La apariencia de una sección en el editor de páginas.
Los desarrolladores pueden proporcionar plantillas de sección, que crean secciones reutilizables en el editor de páginas. Se trata de secciones preconfiguradas definidas por el desarrollador, que los creadores de contenidos pueden utilizar como punto de partida. Las secciones reutilizables tienen algunas capacidades únicas, incluyendo la posibilidad de utilizarlas de forma similar a una plantilla parcial estándar de hubL.
Las columnas son envoltorios para las filas y los módulos. Se colocan columnas dentro de una fila, o sección que es una fila especializada. Las columnas se crean en las plantillas utilizando la etiqueta dnd_column.
Utiliza varias columnas dentro de una fila para colocar las filas y los módulos que contienen de forma horizontal.
Las columnas son regiones verticales que pueden contener filas. Puedes hacer columnas de diferentes tamaños cambiando su anchura. El tamaño de una fila es de 12 "columnas" de ancho, esto se refiere a la cuadrícula CSS. Las columnas dentro de una fila pueden ser de cualquier tamaño menor que 12 pero no pueden sumar más de 12.
Cuando se colocan varias filas dentro de una columna, los módulos dentro de esas filas aparecerán apilados verticalmente. Dado que los módulos son columnas en sí mismos, un módulo no puede ser descendiente directo de una columna, sino que debe estar contenido en una fila.
La apariencia de una columna en el editor de páginas.
Las filas son envoltorios de las columnas. Las filas son creadas en las plantillas utilizando la etiqueta dnd_row. Como los módulos son columnas, puedes colocarlos directamente dentro de una fila. Esto causará que los módulos aparezcan horizontalmente adyacentes entre sí.
Los módulos se pueden organizar verticalmente colocándolos dentro de las filas. Si quieres colocar un módulo por encima de otro, debes colocar ese módulo dentro de una fila. A continuación, se agregaría otro módulo en una fila por encima o por debajo de esa primera fila.
La aparición de una fila en el editor de páginas.
Los módulos son una parte fundamental del CMS de HubSpot, actuando como bloques de construcción reutilizables que se utilizan para armar un sitio, y mostrar el contenido. Cuando se construye una plantilla se colocan módulos dentro de las filas y secciones de arrastrar y soltar utilizando la etiqueta dnd_module. Los módulos también son columnas. Esto significa que si colocas dos etiquetas de módulo, o un módulo y una columna directamente al lado del otro, aparecerán uno al lado del otro horizontalmente.
No se pueden colocar elementos de arrastrar y soltar dentro de un módulo. Los módulos no pueden ser hijos directos de un dnd_area.
Las áreas de arrastrar y soltar y sus elementos cuando se renderizan tienen nombres de clase para una cuadrícula de 12 columnas basada en bootstrap 2. Para facilitar su puesta en marcha, puedes utilizar el archivo _layout.css del Plantilla de temas de CMS. Esto proporciona estilos predeterminados para esos nombres de clase.
No requieres utilizar esta hoja de estilos y puedes proporcionar tus propios estilos en su lugar. Si estás construyendo tu sitio basado en la plantilla de tema CMS y deseas utilizar tu propio CSS, querrás eliminar layout.css de ser llamado en base.html. Para tu propia cuadrícula CSS tendrás que apuntar a esos mismos nombres de clase de cuadrícula, pero el estilo depende de ti.
Las áreas de arrastrar y soltar cuando se renderizan crean divs con clases que son usadas por el editor de la página. Algunos ejemplos serían widget-span y widget-type-cell. No deberías apuntar directamente a estas clases ya que son utilizadas por el editor de páginas y podrían cambiar en el futuro.
En su lugar en tu dnd_area hubL agrega un parámetro de clase con el nombre de la clase que deseas utilizar
Con las áreas de arrastrar y soltar los creadores de contenido pueden tener algún efecto en el estilo de la página. Por ejemplo, pueden establecer que una sección tenga un fondo. Los desarrolladores pueden pasar valores predeterminados para esas configuraciones a través de atributos.
Cuando la página se renderiza realmente, los estilos que se generan en base a esas configuraciones se agregan a standard_header_includes.
En el lanzamiento de dnd_area esos estilos fueron cargados desde standard_footer_includes. Esto ha cambiado recientemente a standard_header_includes y se está implementando a todas las cuentas de HubSpot con el CMS de HubSpot.
Si estás cambiando las plantillas construidas con columnas flexibles para utilizar ahora áreas de arrastrar y soltar, hay algunas cosas que debe entender. Las columnas flexibles no son lo mismo que las áreas de arrastrar y soltar, no puedes pasar de una plantilla que sólo tiene una columna flexible a otra que sólo tiene un área de arrastrar y soltar. No lo permitimos como medida de seguridad. El contenido no se mapeará desde la columna flexible al área de arrastrar y soltar. Para ilustrar el porqué de esto, supón que construiste tu nueva plantilla de manera que tiene una barra lateral y un área de contenido principal. Tu barra lateral es una columna flexible, tu contenido principal es un área de arrastrar y soltar. La herramienta de intercambio mapearía la columna flexible a la columna flexible.
Gracias por tus comentarios, son muy importantes para nosotros.