Cómo usar el contenido predeterminado y las opciones avanzadas para optimizar tus plantillas para la creación de contenido

Última actualización: December 29, 2016

Una gran ventaja del COS de HubSpot es la capacidad de optimizar tus plantillas para permitir a tus profesionales del marketing que se enfoquen exclusivamente en la creación de contenido. Mientras que los creadores de páginas aún tienen la capacidad de tomar muchas de las decisiones estilísticas en el editor, cuanto más tiempo inicial se invierta para establecer el contenido y la apariencia de una plantilla, más será el tiempo ahorrado para tus profesionales del marketing.

En esta sección usarás contenido predeterminado y las opciones de CSS para optimizar tus plantillas para la creación de contenido.

Agregar contenido pretederminado del módulo

HubSpot Academy

Mejores prácticas

Cuando se crea una plantilla en el Creador de plantillas, se puede pensar en ella como la creación de la página de "modelo" o correo electrónico que todas las otras páginas o mensajes de correo electrónico se basarán.

En las secciones anteriores de esta guía has aprendido sobre cómo estructurar tus plantillas y sobre los diversos módulos que están disponibles en el Creador de plantillas. Una vez que hayas creado una plantilla con los módulos correctos, tendrás que añadir contenido predeterminado para completar la plantilla.

Lee más

Agregar contenido predeterminado te permite sustituir tu propio texto y activos para la copia de inventario del módulo, imágenes de marcador de posición, etc. Al insertar contenido predeterminado, puedes establecer todo el formato y las opciones para ese módulo en particular.

Una vez que estés listo para crear una página o correo electrónico a partir de una plantilla, puedes intercambiar y realizar modificaciones al contenido predeterminado de tu plantilla fácilmente.   

Para agregar contenido predeterminado a un módulo, selecciona configuración en el módulo que te gestearía personalizar y haz clic en Opciones de edición.

Opciones de edición

Puedes agregar una  Etiqueta  internapara mantener organizada tu plantilla. La etiqueta no afecta el código HTML de tus plantillas, pero puede ser útil para que estés organizado al trabajar con muchas plantillas. En el ejemplo a continuación, las etiquetas de "Barra lateral" y "Biografía" se han aplicado a un módulo de grupo y a un módulo de texto enriquecido.  

Etiqueta

En la sección de Módulos predeterminados de la pantalla emergente de Opciones de edición  se muestra cualquier opción predeterminada que ese módulo puede realizar. Por ejemplo, un módulo de formulario te permitirá elegir qué formulario debe aparecer por defecto en una plantilla, mientras que un módulo de texto enriquecido te permitirá agregar tu propia copia a ese módulo. 

Contenido predeterminado

Después de agregar tu contenido o de configurar tus opciones predeterminados, puedes ver una vista previa de tu plantilla con tu contenido predeterminado al seleccionar el botón Vista previa . Con el Administrador de diseño y el contenido predeterminado, nunca tienes que dejar la aplicación para ver cómo se verán tus páginas.

Cuando estés listo para publicar esos cambios, presiona Publicar cambios para actualizar la plantilla.

Bloquear módulos

A veces habrá áreas de una plantilla que necesitan una personalización avanzada o que se les agregue HTML puro, a los que no quieres que tengan acceso tus creadores de contenido. Por ejemplo, si tienes una plantilla de Página de destino con una galería de imágenes de HTML codificado personalizado, puede que no quieras que tus usuarios internos puedan tener acceso a ese código desde la pantalla del editor de contenido. Si quieres evitar que tus creadores de contenido puedan editar un módulo desde el editor de contenido, puedes bloquear el módulo con un clic en Configuración > Bloquear módulo.  Una vez que esté bloqueado, esta opción se cambiará a Desbloquear módulo.

En el siguiente ejemplo, se está agregando código incrustado de un  feed de Twitter a un módulo de HTML personalizado. Como los creadores de contenido no necesitarán trabajar con este feed de Twitter, el módulo está bloqueado.

Módulo de bloqueo

Después de bloquear un módulo, aparecerá un símbolo de candado en el mismo. También ten en cuenta que todos los módulos en una plantilla de blog se bloquean automáticamente y que puedes desbloquearlos para hacer que esas secciones de tu plantilla sean editables a nivel del post. Recuerda que una vez que se sobreescribe el contenido del módulo a nivel de página o de post, cambiar el contenido predeterminado del módulo no afectará esas páginas modificadas.

Símbolo de bloqueo

Personalizar las opciones de CSS de tu plantilla

Una vez que tengas tu plantilla estructurada y hayas agregado contenido de archivo, estás listo para empezar a pensar en la presentación estética de tu sitio. En una sección posterior de esta guía, aprenderás cómo puedes usar archivos de CSS para diseñar el aspecto de tu sitio, pero dependiendo de la complejidad del diseño de tu sitio, puede que necesites personalizar tu plantilla un poco más antes de estar listo para comenzar a escribir tu CSS.

Como se mencionó previamente, la estructura y el contenido de una plantilla de HubSpot están compilados en un sitio web HTML. Si bien no tienes acceso completo a la marcación de HTML, cuando construyes plantillas con el Creador de plantillas puedes usar la función Editar CSS para agregar una clase, estilo atributos de identificación ,así como marcación adicional de envoltura a tus módulos para ayudar a diferenciar secciones de tu plantilla a diseñar.

