Un tour rápido por el Administrador de Diseño

El Administrador de Diseño de HubSpot combina todas las herramientas que necesitan los diseñadores para construir sitios web de avanzada, y, a su vez, les sigue proporcionando a los profesionales del marketing la flexibilidad que desean para crear contenido. 

En este artículo, podrás conocer todas las funciones del gestor de diseño.Si buscas ejemplos de códigos específicos y documentación de referencia, echa un vistazo a nuestra Documentación para diseñadores de HubSpot.

Herramientas incluidas en el Administrador de Diseño

El Administrador de Diseño agrupa varias herramientas importantes en una poderosa aplicación:

• Buscador: Un espacio para crear y organizar tus archivos, plantillas, módulos y carpetas.
• Editor de diseño: Un editor de arrastrar y soltar para estructurar tu página, blog, correo electrónico y plantillas del sistema.
• Inspector: Aquí es donde puedes editar las propiedades de un diseño, módulo o grupo. 
• Editor de códigos: Un entorno de desarrollo integrado (IDE) para todo tu código de interfaz (CSS, Javascript o incluso tus plantillas HTML).
• Editor de módulos: módulos personalizados reutilizables que puedes configurar para agregar funcionalidad avanzada a tu sitio que pueden ser administradas incluso por usuarios no técnicos.
• Administrador de Archivos: Un sistema de alojamiento de archivos para todos los materiales de tu sitio.

Navega hasta el Administrador de diseño para explorar estas herramientas. En tu cuenta de HubSpot, dirígete a Marketing > Archivos y plantillas > Herramientas de diseño.

Buscador

El buscador es un espacio para administrar todas tus carpetas, plantillas, módulos y archivos codificados. Puedes organizar tus archivos y carpetas como lo desees usando la interfaz de arrastrar y soltar del buscador. Al hacer clic en un archivo puedes expandir o contraer los archivos que contiene.

Todas las cuentas de Marketing Hub Pro y Enterprise y CMS Hub Pro y Enterprise tienen una carpeta @hubspot en el administrador de diseño por opción predeterminada. Esta carpeta contiene todos tus temas y módulos predeterminados, incluidos los módulos de arrastrar y soltar. Estos temas y módulos son de solo lectura, pero pueden clonarlos si quieres personalizarlos. Más información sobre cómo personalizar temas y módulos predeterminados.

Haz clic en Archivo para crear archivos o carpetas nuevos o para realizar una acción respecto al material actualmente seleccionado en el buscador, como eliminar, clonar o cambiar el nombre del material. Utiliza las opciones en Ver para administrar la distribución de tus archivos y carpetas. Puedes contraer rápidamente todas las carpetas o acceder a materiales editados recientemente o eliminados.

Nota: el buscador es contextual, lo que significa que tus acciones siempre estarán relacionadas con las carpetas y archivos seleccionados. Para crear un nuevo archivo o carpeta dentro de una carpeta específica, haz clic en esa carpeta en el buscador. Para crear un nuevo archivo o carpeta fuera de todas las carpetas existentes, haz clic en Ver, luego selecciona Deseleccionar todo.

El menú Acciones solo estará activo si un archivo o una carpeta están seleccionados, y proporciona opciones contextuales para ese tipo de material. También puedes hacer clic con el botón derecho del mouse directamente en el material para realizar cualquiera de las siguientes acciones:

• Clonar: Haz una copia de tu archivo, carpeta o plantilla.
• Mover: Selecciona una nueva carpeta para tu material.
• Cambiar el nombre: Asígnale un nuevo nombre al material.
• Clonar en HTML: Crea una copia de tu material codificado completamente en HTML.
• Copiar en portal: Crea una copia de tu material y envíala a otra cuenta de HubSpot a la que tengas acceso.
• Crear página/correo electrónico: Crea nuevo contenido usando esta plantilla.
• Mostrar dependientes: Ve una lista de cualquier contenido de HubSpot usando el archivo.
• Mostrar historial de revisiones: Revisa un historial de versiones guardadas.
• Copiar fragmento: Usa esto para copiar rápidamente el fragmento del código de tu módulo con código personalizado en el portapapeles. Esta opción solo aparecerá cuando hagas clic en el botón derecho del mouse en un módulo.
• Bloquear carpeta: bloquea una carpeta para evitar que los usuarios editen su contenido en el administrador de diseño. El contenido en carpetas bloqueadas solo se puede editar dentro de tu entorno de desarrollo local.
• Eliminar Elimina este archivo, carpeta, plantilla o módulo.

Pestañas

Cuando haces clic en el nombre de una plantilla, módulo o archivo codificado, se abre tu selección en una pestaña en el editor. Las pestañas hacen que te sea fácil realizar varias tareas a la vez y alternar entre distintas plantillas y archivos codificados. Puedes hacer clic con el botón derecho del mouse en cualquier pestaña para mostrar opciones para administrar tus pestañas en el editor. Puedes revisar una lista completa de pestañas abiertas haciendo clic en la flecha hacia abajo que está a la derecha. 

Para ofrecerte más espacio para trabajar en el editor de diseño, puedes hacer clic en el ícono de contraer primero para contraer el buscador. Puedes ampliar el buscador de nuevo haciendo clic en el folder icon ícono de carpeta.

Crear plantillas y archivos nuevos

Para crear una nueva plantilla, módulo o archivo codificado, haz clic en Archivo > Nuevo archivoen la esquina superior izquierda del buscador. Tienes la opción de crear cualquiera de los siguientes tipos de materiales:

