Qué herramientas se incluyen en el Administrador de diseño
El Administrador de diseño engloba varias herramientas importantes en una poderosa aplicación. Estas herramientas incluyen:
- Creador de plantillas : un editor de "arrastrar y soltar" para la estructuración de las plantillas de tu página, blog, correo electrónico y del sistema.
- Editor de código : es un entorno de desarrollo integrado (IDE) para todo tu código frontend (CSS, Javascript, o incluso tus propias plantillas HTML).
- CSS Principal : es un archivo de CSS global que ayudará a unificar el aspecto de todo el contenido que crees con HubSpot.
- Módulos personalizados : son módulos codificados personalizados reutilizables que se pueden configurar para agregar funcionalidad avanzada a tu sitio, que puede ser administrados aun por usuarios que no sean técnicos.
- Administrador de archivos : es un sistema de alojamiento de archivos para todos los activos de tu sitio.
Navegar el Administrador de diseño
La forma más rápida de abrir el Administrador de diseño es navegar allí desde la pestaña de Contenido ( Contenido > Administrador de diseño ).

Carpetas
El Administrador de diseño te permite organizar todas tus plantillas y archivos codificados en carpetas. Tus carpetas se encuentran en la barra lateral izquierda de la aplicación. Puedes ampliar cada carpeta con un clic en la flecha de divulgación, junto a su nombre. Al crear plantillas o archivos codificados, también puedes crear carpetas personalizadas nuevas con un clic en el botón de Carpeta nueva .Las carpetas personalizadas se eliminan automáticamente cuando ya no contienen plantillas o archivos.
También hay algunas opciones de filtros útiles debajo de tus carpetas que te ayudan a que localices rápidamente la plantilla o archivo en el que deseas trabajar. Estas opciones incluyen:
- Editado recientemente : las plantillas o archivos en los que has estado trabajando más recientemente.
- Grupos globales : son colecciones de módulos que se pueden agregar a cualquiera de tus plantillas. En una sección posterior de esta guía aprenderás más sobre el Contenido global.
- Plantillas del sistema : son plantillas para preferencias de suscripción por correo electrónico, error y páginas protegidas con contraseña. En una sección posterior de esta guía aprenderás más sobre las Plantillas del sistema..
- Comprado : plantillas adquiridas a través del mercado.

Además de hacer clic en una carpeta para que aparezca una lista de los archivos contenidos, también puedes buscar dentro de esa carpeta al introducir el nombre de un archivo o una palabra clave en la barra de búsqueda. Para los resultados más amplios, haz clic en la carpeta del nivel superior antes de buscar.

Pestañas
Cuando haces clic en el nombre de una plantilla o de un archivo codificado, se abre tu selección en una pestaña. Las pestañas hacen que sea fácil realizar varias tareas a la vez y alternar entre tus varias plantillas y archivos codificados. Para agregar otra pestaña a tu Administrador de diseño, haz clic en +Pestaña..

Crear plantillas y archivos nuevos
Para crear una nueva plantilla o archivo codificado, haz clic en el botón azul en la parte derecha de la aplicación. Dependiendo de si tienes una carpeta de plantillas, una carpeta de archivos codificados o la carpeta del módulo personalizado seleccionada, el botón dirá Nueva plantilla, Nuevo archivo codificado, o Nuevo módulo personalizado, respectivamenteAprenderás más acerca de cómo crear plantillas y archivos codificados, más adelante en esta guía.

Template Builder (Creador de plantillas)
El Creador de plantillas es un editor de "arrastrar y soltar" que te permite configurar la estructura y predeterminar contenido en tus páginas y correos electrónicos. Aunque puedes codificar tus propias plantillas HTML a partir de cero, construir tu sitio web y correos electrónicos con el Creador de plantillas les ahorrará tiempo a los diseñadores y les proporcionará a los profesionales del marketing mucho más control a la hora de estructurar su contenido.
Todos los diseños de plantilla HubSpot tienen capacidad de respuesta, lo que significa que se ajustan automáticamente a los diferentes tamaños de pantalla. Este editor compila tus módulos de "arrastrar y soltar" en especificaciones HTML limpias que tienen capacidad de respuesta por medio de algunos CSS incorporados.
Con casi un tercio de todo el tráfico en internet procedente de dispositivos móviles, tu sitio debe ser fácil de usar en todos los dispositivos, sin importar el tamaño de sus pantallas. Aprenderás acerca de la creación y la edición de plantillas en una sección posterior de esta guía, además de cómo tus plantillas se modifican por medio de CSS incorporados y personalizados..

Code Editor (Editor de código)
El editor de código de HubSpot es un IDE poderoso que te permite codificar archivos CSS, archivos Javascripte incluso plantillas de HTML. Mientras codificas o editas tus hojas de estilo, puedes visualizar una vista previa en vivo de cómo se verán los efectos de los cambios que realices a tus plantillas, sin afectar tu contenido publicado y sin dejar la aplicación. Además de previsualizar tus ediciones en vivo, el editor de código también aprovecha muchas otras características útiles de IDE, tal como resaltar la sintaxis, autoguardar y autocerrar las etiquetas, la auto-sangría y más.
Aprenderás más acerca de cómo usar este editoren secciones posteriores de esta guía.

CSS Principal
El CSS principal es un archivo de CSS global que aplica a todas tus plantillas de HubSpot. El CSS principal es la ubicación ideal para darle estilo a menús, formularios y otros módulos estándar que aparecen a lo largo de tus plantillas. Usar este archivo les ahorra tiempo a los diseñadores y les ayuda a mantenerse organizados. Aprenderás más sobre el CSS principal en una sección posterior de esta guía.

Módulos personalizados
Auque las plantillas de HubSpot traen todo tipo de opciones de módulos diferentes, a veces los diseñadores pueden desear una solución más personalizada para sus profesionales del marketing, sin tener que preocuparse de que los usuarios que no sean técnicos rompan su código. Los módulos personalizados son módulos codificados reutilizables que les permiten a los diseñadores trabajar con variables personalizadas, detrás de escena, a la vez que le permiten a los profesionales del marketing la flexibilidad para personalizar sus contenidos.

Un profesional del marketing puede personalizar los contenidos de este módulo al seleccionar imágenes y texto al nivel de la página, sin necesidad de tocar el código.

File Manager (Administrador de archivos)
El Administrador de archivos de HubSpot almacena todos los activos que uses para crear contenido. Esta herramienta te permite subir archivos PDF, imágenes, videos, archivos de audio, tipografías y más. El Administrador de diseño te proporciona acceso a todos estos activos creativos y te permite subir archivos nuevos rápidamente sin tener que dejar la aplicación. Aprenderás cómo subir y acceder a tus archicos por medio del Administrador de diseño en una sección posterior de esta guía.