Selecciona un módulo que te gustaría personalizar con un clic en configuración y otro en Editar CSS.

Editar CSS

Las opciones que se te muestren van a variar dependiendo de si estás personalizando un módulo de plantilla de correo electrónico, un módulo de página, o un grupo de módulo.

Clase personalizada de CSS

El atributo de clase de HTML te permite nombrar módulos en tus plantillas para que puedan diseñarse con CSS. Mientras que tus plantillas ya tendrán muchas clases predeterminadas, las clases personalizadas les dan a los diseñadores más control sobre la apariencia de una plantilla a la vez que mantienen la flexibilidad de un Creador de plantillas.  

En el siguiente ejemplo, se está agregando una clase de "biografía" a un módulo de texto enriquecido. Esto agregará la clase de atributo HTML ="bio" a la etiqueta de contenendor de división del módulo (una etiqueta de HTML que especifica un área o división de una página). Esencialmente por nombrar este módulo, ahora puedes dirigir esta clase o elementos de destino dentro de esta clase personalizada en tu archivo CSS. No se recomienda el uso de esta opción para plantillas de correo electrónico porque las etiquetas de estilo no son compatibles con algunos clientes de correo electrónico .  

Clase personalizada

En tu CSS principal o archivo CSS personalizado, puedes orientar el contenedor de división para diseñar, al seleccionar tu clase personalizada y aplicar varias propiedades de CSS. Esta guía no tiene como objetivo enseñar CSS, pero mostrará algunos ejemplos sencillos de cómo orientar clases personalizadas con CSS. Por ejemplo, para colorear el fondo del módulo con una clase personalizada de biografía, puedes escribir CSS como en el ejemplo a continuación:


background: #CCCCCC;
}
Quizá también quieras orientar elementos dentro de tu módulo, no solo la división de contenedor. En este caso, puedes usar selectores anidados o descendientes directos. Por ejemplo, si quieres orientar todo el texto que esté en párrafos dentro del módulo de biografía, puedes escribir un selector de CSS anidado como en el ejemplo a continuación:


color: #000000;
}

Estilo en línea personalizado

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

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

Aunque esta opción puede ser útil para soluciones rápidas para una plantilla de página en particular, resulta menos fácil de mantener que usar la función de la clase descrita anteriormente, ya que hay que hacer cambios en el código en módulos individuales en vez de en una hoja de estilo global.

Estilo en línea

Los clientes de correo electrónico resultan ser mucho más limitados en su capacidad para representar HTML y CSS que los buscadores web modernos; por lo tanto, CSS en línea es la mejor manera de diseñar tus correos electrónicos de manera que puedan ser compatibles para todos los clientes. Los módulos de correo electrónico tienen opciones adicionales fáciles de usar para los usuarios para agregar CSS en línea, como se ilustra a continuación.  

Enviar CSS por correo electrónico

Envoltura de HTML personalizada

Aunque el editor de "arrastrar y soltar" del Creador de plantillas no les permite a los diseñadores el acceso completo a las especificaciones HTML de una página, puedes agregar una envoltura adicional de HTML alrededor de ciertos módulos.   Esta opción es para usuarios y diseñadores avanzados que necesitan un control adicional sobre el HTML de una plantilla, pero que aún quieran mantener la flexibilidad de usar un Creador de plantlllas por encima de una plantilla de HTML que no pueda modificarse.

Para implementar esta función, escribe tu marcación de HTML y luego inserta el código HubL html , donde quieres que se vea el código del módulo. En el siguiente ejemplo se usa una etiqueta lateral HTML5 para envolver el módulo.

Envoltura de HTML

Identificación de CSS personalizado

El atributo de identififación de HTML está disponible como una opción en cualquier grupo de módulos. Las identificaciones son similares a las clases en cuanto a que te permiten nombrar áreas de tu plantilla para ser orientada en tu CSS.Pero a diferencia de las clases, las identificaciones deben ser únicas (deben aparecer una sola vez por plantilla) y pesar más en términos de la especificidad de CSS. 

En el siguiente ejemplo se está dando una identificación de barra lateral a un grupo de módulos en una página.  Esta entrada se actualizará con la etiqueta que contiene la división del grupo para tener la identificación de atributo de HTML = "barra lateral" . Básicamente, por nombrar este grupo de módulo, ahora puedes orientar esta clase o elementos de destino dentro de esta clase personalizada en tu archivo CSS.

Identificación personalizada

Para dirigirte a todo el grupo con una identificación personalizada y agregar un borde, podrías escribir CSS como en el ejemplo a continuación:

Agregarías tu CSS, tu CSS principal o archivos personalizados de CSS adicionales.

#sidebar{
border: 1px solid red;
}

Editar el cuerpo del CSS

Por último, tienes la posibilidad de agregar un atributo de clase o CSS en línea al cuerpo de la etiqueta HTML y de agregar archivos CSS adicionales, guiones y otros códigos a la etiqueta de encabezado de la plantilla. Para acceder a estas opciones, haz clic en el menú Editar en la parte superior del Administrador de diseño.

Cuerpo del CSS

Artículo anterior:

Certificación Inbound Marketing

Artículo siguiente: