Nota: Este contenido se tradujo a través de un software y es posible que no haya sido revisado. La versión en inglés se considera, por tanto, la versión oficial y es posible que haya sido actualizada. Para acceder a la versión en inglés, haz clic aquí.
Design Manager

Utiliza el inspector para diseñar tu plantilla

Última actualización: octubre 29, 2019

Requisitos

Marketing Hub  Professional, Enterprise
Básico
HubSpot CMS

Una vez que hayas estructurado tu plantilla y agregado contenido predeterminado, es momento de pensar en la presentación estética de tu sitio. 

El inspector se encuentra en el lado derecho del administrador de diseño. Aquí es donde puedes editar las propiedades de un diseño, módulo o grupo, además de agregar módulos a un diseño de arrastrar y soltar. Cuando se trata del estilo de tu plantilla, puedes usar el inspector para:

  • Adjuntar hojas de estilo o archivos JavaScript a tu plantilla
  • Agregar marcadores HTML de encabezado o pie de página a tu plantilla
  • Agrega clases de CSS personalizadas y estilos en línea a un módulo o grupo específico

Personaliza las opciones de encabezado y cuerpo de tu plantilla

Cuando accedes a tu plantilla en el administrador de diseño, verás el logotipo del diseño en el lado derecho si no tienes módulos seleccionados. Las ediciones realizadas en el inspector de diseño afectarán toda la plantilla. Aquí puedes personalizar las opciones de encabezado y de cuerpo de tu plantilla.

Adjuntar hojas de estilo y archivos JavaScript

En las opciones Hojas de estilo enlazado y Archivos JavaScript enlazados, haz clic en Agregar para seleccionar una hoja de estilo o archivo JavaScript para adjuntar a la plantilla. También puedes elegir incluir, excluir o usar las hojas de estilo predeterminadas de dominio en la lista desplegable Hojas de estilo del dominio.

Puedes obtener más información sobre cómo crear y editar archivos CSS para diseñar tu sitio aquí.

Agregar marcadores HTML de encabezado o de pie de página

En los campos Marcadores adicionales y Marcadores adicionales antes de , puedes agregar los marcadores HTML de encabezado o de pie de página que se aplicarán a la plantilla.Agrega una clase o estilo en línea al cuerpo de la plantillaEn el campo Clases del cuerpo, puedes agregar un atributo de clase de cuerpo a la plantilla. También puedes agregar estilos inline al texto del cuerpo de la plantilla en el campo Estilo del cuerpo en línea.

Personaliza las opciones de estilo de tu módulo o grupo

Cuando selecciones un módulo específico en tu plantilla, aparecerá el inspector del módulo. Cuando selecciones un grupo de módulos en tu plantilla, aparecerá el inspector del grupo. El inspector te permite personalizar las opciones de estilo del módulo o grupo.

Dependiendo de si personalizas un módulo de plantilla de correo electrónico, un módulo de página o un grupo de módulos, las opciones de estilo presentadas variarán. El ejemplo siguiente muestra las opciones de estilo disponibles para un módulo de texto enriquecido en una plantilla de página.

Agregar una clase CSS

http://www.w3schools.com/tags/att_global_class.asp

El atributo de clase HTML te permite asignar clases a módulos en tus plantillas para que se les pueda dar estilos usando CSS. Si bien tu plantilla ya tendrá muchas clases predeterminadas, las clases personalizadas dan a los diseñadores más control sobre la apariencia de una plantilla, mientras que aún mantienen la flexibilidad del editor de diseño de arrastrar y soltar.  

http://www.campaignmonitor.com/css/

Nota: Esta opción no está recomendada para usar en plantillas de correo electrónico porque las etiquetas de estilo no son compatibles con algunos clientes de correo electrónico.

.bio { background: #CCCCCCCC; }

También puedes dirigirte a elementos dentro de tu módulo, no solo la división del contenedor. Para ello, puedes usar selectores descendientes anidados o directos. Por ejemplo, para dirigirte a todo el texto del párrafo dentro del módulo con la clase bio, podrías escribir un selector de CSS anidado como en el ejemplo a continuación:


.bio p {
color.»: #000000;
}

Agregar estilo en línea

El estilo en línea es CSS que se escribe dentro de tus etiquetas HTML. Agregar propiedades de CSS y valores al campo Estilo en línea para un módulo o grupo se aplicará tu código a la división del contenedor del grupo o módulo.

En el siguiente ejemplo, la sangría y el color se usan para ajustar el espaciado y el color del módulo. Esto agregará el atributo HTML style= "margin-top: 30px; color: #00349e; " a la etiqueta de división del contenedor del módulo.

Si bien esta opción puede ser útil para ajustar rápidamente una plantilla de página en particular, es menos flexible que usar el campo CSS class porque tienes que hacer cambios en el código dentro de módulos individuales, en lugar de en una hoja de estilo global de plantilla.

http://www.campaignmonitor.com/css/

Los clientes de correo electrónico son más limitados en sus capacidades de envío de HTML y CSS que los navegadores web modernos. Como tal, el estilo en línea es la mejor manera de diseñar tus correos electrónicos en los clientes de correo electrónico. Los módulos de plantillas de correos electrónicos tienen opciones fáciles de usar para agregar estilos en línea, que se muestran a continuación.

Agregar HTML de envoltura

Si bien el editor de diseño de arrastrar y soltar no proporciona acceso completo a marcadores HTML de una plantilla, puedes agregar HTML de envoltura adicional alrededor de ciertos módulos. Esta opción es para diseñadores que necesitan control adicional sobre el HTML de una plantilla, pero aún deseas mantener la flexibilidad de usar el editor de diseño de arrastrar y soltar a lo largo de una plantilla HTML sin procesar.

Para implementar esta característica, agrega tus marcadores HTML y la ficha HTML de HubL (donde el código del módulo aparecerá) en el campo Wrapping HTML. El ejemplo anterior muestra una etiqueta HTML5

Agrega un ID de CSS (solo grupos de módulos)

http://www.w3schools.com/tags/att_global_id.asp