• Arrastrar y soltar: Una plantilla creada agregando módulos hacia una interfaz intuitiva de arrastrar y soltar.
• HTML et HUBL: Una plantilla codificada personalizada creada en el editor de códigos usando HTML, CSS y Javascript.
• Hoja de estilo: Un archivo CSS codificado que se puede usar para diseñar módulos y archivos.
• Javascript: Un archivo codificado de Javascript que se puede aplicar a módulos y archivos.
• Módulo: Un módulo codificado personalizado que se puede agregar a una plantilla.

Editor de diseño

El editor de diseño es una interfaz de arrastrar y soltar para la estructura y el contenido predeterminado de tus páginas y correos electrónicos. Verás los nombres de tus módulos y grupos, junto con la clase de cuerpo aplicada a cada componente. Puedes modificar cada módulo o grupo haciendo clic en él para editarlo en el inspector en el lado derecho o haciendo clic en el componente para acceder a la función del inspector.

Arrastra y suelta componentes en el editor de diseño para ajustar su ubicación y tamaño en tu plantilla. Hay botones de Deshacer y Rehacer en la esquina superior izquierda para ayudarte a revertir rápidamente tus cambios. También puedes hacer clic con el botón derecho del mouse en un módulo para agrupar, clonar o cambiar rápidamente un tipo de módulo o usar atajos del teclado para lograr las mismas acciones. Haz clic en el botón Vista preliminar en la esquina superior derecha para tener una vista preliminar de tu trabajo y evaluar el diseño en distintos tamaños de pantalla.

El diseño de todas las plantillas de HubSpot es adaptable, lo que significa que se ajusta automáticamente a diferentes tamaños de pantalla. Este editor compila tus módulos de arrastrar y soltar en marcado HTML limpio convertido en adaptable por CSS integrado.

Más información sobre cómo crear y editar plantillas y agregar estilos a tu plantilla.

Inspector

El inspector te permite agregar y editar componentes en una plantilla o módulo. Este depende contextualmente de la tarea que estás realizando y del tipo de archivo. Por ejemplo:

• Cuando se seleccione un componente en el editor de arrastrar y solar, el inspector mostrará todas las características y opciones de ese componente.
• Cuando no se seleccione ningún componente en el editor de arrastrar y soltar, el inspector mostrará opciones para la plantilla en sí.
• Al editar un módulo, el inspector te permite editar y agregar campos.

Según el tipo de módulo seleccionado en tu plantilla, puede haber diferentes opciones disponibles en el inspector. 

Para arrastrar y soltar plantillas, la pestaña + Agregar se usa para agregar nuevos componentes a tu diseño. La pestaña Editar del inspector puede utilizarse para asignar clases CSS personalizadas, editar contenido predeterminado o adjuntar archivos codificados.

El inspector incluye una barra de navegación con visualización de la ruta en la parte superior para ayudarte a navegar rápidamente entre el material, el módulo, el grupo y la plantilla en la que estás trabajando actualmente.

Para las plantillas y los módulos HTML y HUBL personalizados y codificados, puedes usar el inspector para agregar nuevos campos o enlaces a archivos codificados.  También puedes agregar etiquetas de filtro para indicar el tipo de contenido y la función de tus plantillas y módulos codificados para realizar búsquedas en estos más fácilmente en el buscador. También puedes encontrar fragmentos y más detalles sobre cómo se pueden usar estos recursos personalizados en tus plantillas.

Editor de códigos

El editor de códigos de HubSpot es un potente IDE que te permite codificar archivos CSS, archivos Javascript e incluso plantillas HTML. A medida que codifiques o edites tus hojas de estilo, puedes ver en directo la vista preliminar de los efectos de tus cambios en una variedad de tamaños de pantalla. El editor de códigos también aprovecha muchas otras características de IDE útiles, como clases codificadas con colores, comprobación de errores, resaltado de sintaxis, guardado automático, cierre automático de etiquetas, sangría automática y más.

Más información sobre cómo usar el editor de códigos.

Ten en cuenta que: por defecto, HubSpot minifica automáticamente el JavaScript y el CSS incluidos en el gestor de diseño para eliminar espacios, saltos de línea y comentarios innecesarios. Esto también se aplica a JavaScript y CSS cargados en el gestor de diseño a través de la CLI. Esto significa que no se debe añadir código ya minificado directamente al gestor de diseño.

Más información sobre laminificación de JavaScript y CSS en .

Si bien las plantillas de arrastrar y soltar de HubSpot tienen un número de módulos estándar para elegir, los diseñadores pueden necesitar ocasionalmente una solución de diseño más personalizada. Los módulos son componentes personalizados reutilizables que contienen campos HTML y las etiquetas HubL , CSS y Javascript. Estos módulos se pueden agregar a una plantilla y personalizarse en el editor de páginas sin ningún código.

Utiliza el inspector para agregar campos, adjuntar archivos codificados o agregar etiquetas para organizar tus materiales. Al igual que en el editor de códigos, puedes tener una vista preliminar de tu trabajo en distintos tamaños de pantalla, a medida que avanzas. También puedes especificar el contenido predeterminado para los campos de tu módulo, bloquear contenido predeterminado o convertir en obligatorios campos de módulo específicos. 

Administrador de archivos

El Administrador de archivos de HubSpot almacena todos los materiales que usas para crear contenido. Esta herramienta te permite cargar archivos PDF, imágenes, videos, archivos de audio, fuentes y más. Puedes acceder a tus materiales creativos o cargar rápidamente archivos nuevos sin tener que salir de la aplicación.