Un recorrido rápido por el Administrador de diseño

Última actualización: December 29, 2016

Diseñar un sitio web en cualquier plataforma puede requerir el uso de varias herramientas diferentes, tales como un editor de texto/IDE, un cliente FTP, un CMS (sistema de gestión de contenidos) y más.  Si todas esas siglas no son suficientemente intimidantes, intentar mantenerte organizado con toda la edición, el almacenamiento, los elementos que hay que subir y las actualizaciones pueden lentificar el tiempo que se necesita para que hacer que tu sitio esté en vivo.  Y una vez que lo está, puede ser que no tenga la flexibilidad que sus profesionales de marketing desean en términos de opciones de diseño, lo que puede llevar a tener que llamar al diseñador constantemente para hacer cambios.

El Administrador de diseño de HubSpot combina todas las herramientas que necesitan los diseñadores para construir sitios web de avanzada, a la vez que les da a los profesionales del marketing la flexibilidad de desean al crear contenido. Si eres un diseñador web con experiencia, con ganas de aprender cómo construir tu primer sitio en el COS (Sistema de optimización de contenidos) de HubSpot o un profesional del marketing que crea contenidos y quieres aprender más acerca de la construcción de la estructura y el estilo de tus páginas y correo electrónico existentes, esta Guía del usuario te proporciona tutoriales detallados y mejores prácticas para diseñar en HubSpot. Si estás buscando ejemplos de códigos específicos y documentación de referencia, consulta designers.hubspot.com.

En esta sección de la Guía del usuario, obtendrás un recorrido por todas las características del Administrador de diseño.

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 ).

Navegación del 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:

Plantillas y archivos codificados

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.

Buscar plantillas

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..

Pestañas

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 codificadosmás adelante en esta guía. 

Plantilla nueva

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..  

Template Builder (Creador de plantillas)

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.  

Code Editor (Editor de código)

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.

CSS Principal

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.  

Módulo personalizado

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.  

Vista previa del Módulo personalizado

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.  

File Manager (Administrador de archivos)

Artículo anterior:

Certificación Inbound Marketing

Artículo siguiente: